/* ============================================================================
   Espacio Amarillo — hoja de estilos única.

   Dos referencias del mismo autor (Tomoya Okada), combinadas:
   · «Five Into One»: apertura punto → cinco tarjetas → foto a sangre → texto.
   · Portfolio v7: cuerpo gris claro con texto casi negro, declaraciones en
     mayúsculas con su eco en minúscula, etiquetas "(1) SECCIÓN", letras
     apiladas en vertical, listas «título / línea / Ver →» y pasos 01/02/03.
   Un solo acento: el amarillo de la marca.
   ============================================================================ */

:root{
  /* apertura y portadas (oscuro) */
  --claro:   #ececea;
  --negro:   #0f0f0f;
  --tinta:   #eeeeee;
  --tinta-2: rgba(238,238,238,.62);
  --tinta-3: rgba(238,238,238,.34);
  --linea:   rgba(238,238,238,.14);
  /* cuerpo (claro, como v7) */
  --papel:     #dcdcdc;
  --papel-2:   #d2d2d2;
  --tinta-o:   #222222;
  --tinta-o2:  rgba(34,34,34,.62);
  --tinta-o3:  rgba(34,34,34,.38);
  --linea-o:   rgba(34,34,34,.16);
  --amarillo:  #f2b90c;

  --m: clamp(20px, 4vw, 60px);
  --tam: clamp(180px, 36vmin, 420px);

  --sans: "Geist", "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.7, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; background: var(--papel); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body{
  margin: 0;
  background: var(--papel);
  color: var(--tinta-o);
  font: 400 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--amarillo); outline-offset: 4px; }

/* grano fino */
body::before{
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* utilidades tipográficas de v7 ------------------------------------------- */
.etiqueta{                                  /* "(1) BIENVENIDA" */
  margin: 0; font: 500 10px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase;
}
.etiqueta small { display: block; font: inherit; opacity: .55; margin-bottom: 4px; }
.declaracion{                               /* frase en mayúsculas, varias líneas */
  margin: 0; text-transform: uppercase;
  font: 500 clamp(19px, 2.35vw, 36px)/1.14 var(--sans); letter-spacing: -.005em;
  max-width: 30ch;
}
.eco{                                       /* la misma frase, minúscula y diminuta */
  margin: 14px 0 0; font: 400 10.5px/1.5 var(--sans); max-width: 52ch; opacity: .55;
}
.vertical{                                  /* letras apiladas */
  margin: 0; writing-mode: vertical-rl; text-orientation: upright;
  font: 500 10px/1 var(--mono); letter-spacing: .5em; text-transform: uppercase;
}

/* ----------------------------------------------------------------------------
   Cabecera
   ---------------------------------------------------------------------------- */
.cabecera{
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--m) * .75) var(--m);
  color: var(--tinta);
  transition: color .35s;
}
html.fase-clara .cabecera, .cabecera--oscura { color: var(--tinta-o); }

