/* =============================================================================
   whereubro — páginas públicas
   =============================================================================

   Dirección: la casa, no el cartel. El producto dejó de girar alrededor del
   festival: lo que hay en el centro es un círculo permanente —tu familia, todos
   los días— y un póster de line-up para "dónde está mi hijo" decía otra cosa que
   el producto.

   Paleta de luz de tarde en casa: papel cálido con un punto rosado, tinta marrón
   en lugar de negro, y miel para lo que hay que mirar. El oliva aparece poco y
   solo para lo que está vivo ahora mismo.

   La tipografía condensada (Big Shoulders) NO desaparece: se queda en la página
   de eventos, donde el cartel sí es lo que toca. Aquí manda Karla, que ya
   estaba, en pesos altos. Cero fuentes nuevas que descargar.
   ========================================================================== */

/* --- Tipografía autoalojada -------------------------------------------------
   Nada de CDN: el proyecto entero se sirve desde el propio dominio, y una
   fuente que no carga estropea la página en silencio. */

@font-face {
    font-family: 'Big Shoulders';
    src: url('/assets/fonts/big-shoulders-var.woff2') format('woff2-variations');
    font-weight: 400 800;
    font-display: swap;
}

@font-face {
    font-family: 'Karla';
    src: url('/assets/fonts/karla-var.woff2') format('woff2-variations');
    font-weight: 300 800;
    font-display: swap;
}

@font-face {
    font-family: 'DM Mono';
    src: url('/assets/fonts/dm-mono-400.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'DM Mono';
    src: url('/assets/fonts/dm-mono-500.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

/* --- Tokens ---------------------------------------------------------------- */

:root {
    /* Los controles nativos —barras de scroll, menús de select— siguen a este
       token, no a los colores de aquí abajo. Sin él, el tema oscuro llegaba con
       las barras de scroll en claro. */
    color-scheme: light dark;

    /* Cálidos. El neutro tira a rosado, no a gris ni a crema de plantilla. */
    --papel: #F7F1EB;
    --papel-2: #F1E8DF;
    --papel-3: #E8DCD0;
    --miel: #B4761A;
    --miel-fuerte: #8F5B12;
    --oliva: #4F6B41;

    /* La miel de la marca puesta a hacer de texto pequeño da 3.38:1 sobre el
       papel: vale para un titular (que solo pide 3:1) y no para una línea de
       0,8 rem. Así que hay dos mieles: la de la marca, que sigue pintando
       titulares, fondos y bordes, y esta, solo para texto pequeño. En oscuro no
       hace falta distinguirlas —la miel clara ya da 7.96:1—, pero el token
       existe igual para que las reglas no tengan que preguntar por el tema. */
    --miel-texto: #8A5A0F;

    --tinta: #2B211B;
    --tinta-2: #6E5B4E;
    --linea: #DECFC0;
    /* Rojo del aviso de error. Era #FF5A5A fijo en los dos temas y sobre papel
       claro se quedaba en 2.53:1, por debajo del 3:1 que pide un indicador. */
    --alerta: #E85252;

    --fondo: var(--papel);
    --superficie: var(--papel-2);

    /* Karla es humanista y ya estaba autoalojada: sirve de display en 800 sin
       añadir una descarga. La condensada se reserva para .sitio--cartel. */
    --display: 'Karla', system-ui, sans-serif;
    --texto: 'Karla', system-ui, sans-serif;
    --mono: 'DM Mono', ui-monospace, monospace;

    --medida: 62ch;
    --canal: 1.5rem;
}

/* La página de eventos conserva la voz de cartel: allí sí es una noche concreta
   y el line-up es el lenguaje del sitio. */
.sitio--cartel {
    --display: 'Big Shoulders', 'Arial Narrow', sans-serif;
}

/* Tema oscuro: no es una inversión. Es la misma casa de noche —marrón cálido,
   nunca azul— con la miel encendida. */
@media (prefers-color-scheme: dark) {
    :root {
        --papel: #1B1512;
        --papel-2: #241C18;
        --papel-3: #2F251F;
        --tinta: #F4EBE2;
        --tinta-2: #B5A092;
        --linea: #3A2E27;
        --miel: #E0A03A;
        --miel-fuerte: #F0B85E;
        --miel-texto: #E0A03A;
        --oliva: #93B27A;
        --alerta: #FF5A5A;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --papel: #1B1512;
    --papel-2: #241C18;
    --papel-3: #2F251F;
    --tinta: #F4EBE2;
    --tinta-2: #B5A092;
    --linea: #3A2E27;
    --miel: #E0A03A;
    --miel-fuerte: #F0B85E;
    --miel-texto: #E0A03A;
    --oliva: #93B27A;
    --alerta: #FF5A5A;
}

:root[data-theme="light"] {
    color-scheme: light;
    --papel: #F7F1EB;
    --papel-2: #F1E8DF;
    --papel-3: #E8DCD0;
    --tinta: #2B211B;
    --tinta-2: #6E5B4E;
    --linea: #DECFC0;
    --miel: #B4761A;
    --miel-fuerte: #8F5B12;
    --miel-texto: #8A5A0F;
    --oliva: #4F6B41;
    --alerta: #E85252;
}

/* --- Base ------------------------------------------------------------------ */

body.sitio {
    background: var(--fondo);
    color: var(--tinta);
    font-family: var(--texto);
    font-size: clamp(1rem, .95rem + .2vw, 1.075rem);
    line-height: 1.55;
    overflow-x: hidden;
}

.sitio ::selection { background: var(--miel-texto); color: var(--papel); }

.sitio a:focus-visible,
.sitio button:focus-visible,
.sitio summary:focus-visible {
    outline: 2px solid var(--oliva);
    outline-offset: 3px;
}

.envoltura {
    width: min(100% - 2.5rem, 74rem);
    margin-inline: auto;
}

/* Etiqueta de sección: hace de eyebrow y de índice. El número no decora, marca
   el orden real en que ocurren las cosas. */
/* Es un h2 en las secciones que no tienen otro título, así que hay que anular
   el peso y el margen que trae el navegador: por fuera tiene que seguir siendo
   la misma línea fina de antes. */
.rotulo {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    font-family: var(--mono);
    font-size: .73rem;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tinta-2);
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--linea);
    margin: 0 0 2.5rem;
}

.rotulo__num { color: var(--miel-texto); }
.rotulo__linea { flex: 1; }

/* --- Cabecera -------------------------------------------------------------- */

.barra {
    position: sticky;
    top: 0;
    z-index: 10;
    background: color-mix(in srgb, var(--fondo) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--linea);
    /* Con el móvil en horizontal, el notch se come el borde de la pantalla y la
       marca quedaba debajo. */
    padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
}

.barra__caja {
    width: min(100% - 2.5rem, 74rem);
    margin-inline: auto;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.marca {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    text-decoration: none;
    color: var(--tinta);
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: .01em;
    text-transform: lowercase;
}

.marca__punto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--miel);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--miel) 25%, transparent);
}

