/* =========================================================================
   Campo Hass Internacional — Sistema de estilos v2
   Derivado del Manual de Identidad Visual (sept. 2026) y del PRD v2.

   v2 — cambios de direccion:
   - Todos los CTA primarios son verdes y cambian a otro verde en hover.
     Llevan borde morado porque el verde sobre crema da 1.28-1.82:1 de
     contraste de componente y el minimo exigible es 3:1. El borde morado
     (14.45:1) resuelve el requisito y ademas hace el boton mas grafico.
   - Lenguaje de formas redondeado, para acompanar la "a" del logotipo:
     botones en pastilla, tarjetas amplias y secciones oscuras con las
     esquinas superiores curvas.
   - Tipografia: se mantienen las letras originales de Google Sans Flex, sin
     redondear. Se probo el eje ROND y se descarto por decision del cliente:
     el sitio busca un registro estetico y premium, y lo expresivo se resuelve
     en la animacion, no en la letra.
   - Derivados de la paleta (velos verdes y morados profundos) para dar
     profundidad sin introducir colores ajenos al sistema.
   - Movimiento de entrada al hacer scroll, desactivable por preferencia.

   Reglas de marca que se mantienen:
   - Fondo editorial crema; morado como ancla; verdes dosificados.
   - Playfair Display NO se usa: queda reservada al logotipo oficial.
   - Jerarquia por peso. Alineacion izquierda e interlineado abierto.
   - Los verdes nunca llevan texto sobre crema.
   ========================================================================= */

/* ---------- Tipografia oficial: Google Sans Flex, variable ----------
   Dos cortes del mismo archivo fuente, con el tamano optico fijado:
   24pt para lectura y 72pt para titulares. Sustituyen a cuatro archivos
   estaticos y pesan menos, con las mismas letras.                      */