.marca{
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
.marca img { width: 22px; height: 22px; display: block; border-radius: 50%; }

.nav__lista { display: flex; gap: 30px; margin: 0; padding: 0; list-style: none; }
.nav__enlace{
  font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; padding: 6px 0; display: inline-block; color: inherit;
  opacity: .8; transition: opacity .2s;
}
.nav__enlace:hover, .nav__grupo:focus-within > .nav__enlace { opacity: 1; }
.nav__grupo { position: relative; }
.nav__sub{
  position: absolute; left: 0; top: 100%; margin: 0; padding: 14px 0 0; list-style: none;
  display: grid; gap: 10px; min-width: 240px;
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.nav__sub a { font: 400 12px/1.3 var(--sans); text-decoration: none; color: inherit; opacity: .8; }
.nav__sub a:hover { opacity: 1; }
.nav__grupo:hover .nav__sub, .nav__grupo:focus-within .nav__sub, .nav__grupo.abierto .nav__sub{
  opacity: 1; transform: none; pointer-events: auto;
}
.menu-boton{
  display: none; font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 8px 0;
}
@media (max-width: 860px){ .nav { display: none; } .menu-boton { display: inline-block; } }

.menu-movil{
  position: fixed; inset: 0; z-index: 70; background: var(--negro); color: var(--tinta);
  padding: calc(var(--m) * .75) var(--m) var(--m);
  display: flex; flex-direction: column; gap: 32px; overflow: auto;
}
.menu-movil[hidden] { display: none; }
.menu-movil__cabecera { display: flex; justify-content: space-between; align-items: center; }
.menu-movil__marca, .menu-cerrar { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.menu-movil nav { display: grid; gap: 28px; }
.menu-movil__etq { margin: 0 0 8px; font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
.menu-movil ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.menu-movil ul a { font: 500 clamp(22px, 6vw, 30px)/1.15 var(--sans); text-decoration: none; text-transform: uppercase; letter-spacing: -.005em; }
.menu-movil__pie { margin-top: auto; font: 400 12px/1.6 var(--mono); color: var(--tinta-2); }
.menu-movil__pie a { color: var(--tinta); text-decoration: none; }
body.menu-abierto { overflow: hidden; }

/* ----------------------------------------------------------------------------
   Bloque de texto editorial (arriba a la izquierda, sobre la foto)
   ---------------------------------------------------------------------------- */
.bloque-texto { max-width: min(44ch, 84vw); color: var(--tinta); }
.bloque-texto__kicker{
  /* Sobre foto en color estos dos eran el eslabón débil (medido: 4,5 justo, el
     mínimo). Subir su opacidad da margen sin tener que oscurecer más la imagen,
     que es justo lo que no queremos. Siguen por debajo del título. */
  margin: 0 0 14px; font: 500 10px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: rgba(238,238,238,.78);
}
.bloque-texto__titulo{
  margin: 0 0 6px; font: 500 clamp(22px, 2.1vw, 30px)/1.1 var(--sans); letter-spacing: -.012em;
}
.bloque-texto__sub { margin: 0 0 16px; font: 400 12.5px/1.45 var(--sans); color: rgba(238,238,238,.78); }
.bloque-texto__p { margin: 0 0 14px; max-width: 38ch; font: 400 12.5px/1.55 var(--sans); color: rgba(238,238,238,.86); }
.bloque-texto__enlace{
  display: inline-block; margin-top: 4px;
  font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--amarillo); text-decoration: none;
  border-bottom: 1px solid rgba(242,185,12,.35); padding-bottom: 4px; transition: border-color .2s;
}
.bloque-texto__enlace:hover { border-color: var(--amarillo); }

/* ----------------------------------------------------------------------------
   Apertura (home). Estado por defecto = FINAL (funciona sin JS).
   html.intro-activa = estado inicial que anima sitio.js.
   ---------------------------------------------------------------------------- */
.intro{ position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: var(--negro); color: var(--tinta); }
.intro__escena{ position: absolute; inset: 0; background: var(--negro); perspective: 1200px; perspective-origin: 50% 50%; }
.intro__punto{ position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; display: none; }
.intro__grupo{ position: absolute; inset: 0; transform-style: preserve-3d; display: none; }
.intro__tarjeta{
  position: absolute; left: 50%; top: 50%; width: var(--tam); height: var(--tam);
  margin: calc(var(--tam) / -2) 0 0 calc(var(--tam) / -2);
  overflow: hidden; backface-visibility: hidden; will-change: transform, border-radius, opacity;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.35);
}
/* Las tarjetas de la apertura salen EN COLOR. La frontal se desatura sola
   mientras se expande (lo hace sitio.js) y aterriza exactamente en el filtro
   de .intro__foto img, para que el relevo no se note. */
.intro__tarjeta img{ width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.03) contrast(1.04); }
.intro__tarjeta[data-i="0"] { z-index: 5; } .intro__tarjeta[data-i="1"] { z-index: 4; }
.intro__tarjeta[data-i="2"] { z-index: 3; } .intro__tarjeta[data-i="3"] { z-index: 2; }
.intro__tarjeta[data-i="4"] { z-index: 1; }
.intro__foto { position: absolute; inset: 0; }
/* La foto va EN COLOR. El gris que había antes hacía de red de seguridad para la
   legibilidad: al quitarlo, el texto queda sobre una imagen con mucha más variación,
   así que el trabajo lo asume el velo, que se refuerza justo donde cae el texto
   (arriba a la izquierda) y se desvanece antes de llegar a la derecha. */
.intro__foto img{
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block;
  filter: saturate(1.03) contrast(1.04) brightness(.9);
}
.intro__velo{
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(112deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.66) 26%, rgba(0,0,0,.34) 48%, rgba(0,0,0,.06) 68%, rgba(0,0,0,0) 78%),
              linear-gradient(0deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 32%);
}
.intro__texto{ position: absolute; left: var(--m); top: calc(var(--m) + 72px); }
.intro__vertical{
  position: absolute; right: var(--m); top: 50%; transform: translateY(-50%);
  color: var(--tinta-3);
}
.intro__desliza{
  position: absolute; left: var(--m); bottom: calc(var(--m) * .8); margin: 0;
  font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3);
  transition: opacity .5s;
}
.intro__desliza.oculto { opacity: 0; }