.barra__nav { display: flex; align-items: center; gap: 1.5rem; }

.barra__nav a {
    font-family: var(--mono);
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tinta-2);
    text-decoration: none;
}
.barra__nav a:hover { color: var(--tinta); }

.barra__nav .accion { color: var(--miel-texto); }

/* --- Botones ---------------------------------------------------------------
   Rectos, no pastilla: el vocabulario del cartel es la caja, no la burbuja. */

.accion-principal,
.accion-secundaria {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    padding: 1rem 1.6rem;
    font-family: var(--mono);
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .12s ease, background-color .12s ease, color .12s ease;
    /* Sin esto, el móvil espera 300 ms por si viene un segundo toque. */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.accion-principal {
    background: var(--miel);
    /* Casi negro, no papel: sobre la miel clara da 5.16:1 y sobre la oscura
       8.62:1, mientras que el blanco se quedaba en 3.79 y 2.27. */
    color: #140A02;
}

/* El hover tiene que separarse MÁS del fondo, no menos. Oscurecer la miel y
   dejar el texto casi negro lo dejaba en 3.42:1; con el texto en papel sube a
   5.10:1 y además el botón pasa de 3.38:1 a 5.10:1 contra la página. En oscuro
   la miel-fuerte aclara y --papel es la tinta oscura, así que la misma regla
   vale para los dos temas sin preguntar por el tema. */
.accion-principal:hover {
    background: var(--miel-fuerte);
    color: var(--papel);
    transform: translateY(-2px);
}

.accion-secundaria {
    background: transparent;
    color: var(--tinta);
    border-color: var(--linea);
}
.accion-secundaria:hover { border-color: var(--miel); color: var(--miel-texto); }

/* --- Portada: el bloque del cartel ----------------------------------------- */

.cartel {
    position: relative;
    padding: clamp(3rem, 9vw, 6.5rem) 0 3rem;
}

/* El radar ocupa el aire de la derecha, no el fondo del titular: pasando por
   debajo del texto sus puntos se leían como erratas. */
/* El radar dibuja lo que hace el producto: alguien pregunta, la onda llega y el
   otro contesta. Es lo más característico que hay que enseñar, así que deja de
   ser una marca de agua estirada por medio lienzo —que solo dejaba puntos
   sueltos flotando en un vacío— y pasa a ser un objeto con su sitio. */
.cartel__radar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: .18;
    pointer-events: none;
}

