/* ═══════════════════════════════════════════════════════════════════════
   OMAYA — sistema de marca
   Todo lo de acá sale de Omaya_Brand System.pdf. La referencia de página
   está en docs/brandbook-spec.md. Este archivo es idéntico en las tres
   propuestas: lo que cambia entre ellas es la composición, no la marca.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tipografía (pág. 4) ────────────────────────────────────────────── */
@font-face{
  font-family:'EB Garamond';src:url('../assets/fonts/EBGaramond.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'EB Garamond';src:url('../assets/fonts/EBGaramond-Italic.woff2') format('woff2');
  font-weight:400 700;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'Herculanum';src:url('../assets/fonts/Herculanum.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  /* Paleta — los cinco del manual y ninguno más (pág. 5) */
  --verde:#214334;
  --medio:#638D75;
  --salvia:#A8BAA8;
  --oro:#AA8555;
  --crema:#EFEDDC;

  /* Tokens de superficie. Los redeclara cada bloque que cambia de fondo:
     un botón que hereda el token de otra sección queda invisible. */
  --tinta:var(--crema);
  --tinta-2:var(--salvia);
  --filete:var(--oro);
  --btn-bg:var(--crema);
  --btn-tinta:var(--verde);

  --serif:'EB Garamond',Georgia,'Times New Roman',serif;
  --titulo:'Herculanum','EB Garamond',Georgia,serif;

  --medida:64ch;
  --hair:1px;

  /* ── Curvas ────────────────────────────────────────────────────────
     El manual no tiene un solo borde redondeado en 13 páginas, así que el
     default es esquina viva. Pero la web que armó Nacho —la referencia que
     el cliente ya conoce y quiere conservar— tiene su propio sistema de
     radios, y las propuestas que la continúan lo activan redefiniendo
     estos tres tokens. Las que se definen por la esquina viva (A mosaico,
     C manual, F círculo) los dejan en 0. */
  --radio:0;        /* tarjetas, fotos, paneles */
  --radio-pill:0;   /* botones, chips, etiquetas */
  --radio-input:0;  /* campos de formulario */
  /* Alto de la barra fija de cada página: el enlace de accesibilidad se
     posa justo debajo para no taparle el wordmark. C lo pone en 0 porque
     su barra va abajo. */
  --barra-alto:4.6rem;
}

/* ── Reset ──────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--serif);font-size:clamp(1rem,.94rem + .3vw,1.15rem);
     line-height:1.62;background:var(--verde);color:var(--tinta);
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* El navegador trae margin:1em 40px en figure. Sin esto ninguna foto
   llega a sangre, y el sistema entero se basa en fotografía a sangre. */
figure{margin:0}
img{display:block;max-width:100%}
/* Los controles no heredan la tipografía: si no, se cuela Arial. */
button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
/* Nada trae curva por su cuenta: la ponen los tokens de arriba, y solo
   en las propuestas que la piden. */
*{border-radius:0}

/* ── Superficies. Solo los cuatro pares que pasan AA (pág. 6) ───────── */
.s-verde {background:var(--verde); --tinta:var(--crema); --tinta-2:var(--salvia);
          --filete:var(--oro);   --btn-bg:var(--crema); --btn-tinta:var(--verde); color:var(--tinta)}
.s-crema {background:var(--crema); --tinta:var(--verde); --tinta-2:var(--verde);
          --filete:var(--oro);   --btn-bg:var(--verde); --btn-tinta:var(--crema); color:var(--tinta)}
.s-salvia{background:var(--salvia);--tinta:var(--verde); --tinta-2:var(--verde);
          --filete:var(--verde); --btn-bg:var(--verde); --btn-tinta:var(--crema); color:var(--tinta)}
.s-medio {background:var(--medio); --tinta:var(--crema); --tinta-2:var(--crema);
          --filete:var(--crema); --btn-bg:var(--crema); --btn-tinta:var(--verde); color:var(--tinta)}

/* ── Escala tipográfica ─────────────────────────────────────────────── */

/* Title text — Herculanum, ALL CAPS, tracking 20 (pág. 4) */
/* El espacio entre palabras va abierto a propósito. En Herculanum, en caja
   alta, la Y arranca con un trazo que se mete debajo de la letra anterior:
   "QUE YA" se lee "QUEYA", "EL FUEGO Y LA" se lee "FUEGOY". La fuente no
   tiene kerning para ese par, así que lo abre el espacio, no la letra. */
.t{font-family:var(--titulo);font-weight:400;text-transform:uppercase;
   letter-spacing:.02em;word-spacing:.24em;line-height:1.04;
   font-size:clamp(2rem,1.1rem + 4.4vw,4.4rem)}
.t--xl{font-size:clamp(2.6rem,1.1rem + 7vw,7rem)}
.t--sm{font-size:clamp(1.4rem,1rem + 1.8vw,2.4rem)}

/* Statement text — EB Garamond, ALL CAPS, tracking 180 (pág. 4).
   La mezcla romana + <i> bastardilla dentro de la misma frase es el rasgo
   tipográfico central del manual (págs. 2, 8, 9, 10, 12). */
.st{font-family:var(--serif);text-transform:uppercase;letter-spacing:.18em;
    line-height:1.9;font-size:clamp(.7rem,.62rem + .3vw,.82rem);color:var(--tinta-2)}
.st i{text-transform:lowercase;letter-spacing:.04em;font-size:1.16em}
/* El enunciado en dorado del manual (pág. 8) SIEMPRE en tamaño display:
   por debajo de 24px el umbral WCAG sube a 4,5 y el oro no llega. */
.st--oro{color:var(--oro);font-size:clamp(1.56rem,1.2rem + 1.5vw,2.3rem);line-height:1.9}

/* Display serif — el gesto de la pág. 2 y de la historia "10 Days" (pág. 12) */
.d{font-family:var(--serif);font-weight:400;line-height:1.02;
   font-size:clamp(2.8rem,1rem + 8vw,7.5rem);letter-spacing:-.01em}
.d i{font-style:italic}

.lede{font-size:clamp(1.05rem,.98rem + .42vw,1.3rem);line-height:1.66;max-width:var(--medida)}
.mini{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-2)}

/* Numeración de sección, como el índice de la pág. 2 */
.num{font-family:var(--serif);letter-spacing:.18em;text-transform:uppercase;
     font-size:.74rem;color:var(--tinta-2)}

/* ── Filetes (págs. 1, 12, 13) ──────────────────────────────────────── */
.rule{border:0;border-top:var(--hair) solid var(--filete);opacity:.55;margin:0}
.rule--corta{width:clamp(3rem,6vw,5.5rem)}

/* ── Botón ────────────────────────────────────────────────────────────
   El dorado NO lleva el texto del botón. Verde sobre oro da 3,23, y no
   califica como "texto grande" salvo a >=24px o >=18,66px en negrita:
   un botón de 20px a peso 600 exige 4,5 y no llega. Así que el relleno
   es crema (o verde sobre crema) —9,29— y el dorado queda de filete,
   que es su rol en el manual. */
.btn{display:inline-block;border-radius:var(--radio-pill);font-family:var(--serif);font-weight:600;
     font-size:clamp(.95rem,.92rem + .18vw,1.06rem);letter-spacing:.09em;
     text-transform:uppercase;text-decoration:none;padding:.88em 1.95em;
     background:var(--btn-bg);color:var(--btn-tinta);
     border:var(--hair) solid var(--filete);
     cursor:pointer;transition:background .35s ease,color .35s ease}
.btn:hover{background:var(--filete);color:var(--verde)}

/* ── Escala de botones ─────────────────────────────────────────────────
   Tres escalones, y el orden lo da la pedida:

     .btn--aportar   la pedida. El único botón que tiene que verse desde
                     el otro lado de la habitación.
     .btn            acciones de verdad secundarias: entrar al grupo,
                     abrir otra propuesta.
     .btn--linea     el acompañante del CTA ("ver la obra"). Cede.

   Antes los tres pesaban igual, así que "Aportar" y "Ver la obra" salían
   empatados y la página no decía qué quería que hicieras. */
/* ⚠️ El tamaño se acumula DOS veces: la fuente crece con `vw` y el padding
   está en `em`, o sea que crece con la fuente ya crecida. Con el techo en
   1,55rem el botón medía 93px de alto y 572 de ancho en escritorio — el
   doble que los secundarios de la misma página, que miden 55. Se ve enorme,
   y además rompe la escala que esta misma sección declara. El techo de la
   fuente y el padding se bajaron juntos; la jerarquía se mantiene por
   PROPORCIÓN, no por tamaño absoluto. */
.btn--aportar{font-size:clamp(1.02rem,.98rem + .26vw,1.16rem);
              padding:.94em 2.3em;letter-spacing:.1em}
.btn--linea{background:transparent;color:var(--tinta);border-color:var(--filete);
            font-size:clamp(.85rem,.83rem + .13vw,.93rem);padding:.82em 1.7em}
.btn--linea:hover{background:var(--btn-bg);color:var(--btn-tinta)}

/* ── Logo. Los vectores del manual, teñidos por máscara: un solo archivo
      sirve para cualquiera de los cinco colores. ─────────────────────── */
.marca{display:block;background-color:currentColor;
       -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
       -webkit-mask-position:center;mask-position:center;
       -webkit-mask-size:contain;mask-size:contain}
.marca--logo    {-webkit-mask-image:url('../assets/brand/Omaya_Logos_Vector-01.svg');
                 mask-image:url('../assets/brand/Omaya_Logos_Vector-01.svg');aspect-ratio:647.77/459.13}
.marca--wordmark{-webkit-mask-image:url('../assets/brand/Omaya_Logos_Vector-02.svg');
                 mask-image:url('../assets/brand/Omaya_Logos_Vector-02.svg');aspect-ratio:647.77/128.19}
.marca--isotipo {-webkit-mask-image:url('../assets/brand/Omaya_Logos_Vector-03.svg');
                 mask-image:url('../assets/brand/Omaya_Logos_Vector-03.svg');aspect-ratio:305.3/299.92}

/* ── El patrón de ondas (págs. 9 y 11) ──────────────────────────────
   Cintas anchas con vueltas en horquilla, tono sobre tono. Medido en el
   manual: fondo #9EAF9E, cinta #95A997 — seis niveles de diferencia. */
.ondas{position:relative;isolation:isolate}
.ondas::before{content:'';position:absolute;inset:0;z-index:-1;
  color:color-mix(in srgb,var(--verde) 9%,transparent);
  -webkit-mask-image:url('../assets/img/pattern-ondas.svg');
  mask-image:url('../assets/img/pattern-ondas.svg');
  -webkit-mask-size:cover;mask-size:cover;
  -webkit-mask-position:center;mask-position:center;
  background-color:currentColor}

/* ── Grano de papel (págs. 1 y 13) ──────────────────────────────────── */
.grano{position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  mix-blend-mode:overlay}

/* ── Fotografía: a sangre, sin nada encima ──────────────────────────── */
.foto{overflow:hidden;position:relative;border-radius:var(--radio)}
/* Absoluta a propósito: con height:100% sobre un contenedor de alto
   automático el navegador cae al alto natural del archivo y la foto le
   impone su proporción a toda la fila de la grilla. */
.foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ── Aparición al entrar en pantalla ────────────────────────────────── */
.rv{opacity:0;transform:translateY(18px);
    transition:opacity 1s cubic-bezier(.22,.61,.36,1) var(--d,0s),
               transform 1s cubic-bezier(.22,.61,.36,1) var(--d,0s)}
.rv.on{opacity:1;transform:none}
.rvf{opacity:0;transition:opacity 1.2s ease var(--d,0s)}
.rvf.on{opacity:1}

.saltar{position:absolute;left:-9999px;top:0;background:var(--crema);color:var(--verde);
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.saltar:focus{left:1rem;top:calc(var(--barra-alto) + .5rem);z-index:99;
  padding:.65em 1.1em;border:var(--hair) solid var(--oro)}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px}

/* ── Desplazamiento ───────────────────────────────────────────────────
   Dos cosas, y la segunda importa más que la primera.

   El salto instantáneo a un ancla desorienta: la página cambia de golpe y
   no se ve de dónde a dónde fue. Con la transición, el recorrido se lee.

   Y sin `scroll-padding-top` el título de la sección aterriza DEBAJO de la
   barra pegajosa: hacés clic en "La obra" y caés en la mitad de un párrafo,
   con el titular tapado. El alto real de la barra cambia por página y con
   el ancho, así que lo mide `comun.js` en vez de declararlo a mano. */
html{scroll-padding-top:calc(var(--barra-alto,0px) + 1.2rem)}
/* En positivo a propósito: si el sistema pide quietud, no hay que apagar
   nada — nunca se prendió. */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv,.rvf{opacity:1;transform:none}
}