html.intro-activa .intro__escena { background: var(--claro); }
html.intro-activa .intro__punto { display: block; opacity: 0; transform: scale(0); }
html.intro-activa .intro__grupo { display: block; }
/* misma lista de funciones que usan los fotogramas de sitio.js (ver t3) */
html.intro-activa .intro__tarjeta { opacity: 0; transform: translate3d(0,0,0) rotateX(0deg) rotateY(-26deg) scale(.04); border-radius: 50%; }
html.intro-activa .intro__foto, html.intro-activa .intro__velo,
html.intro-activa .intro__desliza, html.intro-activa .intro__vertical { opacity: 0; }
html.intro-activa .intro__texto > * { opacity: 0; filter: blur(10px); transform: translateY(8px); }
html.intro-activa .cabecera { opacity: 0; pointer-events: none; }
html.intro-hecha .cabecera { transition: opacity .6s, color .35s; }

html.js:not(.intro-activa) .intro__foto,
html.js:not(.intro-activa) .intro__texto,
html.js:not(.intro-activa) .intro__vertical { animation: aparece .9s var(--ease-out) both; }
@keyframes aparece{ from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
html.js:not(.intro-activa) .intro__vertical { animation-name: aparece-vertical; }
@keyframes aparece-vertical{ from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 760px){ .intro__vertical { display: none; } }

/* ----------------------------------------------------------------------------
   Cuerpo claro: secciones
   ---------------------------------------------------------------------------- */
.seccion{
  padding: clamp(64px, 9vw, 128px) var(--m);
  border-top: 1px solid var(--linea-o);
  background: var(--papel); color: var(--tinta-o);
}
.seccion__rejilla{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 40px; max-width: 1400px;
}
.seccion .etiqueta { color: var(--tinta-o); padding-top: 4px; }
@media (max-width: 760px){ .seccion__rejilla { grid-template-columns: 1fr; gap: 22px; } }

.prosa { margin-top: clamp(28px, 4vw, 48px); }
.prosa p{
  margin: 0 0 1.1em; max-width: 58ch;
  font-size: clamp(14px, 1.05vw, 16px); line-height: 1.55; color: var(--tinta-o);
}
.prosa p:last-child { margin-bottom: 0; }

.contenido__titulo{ margin: 0 0 22px; font: 500 clamp(17px, 1.4vw, 21px)/1.25 var(--sans); text-transform: uppercase; letter-spacing: .01em; }
.contenido__cuerpo > * + .contenido__titulo { margin-top: clamp(40px, 5vw, 64px); }
.contenido__cuerpo > .declaracion + * { margin-top: clamp(32px, 4vw, 56px); }

/* pasos 01 / 02 / 03 */
.pasos { margin: 0; padding: 0; list-style: none; max-width: 760px; }
.paso{
  display: grid; grid-template-columns: 4em 1fr; align-items: baseline; gap: 20px;
  padding: 18px 0; border-top: 1px solid var(--linea-o);
}
.paso:last-child { border-bottom: 1px solid var(--linea-o); }
.paso__n { font: 500 10.5px/1 var(--mono); letter-spacing: .1em; color: var(--tinta-o2); }
.paso__t { font: 500 clamp(17px, 1.6vw, 24px)/1.15 var(--sans); text-transform: uppercase; letter-spacing: .01em; }

/* lista de obras / encuentros destacados (título · línea · Ver →) */
.obras { margin: 0; padding: 0; list-style: none; max-width: 900px; }
.obra{
  display: grid; grid-template-columns: 96px 1fr auto; gap: 8px 24px; align-items: center;
  padding: 18px 0; border-top: 1px solid var(--linea-o); text-decoration: none; color: inherit;
}
.obras li:last-child .obra { border-bottom: 1px solid var(--linea-o); }
.obra__img{
  width: 96px; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--papel-2);
  transition: transform .5s var(--ease-out);
}
.obra:hover .obra__img { transform: scale(1.04); }
.obra__t { margin: 0; font: 500 clamp(16px, 1.4vw, 21px)/1.2 var(--sans); letter-spacing: -.005em; }
.obra__l { margin: 4px 0 0; font: 400 12.5px/1.5 var(--sans); color: var(--tinta-o2); max-width: 56ch; }
.obra__ver{
  font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  border-bottom: 1px solid var(--linea-o); padding-bottom: 4px; transition: border-color .2s;
}
.obra:hover .obra__ver { border-color: var(--tinta-o); }
@media (max-width: 560px){
  .obra { grid-template-columns: 72px 1fr; }
  .obra__img { width: 72px; }
  .obra__ver { grid-column: 2; justify-self: start; }
}

