/*! fuente=7ab624e7 — generado por scripts/compila.mjs, NO editar */
:root {
  --pizarra: #34495E;      --pizarra-rgb: 52 73 94;
  --pizarra-deep: #2C3E50; --pizarra-ink: #1A252F;
  --salvia: #8A9A5B;       --salvia-rgb: 138 154 91;
  --ocre: #C6A664;         --ocre-rgb: 198 166 100;
  --ocre-luz: #E3C88A;     --ocre-tierra: #8A6F45;
  --reves: #C25B56;
  --c-canvas: #F7F7F7;
  --c-surface: #FFFFFF;
  --c-surface-2: #F1F2F3;
  --c-line: rgb(52 73 94 / 0.12);
  --c-ink: #2C3E50;
  --c-ink-2: #5B6566;
  --c-ink-3: #667071;
  --c-focal-1: var(--pizarra-ink);
  --c-focal-2: var(--pizarra-deep);
  --c-focal-3: var(--pizarra);
  --r-btn: 12px; --r-card: 16px; --r-hero: 20px; --r-pill: 999px;
  --sh-1: 0 8px 24px rgb(26 37 47 / 0.06);
  --sh-2: 0 22px 50px -30px rgb(26 37 47 / 0.45);
  --font-voz: 'Merriweather', Georgia, serif;
  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
  --tap: 48px;
  --tex-veta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.14 0.008' numOctaves='3' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0.06 0.06 0 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23v)'/%3E%3C/svg%3E");
  --tex-piedra: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0.5 0.5 0 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23p)'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  overflow-x: clip;
}
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-ink);
  background-color: var(--c-canvas);
  background-image:
    linear-gradient(135deg, transparent 30%, rgb(227 200 138 / 0.07) 44%, rgb(198 166 100 / 0.05) 52%, transparent 66%),
    radial-gradient(1100px 620px at 6% -10%, rgb(198 166 100 / 0.16), transparent 62%),
    radial-gradient(900px 560px at 100% 2%, rgb(138 154 91 / 0.10), transparent 58%),
    radial-gradient(820px 700px at 72% 108%, rgb(52 73 94 / 0.07), transparent 60%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-voz); line-height: 1.2; color: var(--c-ink); margin: 0 0 0.5em; }
