/* =========================================================
   IFENZA · ifenzasystems.com
   Hoja de estilos única. Tokens del brandbook v3 (oct 2026).
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* Paleta «Taller de mañana» */
  --lino: #F4EFE6;
  --tinta: #2B2622;
  --terracota: #A94D34;
  --barro: #8F3F2A;
  --oliva: #4F6350;
  --ambar: #E8B64A;
  --arena: #D9CFC0;
  --arena-clara: #EAE3D6;
  --blanco: #FFFFFF;

  /* Tipografía */
  --f-titular: "Fraunces", Georgia, "Times New Roman", serif;
  --f-cuerpo: "Inter", Arial, Helvetica, sans-serif;
  --fs-h1: clamp(44px, 7vw, 120px);
  --fs-h2: clamp(36px, 4.6vw, 72px);
  --fs-h3: clamp(22px, 2vw, 28px);
  --fs-cuerpo: clamp(18px, 1.15vw, 20px);
  --fs-etiqueta: 13px;
  --lh-titular: 1.05;
  --lh-cuerpo: 1.45;

  /* Espaciado y retícula */
  --margen: max(6vw, 24px);
  --ancho-max: 1200px;
  --esp-1: 8px;
  --esp-2: 16px;
  --esp-3: 24px;
  --esp-4: 40px;
  --esp-5: 64px;
  --esp-6: 112px;
  --seccion-y: clamp(96px, 12vw, 176px);

  /* Forma */
  --radio: 16px;
  --sombra: 0 8px 24px rgba(43, 38, 34, .18);
  --borde: 1.5px;

  /* Movimiento */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --t-rapido: 150ms;
  --t-medio: 250ms;
  --t-entrada: 500ms;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--lino);
  color: var(--tinta);
  font-family: var(--f-cuerpo);
  font-size: var(--fs-cuerpo);
  line-height: var(--lh-cuerpo);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--barro); text-decoration: none; }
p { margin: 0 0 var(--esp-2); }
h1, h2, h3 { margin: 0; font-family: var(--f-titular); font-variation-settings: "SOFT" 100; letter-spacing: -0.01em; line-height: var(--lh-titular); }
h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); font-weight: 600; }
h3 { font-size: var(--fs-h3); font-weight: 600; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }

/* Foco visible, siempre */
:focus-visible { outline: 3px solid var(--barro); outline-offset: 3px; border-radius: 4px; }
.bg-terracota :focus-visible, .bg-tinta :focus-visible, .bg-oliva :focus-visible { outline-color: var(--lino); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--margen); top: -60px; z-index: 100; background: var(--tinta); color: var(--lino); padding: 10px 16px; border-radius: 8px; }
.skip:focus { top: 12px; }

/* ---------- 3. Utilidades de texto ---------- */
.contenedor { width: min(100% - 2 * var(--margen), var(--ancho-max)); margin-inline: auto; }

.etiqueta {
  font-family: var(--f-cuerpo);
  font-size: var(--fs-etiqueta);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--barro);
}
.bg-terracota .etiqueta, .bg-tinta .etiqueta, .bg-oliva .etiqueta { color: var(--lino); }

.cifra { font-family: var(--f-titular); font-weight: 700; font-variation-settings: "SOFT" 100; }

/* Enlace con subrayado ámbar que crece desde la izquierda */
.enlace {
  color: var(--barro);
  font-weight: 500;
  background-image: linear-gradient(var(--ambar), var(--ambar));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 100%;
  padding-bottom: 2px;
  transition: background-size var(--t-medio) var(--ease-out);
}
.enlace:hover, .enlace:focus-visible { background-size: 100% 2px; }
/* Nunca ámbar sobre terracota: en fondos de color el subrayado es lino */
.bg-terracota .enlace, .bg-tinta .enlace, .bg-oliva .enlace { color: var(--lino); background-image: linear-gradient(var(--lino), var(--lino)); }

/* Trazo ámbar: subrayado a mano bajo UNA palabra */
.u { position: relative; white-space: nowrap; }
.u-stroke { position: absolute; left: -2%; bottom: -0.12em; width: 104%; height: .28em; overflow: visible; pointer-events: none; }
/* El grosor va en unidades del viewBox (escala con el cuerpo del titular); pathLength=1 permite dibujar el trazo con dashoffset */
.u-stroke path {
  fill: none;
  stroke: var(--ambar);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.is-in .u-stroke path { stroke-dashoffset: 0; transition: stroke-dashoffset 600ms var(--ease-out) 250ms; }

/* ---------- 4. Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 28px;
  border-radius: 999px;
  font-family: var(--f-cuerpo); font-weight: 600; font-size: 17px; line-height: 1;
  border: var(--borde) solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--t-medio) var(--ease-out), color var(--t-medio) var(--ease-out), border-color var(--t-medio) var(--ease-out);
}
.btn-principal { background: var(--terracota); color: var(--lino); border-color: var(--terracota); }
.btn-principal:hover, .btn-principal:focus-visible { background: var(--barro); border-color: var(--barro); }
.btn-secundario { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.btn-secundario:hover, .btn-secundario:focus-visible { background: var(--arena-clara); }
.btn-tinta { background: var(--tinta); color: var(--lino); border-color: var(--tinta); }
.btn-tinta:hover, .btn-tinta:focus-visible { background: var(--lino); color: var(--tinta); border-color: var(--lino); }
.btn-lino { background: transparent; color: var(--lino); border-color: var(--lino); }
.btn-lino:hover, .btn-lino:focus-visible { background: var(--lino); color: var(--terracota); }
.btn svg { width: 20px; height: 20px; flex: none; }

/* ---------- 5. Logotipo ---------- */
.logo { display: inline-flex; align-items: center; gap: .32em; color: var(--tinta); text-decoration: none; line-height: 1; }
.logo-simbolo { height: 1em; width: auto; }
.logo-wordmark { font-family: var(--f-titular); font-weight: 700; font-variation-settings: "SOFT" 100; letter-spacing: -0.01em; font-size: 1.02em; line-height: 1; }
.logo-firma { display: block; font-family: var(--f-cuerpo); font-weight: 500; font-size: .36em; color: var(--terracota); letter-spacing: 0; margin-top: .14em; }
.logo-negativo { color: var(--lino); }
.logo-negativo .logo-firma { color: var(--lino); }

/* ---------- 6. Hero scroll ---------- */
.hero { position: relative; height: 300vh; background: var(--lino); }
.hero-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero-field { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Zona lisa para el titular: velo lino a la izquierda */
.hero-veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--lino) 0%, var(--lino) 38%, rgba(244,239,230,.7) 52%, rgba(244,239,230,0) 66%); }

.hero-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 28px var(--margen);
}
.hero-header .logo { font-size: 30px; }
.hero-nav { display: flex; align-items: center; gap: 24px; font-size: 16px; font-weight: 500; padding-top: 6px; }

.hero-content {
  position: absolute; inset: 0; z-index: 3;
  width: min(100% - 2 * var(--margen), var(--ancho-max)); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--esp-5); align-items: center;
}

.hero-act1, .hero-act3 { grid-column: 1; grid-row: 1; will-change: transform, opacity; }
.hero-act1 { grid-column: 1 / -1; max-width: 8.4em; font-size: var(--fs-h1); }
.hero-act1 .h1 { font-size: 1em; }
.hero-sub { margin: var(--esp-3) 0 0; max-width: 34ch; font-size: var(--fs-cuerpo); }
.hero-act3 { opacity: 0; transform: translateY(16px); pointer-events: none; max-width: 11em; font-size: clamp(34px, 4.2vw, 64px); }
.hero-act3 h2 { font-size: 1em; font-weight: 600; }
.hero-botones { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-4); font-size: var(--fs-cuerpo); }

.hero-photo {
  grid-column: 2; grid-row: 1; justify-self: end;
  width: min(100%, 440px); aspect-ratio: 4 / 5;
  border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra);
  opacity: 0; transform: translateX(40px); will-change: transform, opacity;
  background: var(--arena-clara);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* Etiquetas sobre los carriles (acto 2) */
.hero-labels { position: absolute; z-index: 4; left: 58%; top: 50%; transform: translateY(-50%); display: grid; gap: 18px; pointer-events: none; }
.hero-label {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: 999px;
  background: var(--lino); color: var(--tinta);
  box-shadow: 0 1px 0 rgba(43,38,34,.06);
  opacity: 0; transition: opacity var(--t-rapido) linear;
}
.hero-label.is-on { opacity: 1; }
.hero-label svg { width: 20px; height: 20px; stroke: var(--terracota); }
.hero-label .etiqueta { color: var(--tinta); }

/* Estado estático: sin JS o con prefers-reduced-motion (acto 3 visible, sin animación) */
.hero.is-static { height: auto; }
.hero.is-static .hero-sticky { position: relative; height: auto; min-height: 100vh; }
.hero.is-static .hero-content { position: relative; inset: auto; padding: 140px 0 var(--esp-6); grid-template-rows: auto auto; row-gap: var(--esp-5); }
.hero.is-static .hero-act1 { grid-row: 1; grid-column: 1; opacity: 1 !important; transform: none !important; }
.hero.is-static .hero-act3 { grid-row: 2; grid-column: 1; opacity: 1 !important; transform: none !important; pointer-events: auto; }
.hero.is-static .hero-photo { grid-row: 1 / span 2; opacity: 1 !important; transform: none !important; align-self: center; }
.hero.is-static .hero-labels { display: none; }
.hero.is-static .u-stroke path { stroke-dashoffset: 0; }
.hero.is-static .hero-field { opacity: .6; }

/* ---------- 7. Secciones ---------- */
.seccion { padding-block: var(--seccion-y); }
.seccion-cabecera { max-width: 16em; font-size: var(--fs-h2); margin-bottom: var(--esp-5); }
.seccion-cabecera h2 { font-size: 1em; }
.seccion-cabecera .etiqueta { display: block; margin-bottom: var(--esp-3); }
.apoyo { max-width: 48ch; }
.paso { margin-top: var(--esp-4); font-size: var(--fs-cuerpo); }
.paso .enlace { font-weight: 600; }

/* Entradas de sección: fade + 12 px, solo la primera vez */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--t-entrada) var(--ease-out), transform var(--t-entrada) var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 90ms; }
.reveal[data-delay="2"] { transition-delay: 180ms; }