@font-face {
  font-family: "GSF Texto";
  src: url("../fonts/gsf-texto.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GSF Display";
  src: url("../fonts/gsf-display.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Paleta oficial — Manual 05 */
  --morado:        #341539;
  --terracota:     #752413;
  --verde-monte:   #90C747;
  --verde-hoja:    #AED046;
  --verde-brote:   #D6E23A;
  /* Crema Campo #F7F3EA queda documentado pero no en uso: ver nota abajo. */

  /* Base blanca. El manual define Crema Campo #F7F3EA como fondo editorial;
     se sustituye por blanco por decision del cliente, que lo quiere mas
     limpio. El token conserva el nombre --crema para no reescribir 200
     reglas, pero su valor es blanco. Los velos pasan a grises casi
     neutros: en beige competian con la fotografia; en blanco el verde
     queda solo como acento. */
  --crema:         #FFFFFF;   /* base (antes #F7F3EA)     */
  --crema-hueco:   #F5F5F3;   /* alternancia de seccion   */
  --crema-borde:   #E7E7E3;   /* bordes y separadores     */
  --verde-velo:    #F4F6F0;   /* gris con un guino verde  */
  --verde-suave:   #EBEEE4;
  --brote-velo:    #F7F8F1;
  --morado-profundo: #220E25;
  --morado-calido: #481A2E;   /* morado + 30% terracota   */

  --morado-80:     rgba(52, 21, 57, .80);
  --morado-62:     rgba(52, 21, 57, .66);  /* 5.30:1 sobre blanco, 4.51:1 sobre el velo mas oscuro */
  --morado-16:     rgba(52, 21, 57, .14);
  --morado-08:     rgba(52, 21, 57, .055);
  --crema-72:      rgba(255, 255, 255, .72);
  --crema-16:      rgba(255, 255, 255, .15);

  --texto:         var(--morado);
  --texto-suave:   var(--morado-62);

  /* Tipografia */
  --fuente:  "GSF Texto", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "GSF Display", "GSF Texto", ui-sans-serif, system-ui, sans-serif;

  /* Escala fluida. Los titulares llevan el peso visual del sitio: cuerpo
     grande, peso alto y tracking cerrado. El cuerpo de texto se mantiene
     donde estaba, para que el contraste entre ambos sea el que ordena la
     lectura. */
  --t-display: clamp(2.8rem, 1.4rem + 4.9vw, 5.6rem);
  --t-h1:      clamp(2.4rem, 1.35rem + 4.1vw, 4.8rem);
  --t-h2:      clamp(2rem, 1.25rem + 3.3vw, 3.9rem);
  --t-h3:      clamp(1.22rem, 1.02rem + .78vw, 1.65rem);
  --t-lead:    clamp(1rem, .96rem + .28vw, 1.16rem);
  --t-body:    .975rem;
  --t-small:   .875rem;
  --t-rotulo:  .75rem;

  /* Ritmo */
  --alto-cabecera: 5.1rem;   /* debe coincidir con .cabecera-fila */
  --gutter: 1.25rem;
  --ancho:  78rem;
  --seccion: clamp(4rem, 2.5rem + 5.5vw, 7.75rem);

  /* Formas: el sistema es redondeado, siguiendo la "a" del logotipo */
  --radio-pastilla: 99px;
  --radio-tarjeta: clamp(16px, 1.4vw, 22px);
  --radio-campo: 12px;
  --radio-bloque: clamp(28px, 4vw, 56px);
}

@media (min-width: 40em) { :root { --gutter: 2rem; } }

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

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

body {
  margin: 0;
  background: var(--crema);
  color: var(--texto);
  font-family: var(--fuente);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Nota: NO se pone overflow-x en body. Hacerlo convierte el body en
   contenedor de scroll (queda en "hidden auto"), y eso rompe la medicion
   de position:sticky y window.scrollTo. Cada bloque con adornos que
   sobresalen los recorta por su cuenta: .portada, .encabezado-pagina,
   .cierre y .escena-fija ya llevan overflow:hidden. */

/* Titulares en el corte de 72pt, sin redondear: el eje ROND queda en su
   valor por defecto (0), que son las letras originales de la familia. */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 760;          /* el eje llega a 900; 760 pesa sin empastarse */
  line-height: 1.02;
  letter-spacing: -.038em;
  margin: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h3, h4 { font-weight: 640; line-height: 1.16; letter-spacing: -.022em; }

p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2.5px solid var(--terracota);
  outline-offset: 3px;
  border-radius: 6px;
}
.seccion-oscura :focus-visible { outline-color: var(--verde-brote); }
::selection { background: var(--verde-brote); color: var(--morado); }

.salto-contenido {
  position: absolute; left: 0; top: 0;
  transform: translateY(-120%);
  background: var(--morado); color: var(--crema);
  padding: .8rem 1.2rem; z-index: 200;
  font-weight: 600; font-size: var(--t-small);
  border-bottom-right-radius: var(--radio-campo);
}
.salto-contenido:focus { transform: translateY(0); }

/* ---------- Composicion ---------- */
.contenedor {
  width: 100%; max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.contenedor-estrecho { max-width: 53rem; }

.seccion { padding-block: var(--seccion); }
.seccion-corta { padding-block: calc(var(--seccion) * .6); }

/* Fondos: se alternan crema, velo verde y morado para dar ritmo */
.seccion-hueca { background: var(--verde-velo); }
.seccion-verde { background: var(--verde-suave); }
.seccion-brote { background: var(--brote-velo); }

/* Las secciones oscuras son bloques curvos que montan sobre el crema */
.seccion-oscura {
  position: relative;
  background: linear-gradient(168deg, var(--morado) 0%, var(--morado-profundo) 74%, var(--morado-calido) 100%);
  color: var(--crema);
  border-radius: var(--radio-bloque) var(--radio-bloque) 0 0;
  margin-top: calc(var(--radio-bloque) * -.5);
}
.seccion-oscura + .seccion-oscura { margin-top: 0; border-radius: 0; }
.seccion-oscura:last-of-type { border-radius: var(--radio-bloque) var(--radio-bloque) 0 0; }
.seccion-oscura h1, .seccion-oscura h2, .seccion-oscura h3 { color: var(--crema); }
.seccion-oscura .texto-suave { color: var(--crema-72); }

.borde-arriba { border-top: 1px solid var(--crema-borde); }
.seccion-oscura.borde-arriba { border-top-color: transparent; }

/* La curva de un bloque oscuro existe para que monte sobre el fondo claro.
   Si lo que tiene encima es la cabecera fotografica —tambien oscura— esa
   curva deja ver dos esquinas de fondo blanco entre la foto y el bloque,
   y se lee como un corte mal hecho. Sobre foto va a hueso. */
.encabezado-pagina--foto + .seccion-oscura {
  border-radius: 0;
  margin-top: 0;
}

/* Etiqueta de seccion: pastilla con borde fino y texto en caja baja.
   Sustituye a las versalitas espaciadas: el registro de la referencia es
   mas limpio y deja todo el peso visual en el titular. */
.rotulo {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .38rem .9rem .38rem .45rem;
  margin: 0 0 1.5rem;
  border: 1px solid var(--morado-16);
  border-radius: var(--radio-pastilla);
  background: rgba(255, 255, 255, .55);
  font-family: var(--fuente);
  font-size: .8rem; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  line-height: 1;
  color: var(--morado-80);
}
.seccion-oscura .rotulo {
  border-color: var(--crema-16);
  background: rgba(255, 255, 255, .08);
  color: var(--crema-72);
}
.rotulo-num {
  display: inline-grid; place-items: center;
  inline-size: 1.55rem; block-size: 1.55rem;
  border-radius: 50%;
  background: var(--verde-brote);
  color: var(--morado);
  font-size: .68rem; font-weight: 700;
  letter-spacing: 0;
}
.rotulo-centrado { justify-content: center; }

.display {
  font-family: var(--display);
  font-size: var(--t-display);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.045em;
}
.t-h1 { font-size: var(--t-h1); }
.t-h2 { font-size: var(--t-h2); }
.t-h3 { font-size: var(--t-h3); }

/* Palabra destacada dentro de un titular: da relieve sin cambiar de color */
.resalte {
  color: var(--terracota);
}
.seccion-oscura .resalte { color: var(--verde-brote); }

/* Subtitulo de apoyo: pequeno, gris y de medida corta. En la referencia
   el texto que acompana al titular es discreto; el contraste entre un
   titular muy pesado y este parrafo es lo que ordena la lectura. */
.lead {
  font-size: var(--t-lead);
  line-height: 1.62;
  font-weight: 400;
  color: var(--morado-62);
  max-width: 42ch;
}
.seccion-oscura .lead { color: var(--crema-72); }
.lead-ancho { max-width: 52ch; }

.texto-suave { color: var(--texto-suave); }
.medida { max-width: 40rem; }
.medida-ancha { max-width: 56rem; }
.pie { font-size: var(--t-small); color: var(--texto-suave); line-height: 1.6; }

.apilar > * + * { margin-top: 1.15rem; }
.apilar-s > * + * { margin-top: .6rem; }
.apilar-l > * + * { margin-top: 2rem; }

/* ---------- Movimiento de entrada ---------- */
/* Solo se oculta si JavaScript esta disponible (clase .js puesta por un
   script en linea en el <head>). Sin JavaScript el contenido se ve
   normalmente: la animacion nunca puede impedir la lectura. */
.js .revelar {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--retardo, 0ms);
}
.js .revelar.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .revelar { opacity: 1; transform: none; transition: none; }
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.7rem;
  font-family: var(--fuente);
  font-size: .955rem; font-weight: 600;
  letter-spacing: -.005em;
  border: 1.5px solid transparent;
  border-radius: var(--radio-pastilla);
  cursor: pointer;
  transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* Primario: pastilla morada solida con texto crema, que pasa a verde al
   posarse. Se retiro la sombra de desplazamiento dura (0 2px 0): ese
   recurso lee como retro y el registro del sitio es minimalista.
   El morado sobre crema da 14.45:1, asi que el boton se distingue sin
   necesidad de bordes ni relieve. */
.btn-primario {
  background: var(--morado);
  color: var(--crema);
  border-color: var(--morado);
}
.btn-primario:hover {
  background: var(--verde-brote);
  border-color: var(--verde-brote);
  color: var(--morado);
}
.btn-primario:active { background: var(--verde-hoja); border-color: var(--verde-hoja); }

.btn-secundario {
  background: transparent; color: var(--morado);
  border-color: var(--morado-16);
}
.btn-secundario:hover { border-color: var(--morado); background: transparent; }

/* Sobre morado se invierte */
.seccion-oscura .btn-primario {
  background: var(--verde-brote); color: var(--morado);
  border-color: var(--verde-brote);
}
.seccion-oscura .btn-primario:hover {
  background: var(--crema); border-color: var(--crema);
}
.seccion-oscura .btn-secundario { color: var(--crema); border-color: var(--crema-16); }
.seccion-oscura .btn-secundario:hover { border-color: var(--crema); background: transparent; }

.btn-flecha::after { content: "\2192"; font-weight: 400; }
.grupo-btn { display: flex; flex-wrap: wrap; gap: .85rem; }

/* ---------- CTA destacado ----------
   Base morada con un bloque verde a la izquierda que barre el boton al
   pasar el cursor, con una trama de puntos en marcha. Se reserva a UN
   solo boton por pantalla —la portada y el cierre de cada pagina— para
   que el efecto no se sature.

   Adaptacion respecto al original: la etiqueta se mantiene sobre el
   bloque verde y cambia a morado, en lugar de quedar tapada. Asi el
   barrido se conserva y el texto sigue legible: crema sobre morado da
   14.45:1 en reposo y morado sobre verde brote 11.28:1 al pasar. */
.btn-cta {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 3.5rem;
  padding: .95rem 1.9rem .95rem 4.1rem;
  font-family: var(--fuente);
  font-size: .975rem; font-weight: 600;
  letter-spacing: -.005em;
  color: var(--crema);
  background: var(--morado);
  border: none;
  border-radius: var(--radio-pastilla);
  overflow: hidden;
  cursor: pointer;
  transition: background-color .22s ease;
}
.btn-cta:hover { background: var(--morado-profundo); }

.btn-cta-acento {
  position: absolute; z-index: 1;
  top: 5px; bottom: 5px; left: 5px;
  inline-size: 2.9rem;
  display: flex; align-items: center; gap: .6rem;
  padding-inline: .85rem;
  overflow: hidden;
  border-radius: var(--radio-pastilla);
  background: var(--verde-brote);
  transition: inline-size .38s cubic-bezier(.65, 0, .35, 1);
}
.btn-cta:hover .btn-cta-acento,
.btn-cta:focus-visible .btn-cta-acento { inline-size: calc(100% - 10px); }

.btn-cta-texto {
  position: relative; z-index: 2;
  transition: color .22s ease .1s;
}
.btn-cta:hover .btn-cta-texto,
.btn-cta:focus-visible .btn-cta-texto { color: var(--morado); }

.btn-cta-acento svg { flex: none; overflow: visible; }
.btn-cta-punto {
  transform-box: fill-box;
  transform-origin: center;
  animation: punto-onda 1.4s ease-in-out infinite;
}
@keyframes punto-onda {
  0%, 70%, 100% { opacity: .25; transform: scale(.85); }
  35%           { opacity: 1;   transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-cta-punto { animation: none; opacity: 1; }
  .btn-cta-acento { transition: none; }
  .btn-cta-texto { transition: none; }
}

/* Sobre morado la base se aclara para no fundirse con el fondo */
.seccion-oscura .btn-cta {
  background: rgba(247, 243, 234, .12);
  box-shadow: inset 0 0 0 1px var(--crema-16);
}
.seccion-oscura .btn-cta:hover { background: rgba(247, 243, 234, .2); }
/* Dentro de un formulario la tarjeta es crema: el boton recupera la base
   morada aunque la seccion que lo contiene sea oscura. */
.seccion-oscura .formulario .btn-cta {
  background: var(--morado); box-shadow: none;
}
.seccion-oscura .formulario .btn-cta:hover { background: var(--morado-profundo); }

.enlace-texto {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; font-size: .955rem;
  border-bottom: 2px solid var(--verde-monte);
  padding-bottom: 2px;
  transition: border-color .18s ease, color .18s ease, gap .18s ease;
}
.enlace-texto::after { content: "\2192"; font-weight: 400; }
.enlace-texto:hover { border-color: var(--terracota); color: var(--terracota); gap: .75rem; }
.seccion-oscura .enlace-texto:hover { border-color: var(--verde-brote); color: var(--verde-brote); }

/* ---------- Cabecera: capsula de cristal flotante ----------
   No es una barra a todo el ancho: es una capsula centrada que flota sobre
   el contenido, con cristal difuminado. Se adapta sola segun lo que tenga
   detras (fotografia o fondo claro). */
.cabecera {
  position: fixed; z-index: 100;
  top: clamp(.7rem, 1.6vh, 1.15rem);
  left: 0; right: 0;
  background: transparent;
  pointer-events: none;   /* solo la capsula recibe clics */
}
.cabecera-fila {
  pointer-events: auto;
  width: min(var(--ancho), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  min-height: 3.9rem;
  padding-inline: .8rem .7rem;
  border-radius: var(--radio-pastilla);
  border: 1px solid rgba(255, 255, 255, .55);
  /* Cristal, no panel: blanco muy transparente y difuminado fuerte. El
     beige de antes venia codificado de cuando la base era crema. */
  background: rgba(255, 255, 255, .42);
  backdrop-filter: blur(30px) saturate(1.9);
  -webkit-backdrop-filter: blur(30px) saturate(1.9);
  box-shadow: 0 8px 34px rgba(52, 21, 57, .06);
  transition: background-color .3s ease, border-color .3s ease;
}
.marca { flex: none; display: block; padding-left: .45rem; }
.marca img { block-size: 2.15rem; width: auto; }

.nav-principal { display: none; }
@media (min-width: 66em) {
  .nav-principal { display: flex; align-items: center; gap: .1rem; }
}
.nav-grupo { position: relative; }
.nav-padre {
  display: inline-flex; align-items: center; gap: .28rem;
  padding: .5rem .72rem;
  font-size: .89rem; font-weight: 500;
  color: var(--morado-80);
  border-radius: var(--radio-pastilla);
  transition: color .16s ease, background-color .16s ease;
}
.nav-padre:hover { color: var(--morado); background: rgba(52, 21, 57, .06); }
.nav-grupo[data-activo="si"] > .nav-padre,
.nav-padre[aria-current="page"] {
  color: var(--morado); font-weight: 600; background: var(--verde-brote);
}
.nav-chevron {
  inline-size: .78rem; block-size: .78rem; opacity: .6;
  transition: transform .2s ease;
}
.nav-grupo:hover .nav-chevron,
.nav-grupo:focus-within .nav-chevron { transform: rotate(180deg); }

/* El panel no se oculta con display:none: se apaga con opacidad y se le
   quitan los eventos de raton. Asi las hijas siguen siendo enfocables y
   :focus-within abre el panel al tabular, sin una linea de JavaScript. */
.nav-panel {
  position: absolute; top: 100%; left: -.4rem;
  padding-top: .6rem;
  opacity: 0; pointer-events: none;
  transform: translateY(-.35rem);
  transition: opacity .18s ease, transform .18s ease;
}
.nav-grupo:hover > .nav-panel,
.nav-grupo:focus-within > .nav-panel {
  opacity: 1; pointer-events: auto; transform: none;
}
.nav-panel-caja {
  width: 24rem; max-width: calc(100vw - 2 * var(--gutter));
  display: grid; gap: .2rem;
  /* El aire de la caja es mayor que el de las filas: si ambos fueran
     iguales, el texto quedaria pegado al borde de cristal y el panel se
     leeria como una lista apretada en vez de una pieza compuesta. */
  padding: .75rem;
  border-radius: var(--radio-bloque);
  border: 1px solid rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(30px) saturate(1.9);
  -webkit-backdrop-filter: blur(30px) saturate(1.9);
  box-shadow: 0 20px 52px rgba(52, 21, 57, .15);
}
.nav-panel-caja a {
  display: grid; gap: .3rem;
  padding: .85rem 1rem .9rem;
  border-radius: calc(var(--radio-bloque) - .6rem);
  transition: background-color .16s ease;
}
.nav-panel-caja a:hover { background: var(--verde-velo); }
/* La pagina en curso se marca con una barra verde, no con un relleno
   brillante: el brote a todo el ancho de la fila gritaba mas que el propio
   menu y desequilibraba el panel. */
.nav-panel-caja a[aria-current="page"] {
  background: var(--verde-suave);
  box-shadow: inset 3px 0 0 var(--verde-monte);
}
.nav-hijo-titulo {
  font-size: .95rem; font-weight: 600; line-height: 1.25; color: var(--morado);
}
.nav-hijo-nota {
  font-size: .8rem; line-height: 1.5; color: var(--morado-62);
  /* Deja respirar el margen derecho: la nota no llega nunca al borde. */
  max-width: 30ch; text-wrap: pretty;
}
@media (prefers-reduced-motion: reduce) {
  .nav-panel, .nav-chevron { transition: none; }
}

.cabecera-acciones { display: flex; align-items: center; gap: .5rem; flex: none; }

.selector-idioma {
  display: flex; align-items: center; gap: 1px;
  background: rgba(52, 21, 57, .06);
  border-radius: var(--radio-pastilla);
  padding: 3px;
}
.selector-idioma a {
  padding: .3rem .54rem;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--morado-62);
  border-radius: var(--radio-pastilla);
}
.selector-idioma a:hover { color: var(--morado); }
.selector-idioma a[aria-current="true"] { color: var(--morado); background: var(--crema); }

.cabecera .btn { padding: .6rem .7rem .6rem 1.1rem; font-size: .875rem; }
.oculto-movil { display: none; }
@media (min-width: 48em) { .oculto-movil { display: inline-flex; } }

.alternar-menu {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 2.6rem; block-size: 2.6rem;
  background: transparent; border: 1px solid rgba(52, 21, 57, .12);
  border-radius: 50%; cursor: pointer; color: var(--morado);
  transition: border-color .16s ease, background-color .16s ease;
}
.alternar-menu:hover { border-color: var(--morado); background: var(--verde-brote); }
@media (min-width: 66em) { .alternar-menu { display: none; } }
.alternar-menu svg { inline-size: 1.05rem; block-size: 1.05rem; }
.alternar-menu .icono-cerrar { display: none; }
.alternar-menu[aria-expanded="true"] .icono-abrir { display: none; }
.alternar-menu[aria-expanded="true"] .icono-cerrar { display: block; }

/* El menu movil cuelga de la capsula, tambien en cristal */
.menu-movil {
  pointer-events: auto;
  display: none;
  width: min(var(--ancho), calc(100% - 2 * var(--gutter)));
  margin: .5rem auto 0;
  padding: .75rem 1.1rem 1.1rem;
  border-radius: var(--radio-bloque);
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(30px) saturate(1.9);
  -webkit-backdrop-filter: blur(30px) saturate(1.9);
  box-shadow: 0 18px 48px rgba(52, 21, 57, .12);
}
.menu-movil[data-abierto="si"] { display: block; }
@media (min-width: 66em) { .menu-movil { display: none !important; } }
.menu-grupo {
  padding-block: .55rem;
  border-bottom: 1px solid rgba(52, 21, 57, .08);
}
.menu-grupo:last-of-type { border-bottom: none; }
.menu-movil .menu-padre {
  display: block; padding: .5rem .2rem; margin: 0;
  font-size: 1.02rem; font-weight: 600; color: var(--morado);
}
.menu-padre--rotulo {
  font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--morado-62);
}
/* Las hijas se listan siempre: en pantalla tactil no hay raton que pasar
   por encima, y un desplegable que exige dos toques solo estorba. */
.menu-movil .menu-hijo {
  display: block; padding: .42rem .2rem .42rem 1rem;
  font-size: .93rem; font-weight: 500; color: var(--morado-80);
  border-left: 2px solid var(--verde-suave); margin-left: .25rem;
}
.menu-movil a[aria-current="page"] { color: var(--terracota); font-weight: 600; }
.menu-movil .btn { margin-top: 1rem; width: 100%; justify-content: center; }

/* ---------- Portada ---------- */
.portada { position: relative; overflow: hidden; }
.portada-rejilla {
  display: grid; gap: clamp(2.75rem, 5vw, 4rem);
  padding-block: clamp(3.25rem, 2.5rem + 5vw, 6.5rem) clamp(3.5rem, 3rem + 5vw, 7rem);
  align-items: center;
  position: relative; z-index: 1;
}
@media (min-width: 64em) {
  .portada-rejilla { grid-template-columns: 1.1fr .9fr; gap: 4.5rem; }
}

/* Recurso circular verde: acento de fondo, nunca sustituto del simbolo */
.circulo-apoyo { position: absolute; z-index: 0; pointer-events: none; opacity: .4; }
.portada .circulo-apoyo {
  inline-size: clamp(24rem, 40vw, 36rem);
  right: -9%; top: -26%;
  animation: flotar 17s ease-in-out infinite;
}
@media (max-width: 64em) { .portada .circulo-apoyo { opacity: .26; right: -36%; top: -14%; } }

@keyframes flotar {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(-1.6%, 2.6%, 0) rotate(7deg); }
}
@media (prefers-reduced-motion: reduce) {
  .circulo-apoyo { animation: none !important; }
}

/* Semilla terracota suelta como motivo de acento */
.semilla {
  position: absolute; z-index: 0; pointer-events: none;
  inline-size: .8rem; block-size: 1rem;
  background: var(--terracota);
  border-radius: 50% 50% 48% 52% / 46% 46% 54% 54%;
  opacity: .5;
}

.portada-ruta { display: grid; gap: .7rem; margin-top: 2.5rem; }
.ruta {
  display: flex; align-items: flex-start; gap: 1.1rem;
  padding: 1.45rem 1.4rem;
  /* Opaca a proposito: monta sobre el recurso circular y el texto
     secundario perderia contraste sobre el verde. */
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1.5px solid var(--crema-borde);
  border-radius: var(--radio-tarjeta);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ruta:hover {
  border-color: var(--morado);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(52, 21, 57, .07);
}
.ruta-icono {
  flex: none; inline-size: 2.5rem; block-size: 2.5rem;
  display: grid; place-items: center;
  background: var(--verde-monte); color: var(--morado);
  font-weight: 600; font-size: .82rem;
  border-radius: 50%;
}
.ruta:nth-child(2) .ruta-icono { background: var(--verde-hoja); }
.ruta:nth-child(3) .ruta-icono { background: var(--verde-brote); }
.ruta-cuerpo { min-width: 0; }
.ruta-titulo { font-weight: 600; font-size: 1.02rem; display: block; margin-bottom: .2rem; }
.ruta-desc { font-size: var(--t-small); color: var(--texto-suave); line-height: 1.55; }

/* ---------- Fotografia ----------
   Sustituye a los marcos vacios de la v1. Tratamiento sobrio: recorte
   generoso, esquinas amplias y una sombra minima. La imagen manda; no se
   le añaden filtros de color que la alejen de lo real.               */
.foto {
  position: relative;
  margin: 0;
  border-radius: var(--radio-bloque);
  overflow: hidden;
  background: var(--verde-velo);
  box-shadow: 0 18px 46px rgba(52, 21, 57, .13);
}
.foto img {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
.foto-ancha img { aspect-ratio: 16 / 10; }
.foto-alta img  { aspect-ratio: 3 / 4; }
.foto-panoramica img { aspect-ratio: 21 / 9; }
@media (prefers-reduced-motion: no-preference) {
  .foto:hover img { transform: scale(1.03); }
}

/* Pie sobre la imagen, para las piezas de la serie de testimonios */
.foto-pie {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.6rem 1.35rem 1.2rem;
  font-size: var(--t-small); font-weight: 500;
  line-height: 1.4;
  color: var(--crema);
  background: linear-gradient(180deg,
    rgba(34, 14, 37, 0) 0%, rgba(34, 14, 37, .8) 100%);
}

/* ---------- Rejillas ---------- */
.rejilla { display: grid; gap: 1.5rem; }
/* Los hijos de una rejilla traen min-width:auto, asi que una palabra larga
   ensancha la columna y desborda la pagina. Con titulares grandes esto se
   nota enseguida: se anula aqui, de una vez para todas las rejillas. */
.rejilla > *, .rejilla-texto > *, .categorias > *, .portada-ruta > * { min-width: 0; }
.rejilla-2, .rejilla-3, .rejilla-4 { grid-template-columns: 1fr; }
@media (min-width: 34em) {
  .rejilla-4 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 48em) {
  .rejilla-2 { grid-template-columns: 1fr 1fr; }
  .rejilla-3 { grid-template-columns: repeat(3, 1fr); }
  .rejilla-4 { grid-template-columns: repeat(4, 1fr); }
}
.rejilla-texto { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 60em) {
  .rejilla-texto { grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); gap: 4.25rem; }
}
/* Rejilla desfasada: rompe la lectura plana en columnas iguales */
@media (min-width: 60em) {
  .desfase > *:nth-child(even) { transform: translateY(2.6rem); }
}

/* ---------- Tarjetas ---------- */
.tarjeta {
  padding: 1.95rem 1.7rem;
  background: var(--crema);
  border: 1.5px solid var(--crema-borde);
  border-radius: var(--radio-tarjeta);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tarjeta:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(52, 21, 57, .07);
  border-color: var(--morado-16);
}
.seccion-oscura .tarjeta {
  background: var(--crema-16); border-color: var(--crema-16);
}
.seccion-oscura .tarjeta:hover {
  border-color: var(--verde-brote); box-shadow: none;
}
.tarjeta-num {
  display: inline-grid; place-items: center;
  inline-size: 2.5rem; block-size: 2.5rem;
  font-family: var(--display);
  font-size: 1.02rem; font-weight: 700;
  color: var(--morado);
  background: var(--verde-brote);
  border-radius: 50%;
  line-height: 1; margin-bottom: 1.15rem;
}
.seccion-oscura .tarjeta-num { background: var(--verde-brote); color: var(--morado); }
.tarjeta h3 { margin-bottom: .62rem; }
.tarjeta p { font-size: var(--t-small); color: var(--texto-suave); line-height: 1.62; }
.seccion-oscura .tarjeta p { color: var(--crema-72); }
a.tarjeta:hover h3 { color: var(--terracota); }

/* Tarjeta con relleno verde: texto morado, contraste 8-11:1 */
.tarjeta-verde {
  background: var(--verde-monte); border-color: var(--verde-monte);
  color: var(--morado);
}
.tarjeta-verde p { color: var(--morado-80); }
.tarjeta-verde .tarjeta-num { background: var(--crema); color: var(--morado); }
.tarjeta-verde:hover { border-color: var(--morado); }

/* ---------- Lista de atributos ---------- */
.lista-marcas > li {
  display: flex; gap: .95rem;
  padding-block: 1.08rem;
  border-top: 1px solid var(--crema-borde);
}
.lista-marcas > li:last-child { border-bottom: 1px solid var(--crema-borde); }
.seccion-oscura .lista-marcas > li { border-color: var(--crema-16); }
.lista-marcas .marca-punto {
  flex: none; inline-size: .65rem; block-size: .65rem;
  margin-top: .58rem; border-radius: 50%;
  background: var(--verde-monte);
}
.seccion-oscura .lista-marcas .marca-punto { background: var(--verde-brote); }
.lista-marcas strong { font-weight: 600; display: block; margin-bottom: .18rem; }
.lista-marcas span { font-size: var(--t-small); color: var(--texto-suave); line-height: 1.6; }
.seccion-oscura .lista-marcas span { color: var(--crema-72); }

/* ---------- Cita ---------- */
.cita {
  position: relative;
  padding: 0 0 0 1.75rem;
  margin: 0;
  border-left: 3px solid var(--terracota);
}
.cita p {
  font-family: var(--display);
  font-size: clamp(1.55rem, 1.1rem + 1.8vw, 2.7rem);
  font-weight: 700; line-height: 1.14;
  letter-spacing: -.032em;
}
.cita footer { margin-top: .9rem; font-size: var(--t-small); color: var(--texto-suave); }
.seccion-oscura .cita { border-left-color: var(--verde-brote); }
.seccion-oscura .cita footer { color: var(--crema-72); }

/* ---------- Tabla editorial ---------- */
.tabla-envoltura {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: var(--radio-tarjeta);
}
.tabla {
  width: 100%; min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--t-small);
  text-align: left;
}
.tabla th {
  font-weight: 600; font-size: var(--t-rotulo);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-suave);
  padding: 0 1rem 1rem 0;
  border-bottom: 2px solid var(--morado);
  vertical-align: bottom;
}
.tabla td {
  padding: 1.08rem 1rem 1.08rem 0;
  border-bottom: 1px solid var(--crema-borde);
  vertical-align: top; line-height: 1.58;
}
.tabla tr:hover td { background: rgba(214, 226, 58, .12); }
.tabla td:first-child { font-weight: 600; }
.tabla th:last-child, .tabla td:last-child { padding-right: 0; }