p { margin: 0 0 1em; }
a { color: var(--pizarra); }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--pizarra); outline-offset: 2px; }
.contenedor { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.barra-sitio {
  position: fixed; inset: 0 0 auto; z-index: 50;
  background: rgb(255 255 255 / 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-line);
  transition: background-color 0.45s ease, border-color 0.45s ease,
              color 0.45s ease, backdrop-filter 0.45s ease;
}
.barra-sitio::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--tex-veta); opacity: 0.5; mix-blend-mode: multiply;
}
.barra-sitio .contenedor {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  min-height: 60px;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-voz); font-weight: 700; font-size: 1.05rem; color: var(--c-ink); }
.logo svg { flex-shrink: 0; }
.nav-sitio { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.nav-sitio a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px;
  border-radius: var(--r-btn); text-decoration: none; font-size: 0.92rem; font-weight: 500;
  color: var(--c-ink-2);
}
.nav-sitio a:hover { background: var(--c-surface-2); color: var(--c-ink); }
.nav-sitio .nav-entrar {
  border: 1px solid rgb(var(--pizarra-rgb) / 0.35);
  border-radius: 999px;
  color: var(--pizarra);
  font-weight: 600;
}
.nav-sitio .nav-entrar:hover { background: rgb(var(--pizarra-rgb) / 0.08); color: var(--pizarra); }
.nav-sitio a[aria-current='page'] { background: rgb(var(--pizarra-rgb) / 0.08); color: var(--pizarra); font-weight: 600; }
.hero-focal {
  position: relative; overflow: hidden;
  color: #fff;
  --fondo-presencia: .34;
  background: linear-gradient(135deg, var(--c-focal-1) 0%, var(--c-focal-2) 46%, var(--c-focal-3) 100%);
  box-shadow: var(--sh-2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100svh;
  min-height: 100dvh;
  border-radius: 0;
  padding: clamp(var(--e5), 9vh, var(--e6)) 0 clamp(var(--e4), 6vh, var(--e5));
}
.hero-focal::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--tex-piedra); opacity: 0.22; mix-blend-mode: overlay;
}
.hero-focal::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
}
.hero-focal > * { position: relative; z-index: 2; }
.hero-rotulo {
  font-size: 11px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  color: rgb(227 200 138 / 0.8); margin: 0 0 10px;
}
.hero-titulo { font-size: clamp(1.8rem, 4.5vw, 2.9rem); font-weight: 700; color: #fff; letter-spacing: -0.015em; max-width: 21ch; }
.hero-bajada { font-size: clamp(1rem, 2vw, 1.15rem); color: rgb(231 236 239 / 0.75); max-width: 52ch; }
.trazo { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: var(--r-hero); overflow: hidden; }
.trazo svg { position: absolute; inset: 0; width: 100%; height: 100%;
  filter: drop-shadow(0 0 7px rgb(227 200 138 / 0.85)) drop-shadow(0 0 16px rgb(227 200 138 / 0.4)); }
.trazo rect { fill: none; x: 2.5px; y: 2.5px; width: calc(100% - 5px); height: calc(100% - 5px); rx: 17.5px; }
.t-halo  { stroke: rgb(227 200 138 / 0.16); stroke-width: 5; stroke-dasharray: 100 100; animation: draw 8s linear 1 forwards; }
.t-linea { stroke: rgb(227 200 138 / 0.62); stroke-width: 1.5; stroke-dasharray: 100 100; animation: draw 8s linear 1 forwards; }
.t-punta { stroke: rgb(245 232 205 / 0.9); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1.2 98.8;
  animation: travel 8s linear 1 both, fadeTail 8s linear 1 forwards; }
@keyframes draw   { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes travel { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@keyframes fadeTail { 0%, 92% { opacity: 1; } 100% { opacity: 0; } }
.btn-destello {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border: 0; border-radius: var(--r-btn);
  font-family: var(--font-ui); font-size: 1.02rem; font-weight: 650;
  color: var(--pizarra-ink); text-decoration: none; cursor: pointer;
  background: linear-gradient(140deg, var(--ocre-luz) 0%, var(--ocre) 60%);
  box-shadow: 0 10px 26px -12px rgb(198 166 100 / 0.7);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease;
}
.btn-destello::after {
  content: ''; position: absolute; inset: -3px; z-index: -1;
  border-radius: calc(var(--r-btn) + 3px);
  background: radial-gradient(closest-side, rgb(198 166 100 / 0.85), transparent 72%);
  opacity: 0;
  animation: halo 8s linear 1, diastole 9s ease-in-out 8s infinite;
}
.btn-destello:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgb(198 166 100 / 0.85); }
.btn-destello:hover::after { animation: halo 1.6s linear 1; }
@keyframes halo { 0%, 58% { opacity: 0; } 86% { opacity: 0.32; } 100% { opacity: 0; } }
@keyframes diastole { 0%, 100% { opacity: 0; } 50% { opacity: 0.05; } }
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: 24px;
  box-shadow: inset 0 1px 0 rgb(227 200 138 / 0.5), var(--sh-1);
}
a.card { display: block; text-decoration: none; color: inherit; transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease; }
a.card:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgb(227 200 138 / 0.5), var(--sh-2); }
.card h3 { font-size: 1.15rem; margin-bottom: 6px; }
.card .icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-btn);
  margin-bottom: 14px; color: var(--pizarra);
  background: rgb(var(--pizarra-rgb) / 0.08);
}
.card .icono.ocre   { color: var(--ocre-tierra); background: rgb(var(--ocre-rgb) / 0.14); }
.card .icono.salvia { color: var(--salvia); background: rgb(var(--salvia-rgb) / 0.14); }
.hoja {
  background: #FCFAF5;
  border: 1.5px dashed rgb(122 116 105 / 0.55);
  border-radius: var(--r-card);
  padding: 28px;
}
.seccion { position: relative; padding-block: clamp(var(--e5), 9vw, var(--e7)); }
.seccion + .seccion:not(.a-sangre) { padding-top: 0; }
.rotulo {
  font-size: 11px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--c-ink-3); margin: 0 0 8px;
}
.seccion h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.seccion .intro { color: var(--c-ink-2); max-width: 58ch; }
.grid-2 { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-2, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.lista-digna { list-style: none; padding: 0; margin: 0; }
.lista-digna li { position: relative; padding-left: 26px; margin-bottom: 10px; }
.lista-digna li::before {
  content: ''; position: absolute; left: 2px; top: 0.5em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--salvia);
}
.lista-digna.no li::before { background: var(--c-ink-3); }
.cifra-clara {
  font-family: var(--font-voz); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: clamp(1.9rem, 5vw, 2.6rem); color: var(--pizarra);
}
.calc { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .calc { grid-template-columns: 1fr 1fr; align-items: start; } }
.calc label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 6px; }
.calc .valor { color: var(--pizarra); font-variant-numeric: tabular-nums; }
.calc input[type='range'] { width: 100%; accent-color: var(--pizarra); min-height: var(--tap); }
.calc-resultado { text-align: center; }
.calc-resultado .unidad { color: var(--c-ink-2); font-size: 0.95rem; }
.calc details { margin-top: 16px; font-size: 0.92rem; color: var(--c-ink-2); }
.calc summary { cursor: pointer; font-weight: 600; color: var(--pizarra); min-height: var(--tap); display: flex; align-items: center; }
.calc code { font-family: ui-monospace, Menlo, monospace; background: var(--c-surface-2); padding: 2px 6px; border-radius: 6px; }
.pie-sitio { border-top: 1px solid var(--c-line); margin-top: 64px; padding: 32px 0 calc(32px + env(safe-area-inset-bottom)); color: var(--c-ink-2); font-size: 0.9rem; }
.pie-sitio a { color: var(--c-ink-2); }
.pie-sitio .contenedor { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .t-punta { opacity: 0; }
  .t-halo, .t-linea { stroke-dashoffset: 0; }
  html { scroll-behavior: auto; }
}
body[data-audiencia='consumer']    { --tinta: var(--ocre-tierra); --tinta-rgb: 138 111 69; }
body[data-audiencia='familia']     { --tinta: var(--salvia);      --tinta-rgb: 138 154 91; }
body[data-audiencia='residencia']  { --tinta: var(--ocre-tierra); --tinta-rgb: 138 111 69; }
body[data-audiencia='profesional'] { --tinta: #54707E;            --tinta-rgb: 84 112 126; }
body[data-audiencia] .hero-rotulo  { color: rgb(227 200 138 / 0.85); }
body[data-audiencia] .rotulo       { color: rgb(var(--tinta-rgb) / 0.9); }
body[data-audiencia] .card .icono  { color: var(--tinta); background: rgb(var(--tinta-rgb) / 0.12); }
body[data-audiencia] .lista-digna li::before { background: var(--tinta); }
body[data-audiencia='familia'] .hero-focal::after {
  background:
    radial-gradient(280px 180px at 88% -4%, rgb(138 154 91 / 0.35), transparent 66%),
    radial-gradient(240px 190px at 2% 106%, rgb(198 166 100 / 0.2), transparent 63%);
}
body[data-audiencia='profesional'] .hero-focal::after {
  background:
    radial-gradient(280px 180px at 88% -4%, rgb(84 112 126 / 0.5), transparent 66%),
    radial-gradient(240px 190px at 2% 106%, rgb(198 166 100 / 0.22), transparent 63%);
}
.seccion-num {
  position: absolute; top: 8px; right: 0; z-index: -1;
  font-family: var(--font-voz); font-weight: 700; line-height: 1;
  font-size: clamp(4rem, 12vw, 8rem);
  color: rgb(var(--pizarra-rgb) / 0.05);
  user-select: none; pointer-events: none;
}
.fila { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 860px) {
  .fila { grid-template-columns: 1.1fr 0.9fr; }
  .fila.invertida > :first-child { order: 2; }
  .fila.invertida > :last-child { order: 1; }
}
.vineta {
  border-radius: var(--r-card); border: 1px solid var(--c-line);
  background: var(--c-surface); padding: 18px;
  box-shadow: inset 0 1px 0 rgb(227 200 138 / 0.5), var(--sh-1);
}
.vineta figcaption { font-size: 0.8rem; color: var(--c-ink-3); margin-top: 10px; }
.vineta .mini-fila,
.marco-ventana .mini-fila { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.vineta .mini-fila:last-of-type,
.marco-ventana .mini-fila:last-of-type { margin-bottom: 0; }
.vineta .punto-sem,
.marco-ventana .punto-sem { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.vineta .barra-mini,
.marco-ventana .barra-mini { height: 8px; border-radius: var(--r-pill); background: var(--c-surface-2); flex: 1; overflow: hidden; }
.vineta .barra-mini i,
.marco-ventana .barra-mini i { display: block; height: 100%; border-radius: var(--r-pill); }
.vineta .etiqueta-mini,
.marco-ventana .etiqueta-mini { font-size: 0.8rem; color: var(--c-ink-2); width: 84px; flex-shrink: 0; }
.vineta-nota { position: relative; background: #FCFAF5; border: 1px solid var(--c-line); border-radius: var(--r-card); padding: 18px; box-shadow: var(--sh-1); }
.vineta-nota .linea { height: 8px; border-radius: var(--r-pill); background: rgb(52 73 94 / 0.14); margin-top: 10px; }
.vineta-nota .linea.llena { background: rgb(138 154 91 / 0.45); }
.vineta-nota .linea.corta { width: 62%; }
@keyframes entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero-focal > * { animation: entra 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero-focal > :nth-child(1) { animation-delay: 0.05s; }
.hero-focal > :nth-child(2) { animation-delay: 0.15s; }
.hero-focal > :nth-child(3) { animation-delay: 0.28s; }
.hero-focal > :nth-child(4) { animation-delay: 0.4s; }
.hero-focal > :nth-child(5) { animation-delay: 0.5s; }
@media (max-width: 560px) {
  .nav-sitio { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nav-sitio::-webkit-scrollbar { display: none; }
  .nav-sitio a { white-space: nowrap; }
}
#motas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
main, .pie-sitio { position: relative; z-index: 1; }
.lumbre {
  position: fixed;
  top: 0; left: 0;
  width: 180px; height: 180px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 60;
  opacity: 0;
  mix-blend-mode: soft-light;
  filter: blur(14px);
  background: radial-gradient(closest-side, rgb(227 200 138 / 0.55), transparent 72%);
  transition: opacity 0.5s ease;
  will-change: transform;
}
.lumbre.encendida { opacity: 1; }
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
[data-reveal].visible { opacity: 1; transform: none; }
.resina-viva {
  position: relative;
  background: rgb(255 255 255 / 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid transparent;
  border-radius: var(--r-card);
  background-clip: padding-box;
  box-shadow: inset 0 1px 0 rgb(227 200 138 / 0.6), var(--sh-1);
}
.resina-viva::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    115deg,
    rgb(198 166 100 / 0.15) 0%,
    rgb(227 200 138 / 0.85) 35%,
    rgb(138 154 91 / 0.5) 55%,
    rgb(198 166 100 / 0.15) 100%
  );
  background-size: 260% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: resina 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes resina {
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}
.hero-titulo .palabra {
  display: inline-block;
  opacity: 0.12;
  transform: translateY(16px);
  animation: palabra-entra 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(0.06s + min(var(--w, 0) * 26ms, 240ms));
}
@keyframes palabra-entra { to { opacity: 1; transform: none; } }
.palabra-encendida {
  font-style: italic;
  background: linear-gradient(135deg, #FFFFFF 10%, var(--ocre-luz) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pista-germina { position: relative; height: 132vh; --crecido: 0; }
.escena-germina { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; }
.escena-germina .hero-marco { width: 100%; margin: 0; }
.semilla-escena {
  position: absolute;
  left: var(--siembra-x); top: var(--siembra-y);
  transform: translate(-50%, -50%);
  width: clamp(128px, 15vw, 196px);
  z-index: 4;
  pointer-events: none;
  opacity: 0.95;
  --halo: calc(4px + 16px * var(--crecido));
  filter:
    drop-shadow(0 0 8px rgb(16 22 28 / .92))
    drop-shadow(0 0 var(--halo) rgb(178 198 122 / calc(.3 + .6 * var(--crecido))))
    drop-shadow(0 0 var(--halo) rgb(227 200 138 / calc(.12 + .4 * var(--crecido))));
}
#germina-tallo { stroke-width: 4.4; stroke: #A8BC6E; }
#germina-hoja { transform-origin: 62% 78%; opacity: 0; }
.hero-focal.germinada .btn-destello {
  box-shadow: 0 16px 40px -10px rgb(198 166 100 / 0.95);
}
.barra-progreso {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  z-index: 50;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--salvia), var(--ocre), var(--ocre-luz));
}
.hero-titulo { font-size: clamp(2rem, 5.2vw, 3.4rem); letter-spacing: -0.02em; }
.hero-rotulo, .rotulo { letter-spacing: 0.3em; }
.seccion-num { color: rgb(var(--pizarra-rgb) / 0.07); }
@media (prefers-reduced-motion: reduce) {
  .resina-viva::before { animation: none; }
  .hero-titulo .palabra { opacity: 1; transform: none; animation: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .pista-germina { height: auto; }
  .escena-germina { position: static; min-height: 0; }
  .barra-progreso { display: none; }
}
:root {
  --aire: clamp(20px, 5vw, 64px);
  --marco: min(1180px, 100vw - var(--aire) * 2);
  --canal: clamp(16px, 2vw, 28px);
  --e1: 8px;  --e2: 16px; --e3: 24px; --e4: 40px;
  --e5: 64px; --e6: 96px; --e7: 144px;
}
.reticula {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--canal);
  width: var(--marco);
  margin-inline: auto;
}
.reticula > *,
.col-ancha { grid-column: 1 / -1; }
.seccion > p,
.seccion > .intro,
.seccion > ul:not(.rejilla),
.seccion > ol:not(.rejilla),
.seccion > .camino,
.col-texto > h2 + p,
.hoja > p,
.hoja > ul {
  max-width: 64ch;
}
main.contenedor { width: auto; max-width: none; padding: 0; }
main > .reticula > * { min-width: 0; }
.a-sangre {
  grid-column: 1 / -1;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.a-sangre > .interior {
  width: var(--marco);
  margin-inline: auto;
}
.hero-marco {
  position: relative;
  isolation: isolate;
  width: 100%;
  margin-block: 0 clamp(var(--e5), 8vw, var(--e7));
  --siembra-x: 86%; --siembra-y: 56%;
}
.hero-focal > * {
  width: var(--marco);
  margin-inline: auto;
}
.hero-focal::after {
  background:
    radial-gradient(320px 220px at 88% -6%, rgb(198 166 100 / 0.42), transparent 66%),
    radial-gradient(280px 220px at 2% 106%, rgb(138 154 91 / 0.22), transparent 63%),
    linear-gradient(105deg, rgb(26 37 47 / 0.55) 0%, rgb(26 37 47 / 0.12) 52%, transparent 78%);
}
.hero-cabeza > :last-child { margin-bottom: 0; }
.hero-pie {
  display: flex; flex-wrap: wrap; align-items: end;
  justify-content: space-between;
  gap: var(--e4) var(--e5);
}
.hero-pie .hero-bajada { flex: 1 1 340px; max-width: 46ch; margin: 0; }
.hero-accion { flex: 0 0 auto; display: flex; flex-direction: column; align-items: start; gap: var(--e3); }
.hero-titulo {
  font-size: clamp(2.6rem, 7.2vw, 5.4rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
  text-wrap: balance;
  max-width: 15ch;
}
.hero-bajada {
  text-wrap: pretty;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  max-width: 46ch;
  color: rgb(231 236 239 / 0.72);
  margin-top: var(--e3);
}
.hero-rotulo {
  display: flex; align-items: center; gap: 14px;
  font-size: clamp(11px, 0.85vw, 13px); letter-spacing: 0.34em;
}
.hero-rotulo::before {
  content: ''; width: 24px; height: 1px; flex: none;
  background: currentColor; opacity: 0.7;
}
.descenso { display: flex; align-items: center; gap: 12px; color: rgb(231 236 239 / 0.5); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }
.descenso i { display: block; width: 1px; height: 42px; background: rgb(231 236 239 / 0.25); position: relative; overflow: hidden; }
.descenso i::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent, var(--ocre-luz), transparent);
  animation: gotea 2.6s ease-in-out infinite;
}
@keyframes gotea { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
.hero-marco .trazo { border-radius: 0; }
.hero-marco .trazo rect { rx: 0; }
@media (prefers-reduced-motion: reduce) {
  .descenso i::after { animation: none; opacity: 0.4; }
}
.puertas { display: grid; gap: var(--e2); grid-template-columns: 1fr; }
@media (min-width: 700px)  { .puertas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .puertas { grid-template-columns: repeat(4, 1fr); } }
.puerta {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 372px;
  padding: var(--e4) var(--e3) var(--e3);
  border: 1px solid var(--c-line);
  border-top: 0;
  border-radius: 0 0 var(--r-card) var(--r-card);
  background: var(--c-surface);
  box-shadow: var(--sh-1);
  text-decoration: none; color: inherit;
  transition: transform .45s cubic-bezier(.22,1,.36,1),
              opacity .45s ease, filter .45s ease, box-shadow .45s ease;
}
.puertas:hover .puerta,
.puertas:focus-within .puerta { opacity: .5; filter: blur(3px); transform: scale(.98); }
.puerta h3 { font-size: 1.2rem; margin: var(--e2) 0 var(--e1); }
.puerta p { color: var(--c-ink-2); font-size: .95rem; flex: 1; }
.puerta .dato {
  margin-top: var(--e2); padding-top: var(--e2);
  border-top: 1px solid var(--c-line);
  font-family: var(--font-voz); font-size: 1.55rem; font-weight: 700;
  color: var(--tinta-puerta, var(--pizarra)); font-variant-numeric: tabular-nums;
}
.puerta .dato small { display: block; font-family: var(--font-ui); font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-3); }
.cinta,
.interior-casa {
  background: linear-gradient(135deg, var(--c-focal-1) 0%, var(--c-focal-2) 46%, var(--c-focal-3) 100%);
  color: #fff;
  --c-ink-2: rgb(231 236 239 / .76);
  --c-ink-3: rgb(227 200 138 / .85);
  padding-block: clamp(var(--e5), 8vw, var(--e6));
  position: relative; overflow: hidden;
}
.cinta::before,
.interior-casa::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--tex-piedra); opacity: .2; mix-blend-mode: overlay;
}
.cinta::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 280px at 88% -10%, rgb(198 166 100 / .3), transparent 68%);
}
.cinta > .interior,
.interior-casa > .interior { position: relative; z-index: 2; }
.cinta h2,
.interior-casa h2 { color: #fff; }
.cinta p, .cinta li,
.interior-casa > .interior > p { color: rgb(231 236 239 / .76); }
.cinta .lista-digna li::before { background: var(--ocre-luz); }
.escena-arcos { position: relative; min-height: 240vh; }
@media (max-width: 760px) { .escena-arcos { min-height: 200vh; } }
@media (prefers-reduced-motion: reduce) { .escena-arcos { min-height: 0; } }
.escena-arcos .pegado {
  position: sticky; top: 0;
  min-height: 100svh;
  display: grid; align-content: center; gap: var(--e3);
  padding-block: var(--e5);
  transition: background-color .9s ease;
}
.arco-fila {
  display: grid; grid-template-columns: auto 1fr; gap: var(--e3);
  align-items: baseline;
  padding: var(--e2) 0;
  border-top: 1px solid var(--c-line);
  opacity: .32; filter: saturate(.4);
  transition: opacity .6s ease, filter .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.arco-fila.activo { opacity: 1; filter: none; transform: translateX(6px); }
.arco-num {
  font-family: var(--font-voz); font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--tinta-arco, var(--c-ink-3)); font-variant-numeric: tabular-nums; line-height: 1;
}
.arco-nombre { font-family: var(--font-voz); font-size: clamp(1.3rem, 3.2vw, 2.1rem); line-height: 1.15; }
.arco-que { color: var(--c-ink-2); font-size: .98rem; margin-top: 4px; max-width: 52ch; }
.arco-fila[data-arco="1"] { --tinta-arco: var(--salvia); }
.arco-fila[data-arco="2"] { --tinta-arco: #7F8C8D; }
.arco-fila[data-arco="3"] { --tinta-arco: var(--ocre-tierra); }
.arco-fila[data-arco="4"] { --tinta-arco: var(--pizarra-ink); }
.arco-fila[data-arco="5"] { --tinta-arco: var(--ocre); }
.momento { text-align: center; }
.momento .cifra-gigante {
  font-family: var(--font-voz); font-weight: 700; line-height: .9;
  font-size: clamp(3.4rem, 12vw, 8rem); letter-spacing: -.04em;
  background: linear-gradient(160deg, #fff 20%, var(--ocre-luz) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.momento .frase { font-family: var(--font-voz); font-size: clamp(1.2rem, 2.6vw, 1.9rem); max-width: 26ch; margin: var(--e3) auto 0; color: #fff; }
.calc { grid-template-columns: 1fr; gap: var(--e4); }
@media (min-width: 900px) { .calc { grid-template-columns: 0.85fr 1.15fr; } }
.calc-resultado {
  background: linear-gradient(135deg, var(--c-focal-1), var(--c-focal-3));
  color: #fff; border: 0; border-radius: var(--r-card);
  padding: var(--e4) var(--e3);
}
.calc-resultado .rotulo { color: rgb(227 200 138 / .85); }
.calc-resultado .cifra-clara {
  font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: .95;
  background: linear-gradient(160deg, #fff 20%, var(--ocre-luz) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.calc-resultado .unidad { color: rgb(231 236 239 / .68); }
@media (min-width: 800px) {
}
@media (min-width: 800px) { .espejo .limite { display: block; } }
.pie-sitio {
  margin-top: clamp(var(--e6), 10vw, var(--e7));
  padding-block: clamp(var(--e5), 7vw, var(--e6)) calc(var(--e4) + env(safe-area-inset-bottom));
  background: linear-gradient(135deg, var(--c-focal-1), var(--c-focal-2));
  color: rgb(231 236 239 / .68); border-top: 0;
}
.pie-sitio a { color: rgb(231 236 239 / .82); }
.pie-sitio a:hover { color: var(--ocre-luz); }
@media (min-width: 760px) { .pie-rejilla { grid-template-columns: 1.4fr 1fr 1fr; } }
.pie-sitio .marca { font-family: var(--font-voz); color: #fff; font-size: 1.15rem; }
.pie-sitio nav { display: grid; gap: 6px; }
@media (prefers-reduced-motion: reduce) {
  .puertas:hover .puerta { opacity: 1; filter: none; transform: none; }
  .arco-fila { transition: none; }
  .escena-arcos .pegado { position: static; min-height: 0; }
  .arco-fila { opacity: 1; filter: none; }
}
:root {
  --sh-1: -6px 10px 24px rgb(26 37 47 / 0.07);
  --sh-2: -10px 22px 50px -30px rgb(26 37 47 / 0.45);
}
.card, .puerta, .vineta, .resina-viva, .marco {
  border-top-color: rgb(255 255 255 / 0.9);
  border-bottom-color: rgb(52 73 94 / 0.14);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.025;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
}
.lumbre, .semilla-escena { will-change: transform; }
.puerta:hover { will-change: transform, opacity, filter; }
.seccion h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
  max-width: 20ch;
}
.seccion .intro { font-size: clamp(1.02rem, 1.4vw, 1.15rem); }
.momento h2, .cinta h2 { max-width: 24ch; }
.seccion-num { font-size: clamp(5rem, 14vw, 10rem); top: -8px; }
:root { --barra-h: 60px; }
html {
  scroll-padding-top: calc(var(--barra-h) + 16px);
}
main.sin-hero { padding-top: calc(var(--barra-h) + var(--e4)); }
.barra-sitio.sobre-escena {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.barra-sitio.sobre-escena::before { opacity: 0; }
.barra-sitio.sobre-escena .logo { color: #fff; }
.barra-sitio.sobre-escena .nav-sitio a { color: rgb(231 236 239 / 0.82); }
.barra-sitio.sobre-escena .nav-sitio a:hover { background: rgb(255 255 255 / 0.12); color: #fff; }
.barra-sitio.sobre-escena .nav-sitio a[aria-current='page'] {
  background: rgb(255 255 255 / 0.14); color: #fff;
}
.barra-sitio.sobre-escena .logo svg rect { fill: rgb(255 255 255 / 0.16); }
.hero-focal > .terreno {
  position: absolute;
  inset: 0;
  width: auto;
  margin: 0;
  z-index: auto;
  animation: none;
  pointer-events: none;
  overflow: hidden;
}
.terreno > * {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.hero-focal > .hero-cabeza { animation-delay: 0.05s; }
.hero-focal > .hero-pie    { animation-delay: 0.18s; }
.t-ceniza {
  z-index: 3;
  background:
    radial-gradient(115% 88% at 50% 32%,
      rgb(26 37 47 / 0.30) 0%,
      rgb(26 37 47 / 0.70) 44%,
      rgb(26 37 47 / 0.90) 78%);
  animation: ceniza 2.4s cubic-bezier(0.65, 0, 0.35, 1) both;
}
@keyframes ceniza {
  0%   { opacity: 1;   transform: scale(1.05); }
  38%  { opacity: 0.84; }
  52%  { opacity: 0.92; }
  100% { opacity: 0;   transform: scale(1); }
}
.t-maleza {
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(68deg,  transparent 0 9px, rgb(138 111 69 / 0.55) 9px 10px),
    repeating-linear-gradient(-24deg, transparent 0 14px, rgb(52 73 94 / 0.40) 14px 15px);
  animation: maleza 3.2s cubic-bezier(0.4, 0, 0.2, 1) 3.1s both,
             hierbita 11s ease-in-out 6.8s infinite;
}
@keyframes maleza {
  0%   { opacity: 0.5;  transform: scale(1.04); }
  40%  { opacity: 0.34; }
  56%  { opacity: 0.36; }
  100% { opacity: 0.14; transform: scale(1); }
}
@keyframes hierbita {
  0%, 100% { opacity: 0.14; }
  50%      { opacity: 0.19; }
}
.t-lectura {
  opacity: 0;
  background-image:
    repeating-linear-gradient(0deg,  transparent 0 63px, rgb(231 236 239 / 0.5) 63px 64px),
    repeating-linear-gradient(90deg, transparent 0 63px, rgb(231 236 239 / 0.5) 63px 64px);
  animation: lectura 2.6s ease-out 2.9s both;
}
@keyframes lectura {
  0%   { opacity: 0;    transform: scale(1.015); }
  45%  { opacity: 0.18; }
  100% { opacity: 0.06; transform: scale(1); }
}
.t-lectura::after {
  content: '';
  position: absolute;
  inset: -20% 0 auto 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, rgb(227 200 138 / 0.22), transparent);
  transform: translateY(-140%);
  animation: clima 2.8s cubic-bezier(0.45, 0, 0.3, 1) 3.2s both;
}
@keyframes clima {
  0%   { transform: translateY(-140%); opacity: 0; }
  22%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { transform: translateY(320%);  opacity: 0; }
}
.t-savia {
  opacity: 0;
  transform-origin: var(--siembra-x) var(--siembra-y);
  background:
    radial-gradient(46% 52% at var(--siembra-x) var(--siembra-y), rgb(198 166 100 / 0.30), transparent 72%),
    radial-gradient(30% 34% at var(--siembra-x) var(--siembra-y), rgb(227 200 138 / 0.22), transparent 66%);
  animation:
    siembra 2.2s cubic-bezier(0.16, 1.05, 0.3, 1) 4.6s both,
    diastole-savia 7.2s ease-in-out 6.8s infinite;
}
@keyframes siembra {
  0%   { opacity: 0; transform: scale(0.4); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes diastole-savia {
  0%, 100% { opacity: 0.82; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.035); }
}
.hero-titulo .palabra-encendida {
  color: rgb(231 236 239);
  animation:
    palabra-entra 0.45s cubic-bezier(0.22, 1, 0.36, 1) calc(0.06s + min(var(--w, 0) * 26ms, 240ms)) forwards,
    enciende 1.4s ease-out 4.7s both;
}
@keyframes enciende {
  from { color: rgb(231 236 239); }
  to   { color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .t-ceniza  { animation: none; opacity: 0; }
  .t-maleza  { animation: none; opacity: 0.14; }
  .t-lectura { animation: none; opacity: 0.06; }
  .t-lectura::after { animation: none; opacity: 0; }
  .t-savia   { animation: none; opacity: 1; transform: none; }
  .hero-titulo .palabra-encendida { animation: none; color: transparent; }
  .barra-sitio { transition: none; }
}
@media (max-width: 760px) {
  .t-maleza { background-size: 70% 70%; }
  .t-lectura {
    background-image:
      repeating-linear-gradient(0deg,  transparent 0 47px, rgb(231 236 239 / 0.5) 47px 48px),
      repeating-linear-gradient(90deg, transparent 0 47px, rgb(231 236 239 / 0.5) 47px 48px);
  }
}
.hero-focal :focus-visible,
.barra-sitio.sobre-escena :focus-visible,
.pie-sitio :focus-visible {
  outline: 2px solid var(--ocre-luz);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgb(26 37 47 / 0.7);
  border-radius: 4px;
}
.descenso i::after { animation: gotea 2.6s ease-in-out 6; }
.descenso { animation: se-retira 0.8s ease 17s both; }
@keyframes se-retira { to { opacity: 0; } }
@media (max-width: 760px) {
  .hero-pie { gap: var(--e3); }
  .hero-accion { width: 100%; }
  .hero-accion .btn-destello { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .descenso, .descenso i::after { animation: none; }
}
.cierre {
  background: linear-gradient(135deg, var(--c-focal-1) 0%, var(--c-focal-2) 46%, var(--c-focal-3) 100%);
  color: #fff;
  --c-ink-2: rgb(231 236 239 / .76);
  --c-ink-3: rgb(227 200 138 / .85);
  padding-block: clamp(var(--e5), 9vw, var(--e7));
  position: relative; overflow: hidden;
}
.cierre::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--tex-piedra); opacity: .2; mix-blend-mode: overlay;
}
.definicion > .interior, .cierre > .interior { position: relative; z-index: 2; }
.cierre h2 { color: #fff; }
.frase-madre {
  font-size: clamp(1.7rem, 4.1vw, 3.2rem);
  line-height: 1.14;
  letter-spacing: -0.022em;
  max-width: 22ch;
  text-wrap: balance;
  margin-bottom: var(--e4);
}
.frase-madre em {
  font-style: italic;
  background: linear-gradient(135deg, #FFFFFF 10%, var(--ocre-luz) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pie-definicion {
  max-width: 52ch;
  color: rgb(231 236 239 / .72);
  border-top: 1px solid rgb(255 255 255 / .14);
  padding-top: var(--e3);
  margin: 0;
}
.pasos {
  list-style: none; margin: var(--e4) 0 0; padding: 0;
  display: grid; gap: var(--e4);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.pasos { position: relative; }
.pasos::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg,
    var(--c-ink) 0%, rgb(var(--pizarra-rgb) / .45) 52%, rgb(var(--pizarra-rgb) / .12) 100%);
}
.pasos li { position: relative; padding-top: var(--e3); }
.pasos li::before {
  content: '';
  position: absolute; left: 0; top: -4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ocre-tierra);
  box-shadow: 0 0 0 4px var(--c-bg);
}
.paso-num {
  display: block;
  font-family: var(--font-voz); font-size: 1.9rem; font-weight: 700;
  line-height: 1; color: var(--ocre-tierra);
  letter-spacing: -.01em; margin: 0 0 10px;
  font-variant-numeric: tabular-nums;
}
.pasos h3 { font-size: 1.12rem; margin: 0 0 4px; }
.pasos p { color: var(--c-ink-2); margin: 0; max-width: 34ch; }
.pares { margin: var(--e4) 0 0; }
.pares > div {
  display: grid; gap: 6px var(--e4);
  grid-template-columns: 1fr;
  padding: var(--e2) 0;
  border-top: 1px solid var(--c-line);
}
.pares > div:last-child { border-bottom: 1px solid var(--c-line); }
.pares dt {
  font-family: var(--font-voz); font-weight: 700;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  color: var(--c-ink);
}
.pares dd { margin: 0; color: var(--c-ink-2); max-width: 58ch; }
@media (min-width: 860px) {
  .pares > div { grid-template-columns: minmax(240px, 0.9fr) 1.4fr; align-items: baseline; }
}
.acordeon { margin-top: var(--e4); border-top: 1px solid var(--c-line); }
.acordeon details { border-bottom: 1px solid var(--c-line); }
.acordeon summary {
  display: flex; align-items: center; gap: 14px;
  padding: var(--e3) 0; cursor: pointer;
  font-family: var(--font-voz); font-weight: 700;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  list-style: none;
  min-height: var(--tap);
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after {
  content: ''; flex: none; margin-left: auto;
  width: 12px; height: 12px;
  border-right: 2px solid var(--ocre-tierra);
  border-bottom: 2px solid var(--ocre-tierra);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.acordeon details[open] summary::after { transform: rotate(-135deg) translate(-4px, -4px); }
.acordeon details p { margin: 0 0 var(--e3); color: var(--c-ink-2); max-width: 62ch; }
.cierre > .interior { text-align: center; }
.frase-cierre {
  font-family: var(--font-voz); font-style: italic;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  line-height: 1.16; max-width: 20ch;
  margin-inline: auto;
  text-wrap: balance;
}
.cierre p { color: rgb(231 236 239 / .74); margin-bottom: var(--e4); }
@media (max-width: 760px) {
  .hero-marco { --siembra-x: 78%; --siembra-y: 52%; }
}
@media (max-width: 720px) {
  .logo span, .logo { font-size: 0; gap: 0; }
  .logo svg { font-size: 1rem; }
  .nav-sitio {
    margin-left: auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-width: calc(100% - 44px);
    scroll-snap-type: x proximity;
  }
  .nav-sitio::-webkit-scrollbar { display: none; }
  .nav-sitio a {
    flex: none;
    padding: 0 10px;
    font-size: 0.86rem;
    scroll-snap-align: start;
  }
}
.jardin-etapas {
  position: relative;
  padding: var(--e4) var(--e4) var(--e3);
  border-radius: var(--r-card, 14px);
  background:
    linear-gradient(180deg,
      rgb(44 62 80 / 0.09) 0%,
      rgb(44 62 80 / 0.05) 38%,
      rgb(227 200 138 / 0.10) 78%,
      rgb(227 200 138 / 0.16) 100%);
}
.jardin-etapas::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image:
    repeating-linear-gradient(68deg,  transparent 0 9px, rgb(95 107 74 / 0.5) 9px 10px),
    repeating-linear-gradient(-24deg, transparent 0 14px, rgb(52 73 94 / 0.4) 14px 15px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0.18) 82%, rgb(0 0 0 / 0.12) 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0.18) 82%, rgb(0 0 0 / 0.12) 100%);
  opacity: 0.16;
}
.jardin-etapas > * { position: relative; z-index: 1; }
.etapas-pregunta {
  font-family: var(--font-voz);
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  color: #4A5556;
  margin: 0 0 var(--e3);
}
.etapas {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  counter-reset: etapa;
}
.etapas::before {
  content: '';
  position: absolute;
  left: 27px; top: 8px; bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg,
    #7F8C8D 0%, #8A6F45 26%, #8A9A5B 52%, #C6A664 78%, #E3C88A 100%);
  opacity: 0.55;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .etapas::before {
      transform-origin: top center;
      animation: sendero-crece linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 55%;
    }
    @keyframes sendero-crece {
      from { transform: scaleY(0); }
      to   { transform: scaleY(1); }
    }
  }
}
.etapas li {
  counter-increment: etapa;
  position: relative;
  display: grid;
  grid-template-columns: calc(46px + var(--peso, 1) * 5px) 1fr;
  column-gap: clamp(16px, 1.6vw, 26px);
  align-items: start;
  padding: calc(var(--e3) + var(--peso, 1) * 5px) var(--e3)
           calc(var(--e3) + var(--peso, 1) * 5px) 0;
  border-radius: 12px;
  transition: background-color 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.etapas li:nth-child(1) { --peso: 1; --tinta-etapa: #7F8C8D; --tinta-texto: #55605F; }
.etapas li:nth-child(2) { --peso: 2; --tinta-etapa: #8A6F45; --tinta-texto: #6B5433; }
.etapas li:nth-child(3) { --peso: 3; --tinta-etapa: #8A9A5B; --tinta-texto: #5C6A38; }
.etapas li:nth-child(4) { --peso: 4; --tinta-etapa: #C6A664; --tinta-texto: #7A6127; }
.etapas li:nth-child(5) { --peso: 5; --tinta-etapa: #E3C88A; --tinta-texto: #7E6526; }
.glifo {
  grid-row: 1 / span 3;
  display: block;
  width: calc(46px + var(--peso, 1) * 5px);
  border-radius: 10px;
  overflow: hidden;
  background: rgb(247 247 247 / 0.55);
  box-shadow: var(--sh-1);
}
.glifo-jardin { display: block; width: 100%; height: auto; }
.etapa-num {
  position: absolute;
  left: 18px;
  top: calc(var(--e3) + var(--peso, 1) * 5px + 2px);
  width: 20px; height: 20px;
  display: none;
}
.etapa-rotulo {
  grid-column: 2;
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-texto, var(--tinta-etapa));
}
.etapas .cita {
  grid-column: 2;
  font-family: var(--font-voz);
  font-style: italic;
  font-size: clamp(1.12rem, 0.95rem + 0.5vw, 1.42rem);
  line-height: 1.3;
  color: var(--c-ink);
  margin: 0 0 8px;
  max-width: 30ch;
  text-wrap: balance;
}
.etapas .etapa-que {
  grid-column: 2;
  margin: 0;
  color: var(--c-ink-2);
  font-size: 0.95rem;
  max-width: 52ch;
}
.etapas li:hover,
.etapas li:focus-visible {
  background: rgb(var(--tinta-rgb, 138 111 69) / 0.06);
  transform: translateX(4px);
  outline: none;
}
.etapas li:focus-visible {
  box-shadow: 0 0 0 2px var(--tinta-etapa), 0 0 0 5px rgb(255 255 255 / 0.9);
}
.etapas li:hover .glifo,
.etapas li:focus-visible .glifo { box-shadow: var(--sh-2); }
@media (max-width: 899px) {
  .tronco-escena > .corte { order: -1; }
}
@media (max-width: 620px) {
  .etapas li { grid-template-columns: calc(38px + var(--peso, 1) * 3px) 1fr; column-gap: 14px; }
  .glifo { width: calc(38px + var(--peso, 1) * 3px); }
  .etapas::before { left: 21px; }
  .jardin-etapas { padding: var(--e3); }
}
@media (prefers-reduced-motion: reduce) {
  .etapas li { transition: none; }
  .etapas li:hover, .etapas li:focus-visible { transform: none; }
}
.promesa-jardin {
  font-family: var(--font-voz); font-style: italic;
  font-size: clamp(1.32rem, 0.9rem + 1.5vw, 2.15rem);
  line-height: 1.28; max-width: 26ch;
  color: var(--c-ink);
  margin: var(--e4) 0 var(--e3);
  padding-left: var(--e3);
  border-left: 3px solid var(--ocre);
}
.nota-ejes {
  color: var(--c-ink-2); font-size: 0.82rem; max-width: 62ch; margin: 0;
}
.auxilio {
  background: #6E2A22;
  color: #fff;
  --c-ink-2: rgb(255 255 255 / .88);
  --c-ink-3: rgb(255 255 255 / .72);
  padding-block: clamp(var(--e4), 5vw, var(--e5));
}
.auxilio h2 { color: #fff; font-size: clamp(1.3rem, 2.6vw, 1.9rem); }
.auxilio p { color: rgb(255 255 255 / .88); max-width: 58ch; }
.lineas { display: flex; flex-wrap: wrap; gap: var(--e3); margin: var(--e3) 0 0; }
.linea {
  display: flex; flex-direction: column; gap: 2px;
  min-height: var(--tap);
  padding: 12px 22px;
  border-radius: var(--r-btn);
  background: rgb(255 255 255 / .12);
  border: 1px solid rgb(255 255 255 / .3);
  text-decoration: none; color: #fff;
}
.linea strong { font-family: var(--font-voz); font-size: 1.22rem; letter-spacing: .01em; }
.linea small { color: rgb(255 255 255 / .78); font-size: .8rem; }
.linea:hover { background: rgb(255 255 255 / .2); }
.auxilio :focus-visible {
  outline: 2px solid #fff; outline-offset: 3px;
  box-shadow: 0 0 0 5px rgb(110 42 34 / .8);
}
.recaida .pares { margin-top: var(--e4); }
.riesgos {
  display: grid; gap: var(--e4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: var(--e4) 0 var(--e3);
}
.riesgo { padding-top: var(--e3); border-top: 1px solid rgb(255 255 255 / .22); }
.riesgo-num {
  font-family: var(--font-voz); font-weight: 700; font-size: .95rem;
  color: var(--ocre-luz); letter-spacing: .08em; margin: 0 0 6px;
}
.riesgo h3 { color: #fff; font-size: 1.1rem; margin: 0 0 6px; }
.riesgo-que { color: rgb(231 236 239 / .7); margin: 0 0 10px; font-size: .95rem; }
.riesgo-haz {
  color: rgb(231 236 239 / .92); margin: 0; font-size: .95rem;
  border-left: 2px solid var(--ocre); padding-left: 12px;
}
.riesgo-haz strong { color: var(--ocre-luz); }
.fuente-nota {
  color: rgb(231 236 239 / .55); font-size: .82rem; margin: 0;
  border-top: 1px solid rgb(255 255 255 / .14); padding-top: var(--e2, 12px);
}
.internar .pares { margin-top: var(--e4); }
.internar .nota-ejes { margin-top: var(--e3); }
.internar .nota-ejes a { color: var(--ocre-tierra); font-weight: 600; }
.numerales {
  display: grid; gap: var(--e4);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin: var(--e4) 0 var(--e3);
}
.numeral { padding-top: var(--e3); border-top: 1px solid rgb(255 255 255 / .22); }
p.numeral-cifra {
  font-family: var(--font-voz); font-weight: 700;
  font-size: clamp(2.4rem, 4.4vw, 3.4rem);
  line-height: 1; margin: 0 0 8px;
  background: linear-gradient(135deg, #FFFFFF 10%, var(--ocre-luz) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.numeral h3 { color: #fff; font-size: 1.02rem; margin: 0 0 6px; font-weight: 600; }
.numeral p:not(.numeral-cifra) { color: rgb(231 236 239 / .72); margin: 0; font-size: .93rem; }
.promesa-honesta {
  font-family: var(--font-voz); font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: #fff; max-width: 30ch; margin: var(--e4) 0 0;
  padding-left: var(--e3);
  border-left: 3px solid var(--ocre-luz);
}
.equipo .pares, .cuadernos .pasos { margin-top: var(--e4); }
.definicion {
  background: transparent;
  padding-block: clamp(var(--e3), min(4vw, 4.4svh), var(--e5));
  position: relative;
}
.definicion .frase-madre { color: var(--c-ink); }
.definicion .frase-madre em {
  background: linear-gradient(135deg, var(--ocre-tierra) 10%, var(--ocre) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.definicion .frase-madre {
  max-width: 30ch;
  font-size: clamp(1.85rem, min(3.45vw, 4.75svh), 2.95rem);
  line-height: 1.08;
  letter-spacing: -0.026em;
  margin-bottom: var(--e3);
}
.definicion .pie-definicion {
  color: var(--c-ink-2);
  border-top-color: var(--c-line);
}
.cuenta-sesiones { margin: 0; }
.cuenta-sesiones figcaption {
  font-family: var(--font-voz); font-size: .74rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-ink-3);
  margin-bottom: 14px;
}
.tronco-escena { display: grid; gap: var(--e4); align-items: center; }
@media (min-width: 900px) {
  .tronco-escena {
    grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
    gap: clamp(var(--e4), 4vw, var(--e6));
  }
}
.corte { margin: 0; display: flex; justify-content: center; }
.tronco-dice > :first-child { margin-top: 0; }
.anillos {
  display: block; width: min(100%, 500px, 52svh); height: auto;
  filter: drop-shadow(-6px 8px 14px rgb(26 37 47 / .10));
}
.anillos-leyenda { list-style: none; margin: 0; padding: 0; max-width: 52rem; }
.anillos-leyenda li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 2px 10px;
  padding: 4px 0;
  border-top: 1px solid var(--c-line);
  font-size: .84rem; color: var(--c-ink-2);
}
.arco-titulo { color: var(--c-ink); font-weight: 600; }
.arco-para {
  grid-column: 2 / -1;
  font-size: .8rem; line-height: 1.4;
  color: var(--c-ink-2);
}
.anillos-leyenda li:last-child { border-bottom: 1px solid var(--c-line); }
.anillos-leyenda b {
  font-family: var(--font-voz); font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--tinta-arco) 42%, var(--c-ink));
}
.anillos-leyenda em {
  font-style: normal;
  font-family: var(--font-voz); font-variant-numeric: tabular-nums;
  color: var(--c-ink-3);
}
.anillos-leyenda em::after { content: ' anillos'; }
.anillos-leyenda li[data-arco="1"] { --tinta-arco: var(--salvia); }
.anillos-leyenda li[data-arco="2"] { --tinta-arco: #7F8C8D; }
.anillos-leyenda li[data-arco="3"] { --tinta-arco: var(--ocre-tierra); }
.anillos-leyenda li[data-arco="4"] { --tinta-arco: var(--pizarra-ink); }
.anillos-leyenda li[data-arco="5"] { --tinta-arco: var(--ocre); }
.corte-nota { color: var(--c-ink-2); font-size: .95rem; max-width: 64ch; margin: 0 0 var(--e2); }
.corte-nota em { font-style: italic; color: var(--c-ink-2); }
.definicion .rotulo { color: var(--c-ink-3); }
.puente {
  margin: var(--e4) 0 0;
  padding-top: var(--e3);
  border-top: 1px solid var(--c-line);
}
.puente a {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: var(--tap);
  font-family: var(--font-voz); font-weight: 700;
  font-size: clamp(1rem, 1.4vw, 1.14rem);
  color: var(--c-ink); text-decoration: none;
}
.puente a span {
  display: inline-block;
  color: var(--ocre-tierra);
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.puente a:hover span { transform: translateX(6px); }
.cinta .puente, .cierre .puente, .auxilio .puente { border-top-color: rgb(255 255 255 / .22); }
.cinta .puente a, .cierre .puente a, .auxilio .puente a { color: #fff; }
.cinta .puente a span, .cierre .puente a span { color: var(--ocre-luz); }
.cta-medio { margin: var(--e4) 0 0; }
@media (prefers-reduced-motion: reduce) {
  .puente a span { transition: none; }
}
.a-sangre + .seccion:not(.a-sangre) {
  padding-top: clamp(var(--e5), 7vw, var(--e6));
}
.seccion:not(.a-sangre) + .a-sangre {
  margin-top: clamp(var(--e4), 5vw, var(--e5));
}
.a-sangre + .a-sangre { margin-top: 0; }
.escena-arcos { margin-top: 0; }
.escena-arcos + .seccion { padding-top: clamp(var(--e5), 7vw, var(--e6)); }
.cinta .puente, .cierre .puente, .auxilio .puente { margin-bottom: var(--e2, 12px); }
.cinta > .interior > :last-child,
.cierre > .interior > :last-child,
.definicion > .interior > :last-child,
.auxilio > .interior > :last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .jardin {
    display: grid;
    grid-template-columns: minmax(260px, 0.8fr) 1.35fr;
    column-gap: clamp(40px, 5vw, 88px);
    align-items: start;
  }
  .jardin-voz {
    position: sticky;
    top: calc(var(--barra-h) + var(--e4));
  }
  .jardin .intro { max-width: none; }
}
.jardin-voz .promesa-jardin { margin-bottom: 0; }
.jardin-etapas .etapas { margin-top: 0; }
.etapas li:nth-child(1) { --tinta-etapa: #7F8C8D; }
.etapas li:nth-child(2) { --tinta-etapa: #8A6F45; }
.etapas li:nth-child(3) { --tinta-etapa: #8A9A5B; }
.etapas li:nth-child(4) { --tinta-etapa: #C6A664; }
.etapas li:nth-child(5) { --tinta-etapa: #E3C88A; }
.legal { --medida: 68ch; }
.legal h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  margin-top: clamp(var(--e5), 5vw, var(--e6));
  padding-top: var(--e3);
  border-top: 1px solid var(--c-line);
  max-width: var(--medida);
}
.legal > h2:first-of-type { margin-top: var(--e4); }
.legal h3 {
  font-size: 1.02rem;
  margin: var(--e4) 0 6px;
  color: var(--c-ink);
  max-width: var(--medida);
}
.legal p,
.legal li { max-width: var(--medida); color: #4C5658; }
.legal p { margin: 0 0 0.9em; }
.legal ul { margin: 0 0 1.1em; padding-left: 1.15em; }
.legal li { margin-bottom: 0.5em; }
.legal li::marker { color: var(--ocre-tierra); }
.legal strong { color: var(--c-ink); }
.legal a { color: var(--ocre-tierra); }
.legal h2#seccion-d,
.legal h2:has(+ h3[id^="d-"]) { color: var(--pizarra); }
.hero-corto { font-size: clamp(2rem, 5vw, 3.4rem) !important; max-width: 18ch; }
.indice-legal {
  margin: var(--e4) 0 var(--e5);
  padding: var(--e3) var(--e4);
  border-left: 3px solid var(--ocre);
  background: rgb(198 166 100 / 0.07);
  border-radius: 0 10px 10px 0;
  max-width: 68ch;
}
.indice-legal .rotulo { margin-bottom: 10px; }
.indice-legal ol {
  margin: 0; padding: 0; list-style: none;
  columns: 2; column-gap: var(--e4);
}
.indice-legal li { break-inside: avoid; margin: 0 0 6px; }
.indice-legal a {
  display: block; min-height: 28px;
  color: var(--c-ink); text-decoration: none;
  font-size: 0.92rem; line-height: 1.5;
}
.indice-legal a:hover { color: var(--ocre-tierra); text-decoration: underline; }
@media (max-width: 700px) { .indice-legal ol { columns: 1; } }
.cierre > .interior > * { margin-inline: auto; }
#puertas,
.cierre .frase-cierre {
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
#como-empieza,
#no-es,
#preguntas,
#porque-gratis {
  font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.15rem);
  line-height: 1.12;
}
.seccion:has(> #puertas) .rotulo { font-size: 12px; letter-spacing: 0.2em; }
.puerta { min-height: 372px; padding: var(--e4) var(--e3) var(--e3); }
@media (max-width: 700px) { .puerta { min-height: 292px; } }
.puerta h3 { font-size: 1.16rem; }
.puerta .dato {
  margin-top: auto;
  padding-top: var(--e3);
  border-top: 1px solid var(--c-line);
  font-size: 1.5rem;
}
.puerta .dato small { font-size: 0.78rem; }
@media (min-width: 860px) {
  .cinta .lista-digna {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--e4);
    max-width: none;
  }
  .cinta .lista-digna li { margin: 0; }
}
.fachada { position: relative; isolation: isolate; }
.dintel {
  display: block;
  height: clamp(14px, 1.6vw, 22px);
  border-radius: var(--r-card) var(--r-card) 0 0;
  background:
    linear-gradient(100deg, var(--c-focal-1) 0%, var(--c-focal-2) 62%, var(--c-focal-3) 100%);
  box-shadow: inset 0 1px 0 rgb(227 200 138 / .45);
  position: relative;
}
.dintel::after {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--tex-piedra);
  opacity: .22; mix-blend-mode: overlay;
  border-radius: inherit;
}
.umbral {
  display: block;
  height: 7px;
  margin-inline: clamp(6px, 1vw, 16px);
  border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, rgb(52 73 94 / .34), rgb(52 73 94 / .10));
}
.fachada .puertas {
  gap: clamp(4px, 0.5vw, 8px);
  background: linear-gradient(100deg, rgb(52 73 94 / .16), rgb(52 73 94 / .07));
}
@media (min-width: 1080px) { .fachada .puerta { min-height: 440px; } }
.puerta::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0;
  height: 26px;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(26 37 47 / .16), transparent);
}
.puerta::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--tinta-puerta, var(--pizarra));
  opacity: .5;
  transition: opacity .45s ease, height .45s ease;
}
.puertas .puerta:hover::after,
.puertas .puerta:focus-visible::after { opacity: 1; height: 7px; }
.puertas .puerta:hover,
.puertas .puerta:focus-visible {
  opacity: 1; filter: none; transform: translateY(-8px); box-shadow: var(--sh-2);
}
@media (prefers-reduced-motion: reduce) {
  .puerta, .puerta::after { transition: none; }
  .puertas:hover .puerta, .puertas:focus-within .puerta {
    opacity: 1; filter: none; transform: none;
  }
}
.reticula .seccion:has(.fachada) {
  padding-block: clamp(var(--e6), 11vw, calc(var(--e7) * 1.35));
}
.sendero-pasos, .no-es, .preguntas {
  padding-block: clamp(var(--e4), 5.5vw, var(--e5));
}
.ventanas {
  display: grid; gap: var(--e3);
  grid-template-columns: 1fr;
  margin-top: var(--e4);
}
@media (min-width: 720px)  { .ventanas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) {
  .ventanas { grid-template-columns: repeat(4, 1fr); }
}
.ventana {
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 10px;
}
.marco-ventana,
.cara-texto {
  background: #FBF9F4;
  border-radius: 10px;
  padding: var(--e3);
  min-height: 240px;
  display: flex; flex-direction: column; justify-content: center;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .1),
              0 -3px 0 0 var(--tinta-puerta, var(--ocre)),
              -8px 14px 34px -18px rgb(0 0 0 / .6);
  --c-ink-2: #5B6566;
  --c-ink-3: #667071;
}
.ventana-rotulo {
  font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-ink-3); margin: 0 0 10px;
}
.objeto-sesion { display: block; width: 100%; height: auto; max-height: 118px; }
.objeto-sesion.frasco { max-height: 134px; margin-inline: auto; width: auto; }
.ventana-frase {
  font-family: var(--font-voz); font-style: italic;
  color: var(--pizarra); font-size: .95rem;
  margin: 10px 0 0; text-wrap: balance;
}
.linea-nota {
  height: 8px; border-radius: var(--r-pill);
  background: rgb(52 73 94 / .14); margin-top: 10px;
}
.linea-nota.llena { background: rgb(138 154 91 / .45); }
.linea-nota.corta { width: 62%; }
.ventana figcaption {
  font-size: .78rem; color: rgb(231 236 239 / .66);
  margin-top: 10px; line-height: 1.45;
}
.nota-ilustraciones {
  margin: var(--e3) 0 0;
  font-size: .78rem;
  color: rgb(231 236 239 / .58);
  max-width: 52ch;
}
.escena-puertas { position: relative; min-height: 220vh; padding-block: 0; }
.escena-puertas { overflow: clip; }
.escena-puertas .pegado {
  position: sticky; top: 0;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: calc(var(--barra-h) + var(--e3));
  padding-bottom: var(--e4);
}
.escena-puertas .pegado > .interior {
  width: var(--marco);
  margin-inline: auto;
}
.giro { position: relative; }
.cara { grid-area: 1 / 1; }
.giro { display: grid; }
.cara-ilustracion { display: none; }
.lustre {
  position: absolute; inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}
.lustre::before {
  content: '';
  position: absolute; top: -60%; bottom: -60%; left: -40%;
  width: 34%;
  transform: translateX(-260%) rotate(14deg);
  background: linear-gradient(90deg,
    rgb(255 255 255 / 0), rgb(255 255 255 / .85) 45%, rgb(227 200 138 / .55) 62%, rgb(255 255 255 / 0));
}
.cara-texto .ventana-rotulo {
  color: var(--tinta-puerta);
  filter: brightness(.7);
  font-size: 11px;
}
.lo-que-hay { list-style: none; margin: 0; padding: 0; }
.lo-que-hay li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 10px;
  font-size: .92rem;
  line-height: 1.5;
  color: #4C5658;
}
.lo-que-hay li:last-child { margin-bottom: 0; }
.lo-que-hay li::before {
  content: '';
  position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--tinta-puerta, var(--ocre));
}
.lo-que-hay strong { color: var(--pizarra); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .escena-puertas { view-timeline-name: --escena-puertas; }
    .giro { transform-style: preserve-3d; }
    .cara {
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }
    .cara-texto { transform: translateZ(3px); }
    .cara-ilustracion { display: block; transform: rotateY(180deg) translateZ(3px); }
    .cara-texto {
      transform-style: preserve-3d;
      position: relative;
    }
    .cara-texto > * { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
    .cara-texto .ventana-rotulo { transform: translateZ(22px); }
    .cara-texto .lo-que-hay { transform: translateZ(12px); }
    .lustre { transform: translateZ(6px); }
    .cara-ilustracion .marco-ventana { min-height: 240px; height: 100%; }
    .giro {
      animation: gira-tarjeta linear both;
      animation-timeline: --escena-puertas;
    }
    .ventana:nth-child(1) .giro { animation-range: contain 8% contain 32%; }
    .ventana:nth-child(2) .giro { animation-range: contain 26% contain 50%; }
    .ventana:nth-child(3) .giro { animation-range: contain 44% contain 68%; }
    .ventana:nth-child(4) .giro { animation-range: contain 62% contain 88%; }
    @keyframes gira-tarjeta {
      from { transform: rotateY(180deg); }
      to   { transform: rotateY(0deg); }
    }
    .cara-texto::before {
      content: '';
      position: absolute; left: 0; right: 0; top: 0; height: 46%;
      border-radius: inherit;
      background: linear-gradient(to bottom,
        color-mix(in srgb, var(--tinta-puerta, #C6A664) 17%, transparent), rgb(255 255 255 / 0) 72%);
      opacity: 0;
      animation: enciende-dintel linear both;
      animation-timeline: --escena-puertas;
    }
    @keyframes enciende-dintel { from { opacity: 0; } to { opacity: 1; } }
    .lustre { animation: abre-lustre linear both; animation-timeline: --escena-puertas; }
    .lustre::before { animation: cruza-lustre linear both; animation-timeline: --escena-puertas; }
    @keyframes abre-lustre {
      0%, 60% { opacity: 0; }
      72%     { opacity: .9; }
      100%    { opacity: 0; }
    }
    @keyframes cruza-lustre {
      from { transform: translateX(-260%) rotate(14deg); }
      to   { transform: translateX(560%) rotate(14deg); }
    }
    .ventana:nth-child(1) .cara-texto::before,
    .ventana:nth-child(1) .lustre,
    .ventana:nth-child(1) .lustre::before { animation-range: contain 8% contain 32%; }
    .ventana:nth-child(2) .cara-texto::before,
    .ventana:nth-child(2) .lustre,
    .ventana:nth-child(2) .lustre::before { animation-range: contain 26% contain 50%; }
    .ventana:nth-child(3) .cara-texto::before,
    .ventana:nth-child(3) .lustre,
    .ventana:nth-child(3) .lustre::before { animation-range: contain 44% contain 68%; }
    .ventana:nth-child(4) .cara-texto::before,
    .ventana:nth-child(4) .lustre,
    .ventana:nth-child(4) .lustre::before { animation-range: contain 62% contain 88%; }
  }
}
@media (max-width: 900px) {
  .escena-puertas { min-height: 0; }
  .escena-puertas .pegado { position: static; min-height: 0; display: block; }
  .escena-puertas .giro { animation: none; }
  .escena-puertas .cara-ilustracion { display: none; }
  .escena-puertas .lustre { display: none; }
}
.no-es .pares dt { font-size: clamp(1.1rem, 1.7vw, 1.34rem); }
.no-es .pares dt b { color: var(--ocre-tierra); font-weight: inherit; }
.salida-crisis {
  margin: var(--e4) 0 0;
  max-width: 62ch;
  padding: var(--e3) var(--e3) var(--e3) var(--e4);
  border-left: 3px solid var(--ocre-tierra);
  background: rgb(var(--ocre-rgb) / .07);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  color: var(--c-ink);
}
.salida-crisis strong { display: block; margin-bottom: 4px; }
.salida-crisis a {
  font-family: var(--font-voz); font-weight: 700;
  color: var(--c-ink);
  text-decoration-color: var(--ocre-tierra);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  white-space: nowrap;
}
@media (max-width: 620px) {
  .anillos { width: min(100%, 268px); }
}
.otras-puertas {
  margin: var(--e3) 0 0;
  font-size: .9rem;
  color: rgb(231 236 239 / .72);
}
.otras-puertas a {
  color: var(--ocre-luz);
  text-underline-offset: 3px;
  white-space: nowrap;
}
@media (min-width: 900px) and (max-height: 720px) {
  .corte-nota { font-size: .88rem; }
  .arco-para { font-size: .76rem; }
  .anillos-leyenda li { padding: 3px 0; }
}
.logo {
  display: inline-flex; align-items: center; position: relative;
  flex-shrink: 0;
}
.logo-marca, .logo .logo-claro { max-width: none; }
.logo-marca {
  display: block;
  height: 30px; width: auto;
  transition: opacity .25s ease;
}
.logo .logo-claro {
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  opacity: 0;
}
.barra-sitio.sobre-escena .logo-marca:not(.logo-claro) { opacity: 0; }
.barra-sitio.sobre-escena .logo .logo-claro { opacity: 1; }
@media (max-width: 480px) {
  .logo-marca { height: 26px; }
}
.fondo-vivo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: var(--fondo-presencia);
  filter: blur(3px) saturate(.72);
  transform: scale(1.08);
  background-image: image-set(
    url('../img/hero-poster.webp') type('image/webp'),
    url('../img/hero-poster.jpg') type('image/jpeg')
  );
  background-size: cover;
  background-position: center;
}
.hero-focal > .fondo-vivo {
  z-index: 0;
  width: auto;
  margin: 0;
  animation: none;
}
.fondo-vivo video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.fondo-vivo.vivo video { opacity: 1; }
.fondo-vivo.en-reposo {
  background-image: image-set(
    url('../img/hero-reposo.webp') type('image/webp'),
    url('../img/hero-reposo.jpg') type('image/jpeg')
  );
}
.hero-focal::after {
  z-index: 1;
  background:
    linear-gradient(to bottom,
      rgb(26 37 47 / .58) 0%,
      rgb(26 37 47 / .16) 36%,
      rgb(26 37 47 / .14) 60%,
      rgb(26 37 47 / .55) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .fondo-vivo video { display: none; }
}
}