/**
 * Launch Page - Estilos Minimalistas
 * Design System: "Quiet Luxury"
 * Referencia: https://avada.website/launch/
 */

/* ============================================
   ESTILOS BASE: Logo
   ============================================ */

.launch-logo-img {
    width: auto !important;
    max-width: clamp(264px, 42vw, 384px) !important;
    max-height: clamp(108px, 21.6vh, 144px) !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    object-fit: contain !important;
}

/* Logo más grande en móviles (40% más grande) */
@media screen and (max-width: 768px) {
    .launch-logo-img {
        max-width: clamp(370px, 58.8vw, 538px) !important; /* 40% más grande: 264*1.4=370, 384*1.4=538 */
        max-height: clamp(151px, 30.24vh, 202px) !important; /* 40% más grande: 108*1.4=151, 144*1.4=202 */
    }
}

@media screen and (max-width: 480px) {
    .launch-logo-img {
        max-width: clamp(370px, 70vw, 538px) !important; /* Aún más grande en móviles pequeños */
        max-height: clamp(151px, 35vh, 202px) !important;
    }
}

/* Asegurar legibilidad del tagline en el logo */
.launch-logo-img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* ============================================
   BASE: Sin scroll, ajuste viewport
   ============================================ */

body.launch-page {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    min-height: 100vh !important;
    height: auto !important;
    width: 100% !important;
}

/* En móviles, permitir scroll si el contenido es más alto */
@media screen and (max-width: 768px) {
    body.launch-page {
        position: relative !important;
        overflow-y: auto !important;
    }
}

body.launch-page #page {
    min-height: 100vh !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.launch-page #primary {
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================
   PARTÍCULAS: Contenedor y estilos
   ============================================ */

#launch-particles {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

/* Asegurar que las partículas sean visibles pero sutiles */
#launch-particles canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
}

.launch-hero {
    min-height: 100vh !important;
    height: auto !important;
    overflow: visible !important;
}

.launch-content {
    min-height: 100vh !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: clamp(8px, 1vh, 15px) clamp(15px, 2vw, 20px) clamp(12px, 2vh, 20px) clamp(15px, 2vw, 20px) !important;
    box-sizing: border-box !important;
    gap: clamp(1.5vh, 2vh, 2.5vh) !important;
}

/* Ocultar scrollbar pero mantener funcionalidad */
.launch-content::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

.launch-top {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 900px !important;
    padding-top: clamp(0.5vh, 1vh, 1.5vh) !important;
}

.launch-middle {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 900px !important;
}

.launch-bottom {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 900px !important;
    padding-bottom: clamp(0.5vh, 1vh, 1.5vh) !important;
}

.launch-footer {
    padding-bottom: clamp(1vh, 2vh, 3vh) !important;
    margin-bottom: 0 !important;
    margin-top: 0.5vh !important;
}

/* Asegurar que el footer siempre sea visible en móviles - Reglas consolidadas */
@media screen and (max-width: 480px) {
    .launch-footer {
        padding-bottom: clamp(2.5vh, 5vh, 6vh) !important;
    }
}

@media screen and (max-height: 700px) {
    .launch-footer {
        padding-bottom: clamp(2.5vh, 4vh, 6vh) !important;
    }
    
    /* En pantallas con poca altura, reducir otros espacios para dar más espacio al footer */
    .launch-content {
        gap: clamp(1vh, 1.5vh, 2vh) !important;
    }
}

/* Ocultar scrollbar pero mantener funcionalidad */
.launch-content::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

/* ============================================
   RESPONSIVE: Launch Page
   ============================================ */