/* 7.1 Marquee sobre arena */
.marquee { background: var(--arena); color: var(--tinta); overflow: hidden; padding: 18px 0; border-top: 1px solid rgba(43,38,34,.06); }
.marquee-track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee ul { display: flex; gap: 0; }
.marquee li { padding: 0 28px; white-space: nowrap; }
.marquee li::after { content: "·"; margin-left: 56px; color: var(--barro); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* 7.2 Dos columnas */
.dos-col { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--esp-5); align-items: start; }
.dos-col > :last-child { padding-top: .4em; }

/* 7.3 Tarjetas en arena clara */
.tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-3); }
.tarjeta { background: var(--arena-clara); border-radius: var(--radio); padding: var(--esp-4) var(--esp-3) var(--esp-3); min-height: 280px; display: flex; flex-direction: column; }
.tarjeta .icono { width: 32px; height: 32px; stroke: var(--terracota); margin-bottom: var(--esp-4); }
.tarjeta h3 { margin-bottom: var(--esp-2); max-width: 16ch; }
.tarjeta p { margin: 0; font-size: 17px; color: var(--tinta); }

/* 7.4 Pasos verticales + bloque oliva */
.metodo { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--esp-6); align-items: start; }
.pasos { position: relative; padding-left: 56px; }
.pasos::before { content: ""; position: absolute; left: 19px; top: 12px; bottom: 12px; width: 2px; background: var(--arena); }
.paso-item { position: relative; padding-bottom: var(--esp-5); }
.paso-item:last-child { padding-bottom: 0; }
.paso-item::before {
  content: ""; position: absolute; left: -56px; top: 2px; width: 40px; height: 40px; border-radius: 50%;
  background: var(--lino); border: 2px solid var(--arena);
  transition: background-color 400ms var(--ease-out), border-color 400ms var(--ease-out);
}
.paso-item::after {
  content: ""; position: absolute; left: -37px; top: 21px; width: 2px; height: calc(100% - 20px);
  background: var(--terracota); transform: scaleY(0); transform-origin: top; transition: transform 600ms var(--ease-out) 150ms;
}
.paso-item:last-child::after { display: none; }
.paso-item h3 { transition: color 400ms var(--ease-out); }
.paso-item p { margin: 6px 0 0; max-width: 34ch; }
.paso-item.is-lit::before { background: var(--terracota); border-color: var(--terracota); }
.paso-item.is-lit::after { transform: scaleY(1); }
.paso-item.is-lit h3 { color: var(--terracota); }
.paso-item .icono { position: absolute; left: -46px; top: 12px; width: 20px; height: 20px; stroke: var(--tinta); transition: stroke 400ms var(--ease-out); z-index: 1; }
.paso-item.is-lit .icono { stroke: var(--lino); }

.bloque-oliva { background: var(--oliva); color: var(--lino); border-radius: var(--radio); padding: var(--esp-4); }
.bloque-oliva h3 { color: var(--lino); margin-bottom: var(--esp-3); }
.bloque-oliva li { padding: 14px 0; border-top: 1px solid rgba(244,239,230,.22); font-size: 17px; }
.bloque-oliva li:first-child { border-top: 0; padding-top: 0; }

/* Divisor Convergencia (estático) */
.divisor { display: block; width: 100%; height: 140px; }

/* 7.5 Casos reales */
.caso {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--esp-4);
  background: var(--arena-clara); border-radius: var(--radio); padding: var(--esp-4);
  border: 1.5px dashed var(--arena);
}
.caso .etiqueta { display: block; margin-bottom: var(--esp-3); }
.caso h3 { margin-bottom: var(--esp-2); max-width: 20ch; }
.caso p { margin: 0; max-width: 46ch; }
.caso-cifra { background: var(--ambar); color: var(--tinta); border-radius: var(--radio); padding: var(--esp-3); display: flex; flex-direction: column; justify-content: flex-end; }
.caso-cifra .cifra { font-size: clamp(56px, 6vw, 96px); line-height: 1; }
.caso-cifra small { font-weight: 500; font-size: 16px; }
/* Mientras no exista un caso con dato medido, la caja ámbar no se muestra */
.caso.es-placeholder { grid-template-columns: 1fr; }
.caso.es-placeholder .caso-cifra { display: none; }

/* 7.6 Quién está detrás */
.quien { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--esp-6); align-items: center; }
.quien-foto { border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); aspect-ratio: 4 / 5; background: var(--arena-clara); }
.quien-foto img { width: 100%; height: 100%; object-fit: cover; }
.quien-texto p { max-width: 40ch; }
.dos-col h2, .quien-texto h2 { max-width: 11em; }

/* 7.7 Cierre terracota */
.cierre { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; overflow: hidden; }
.bg-terracota { background: var(--terracota); color: var(--lino); }
.bg-terracota h2 { color: var(--lino); }
.cierre .apoyo { max-width: 40ch; font-size: clamp(20px, 1.6vw, 24px); }
.cierre-botones { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-4); }
.cierre-marca { position: absolute; right: -4vw; bottom: -4vw; width: clamp(240px, 32vw, 460px); opacity: .15; pointer-events: none; }

/* 7.8 Footer */
.bg-tinta { background: var(--tinta); color: var(--lino); }
.footer { padding: var(--esp-4) 0; font-size: 15px; }
.footer .contenedor { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.footer .logo { font-size: 22px; }
.footer a { color: var(--lino); }
.footer .sep { color: rgba(244,239,230,.4); }
.footer nav { margin-left: auto; display: flex; gap: 24px; }

/* ---------- 8. Móvil ---------- */
@media (max-width: 1023px) {
  .tarjetas { grid-template-columns: 1fr; }
  .tarjeta { min-height: 0; }
  .metodo, .quien, .dos-col { grid-template-columns: 1fr; row-gap: var(--esp-5); }
  .quien-foto { max-width: 480px; }
  .caso { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .hero { height: 200vh; }
  .hero-header { padding: 20px var(--margen); }
  .hero-header .logo { font-size: 24px; }
  .hero-nav { display: none; }
  .hero-veil { background: linear-gradient(180deg, var(--lino) 0%, rgba(244,239,230,.85) 55%, rgba(244,239,230,.3) 100%); }
  .hero-content { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; row-gap: var(--esp-3); padding-top: 72px; }
  .hero-act1, .hero-act3 { grid-column: 1; grid-row: 1; max-width: none; }
  .hero-act1 .h1 { max-width: none; }
  .hero-act3 h2 { font-size: clamp(30px, 8vw, 44px); }
  .hero-photo { grid-column: 1; grid-row: 2; justify-self: start; width: min(100%, 300px); aspect-ratio: 4 / 3; transform: translateY(24px); }
  .hero-labels { left: var(--margen); right: var(--margen); top: auto; bottom: 14vh; transform: none; grid-auto-flow: column; justify-content: start; gap: 10px; }
  .hero-label { padding: 8px 12px; }
  .hero.is-static .hero-photo { grid-row: 3; }
  .pasos { padding-left: 52px; }
  .cierre-marca { right: -10vw; bottom: -6vw; width: 240px; }
  .footer nav { margin-left: 0; }
}

/* ---------- 9. Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .u-stroke path { stroke-dashoffset: 0; transition: none; }
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; }
  .marquee ul:last-child { display: none; }
  .paso-item::before, .paso-item::after, .paso-item h3, .paso-item .icono { transition: none; }
  .paso-item::before { background: var(--terracota); border-color: var(--terracota); }
  .paso-item::after { transform: scaleY(1); }
  .btn, .enlace { transition: none; }
}

/* ---------- 10. v2 · gancho y disparador ---------- */
/* Lista de dolores (relatabilidad): una línea por dolor, icono terracota */
.dolores li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--arena); font-size: var(--fs-cuerpo); }
.dolores li:first-child { border-top: 0; padding-top: 0; }
.dolores .icono { width: 24px; height: 24px; stroke: var(--terracota); margin-top: 2px; }
.compartir { margin-top: var(--esp-2); font-size: 16px; }

/* Sección oliva a sangre: «Lo que no hace la IA» */
.bg-oliva { background: var(--oliva); color: var(--lino); }
.bg-oliva h2, .bg-oliva h3 { color: var(--lino); }
.nohace .nohace-lista li { padding: 16px 0; border-top: 1px solid rgba(244,239,230,.22); font-size: clamp(20px, 1.6vw, 24px); font-family: var(--f-titular); font-weight: 600; font-variation-settings: "SOFT" 100; line-height: 1.25; }
.nohace .nohace-lista li:first-child { border-top: 0; padding-top: 0; }
.nohace .paso { color: var(--lino); }

/* Método: cabecera a la izquierda, pasos a la derecha */
.metodo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.metodo .seccion-cabecera .paso { font-size: var(--fs-cuerpo); margin-top: var(--esp-3); }
@media (max-width: 1023px) { .metodo { grid-template-columns: 1fr; } }

/* Etiquetas del hero con su dolor debajo */
.hero-label { flex-direction: column; align-items: flex-start; gap: 4px; border-radius: var(--radio); padding: 12px 16px; }
.hero-label .fila { display: inline-flex; align-items: center; gap: 10px; }
.hero-label small { font-size: 14px; color: var(--barro); line-height: 1.3; }
@media (max-width: 767px) { .hero-label small { display: none; } .hero-label { flex-direction: row; } }

/* =========================================================
   11. v3 · 30 mejoras (numeradas como en el PDF)
   ========================================================= */

/* M05 · Fuente de reserva con métricas ajustadas: menos salto de texto (CLS) mientras llega Fraunces/Inter */
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia"); size-adjust: 104%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }
:root { --f-titular: "Fraunces", "Fraunces Fallback", Georgia, serif; --f-cuerpo: "Inter", "Inter Fallback", Arial, sans-serif; }

/* M04 · Las secciones bajo el pliegue no se maquetan hasta acercarse */
.seccion, .faq, .cierre { content-visibility: auto; contain-intrinsic-size: auto 720px; }

/* M10 · Anclas con margen para que el titular no quede pegado al borde (ni bajo la barra) */
[id] { scroll-margin-top: 88px; }

/* M17 · Objetivos táctiles de 44 px en enlaces de navegación y pie */
.hero-nav a, .footer a, .footer nav a { display: inline-flex; align-items: center; min-height: 44px; }

