/**
 * CSS de overrides para WordPress
 * Solo se aplica en la página del test para eliminar contenedores del tema
 */

/* Ocultar títulos del tema */
.gdt-test-page .entry-title,
.gdt-test-page .page-title,
.gdt-test-page header.entry-header,
.gdt-test-page .entry-header,
.gdt-test-page h1.entry-title,
.gdt-test-page .page-header {
    display: none !important;
}

/* Eliminar contenedores del tema que limitan ancho/padding */
.gdt-test-page #primary,
.gdt-test-page .site-main,
.gdt-test-page .content-area,
.gdt-test-page .entry-content,
.gdt-test-page .entry,
.gdt-test-page .post,
.gdt-test-page .page-content,
.gdt-test-page .content-wrapper,
.gdt-test-page .main-content,
.gdt-test-page article {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Layout wrapper - solo afecta en big desktop, no interfiere en pantallas normales */
.gdt-test-page .gdt-layout {
    width: 100%;
    display: block; /* Por defecto es block, solo flex en big desktop */
    margin: 0;
    padding: 0;
}

.gdt-test-page .gdt-layout__main {
    width: 100%;
    display: block; /* Por defecto es block, solo flex en big desktop */
    margin: 0;
    padding: 0;
}

/* Asegurar que el root del quiz ocupe todo el ancho y esté centrado */
.gdt-test-page #gdt-root {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    --gdt-scale: 1; /* Variable de escala por defecto */
}

/* Contenedor del quiz centrado como en index.html */
.gdt-test-page #gdt-root .gdt-container {
    width: 100%;
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 32px 16px 32px !important;
    box-sizing: border-box;
    flex-shrink: 0; /* Evitar que se comprima en flex container */
}

/* Stage wrapper para el contenido del quiz */
.gdt-test-page #gdt-root .gdt-stage {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

/* Eliminar padding-bottom de contenedores del tema */
.gdt-test-page .site-main,
.gdt-test-page .content-area,
.gdt-test-page .entry-content {
    padding-bottom: 0 !important;
}

/* Arreglar el scroll y layout en WordPress - SIN min-height exagerado */
.gdt-test-page #gdt-root .gdt-quiz-main {
    min-height: auto !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
    display: flex !important;
    flex-direction: row; /* Mantener row para centrado horizontal */
}

@media (min-width: 768px) {
    .gdt-test-page #gdt-root .gdt-quiz-main {
        min-height: auto !important;
        align-items: flex-start !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100%;
        display: flex !important;
        flex-direction: row; /* Mantener row para centrado horizontal */
    }
    
    /* Reducir padding en tablet/desktop */
    .gdt-test-page #gdt-root .gdt-container {
        padding: 40px 16px 40px !important;
    }
}

/* Quitar "caja" del header del quiz - sin fondo/borde/sombra */
body.gdt-test-page #gdt-root header.gdt-quiz-header {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    margin: 0 0 24px 0 !important;
    position: static !important;
}

body.gdt-test-page #gdt-root header.gdt-quiz-header .gdt-container {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 16px !important;
    max-width: 1100px;
    margin: 0 auto !important;
}

body.gdt-test-page #gdt-root header.gdt-quiz-header .gdt-header-content {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Quitar "caja" de las preguntas - sin fondo/borde/sombra */
body.gdt-test-page #gdt-root .quiz-step {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-top: 16px !important;
    border-radius: 0 !important;
}

/* Ocultar cualquier texto "Zerion" o footer del quiz (defensa final) */
.gdt-test-page #gdt-root .gdt-footer-text,
.gdt-test-page #gdt-root .gdt-quiz-footer {
    display: none !important;
}

/* Asegurar que el footer del sitio sea estático y aparezca al final del contenido */
.gdt-test-page footer,
.gdt-test-page .site-footer,
.gdt-test-page #colophon {
    position: static !important;
    margin-top: auto !important;
}

/* Asegurar que el body no tenga padding-bottom artificial */
.gdt-test-page {
    padding-bottom: 0 !important;
}

/* Grid 3 columnas para recomendaciones adicionales */
body.gdt-test-page #gdt-root .gdt-additional-recommendations {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
    align-items: stretch;
    float: none !important;
}