@media (min-width: 62rem) {
    .cartel__radar {
        inset: auto;
        /* A la altura del titular, no del centro: abajo chocaba con los
           botones y las circunferencias los cruzaban por detrás. */
        top: 34%;
        right: 3%;
        translate: 0 -50%;
        /* Cuadrado: una circunferencia estirada no se lee como un radar. */
        width: min(28vw, 19rem);
        height: min(28vw, 19rem);
        opacity: 1;
    }
}

.cartel__contenido { position: relative; z-index: 1; }

@media (min-width: 62rem) {
    .titular,
    .cita,
    .cartel__fecha,
    .cita__meta { max-width: 58%; }
}

.cartel__fecha {
    font-family: var(--mono);
    font-size: .75rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--oliva);
    margin: 0 0 1.5rem;
}

/* El titular ocupa el ancho completo como el nombre en un póster. */
.titular {
    font-family: var(--display);
    font-weight: 800;
    /* Karla es mucho más ancha que una condensada: con los tamaños del cartel
       estas mismas palabras se despeñaban en cuatro líneas. */
    font-size: clamp(2.4rem, 5.4vw, 4.6rem);
    line-height: 1.02;
    /* Apretar el tracking es lo que le da densidad a una humanista en tamaño
       grande; sin esto se deshilacha. */
    letter-spacing: -.03em;
    margin: 0;
    text-wrap: balance;
}

/* En la página de eventos manda la condensada, y ahí sí caben las mayúsculas a
   sangre y un tamaño mucho mayor. */
.sitio--cartel .titular {
    font-size: clamp(2.6rem, 7.5vw, 6.5rem);
    line-height: .95;
    letter-spacing: -.015em;
    text-transform: uppercase;
}

.titular__eco { color: var(--miel); display: block; }

.cartel__pie {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--linea);
}

@media (min-width: 56rem) {
    .cartel__pie { grid-template-columns: 1.4fr 1fr; align-items: start; }
}

.cartel__entradilla {
    font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem);
    max-width: 34ch;
    margin: 0;
    color: var(--tinta);
}

.cartel__entradilla strong { color: var(--miel-texto); font-weight: 700; }

.cartel__acciones { display: flex; flex-wrap: wrap; gap: .75rem; align-items: start; }

/* La otra pagina del sitio, no una cuarta puerta. Detras de una separacion y en
   voz baja: metida en la fila de los accesos, «Salir esta noche» se leia como
   otra forma de entrar. */
.cartel__otra {
    flex: 1 0 100%;
    max-width: 20rem;
    margin: .5rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--linea);
    font-family: var(--mono);
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Avisos del flujo de acceso: error de Google, invitación reconocida. Barra
   lateral en lugar de caja redondeada, para no romper el lenguaje del cartel. */
.aviso {
    margin: 2rem 0 0;
    padding: .9rem 1.1rem;
    border-left: 3px solid var(--miel);
    background: var(--superficie);
    font-size: .93rem;
    max-width: 46ch;
}

.aviso--error { border-left-color: var(--alerta); }
.aviso--info { border-left-color: var(--oliva); }

/* Line-up: los tres hechos del producto tratados como cabezas de cartel.
   La jerarquía de tamaño dice cuál importa más, igual que en un póster. */
.lineup {
    margin-top: 3.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--linea);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem 1.25rem;
    font-family: var(--display);
    font-weight: 700;
    line-height: 1;
}