.pendiente {
  display: inline-block;
  padding: .2rem .62rem;
  background: var(--crema);
  border: 1.5px solid var(--terracota);
  border-radius: var(--radio-pastilla);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .03em;
  color: var(--terracota);
  white-space: nowrap;
}

/* ---------- Acordeon ---------- */
.acordeon { border-top: 1px solid var(--crema-borde); }
.acordeon-item { border-bottom: 1px solid var(--crema-borde); }
.acordeon-item summary {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 0;
  font-weight: 500; font-size: 1.06rem;
  line-height: 1.4;
  cursor: pointer; list-style: none;
  transition: color .16s ease;
}
.acordeon-item summary::-webkit-details-marker { display: none; }
.acordeon-item summary::after {
  content: "+"; flex: none;
  display: grid; place-items: center;
  inline-size: 1.85rem; block-size: 1.85rem;
  font-size: 1.15rem; font-weight: 400; line-height: 1;
  color: var(--morado);
  background: var(--verde-brote);
  border-radius: 50%;
  transition: background-color .18s ease;
}
.acordeon-item[open] summary::after { content: "\2212"; background: var(--verde-monte); }
.acordeon-item summary:hover { color: var(--terracota); }
.acordeon-cuerpo {
  padding-bottom: 1.55rem;
  max-width: 62ch;
  font-size: var(--t-small); line-height: 1.68;
  color: var(--morado-80);
}
.acordeon-cuerpo > * + * { margin-top: .8rem; }