/* Tablet: 2 columnas */
@media (max-width: 1023px) {
    body.gdt-test-page #gdt-root .gdt-additional-recommendations {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Móvil: 1 columna */
@media (max-width: 767px) {
    body.gdt-test-page #gdt-root .gdt-additional-recommendations {
        grid-template-columns: 1fr !important;
    }
}

/* Card styling: mantener coherencia */
body.gdt-test-page #gdt-root .gdt-reco-card {
    height: 100%;
    float: none !important;
}

/* ============================================
   Layout para BIG DESKTOP (>=1440px)
   ============================================ */
@media (min-width: 1440px) and (min-height: 900px) {
    /* Layout flex para sticky footer */
    body.gdt-test-page .gdt-layout {
        min-height: calc(100vh - var(--gdt-header-h, 0px));
        display: flex;
        flex-direction: column;
    }
    
    /* Main content area con flex para centrado vertical ligero */
    body.gdt-test-page .gdt-layout__main {
        flex: 1;
        display: flex;
        justify-content: center;   /* centrado horizontal */
        align-items: center;       /* Centrado vertical suave */
        padding-top: 40px;         /* Padding reducido arriba */
        padding-bottom: 40px;      /* Padding reducido abajo */
    }
    
    /* Limitar ancho para que no quede "perdido" */
    body.gdt-test-page #gdt-root {
        width: 100%;
        max-width: 1100px;
    }
    
    /* Ajustar padding del container en big desktop - reducir aún más */
    body.gdt-test-page #gdt-root .gdt-container {
        padding: 24px 16px 24px !important;
    }
}

/* ============================================
   ESCALADO PARA BIG DESKTOP (>=1600px)
   ============================================ */
