/*
    ANDAHOST — «Manzana»

    El lenguaje de apple.com, con el contenido de Andahost. Lo que hace que una
    pagina de Apple se reconozca antes de leerla no es el gris: son seis cosas
    muy concretas, y aqui estan las seis.

    1. LA LETRA ES SAN FRANCISCO DONDE LA HAY. `-apple-system` la trae en Mac y
       en iPhone sin descargar nada. Fuera de ahi cae en Manrope, que ya estaba
       en el servidor y es lo mas parecido de lo que tenemos. Descargar una
       imitacion de SF pesaria y se notaria: la de verdad o la mejor que haya.

    2. TITULARES ENORMES, CENTRADOS Y APRETADOS. Hasta 96 px, `font-weight: 600`
       —nunca 800, el negro macizo es de otra marca— y el interletrado en
       negativo. Un titular de 96 px con espaciado normal se deshace.

    3. BANDAS ALTERNAS. Blanco, luego #f5f5f7, luego blanco. Es como Apple separa
       secciones sin una sola linea divisoria.

    4. UN SOLO AZUL, el del sistema, y solo en lo que se pulsa. El color no
       decora: senala.

    5. AIRE. Mucho. El espacio en blanco es la mitad del diseno: una seccion de
       Apple respira 120 px arriba y abajo y el texto nunca pasa de 60 caracteres.

    6. APARECE AL LLEGAR. Nada se mueve solo; las cosas entran cuando el ojo
       llega a ellas, con un viaje corto y una curva que frena larga.

    OSCURO INCLUIDO. Apple lo hace con negro de verdad y grises neutros, sin
    tinte azul. Aqui igual.
*/

/* ============================================================ LAS LETRAS */

@font-face {
    font-family: "Manrope";
    src: url("/_astro/manrope-latin-wght-normal.DHIcAJRg.woff2") format("woff2-variations");
    font-weight: 200 800;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
    font-family: "Manrope";
    src: url("/_astro/manrope-latin-ext-wght-normal.Ch3YOpNY.woff2") format("woff2-variations");
    font-weight: 200 800;
    font-display: swap;
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF;
}
@font-face {
    font-family: "JetBrains Mono";
    src: url("/_astro/jetbrains-mono-latin-wght-normal.B9CIFXIH.woff2") format("woff2-variations");
    font-weight: 100 800;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* ============================================================ LOS COLORES */

:root {
    --lienzo: #fff;
    --banda: #f5f5f7;
    --tarjeta: #fff;

    --tinta: #1d1d1f;
    --tinta-2: #6e6e73;
    --tinta-3: #86868b;

    /* #0071e3 es el azul de Apple, pero sobre el gris de las bandas (#f5f5f7)
       se queda en 4,31:1 y el minimo para texto es 4,5. Se oscurece lo justo:
       5,0:1 sobre el gris y 5,6:1 sobre blanco. */
    --azul: #0068d1;
    --azul-vivo: #0071e3;
    --verde: #248a3d;

    --raya: rgba(0, 0, 0, .1);
    --velo: rgba(0, 0, 0, .04);

    /* SF donde la haya. Fuera de un Apple, Manrope. */
    --tipo: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
            "Manrope", system-ui, "Segoe UI", Roboto, sans-serif;
    --dato: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Sale rapida y frena larga: la curva de Apple. */
    --curva: cubic-bezier(.32, .72, 0, 1);

    --ancho: 1024px;
    --aire: clamp(72px, 11vw, 140px);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-luz="dia"]) {
        --lienzo: #000;
        --banda: #1d1d1f;
        --tarjeta: #1d1d1f;

        --tinta: #f5f5f7;
        --tinta-2: #a1a1a6;
        --tinta-3: #86868b;

        --azul: #2997ff;
        --azul-vivo: #4aa8ff;
        --verde: #30d158;

        --raya: rgba(255, 255, 255, .14);
        --velo: rgba(255, 255, 255, .06);
    }
}