@media screen and (max-width: 768px) {
    .launch-hero {
        background-attachment: scroll !important;
    }

    .launch-content {
        padding: clamp(6px, 0.8vh, 10px) clamp(8px, 2vw, 12px) clamp(10px, 1.5vh, 15px) clamp(8px, 2vw, 12px) !important;
        gap: clamp(1.2vh, 1.8vh, 2.2vh) !important;
    }

    .launch-top {
        padding-top: clamp(0.3vh, 0.8vh, 1.2vh) !important;
    }

    .launch-logo {
        margin-bottom: clamp(0.8vh, 1.2vh, 1.5vh) !important;
    }

    .launch-headline {
        margin-bottom: clamp(0.6vh, 1vh, 1.2vh) !important;
    }

    #launch-email-form {
        flex-direction: column !important;
    }

    #launch-email-form input {
        min-width: 100% !important;
    }

    #launch-email-form button {
        width: 100% !important;
    }

    #countdown-timer {
        gap: clamp(6px, 1vw, 10px) !important;
    }

    .launch-countdown {
        margin-top: clamp(0.8vh, 1.2vh, 1.5vh) !important;
        margin-bottom: clamp(0.8vh, 1.2vh, 1.5vh) !important;
    }

    .launch-social {
        margin-bottom: clamp(0.6vh, 1vh, 1.2vh) !important;
    }

    .launch-contact {
        margin-bottom: clamp(0.4vh, 0.8vh, 1vh) !important;
    }

    .launch-bottom {
        padding-bottom: clamp(0.5vh, 1vh, 1.5vh) !important;
    }
    
    .launch-footer {
        padding-bottom: clamp(2vh, 4vh, 5vh) !important;
    }
}

@media screen and (max-width: 480px) {
    .launch-content {
        padding: clamp(4px, 0.6vh, 8px) clamp(6px, 2vw, 10px) clamp(8px, 1.2vh, 12px) clamp(6px, 2vw, 10px) !important;
        gap: clamp(1vh, 1.5vh, 2vh) !important;
    }

    .launch-top {
        padding-top: clamp(0.2vh, 0.6vh, 1vh) !important;
    }

    #countdown-timer {
        gap: clamp(4px, 0.8vw, 8px) !important;
    }

    .countdown-item {
        padding: clamp(6px, 1vh, 10px) clamp(6px, 1vw, 10px) !important;
        min-width: clamp(50px, 7vw, 65px) !important;
    }
}

@media screen and (max-height: 700px) {
    .launch-content {
        padding: clamp(4px, 0.6vh, 8px) clamp(8px, 2vw, 12px) clamp(4px, 0.6vh, 8px) clamp(8px, 2vw, 12px) !important;
        gap: clamp(1vh, 1.5vh, 2vh) !important;
    }

    .launch-top {
        padding-top: 0.3vh !important;
    }

    .launch-logo {
        margin-bottom: 0.8vh !important;
    }

    .launch-headline {
        margin-bottom: 0.3vh !important;
    }

    .launch-logo-img {
        max-width: clamp(370px, 58.8vw, 538px) !important; /* 40% más grande: mantener valores grandes */
        max-height: clamp(151px, 30.24vh, 202px) !important; /* 40% más grande: mantener valores grandes */
    }

    .launch-headline {
        margin-bottom: 0.8vh !important;
    }

    .launch-headline h2 {
        font-size: clamp(1rem, 2.5vw, 1.75rem) !important;
        line-height: 1.2 !important;
    }

    .launch-headline p {
        font-size: clamp(0.75rem, 1.6vw, 0.95rem) !important;
        line-height: 1.3 !important;
    }

    .launch-form {
        margin-bottom: 0.8vh !important;
    }

    .launch-countdown {
        margin-top: 1vh !important;
        margin-bottom: 1vh !important;
    }

    .countdown-item {
        padding: clamp(6px, 1vh, 10px) clamp(8px, 1vw, 12px) !important;
        min-width: clamp(50px, 8vw, 70px) !important;
    }

    .countdown-number {
        font-size: clamp(1rem, 2.5vw, 1.5rem) !important;
    }

    .countdown-label {
        font-size: clamp(0.55rem, 1.1vw, 0.7rem) !important;
    }

    .launch-social {
        margin-bottom: 0.6vh !important;
    }

    .launch-social a {
        width: 32px !important;
        height: 32px !important;
    }

    .launch-social svg {
        width: 16px !important;
        height: 16px !important;
    }

    .launch-contact {
        margin-bottom: 0.5vh !important;
    }

    .launch-bottom {
        padding-bottom: clamp(0.5vh, 1vh, 1.5vh) !important;
    }
    
    .launch-footer {
        padding-bottom: clamp(2.5vh, 5vh, 6vh) !important;
    }
}