@media (min-width: 1600px) {
    /* Aumentar escala en big desktop */
    body.gdt-test-page #gdt-root {
        --gdt-scale: 1.14; /* 14% más grande */
    }
    
    /* Font-size base del quiz */
    body.gdt-test-page #gdt-root {
        font-size: calc(16px * var(--gdt-scale));
    }
    
    /* Títulos principales */
    body.gdt-test-page #gdt-root .quiz-title {
        font-size: calc(2rem * var(--gdt-scale)) !important;
        line-height: 1.2;
    }
    
    /* Preguntas del quiz */
    body.gdt-test-page #gdt-root .quiz-question {
        font-size: calc(1.5rem * var(--gdt-scale)) !important;
        line-height: 1.3;
    }
    
    /* Texto pequeño (micro) */
    body.gdt-test-page #gdt-root .quiz-micro {
        font-size: calc(1.125rem * var(--gdt-scale)) !important;
    }
    
    body.gdt-test-page #gdt-root .quiz-step .quiz-micro {
        font-size: calc(1rem * var(--gdt-scale)) !important;
    }
    
    /* Opciones de radio (cards) */
    body.gdt-test-page #gdt-root .radio-card-content {
        padding: calc(1rem * var(--gdt-scale)) calc(1.5rem * var(--gdt-scale)) !important;
        border-radius: calc(12px * var(--gdt-scale));
        gap: calc(1rem * var(--gdt-scale));
    }
    
    /* Círculo con letra (A, B, C) */
    body.gdt-test-page #gdt-root .radio-card-label {
        width: calc(28px * var(--gdt-scale)) !important;
        height: calc(28px * var(--gdt-scale)) !important;
        border-width: calc(2px * var(--gdt-scale));
        font-size: calc(0.875rem * var(--gdt-scale)) !important;
    }
    
    /* Texto de las opciones */
    body.gdt-test-page #gdt-root .radio-card-text {
        font-size: calc(1rem * var(--gdt-scale)) !important;
        line-height: 1.5;
    }
    
    /* Espaciado entre opciones */
    body.gdt-test-page #gdt-root .radio-cards {
        gap: calc(1rem * var(--gdt-scale)) !important;
    }
    
    /* Botones */
    body.gdt-test-page #gdt-root .btn {
        padding: calc(1rem * var(--gdt-scale)) calc(2rem * var(--gdt-scale)) !important;
        font-size: calc(1rem * var(--gdt-scale)) !important;
        border-radius: calc(12px * var(--gdt-scale));
        border-width: calc(2px * var(--gdt-scale));
    }
    
    body.gdt-test-page #gdt-root .btn-primary {
        border-radius: calc(12px * var(--gdt-scale));
    }
    
    /* Barra de progreso */
    body.gdt-test-page #gdt-root .progress-bar {
        height: calc(8px * var(--gdt-scale)) !important;
        border-radius: calc(8px * var(--gdt-scale));
    }
    
    /* Texto de progreso */
    body.gdt-test-page #gdt-root .progress-text {
        font-size: calc(0.875rem * var(--gdt-scale)) !important;
    }
    
    /* Padding de los steps */
    body.gdt-test-page #gdt-root .quiz-step {
        padding: calc(2rem * var(--gdt-scale)) !important;
        border-radius: calc(16px * var(--gdt-scale));
    }
    
    /* Espaciados generales */
    body.gdt-test-page #gdt-root .quiz-fieldset {
        margin-bottom: calc(1.5rem * var(--gdt-scale)) !important;
    }
    
    body.gdt-test-page #gdt-root .progress-wrapper {
        margin-bottom: calc(1.5rem * var(--gdt-scale)) !important;
    }
    
    /* Input de email */
    body.gdt-test-page #gdt-root input[type="email"],
    body.gdt-test-page #gdt-root input[type="text"] {
        padding: calc(0.875rem * var(--gdt-scale)) calc(1rem * var(--gdt-scale)) !important;
        font-size: calc(1rem * var(--gdt-scale)) !important;
        border-radius: calc(12px * var(--gdt-scale));
    }
    
    /* Títulos de resultados */
    body.gdt-test-page #gdt-root .result-title {
        font-size: calc(2.5rem * var(--gdt-scale)) !important;
        line-height: 1.2;
    }
    
    /* Badge de resultado */
    body.gdt-test-page #gdt-root .result-badge {
        padding: calc(0.75rem * var(--gdt-scale)) calc(1.5rem * var(--gdt-scale)) !important;
        border-radius: calc(50px * var(--gdt-scale));
        font-size: calc(1.125rem * var(--gdt-scale)) !important;
        gap: calc(0.5rem * var(--gdt-scale));
    }
    
    body.gdt-test-page #gdt-root .result-badge-icon {
        font-size: calc(1.5rem * var(--gdt-scale)) !important;
    }
    
    /* Descripción del resultado */
    body.gdt-test-page #gdt-root .result-diagnosis {
        font-size: calc(1.125rem * var(--gdt-scale)) !important;
        line-height: 1.6;
    }
    
    /* Títulos de recomendaciones */
    body.gdt-test-page #gdt-root .recommendation-title {
        font-size: calc(1.75rem * var(--gdt-scale)) !important;
        line-height: 1.3;
    }
    
    /* Cards de productos/servicios */
    body.gdt-test-page #gdt-root .product-name,
    body.gdt-test-page #gdt-root .service-name {
        font-size: calc(1.5rem * var(--gdt-scale)) !important;
        line-height: 1.3;
    }
    
    body.gdt-test-page #gdt-root .product-description,
    body.gdt-test-page #gdt-root .service-description {
        font-size: calc(1rem * var(--gdt-scale)) !important;
        line-height: 1.5;
    }
    
    /* Cards de recomendaciones */
    body.gdt-test-page #gdt-root .product-card,
    body.gdt-test-page #gdt-root .service-card {
        padding: calc(1.5rem * var(--gdt-scale)) !important;
        border-radius: calc(16px * var(--gdt-scale));
    }
    
    /* Iconos de servicios */
    body.gdt-test-page #gdt-root .service-icon {
        width: calc(60px * var(--gdt-scale)) !important;
        height: calc(60px * var(--gdt-scale)) !important;
        font-size: calc(2rem * var(--gdt-scale)) !important;
    }
    
    /* Plan cards */
    body.gdt-test-page #gdt-root .plan-card {
        padding: calc(2rem * var(--gdt-scale)) !important;
        border-radius: calc(16px * var(--gdt-scale));
    }
    
    body.gdt-test-page #gdt-root .plan-name {
        font-size: calc(1.75rem * var(--gdt-scale)) !important;
    }
    
    body.gdt-test-page #gdt-root .plan-tagline {
        font-size: calc(1rem * var(--gdt-scale)) !important;
    }
    
    /* Lista de recomendaciones adicionales */
    body.gdt-test-page #gdt-root .gdt-additional-recommendations {
        gap: calc(24px * var(--gdt-scale)) !important;
    }
    
    body.gdt-test-page #gdt-root .gdt-reco-card {
        padding: calc(1.25rem * var(--gdt-scale)) !important;
        border-radius: calc(12px * var(--gdt-scale));
    }
    
    /* Aumentar ancho del container para acompañar el escalado */
    body.gdt-test-page #gdt-root .gdt-container {
        max-width: 1200px !important;
    }
}