/* ---------- Formularios ---------- */
.formulario {
  padding: clamp(1.7rem, 3vw, 2.75rem);
  background: var(--crema);
  border: 1.5px solid var(--crema-borde);
  border-radius: var(--radio-bloque);
}
.seccion-oscura .formulario { color: var(--morado); border-color: transparent; }
.campos { display: grid; gap: 1.15rem; }
@media (min-width: 40em) {
  .campos-2 { grid-template-columns: 1fr 1fr; }
  .campo-ancho { grid-column: 1 / -1; }
}
.campo { display: grid; gap: .42rem; }
.campo label {
  font-size: var(--t-rotulo); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-suave);
}
.campo .req { color: var(--terracota); }
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: .85rem .95rem;
  font-family: var(--fuente); font-size: .975rem;
  color: var(--morado);
  background: var(--crema-hueco);
  border: 1.5px solid var(--crema-borde);
  border-radius: var(--radio-campo);
  transition: border-color .16s ease, background-color .16s ease;
}
.campo textarea { min-height: 7.5rem; resize: vertical; line-height: 1.6; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--morado-16); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  background: #FFF; border-color: var(--morado); outline: none;
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--morado-62); }
.campo-nota { font-size: .8rem; color: var(--texto-suave); line-height: 1.5; }