/* M24 · Pista de scroll */
.hero-pista { position: absolute; left: var(--margen); bottom: 28px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 500; color: var(--barro); letter-spacing: .04em; }
.hero-pista svg { width: 18px; height: 18px; animation: pista 1.8s ease-in-out infinite; }
@keyframes pista { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.hero.is-static .hero-pista { display: none; }

/* M18 · Barra fija de llamada a la acción */
.barra-cta { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgba(244,239,230,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--arena); transform: translateY(-100%); opacity: 0; transition: transform 300ms var(--ease-out), opacity 300ms var(--ease-out); }
.barra-cta[hidden] { display: block; visibility: hidden; }
.barra-cta.is-visible { transform: none; opacity: 1; visibility: visible; }
.barra-cta .contenedor { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.barra-cta .logo { font-size: 22px; }
.barra-texto { margin-left: auto; font-size: 15px; color: var(--barro); }
.btn-peq { min-height: 44px; padding: 0 20px; font-size: 15px; }
@media (max-width: 767px) { .barra-texto { display: none; } .barra-cta .btn-peq { margin-left: auto; } }

/* M19 · Dolores como enlaces */
.dolores li { display: block; padding: 0; }
.dolor { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; padding: 14px 0; color: var(--tinta); border-radius: 8px; transition: color var(--t-medio) var(--ease-out); }
.dolor:hover, .dolor:focus-visible, .dolor.is-elegido { color: var(--barro); }
.dolor .icono { width: 24px; height: 24px; stroke: var(--terracota); margin-top: 2px; }
.dolor span { background-image: linear-gradient(var(--ambar), var(--ambar)); background-repeat: no-repeat; background-size: 0% 2px; background-position: 0 100%; transition: background-size var(--t-medio) var(--ease-out); }
.dolor:hover span, .dolor:focus-visible span, .dolor.is-elegido span { background-size: 100% 2px; }

/* M14 · Botón de pausa del marquee */
.marquee { position: relative; }
.marquee-pausa { position: absolute; right: var(--margen); top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--tinta); background: var(--arena); color: var(--tinta); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.marquee-pausa svg { width: 18px; height: 18px; }
.marquee-pausa:hover { background: var(--arena-clara); }
.marquee.is-paused .marquee-track { animation-play-state: paused; }
.marquee-track { padding-right: 72px; }

/* M23 · Preguntas frecuentes */
.faq-item { border-top: 1px solid var(--arena); }
.faq-item:last-of-type { border-bottom: 1px solid var(--arena); }
.faq-item summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; position: relative; font-family: var(--f-titular); font-weight: 600; font-variation-settings: "SOFT" 100; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.25; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--terracota); border-bottom: 2px solid var(--terracota); transform: translateY(-70%) rotate(45deg); transition: transform var(--t-medio) var(--ease-out); }
.faq-item[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq-item summary:hover { color: var(--barro); }
.faq-item p { margin: 0 0 20px; max-width: 46ch; }

/* M22 · Los 20 minutos, en el cierre */
.llamada { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-3); margin-top: var(--esp-6); max-width: 900px; }
.llamada li { border-top: 1.5px solid rgba(244,239,230,.45); padding-top: 16px; font-size: 16px; display: grid; gap: 6px; }
.llamada .cifra { font-size: 44px; line-height: 1; }
.cierre-alt { margin-top: var(--esp-3); font-size: 16px; }
@media (max-width: 767px) { .llamada { grid-template-columns: 1fr; margin-top: var(--esp-5); } }

/* M16 · Mientras un acto está oculto no recibe foco ni se lee (visibility la gestiona main.js) */
.hero-act3[style*="visibility: hidden"] a { visibility: hidden; }