/* ============================================
   FIX MÓVIL: Pantallas activas ocupan viewport y centran verticalmente
   ============================================ */
@media (max-width: 767px) {
    /* Reset padding del root en móvil */
    body.gdt-test-page #gdt-root {
        width: 100%;
        padding: 0 !important;
    }
    
    /* Contenedor del quiz en móvil */
    body.gdt-test-page #gdt-root .gdt-container {
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 20px 18px 28px !important;
    }
    
    /* BASE: cada pantalla activa (intro + step + email) debe ocupar viewport
       y usar grid para centrar verticalmente SI hay espacio */
    body.gdt-test-page #gdt-root #intro,
    body.gdt-test-page #gdt-root .quiz-intro,
    body.gdt-test-page #gdt-root .quiz-step,
    body.gdt-test-page #gdt-root .gdt-step,
    body.gdt-test-page #gdt-root .email-step {
        min-height: calc(100svh - var(--gdt-site-header-h, 72px)) !important;
        display: grid !important;
        align-content: center !important; /* centra vertical */
        justify-items: center !important; /* centra horizontal */
        padding-top: 18px !important;
        padding-bottom: 18px !important;
        box-sizing: border-box;
    }
    
    /* El form de email dentro del step-6 también debe estar centrado */
    body.gdt-test-page #gdt-root .email-step form,
    body.gdt-test-page #gdt-root .email-step .email-form-container {
        width: 100%;
        max-width: 520px;
    }
    
    /* Si algún step tiene contenido grande, que pueda crecer y scrollear */
    body.gdt-test-page #gdt-root .quiz-step,
    body.gdt-test-page #gdt-root .gdt-step {
        height: auto !important;
        min-height: calc(100svh - var(--gdt-site-header-h, 72px)) !important;
    }
    
    /* El bloque interior (tarjeta/step content) no debe estirarse raro */
    body.gdt-test-page #gdt-root .quiz-step > *,
    body.gdt-test-page #gdt-root .gdt-step > *,
    body.gdt-test-page #gdt-root #intro > *,
    body.gdt-test-page #gdt-root .quiz-intro > * {
        width: 100%;
        max-width: 520px; /* para que no se vea gigante en landscape */
    }
    
    /* Form dentro del step debe ocupar ancho completo */
    body.gdt-test-page #gdt-root .quiz-step form,
    body.gdt-test-page #gdt-root .quiz-step .quiz-fieldset {
        width: 100%;
        max-width: 520px;
    }
    
    /* Botón: ancho bonito */
    body.gdt-test-page #gdt-root button,
    body.gdt-test-page #gdt-root .btn,
    body.gdt-test-page #gdt-root .btn-primary {
        width: min(340px, 92%) !important;
        max-width: 340px !important;
    }
    
    /* Asegurar que el main no tenga min-height excesivo en móvil */
    body.gdt-test-page #gdt-root .gdt-quiz-main {
        min-height: auto !important;
        padding: 0 !important;
    }
    
    /* Los elementos ocultos con display:none no afectan (ya están ocultos por JS) */
    /* Solo los elementos visibles (display:block) tendrán el grid y min-height */
}