.consentimiento {
  display: flex; gap: .78rem; align-items: flex-start;
  padding: 1.08rem;
  background: var(--crema-hueco);
  border: 1.5px solid var(--crema-borde);
  border-radius: var(--radio-campo);
  font-size: .85rem; line-height: 1.58;
  color: var(--morado-80);
}
.consentimiento input {
  flex: none; margin-top: .22rem; accent-color: var(--morado);
  inline-size: 1.05rem; block-size: 1.05rem;
}
.consentimiento a { font-weight: 600; border-bottom: 2px solid var(--verde-monte); }

.aviso {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: 1.05rem 1.2rem;
  background: var(--brote-velo);
  border-left: 3px solid var(--terracota);
  border-radius: var(--radio-campo);
  font-size: .85rem; line-height: 1.58;
  color: var(--morado-80);
}
.aviso strong { color: var(--morado); }
.aviso-punto { flex: none; color: var(--terracota); font-weight: 600; }

/* ---------- Contacto ---------- */
.dato-contacto { display: block; padding-block: 1.18rem; border-top: 1px solid var(--crema-borde); }
.seccion-oscura .dato-contacto { border-color: var(--crema-16); }
.dato-contacto:last-child { border-bottom: 1px solid var(--crema-borde); }
.seccion-oscura .dato-contacto:last-child { border-bottom-color: var(--crema-16); }
.dato-etiqueta {
  display: block;
  font-size: var(--t-rotulo); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto-suave); margin-bottom: .32rem;
}
.seccion-oscura .dato-etiqueta { color: var(--crema-72); }
.dato-valor { font-size: 1.08rem; font-weight: 500; }
a.dato-valor:hover { color: var(--terracota); }
.seccion-oscura a.dato-valor:hover { color: var(--verde-brote); }

/* ---------- Cierre ---------- */
.cierre { position: relative; overflow: hidden; }
.cierre .circulo-apoyo {
  inline-size: clamp(19rem, 34vw, 31rem);
  right: -7%; bottom: -46%; opacity: .2;
  animation: flotar 21s ease-in-out infinite reverse;
}
.cierre .contenedor { position: relative; z-index: 1; }

/* ---------- Pie: panel de cristal sobre fotografia ----------
   La fotografia va al fondo, un panel translucido sostiene el contenido y
   el rotulo de marca sangra por el borde inferior. */
.pie-sitio {
  position: relative;
  overflow: hidden;
  color: var(--crema);
  background: var(--morado-profundo);
  padding-block: clamp(3rem, 5vw, 4.5rem) 0;
  isolation: isolate;
}
.pie-foto { position: absolute; inset: 0; z-index: -2; }
.pie-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pie-sitio::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(34, 14, 37, .74) 0%, rgba(34, 14, 37, .58) 46%, rgba(34, 14, 37, .9) 100%);
}

.pie-panel {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--radio-bloque);
  border: 1px solid rgba(247, 243, 234, .16);
  background: rgba(247, 243, 234, .09);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
}

.pie-rejilla { display: grid; gap: 2.5rem; }
@media (min-width: 56em) {
  .pie-rejilla { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2.5rem; }
}
.pie-rejilla > * { min-width: 0; }
.pie-sitio .marca { padding-left: 0; }
.pie-sitio .marca img { block-size: 2.3rem; }
.pie-titulo {
  font-size: .78rem; font-weight: 600;
  letter-spacing: .02em;
  color: var(--verde-brote);
  margin-bottom: 1.05rem;
}
.pie-lista > li + li { margin-top: .55rem; }
.pie-lista a { font-size: .91rem; color: rgba(247, 243, 234, .74); }
.pie-lista a:hover { color: var(--verde-brote); }
.pie-sitio .lead { margin-top: 1.15rem; font-size: .93rem; max-width: 28ch; color: rgba(247,243,234,.74); }

.pie-legal {
  display: flex; flex-wrap: wrap; gap: .8rem 1.75rem;
  align-items: center; justify-content: space-between;
  margin-top: 1.9rem; padding-top: 1.6rem;
  border-top: 1px solid rgba(247, 243, 234, .14);
  font-size: .8rem; color: rgba(247, 243, 234, .62);
}
.pie-legal nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.pie-legal a:hover { color: var(--verde-brote); }
.pie-nombres { max-width: 46ch; line-height: 1.6; }

/* Rotulo de marca sangrando por el borde inferior */
.pie-rotulo {
  display: block;
  margin-top: clamp(1.5rem, 4vw, 3rem);
  font-family: var(--display);
  font-size: clamp(4rem, 16.5vw, 17rem);
  font-weight: 800; line-height: .78;
  letter-spacing: -.055em;
  text-align: center;
  color: rgba(247, 243, 234, .92);
  white-space: nowrap;
  user-select: none;
  /* Sangra: la mitad inferior del trazo queda fuera del encuadre */
  margin-bottom: clamp(-3.4rem, -4vw, -1rem);
}

/* ---------- WhatsApp flotante ---------- */
.wa-flotante {
  position: fixed; z-index: 90;
  right: 1rem; bottom: 1rem;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .88rem 1.2rem;
  background: var(--morado); color: var(--crema);
  border: none;
  border-radius: var(--radio-pastilla);
  font-size: .9rem; font-weight: 600;
  box-shadow: 0 8px 28px rgba(52, 21, 57, .22);
  transition: background-color .22s ease, color .22s ease;
}
.wa-flotante:hover { background: var(--verde-brote); color: var(--morado); }
.wa-flotante svg { inline-size: 1.15rem; block-size: 1.15rem; flex: none; }
.wa-flotante span { display: none; }
@media (min-width: 48em) { .wa-flotante span { display: inline; } }

/* ---------- Encabezado de pagina interna ---------- */
.encabezado-pagina {
  position: relative; overflow: hidden;
  /* El relleno superior incluye el alto de la capsula flotante: sin eso la
     miga de pan queda debajo de la barra. */
  padding-block:
    calc(var(--alto-cabecera) + clamp(1.75rem, 1.5rem + 3vw, 3.5rem))
    clamp(2.75rem, 2rem + 3.5vw, 4.5rem);
}
.encabezado-pagina .circulo-apoyo {
  inline-size: clamp(17rem, 30vw, 27rem);
  right: -6%; top: -56%; opacity: .34;
  animation: flotar 19s ease-in-out infinite;
}
.encabezado-pagina .contenedor { position: relative; z-index: 1; }
.encabezado-pagina .lead { margin-top: 1.6rem; max-width: 46ch; }

.miga {
  display: flex; flex-wrap: wrap; gap: .5rem;
  font-size: var(--t-small); color: var(--texto-suave);
  margin-bottom: 1.6rem;
}
.miga a:hover { color: var(--morado); }
.miga li { display: flex; }
.miga li + li::before { content: "/"; margin-right: .5rem; color: var(--morado-16); }

[id] { scroll-margin-top: 6.5rem; }