/* ── El video de la familia ───────────────────────────────────────────
   Bloque autónomo: no depende del contenedor de cada propuesta, así que
   entra igual en cualquiera de las doce.

   Es una PIEZA enmarcada, no una pared (Nico, 06/09). El tope anterior era
   `calc(80svh * 16 / 9)` — el ALTO de la ventana decidiendo un ANCHO — y en
   un 1440x900 daba 1280x720: media pantalla de video y el resto de la
   sección vacía. Ahora mide 820px, el mismo ancho que la columna de texto de
   las propuestas, y el ancho lo decide el ancho de la ventana.

   El archivo es 16:9 (1920x1080) y la caja se declara con esa proporción,
   así `contain` no tiene nada que recortar: limitando el ALTO la caja
   quedaba más apaisada que el video y `cover` le cortaba la cabeza a quien
   habla. El filete dorado va alrededor —el oro es marco en el manual, nunca
   texto. */
.sec-video{padding-block:clamp(2.6rem,5vw,4.4rem)}
.video{width:min(100% - 2 * clamp(1.25rem,4.6vw,4rem), 820px);margin-inline:auto;
  border:var(--hair) solid var(--filete);background:var(--verde)}
.video video{display:block;width:100%;height:auto;
  aspect-ratio:16/9;object-fit:contain;background:var(--verde)}


/* ── Las redes de Omaya, en el pie ────────────────────────────────────
   Enlaces verificados contra los que ya usa la web en producción y el
   dossier del cliente. La tinta la hereda de la superficie del pie, así
   que el par siempre es uno de los que pasan AA. */
.redes{display:flex;flex-wrap:wrap;justify-content:center;
  gap:.7rem clamp(1rem,2.4vw,2rem);margin-top:clamp(1.1rem,2.2vw,1.7rem)}
.redes a{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;color:var(--tinta);padding-bottom:3px;
  border-bottom:var(--hair) solid color-mix(in srgb,var(--filete) 55%,transparent);
  transition:border-color .35s ease}
.redes a:hover{border-bottom-color:var(--filete)}