/* M30 · Versión oscura del brandbook (lino sobre tinta) cuando el sistema la pide */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lino: #2B2622; --tinta: #F4EFE6; --arena: #4A423B; --arena-clara: #3A332E; --barro: #E8B64A;
    color-scheme: dark;
  }
  :root:not([data-theme="light"]) .etiqueta { color: var(--ambar); }
  :root:not([data-theme="light"]) .bg-terracota .etiqueta, :root:not([data-theme="light"]) .bg-oliva .etiqueta { color: #F4EFE6; }
  :root:not([data-theme="light"]) .btn-principal { color: #F4EFE6; }
  :root:not([data-theme="light"]) .btn-secundario:hover { background: var(--arena-clara); }
  :root:not([data-theme="light"]) .btn-tinta { background: #F4EFE6; color: #2B2622; border-color: #F4EFE6; }
  :root:not([data-theme="light"]) .btn-tinta:hover { background: #2B2622; color: #F4EFE6; border-color: #2B2622; }
  :root:not([data-theme="light"]) .btn-lino, :root:not([data-theme="light"]) .bg-terracota, :root:not([data-theme="light"]) .bg-terracota h2, :root:not([data-theme="light"]) .bg-oliva, :root:not([data-theme="light"]) .bg-oliva h2, :root:not([data-theme="light"]) .nohace .paso { color: #F4EFE6; }
  :root:not([data-theme="light"]) .btn-lino { border-color: #F4EFE6; }
  :root:not([data-theme="light"]) .bg-tinta { background: #1F1B18; color: #F4EFE6; }
  :root:not([data-theme="light"]) .footer a { color: #F4EFE6; }
  :root:not([data-theme="light"]) .hero-veil { background: linear-gradient(90deg, #2B2622 0%, #2B2622 38%, rgba(43,38,34,.7) 52%, rgba(43,38,34,0) 66%); }
  :root:not([data-theme="light"]) .hero-label { background: #2B2622; }
  :root:not([data-theme="light"]) .barra-cta { background: rgba(43,38,34,.92); }
  :root:not([data-theme="light"]) .skip { background: #F4EFE6; color: #2B2622; }
  :root:not([data-theme="light"]) .marquee { color: #F4EFE6; }
  :root:not([data-theme="light"]) .caso-cifra { color: #2B2622; }
  :root:not([data-theme="light"]) .hero-photo, :root:not([data-theme="light"]) .quien-foto { box-shadow: 0 8px 24px rgba(0,0,0,.4); }
}
@media (prefers-color-scheme: dark) and (max-width: 767px) {
  :root:not([data-theme="light"]) .hero-veil { background: linear-gradient(180deg, #2B2622 0%, rgba(43,38,34,.85) 55%, rgba(43,38,34,.3) 100%); }
}

/* M26 · Impresión: sin hero animado, sin barra, con las URL visibles */
@media print {
  .hero { height: auto; }
  .hero-sticky { position: static; height: auto; }
  .hero-field, .hero-veil, .hero-labels, .hero-pista, .barra-cta, .marquee, .divisor, .skip, .marquee-pausa, .cierre-marca { display: none !important; }
  .hero-content { position: static; display: block; padding: 24px 0; }
  .hero-act1, .hero-act3, .hero-photo { opacity: 1 !important; transform: none !important; visibility: visible !important; max-width: none; }
  .hero-photo { width: 240px; box-shadow: none; }
  .reveal { opacity: 1; transform: none; }
  .seccion, .cierre { padding-block: 24px; min-height: 0; content-visibility: visible; }
  .bg-terracota, .bg-oliva, .bg-tinta { background: none !important; color: #2B2622 !important; }
  .bg-terracota h2, .bg-oliva h2, .bg-oliva h3 { color: #2B2622; }
  .btn { border: 1px solid #2B2622; color: #2B2622 !important; background: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 12px; color: #8F3F2A; }
  .faq-item { display: block; }
  .faq-item p { display: block; }
  h1 { font-size: 40px; } h2 { font-size: 28px; }
}
@media (prefers-color-scheme: dark) {
  /* Nunca ámbar con texto claro encima: el hover del botón principal se queda en barro real */
  :root:not([data-theme="light"]) .btn-principal:hover, :root:not([data-theme="light"]) .btn-principal:focus-visible { background: #8F3F2A; border-color: #8F3F2A; }
  /* Terracota sobre tinta solo vale para símbolo grande: los iconos pequeños pasan a ámbar */
  :root:not([data-theme="light"]) .dolor .icono, :root:not([data-theme="light"]) .tarjeta .icono, :root:not([data-theme="light"]) .hero-label svg { stroke: var(--ambar); }
  :root:not([data-theme="light"]) .faq-item summary::after { border-color: var(--ambar); }
  :root:not([data-theme="light"]) .paso-item.is-lit h3 { color: var(--ambar); }
  :root:not([data-theme="light"]) .logo-firma { color: var(--ambar); }
}
.cierre .contenedor { position: relative; z-index: 1; }

/* ---------- v4 · fotos y vídeo ---------- */
/* Fotos de sección: marco redondeado y sombra del brandbook; se recortan (object-fit), nunca se estiran */
.foto { margin: var(--esp-4) 0 0; max-width: 560px; aspect-ratio: 3 / 2; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); background: var(--arena-clara); }
.foto img, .banda img, .divisor-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.banda { margin: var(--esp-5) 0 var(--esp-4); aspect-ratio: 21 / 9; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); background: var(--arena-clara); }
.banda img { object-position: center 40%; }
.divisor-foto { margin: 0; width: 100%; height: clamp(220px, 32vw, 460px); overflow: hidden; }
.divisor-foto img { object-position: center 35%; }
.nohace .foto { box-shadow: 0 8px 24px rgba(0,0,0,.25); }
@media (max-width: 767px) { .foto { aspect-ratio: 4 / 3; } .banda { aspect-ratio: 4 / 3; } }

/* Vídeo del hero: detrás del canvas; main.js decide cuál se ve */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 400ms var(--ease-out); }
/* Tratamiento duotono cálido (tinta + lino) para acercar cualquier clip a la paleta hasta tener rodaje propio */
.hero-video { filter: grayscale(1) sepia(.55) saturate(.9) brightness(1.08) contrast(.95); }
.hero.has-video .hero-video { opacity: .45; }
.hero.has-video .hero-field { display: none; }   /* con vídeo activo no se dibuja el campo de líneas */
@media (max-width: 767px), (prefers-reduced-motion: reduce) { .hero-video { display: none; } }
@media print { .hero-video { display: none; } }

/* =========================================================
   12. v6 · packs, contacto, trabajos, recursos (N01–N30)
   ========================================================= */
.barra-nav { display: flex; gap: 20px; margin-left: 32px; font-size: 15px; font-weight: 500; }
.barra-nav a { color: var(--tinta); min-height: 44px; display: inline-flex; align-items: center; }
.barra-nav a:hover { color: var(--barro); }
@media (max-width: 1023px) { .barra-nav { display: none; } }
.paso-item h3 small { font-family: var(--f-cuerpo); font-weight: 500; font-size: 14px; color: var(--barro); letter-spacing: .02em; margin-left: 4px; }

/* Packs */
.packs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-3); margin-top: var(--esp-5); }
.pack { background: var(--arena-clara); border-radius: var(--radio); padding: var(--esp-4) var(--esp-3) var(--esp-3); display: flex; flex-direction: column; gap: 10px; }
.pack-destacado { background: var(--tinta); color: var(--lino); }
.pack-destacado .etiqueta { color: var(--ambar); }
.pack-precio { margin: 4px 0 0; font-size: 18px; }
.pack-precio .cifra { font-size: clamp(40px, 3.4vw, 56px); line-height: 1; }
.pack-mes { font-size: 18px; }
.pack-sub { margin: 0; font-size: 15px; color: var(--barro); }
.pack-destacado .pack-sub { color: var(--arena); }
.pack-lista { display: grid; gap: 8px; margin: 12px 0 20px; font-size: 16px; flex: 1; }
.pack-lista li { padding-left: 18px; position: relative; }
.pack-lista li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 2px; background: var(--terracota); }
.pack-destacado .pack-lista li::before { background: var(--ambar); }
.pack .btn { align-self: flex-start; }
.pack-destacado .btn-principal { color: var(--lino); }
@media (max-width: 1023px) { .packs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .packs { grid-template-columns: 1fr; } }

/* Reglas (garantía, hitos, aparte, propiedad) */
.reglas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-3); margin-top: var(--esp-5); }
.reglas li { border-top: 2px solid var(--terracota); padding-top: 16px; }
.reglas h3 { font-size: 20px; margin-bottom: 8px; }
.reglas p { margin: 0; font-size: 16px; }
@media (max-width: 1023px) { .reglas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .reglas { grid-template-columns: 1fr; } }

/* Sistemas con nombre */
.nombrados { margin-top: var(--esp-6); }
.nombrados ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px var(--esp-4); }
.nombrados li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--arena); font-size: 17px; }
.nombrados .icono { width: 24px; height: 24px; stroke: var(--terracota); margin-top: 2px; }
.nombrados strong { font-family: var(--f-titular); font-weight: 600; font-variation-settings: "SOFT" 100; font-size: 20px; display: block; margin-bottom: 4px; }
@media (max-width: 767px) { .nombrados ul { grid-template-columns: 1fr; } }

/* Calculadora */
.calculadora { margin-top: var(--esp-6); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--esp-5); align-items: center; background: var(--arena-clara); border-radius: var(--radio); padding: var(--esp-4); }
.calculadora h3 { margin-bottom: 10px; }
.calculadora p { margin: 0; font-size: 16px; }
.calc-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.calc-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; color: var(--barro); }
.calc-form input { font: inherit; font-size: 18px; padding: 10px 12px; border: 1.5px solid var(--arena); border-radius: 8px; background: var(--lino); color: var(--tinta); min-height: 48px; }
.calc-form input:focus { border-color: var(--terracota); outline: none; }
.calc-resultado { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: 18px; }
.calc-resultado .cifra { font-size: clamp(36px, 3vw, 52px); line-height: 1; background: var(--ambar); color: var(--tinta); padding: 4px 12px; border-radius: 10px; }
.calc-resultado small { width: 100%; font-size: 15px; color: var(--barro); }
@media (max-width: 1023px) { .calculadora { grid-template-columns: 1fr; } .calc-form { grid-template-columns: 1fr; } }

/* Comparativa */
.comparativa { margin-top: var(--esp-6); overflow-x: auto; }
.comparativa table { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 720px; }
.comparativa th, .comparativa td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-top: 1px solid var(--arena); }
.comparativa thead th { font-family: var(--f-cuerpo); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--barro); border-top: 0; }
.comparativa tbody th { font-family: var(--f-titular); font-weight: 600; font-variation-settings: "SOFT" 100; font-size: 18px; width: 20%; }
.comparativa td:nth-child(4), .comparativa thead th:nth-child(4) { color: var(--terracota); font-weight: 500; }

/* Empresa grande */
.grande { margin-top: var(--esp-6); background: var(--oliva); color: var(--lino); border-radius: var(--radio); padding: var(--esp-4); }
.grande h3 { color: var(--lino); max-width: 22ch; margin-bottom: 12px; }
.grande p { max-width: 70ch; }
.grande .etiqueta, .grande .paso { color: var(--lino); }
.grande .enlace { color: var(--lino); background-image: linear-gradient(var(--lino), var(--lino)); }

.cierre-entregable { margin-top: var(--esp-3); max-width: 46ch; font-size: 17px; padding-left: 16px; border-left: 2px solid rgba(244,239,230,.6); }

/* Footer ampliado */
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: var(--esp-4); padding-bottom: var(--esp-4); }
.footer-grid nav, .footer-grid div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.footer-grid .etiqueta { color: var(--ambar); margin-bottom: 8px; }
.footer-firma, .footer-news { margin: 12px 0 0; font-size: 15px; color: var(--arena); line-height: 1.5; }
.news-form { display: flex; gap: 8px; margin-top: 12px; width: 100%; max-width: 360px; }
.news-form input { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 8px 12px; border: 1.5px solid rgba(244,239,230,.4); border-radius: 999px; background: transparent; color: var(--lino); min-height: 44px; }
.news-form input::placeholder { color: rgba(244,239,230,.5); }
.footer-legal { display: flex; justify-content: space-between; gap: 16px; padding-top: var(--esp-3); border-top: 1px solid rgba(244,239,230,.15); font-size: 14px; }
.footer-legal nav { display: flex; gap: 20px; margin: 0; }
@media (max-width: 1023px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639px) { .footer-grid { grid-template-columns: 1fr; } .footer-legal { flex-direction: column; } }

/* Páginas interiores (contacto, trabajos, recursos) */
.cabecera-pagina { position: sticky; top: 0; z-index: 40; background: rgba(244,239,230,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--arena); }
.cabecera-pagina .contenedor { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.cabecera-pagina .logo { font-size: 24px; }
.cabecera-pagina nav { display: flex; gap: 20px; margin-left: auto; font-size: 15px; font-weight: 500; }
.cabecera-pagina nav a { color: var(--tinta); min-height: 44px; display: inline-flex; align-items: center; }
.cabecera-pagina nav a[aria-current="page"] { color: var(--terracota); }
.cabecera-pagina .btn-peq { margin-left: 8px; }
@media (max-width: 767px) { .cabecera-pagina nav a:not(.btn) { display: none; } }
.pagina-hero { padding: clamp(64px, 9vw, 120px) 0 var(--esp-5); }
.pagina-hero h1 { font-size: clamp(40px, 5.5vw, 88px); max-width: 12em; }
.pagina-hero .apoyo { margin-top: var(--esp-3); }

/* Contacto */
.contacto-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--esp-6); align-items: start; }
.form { display: grid; gap: 18px; }
.form label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; color: var(--barro); }
.form input, .form select, .form textarea { font: inherit; font-size: 17px; padding: 12px 14px; border: 1.5px solid var(--arena); border-radius: 10px; background: var(--blanco); color: var(--tinta); min-height: 50px; width: 100%; }
.form textarea { min-height: 120px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--terracota); outline: none; }
.form .fila { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form .consent { font-size: 14px; color: var(--tinta); display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-weight: 400; }
.form .consent input { width: 20px; height: 20px; min-height: 0; padding: 0; margin-top: 2px; }
.form-nota { font-size: 14px; color: var(--barro); margin: 0; }
.contacto-lado { display: grid; gap: var(--esp-4); }
.contacto-dato { border-top: 1px solid var(--arena); padding-top: 16px; }
.contacto-dato h3 { font-size: 20px; margin-bottom: 6px; }
.contacto-dato p { margin: 0; font-size: 16px; }
.agenda { margin-top: var(--esp-6); }
.agenda-marco { aspect-ratio: 16 / 10; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); background: var(--arena-clara); display: grid; place-items: center; text-align: center; padding: var(--esp-4); }
.agenda-marco iframe { width: 100%; height: 100%; border: 0; }
@media (max-width: 1023px) { .contacto-grid { grid-template-columns: 1fr; } .form .fila { grid-template-columns: 1fr; } }

/* Test de 5 preguntas */
.test { background: var(--arena-clara); border-radius: var(--radio); padding: var(--esp-4); }
.test fieldset { border: 0; padding: 0; margin: 0 0 20px; }
.test legend { font-family: var(--f-titular); font-weight: 600; font-variation-settings: "SOFT" 100; font-size: 20px; margin-bottom: 10px; }
.test .opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.test .opciones label { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1.5px solid var(--arena); border-radius: 999px; background: var(--lino); cursor: pointer; font-size: 15px; min-height: 44px; }
.test .opciones input { accent-color: var(--terracota); }
.test .opciones label:has(input:checked) { border-color: var(--terracota); color: var(--barro); }
.test-resultado { margin-top: var(--esp-3); padding: var(--esp-3); background: var(--tinta); color: var(--lino); border-radius: 12px; }
.test-resultado[hidden] { display: none; }
.test-resultado h3 { color: var(--lino); margin-bottom: 8px; }
.test-resultado .etiqueta { color: var(--ambar); }
.test-resultado p { margin: 0 0 12px; }
.test-resultado .btn { margin-top: 4px; }