@media screen and (max-width: 768px) {
    .launch-logo-img {
        max-width: clamp(370px, 58.8vw, 538px) !important; /* 40% más grande: 264*1.4=370, 384*1.4=538 */
        max-height: clamp(151px, 30.24vh, 202px) !important; /* 40% más grande: 108*1.4=151, 144*1.4=202 */
    }

    .launch-social {
        margin-bottom: 1vh !important;
    }

    .launch-social a {
        width: 34px !important;
        height: 34px !important;
    }

    .launch-social svg {
        width: 17px !important;
        height: 17px !important;
    }
}

@media screen and (max-width: 480px) {
    .launch-logo-img {
        max-width: clamp(370px, 70vw, 538px) !important; /* 40% más grande: 264*1.4=370, 384*1.4=538 */
        max-height: clamp(151px, 35vh, 202px) !important; /* 40% más grande: 108*1.4=151, 144*1.4=202 */
    }

    .launch-social a {
        width: 32px !important;
        height: 32px !important;
    }

    .launch-social svg {
        width: 16px !important;
        height: 16px !important;
    }
}

/* ============================================
   HOVER EFFECTS: Botones y Formulario
   ============================================ */

#launch-email-form button:hover {
    background: #A69587 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(140, 129, 116, 0.3);
}

#launch-email-form input:focus {
    border-color: rgba(255, 255, 255, 0.6) !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}

.launch-footer a:hover,
.launch-contact a:hover {
    color: rgba(255, 255, 255, 1) !important;
}

/* ============================================
   REDES SOCIALES: Hover Effects
   ============================================ */

.launch-social a {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10 !important;
    cursor: pointer !important;
}

.launch-social a:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
    transform: translateY(-2px);
}

.launch-social svg {
    transition: transform 0.3s ease;
    pointer-events: none !important; /* El SVG no debe interceptar clics */
}

.launch-contact a {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10 !important;
    cursor: pointer !important;
}

.launch-social a:hover svg {
    transform: scale(1.1);
}

/* ============================================
   ANIMACIONES: Countdown
   ============================================ */

.countdown-item {
    transition: all 0.3s ease;
}

.countdown-item:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-2px);
}

/* ============================================
   OCULTAR HEADER Y FOOTER ESTÁNDAR
   ============================================ */

body.launch-page header,
body.launch-page .site-header,
body.launch-page nav,
body.launch-page .main-navigation,
.launch-page .site-header,
body.page-template-templates-page-launch-php header,
body.page-template-templates-page-launch-php .site-header,
body.page-template-templates-page-launch-php nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

body.launch-page footer,
body.launch-page .site-footer,
.launch-page .site-footer,
body.page-template-templates-page-launch-php footer,
body.page-template-templates-page-launch-php .site-footer {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Asegurar que el body ocupe toda la pantalla */
body.launch-page {
    margin: 0 !important;
    padding: 0 !important;
}

body.launch-page #page {
    margin: 0 !important;
    padding: 0 !important;
}

/* Ocultar cualquier elemento de navegación adicional */
body.launch-page .wp-block-navigation,
body.launch-page .primary-navigation,
body.launch-page .secondary-navigation {
    display: none !important;
}

/* ============================================
   OCULTAR COMPLETAMENTE HEADER Y FOOTER
   (Reglas adicionales para asegurar ocultación)
   ============================================ */

/* Ocultar TODOS los headers posibles */
body.launch-page #masthead,
body.launch-page header,
body.launch-page .site-header,
body.launch-page .main-header,
body.launch-page .header-wrapper,
body.launch-page nav,
body.launch-page .main-navigation,
body.launch-page .navigation-wrapper,
body.launch-page .site-branding,
body.launch-page .custom-header,
body.launch-page .wp-block-template-part[data-area="header"],
body.launch-page [role="banner"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Ocultar TODOS los footers posibles */
body.launch-page footer,
body.launch-page .site-footer,
body.launch-page .main-footer,
body.launch-page .footer-wrapper,
body.launch-page .kenkatsu-footer-premium,
body.launch-page .wp-block-template-part[data-area="footer"],
body.launch-page [role="contentinfo"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Asegurar que el body y contenedores principales no tengan padding/margin */
body.launch-page {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}

body.launch-page #page,
body.launch-page #wrapper,
body.launch-page .site,
body.launch-page .wp-site-blocks {
    margin: 0 !important;
    padding: 0 !important;
}

/* Asegurar que el main esté en la parte superior sin espacios */
body.launch-page #primary,
body.launch-page .site-main,
body.launch-page main {
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}