:root[data-luz="noche"] {
    --lienzo: #000;
    --banda: #1d1d1f;
    --tarjeta: #1d1d1f;
    --tinta: #f5f5f7;
    --tinta-2: #a1a1a6;
    --tinta-3: #86868b;
    --azul: #2997ff;
    --azul-vivo: #4aa8ff;
    --verde: #30d158;
    --raya: rgba(255, 255, 255, .14);
    --velo: rgba(255, 255, 255, .06);
}

/* ============================================================ LO BÁSICO */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    /* Y TODO LO DEMAS. Antes esto solo apagaba el desplazamiento suave, y
       seguian vivas las baldosas que se levantan, los botones que se encogen y
       la aurora. Quien pide menos movimiento no lo pide a medias. */
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

body {
    margin: 0;
    background: var(--lienzo);
    color: var(--tinta);
    font-family: var(--tipo);
    /* En rem y no en px: asi respeta el tamaño de letra que alguien haya
       puesto en su navegador. En px, esa preferencia no hace nada. */
    font-size: 1.0625rem;
    line-height: 1.5;
    letter-spacing: -.012em;
    -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* Texto NEGRO sobre el azul en oscuro: #fff sobre #2997ff da 3,02:1. Es lo
   mismo que hace Apple. */
::selection { background: var(--azul); color: #fff; }
:root[data-luz="noche"] ::selection { color: #000; }
@media (prefers-color-scheme: dark) {
    :root:not([data-luz="dia"]) ::selection { color: #000; }
}

:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 6px; }

.saltar { position: absolute; left: -9999px; }
.saltar:focus {
    left: 16px; top: 16px; z-index: 100;
    padding: 12px 20px; border-radius: 8px;
    background: var(--tinta); color: var(--lienzo);
}

.centro { width: min(100% - 44px, var(--ancho)); margin-inline: auto; }
.centro--ancho { width: min(100% - 44px, 1200px); margin-inline: auto; }

/* ============================================================ TIPOGRAFÍA

   `text-wrap: balance` en los titulares. Un titular de tres lineas con la
   ultima suelta es lo que separa una pagina cuidada de una que no.
*/

h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }

h1 {
    font-size: clamp(40px, 7.2vw, 88px);
    line-height: 1.05;
    letter-spacing: -.028em;
}
h2 {
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1.08;
    letter-spacing: -.024em;
}
h3 {
    font-size: clamp(21px, 2.2vw, 26px);
    line-height: 1.18;
    letter-spacing: -.018em;
}

p { margin: 0 0 1em; }

/* El «eyebrow»: pequeno, semibold y en el azul de la marca. Apple lo pone
   encima de casi todos sus titulares y es la mitad de su ritmo. */
.ceja {
    margin: 0 0 14px;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--azul);
}

.entradilla {
    font-size: clamp(19px, 2vw, 24px);
    line-height: 1.42;
    letter-spacing: -.012em;
    color: var(--tinta-2);
    max-width: 34ch;
    margin-inline: auto;
}
.entradilla--izq { margin-inline: 0; }

.dato { font-family: var(--dato); font-variant-numeric: tabular-nums; }

/* ============================================================ LA CABECERA

   Alta de 48 px, translucida y con desenfoque. Es la barra de Apple: no lleva
   logotipo grande ni botones de color, solo texto pequeno muy repartido.
*/

.cabecera {
    position: sticky;
    top: 0;
    z-index: 50;
    /* El solido va PRIMERO: si `color-mix()` no se entiende, esta declaracion
       es la que queda y la barra sigue siendo opaca. Sin esto, una barra
       `sticky` transparente deja el menu encima del texto. */
    background: var(--lienzo);
    background: color-mix(in srgb, var(--lienzo) 72%, transparent);
    border-bottom: 1px solid var(--raya);
}
@supports (backdrop-filter: blur(1px)) {
    .cabecera { backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
}

.cabecera__caja { display: flex; align-items: center; gap: 22px; min-height: 48px; }

.marca { font-size: 18px; font-weight: 700; letter-spacing: -.03em; text-decoration: none; }

.menu { display: flex; gap: 24px; margin-left: auto; align-items: center; }
.menu a {
    font-size: .8125rem;
    font-weight: 400;
    color: var(--tinta);
    text-decoration: none;
    opacity: .85;
    transition: opacity .2s var(--curva);
}
.menu a:hover { opacity: 1; }

@media (max-width: 940px) { .menu { display: none; } .menu--suelto { display: flex; margin-left: auto; } }

/* ============================================================ BOTONES Y ENLACES

   Pildora azul rellena para la accion principal, pildora de linea para la
   secundaria, y el «enlace con flecha» azul para todo lo demas. Los tres son de
   Apple y los tres se distinguen de lejos.
*/

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 23px;
    background: var(--azul);
    color: #fff;
    border: 1px solid var(--azul);
    border-radius: 980px;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s var(--curva), transform .2s var(--curva);
}
.boton:hover { background: var(--azul-vivo); border-color: var(--azul-vivo); }
.boton:active { transform: scale(.97); }

.boton--linea { background: transparent; color: var(--azul); }
.boton--linea:hover { background: color-mix(in srgb, var(--azul) 8%, transparent); border-color: var(--azul); color: var(--azul); }

.botonera { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 34px; }
.botonera--izq { justify-content: flex-start; }

/* El enlace con flecha. La flecha se separa un pelo al pasar por encima: es el
   micromovimiento mas repetido de apple.com. */
.mas {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--azul);
    font-size: 17px;
    text-decoration: none;
}
.mas:hover { text-decoration: underline; text-underline-offset: 4px; }
.mas svg { transition: transform .22s var(--curva); }
.mas:hover svg { transform: translateX(3px); }