/* Solo en la pagina de eventos: alli el line-up es literalmente un cartel. */
.sitio--cartel .lineup { text-transform: uppercase; }

.lineup__acto {
    font-size: clamp(1.3rem, 3.4vw, 2.1rem);
    letter-spacing: -.02em;
}
.lineup__acto--menor { font-size: clamp(1.05rem, 2.6vw, 1.6rem); color: var(--tinta-2); }
.lineup__sep { color: var(--miel-texto); font-size: 1.2rem; }

/* --- Secuencia: cómo funciona ---------------------------------------------- */

/* Un solo eje de espaciado: el relleno superior e inferior se suman entre
   secciones contiguas, y con valores generosos dejaba huecos muertos. */
.seccion { padding-block: clamp(2.25rem, 4.5vw, 3.25rem); }

.secuencia {
    display: grid;
    gap: 0;
    counter-reset: paso;
}

@media (min-width: 52rem) {
    .secuencia { grid-template-columns: repeat(3, 1fr); }
}

/* La regla vertical separa los pasos como las columnas de un cartel. */
.paso {
    padding: 1.75rem 0;
    border-top: 1px solid var(--linea);
}

@media (min-width: 52rem) {
    .paso { padding: 0 2rem; border-top: 0; border-left: 1px solid var(--linea); }
    .paso:first-child { padding-left: 0; border-left: 0; }
}

.paso__num {
    font-family: var(--mono);
    font-size: .73rem;
    color: var(--miel-texto);
    letter-spacing: .12em;
    display: block;
    margin-bottom: 1rem;
}

.paso__grafico { width: min(100%, 15rem); height: 80px; margin-bottom: 1.25rem; display: block; color: var(--tinta); }

.paso h3 {
    font-family: var(--display);
    letter-spacing: -.02em;
    font-weight: 700;
    font-size: 1.75rem;
    text-transform: uppercase;
    letter-spacing: -.005em;
    margin: 0 0 .4rem;
}

.paso p { margin: 0; color: var(--tinta-2); font-size: .95rem; }

/* --- Dos usos --------------------------------------------------------------- */

.usos { display: grid; gap: 1px; background: var(--linea); }

@media (min-width: 52rem) {
    .usos { grid-template-columns: 1fr 1fr; }
}

.uso {
    background: var(--fondo);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.uso__tipo {
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--oliva);
}

.uso h3 {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(2rem, 5vw, 3rem);
    text-transform: uppercase;
    line-height: .95;
    margin: 0;
}

.uso p { margin: 0; color: var(--tinta-2); max-width: 38ch; }

.uso__enlace {
    margin-top: auto;
    padding-top: 1rem;
    font-family: var(--mono);
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--miel-texto);
    text-decoration: none;
}
.uso__enlace:hover { text-decoration: underline; text-underline-offset: 4px; }

/* --- Promesas: lista de negaciones ----------------------------------------- */

.negaciones { list-style: none; margin: 0; padding: 0; }

.negacion {
    display: grid;
    gap: .3rem 1.5rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--linea);
}

@media (min-width: 52rem) {
    .negacion { grid-template-columns: 22rem 1fr; align-items: baseline; }
}

.negacion:first-child { border-top: 1px solid var(--linea); }

.negacion__que {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.6rem;
    text-transform: uppercase;
    line-height: 1.05;
}

.negacion__porque { margin: 0; color: var(--tinta-2); font-size: .95rem; }

/* --- Pie -------------------------------------------------------------------- */

.pie {
    border-top: 1px solid var(--linea);
    padding: 2.5rem 0 3.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    font-family: var(--mono);
    font-size: .76rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tinta-2);
}

.pie a { color: var(--tinta-2); }
.pie a:hover { color: var(--tinta); }

/* =============================================================================
   Página de eventos
   ========================================================================== */

.cartel--evento .cartel__fecha { color: var(--miel-texto); }

/* Cita: el mensaje que todo el mundo ha mandado. Es el hero como tesis. */
.cita {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(3rem, 13vw, 10rem);
    line-height: .95;
    text-transform: uppercase;
    letter-spacing: -.02em;
    margin: 0;
}

.cita__marca { color: var(--miel); }

.cita__meta {
    font-family: var(--mono);
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tinta-2);
    margin: 1.75rem 0 0;
}