/* Trabajos y recursos */
.sectores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-3); }
.sector { background: var(--arena-clara); border-radius: var(--radio); padding: var(--esp-3); }
.sector h3 { margin-bottom: 10px; }
.sector ul { display: grid; gap: 6px; font-size: 16px; }
.sector li { padding-left: 16px; position: relative; }
.sector li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 2px; background: var(--terracota); }
.sector .paso { margin-top: 14px; font-size: 15px; }
@media (max-width: 1023px) { .sectores { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639px) { .sectores { grid-template-columns: 1fr; } }
.caso-plantilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-3); margin-top: var(--esp-3); }
.caso-plantilla li { background: var(--lino); border: 1.5px solid var(--arena); border-radius: 12px; padding: 16px; font-size: 15px; }
.caso-plantilla strong { font-family: var(--f-titular); font-weight: 600; font-variation-settings: "SOFT" 100; font-size: 18px; display: block; margin-bottom: 6px; }
@media (max-width: 639px) { .caso-plantilla { grid-template-columns: 1fr; } }
.recursos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-3); }
.recurso { background: var(--arena-clara); border-radius: var(--radio); padding: var(--esp-4) var(--esp-3) var(--esp-3); display: flex; flex-direction: column; gap: 10px; }
.recurso .icono { width: 32px; height: 32px; stroke: var(--terracota); margin-bottom: 10px; }
.recurso h3 { margin-bottom: 4px; }
.recurso p { margin: 0; font-size: 16px; flex: 1; }
.recurso .btn { align-self: flex-start; margin-top: 10px; }
.recurso-meta { font-size: 13px; color: var(--barro); }
@media (max-width: 1023px) { .recursos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639px) { .recursos { grid-template-columns: 1fr; } }
.guia { max-width: 68ch; }
.guia h2 { font-size: clamp(28px, 3vw, 40px); margin: var(--esp-5) 0 var(--esp-2); }
.guia ol, .guia ul { padding-left: 22px; list-style: decimal; display: grid; gap: 10px; }
.guia ul { list-style: disc; }
.guia .caja { background: var(--arena-clara); border-radius: 12px; padding: 20px 24px; margin: var(--esp-3) 0; }
.cumplimiento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-3); margin-top: var(--esp-5); }
.cumplimiento li { border-top: 2px solid var(--oliva); padding-top: 14px; font-size: 16px; }
.cumplimiento strong { display: block; font-family: var(--f-titular); font-weight: 600; font-variation-settings: "SOFT" 100; font-size: 19px; margin-bottom: 6px; }
@media (max-width: 1023px) { .cumplimiento { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639px) { .cumplimiento { grid-template-columns: 1fr; } }
.herramientas { margin-top: var(--esp-5); font-size: 16px; color: var(--barro); }
.herramientas span { display: inline-block; padding: 6px 12px; border: 1px solid var(--arena); border-radius: 999px; margin: 0 6px 8px 0; color: var(--tinta); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pack-destacado { background: #1F1B18; }
  :root:not([data-theme="light"]) .form input, :root:not([data-theme="light"]) .form select, :root:not([data-theme="light"]) .form textarea { background: #1F1B18; }
  :root:not([data-theme="light"]) .cabecera-pagina { background: rgba(43,38,34,.92); }
  :root:not([data-theme="light"]) .test-resultado { background: #1F1B18; }
}
@media print { .cabecera-pagina, .news-form, .calculadora, .test { display: none !important; } }

/* ---------- v7 · Trabajos (webs construidas) ---------- */
.trabajos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-3); }
.trabajo a { display: block; color: var(--tinta); }
.trabajo-captura { margin: 0 0 14px; aspect-ratio: 16 / 10; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); background: var(--arena-clara); transition: transform 300ms var(--ease-out); }
.trabajo-captura img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.trabajo a:hover .trabajo-captura { transform: translateY(-4px); }
.trabajo h3 { margin: 6px 0 4px; }
.trabajo p { margin: 0; font-size: 16px; }
@media (max-width: 1023px) { .trabajos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639px) { .trabajos { grid-template-columns: 1fr; } }

/* ---------- v7 · Aaliyah Zegna, presentadora ---------- */
.aaliyah { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; align-items: flex-end; gap: 12px; max-width: min(380px, calc(100vw - 40px)); }
.aaliyah[hidden] { display: none; }
.aaliyah-avatar { width: 60px; height: 60px; flex: none; border-radius: 50%; border: 2px solid var(--lino); padding: 0; background: var(--terracota); box-shadow: var(--sombra); cursor: pointer; overflow: hidden; }
.aaliyah-avatar svg, .aaliyah-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.aaliyah-tarjeta { background: var(--lino); color: var(--tinta); border: 1px solid var(--arena); border-radius: var(--radio); box-shadow: var(--sombra); padding: 16px 18px; transform-origin: bottom right; transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out); }
.aaliyah.is-plegada .aaliyah-tarjeta { opacity: 0; transform: scale(.96) translateY(8px); pointer-events: none; }
.aaliyah-nombre { margin: 0 0 8px; font-size: 13px; display: flex; gap: 8px; align-items: baseline; }
.aaliyah-nombre strong { font-family: var(--f-titular); font-weight: 600; font-variation-settings: "SOFT" 100; font-size: 17px; }
.aaliyah-nombre span { color: var(--barro); }
.aaliyah-texto { margin: 0 0 12px; font-size: 15px; line-height: 1.45; min-height: 2.9em; }
.aaliyah-acciones { display: flex; align-items: center; gap: 8px; }
.aaliyah-voz, .aaliyah-cerrar { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--arena); background: transparent; color: var(--tinta); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; }
.aaliyah-voz svg { width: 18px; height: 18px; }
.aaliyah-voz[aria-pressed="true"] { background: var(--tinta); color: var(--lino); border-color: var(--tinta); }
.aaliyah-cerrar { margin-left: auto; }
@media (max-width: 767px) { .aaliyah { right: 12px; bottom: 12px; left: 12px; max-width: none; } .aaliyah-tarjeta { flex: 1; } }
@media print { .aaliyah { display: none !important; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .aaliyah-tarjeta { background: #1F1B18; } }

/* ---------- v8 · Aaliyah en vídeo ---------- */
.aaliyah-video-btn { position: relative; width: 132px; aspect-ratio: 4 / 5; flex: none; border: 0; padding: 0; border-radius: var(--radio); overflow: hidden; background: var(--arena-clara); box-shadow: var(--sombra); cursor: pointer; }
.aaliyah-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.aaliyah-chip { position: absolute; left: 8px; bottom: 8px; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lino); background: rgba(43,38,34,.75); padding: 4px 8px; border-radius: 999px; }
.aaliyah.is-plegada .aaliyah-video-btn { width: 72px; }
.hero-presentadora { position: relative; }
.hero-presentadora video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-presentadora-pie { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; background: linear-gradient(180deg, rgba(43,38,34,0), rgba(43,38,34,.7)); }
.hero-presentadora-pie .etiqueta { color: var(--lino); font-size: 11px; }
.hero-presentadora-pie .btn-peq { min-height: 36px; padding: 0 14px; font-size: 14px; }
.hero-presentadora-pie .btn-lino[aria-pressed="true"] { background: var(--lino); color: var(--terracota); }
@media (max-width: 767px) { .aaliyah-video-btn { width: 96px; } .hero-presentadora { aspect-ratio: 4 / 5; width: min(100%, 260px); } }

/* ---------- v8.1 · Aaliyah: ajustes visuales ---------- */
.aaliyah { gap: 10px; max-width: min(420px, calc(100vw - 32px)); }
.aaliyah-video-btn { width: 120px; border-radius: 14px; }
.aaliyah-video-btn:focus:not(:focus-visible) { outline: none; }
.aaliyah-video-btn:focus-visible { outline: 2px solid var(--barro); outline-offset: 3px; }
.aaliyah-chip { left: 6px; right: 6px; bottom: 6px; font-size: 9px; letter-spacing: .06em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 3px 6px; }
.aaliyah.is-plegada .aaliyah-video-btn { width: 64px; border-radius: 12px; }
.aaliyah.is-plegada .aaliyah-chip { display: none; }
.aaliyah-tarjeta { width: 280px; padding: 14px 16px; }
.aaliyah-nombre { white-space: nowrap; gap: 6px; }
.aaliyah-nombre strong { font-size: 16px; }
.aaliyah-nombre span { font-size: 12px; }
.aaliyah-texto { font-size: 14px; min-height: 0; }
.aaliyah-acciones { gap: 6px; }
.aaliyah-acciones .btn-peq { min-height: 38px; padding: 0 16px; font-size: 14px; }
.aaliyah-voz, .aaliyah-cerrar { width: 36px; height: 36px; font-size: 18px; }
.aaliyah-voz svg { width: 16px; height: 16px; }
@media (max-width: 767px) {
  .aaliyah { left: auto; right: 12px; bottom: 12px; max-width: calc(100vw - 24px); }
  .aaliyah-video-btn { width: 84px; }
  .aaliyah-tarjeta { width: min(260px, calc(100vw - 132px)); }
}

/* ---------- v8.2 · Aaliyah grande: vídeo vertical encima de la tarjeta ---------- */
.aaliyah { flex-direction: column; align-items: flex-end; gap: 10px; max-width: none; }
.aaliyah-video-btn { width: 280px; aspect-ratio: 4 / 5; border-radius: var(--radio); }
.aaliyah-chip { left: 10px; right: auto; bottom: 10px; font-size: 10px; padding: 4px 10px; }
.aaliyah-tarjeta { width: 280px; }
.aaliyah.is-plegada .aaliyah-video-btn { width: 72px; border-radius: 12px; }
@media (max-height: 760px) { .aaliyah-video-btn { width: 220px; } .aaliyah-tarjeta { width: 220px; } }
@media (max-width: 767px) {
  .aaliyah { right: 12px; bottom: 12px; }
  .aaliyah-video-btn { width: 150px; }
  .aaliyah-tarjeta { width: min(280px, calc(100vw - 24px)); }
  .aaliyah.is-plegada .aaliyah-video-btn { width: 64px; }
}

/* ---------- v8.3 · secciones compactas ---------- */
.seccion-compacta { padding-block: clamp(48px, 6vw, 80px); }
.seccion-compacta .dos-col { align-items: center; }
.seccion-compacta .foto { max-width: 380px; aspect-ratio: 16 / 10; margin-top: 24px; }
.seccion-compacta h2 { font-size: clamp(32px, 3.6vw, 52px); }
.seccion-compacta .dolores li, .seccion-compacta .dolor { font-size: 17px; }
.seccion-compacta .dolor { padding: 10px 0; }
.seccion-compacta .nohace-lista li { font-size: clamp(18px, 1.3vw, 21px); padding: 12px 0; }
.seccion-compacta .apoyo { margin-top: 16px; }
#webs .seccion-cabecera h2 { font-size: clamp(32px, 3.6vw, 52px); }

/* ---------- v8.6 · previsualización en secuencia (tres fotogramas al pasar el ratón) ---------- */
.trabajo-captura[data-secuencia] { position: relative; }
.trabajo-captura[data-secuencia] img { position: absolute; inset: 0; opacity: 0; transition: opacity 220ms var(--ease-out); }
.trabajo-captura[data-secuencia] img:first-child, .trabajo-captura[data-secuencia] img.is-activa { opacity: 1; }
.trabajo-captura[data-secuencia] img:first-child:not(.is-activa) { opacity: 1; }
.trabajo-captura[data-secuencia].is-ciclando img:first-child:not(.is-activa) { opacity: 0; }

/* ---------- v8.7 · Trabajos como paneles de color (captura inclinada, texto debajo) ---------- */
.trabajos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-3); }
.trabajo a { color: var(--tinta); }
.trabajo-panel { position: relative; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; padding: 20px; transition: transform 300ms var(--ease-out); }
.trabajo-panel h3 { position: relative; z-index: 2; margin: 0; font-size: clamp(20px, 1.6vw, 24px); color: var(--lino); }
.panel-tinta { background: var(--tinta); } .panel-oliva { background: var(--oliva); } .panel-terracota { background: var(--terracota); }
.panel-ambar { background: var(--ambar); } .panel-ambar h3 { color: var(--tinta); }
.trabajo-panel .trabajo-captura { position: absolute; left: 12%; right: -22%; top: 34%; bottom: -8%; margin: 0; aspect-ratio: auto; border-radius: 10px; box-shadow: 0 16px 40px rgba(43,38,34,.35); transform: rotate(-7deg); transform-origin: center; transition: transform 300ms var(--ease-out); background: var(--arena-clara); }
.trabajo-panel .trabajo-captura img { object-position: top left; }
.trabajo a:hover .trabajo-panel { transform: translateY(-4px); }
.trabajo a:hover .trabajo-captura { transform: rotate(-4deg) translateY(-6px); }
.trabajo .etiqueta { display: block; margin: 14px 0 6px; }
.trabajo p { font-size: 15px; max-width: 32ch; }
@media (max-width: 1023px) { .trabajos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .trabajos { grid-template-columns: 1fr; } .trabajo-panel { aspect-ratio: 4 / 5; } }

