@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap'); /* fuente :contentReference[oaicite:6]{index=6} */

.tc-wrapper            { font-family: 'Oswald', sans-serif; line-height:1.4;}
.tc-screen             { display:none; padding:2vh 2vw; min-height:30vh; }
.tc-active             { display:block; }

/* ─── Intro ─── */
.tc-intro              { background:#A70B2C; color:#fff; text-align:center; position:relative; }
.tc-intro-title        { font-size:clamp(1.8rem,5vw,3.2rem); letter-spacing:0.5px; margin:0; }
.tc-intro-btn          { position:absolute; bottom:4vh; right:6vw; font-size:clamp(1.5rem,4vw,2.4rem); background:#fff; color:#A70B2C; border:none; padding:.2em .6em; border-radius:4px; cursor:pointer; }
.tc-intro-btn:hover    { background:#B71B3C; }

/* ─── Preguntas ─── */
.tc-question           { background:#fff; color:#30467d; }
.tc-grid               { display:flex; gap:2vw; align-items:flex-start; }
.tc-num                { font-size:15vw; font-weight:700; line-height:1; }
.tc-dot                { font-size:8vw; line-height:0; }
.tc-q-title            { font-size:clamp(1.4rem,3.2vw,2rem); margin:.3em 0 1em; }
.tc-option             { display:block; margin:.6em 0; cursor:pointer; font-size:clamp(1rem,2.4vw,1.25rem); }
.tc-option input       { margin-right:.5em; accent-color:#1E347E; }
.tc-btn                { background:#A70B2C; color:#fff; border:none; padding:.5em 1.2em; font-size:clamp(1rem,2.6vw,1.2rem); border-radius:3px; cursor:pointer; margin-top:1.4em; }

/* ─── Resultados ─── */
.tc-result             { background:#fff; color:#1E347E; }
.tc-result-title       { font-size:clamp(0.8rem,4vw,1.4rem); margin-bottom:.2em; }
.tc-result-text strong { font-size:clamp(3rem,2.4vw,1.25rem); max-width:60ch; margin-bottom:.3em;  line-height: 0.9em; }
.tc-result-text        { font-size:clamp(1rem,2.4vw,1.25rem); max-width:60ch; }

/* ─── Responsive tweaks ─── */
@media (max-width:768px){
   .tc-grid { flex-direction:column; align-items:center; }
   .tc-num  { font-size:26vw; }
}



.tc-btn-row      { display:flex; gap:1rem; justify-content:center; margin-top:1rem; flex-wrap:wrap; }
.tc-reset-btn    { background:#080304ab; }                 /* rojo corporativo #A70B2C */
.tc-wa-btn       { background:#25D366; color:#fff; }     /* verde WhatsApp :contentReference[oaicite:2]{index=2} */
.tc-wa-btn i     { margin-right:0.35em; font-size:1.1em; vertical-align:middle; }

/* ==== Opciones de respuesta ====================================== */
.tc-option{           /* el <label> */
    display:flex;         /* radio + texto en la misma línea            */
    align-items:flex-start;
    gap:.65em;            /* distancia entre el círculo y la frase      */
    line-height:1.35;     /* evita saltos demasiado apretados            */
}

.tc-option input{        /* el <input type="radio">                     */
    flex:0 0 auto;       /* nunca se encoge                             */
    margin-top:.20em;    /* centra ópticamente el círculo               */
    margin-right:0;      /* el gap ya lo ponemos en el label            */
    accent-color:#1E347E;/* sigue tu azul                               */
}


/* ==== Colocación del botón Siguiente ============================= */
.tc-grid > div{                 /* contenedor del enunciado + botón */
    display:flex;
    flex-direction:column;
}

.tc-btn.tc-next{                /* solo afecta al “Siguiente”       */
    align-self:flex-end;        /* empuja el botón a la derecha     */
    margin-top:2rem;            /* un poco más de aire si lo quieres */
}

/* === Número grande y punto ===================================== */
.tc-num{
    position:relative;      /* referencia para el punto                */
    display:inline-block;
    line-height:0.9;        /* aprieta la caja verticalmente            */
}

.tc-dot{
    position:absolute;
    bottom:-0.04em;          /* ajusta vertical a tu gusto               */
    right:-0.15em;          /* queda justo a la derecha del número      */
    font-size:0.25em;       /* aprox. un cuarto del alto del número     */
    line-height:1;
}

/* === Pantalla de INTRO con líneas laterales ==================== */
.tc-intro{
    position:relative;              /* referencia para pseudoelementos */
    overflow:hidden;                /* recorta líneas si hiciera falta */
}

/* Líneas blancas a ambos lados del título */
.tc-intro::before,
.tc-intro::after{
    content:"";
    position:absolute;
    top:50%;                        /* altura centrada verticalmente */
    width:16%;                      /* largo de cada línea: ajusta al gusto */
    height:2px;                     /* grosor */
    background:#FFFFFF;             /* color línea */
}

.tc-intro::before{ left:0%;  }      /* margen interior */
.tc-intro::after { right:0%; }

/* Título centrado ya lo tenías, pero por si acaso: */
.tc-intro-title{
    margin:0 auto;
    text-align:center;
}

/* Botón ▶ (por si quieres moverlo un poco más arriba o centrarlo) */
.tc-intro-btn{
    position:absolute;
    bottom:2vh;
    right:6vw;       /* lo dejamos en la esquina  */
    /* para 100 % centrado, cambiar a: left:50%; transform:translateX(-50%); */
}
.tc-intro{

    flex-direction:column;
    justify-content:center;  /* alinea verticalmente */
    text-align:center;
}

/*.tc-intro-title{ margin:0 auto 1vh; }  deja 4 vh de aire bajo el h1 */
.tc-intro-title{ margin:7vh auto;}

/* === Icono de tres siluetas en la INTRO ======================== */
.tc-intro-icon{
    position:absolute;
    bottom:3vh;              /* espacio respecto al borde inferior */
    left:50%;
    transform:translateX(-50%);
    width:40px;              /* ajusta a tu gusto */
    height:auto;
    pointer-events:none;     /* que no estorbe clics */
}


/* Oculta todas las pantallas por defecto */
.tc-screen{ display:none; }

/* Las que tienen .tc-active se ven en bloque */
.tc-screen.tc-active{ display:block; }

/* La intro necesita flex SOLO cuando está activa */
.tc-intro.tc-active{
    display:flex;                 /* ahora sí */
    flex-direction:column;
    justify-content:center;
    text-align:center;
}