/* Cronología del plan: encoda la vida real de un grupo, de 00:00 a su borrado. */
.cronologia {
    display: grid;
    gap: 0;
    margin-top: 1rem;
}

@media (min-width: 52rem) {
    .cronologia { grid-template-columns: repeat(4, 1fr); }
}

.hito {
    padding: 1.5rem 0;
    border-top: 2px solid var(--linea);
    position: relative;
}

@media (min-width: 52rem) {
    .hito { padding: 1.5rem 1.5rem 0 0; }
}

.hito--vivo { border-top-color: var(--miel); }
.hito--fin { border-top-color: var(--oliva); }

.hito__hora {
    font-family: var(--mono);
    font-size: .8rem;
    font-weight: 500;
    color: var(--miel-texto);
    letter-spacing: .06em;
    display: block;
    margin-bottom: .6rem;
    font-variant-numeric: tabular-nums;
}

.hito--fin .hito__hora { color: var(--oliva); }

.hito h3 {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.5rem;
    text-transform: uppercase;
    margin: 0 0 .35rem;
}

.hito p { margin: 0; color: var(--tinta-2); font-size: .92rem; }

/* --- Comparación honesta ---------------------------------------------------- */

.contraste {
    display: grid;
    gap: 1px;
    background: var(--linea);
    border: 1px solid var(--linea);
}

@media (min-width: 46rem) {
    .contraste { grid-template-columns: 1fr 1fr; }
}

.columna { background: var(--fondo); padding: 1.75rem; }
.columna--nosotros { background: var(--superficie); }

.columna__titulo {
    font-family: var(--mono);
    font-size: .73rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tinta-2);
    margin: 0 0 1.25rem;
}

.columna--nosotros .columna__titulo { color: var(--miel-texto); }

.columna ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }

.columna li {
    display: grid;
    grid-template-columns: 1.1rem 1fr;
    gap: .7rem;
    align-items: start;
    font-size: .95rem;
    color: var(--tinta-2);
}

.columna li svg { width: 1.1rem; height: 1.1rem; margin-top: .18rem; }
.columna--otros li svg { color: var(--tinta-2); opacity: .6; }
.columna--nosotros li svg { color: var(--oliva); }
.columna--nosotros li { color: var(--tinta); }

/* --- Preguntas -------------------------------------------------------------- */

.preguntas { max-width: var(--medida); }

.pregunta { border-bottom: 1px solid var(--linea); }
.pregunta:first-child { border-top: 1px solid var(--linea); }

.pregunta summary {
    cursor: pointer;
    list-style: none;
    padding: 1.25rem 2.5rem 1.25rem 0;
    position: relative;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.35rem;
    text-transform: uppercase;
    letter-spacing: .005em;
}

.pregunta summary::-webkit-details-marker { display: none; }

.pregunta summary::after {
    content: '';
    position: absolute;
    right: .4rem;
    top: 50%;
    width: 12px;
    height: 2px;
    background: var(--miel);
    transform: translateY(-50%);
}

.pregunta summary::before {
    content: '';
    position: absolute;
    right: .4rem;
    top: 50%;
    width: 12px;
    height: 2px;
    background: var(--miel);
    transform: translateY(-50%) rotate(90deg);
    transition: transform .18s ease;
}

.pregunta[open] summary::before { transform: translateY(-50%) rotate(0deg); }

.pregunta p {
    margin: 0 0 1.35rem;
    color: var(--tinta-2);
    max-width: 58ch;
    font-size: .96rem;
}

/* --- Cierre ------------------------------------------------------------------ */

.cierre {
    border-top: 1px solid var(--linea);
    border-bottom: 1px solid var(--linea);
    padding: clamp(3rem, 7vw, 5rem) 0;
    display: grid;
    gap: 1.5rem;
    justify-items: start;
}

.cierre h2 {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(2.5rem, 8vw, 5.5rem);
    line-height: .9;
    text-transform: uppercase;
    margin: 0;
    max-width: 16ch;
}