/* ---------- Impresion ---------- */
@media print {
  .cabecera, .wa-flotante, .menu-movil, .circulo-apoyo, .semilla { display: none !important; }
  body { background: #FFF; }
  .revelar { opacity: 1 !important; transform: none !important; }
  .seccion-oscura {
    background: #FFF !important; color: #000 !important;
    border-radius: 0; margin-top: 0;
  }
}

/* ---------- Producto en primer plano ----------
   Presentacion tipo producto: fondo oscuro, fruta aislada y centrada,
   tipografia minima. Todo el peso visual va sobre el Hass.          */
.producto-foco { text-align: center; }
.producto-foco .rotulo { justify-content: center; }
.producto-pieza {
  margin: clamp(1.5rem, 4vw, 3rem) auto clamp(2rem, 4vw, 3.25rem);
  max-width: min(46rem, 92%);
}
.producto-pieza img {
  width: 100%; height: auto; display: block;
  /* Mascara radial: funde el recorte con el fondo de la seccion, para que
     no se lea el rectangulo de la fotografia, y apaga el reflejo que
     quedaba del fondo original. */
  -webkit-mask-image: radial-gradient(72% 66% at 50% 44%,
    #000 52%, rgba(0,0,0,.6) 74%, transparent 100%);
  mask-image: radial-gradient(72% 66% at 50% 44%,
    #000 52%, rgba(0,0,0,.6) 74%, transparent 100%);
}
.producto-titulo {
  max-width: 18ch;
  margin-inline: auto;
}
.producto-datos {
  display: grid; gap: 2rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--crema-16);
}
@media (min-width: 40em) {
  .producto-datos { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}
.producto-datos > div { display: grid; gap: .5rem; }
.dato-cifra {
  font-family: var(--display);
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3.2rem);
  font-weight: 800; line-height: 1;
  letter-spacing: -.04em;
  color: var(--verde-brote);
}
.dato-pie {
  font-size: var(--t-small);
  color: var(--crema-72);
  line-height: 1.5;
}

/* =========================================================================
   Recursos de composicion tomados de la referencia
   Tarjetas flotando sobre fotografia, insignias circulares, etiquetas en
   pastilla, bandas a sangre y rotulo gigante en marca de agua.
   ========================================================================= */

/* ---------- Insignia circular de accion ---------- */
.insignia {
  display: inline-grid; place-items: center;
  inline-size: 2.4rem; block-size: 2.4rem;
  flex: none;
  border-radius: 50%;
  background: var(--verde-brote);
  color: var(--morado);
  font-size: 1rem; line-height: 1;
  transition: background-color .22s ease, transform .22s ease;
}
.insignia::after { content: "\2197"; }
a:hover > .insignia, a:hover .insignia { background: var(--morado); color: var(--crema); }

/* ---------- Etiquetas en pastilla ---------- */
.etiquetas { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.6rem; }
.etiqueta {
  padding: .42rem 1rem;
  border: 1px solid var(--morado-16);
  border-radius: var(--radio-pastilla);
  font-size: var(--t-small); font-weight: 500;
  color: var(--morado-80);
}
.seccion-oscura .etiqueta { border-color: var(--crema-16); color: var(--crema-72); }

/* ---------- Tarjeta de categoria con fotografia ---------- */
.categorias { display: grid; gap: 1.1rem; }
@media (min-width: 34em) { .categorias { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .categorias { grid-template-columns: repeat(4, 1fr); } }

.categoria {
  display: flex; flex-direction: column;
  background: var(--crema);
  border: 1px solid var(--crema-borde);
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.categoria:hover {
  border-color: var(--morado-16);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(52, 21, 57, .07);
}
.categoria-foto { aspect-ratio: 4 / 3; overflow: hidden; background: var(--verde-velo); }
.categoria-foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.categoria:hover .categoria-foto img { transform: scale(1.04); }
.categoria-cuerpo {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; padding: 1.25rem 1.3rem 1.4rem;
  flex: 1;
}
.categoria-nombre { font-weight: 600; font-size: 1.04rem; display: block; margin-bottom: .2rem; }
.categoria-nota { font-size: var(--t-small); color: var(--texto-suave); line-height: 1.45; }
/* Lineas que todavia no estan en oferta: el sitio no debe insinuar que si */
.categoria-futura { background: var(--verde-velo); }
.categoria-futura .categoria-foto { opacity: .55; }
.categoria-futura .insignia { background: transparent; border: 1px solid var(--morado-16); }
.categoria-futura .insignia::after { content: "\00B7\00B7\00B7"; letter-spacing: .05em; }

/* ---------- Banda a sangre con fotografia ---------- */
.banda {
  position: relative;
  min-height: min(78vh, 42rem);
  display: flex; align-items: flex-end;
  overflow: hidden;
  border-radius: var(--radio-bloque);
  isolation: isolate;
}
.banda-foto { position: absolute; inset: 0; z-index: -2; }
.banda-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.banda::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(34, 14, 37, .52) 0%, rgba(34, 14, 37, .14) 42%, rgba(34, 14, 37, .86) 100%);
}
.banda-contenido { width: 100%; padding: clamp(1.75rem, 4vw, 3.25rem); color: var(--crema); }
.banda-titulo { color: var(--crema); max-width: 16ch; }

/* Rotulo gigante en marca de agua sobre la fotografia */
.banda-rotulo {
  position: absolute; z-index: -1;
  left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  font-family: var(--display);
  font-size: clamp(3.5rem, 13vw, 13rem);
  font-weight: 800; line-height: 1;
  letter-spacing: -.055em;
  color: rgba(247, 243, 234, .17);
  white-space: nowrap;
  pointer-events: none;
}

/* Insignias flotantes sobre la banda */
.banda-fichas {
  position: absolute; z-index: 1;
  right: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(1rem, 3vw, 2.5rem);
  display: flex; flex-wrap: wrap; gap: .7rem;
  max-width: 70%;
  justify-content: flex-end;
}
.ficha {
  padding: .85rem 1.1rem;
  background: rgba(247, 243, 234, .94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radio-tarjeta);
  max-width: 13rem;
}
.ficha-clave {
  display: block;
  font-family: var(--display);
  font-size: 1.42rem; font-weight: 760; line-height: 1;
  letter-spacing: -.032em;
  color: var(--morado);
  margin-bottom: .3rem;
}
.ficha-nota { font-size: .8rem; line-height: 1.4; color: var(--morado-62); }

/* ---------- Tarjeta flotante sobre la portada ---------- */
.tarjeta-flotante {
  position: absolute; z-index: 3;
  right: clamp(1rem, 3vw, 2.75rem);
  bottom: clamp(4.5rem, 9vh, 6.5rem);
  width: min(21rem, 78vw);
  display: flex; gap: .95rem;
  padding: .85rem;
  background: rgba(34, 14, 37, .62);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(247, 243, 234, .16);
  border-radius: var(--radio-tarjeta);
  color: var(--crema);
  transition: background-color .22s ease;
}
.tarjeta-flotante:hover { background: rgba(34, 14, 37, .78); }
.tarjeta-flotante img {
  inline-size: 4.4rem; block-size: 4.4rem;
  flex: none; object-fit: cover;
  border-radius: calc(var(--radio-tarjeta) - 6px);
}
.tarjeta-flotante-cuerpo { flex: 1; min-width: 0; align-self: center; }
.tarjeta-flotante-texto {
  font-size: .855rem; line-height: 1.42;
  color: rgba(247, 243, 234, .88);
}
@media (max-width: 48em) { .tarjeta-flotante { display: none; } }

/* ---------- Franja de presentacion ---------- */
.franja {
  display: grid; gap: 2rem;
  align-items: center;
}
@media (min-width: 62em) {
  .franja { grid-template-columns: auto minmax(0, 1fr) auto; gap: 3rem; }
}
.franja-marca { inline-size: 3.4rem; flex: none; }
.franja-marca img { width: 100%; height: auto; }
.franja-texto { font-size: var(--t-lead); line-height: 1.5; color: var(--morado-80); }
.franja-fotos { display: flex; gap: .85rem; }
.franja-fotos img {
  inline-size: 6.5rem; block-size: 5rem;
  object-fit: cover; border-radius: var(--radio-tarjeta);
}
@media (max-width: 62em) { .franja-fotos img { inline-size: 5rem; block-size: 4rem; } }

/* =========================================================================
   Filas de caracteristica
   Patron de la referencia: titulo y descripcion a la izquierda, boton
   pequeno, miniatura a la derecha. Una de las filas va destacada en oscuro.
   Sustituye a la rejilla de tarjetas cuando el contenido es una secuencia
   de argumentos en vez de categorias paralelas.
   ========================================================================= */
.filas { display: grid; gap: .8rem; }

.fila {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  align-items: center;
  padding: 1.3rem;
  background: var(--crema);
  border: 1px solid var(--crema-borde);
  border-radius: var(--radio-tarjeta);
  transition: border-color .22s ease, background-color .22s ease;
}
@media (min-width: 46em) {
  .fila { grid-template-columns: minmax(0, 1fr) 8.5rem; gap: 1.75rem; }
}
.fila:hover { border-color: var(--morado-16); }

.fila-cuerpo > * + * { margin-top: .5rem; }
.fila-titulo { font-size: var(--t-h3); }
.fila-nota {
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--texto-suave);
  max-width: 52ch;
}
.fila-accion { margin-top: 1rem; }

.fila-foto {
  order: -1;
  aspect-ratio: 16 / 10;
  border-radius: calc(var(--radio-tarjeta) - 4px);
  overflow: hidden;
  background: var(--verde-velo);
}
@media (min-width: 46em) {
  .fila-foto { order: 0; aspect-ratio: 4 / 3; }
}
.fila-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* La fila destacada: fondo oscuro, como en la referencia */
.fila-destacada {
  background: var(--morado);
  border-color: var(--morado);
  color: var(--crema);
}
.fila-destacada .fila-nota { color: rgba(247, 243, 234, .76); }
.fila-destacada .fila-titulo { color: var(--crema); }
.fila-destacada:hover { background: var(--morado-profundo); border-color: var(--morado-profundo); }

/* ---------- Boton pequeno con insignia cuadrada ----------
   El remate de la referencia: etiqueta discreta y un cuadrado redondeado
   con la flecha. Se usa dentro de filas y tarjetas, no como CTA principal. */
.btn-menudo {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .42rem .42rem .42rem 1rem;
  background: var(--crema);
  border: 1px solid var(--morado-16);
  border-radius: var(--radio-pastilla);
  font-family: var(--fuente);
  font-size: .845rem; font-weight: 600;
  color: var(--morado);
  transition: border-color .2s ease, background-color .2s ease;
}
.btn-menudo:hover { border-color: var(--morado); }
.btn-menudo-cuadro {
  display: grid; place-items: center;
  inline-size: 1.75rem; block-size: 1.75rem;
  flex: none;
  border-radius: 8px;
  background: var(--morado);
  color: var(--crema);
  font-size: .78rem; line-height: 1;
  transition: background-color .2s ease, color .2s ease;
}
.btn-menudo-cuadro::after { content: "\2197"; }
.btn-menudo:hover .btn-menudo-cuadro { background: var(--verde-brote); color: var(--morado); }

.fila-destacada .btn-menudo {
  background: transparent;
  border-color: rgba(247, 243, 234, .28);
  color: var(--crema);
}
.fila-destacada .btn-menudo:hover { border-color: var(--crema); }
.fila-destacada .btn-menudo-cuadro { background: var(--verde-brote); color: var(--morado); }

/* =========================================================================
   Pasos numerados
   La cuarta pieza de la referencia: numero grande con fraccion, controles
   circulares y una tira de tarjetas con rotulo sobre la fotografia.
   Se usa para secuencias: como avanza una operacion, como se evalua un
   predio. La tira se desplaza en horizontal, tambien con teclado.
   ========================================================================= */
.pasos { display: grid; gap: clamp(2rem, 4vw, 3.25rem); }
@media (min-width: 62em) {
  .pasos { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: start; }
}
.pasos > * { min-width: 0; }

.pasos-cifra {
  display: flex; align-items: baseline; gap: .1rem;
  font-family: var(--display);
  font-weight: 800; line-height: .9;
  letter-spacing: -.045em;
  color: var(--morado);
  margin-bottom: .75rem;
}
.pasos-cifra b { font-size: clamp(3rem, 2rem + 3.4vw, 4.6rem); font-weight: 800; }
.pasos-cifra span {
  font-size: clamp(1.1rem, .9rem + .9vw, 1.6rem);
  color: var(--morado-62);
  font-weight: 700;
}
.pasos-nota { font-size: var(--t-small); color: var(--morado-62); max-width: 30ch; line-height: 1.6; }

.pasos-mandos { display: flex; gap: .55rem; margin-top: 1.6rem; }
.pasos-mando {
  display: grid; place-items: center;
  inline-size: 2.9rem; block-size: 2.9rem;
  border-radius: 50%;
  border: 1px solid var(--morado-16);
  background: var(--crema);
  color: var(--morado);
  cursor: pointer;
  font-size: 1rem; line-height: 1;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.pasos-mando:hover { border-color: var(--morado); }
.pasos-mando[data-paso="siguiente"] {
  background: var(--morado); color: var(--crema); border-color: var(--morado);
}
.pasos-mando[data-paso="siguiente"]:hover { background: var(--verde-brote); color: var(--morado); border-color: var(--verde-brote); }
.pasos-mando:disabled { opacity: .35; cursor: default; }

/* Tira desplazable */
.pasos-tira {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(21rem, 78vw);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Sin scroll-behavior aqui: con scroll-snap activo, el suavizado por CSS
     cancela el desplazamiento programatico y la tira vuelve al inicio. El
     suavizado lo pide el JS en cada scrollBy, respetando la preferencia de
     movimiento reducido. */
  padding-bottom: .5rem;
  scrollbar-width: none;
}
.pasos-tira::-webkit-scrollbar { display: none; }

.paso {
  position: relative;
  scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 21rem;
  padding: 1.35rem;
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  isolation: isolate;
  color: var(--crema);
}
.paso-foto { position: absolute; inset: 0; z-index: -2; }
.paso-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.paso::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(34, 14, 37, .22) 0%, rgba(34, 14, 37, .5) 52%, rgba(34, 14, 37, .9) 100%);
}
.paso-marca {
  position: absolute; top: 1.1rem; left: 1.1rem;
  padding: .3rem .75rem;
  border-radius: var(--radio-pastilla);
  background: rgba(255, 255, 255, .92);
  color: var(--morado);
  font-size: .72rem; font-weight: 600;
}
.paso-titulo { color: var(--crema); font-size: var(--t-h3); margin-bottom: .45rem; }
.paso-nota { font-size: var(--t-small); line-height: 1.5; color: rgba(255, 255, 255, .8); }