/* ============================================================ BANDAS

   Blanco, gris, blanco. Asi separa Apple sin una sola raya.
*/

.banda { padding: var(--aire) 0; }
.banda--gris { background: var(--banda); }
.banda--centrada { text-align: center; }

/* ============================================================ LA PORTADA */

.portada {
    padding: clamp(64px, 11vw, 130px) 0 clamp(56px, 8vw, 96px);
    text-align: center;
}
.portada h1 { margin-bottom: 22px; }

/* ============================================================ LAS CIFRAS

   Cuatro numeros grandes en fila. En Apple los datos van asi: enormes, sin
   caja, con la etiqueta pequena debajo. El numero manda.
*/

.cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: clamp(28px, 4vw, 56px);
    margin-top: clamp(48px, 7vw, 88px);
}
.cifra { text-align: center; }
.cifra strong {
    display: block;
    font-size: clamp(34px, 4.4vw, 52px);
    font-weight: 600;
    letter-spacing: -.028em;
    line-height: 1.05;
}
.cifra span { display: block; margin-top: 8px; font-size: 15px; color: var(--tinta-2); }

/* ============================================================ PRODUCTOS

   Baldosas grandes y muy redondeadas, la primera a lo ancho. Es la parrilla de
   la portada de Apple: una pieza grande arriba y el resto en pares.
*/

.baldosas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: clamp(40px, 5vw, 64px);
}
.baldosa {
    display: flex;
    flex-direction: column;
    padding: clamp(32px, 4vw, 48px);
    background: var(--tarjeta);
    border-radius: 22px;
    text-decoration: none;
    text-align: left;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 28px -12px rgba(0, 0, 0, .12);
    transition: transform .35s var(--curva), box-shadow .35s var(--curva);
}
.baldosa:hover {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 20px 44px -16px rgba(0, 0, 0, .22);
}
.baldosa--ancha { grid-column: 1 / -1; }

.baldosa .ceja { font-size: 15px; }
.baldosa h3 { margin-bottom: 10px; }
.baldosa p { color: var(--tinta-2); font-size: 16px; max-width: 46ch; }

.baldosa--ancha h3 { font-size: clamp(26px, 3.2vw, 38px); letter-spacing: -.022em; }
.baldosa--ancha p { font-size: 18px; }

.rasgos { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; }
.rasgo {
    padding: 5px 12px;
    background: var(--velo);
    border-radius: 980px;
    font-size: .8125rem;
    color: var(--tinta-2);
    white-space: nowrap;
}
.rasgo--demo { color: var(--azul); font-weight: 600; }

.baldosa .mas { margin-top: auto; }