@media (prefers-reduced-motion: reduce) {
    .sitio *,
    .sitio *::before,
    .sitio *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* --- Selector de idioma ------------------------------------------------------
   Enlaces, no un desplegable: cada idioma tiene dirección propia y se puede
   abrir aparte, guardar o compartir. */

.idiomas {
    display: flex;
    align-items: center;
    gap: .1rem;
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .06em;
}

/* app.css se carga antes y le da a este mismo selector una caja alta y un fondo
   teñido: en la aplicación son tres letras sueltas y hace falta algo que tocar,
   pero aquí el idioma se marca con el subrayado y una caja de 44 px lo mandaba
   dos centímetros por debajo del texto. Así que la caja vuelve a ceñirse al
   texto y el área de toque la pone el pseudo-elemento de abajo. */
.idiomas__opcion {
    position: relative;
    display: inline-block;
    min-height: 0;
    background: none;
    padding: .3rem .45rem;
    color: var(--tinta-2);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.idiomas__opcion:hover { color: var(--tinta); }

/* El idioma activo se marca también con aria-current, no solo con color. */
.idiomas__opcion.is-active {
    color: var(--miel-texto);
    background: none;
    border-bottom-color: var(--miel);
}

/* Objetivo táctil de 44 px sin tocar lo que se ve: tres letras dan una diana de
   unos 28 px y en el móvil se falla. */
.idiomas__opcion::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    translate: 0 -50%;
}

/* --- Confianza frente a control ---------------------------------------------
   La escala de detalle es el argumento central, así que ocupa media sección y
   se dibuja a tamaño legible, no como iconos decorativos. */

.confianza {
    display: grid;
    gap: 2.5rem;
}

@media (min-width: 58rem) {
    .confianza { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
}

.confianza__titulo {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(2.2rem, 6vw, 3.6rem);
    line-height: .95;
    text-transform: uppercase;
    margin: 0 0 1rem;
}

.confianza__cuerpo { margin: 0 0 1.5rem; color: var(--tinta-2); max-width: 44ch; }

.confianza__puntos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .6rem;
}

.confianza__puntos li {
    position: relative;
    padding-left: 1.4rem;
    font-size: .93rem;
}

.confianza__puntos li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--oliva);
}

.niveles { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--linea); }

.nivel {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 1.25rem;
    align-items: center;
    background: var(--fondo);
    padding: 1.15rem 1rem;
}

.nivel__grafico { width: 72px; height: 72px; color: var(--tinta); }

.nivel__nombre {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.35rem;
    text-transform: uppercase;
    margin-right: .5rem;
}

.nivel__escala {
    font-family: var(--mono);
    font-size: .74rem;
    color: var(--miel-texto);
    letter-spacing: .06em;
}

.nivel__pie { margin: .2rem 0 0; font-size: .87rem; color: var(--tinta-2); }

/* Aviso de acceso privado, junto a las acciones del encabezado. */
.cartel__privado {
    flex-basis: 100%;
    margin: .25rem 0 0;
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .04em;
    color: var(--tinta-2);
}

/* --- Páginas legales ---
   Una política que hay que leer entera para saber si te espían no informa a
   nadie, así que lo esencial va arriba y destacado, y el detalle debajo. La
   medida de línea es la misma que el resto del sitio: esto se lee, no se ojea. */

.legal { padding: 3rem 0 4rem; max-width: var(--medida); }
.legal h1 { margin-bottom: .25rem; }
.legal h2 { margin: 2.5rem 0 .75rem; font-size: 1.05rem; }
.legal p { color: var(--tinta-2); }
.legal ul { color: var(--tinta-2); padding-left: 1.1rem; }
.legal li { margin-bottom: .6rem; }

.legal__fecha { font-size: .85rem; color: var(--tinta-2); margin-top: 0; }
.legal__lede { font-size: 1.05rem; color: var(--tinta); }

/* El resumen de cuatro frases, separado del cuerpo para que se lea aunque no se
   lea nada más. */
.legal__resumen {
    margin-top: 2rem;
    padding: 1.25rem 1.5rem;
    background: var(--papel-2);
    border-left: 3px solid var(--miel);
    border-radius: 0 var(--radius, 14px) var(--radius, 14px) 0;
}
.legal__resumen h2 { margin-top: 0; }
.legal__resumen li { color: var(--tinta); }

/* Los datos identificativos del articulo 10 de la LSSI: en pares, porque es
   como los busca quien tiene que comprobarlos. En movil se apilan solos. */
.legal__datos {
    display: grid;
    grid-template-columns: minmax(9rem, auto) 1fr;
    gap: .5rem 1.25rem;
    margin: 1rem 0 0;
    color: var(--tinta-2);
}
.legal__datos dt { font-weight: 600; color: var(--tinta); }
.legal__datos dd { margin: 0; }

