/* ============================================================ LIQUID GLASS

   El material que Apple presentó en 2025. No es «un fondo translúcido»: son
   cinco capas, y si falta una no se reconoce.

   1. EL FONDO TRANSLÚCIDO. Poco, un 14 %. Más y deja de ser cristal y pasa a
      ser plástico.
   2. EL DESENFOQUE Y LA SATURACIÓN. `blur(24px) saturate(180%)`. La saturación
      es la mitad del truco: es lo que hace que el cristal RECOJA el color de lo
      que tiene detrás en vez de dejarlo gris. Sin ella parece un papel de
      calco.
   3. EL BRILLO ESPECULAR DEL BORDE. Una línea clara arriba y otra más floja
      abajo, por dentro. Es el reflejo de la luz en el canto del cristal y es lo
      que más se reconoce de todo.
   4. EL VELO SUPERIOR. Un degradado muy suave de blanco a nada, de arriba
      abajo: la luz entra por arriba.
   5. LA SOMBRA DE FUERA. Corta y muy abierta, para que el cristal FLOTE sobre
      lo que hay debajo. Sin sombra se ve pegado.

   AL PULSAR, EL CRISTAL SE FLEXIONA: se encoge un pelo y el brillo del borde
   sube. Es el gesto de iOS 26.

   ---------------------------------------------------------------------------
   LO QUE PASA CUANDO NO HAY `backdrop-filter`

   Es la parte que de verdad importa. Un cristal sin desenfoque es un botón
   semitransparente sobre un fondo cualquiera: ILEGIBLE. Así que con `@supports`
   se comprueba, y donde no lo haya el material cae a un relleno SÓLIDO. Se
   pierde el efecto, no el botón.

   Firefox lo soporta desde la 103, Safari y Chrome hace años. El respaldo es
   para navegadores viejos y para quien lo tenga desactivado, que existe.

   ---------------------------------------------------------------------------
   EL CONTRASTE NO SE NEGOCIA

   El texto de un botón de cristal va con la tinta del tema —casi negra en claro
   y casi blanca en oscuro—, nunca en gris ni en el azul de la marca. Un botón
   bonito que no se lee es un botón roto, y aquí hay uno que dice «Comprobar»
   sobre un buscador de dominios.
*/

.cristal {
    position: relative;
    /* El respaldo va PRIMERO: si el navegador no sabe hacer el resto, esto es
       lo que queda, y es legible. */
    background: var(--cristal-macizo);
    border: 1px solid var(--cristal-borde);
    box-shadow:
        inset 0 1px 0 var(--cristal-brillo),
        inset 0 -1px 0 var(--cristal-brillo-bajo),
        0 8px 30px -10px rgba(0, 0, 0, .22);
    color: var(--tinta);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .cristal {
        background: var(--cristal-fondo);
        backdrop-filter: blur(24px) saturate(180%);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
    }
}

/* El velo de arriba: la luz entra por arriba. Va en un pseudoelemento para no
   pelearse con el `background` del cristal. */
.cristal::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, var(--cristal-velo) 0%, transparent 55%);
    pointer-events: none;
}

/* Los colores del material, por tema. */
:root {
    --cristal-fondo: rgba(255, 255, 255, .14);
    --cristal-macizo: #f0f0f2;
    --cristal-borde: rgba(255, 255, 255, .5);
    --cristal-brillo: rgba(255, 255, 255, .65);
    --cristal-brillo-bajo: rgba(255, 255, 255, .18);
    --cristal-velo: rgba(255, 255, 255, .38);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-luz="dia"]) {
        --cristal-fondo: rgba(255, 255, 255, .09);
        --cristal-macizo: #26262a;
        --cristal-borde: rgba(255, 255, 255, .16);
        --cristal-brillo: rgba(255, 255, 255, .24);
        --cristal-brillo-bajo: rgba(255, 255, 255, .06);
        --cristal-velo: rgba(255, 255, 255, .09);
    }
}
:root[data-luz="noche"] {
    --cristal-fondo: rgba(255, 255, 255, .09);
    --cristal-macizo: #26262a;
    --cristal-borde: rgba(255, 255, 255, .16);
    --cristal-brillo: rgba(255, 255, 255, .24);
    --cristal-brillo-bajo: rgba(255, 255, 255, .06);
    --cristal-velo: rgba(255, 255, 255, .09);
}

/* ------------------------------------------------------------ LOS BOTONES

   Se van los botones azules: el cristal ES el botón. El color solo se queda en
   el macizo, que es la acción principal de cada bloque —una por bloque, no
   cuatro—.
*/

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 26px;
    border-radius: 980px;
    font-size: 16.5px;
    font-weight: 500;
    letter-spacing: -.01em;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform .3s var(--curva),
        box-shadow .3s var(--curva),
        background-color .3s var(--curva);
}

/* Al pasar por encima el cristal se aclara; al pulsar se FLEXIONA: se encoge un
   pelo y el brillo del canto sube. */