/* ficha, enlaces, figuras, encuentros, pendiente */
.ficha { margin: 0 0 28px; display: grid; gap: 0; max-width: 62ch; }
.ficha__fila{ display: grid; grid-template-columns: minmax(120px, 11em) 1fr; gap: 6px 28px; padding: 12px 0; border-top: 1px solid var(--linea-o); }
.ficha__fila:last-child { border-bottom: 1px solid var(--linea-o); }
.ficha dt { margin: 0; font: 500 10.5px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-o2); }
.ficha dd { margin: 0; font: 400 14px/1.55 var(--sans); }
@media (max-width: 560px){ .ficha__fila { grid-template-columns: 1fr; gap: 2px; } }

.enlaces { margin: 0 0 28px; padding: 0; list-style: none; display: grid; gap: 10px; }
.enlaces a{
  font: 500 10.5px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-o); text-decoration: none; border-bottom: 1px solid var(--linea-o); padding-bottom: 3px;
  transition: border-color .2s;
}
.enlaces a:hover { border-color: var(--tinta-o); }

.figura { margin: 0 0 32px; max-width: 760px; }
.figura img{ width: 100%; height: auto; display: block; }
.figura figcaption { margin-top: 10px; font: 400 10.5px/1.5 var(--mono); letter-spacing: .04em; color: var(--tinta-o2); }

.encuentros { margin: 0 0 28px; padding: 0; list-style: none; max-width: 760px; }
.encuentro{ display: grid; grid-template-columns: minmax(120px, 12em) 1fr; gap: 4px 28px; padding: 16px 0; border-top: 1px solid var(--linea-o); }
.encuentro:last-child { border-bottom: 1px solid var(--linea-o); }
.encuentro__fecha { font: 500 10.5px/1.7 var(--mono); letter-spacing: .08em; color: var(--tinta-o2); }
.encuentro__titulo { font: 500 16px/1.3 var(--sans); }
.encuentro__titulo a { text-decoration: none; border-bottom: 1px solid var(--linea-o); transition: border-color .2s; }
.encuentro__titulo a:hover { border-color: var(--tinta-o); }
.encuentro__quien { grid-column: 2; font: 400 12.5px/1.5 var(--sans); color: var(--tinta-o2); }
@media (max-width: 560px){ .encuentro { grid-template-columns: 1fr; } .encuentro__quien { grid-column: 1; } }