/* =========================================================================
   Tarjeta destacada
   Pieza de mayor jerarquia, para contenido que debe detener la lectura:
   historias, fichas de origen, hitos. Anatomia tomada de la referencia y
   traducida a la marca: pildora morada en vez de negra, chip de fecha en
   dos tonos, foto redondeada con rotulo de lugar encima.

   Sombra muy difusa y poco opaca: es lo que da el aire de pieza cuidada.
   Se usa CONTADA — dos o tres por pantalla como maximo.
   ========================================================================= */
.tarjetas-destacadas { display: grid; gap: 1.5rem; }
@media (min-width: 46em) { .tarjetas-destacadas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68em) { .tarjetas-destacadas--tres { grid-template-columns: repeat(3, 1fr); } }
.tarjetas-destacadas > * { min-width: 0; }

.tp {
  display: flex; flex-direction: column;
  padding: 1.35rem 1.35rem 1.35rem;
  background: #FFFFFF;
  border-radius: 30px;
  box-shadow:
    0 1px 2px rgba(52, 21, 57, .04),
    0 10px 24px rgba(52, 21, 57, .06),
    0 30px 60px rgba(52, 21, 57, .07);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .tp:hover {
    transform: translateY(-4px);
    box-shadow:
      0 1px 2px rgba(52, 21, 57, .04),
      0 14px 30px rgba(52, 21, 57, .08),
      0 40px 80px rgba(52, 21, 57, .10);
  }
}
/* Sobre fondo oscuro la sombra no se ve: se sustituye por un borde tenue */
.seccion-oscura .tp {
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, .1);
}

/* ---------- Fila superior: etiqueta y fecha ---------- */
.tp-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: 1.35rem;
}
.tp-marca {
  padding: .44rem .9rem;
  border-radius: var(--radio-pastilla);
  background: var(--morado);
  color: #FFFFFF;
  font-size: .76rem; font-weight: 500;
  letter-spacing: -.005em;
  white-space: nowrap;
}
/* Chip de fecha en dos tonos, como en la referencia */
.tp-fecha {
  display: inline-flex; align-items: stretch;
  flex: none;
  border-radius: var(--radio-pastilla);
  background: var(--morado);
  padding: 3px;
  font-size: .72rem; font-weight: 600;
}
.tp-fecha b {
  display: grid; place-items: center;
  padding: .2rem .55rem .2rem .62rem;
  color: rgba(255, 255, 255, .88);
  letter-spacing: .08em; text-transform: uppercase;
  font-weight: 600;
}
.tp-fecha i {
  display: grid; place-items: center;
  min-inline-size: 1.85rem;
  padding: .2rem .5rem;
  border-radius: var(--radio-pastilla);
  background: #FFFFFF;
  color: var(--morado);
  font-style: normal; font-weight: 700;
}

/* ---------- Texto ---------- */
.tp-titulo {
  font-size: clamp(1.32rem, 1.1rem + .85vw, 1.78rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-bottom: .7rem;
}
.tp-texto {
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--morado-62);
  margin-bottom: 1.35rem;
}
.seccion-oscura .tp-titulo { color: var(--morado); }
.seccion-oscura .tp-texto { color: var(--morado-62); }

/* ---------- Fotografia con rotulo de lugar ---------- */
.tp-foto {
  position: relative;
  margin: auto 0 0;
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  background: var(--crema-hueco);
}
.tp-foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: no-preference) {
  .tp:hover .tp-foto img { transform: scale(1.04); }
}
/* Velo inferior: garantiza que el rotulo se lea sobre cualquier imagen,
   tambien si la foto definitiva es clara en esa zona. */
.tp-foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(34, 14, 37, 0) 42%, rgba(34, 14, 37, .62) 100%);
  pointer-events: none;
}
.tp-lugar {
  position: absolute; z-index: 1;
  left: 1.1rem; right: 1.1rem; bottom: 1rem;
  color: #FFFFFF;
}
.tp-lugar-nombre {
  display: flex; align-items: center; gap: .4rem;
  font-size: .95rem; font-weight: 600;
  letter-spacing: -.01em;
}
.tp-lugar-nombre svg { inline-size: .95rem; block-size: .95rem; flex: none; opacity: .9; }
.tp-lugar-region {
  display: block;
  margin-top: .1rem; padding-left: 1.35rem;
  font-size: .85rem;
  color: rgba(255, 255, 255, .78);
}

/* ---------- Hueco reservado, sin fotografia todavia ----------
   Define el espacio y su proporcion para que la imagen definitiva entre
   sin recalcular nada. No imita una foto: se lee como hueco a proposito. */
.tp-foto--hueco {
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(135deg,
      var(--crema-hueco) 0 10px, #FFFFFF 10px 20px);
  border: 1px solid var(--crema-borde);
}
.tp-foto--hueco::after { display: none; }
.tp-hueco-nota {
  display: grid; gap: .3rem; justify-items: center;
  padding: 1rem;
  text-align: center;
  font-size: .76rem; line-height: 1.45;
  color: var(--morado-62);
}
.tp-hueco-nota strong {
  font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--morado);
}

/* =========================================================================
   Tarjeta destacada AMPLIA
   Segunda anatomia de la referencia, inversa a la compacta: la fotografia
   entra a sangre por arriba y se funde en el blanco, con pildoras de
   cristal flotando encima; debajo, titular grande, texto y dos acciones.

   Se usa UNA por pantalla, para el mensaje que debe detener la lectura.
   La compacta (.tp) queda para series de dos o tres.
   ========================================================================= */