.cristal.boton:hover {
    box-shadow:
        inset 0 1px 0 var(--cristal-brillo),
        inset 0 -1px 0 var(--cristal-brillo-bajo),
        0 12px 34px -10px rgba(0, 0, 0, .3);
    transform: translateY(-1px);
}
.cristal.boton:active {
    transform: scale(.97);
    box-shadow:
        inset 0 2px 1px var(--cristal-brillo),
        inset 0 -1px 0 var(--cristal-brillo-bajo),
        0 4px 14px -8px rgba(0, 0, 0, .28);
}

/* El tenue: el mismo cristal con menos cuerpo, para la acción secundaria. */
.boton--tenue { box-shadow: inset 0 1px 0 var(--cristal-brillo-bajo), 0 2px 10px -6px rgba(0, 0, 0, .18); }

/* El macizo. UNO por bloque: es la acción que queremos que se pulse, y si todo
   destaca no destaca nada. Lleva la tinta del tema al revés, que da el máximo
   contraste que hay en la paleta. */
.boton--macizo {
    background: var(--tinta);
    color: var(--lienzo);
    border: 1px solid var(--tinta);
    box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .4);
}
.boton--macizo::before { display: none; }
.boton--macizo:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .45); }
.boton--macizo:active { transform: scale(.97); }

/* ------------------------------------------------------------ LA AURORA

   Un cristal necesita ALGO DETRÁS que refractar. Sobre un blanco liso, un botón
   de cristal es un botón blanco: el material no se ve porque no hay nada que
   deformar.

   Así que detrás del titular va un resplandor de color muy suave. No es
   decoración: es lo que hace visible el material de toda la página.

   Se mueve MUY despacio —cuarenta segundos— y no se para nunca, como una
   lámpara de lava a cámara lenta. A esa velocidad no distrae: se percibe, no se
   mira. Y con `prefers-reduced-motion` se queda quieto.
*/

.portada { position: relative; overflow: hidden; }

.aurora {
    position: absolute;
    inset: -30% -10% auto -10%;
    height: 120%;
    z-index: -1;
    pointer-events: none;
    filter: blur(70px);
    opacity: .5;
    background:
        radial-gradient(38% 42% at 22% 32%, rgba(0, 113, 227, .55), transparent 70%),
        radial-gradient(34% 40% at 78% 26%, rgba(175, 82, 222, .45), transparent 70%),
        radial-gradient(30% 36% at 55% 68%, rgba(48, 209, 88, .32), transparent 70%);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-luz="dia"]) .aurora { opacity: .38; }
}
:root[data-luz="noche"] .aurora { opacity: .38; }

@media (prefers-reduced-motion: no-preference) {
    .aurora { animation: ondear 40s ease-in-out infinite alternate; }
    @keyframes ondear {
        from { transform: translate3d(-2%, 0, 0) scale(1); }
        to   { transform: translate3d(2%, -3%, 0) scale(1.12); }
    }
}

/* ------------------------------------------------------- EL BUSCADOR */

.buscador {
    max-width: 560px;
    margin: 40px auto 0;
    padding: 18px 20px 16px;
    border-radius: 20px;
    text-align: left;
}
.buscador__eti { display: block; margin: 0 0 10px; font-size: 14px; font-weight: 600; }

.buscador__fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.buscador__www { font-family: var(--dato); font-size: 14px; color: var(--tinta-3); }

.buscador input {
    flex: 1 1 180px;
    min-width: 0;
    padding: 12px 14px;
    background: var(--cristal-macizo);
    border: 1px solid var(--cristal-borde);
    border-radius: 12px;
    color: var(--tinta);
    font: inherit;
    font-size: 16px;
}
.buscador input::placeholder { color: var(--tinta-3); }
.buscador input:focus { outline: none; box-shadow: 0 0 0 3px rgba(0, 113, 227, .32); }
.buscador input[aria-invalid="true"] { box-shadow: 0 0 0 3px rgba(255, 69, 58, .35); }

.buscador .boton { flex: 0 0 auto; }
.buscador__ayuda { margin: 10px 0 0; font-size: 13px; color: var(--tinta-3); }
.buscador input[aria-invalid="true"] ~ .buscador__ayuda,
.buscador__ayuda[role="alert"] { color: #d70015; }

/* ------------------------------------------------------- LAS CIFRAS */

.cifra span em { display: block; font-style: normal; font-size: 13px; color: var(--tinta-3); }

/* ------------------------------------------ EL MATERIAL EN CADA PIEZA */

.cabecera.cristal { border-radius: 0; border-left: 0; border-right: 0; border-top: 0; }
.cabecera.cristal::before { display: none; }

.baldosa { border-radius: 24px; }
.diapo { border-radius: 26px; }
.capa { border-radius: 16px; }
.credenciales { border-radius: 14px; }
.estado { border-radius: 980px; }
.diapo__visual { background: var(--cristal-macizo); border: 1px solid var(--cristal-borde); }

/* ------------------------------------------------------- APARECER

   La transición vive aquí y el guion solo quita una clase. Si el guion no
   llega, `.oculto` no se pone nunca y se ve todo: esa es la garantía.
*/

@media (prefers-reduced-motion: no-preference) {
    .sube, .escalona > * {
        transition: opacity .7s var(--curva), transform .7s var(--curva);
    }
    .oculto { opacity: 0; transform: translateY(26px); }
}