.pendiente { margin: 0; font: 400 11.5px/1.6 var(--mono); letter-spacing: .04em; color: var(--tinta-o2); }

/* vídeo (fachada; no carga YouTube hasta pulsar) */
.video{ position: relative; display: block; max-width: 900px; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.video img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease-out); }
.video:hover img { transform: scale(1.02); }
.video__play{
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(15,15,15,.6); color: var(--tinta); backdrop-filter: blur(6px);
  transition: background .2s, color .2s, transform .3s var(--ease-out);
}
.video:hover .video__play { background: var(--amarillo); color: #111; transform: scale(1.06); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__pie { margin: 12px 0 0; font: 400 10.5px/1.5 var(--mono); letter-spacing: .04em; color: var(--tinta-o2); }

/* botón */
.boton{
  display: inline-block; font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  padding: 15px 20px; border: 1px solid var(--tinta-o); color: var(--tinta-o); text-decoration: none;
  transition: background .2s, color .2s;
}
.boton:hover { background: var(--tinta-o); color: var(--papel); }

/* banda antes del pie */
.banda{
  padding: clamp(56px, 8vw, 110px) var(--m); border-top: 1px solid var(--linea-o);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px;
  background: var(--papel); color: var(--tinta-o);
}
.banda .declaracion { max-width: 24ch; }

/* pie, tipo v7: Contacto / Navegación / Redes */
.pie{
  padding: clamp(40px, 6vw, 80px) var(--m) var(--m); border-top: 1px solid var(--linea-o);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px;
  background: var(--papel); color: var(--tinta-o); font: 400 12px/1.7 var(--sans);
}
.pie p, .pie ul { margin: 0; padding: 0; list-style: none; }
.pie a { color: var(--tinta-o); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s; }
.pie a:hover { border-color: var(--tinta-o); }
.pie .etiqueta { margin-bottom: 10px; color: var(--tinta-o2); }
.pie__firma { grid-column: 1 / -1; margin-top: 24px !important; font: 400 10px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-o3); }
@media (max-width: 760px){ .pie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px){ .pie { grid-template-columns: 1fr; gap: 26px; } }

/* ----------------------------------------------------------------------------
   Páginas interiores: portada con foto a sangre + bloque de texto
   ---------------------------------------------------------------------------- */
.portada{ position: relative; height: 72svh; min-height: 480px; overflow: hidden; background: var(--negro); color: var(--tinta); }
.portada__foto { position: absolute; inset: 0; }
.portada__foto img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(1.03) contrast(1.04) brightness(.84); transform: scale(1.04);
}
.portada__velo{
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(112deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.68) 28%, rgba(0,0,0,.36) 50%, rgba(0,0,0,.06) 70%, rgba(0,0,0,0) 80%);
}
/* Va DESPUÉS de .portada__velo a propósito: las media queries no suman
   especificidad, así que decide el orden en el fichero.
   En pantalla estrecha el texto ocupa todo el ancho, así que un degradado en
   diagonal lo deja medio fuera de la zona protegida: ahí el velo pasa a vertical.
   Medido: sin esto el contraste caía a 2,3 (se exige 4,5). */
@media (max-width: 760px){
  .intro__velo, .portada__velo{
    background: linear-gradient(180deg,
      rgba(0,0,0,.88) 0%, rgba(0,0,0,.80) 26%, rgba(0,0,0,.62) 48%,
      rgba(0,0,0,.34) 68%, rgba(0,0,0,.10) 86%, rgba(0,0,0,0) 100%);
  }
}

.portada__texto { position: absolute; left: var(--m); top: calc(var(--m) + 72px); }
.portada__vertical{ position: absolute; right: var(--m); top: 50%; transform: translateY(-50%); color: var(--tinta-3); }
@media (max-width: 760px){ .portada__vertical { display: none; } }