.tpx {
  position: relative;
  display: flex; flex-direction: column;
  background: #FFFFFF;
  border-radius: 38px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(52, 21, 57, .04),
    0 14px 30px rgba(52, 21, 57, .07),
    0 44px 90px rgba(52, 21, 57, .10);
}
.seccion-oscura .tpx { box-shadow: none; }

/* Fotografia a sangre. El degradado de mascara la funde en el blanco de
   la tarjeta, de modo que no hay borde entre imagen y texto. */
.tpx-foto {
  position: relative;
  aspect-ratio: 16 / 11;
  margin: 0;
  background: var(--crema-hueco);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
}
.tpx-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Pildoras de cristal sobre la fotografia */
.tpx-chips {
  position: absolute; z-index: 2;
  top: 1.15rem; left: 1.15rem; right: 1.15rem;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.tpx-chip {
  display: inline-flex; align-items: center; gap: .42rem;
  padding: .42rem .8rem;
  border-radius: var(--radio-pastilla);
  background: rgba(34, 14, 37, .52);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  color: #FFFFFF;
  font-size: .78rem; font-weight: 500;
  letter-spacing: -.005em;
  white-space: nowrap;
}
.tpx-chip span[aria-hidden] {
  inline-size: .45rem; block-size: .45rem;
  border-radius: 50%;
  background: var(--verde-brote);
  flex: none;
}

/* Cuerpo. El margen negativo lo sube sobre la zona ya desvanecida de la
   imagen, que es lo que da la continuidad de la referencia. */
.tpx-cuerpo {
  position: relative; z-index: 1;
  margin-top: clamp(-5rem, -7vw, -3rem);
  padding: 0 clamp(1.4rem, 3vw, 2.5rem) clamp(1.75rem, 3vw, 2.5rem);
}
.tpx-titulo {
  font-size: clamp(1.7rem, 1.2rem + 2.2vw, 3rem);
  font-weight: 760;
  letter-spacing: -.038em;
  line-height: 1.04;
  margin-bottom: .9rem;
}
.tpx-texto {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--morado-62);
  max-width: 48ch;
  margin-bottom: 1.6rem;
}
/* Enfasis dentro del parrafo, como en la referencia: mismo tamano, mas
   peso y color pleno. No se usa negrita de mas: dos o tres por parrafo. */
.tpx-texto strong { font-weight: 600; color: var(--morado); }
.tpx-acciones { display: flex; flex-wrap: wrap; gap: .7rem; }

/* Hueco reservado cuando la fotografia definitiva aun no existe */
.tpx-foto--hueco {
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(135deg,
      var(--crema-hueco) 0 10px, #FFFFFF 10px 20px);
}
.tpx-foto--hueco .tp-hueco-nota { padding-bottom: 22%; }

/* =========================================================================
   Tarjeta de rejilla con fotografia superior
   Es la anatomia de la tarjeta amplia, reducida para funcionar en rejillas
   de tres o cuatro. La fotografia entra a sangre por arriba y se funde en
   el blanco con una mascara; encima flota una pildora de cristal; debajo,
   titulo y nota sobre blanco.

   Reemplaza el estilo plano que tenian las rutas y las categorias de la
   portada: mismo lenguaje que la pieza grande, sin repetir su escala.
   ========================================================================= */
.tj {
  position: relative;
  display: flex; flex-direction: column;
  background: #FFFFFF;
  border-radius: 28px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(52, 21, 57, .04),
    0 10px 24px rgba(52, 21, 57, .06),
    0 28px 56px rgba(52, 21, 57, .07);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .tj:hover {
    transform: translateY(-4px);
    box-shadow:
      0 1px 2px rgba(52, 21, 57, .04),
      0 14px 30px rgba(52, 21, 57, .08),
      0 38px 76px rgba(52, 21, 57, .10);
  }
}
.seccion-oscura .tj { box-shadow: none; }

.tj-foto {
  position: relative;
  aspect-ratio: 16 / 11;
  margin: 0;
  background: var(--crema-hueco);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
}
.tj-foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: no-preference) {
  .tj:hover .tj-foto img { transform: scale(1.05); }
}

/* Pildora de cristal sobre la fotografia */
.tj-chip {
  position: absolute; z-index: 2;
  top: 1rem; left: 1rem;
  display: inline-flex; align-items: center; gap: .42rem;
  padding: .4rem .8rem;
  border-radius: var(--radio-pastilla);
  background: rgba(34, 14, 37, .52);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  color: #FFFFFF;
  font-size: .76rem; font-weight: 500;
  letter-spacing: -.005em;
}
.tj-chip i {
  inline-size: .45rem; block-size: .45rem;
  border-radius: 50%; background: var(--verde-brote); flex: none;
}
/* Variante para lo que todavia no esta en oferta */
.tj-chip--espera { background: rgba(34, 14, 37, .38); }
.tj-chip--espera i { background: rgba(255, 255, 255, .55); }

/* Cuerpo: sube sobre la zona ya desvanecida, igual que en la pieza grande */
.tj-cuerpo {
  position: relative; z-index: 1;
  margin-top: clamp(-3.5rem, -5vw, -2.25rem);
  padding: 0 1.35rem 1.45rem;
  display: flex; flex-direction: column; gap: .45rem;
  flex: 1;
}
.tj-titulo {
  font-size: clamp(1.18rem, 1rem + .7vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.12;
}
.tj-nota {
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--morado-62);
}
.tj-pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem;
  margin-top: auto; padding-top: 1rem;
}
.tj-pie-texto {
  font-size: .78rem; font-weight: 600;
  letter-spacing: .01em;
  color: var(--morado);
}
.tj--espera .tj-titulo, .tj--espera .tj-pie-texto { color: var(--morado-62); }
.tj--espera .tj-foto { opacity: .62; }

/* Hueco reservado cuando no hay fotografia todavia */
.tj-foto--hueco {
  display: grid; place-items: center;
  background: repeating-linear-gradient(135deg,
    var(--crema-hueco) 0 10px, #FFFFFF 10px 20px);
}

/* =========================================================================
   Encabezado fotografico de pagina
   Cada pagina interior abre con su propia fotografia a sangre bajo la
   capsula de cristal. Misma estructura en todas —miga, etiqueta, titular,
   entradilla— y una imagen distinta por pagina: eso es lo que las
   diferencia sin romper el sistema.
   ========================================================================= */
.encabezado-pagina--foto {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Sube por detras de la capsula, igual que la portada */
  margin-top: calc(-1 * var(--alto-cabecera) - 2px);
  padding-block:
    calc(var(--alto-cabecera) + clamp(3.5rem, 3rem + 5vw, 7rem))
    clamp(3.5rem, 3rem + 5vw, 6.5rem);
  color: var(--crema);
  /* Alto unico para todas las paginas. Antes lo fijaba el relleno, asi que
     cada cabecera media lo que midiera su titular: de 574 px a 839 px en la
     misma pantalla. El minimo queda por encima de la cabecera mas larga
     (Productores, cuatro lineas) para que ningun texto se recorte, y el
     contenido se centra en vez de apoyarse arriba. */
  min-block-size: clamp(44rem, 41rem + 14vw, 54rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.encabezado-foto { position: absolute; inset: 0; z-index: -2; }
.encabezado-foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform-origin: center 60%;
  will-change: transform;
}
/* Entrada: un acercamiento breve, no un movimiento perpetuo. */
@media (prefers-reduced-motion: no-preference) {
  .encabezado-foto img { animation: encabezado-entra 1.4s cubic-bezier(.22,.61,.36,1) both; }
}
@keyframes encabezado-entra {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

/* Velo: morado de marca, con el degradado cargado abajo para que el
   titular se lea sobre cualquier fotografia. */
.encabezado-pagina--foto::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(34, 14, 37, .62) 0%,
      rgba(34, 14, 37, .38) 34%,
      rgba(34, 14, 37, .72) 100%),
    radial-gradient(120% 90% at 22% 60%,
      rgba(34, 14, 37, .5) 0%, rgba(34, 14, 37, 0) 70%);
}

.encabezado-pagina--foto .miga { color: rgba(255, 255, 255, .72); }
.encabezado-pagina--foto .miga a:hover { color: #FFFFFF; }
.encabezado-pagina--foto .miga li + li::before { color: rgba(255, 255, 255, .34); }
.encabezado-pagina--foto .rotulo {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .28);
  color: rgba(255, 255, 255, .9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.encabezado-pagina--foto h1 {
  color: #FFFFFF;
  text-shadow: 0 4px 40px rgba(34, 14, 37, .45);
}
.encabezado-pagina--foto .lead {
  color: rgba(255, 255, 255, .84);
  text-shadow: 0 2px 20px rgba(34, 14, 37, .5);
  max-width: 46ch;
}
/* El circulo decorativo no hace falta cuando hay fotografia */
.encabezado-pagina--foto .circulo-apoyo { display: none; }