@media (max-width: 34rem) {
    .legal__datos { grid-template-columns: 1fr; gap: .1rem; }
    .legal__datos dd { margin-bottom: .75rem; }
}

/* «Esto no es un servicio de emergencias». Es lo unico de estos documentos que
   alguien puede necesitar leer antes de que le pase algo, asi que se destaca.
   El color va en el borde y no en la letra: --warn sobre papel no da contraste
   suficiente para texto pequeno, y para eso esta --warn-texto. Aqui no hace
   falta ninguno de los dos en la tipografia porque el texto se queda en
   --tinta. */
.legal__aviso {
    margin-top: 1rem;
    padding: .9rem 1.1rem;
    background: var(--papel-2);
    border-left: 3px solid var(--warn);
    border-radius: 0 var(--radius, 14px) var(--radius, 14px) 0;
    color: var(--tinta);
}

/* Navegacion entre los cuatro documentos: sin esto, a tres de ellos solo se
   llega desde el pie de la portada. */
.legal__hermanos {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.25rem;
    margin-top: 3rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--linea);
    font-size: .9rem;
}
.legal__hermanos [aria-current="page"] { color: var(--tinta); font-weight: 600; }

/* --- Los botones de Google y de Apple ---------------------------------------
   NO SON NUESTROS Y NO SE PARECEN AL RESTO A PROPÓSITO. Las dos empresas
   publican una guía y aceptarla es condición de usar su acceso; Apple además
   dice que «App Review evalúa todos los botones personalizados».

   Por eso NO heredan de `.accion-principal`: heredar de nuestro botón es el
   camino por el que se vuelven a teñir de miel, mayúsculas y `--mono`, que es
   como estaban. Ninguna variable de la paleta entra aquí: los valores son de
   Google y de Apple, no del producto, y no deben moverse cuando cambie la
   nuestra.

   Los dos miden 44 px de alto. No es un número redondo elegido a ojo: es el
   objetivo táctil mínimo que ya exige el resto del sitio, es la altura por
   defecto y recomendada del botón de Apple en iOS, y por encima del mínimo de
   30 pt que Apple fija. A partir de ahí, cada uno impone sus proporciones.

   Fuentes:
   developers.google.com/identity/branding-guidelines
   developer.apple.com/design/human-interface-guidelines/sign-in-with-apple */
.proveedores {
    display: flex;
    flex-direction: column;
    /* Apple pide alrededor de su botón un margen de al menos 1/10 de su
       altura: 4,4 px con 44. Es un SUELO, no una medida a la que ceñirse, y con
       8 las tres se leían como un bloque pegado. 14 las separa sin que dejen de
       ser un grupo. */
    gap: 14px;
}

/* En la portada, `.cartel__acciones` es una fila que envuelve, y ahí dentro este
   bloque se encogía hasta dejar «Crear cuenta» pegado al costado del botón de
   Google. Tiene que ocupar la línea entera para empujar al resto abajo, y el
   ancho se limita en los BOTONES: puesto en el contenedor, este deja de llenar
   la línea y el siguiente vuelve a colarse al lado. */
.cartel__acciones .proveedores { flex: 1 0 100%; }
.cartel__acciones .proveedor { max-width: 20rem; }

.proveedor {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 44px;
    /* Apple fija un ancho mínimo de 140 pt, y avisa de que el texto cambia de
       largo según el idioma. */
    min-width: 140px;
    /* Ni mayúsculas ni espaciado de letra: los dos textos son marca y van tal
       como los escriben ellos. */
    text-transform: none;
    letter-spacing: normal;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow .12s ease, background-color .12s ease;
}

.proveedor__marca { display: flex; flex: 0 0 auto; align-items: center; }

/* --- Google -----------------------------------------------------------------
   Su referencia es un botón de 40 px con texto de 14/20 y logotipo de 18, y
   permite escalarlo «conservando la proporción para que el logotipo no se
   estire». A 44 px eso es ×1,1: texto 15, logotipo 20, y los rellenos de
   12-10-12 pasan a 13-11-13.

   La tipografía que pide es Google Sans Medium, que no es pública y no se puede
   servir. Se cae a la del sistema, que en Android ES Roboto —la que Google usa
   cuando Google Sans no está—; traer una fuente más al sitio solo para este
   botón no arregla el caso que importa, que es el móvil. */