html.js .portada__foto img { animation: portada-foto 1.6s var(--ease-out) both; }
html.js .portada__texto > * { animation: aparece-borroso .8s var(--ease-out) both; }
html.js .portada__texto > :nth-child(2) { animation-delay: .08s; }
html.js .portada__texto > :nth-child(3) { animation-delay: .16s; }
html.js .portada__texto > :nth-child(4) { animation-delay: .24s; }
html.js .portada__texto > :nth-child(5) { animation-delay: .32s; }
@keyframes portada-foto{ from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: scale(1.04); } }
@keyframes aparece-borroso{ from { opacity: 0; filter: blur(10px); transform: translateY(8px); } to { opacity: 1; filter: blur(0); transform: none; } }

@media (prefers-reduced-motion: reduce){
  html.js .portada__foto img, html.js .portada__texto > *,
  html.js:not(.intro-activa) .intro__foto, html.js:not(.intro-activa) .intro__texto,
  html.js:not(.intro-activa) .intro__vertical { animation: none; }
  .video img, .figura img, .obra__img, .nav__sub { transition: none; }
}

@media (max-width: 640px){
  .intro__texto, .portada__texto { top: calc(var(--m) + 64px); }
  .bloque-texto__p { font-size: 13px; }
}

/* ----------------------------------------------------------------------------
   Cacao (ficha de producto): portada en color, precios, preparación
   ---------------------------------------------------------------------------- */
/* Ya no hace falta la excepción de color: TODAS las portadas van en color y usan el
   mismo velo. Se conserva la clase solo por su animación (escala algo menor) y por
   el zoom más contenido, que a un bodegón de producto le sienta mejor que a una foto
   de sala. */
.portada--color .portada__foto img { transform: scale(1.02); }
html.js .portada--color .portada__foto img { animation-name: portada-foto-color; }
@keyframes portada-foto-color{ from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1.02); } }

.bloque-texto .boton { margin-top: 18px; }
.boton--amarillo { background: var(--amarillo); border-color: var(--amarillo); color: #111; }
.boton--amarillo:hover { background: #111; border-color: #111; color: var(--amarillo); }
.portada .boton--amarillo:hover { background: var(--tinta); border-color: var(--tinta); color: #111; }

.seccion--calida { background: var(--amarillo); color: #111; border-top: 0; }
.seccion--calida .etiqueta { color: #111; }

.ofertas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 900px; }
.oferta{
  display: flex; flex-direction: column; gap: 10px;
  padding: 26px 24px 24px; border: 1px solid rgba(17,17,17,.28); background: rgba(255,255,255,.22);
}
.oferta--destacada { background: #111; border-color: #111; color: var(--tinta); }
.oferta__n { margin: 0; font: 500 10px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .72; }
.oferta__precio { margin: 0; font: 500 clamp(30px, 3.4vw, 44px)/1 var(--sans); letter-spacing: -.02em; }
.oferta__l { margin: 0 0 8px; font: 400 13px/1.5 var(--sans); opacity: .88; max-width: 30ch; }
.oferta .boton { align-self: flex-start; margin-top: auto; border-color: #111; color: #111; }
.oferta .boton:hover { background: #111; color: var(--amarillo); }
.oferta--destacada .boton { border-color: var(--amarillo); color: var(--amarillo); }
.oferta--destacada .boton:hover { background: var(--amarillo); color: #111; }
.nota-envio { margin: 16px 0 0; max-width: 62ch; font: 400 11px/1.6 var(--mono); color: rgba(17,17,17,.72); }
.nota-envio a { color: #111; }
@media (max-width: 640px){ .ofertas { grid-template-columns: 1fr; } }

.paso__d { grid-column: 2; margin: 4px 0 0; max-width: 56ch; font: 400 13.5px/1.5 var(--sans); color: var(--tinta-o2); }
.aviso{
  margin: 22px 0 0; max-width: 60ch; padding-left: 12px; border-left: 2px solid var(--linea-o);
  font: 400 11px/1.6 var(--mono); color: var(--tinta-o2);
}
.pagina--cacao .figura--color figcaption { color: var(--tinta-o2); }
a.figura { color: inherit; }