@media (max-width: 760px) {
    .baldosas { grid-template-columns: 1fr; }
}

/* ============================================================ PROMESAS

   Numeradas, porque el numero es informacion: son cinco compromisos. En Apple
   esto seria una lista de «highlights» con mucho aire entre ellas.
*/

.promesas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
    gap: clamp(32px, 4vw, 56px);
    margin-top: clamp(44px, 6vw, 72px);
    text-align: left;
}
.promesa__n {
    display: block;
    margin-bottom: 12px;
    font-family: var(--dato);
    font-size: 13px;
    font-weight: 600;
    color: var(--azul);
}
.promesa h3 { margin-bottom: 8px; font-size: 21px; }
.promesa p { margin: 0; color: var(--tinta-2); font-size: 16px; }

/* ============================================================ LAS CAPAS

   Cinco pasos en escalera, cada uno entrando un poco despues que el anterior.
   Es un diagrama, y un diagrama que se dibuja solo se entiende mejor que uno
   que ya esta ahi.
*/

.capas { display: grid; gap: 12px; margin-top: clamp(40px, 5vw, 64px); text-align: left; }
.capa {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 18px;
    padding: 20px 26px;
    background: var(--tarjeta);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.capa strong { font-size: 18px; font-weight: 600; min-width: 160px; }
/* --tinta-2 y no --tinta-3: a este tamaño el gris claro da 3,62:1. */
.capa span { font-family: var(--dato); font-size: .85rem; color: var(--tinta-2); }

/* ============================================================ EL ESTADO */

.estado {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 17px;
    background: var(--velo);
    border-radius: 980px;
    font-size: 14px;
    text-decoration: none;
    color: var(--tinta-2);
}
.estado__punto { width: 8px; height: 8px; background: var(--verde); border-radius: 50%; flex: 0 0 auto; }

/* ============================================================ EL PIE */

.pie { padding: 48px 0 40px; background: var(--banda); font-size: .78rem; color: var(--tinta-2); }
.pie__rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--raya);
}
.pie h4 { margin: 0 0 10px; font-size: 12.5px; font-weight: 600; color: var(--tinta); }
.pie ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
/* Subrayados: iban del mismo color que el texto de alrededor y sin ninguna
   otra marca, asi que no habia forma de saber que eran enlaces sin pasar el
   raton. Y con el raton no se puede contar. */
.pie a { color: var(--tinta-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--raya); }
.pie a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.pie__abajo { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; padding-top: 20px; }

/* ============================================================ EL MOVIMIENTO

   APARECER AL LLEGAR lo lleva `js/aparecer.js` con IntersectionObserver, y la
   transicion vive en cristal.css. Aqui solo queda la ENTRADA DE LA PORTADA, que
   no espera a nada: ya esta en pantalla al cargar y no hay «llegar» a ella.

   Estaba metida dentro de `@supports (animation-timeline: view())` y por eso en
   Firefox no entraba nada de nada. No usa ninguna timeline: entra por tiempo.
*/
@media (prefers-reduced-motion: no-preference) {
    .portada h1, .portada .entradilla, .portada .botonera, .portada .buscador {
        animation: entrar .9s var(--curva) both;
    }
    .portada .entradilla { animation-delay: .07s; }
    .portada .botonera { animation-delay: .14s; }
    .portada .buscador { animation-delay: .21s; }

    @keyframes entrar {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: none; }
    }
}

/* ============================================================ EL INTERRUPTOR */

.luz {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0;
    background: transparent; border: 0; border-radius: 980px;
    color: var(--tinta); opacity: .85; cursor: pointer;
    transition: background-color .2s var(--curva), opacity .2s var(--curva);
}
.luz:hover { background: var(--velo); opacity: 1; }
:root[data-luz="noche"] .luz__dia, :root:not([data-luz="noche"]) .luz__noche { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-luz="dia"]) .luz__dia { display: none; }
    :root:not([data-luz="dia"]) .luz__noche { display: inline; }
    :root[data-luz="dia"] .luz__noche { display: none; }
    :root[data-luz="dia"] .luz__dia { display: inline; }
}