/* ---------- v9 · Blog ---------- */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-4) var(--esp-3); }
.post-card a { display: block; color: var(--tinta); }
.post-img { margin: 0 0 14px; aspect-ratio: 16 / 10; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); background: var(--arena-clara); }
.post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out); }
.post-card a:hover .post-img img { transform: scale(1.03); }
.post-card h3 { font-size: clamp(20px, 1.6vw, 24px); margin: 8px 0; }
.post-card p { font-size: 15px; margin: 0 0 12px; }
.firma { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.firma strong { display: block; font-family: var(--f-titular); font-weight: 600; font-variation-settings: "SOFT" 100; font-size: 15px; }
.firma small { color: var(--barro); font-size: 12px; }
.firma-grande { margin-top: var(--esp-3); font-size: 15px; }
.firma-grande strong { font-size: 18px; } .firma-grande small { font-size: 14px; }
.firma-avatar { width: 36px; height: 36px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; font-family: var(--f-titular); font-weight: 700; font-size: 13px; color: var(--lino); }
.firma-grande .firma-avatar, .autor-card .firma-avatar, .post-autor .firma-avatar { width: 52px; height: 52px; font-size: 18px; }
.av-tinta { background: var(--tinta); } .av-terracota { background: var(--terracota); } .av-oliva { background: var(--oliva); } .av-barro { background: var(--barro); } .av-ambar { background: var(--ambar); color: var(--tinta); }
.autores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-3); margin-top: var(--esp-4); }
.autor-card { background: var(--arena-clara); border-radius: var(--radio); padding: var(--esp-3); }
.autor-card h3 { margin: 12px 0 4px; font-size: 20px; }
.autor-card p { margin: 10px 0 0; font-size: 15px; }
.post-cabecera h1 { font-size: clamp(32px, 4.2vw, 64px); max-width: 20em; }
.post-entradilla { font-size: clamp(18px, 1.4vw, 21px); max-width: 60ch; }
.migas { font-size: 14px; color: var(--barro); margin-bottom: 20px; }
.post-portada { margin: 0 auto var(--esp-5); width: min(100% - 2 * var(--margen), var(--ancho-max)); }
.post-portada img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radio); box-shadow: var(--sombra); }
.post-portada figcaption { font-size: 13px; color: var(--barro); margin-top: 10px; }
.post-cuerpo { max-width: 68ch; }
.post-cuerpo > p { font-size: clamp(18px, 1.2vw, 20px); line-height: 1.55; margin-bottom: 1.2em; }
.post-video { margin: var(--esp-5) 0; }
.video-marco { aspect-ratio: 16 / 9; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); background: var(--tinta); }
.video-marco iframe { width: 100%; height: 100%; border: 0; }
.post-video figcaption { font-size: 13px; color: var(--barro); margin-top: 10px; }
.post-pyme { background: var(--oliva); color: var(--lino); border-radius: var(--radio); padding: var(--esp-4); margin: var(--esp-5) 0; }
.post-pyme .etiqueta, .post-pyme .paso { color: var(--lino); }
.post-pyme p { font-size: 18px; margin: 12px 0 0; }
.post-pyme .enlace { color: var(--lino); background-image: linear-gradient(var(--lino), var(--lino)); }
.post-fuentes h2 { font-size: 22px; margin: var(--esp-4) 0 12px; }
.post-fuentes li { padding: 8px 0; border-top: 1px solid var(--arena); font-size: 16px; }
.post-fuentes span, .post-fuentes p span { color: var(--barro); font-size: 14px; }
.post-autor { display: flex; gap: 16px; align-items: flex-start; border-top: 1px solid var(--arena); padding-top: var(--esp-4); margin-top: var(--esp-5); }
.post-autor h3 { margin-bottom: 4px; } .post-autor p { margin: 8px 0 0; font-size: 15px; }
@media (max-width: 1023px) { .posts, .autores { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639px) { .posts, .autores { grid-template-columns: 1fr; } }

/* ---------- v9.1 · previa en vídeo (ordenador → móvil) ---------- */
.trabajo-panel .trabajo-video { left: 6%; right: -14%; top: 30%; bottom: -6%; transform: rotate(-6deg); background: var(--lino); }
.trabajo-video video { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* ---------- v9.2 · packs iguales; el recomendado solo se señala ---------- */
.pack-destacado, .pack-recomendado { background: var(--arena-clara); color: var(--tinta); }
.pack-recomendado .etiqueta { color: var(--barro); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pack-tag { font-size: 10px; letter-spacing: .1em; padding: 4px 8px; border-radius: 999px; background: var(--ambar); color: var(--tinta); }
.pack-recomendado .pack-precio .cifra { font-size: clamp(48px, 4.2vw, 68px); }
.pack-recomendado .pack-sub { color: var(--barro); }
.pack-recomendado .pack-lista li::before { background: var(--terracota); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pack-destacado, :root:not([data-theme="light"]) .pack-recomendado { background: var(--arena-clara); color: var(--tinta); }
  :root:not([data-theme="light"]) .pack-recomendado .etiqueta, :root:not([data-theme="light"]) .pack-recomendado .pack-sub { color: var(--ambar); }
  :root:not([data-theme="light"]) .pack-tag { background: var(--ambar); color: #2B2622; }
}

/* ===== v9.3 · Vídeo del blog: portada + botón, el iframe se carga al pulsar ===== */
.video-marco { position: relative; cursor: pointer; }
.video-marco img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-play { position: absolute; inset: 0; margin: auto; width: max-content; height: 56px; display: inline-flex; align-items: center; gap: 10px; padding: 0 22px 0 16px; border: 0; border-radius: 999px; background: var(--lino); color: var(--tinta); font: 600 15px/1 var(--fuente-texto, Inter, sans-serif); cursor: pointer; box-shadow: var(--sombra); transition: transform .2s ease, background .2s ease; }
.video-play svg { width: 22px; height: 22px; fill: currentColor; }
.video-play:hover, .video-marco:hover .video-play { transform: scale(1.04); background: var(--arena-clara); }
.video-play:focus-visible { outline: 3px solid var(--terracota); outline-offset: 3px; }

/* ===== v10 · Fotos de Hermes ===== */
.contacto-foto { margin: 0 0 var(--esp-4); border-radius: var(--radio); overflow: hidden; background: var(--arena-clara); box-shadow: var(--sombra); max-width: 320px; }
.contacto-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.contacto-foto figcaption { padding: 10px 14px; font-size: 14px; color: var(--tinta); background: var(--lino); }

/* ===== v11 · Página Nosotros ===== */
.bg-arena { background: var(--arena-clara); }
.bio-galeria { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--esp-3); margin-bottom: var(--esp-5); }
.bio-foto { margin: 0; border-radius: var(--radio); overflow: hidden; background: var(--arena-clara); box-shadow: var(--sombra); aspect-ratio: 4 / 5; }
.bio-foto-grande { grid-row: 1 / 3; grid-column: 1; aspect-ratio: auto; }
.bio-galeria .bio-foto:nth-child(2) { grid-column: 2 / 4; grid-row: 1; aspect-ratio: auto; }
.bio-galeria .bio-foto:nth-child(3) { grid-column: 2 / 4; grid-row: 2; aspect-ratio: auto; }
.bio-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bio-texto h2 { font-size: var(--fs-h2); }
.bio-columnas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-5); margin-top: var(--esp-5); }
.bio-columnas h3 { font-size: 22px; margin-bottom: 12px; }
.bio-columnas p { max-width: 38ch; }
.bio-columnas p + p { margin-top: 14px; }
.bio-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.bio-lista li { padding-left: 22px; position: relative; }
.bio-lista li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; border-radius: 50%; background: var(--ambar); }
.equipo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-4); }
.equipo-tarjeta { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--esp-3); background: var(--lino); border-radius: var(--radio); padding: var(--esp-3); box-shadow: var(--sombra); }
.equipo-retrato { margin: 0; aspect-ratio: 4 / 5; border-radius: calc(var(--radio) - 4px); overflow: hidden; display: grid; place-items: center; background: var(--arena); color: var(--lino); }
.equipo-retrato.panel-tinta { background: var(--tinta); } .equipo-retrato.panel-oliva { background: var(--oliva); } .equipo-retrato.panel-terracota { background: var(--terracota); } .equipo-retrato.panel-ambar { background: var(--ambar); color: var(--tinta); }
.equipo-retrato img { width: 100%; height: 100%; object-fit: cover; display: block; }
.equipo-iniciales { font-family: var(--fuente-titulo, Fraunces, serif); font-size: 56px; letter-spacing: .04em; }
.equipo-texto h3 { font-size: 26px; margin: 6px 0 2px; }
.equipo-origen { color: var(--terracota); font-weight: 500; margin-bottom: 10px; }
.equipo-texto p { max-width: 42ch; }
.equipo-bio { margin-top: 10px; color: var(--tinta); opacity: .8; }
.equipo-estado { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--ambar); color: var(--tinta); font-size: 13px; font-weight: 600; margin-right: 10px; }
.equipo-intro { max-width: 60ch; margin: calc(-1 * var(--esp-4)) 0 var(--esp-5); }
.equipo-nota { margin-top: var(--esp-4); max-width: 60ch; font-size: 14px; opacity: .8; }
@media (max-width: 1023px) { .bio-columnas { grid-template-columns: 1fr; gap: var(--esp-4); } .equipo-grid { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .bio-galeria { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } .bio-foto-grande { grid-column: 1 / 3; grid-row: 1; } .bio-galeria .bio-foto:nth-child(2) { grid-column: 1; grid-row: 2; } .bio-galeria .bio-foto:nth-child(3) { grid-column: 2; grid-row: 2; } .equipo-tarjeta { grid-template-columns: 1fr; } .equipo-retrato { max-width: 240px; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bg-arena { background: #35302B; } :root:not([data-theme="light"]) .equipo-tarjeta { background: #2B2622; box-shadow: 0 8px 24px rgba(0,0,0,.4); } :root:not([data-theme="light"]) .equipo-retrato.panel-tinta { background: #4A433D; } }

/* v11.1 · Aaliyah en Nosotros */
.aaliyah-bio { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--esp-5); align-items: start; }
.aaliyah-galeria { margin-bottom: 0; }
.aaliyah-bio-texto p { max-width: 40ch; }
.aaliyah-bio-texto p + p { margin-top: 14px; }
@media (max-width: 1023px) { .aaliyah-bio { grid-template-columns: 1fr; } }
/* v12 · avatares pixel de los columnistas */
.firma-avatar { overflow: hidden; }
.firma-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.autor-card .firma-avatar, .post-autor .firma-avatar { width: 96px; height: 96px; }

/* ===== v13 · Menú móvil con botón de tres rayas ===== */
.menu-btn { display: none; width: 44px; height: 44px; margin-left: auto; padding: 10px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; }
.menu-btn span { display: block; height: 2px; width: 24px; background: var(--tinta); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.menu-btn:focus-visible { outline: 2px solid var(--terracota); outline-offset: 2px; }
.hero-header .menu-btn { margin-left: auto; }
.cabecera-pagina .menu-btn { margin-left: 8px; }
.barra-cta .menu-btn { margin-left: 8px; }
@media (max-width: 767px) { .hero-header .menu-btn, .cabecera-pagina .menu-btn { display: flex; } .cabecera-pagina nav { margin-left: auto; } .cabecera-pagina .btn-peq { padding-inline: 14px; } }
@media (max-width: 1023px) { .barra-cta .menu-btn { display: flex; } }
.menu-movil { position: fixed; inset: 0; z-index: 200; background: var(--lino); color: var(--tinta); display: flex; flex-direction: column; padding: 16px var(--margen) 32px; overflow-y: auto; opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease; }
.menu-movil[hidden] { display: none; }
.menu-movil.is-abierto { opacity: 1; transform: none; }
.menu-movil-cabecera { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.menu-movil-cabecera .logo-wordmark { font-family: var(--f-titular); font-size: 24px; font-weight: 700; }
.menu-cerrar { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--arena-clara); color: var(--tinta); font-size: 28px; line-height: 1; cursor: pointer; }
.menu-movil-nav { display: flex; flex-direction: column; margin-top: 24px; border-top: 1px solid var(--arena); }
.menu-movil-nav a { font-family: var(--f-titular); font-weight: 600; font-variation-settings: "SOFT" 100; font-size: 28px; color: var(--tinta); text-decoration: none; padding: 16px 0; border-bottom: 1px solid var(--arena); }
.menu-movil-nav a:active { color: var(--terracota); }
.menu-movil-pie { margin-top: auto; padding-top: 32px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.menu-movil-pie .btn { width: 100%; justify-content: center; }
body.menu-abierto { overflow: hidden; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .menu-movil { background: var(--tinta); color: var(--lino); } :root:not([data-theme="light"]) .menu-movil-nav a, :root:not([data-theme="light"]) .menu-movil-cabecera .logo-wordmark { color: var(--lino); } :root:not([data-theme="light"]) .menu-btn span { background: var(--lino); } :root:not([data-theme="light"]) .menu-cerrar { background: #4A433D; color: var(--lino); } :root:not([data-theme="light"]) .menu-movil-nav, :root:not([data-theme="light"]) .menu-movil-nav a { border-color: #4A433D; } }

/* =====================================================================
   v14 · BRAND BOOK 02 · IFENZA SYSTEMS (27 oct 2026)
   Tipografía: Anton (titular) · Pinyon Script (acento) · Archivo (puente / cuerpo / rótulo)
   · EB Garamond Italic (subtítulo) · Reenie Beanie (nota a mano). Paleta y símbolo sin cambios.
   ===================================================================== */
:root {
  --f-titular: "Anton", "Archivo", Impact, sans-serif;
  --f-cuerpo: "Archivo", Arial, Helvetica, sans-serif;
  --f-acento: "Pinyon Script", cursive;
  --f-sub: "EB Garamond", Georgia, serif;
  --f-nota: "Reenie Beanie", cursive;
  --fs-h1: clamp(64px, 11vw, 200px);
  --fs-h2: clamp(44px, 6.4vw, 104px);
  --fs-h3: clamp(24px, 2.4vw, 34px);
  --fs-cuerpo: clamp(17px, 1.1vw, 19px);
  --lh-titular: .88;
  --radio: 6px;
  --sombra: 6px 6px 0 rgba(43, 38, 34, .18);
  --sombra-dura: 8px 8px 0 var(--tinta);
}
body { font-family: var(--f-cuerpo); font-variation-settings: "wdth" 100; font-weight: 400; }
h1, h2, h3, h4, .h1 { font-family: var(--f-titular); font-weight: 400; font-variation-settings: normal; text-transform: uppercase; letter-spacing: 0; line-height: var(--lh-titular); }
h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); line-height: .95; }
strong, b { font-weight: 700; }

/* Rótulo (Archivo Expanded 700, tracking 14 %) */
.etiqueta, .hero-label .etiqueta, .footer .etiqueta, .pack-tag, .equipo-estado, .aaliyah-chip, .caso-cifra small, .barra-texto {
  font-family: var(--f-cuerpo); font-variation-settings: "wdth" 125; font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
}
.barra-texto { font-variation-settings: "wdth" 100; letter-spacing: .02em; text-transform: none; font-weight: 500; font-size: 14px; }

/* Acento caligráfico: 1-3 palabras, girado, nunca una frase */
.acento, .hero-acento { font-family: var(--f-acento); font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1; display: inline-block; transform: rotate(-6deg); transform-origin: left bottom; }
h2 .acento, h1 .acento { font-size: .55em; margin-right: .1em; vertical-align: baseline; position: relative; top: -.1em; color: var(--terracota); }
.bg-terracota h2 .acento, .bg-tinta h2 .acento, .bg-oliva h2 .acento, .cierre h2 .acento { color: var(--lino); }

/* Subtítulo (EB Garamond Italic 500) */
.apoyo, .hero-sub, .cierre .apoyo, .pagina-hero .apoyo, .seccion-cabecera + .apoyo, .post-entradilla, blockquote {
  font-family: var(--f-sub); font-style: italic; font-weight: 500; font-size: clamp(20px, 1.5vw, 24px); line-height: 1.3; letter-spacing: 0;
}
.pagina-hero .apoyo, .hero-sub { max-width: 40ch; }
.equipo-intro, .bio-texto .apoyo { font-size: clamp(19px, 1.3vw, 22px); }

/* Nota a mano */
.nota-mano { font-family: var(--f-nota); font-size: clamp(22px, 2vw, 30px); line-height: 1; color: var(--terracota); text-transform: none; letter-spacing: 0; }

/* Botones: rótulo extendido, esquinas casi rectas, sombra dura al pasar */
.btn { font-family: var(--f-cuerpo); font-variation-settings: "wdth" 115; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; border-radius: 4px; }
.btn-peq { font-size: 12px; }
.btn-principal { background: var(--ambar); color: var(--tinta); border-color: var(--ambar); }
.btn-principal:hover, .btn-principal:focus-visible { background: var(--tinta); color: var(--lino); border-color: var(--tinta); }
.bg-terracota .btn-tinta, .cierre .btn-tinta { background: var(--ambar); color: var(--tinta); border-color: var(--ambar); }
.bg-terracota .btn-tinta:hover, .cierre .btn-tinta:hover { background: var(--tinta); color: var(--lino); border-color: var(--tinta); }
.btn:hover { box-shadow: 4px 4px 0 rgba(43,38,34,.25); }

/* Logotipo: símbolo + IFENZA (Anton) + SYSTEMS (Archivo Expanded 700 justificado al ancho) */
.logo { display: inline-flex; align-items: center; gap: .22em; font-size: 28px; line-height: 1; text-decoration: none; color: var(--tinta); }
.logo .logo-simbolo { width: 1.18em; height: 1.18em; flex: none; }
.logo-wordmark { display: inline-flex; flex-direction: column; font-family: var(--f-titular); font-weight: 400; letter-spacing: .005em; line-height: .82; text-transform: uppercase; }
.logo-wordmark .lk-word { font-size: 1em; }
.logo-wordmark .lk-sub { display: flex; justify-content: space-between; font-family: var(--f-cuerpo); font-variation-settings: "wdth" 125; font-weight: 700; font-size: .205em; letter-spacing: 0; margin-top: .12em; line-height: 1; }
.hero-header .logo { font-size: 34px; }
.cabecera-pagina .logo, .barra-cta .logo { font-size: 26px; }
.logo-negativo, .footer .logo { color: var(--lino); }
.menu-logo { height: 40px; width: auto; }
.menu-movil-cabecera .logo-wordmark { display: none; }

/* Grano de papel en los fondos de color (fusión normal, sin degradados) */
.grano, .bg-terracota, .bg-tinta, .bg-oliva, .cierre, .footer { position: relative; isolation: isolate; }
.hero-sticky { isolation: isolate; }
.grano::after, .bg-terracota::after, .bg-tinta::after, .bg-oliva::after, .hero-sticky::after, .cierre::after, .footer::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .11;
  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'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}
.bg-terracota > *, .bg-tinta > *, .bg-oliva > *, .cierre > *, .footer > * { position: relative; z-index: 1; }
.hero-sticky::after { z-index: 1; }

/* ---------- Hero póster (acto 1) ---------- */
.hero, .hero-sticky { background: var(--terracota); }
.hero-field, .hero-veil { display: none !important; }
.hero-header .logo, .hero-nav a, .hero-nav .enlace { color: var(--lino); --c-onda: var(--lino) !important; --c-carril: var(--ambar) !important; }
.hero-nav .enlace { background-image: linear-gradient(var(--ambar), var(--ambar)); }
.hero-header .menu-btn span { background: var(--lino); }
.hero-content { grid-template-columns: minmax(0, 1fr); align-items: start; padding-top: clamp(96px, 14vh, 150px); }
.hero-act1 { max-width: none; font-size: clamp(72px, 12.5vw, 232px); }
.hero-act1 .h1 { font-size: 1em; color: var(--ambar); line-height: .84; letter-spacing: -.005em; text-shadow: 0 0 .06em rgba(232,182,74,.45), 0 0 .18em rgba(232,182,74,.25); }
.hero-acento { font-size: clamp(34px, 5vw, 92px); color: var(--lino); margin: 0 0 -.25em .4em; position: relative; z-index: 2; }
.hero-sub { color: var(--lino); font-size: clamp(19px, 1.5vw, 24px); margin-top: .3em; max-width: 30ch; }
.hero-act3 { max-width: 11em; font-size: clamp(44px, 6vw, 96px); color: var(--lino); }
.hero-act3 h2 { font-size: 1em; color: var(--lino); }
.hero-acento-3 { font-size: .55em; margin-bottom: -.2em; }
.hero-persona { position: absolute; z-index: 4; bottom: 0; right: clamp(4vw, 14vw, 18vw); width: clamp(240px, 34vw, 560px); height: auto; pointer-events: none; filter: drop-shadow(0 -6px 0 rgba(43,38,34,0)); will-change: opacity; }
.hero-labels { left: var(--margen); right: auto; top: 44%; }
.hero-label { background: var(--lino); color: var(--tinta); border-radius: 4px; }
.hero-label svg { stroke: var(--terracota); }
.hero-photo { border-radius: 4px; box-shadow: var(--sombra-dura); }
.hero-pista { color: var(--lino); }
.hero-pista svg { stroke: var(--lino); }
.hero-act3 .btn-secundario { color: var(--lino); border-color: var(--lino); }
.hero-act3 .btn-secundario:hover { background: var(--lino); color: var(--terracota); }
.hero-content { width: min(100% - 2 * var(--margen), var(--ancho-max)); }
@media (min-width: 1024px) { .hero-content { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; padding-top: 0; } .hero-act1 { grid-column: 1 / -1; } }
@media (max-width: 767px) {
  .hero { height: 260vh; }
  .hero-act1 { font-size: clamp(64px, 19vw, 110px); }
  .hero-acento { font-size: clamp(30px, 9vw, 48px); }
  .hero-sub { max-width: 24ch; font-size: 18px; }
  .hero-persona { right: -6vw; width: 62vw; }
  .hero-content { padding-top: 92px; }
}
.hero.is-static .hero-persona { position: absolute; }
.hero-presentadora-pie .etiqueta { color: var(--lino); }

/* ---------- Barra fija y cabecera interior ---------- */
.barra-cta, .cabecera-pagina { background: rgba(244,239,230,.94); }
.barra-nav a, .cabecera-pagina nav a { font-family: var(--f-cuerpo); font-variation-settings: "wdth" 115; font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.cabecera-pagina nav a[aria-current="page"] { color: var(--terracota); }

/* ---------- Secciones ---------- */
.seccion-cabecera { max-width: 14em; }
.seccion-cabecera h2 { font-size: var(--fs-h2); }
.subrayado, .dolor span { background-image: linear-gradient(var(--ambar), var(--ambar)); }
.u-stroke { display: none; }
.h1 .u { background-image: none; }
.marquee { font-family: var(--f-titular); text-transform: uppercase; font-size: clamp(22px, 2.6vw, 40px); letter-spacing: .01em; background: var(--tinta); color: var(--lino); border: 0; padding: 14px 0; }
.marquee .punto, .marquee span.sep { color: var(--ambar); }
.trabajo-panel, .pack, .equipo-tarjeta, .tarjeta, .caso, .post-card, .autor-card, .contacto-foto, .bio-foto, .quien-foto, .equipo-retrato, .trabajo-captura { border-radius: 4px; }
.trabajo-panel:hover, .post-card:hover { box-shadow: var(--sombra-dura); transform: translate(-2px, -2px); transition: transform var(--t-rapido) ease, box-shadow var(--t-rapido) ease; }
.pack-recomendado { box-shadow: var(--sombra-dura); }
.pack-precio, .caso-cifra strong, .calculadora-resultado strong, .num-grande { font-family: var(--f-titular); font-weight: 400; letter-spacing: 0; }
.faq-item summary { font-family: var(--f-cuerpo); font-variation-settings: "wdth" 75; font-weight: 800; font-size: clamp(20px, 1.6vw, 26px); text-transform: none; letter-spacing: -.01em; }
.menu-movil-nav a { font-family: var(--f-titular); font-weight: 400; text-transform: uppercase; font-size: 40px; letter-spacing: .005em; }
.menu-movil-cabecera .logo-wordmark { font-size: 28px; }
.aaliyah-nombre strong, .firma strong, .equipo-texto h3, .autor-card h3, .post-autor h3 { font-family: var(--f-titular); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; }
.post-card h3, .post-titulo, .post-rel h3 { font-family: var(--f-cuerpo); font-variation-settings: "wdth" 78; font-weight: 800; text-transform: none; letter-spacing: -.015em; line-height: 1.02; }
.post-titulo { font-size: clamp(36px, 4.4vw, 68px); }
.post-card h3 { font-size: clamp(22px, 1.8vw, 28px); }
h1 .acento, .pagina-hero h1 .acento { font-size: .5em; display: block; margin: 0 0 -.15em .3em; color: var(--terracota); }
h2 .acento { display: inline-block; }
.hero-act1 .acento { color: var(--lino); }
.bio-foto-grande img { object-position: center top; }
.cierre h2 { color: var(--ambar); }
.cierre .apoyo { color: var(--lino); }
.footer-firma, .footer-news { font-family: var(--f-cuerpo); }
.footer-grid .etiqueta { color: var(--ambar); }
.equipo-iniciales, .firma-avatar { font-family: var(--f-titular); font-weight: 400; }
.bio-columnas h3, .contacto-dato h3 { font-size: 22px; }
.quien-texto h2, .bio-texto h2 { font-size: var(--fs-h2); }

/* Puente (Archivo Condensed 800) para palabras pequeñas de enlace entre titulares */
.puente { font-family: var(--f-cuerpo); font-variation-settings: "wdth" 75; font-weight: 800; text-transform: none; letter-spacing: -.01em; font-size: .28em; display: inline-block; vertical-align: middle; margin: 0 .2em; }

/* Modo oscuro: mismas voces, el ámbar hace de acento */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero, :root:not([data-theme="light"]) .hero-sticky { background: var(--terracota); }
  :root:not([data-theme="light"]) .barra-cta, :root:not([data-theme="light"]) .cabecera-pagina { background: rgba(43,38,34,.94); }
}
.seccion-cabecera h2, .pagina-hero h1 { max-width: 9.5em; overflow-wrap: anywhere; }
.bio-galeria .bio-foto:nth-child(2), .bio-galeria .bio-foto:nth-child(3) { aspect-ratio: 4 / 3; }
.bio-foto-grande { aspect-ratio: auto; }

.hero-header .logo .logo-simbolo { --c-onda: var(--lino) !important; --c-carril: var(--ambar) !important; }

/* v15.1 · Vídeo scroll de fondo al 13 % sobre la terracota */
.hero-video { z-index: 0; opacity: 0; filter: grayscale(1) contrast(1.1) brightness(.95); mix-blend-mode: normal; }
.hero.has-video .hero-video { opacity: .13; }
.hero-header, .hero-content, .hero-labels, .hero-pista, .hero-persona { z-index: 3; }
.hero-header { z-index: 5; } .hero-labels { z-index: 4; } .hero-persona { z-index: 4; }
.hero-sticky::after { z-index: 1; }
.hero-video { transform: scale(1.32); transform-origin: 88% 12%; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-acento, :root:not([data-theme="light"]) .hero-sub, :root:not([data-theme="light"]) .hero-nav a, :root:not([data-theme="light"]) .hero-header .logo, :root:not([data-theme="light"]) .hero-pista, :root:not([data-theme="light"]) .hero-act3, :root:not([data-theme="light"]) .hero-act3 h2 { color: var(--lino); }
  :root:not([data-theme="light"]) .hero-header .logo .logo-simbolo { --c-onda: var(--lino) !important; --c-carril: var(--ambar) !important; }
  :root:not([data-theme="light"]) .hero-act1 .h1 { color: var(--ambar); }
  :root:not([data-theme="light"]) .hero-label { background: var(--lino); color: var(--tinta); }
}

/* Hero: colores fijos (la paleta se invierte en modo oscuro y el póster debe quedarse igual) */
.hero, .hero-sticky { background: #A94D34 !important; }
.hero-acento, .hero-sub, .hero-nav a, .hero-nav .enlace, .hero-header .logo, .hero-pista, .hero-act3, .hero-act3 h2, .hero-presentadora-pie .etiqueta { color: #F4EFE6 !important; }
.hero-act1 .h1 { color: #E8B64A !important; }
.hero-header .logo .logo-simbolo { --c-onda: #F4EFE6 !important; --c-carril: #E8B64A !important; }
.hero-header .menu-btn span { background: #F4EFE6; }
.hero-label { background: #F4EFE6 !important; color: #2B2622 !important; } .hero-label .etiqueta { color: #2B2622 !important; } .hero-label svg { stroke: #A94D34 !important; }
.hero-pista svg { stroke: #F4EFE6; }
.hero-act3 .btn-secundario { color: #F4EFE6 !important; border-color: #F4EFE6 !important; }