.proveedor--google {
    padding: 0 13px;
    gap: 11px;
    background: #FFFFFF;
    border: 1px solid #747775;
    border-radius: 4px;
    color: #1F1F1F;
    font-family: 'Google Sans', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-size: 15px;
    line-height: 22px;
    font-weight: 500;
}
.proveedor--google:hover { background: #F7F8F8; }
.proveedor--google:active { background: #EFF0F0; }

/* --- Apple ------------------------------------------------------------------
   Su proporción no es orientativa: «el tamaño del texto sería el 43 % de la
   altura del botón; dicho de otro modo, la altura sería el 233 % del tamaño del
   texto». Con texto de 19 px salen 44,3 → 44. Cambiar uno obliga a recalcular
   el otro.

   Prefiere la tipografía del sistema, que en un Mac o un iPhone es San
   Francisco. El margen entre el texto y el borde derecho debe ser al menos el
   8 % del ancho del botón. */
.proveedor--apple {
    padding: 0 12px;
    gap: 8px;
    background: #000000;
    border: 1px solid #000000;
    border-radius: 6px;
    color: #FFFFFF;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 19px;
    font-weight: 400;
}
.proveedor--apple:hover { background: #1A1A1A; border-color: #1A1A1A; }

/* --- La tercera puerta ------------------------------------------------------
   Esta SÍ es nuestra, así que lleva la miel del producto. Lo que hereda de las
   otras dos es la caja: misma altura, mismo ancho mínimo, mismo sitio. Las tres
   son la misma decisión —por dónde entras— y solo se leen de una ojeada si
   miden lo mismo; antes era un enlace suelto, más pequeño, pegado al costado.

   El radio es el nuestro, 14, no el 4 de Google ni el 6 de Apple: ahí no hay
   nada que respetar y sí algo que decir, que esta puerta es de la casa. */
.proveedor--correo {
    padding: 0 13px;
    gap: 11px;
    background: var(--miel);
    /* Casi negro, no papel: sobre la miel clara da 5,16:1. Es la misma decisión
       que en `.accion-principal`. */
    color: #140A02;
    border: 1px solid var(--miel);
    border-radius: var(--radius, 14px);
    font-size: 15px;
    font-weight: 600;
}
.proveedor--correo:hover { background: var(--miel-fuerte); border-color: var(--miel-fuerte); color: var(--papel); }

/* Cada uno tiene dos variantes y las dos guías coinciden en cuándo usarlas: el
   negro de Apple «sobre fondos claros; no sobre negro o fondos oscuros», y el
   blanco «sobre fondos oscuros». Se declara con el patrón de tres bloques del
   sitio: el medio para quien no ha elegido tema, y los dos `[data-theme]` para
   que el conmutador gane en ambos sentidos. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .proveedor--google {
        background: #131314; border-color: #8E918F; color: #E3E3E3;
    }
    :root:not([data-theme="light"]) .proveedor--google:hover { background: #1E1F20; }
    :root:not([data-theme="light"]) .proveedor--apple {
        background: #FFFFFF; border-color: #FFFFFF; color: #000000;
    }
    :root:not([data-theme="light"]) .proveedor--apple:hover {
        background: #F0F0F0; border-color: #F0F0F0;
    }
}
:root[data-theme="dark"] .proveedor--google {
    background: #131314; border-color: #8E918F; color: #E3E3E3;
}
:root[data-theme="dark"] .proveedor--google:hover { background: #1E1F20; }
:root[data-theme="dark"] .proveedor--apple {
    background: #FFFFFF; border-color: #FFFFFF; color: #000000;
}
:root[data-theme="dark"] .proveedor--apple:hover { background: #F0F0F0; border-color: #F0F0F0; }

:root[data-theme="light"] .proveedor--google {
    background: #FFFFFF; border-color: #747775; color: #1F1F1F;
}
:root[data-theme="light"] .proveedor--apple {
    background: #000000; border-color: #000000; color: #FFFFFF;
}

/* El foco de teclado lo pone la regla general del sitio, pero aquí el contorno
   tiene que verse sobre negro y sobre blanco: se separa con un hueco. */
.proveedor:focus-visible { outline-offset: 3px; }