/* ==========================================================================
   PH en Movimiento · estilos de la landing
   Orden: tokens.css (marca) → mascaras.css (formas) → este archivo.
   Móvil primero: 375 base · 768 (48em) · 1024 (64em) · 1280 (80em).
   ========================================================================== */

:root {
  /* Derivados del sistema (decisión de Fase 1): texto pequeño sobre terracota */
  --ph-terracota-oscuro: #B04A26;   /* blanco 5.45:1 · crema 4.92:1 */
  --ph-terracota-hover:  #9F421F;
  --ph-terracota-prof-hover: #B84E2B;

  --contenedor: 70rem;              /* 1120 px */
  --gutter: 1rem;
  --seccion-y: clamp(3.75rem, 7vw, 6rem);
  --ph-lavado-salvia: #EAEADA;     /* salvia-tinte 60 % sobre crema */
  --ph-lavado-durazno: #F6E7D9;    /* durazno-tinte 45 % sobre crema */
  --onda-alto: clamp(2.25rem, 5vw, 4.5rem);

  /* Fotos: marco "hoja" (eco de la hoja del logo) y marco de tarjeta */
  --forma-hoja:     9rem 1.75rem 9rem 1.75rem;
  --forma-hoja-inv: 1.75rem 9rem 1.75rem 9rem;
  --forma-tarjeta:  2.25rem 1rem 2.25rem 1rem;
  --forma-mini:     1.5rem 1.5rem 1.5rem .5rem;
}
:root { --num: 3.5rem; }   /* diámetro del círculo numerado: la enredadera se calcula a partir de él */
@media (min-width: 48em) { :root { --gutter: 2rem; --num: 4.5rem; } }
@media (max-width: 47.99em) {
  :root { --forma-hoja: 5.5rem 1.25rem 5.5rem 1.25rem; --forma-hoja-inv: 1.25rem 5.5rem 1.25rem 5.5rem; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scrollbar-color: var(--ph-salvia) var(--ph-crema);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--color-fondo);
  color: var(--color-texto);
  font: 400 var(--text-base)/1.55 var(--font-cuerpo);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
img { height: auto; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-color: var(--ph-terracota); text-decoration-thickness: 2px; text-underline-offset: .22em; }
::selection { background: var(--ph-brote); color: var(--ph-bosque); }
:focus-visible { outline: 3px solid var(--ph-hoja); outline-offset: 3px; }   /* el contorno sigue el radio de cada elemento: no se fuerza uno */
input, textarea, select, button { font: inherit; color: inherit; }
input, textarea { caret-color: var(--ph-terracota-prof); }
::placeholder { color: #557058; opacity: 1; }   /* 4.93:1 sobre crema */
strong { font-weight: 700; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: 1rem; top: -5rem; z-index: 100; background: var(--ph-bosque); color: var(--ph-crema); padding: .75rem 1.25rem; border-radius: var(--radius-pill); font-weight: 700; transition: top var(--dur-rapido); }
.saltar:focus { top: .75rem; }

.contenedor { width: 100%; max-width: calc(var(--contenedor) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

.i { width: 1.5rem; height: 1.5rem; flex: none; }

/* ---------- Tipografía de marca ---------- */
.sub-mano {                      /* subtítulo manuscrito en mayúsculas (Kalam) con subrayado */
  font: 700 clamp(1.25rem, 3.4vw, var(--text-xl))/1.2 var(--font-manuscrita-mayus);
  text-transform: uppercase;
  text-wrap: balance;
  padding-bottom: .55rem;
  position: relative; --sub-w: 21rem; --sub-h: .8rem;
}
.sub-mano::after, .cita-pincelada__titulo::after, .modelo__titulo::after, .form__titulo::after, .presenta__nombre::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: min(100%, var(--sub-w, 20rem)); height: var(--sub-h, .8rem);
  background: url(../assets/svg/subrayado.svg) left center / 100% 100% no-repeat; pointer-events: none;
}
.cita-mano { font: 600 clamp(1.75rem, 4.4vw, 2.5rem)/1.1 var(--font-manuscrita); text-wrap: balance; }
p { max-width: 62ch; text-wrap: pretty; }
.texto-suave { color: var(--color-texto-suave); }

/* ---------- Botones y enlaces ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3rem; padding: .7rem 1.6rem;
  border: 0; border-radius: var(--radius-pill);
  font: 700 1.0625rem/1 var(--font-manuscrita-mayus); text-transform: uppercase; letter-spacing: .02em;
  text-decoration: none; cursor: pointer; touch-action: manipulation;
  transition: transform var(--dur-rapido) var(--ease-vivo), background-color var(--dur-rapido) var(--ease-vivo), box-shadow var(--dur-rapido) var(--ease-vivo);
}
.btn--principal { background: var(--ph-terracota-oscuro); color: #fff; box-shadow: var(--shadow-md); }
@media (hover: hover) and (pointer: fine) { .btn--principal:hover { background: var(--ph-terracota-hover); transform: translateY(-2px); } }
.btn--principal:active { transform: translateY(0) scale(.98); }
.btn--grande { min-height: 3.5rem; padding: .8rem 2.25rem; font-size: 1.25rem; background: var(--ph-terracota-prof); }   /* ≥19 px en negrita = texto grande */
@media (hover: hover) and (pointer: fine) { .btn--grande:hover { background: var(--ph-terracota-prof-hover); } }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .6; cursor: progress; transform: none; }

.enlace {
  font: 700 1.0625rem/1.2 var(--font-manuscrita-mayus); text-transform: uppercase; color: var(--ph-bosque);
  text-decoration: underline wavy var(--ph-terracota); text-decoration-thickness: 2px; text-underline-offset: .4em;
  padding-block: .75rem; display: inline-flex; align-items: center; gap: .5rem;
}
.enlace:hover { text-decoration-color: var(--ph-terracota-prof); }

/* ---------- Navegación ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: var(--ph-crema); transition: box-shadow var(--dur-normal) var(--ease-vivo); }
.nav--scroll { box-shadow: 0 1px 0 var(--color-borde), 0 8px 24px rgba(46, 79, 52, .07); }
.nav__fila { display: flex; align-items: center; gap: .5rem; height: 4rem; }
.nav__logo { display: block; flex: none; padding-block: .5rem; }
.nav__logo img { width: 7.5rem; height: auto; }            /* 120 px = mínimo del logo */
.nav__cta { margin-left: auto; min-height: 2.75rem; padding: .55rem 1.1rem; font-size: 1rem; }
.nav__cta .solo-escritorio { display: none; }
.nav__boton { flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; background: none; border: 0; border-radius: var(--radius-pill); cursor: pointer; color: var(--ph-bosque); touch-action: manipulation; }
@media (hover: hover) and (pointer: fine) { .nav__boton:hover { background: var(--ph-salvia-tinte); } }
.nav__boton .i { width: 1.75rem; height: 1.75rem; }
.nav__boton .i-cerrar { display: none; }
.nav--abierto .nav__boton .i-menu { display: none; }
.nav--abierto .nav__boton .i-cerrar { display: block; }

.nav__enlaces {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--ph-crema-clara); border-bottom: 1px solid var(--color-borde); box-shadow: var(--shadow-md);
  padding: .5rem var(--gutter) 1.25rem;
  opacity: 0; transform: translateY(-.5rem); visibility: hidden;
  transition: opacity var(--dur-rapido) var(--ease-vivo), transform var(--dur-rapido) var(--ease-vivo), visibility 0s linear var(--dur-rapido);   /* salida: 160 ms */
}
.nav--abierto .nav__enlaces { opacity: 1; transform: none; visibility: visible; transition-duration: 240ms, 240ms, 0s; transition-delay: 0s; }   /* entrada: 240 ms */
.nav__enlaces a { display: block; padding: .95rem 0; font: 600 1.0625rem/1.2 var(--font-titulo); text-decoration: none; border-bottom: 1px solid var(--color-borde); }
.nav__enlaces li:last-child a { border-bottom: 0; }
.nav__enlaces a[aria-current="true"] { color: var(--ph-terracota-oscuro); }

@media (min-width: 64em) {
  .nav__fila { height: 4.5rem; gap: 2rem; }
  .nav__logo img { width: 10.5rem; }
  .nav__boton { display: none; }
  .nav__enlaces { order: 2; position: static; flex: 1; background: none; border: 0; box-shadow: none; padding: 0; opacity: 1; transform: none; visibility: visible; }
  .nav__enlaces ul { display: flex; justify-content: center; gap: 1.75rem; }
  .nav__enlaces a { padding: .6rem 0; font-size: var(--text-sm); border: 0; text-decoration: underline wavy transparent; text-underline-offset: .5em; text-decoration-thickness: 2px; transition: text-decoration-color var(--dur-normal); }
  .nav__enlaces a:hover { text-decoration-color: var(--ph-terracota); }
  .nav__enlaces a[aria-current="true"] { color: var(--ph-bosque); text-decoration-color: var(--ph-terracota); }
  .nav__cta { order: 3; margin-left: 0; font-size: 1.0625rem; padding-inline: 1.5rem; }
  .nav__cta .solo-movil { display: none; }
  .nav__cta .solo-escritorio { display: inline; }
}

/* ---------- Piezas de marca reutilizables ---------- */
/* Círculo-pincelada con icono (o número) y pincelada de apoyo desplazada */
.ico { position: relative; isolation: isolate; display: grid; place-items: center; flex: none; width: 5.25rem; height: 5.25rem; color: var(--ph-crema); }
.ico::before, .ico::after { content: ""; position: absolute; z-index: -1; }
.ico::before { inset: -.45rem -.85rem -.35rem .6rem; transform: rotate(-4deg); background: var(--ph-salvia-tinte); -webkit-mask: var(--m-blob) center/100% 100% no-repeat; mask: var(--m-blob) center/100% 100% no-repeat; }
.ico::after  { inset: 0; background: var(--ph-oliva); -webkit-mask: var(--m-circulo) center/100% 100% no-repeat; mask: var(--m-circulo) center/100% 100% no-repeat; }
.ico--terra::before { background: var(--ph-durazno-tinte); }
.ico--terra::after  { background: var(--ph-terracota-oscuro); }
.ico .i { width: 2.5rem; height: 2.5rem; }
.ico--sm { width: 3.5rem; height: 3.5rem; } .ico--sm .i { width: 1.75rem; height: 1.75rem; }

.num { position: relative; isolation: isolate; display: grid; place-items: center; flex: none; width: var(--num); height: var(--num); color: #fff; font: 700 1.375rem/1 var(--font-titulo); }
.num::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ph-oliva); -webkit-mask: var(--m-circulo) center/100% 100% no-repeat; mask: var(--m-circulo) center/100% 100% no-repeat; }
.num--terra::before { background: var(--ph-terracota-oscuro); }
@media (min-width: 48em) { .num { font-size: 1.75rem; } }

/* Encabezado de sección: [número] | TÍTULO */
.encab { display: flex; align-items: center; gap: 1rem; margin-bottom: clamp(2rem, 5vw, 3.25rem); }
.encab__linea { display: block; align-self: stretch; width: 2px; background: var(--ph-bosque); opacity: .65; }
.encab h2 { font: 700 clamp(1.375rem, 4.2vw, var(--text-2xl))/1.1 var(--font-titulo); text-transform: uppercase; text-wrap: balance; }

/* Pincelada de fondo detrás de un bloque (se colorea con --pincel) */
.pincel { position: relative; isolation: isolate; }
.pincel::before { content: ""; position: absolute; z-index: -1; inset: var(--pincel-inset, 0); background: var(--pincel, var(--ph-salvia-tinte)); -webkit-mask: var(--pincel-mascara, var(--m-ancha)) center/100% 100% no-repeat; mask: var(--pincel-mascara, var(--m-ancha)) center/100% 100% no-repeat; transform: var(--pincel-giro, none); }

/* Fotos: marcos orgánicos con proporción fija */
.foto { position: relative; overflow: hidden; background: var(--ph-salvia-tinte); box-shadow: var(--foto-sombra, 0 14px 36px rgba(46, 79, 52, .16)); }
.foto picture, .foto img { display: block; width: 100%; height: 100%; }
.foto img { object-fit: cover; }
.foto--hoja     { border-radius: var(--forma-hoja); }
.foto--hoja-inv { border-radius: var(--forma-hoja-inv); }
.foto--tarjeta  { border-radius: var(--forma-tarjeta); }
.foto--mini     { border-radius: var(--forma-mini); box-shadow: var(--shadow-sm); }

/* Aviso sobre fotos generadas por IA mientras no haya fotos reales */
.ilustrativa { position: absolute; z-index: 2; left: 1.25rem; bottom: 1.25rem; padding: .2rem .75rem; border-radius: var(--radius-pill); background: rgba(46, 79, 52, .84); color: var(--ph-crema); font: 700 .8125rem/1.45 var(--font-cuerpo); letter-spacing: .03em; pointer-events: none; }

/* Rótulo manuscrito sobre pincelada, anclado a una foto */
.rotulo { position: absolute; z-index: 2; max-width: 62%; padding: 1rem 1.6rem 1.1rem 1.4rem; font: 600 clamp(1.25rem, 3vw, 1.625rem)/1.05 var(--font-manuscrita); text-wrap: balance; color: var(--ph-crema); isolation: isolate; }
.rotulo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ph-bosque); -webkit-mask: var(--m-media) center/100% 100% no-repeat; mask: var(--m-media) center/100% 100% no-repeat; }

/* Decoración (hojas translúcidas) */
.deco { position: absolute; pointer-events: none; z-index: 0; background: no-repeat center/contain; }
.deco--hojas { background-image: url(../assets/svg/hojas-esquina.svg); }
.deco--rama  { background-image: url(../assets/svg/hojas-rama.svg); }

/* Lista con visto */
.lista-visto { display: grid; gap: .8rem; }
.lista-visto li { position: relative; padding-left: 2.6rem; min-height: 1.75rem; }
.lista-visto li::before {
  content: ""; position: absolute; left: 0; top: .1rem; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--ph-oliva) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M12 25l9 9 16-18' fill='none' stroke='%23F7F3E8' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/62% no-repeat;
}

/* ---------- Secciones ---------- */
.seccion { position: relative; padding-block: var(--seccion-y); }
.seccion > .contenedor { position: relative; z-index: 1; }
.seccion--salvia  { --lavado: var(--ph-lavado-salvia); }
.seccion--durazno { --lavado: var(--ph-lavado-durazno); }
.seccion--lavado { background: var(--lavado); }
.seccion--lavado::before, .seccion--lavado::after,
.banda-objetivo::before, .banda-objetivo::after {
  content: ""; position: absolute; left: 0; right: 0; height: var(--onda-alto); pointer-events: none;
  background: var(--lavado, var(--ph-bosque));
  -webkit-mask: var(--m-onda) center/100% 100% no-repeat; mask: var(--m-onda) center/100% 100% no-repeat;
}
.seccion--lavado::before { bottom: calc(100% - 1px); }
.seccion--lavado::after  { top: calc(100% - 1px); transform: scaleY(-1); }

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: clamp(1.25rem, 4vw, 3rem); padding-bottom: calc(var(--seccion-y) * .35); }
.hero__grid { display: grid; gap: 2.25rem; align-items: center; position: relative; z-index: 1; }
.hero__lema {
  position: relative; isolation: isolate;
  font: 700 clamp(2.5rem, 8.4vw, 4.5rem)/1.03 var(--font-manuscrita);
  text-wrap: balance; max-width: 11.5em;
  padding: .32em .9em .62em .55em; margin-left: -.25em;
}
.hero__lema::before { content: ""; position: absolute; inset: 0 0 0 0; z-index: -1; background: var(--ph-salvia-tinte); transform: rotate(-1.6deg); -webkit-mask: var(--m-media) center/100% 100% no-repeat; mask: var(--m-media) center/100% 100% no-repeat; }
.hero__lema::after { content: ""; position: absolute; left: 7%; bottom: .2em; width: 66%; height: clamp(.9rem, 2.4vw, 1.3rem); background: url(../assets/svg/subrayado.svg) left center/100% 100% no-repeat; transform: rotate(-1.2deg); }
.hero__sub { margin-top: 1.5rem; font: 600 clamp(1.125rem, 2.4vw, 1.375rem)/1.35 var(--font-cuerpo); max-width: 30ch; text-wrap: balance; }
.hero__apoyo { margin-top: .75rem; color: var(--color-texto-suave); max-width: 40ch; }
.hero__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.75rem; margin-top: 1.75rem; }
.hero__firma { display: flex; align-items: flex-start; gap: .6rem; margin-top: 1.5rem; font-size: var(--text-sm); color: var(--color-texto-suave); max-width: 44ch; }
.hero__firma .i { width: 1.25rem; height: 1.25rem; margin-top: .15rem; color: var(--ph-terracota-oscuro); }
.hero__firma strong { color: var(--ph-bosque); }
.hero__foto { aspect-ratio: 524 / 543; max-width: 34rem; width: 100%; margin-inline: auto; }
.hero .deco--hojas { width: clamp(6rem, 22vw, 17rem); aspect-ratio: 320/360; right: -1rem; top: -1.5rem; transform: scale(-1, -1); opacity: .9; }
.hero .deco--rama { width: 5rem; aspect-ratio: 200/390; left: -1.5rem; bottom: 6rem; opacity: .7; display: none; }

.verbos { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.25rem 1rem; margin-top: clamp(2.75rem, 7vw, 5rem); }
.verbo { display: flex; flex-direction: column; align-items: center; text-align: center; }
.verbo__texto { margin-top: 1.1rem; padding-bottom: .65rem; font: 700 var(--text-sm)/1.2 var(--font-titulo); text-transform: uppercase; letter-spacing: .05em; background: url(../assets/svg/subrayado.svg) center bottom/72% .6rem no-repeat; }

@media (min-width: 64em) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3rem; }
  .hero__foto { justify-self: end; margin-inline: 0; }
  .hero .deco--rama { display: block; }
  .verbos { grid-template-columns: repeat(4, 1fr); }
}

/* Antes en atributos style="" del HTML; en CSS para poder aplicar una CSP estricta (style-src 'self') */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.deco--beneficios { right: 0; bottom: 2rem; width: clamp(7rem, 15vw, 12rem); aspect-ratio: 320/360; opacity: .6; transform: scaleX(-1); }
.seccion--compromiso { padding-bottom: 0; }
.inicio { padding-top: calc(var(--seccion-y) + var(--onda-alto)); }

/* ---------- 01 Propuesta ---------- */
.propuesta__grid { display: grid; gap: 2.5rem; align-items: center; }
.propuesta__texto { display: grid; gap: 1.25rem; }
.propuesta__texto .sub-mano { margin-bottom: .5rem; }
.propuesta__foto { aspect-ratio: 504 / 383; max-width: 36rem; width: 100%; }
.propuesta__fig { display: grid; gap: 1rem; }
.propuesta__fig figcaption { font: 600 clamp(1.5rem, 3.6vw, 2rem)/1.1 var(--font-manuscrita); color: var(--ph-bosque); text-wrap: balance; max-width: 18em; padding-left: 1rem; }
.propuesta__fila { display: grid; gap: 2.5rem; margin-top: clamp(2.5rem, 6vw, 4rem); align-items: center; }
.iconos4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
.cita-pincelada { --pincel-inset: -1.25rem -1.5rem -1.25rem -1.25rem; --pincel-mascara: var(--m-media); padding: .75rem 2.25rem .75rem .5rem; }
.cita-pincelada__titulo { font: 700 clamp(1.375rem, 3.4vw, 1.75rem)/1.15 var(--font-manuscrita-mayus); text-transform: uppercase; text-wrap: balance; padding-bottom: .5rem; position: relative; --sub-w: 18rem; --sub-h: .7rem; margin-bottom: .9rem; }
.cita-pincelada p:last-child { color: var(--color-texto-suave); }
@media (min-width: 64em) {
  .propuesta__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 4rem; }
  .propuesta__foto { max-width: none; }
  .propuesta__fila { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 4rem; }
  .iconos4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 02 ¿Qué ofrecemos? ---------- */
.ofrece__intro { display: grid; gap: 2.5rem; align-items: center; }
.ofrece__intro > div { display: grid; gap: 1.25rem; }
.ofrece__foto { aspect-ratio: 8 / 5; max-width: 30rem; width: 100%; margin-bottom: 1.25rem; }
.ofrece__foto-wrap { position: relative; max-width: 30rem; width: 100%; }
.ofrece__foto-wrap .rotulo { right: -.5rem; bottom: -.25rem; }
.actividades { display: grid; gap: 3rem 2rem; margin-top: clamp(3rem, 7vw, 5rem); }
.act { display: grid; gap: .9rem; align-content: start; }
.act__cab { display: flex; align-items: center; gap: 1.5rem; }
.act__cab h3 { font: 700 1.0625rem/1.2 var(--font-titulo); text-transform: uppercase; text-wrap: balance; }
.act p { color: var(--color-texto-suave); }
.act .foto { max-width: 18.75rem; width: 100%; margin-top: .4rem; aspect-ratio: 213/145; }
.act--04 .foto { aspect-ratio: 322/162; max-width: 20rem; }
.act--05 .foto { aspect-ratio: 375/155; max-width: 23.5rem; }
.banda-cierre {
  --pincel: var(--ph-terracota-oscuro); --pincel-inset: -.4rem -1rem; --pincel-giro: rotate(-.6deg);
  display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.1rem; max-width: 46rem; margin: clamp(3rem, 7vw, 5rem) auto 0;
  padding: 1.4rem 3rem 1.5rem 1.5rem; color: var(--ph-crema); font: 600 clamp(1.375rem, 3.8vw, 2rem)/1.15 var(--font-manuscrita); text-align: center;
}
.banda-cierre { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem 1rem; padding-right: 3.25rem; }
@media (min-width: 48em) { .banda-cierre { display: flex; padding-right: 3rem; } .banda-cierre span + span::before { content: "•"; margin-right: 1.1rem; opacity: .8; } }
@media (min-width: 48em) {
  .actividades { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64em) {
  .ofrece__intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; }
  .ofrece__foto-wrap { justify-self: end; }
  .actividades { grid-template-columns: repeat(6, 1fr); }
  .act--01, .act--02, .act--03 { grid-column: span 2; }
  .act--02 { margin-top: 3.25rem; }
  .act--04, .act--05 { grid-column: span 3; }
  .act--05 { margin-top: 3.25rem; }
}

/* ---------- 03 Beneficios ---------- */
.benef__apertura { display: grid; gap: 2.5rem; align-items: center; }
.benef__frase { --pincel-mascara: var(--m-media); --pincel-inset: -1.25rem -1.75rem -1.25rem -1.5rem; --pincel-giro: rotate(-.8deg); padding: .5rem 2.25rem .5rem .5rem; font: 600 clamp(1.625rem, 4.2vw, 2.375rem)/1.12 var(--font-manuscrita); text-wrap: balance; }
.benef__frase::after { content: ""; display: block; width: min(100%, 15rem); height: .8rem; margin-top: .75rem; background: url(../assets/svg/subrayado.svg) left center/100% 100% no-repeat; }
.benef__foto-wrap { position: relative; max-width: 26rem; width: 100%; justify-self: center; }
.benef__foto { aspect-ratio: 345 / 315; }
.benef__foto-wrap .rotulo { top: -.75rem; right: -.5rem; }
.cinta { --pincel: var(--ph-bosque); --pincel-inset: -.35rem -1.5rem -.35rem -1rem; display: inline-block; margin: 0 0 1.5rem .5rem; padding: .35rem 2.5rem .35rem .75rem; color: var(--ph-crema); font: 700 clamp(1.125rem, 3vw, 1.5rem)/1.2 var(--font-titulo); text-transform: uppercase; }
.benef__lista { display: grid; gap: 2.5rem; margin-top: clamp(3rem, 7vw, 5rem); align-items: start; }
.benef__lateral { display: grid; gap: 1.75rem; }
.benef__cita { padding-left: 1.25rem; border-left: 1px solid var(--ph-bosque); font: 600 clamp(1.5rem, 3.4vw, 2rem)/1.12 var(--font-manuscrita); text-wrap: balance; max-width: 16em; }
.benef__foto2 { aspect-ratio: 240 / 120; max-width: 18.75rem; width: 100%; }
.alianza { margin-top: clamp(3.5rem, 8vw, 6rem); }
.alianza > p:not(.voluntaria) { margin: 0 0 2.25rem .5rem; }
.alianza__diagrama { display: grid; gap: 1.25rem; align-items: center; justify-items: stretch; }
.rolcard { position: relative; padding: 1.75rem 1.75rem 1.9rem; border-radius: 2.5rem 1rem 2.75rem 1rem; display: grid; gap: .75rem; align-content: center; min-height: 11.5rem; box-shadow: var(--shadow-md); }
.rolcard--admin { background: var(--ph-terracota-oscuro); color: #fff; }
.rolcard--ph { background: var(--ph-bosque); color: var(--ph-crema); border-radius: 1rem 2.75rem 1rem 2.5rem; }
.rolcard__titulo { display: flex; align-items: center; gap: 1rem; font: 700 1.125rem/1.15 var(--font-titulo); text-transform: uppercase; }
.rolcard__titulo .i { width: 3rem; height: 3rem; flex: none; }
.rolcard--ph img { width: 11rem; height: auto; }
.rolcard p { max-width: 30ch; }
.alianza__centro { position: relative; justify-self: center; width: 7rem; height: 7rem; display: grid; place-items: center; color: var(--ph-terracota-oscuro); transform: rotate(90deg); }
.alianza__centro .anillo { position: absolute; inset: 0; width: 100%; height: 100%; }
.alianza__centro .nucleo { position: relative; width: 4.5rem; height: 4.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--ph-oliva); color: var(--ph-crema); transform: rotate(-90deg); }
.alianza__centro .nucleo .i { width: 2.5rem; height: 2.5rem; }
.voluntaria { --pincel-inset: -.5rem -1.5rem -.5rem -.5rem; display: flex; align-items: center; gap: 1rem; width: fit-content; max-width: 100%; margin: 2.75rem auto 0; padding: .5rem 2.5rem .5rem .75rem; font: 600 clamp(1.25rem, 3.2vw, 1.625rem)/1.15 var(--font-manuscrita); }
@media (min-width: 64em) {
  .benef__apertura { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 4rem; }
  .benef__lista { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 4rem; }
  .alianza__diagrama { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1.5rem; }
  .alianza__centro { transform: none; } .alianza__centro .nucleo { transform: none; }
}

/* ---------- 04 ¿Cómo funciona? ---------- */
.func__intro { display: grid; gap: 1.25rem; margin-bottom: clamp(2.75rem, 6vw, 4rem); align-items: end; }
.func__intro .sub-mano { padding-bottom: 1rem; --sub-w: 16rem; font-family: var(--font-manuscrita); text-transform: none; font-size: clamp(1.875rem, 5vw, 2.5rem); font-weight: 700; line-height: 1.05; }
.pasos { position: relative; display: grid; gap: 2.25rem; }
.paso { --llenado: 100%; position: relative; display: grid; grid-template-columns: var(--num) 1fr; column-gap: 1.25rem; align-items: start; }
.paso:not(:last-child)::before, .paso:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--num) / 2 - .475rem); top: calc(var(--num) / 2); width: .95rem; height: calc(100% + 2.25rem); background: var(--ph-brote); -webkit-mask: var(--m-trazo-v) 0 0 / 100% 100% no-repeat; mask: var(--m-trazo-v) 0 0 / 100% 100% no-repeat; }
.paso:not(:last-child)::after { background: var(--ph-hoja); clip-path: inset(0 0 calc(100% - var(--llenado)) 0); }
.paso > * { grid-column: 2; }
.paso__num { grid-column: 1; grid-row: 1 / span 4; position: relative; z-index: 1; }
.paso__num::after { content: ""; position: absolute; z-index: 2; right: -1.35rem; top: -1.05rem; width: 2.5rem; height: 1.8rem; pointer-events: none; background: url(../assets/svg/hoja-suelta.svg) center / contain no-repeat; }
.paso:nth-child(2) .paso__num::after { right: auto; left: -1.35rem; transform: scaleX(-1); --hoja-giro: -6deg; }
.paso:nth-child(3) .paso__num::after { right: -1.7rem; top: -1.3rem; width: 3rem; height: 2.15rem; --hoja-giro: 9deg; }
.paso:nth-child(4) .paso__num::after { right: auto; left: -1.5rem; top: -1.2rem; width: 2.8rem; height: 2rem; transform: scaleX(-1); --hoja-giro: 4deg; }
.paso:nth-child(5) .paso__num::after { right: -2rem; top: -1.5rem; width: 3.4rem; height: 2.45rem; --hoja-giro: -4deg; }
.paso__num { font-family: var(--font-manuscrita); font-weight: 700; font-size: 2.2rem; line-height: 1; padding-bottom: .15rem; }
@media (min-width: 48em) { .paso__num { font-size: 2.65rem; } }
.paso__titulo { display: flex; align-items: center; gap: .6rem; font: 700 1.0625rem/1.15 var(--font-titulo); text-transform: uppercase; padding-top: calc(var(--num) / 2 - .75rem); text-wrap: balance; }
.paso__titulo .i { width: 1.75rem; height: 1.75rem; color: var(--ph-oliva); }
.paso--terra .paso__titulo .i { color: var(--ph-terracota-oscuro); }
.paso p { margin-top: .5rem; color: var(--color-texto-suave); }
.paso .foto { margin-top: 1rem; width: 7rem; aspect-ratio: 150/178; }
.modelo { --pincel: var(--ph-salvia-tinte); --pincel-mascara: var(--m-media); --pincel-inset: -1.5rem -1.5rem -1.5rem -1rem; display: grid; gap: 1.25rem; align-items: center; margin-top: clamp(4rem, 9vw, 6.5rem); padding: .5rem 2.5rem .5rem .25rem; }
@media (min-width: 48em) { .modelo { grid-template-columns: auto 1fr; gap: 1.25rem 1.75rem; --pincel-mascara: var(--m-ancha); --pincel-inset: -1.25rem -1.5rem; padding: 1rem 1.5rem 1rem 0; } }
.modelo__titulo { font: 700 clamp(1.375rem, 3.4vw, 1.875rem)/1.1 var(--font-manuscrita-mayus); text-transform: uppercase; padding-bottom: .5rem; margin-bottom: .6rem; position: relative; --sub-w: 20rem; --sub-h: .75rem; }
.cierre { display: grid; gap: 2rem; align-items: center; margin-top: clamp(3.5rem, 8vw, 6rem); }
.cierre__foto { aspect-ratio: 600/250; max-width: 40rem; width: 100%; }
.cierre__lema { --pincel: var(--ph-bosque); --pincel-mascara: var(--m-media); --pincel-inset: -1.5rem -1.5rem -1.75rem -2rem; color: var(--ph-crema); font: 600 clamp(1.875rem, 5vw, 2.75rem)/1.08 var(--font-manuscrita); text-wrap: balance; padding: 1rem 3rem 1rem .5rem; max-width: 14em; }
@media (min-width: 48em) {
  .func__intro { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
@media (min-width: 64em) {
  .pasos { grid-template-columns: repeat(5, 1fr); gap: 1.25rem; }
  .paso { display: flex; flex-direction: column; }
  .paso p { margin-bottom: 1rem; }
  .paso .foto { margin-top: auto; }
  .paso:not(:last-child)::before, .paso:not(:last-child)::after { left: calc(var(--num) / 2); top: calc(var(--num) / 2 - .475rem); width: calc(100% + 1.25rem); height: .95rem; -webkit-mask-image: var(--m-trazo-h); mask-image: var(--m-trazo-h); }
  .paso:not(:last-child)::after { clip-path: inset(0 calc(100% - var(--llenado)) 0 0); }
  .paso__num { margin-bottom: .5rem; }
  .paso__titulo { padding-top: .5rem; }
  .paso .foto { width: 7.5rem; }
  .cierre { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0; }
  .cierre__lema { margin-left: -4rem; position: relative; z-index: 2; }
}

/* ---------- 05 Compromiso + Objetivo ---------- */
.roles { display: grid; gap: 2rem; }
.rol { padding: clamp(1.5rem, 4vw, 2.25rem); background: var(--ph-crema-clara); border: 1px solid var(--color-borde); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); display: grid; gap: 1.5rem; align-content: start; }
.rol__cab { display: flex; align-items: center; gap: 1.25rem; }
.rol__cab h3 { font: 700 clamp(1.125rem, 2.8vw, 1.375rem)/1.15 var(--font-titulo); text-transform: uppercase; text-wrap: balance; }
.rol .foto { aspect-ratio: 355/150; width: 100%; margin-top: .5rem; }
.rol--ph .foto { aspect-ratio: 395/156; }
.banda-objetivo { position: relative; margin-top: calc(var(--seccion-y) - 1rem); padding-block: calc(var(--onda-alto) + 2.5rem); background: var(--ph-bosque); color: var(--ph-crema); }
.banda-objetivo::before, .banda-objetivo::after { background: var(--ph-bosque); }
.banda-objetivo::before { bottom: calc(100% - 1px); -webkit-mask-image: var(--m-onda-asim); mask-image: var(--m-onda-asim); }
.banda-objetivo::after  { top: calc(100% - 1px); transform: scaleY(-1); -webkit-mask-image: var(--m-onda-asim); mask-image: var(--m-onda-asim); }
.objetivo { position: relative; z-index: 1; display: grid; gap: 1.5rem; align-items: center; }
.objetivo__etiqueta { display: flex; align-items: center; gap: 1.25rem; font: 700 clamp(1.5rem, 4vw, 2.25rem)/1.1 var(--font-manuscrita-mayus); text-transform: uppercase; }
.objetivo__etiqueta .i { width: 3.5rem; height: 3.5rem; color: var(--ph-crema); }
.objetivo > p:not(.objetivo__etiqueta) { font: 500 clamp(1.25rem, 2.8vw, 1.75rem)/1.35 var(--font-cuerpo); max-width: 34ch; text-wrap: balance; }
.banda-objetivo .deco--hojas { width: clamp(6rem, 16vw, 13rem); aspect-ratio: 320/360; right: -.5rem; bottom: 0; opacity: .5; }
@media (min-width: 64em) {
  .roles { grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
  .objetivo { grid-template-columns: auto minmax(0, 1fr); gap: 3rem; }
  .objetivo > p:not(.objetivo__etiqueta) { padding-left: 3rem; border-left: 1px solid rgba(247, 243, 232, .5); }
}

/* ---------- 06 Propuesta de inicio + Contacto ---------- */
.inicio__grid { display: grid; gap: 2.5rem; grid-template-areas: "texto" "form" "foto" "pres"; }
.inicio__texto { grid-area: texto; display: grid; gap: 1.25rem; }
.inicio__texto .sub-mano { margin-bottom: .5rem; }
.inicio__foto-wrap { grid-area: foto; position: relative; max-width: 26rem; width: 100%; }
.inicio__foto { aspect-ratio: 315/220; }
.inicio__foto-wrap .rotulo { right: -.5rem; top: -1rem; max-width: 56%; font-size: clamp(1.125rem, 2.6vw, 1.375rem); padding: .85rem 1.4rem .95rem 1.2rem; }
.presenta { grid-area: pres; display: grid; gap: .35rem; }
.presenta__pre { font-size: var(--text-sm); color: var(--color-texto-suave); }
.presenta__nombre { font: 700 clamp(2.25rem, 6vw, 2.75rem)/1 var(--font-manuscrita); padding-bottom: .65rem; margin-bottom: .5rem; position: relative; --sub-w: 15rem; --sub-h: .7rem; width: fit-content; padding-right: 1rem; }
.presenta__datos { font-size: var(--text-sm); line-height: 1.6; }
.presenta__datos strong { font-weight: 700; }
.contacto-lista { display: grid; gap: .25rem; margin-top: 1rem; }
.contacto-lista a, .contacto-lista span { display: inline-flex; align-items: center; gap: .75rem; min-height: 2.75rem; text-decoration: none; font-weight: 600; }
.contacto-lista a:hover span.t { text-decoration: underline wavy var(--ph-terracota); text-underline-offset: .3em; }
.contacto-lista .ico-c { flex: none; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; background: var(--ph-oliva); color: var(--ph-crema); }
.contacto-lista .ico-c .i { width: 1.2rem; height: 1.2rem; }

.form-tarjeta { grid-area: form; position: relative; background: var(--ph-crema-clara); border: 1px solid var(--color-borde); border-radius: 2.5rem 1rem 2.5rem 1rem; box-shadow: var(--shadow-lg); padding: clamp(1.5rem, 4vw, 2.5rem); }
.form__titulo { display: flex; align-items: center; gap: 1rem; font: 700 clamp(1.875rem, 5vw, 2.5rem)/1.05 var(--font-manuscrita-mayus); text-transform: uppercase; padding-bottom: .5rem; margin-bottom: .75rem; position: relative; --sub-w: 17rem; --sub-h: .75rem; }
.form__titulo .i { width: 2.5rem; height: 2.5rem; color: var(--ph-terracota-oscuro); }
.form__intro { margin-bottom: 1.5rem; color: var(--color-texto-suave); }
.form__campos { display: grid; gap: 1.1rem; }
.campo { display: grid; gap: .4rem; }
.campo label, .campo__etiqueta { font: 700 var(--text-sm)/1.3 var(--font-cuerpo); }
.campo .opc { font-weight: 400; color: var(--color-texto-suave); }
.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo textarea {
  width: 100%; min-height: 3rem; padding: .75rem 1rem; background: var(--ph-crema); border: 1.5px solid rgba(46, 79, 52, .4); border-radius: .9rem;
  transition: border-color var(--dur-rapido), box-shadow var(--dur-rapido);
}
.campo textarea { min-height: 7.5rem; resize: vertical; }
.campo input:hover, .campo textarea:hover { border-color: var(--ph-bosque); }
.campo input:focus-visible, .campo textarea:focus-visible { outline: 3px solid var(--ph-hoja); outline-offset: 2px; border-color: var(--ph-bosque); }
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: var(--ph-terracota-oscuro); border-width: 2px; padding: calc(.75rem - .5px) calc(1rem - .5px); }
.campo__ayuda { font-size: var(--text-xs); color: var(--color-texto-suave); }
.campo__error { display: none; align-items: flex-start; gap: .5rem; font-size: var(--text-sm); font-weight: 600; color: var(--ph-terracota-oscuro); }
.campo__error::before { content: ""; flex: none; width: 1.1rem; height: 1.1rem; margin-top: .15rem; background: var(--ph-terracota-oscuro); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='19' fill='none' stroke='%23000' stroke-width='4'/%3E%3Cpath d='M24 14v13M24 33v1' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='19' fill='none' stroke='%23000' stroke-width='4'/%3E%3Cpath d='M24 14v13M24 33v1' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.campo--error .campo__error { display: flex; }
/* Casilla de consentimiento: control nativo invisible de 44×44 px (objetivo táctil) + casilla dibujada en la etiqueta */
.campo--consent { position: relative; display: block; }
.campo--consent input { position: absolute; left: 0; top: 0; width: 2.75rem; height: 2.75rem; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.campo--consent label { position: relative; display: block; min-height: 2.75rem; padding: .5rem 0 .5rem 3.25rem; font-weight: 400; font-size: var(--text-base); cursor: pointer; }
.campo--consent label::before { content: ""; position: absolute; left: .5rem; top: .5rem; width: 1.75rem; height: 1.75rem; border: 1.5px solid rgba(46, 79, 52, .55); border-radius: .5rem; background: var(--ph-crema) center / 70% no-repeat; transition: background-color var(--dur-rapido), border-color var(--dur-rapido); }
.campo--consent input:checked + label::before { background-color: var(--ph-oliva); border-color: var(--ph-oliva); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M10 25l9 9 19-20' fill='none' stroke='%23F7F3E8' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.campo--consent input:focus-visible { outline: none; }
.campo--consent input:focus-visible + label::before { outline: 3px solid var(--ph-hoja); outline-offset: 3px; }
.campo--consent input[aria-invalid="true"] + label::before { border-color: var(--ph-terracota-oscuro); border-width: 2px; }
.campo--consent .campo__error { padding-left: 3.25rem; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__enviar { display: grid; gap: 1rem; margin-top: .5rem; justify-items: start; }
.form__nota { font-size: var(--text-xs); color: var(--color-texto-suave); max-width: 44ch; }
.form__estado { margin-top: 1rem; }
.form__estado:empty { display: none; }
.aviso { display: flex; gap: .85rem; align-items: flex-start; padding: 1rem 1.25rem; border-radius: 1rem; background: var(--ph-durazno-tinte); font-weight: 600; }
.aviso a { color: var(--ph-bosque); }
.aviso--error { background: #F9E3D8; outline: 1px solid rgba(176, 74, 38, .35); }
.form__exito { display: none; text-align: left; gap: 1rem; justify-items: start; padding-block: .5rem; }
.form__exito:focus { outline: none; }
.form-tarjeta--ok .form__exito { display: grid; }
.form-tarjeta--ok .form, .form-tarjeta--ok .form__intro, .form-tarjeta--ok .form__titulo, .form-tarjeta--ok .form__contacto-alt { display: none; }
.form-tarjeta--mailto.form-tarjeta--ok .form__contacto-alt { display: flex; }
.form__exito .form__volver { background: none; border: 0; cursor: pointer; padding-inline: 0; }
.form__exito h3 { font: 700 clamp(1.75rem, 4.6vw, 2.25rem)/1.1 var(--font-manuscrita); }
.form__contacto-alt { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--color-borde); display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; align-items: center; font-size: var(--text-sm); }
.form__contacto-alt span { color: var(--color-texto-suave); }
.form__contacto-alt a { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; font-weight: 700; }
.form__contacto-alt .i { width: 1.35rem; height: 1.35rem; color: var(--ph-oliva); }
.inicio .deco--hojas { width: clamp(8rem, 18vw, 13rem); aspect-ratio: 320/360; right: 0; bottom: 0; opacity: .8; }
@media (min-width: 64em) {
  .inicio__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6.5fr); grid-template-areas: "texto form" "foto form" "pres form"; gap: 2.75rem 4.5rem; align-items: start; }
  .form-tarjeta { position: sticky; top: 6rem; }
}

/* ---------- Pie ---------- */
.pie { position: relative; margin-top: calc(var(--onda-alto) + 1rem); padding: 2.5rem 0 2rem; background: var(--ph-bosque); color: var(--ph-crema); }
.pie::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: var(--onda-alto); background: var(--ph-bosque); -webkit-mask: var(--m-onda-pie) center/100% 100% no-repeat; mask: var(--m-onda-pie) center/100% 100% no-repeat; pointer-events: none; }
.pie__grid { display: grid; gap: 1.5rem; justify-items: center; text-align: center; }
.pie__logo { width: 11rem; height: auto; }
.pie__lema { letter-spacing: .04em; font-size: var(--text-sm); max-width: none; }
.pie__lema strong { font-family: var(--font-titulo); font-weight: 600; }
.pie__contacto { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.75rem; }
.pie__contacto a { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; font-weight: 600; text-decoration: none; }
.pie__contacto a:hover { text-decoration: underline wavy var(--ph-terracota); text-underline-offset: .3em; }
.pie__contacto .i { width: 1.25rem; height: 1.25rem; }
.pie__legal { font-size: var(--text-xs); opacity: .85; max-width: none; }
@media (min-width: 64em) {
  .pie__grid { grid-template-columns: auto 1fr; justify-items: start; text-align: left; align-items: center; gap: 1.75rem 2.5rem; }
  .pie__logo { grid-area: 1 / 1; }
  .pie__contacto { grid-area: 1 / 2; justify-self: end; }
  .pie__lema { grid-area: 2 / 1 / 3 / -1; justify-self: stretch; display: flex; align-items: center; justify-content: center; gap: 1.5rem; }
  .pie__lema::before, .pie__lema::after { content: ""; flex: 1; max-width: 16rem; height: 1px; background: rgba(247, 243, 232, .35); }
  .pie__legal { grid-area: 3 / 1 / 4 / -1; justify-self: stretch; text-align: center; }
}

/* ==========================================================================
   Movimiento · Fase 4
   Un momento memorable (la enredadera del proceso) + entradas sobrias.
   Curva y duraciones del sistema: --ease-vivo, --dur-rapido (160) / --dur-normal (280).
   Todo vive bajo no-preference; el estado "oculto" exige la clase .js (head) y
   se retira solo si main.js no carga: sin JS o sin IntersectionObserver todo es visible.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @keyframes sube     { from { opacity: 0; translate: 0 .75rem; } }
  @keyframes sube-corto { from { opacity: 0; translate: 0 -.25rem; } }
  @keyframes pinta    { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes asienta  { from { scale: 1.06; } }
  @keyframes brota    { from { opacity: 0; scale: .7; } }
  @keyframes balanceo { from { rotate: -1.4deg; } to { rotate: 1.4deg; } }

  /* ---- Hero: secuencia de carga (CSS puro). Orden de lectura: lema → CTA ---- */
  .hero__lema          { animation: sube 520ms var(--ease-vivo) both; }
  .hero__lema::before  { animation: pinta 760ms var(--ease-vivo) both; }              /* la pincelada se "pinta" */
  .hero__lema::after   { animation: pinta 620ms var(--ease-vivo) 460ms both; }         /* y luego el subrayado */
  .hero__sub           { animation: sube 520ms var(--ease-vivo) 240ms both; }
  .hero__apoyo         { animation: sube 520ms var(--ease-vivo) 300ms both; }
  .hero__acciones      { animation: sube 520ms var(--ease-vivo) 360ms both; }
  .hero__firma         { animation: sube 520ms var(--ease-vivo) 420ms both; }
  .hero__foto img      { animation: asienta 1200ms var(--ease-vivo) both; }           /* sin fundido: la foto (LCP) se ve de inmediato */
  .hero .deco--hojas   { animation: brota 1000ms var(--ease-vivo) 250ms backwards, balanceo 7s ease-in-out 1.3s infinite alternate; }
  .hero .deco--rama    { transform-origin: 0 100%; animation: brota 1000ms var(--ease-vivo) 450ms backwards, balanceo 8s ease-in-out 1.5s infinite alternate-reverse; }

  /* ---- Entradas al hacer scroll: tres tratamientos según el tipo de contenido ---- */
  .js [data-r] { opacity: 0; transition: opacity 420ms var(--ease-vivo), translate 520ms var(--ease-vivo), scale 520ms var(--ease-vivo); }
  .js [data-r="texto"] { translate: 0 .75rem; }                                         /* texto: sube 12 px */
  .js [data-r="foto"]  { translate: 0 1.25rem; transition-duration: 520ms, 700ms, 700ms; }  /* foto: sube 20 px y se asienta */
  .js [data-r="foto"] img { scale: 1.05; transition: scale 1100ms var(--ease-vivo); }
  .js [data-r="pop"]   { scale: .9; translate: 0 .5rem; }                               /* iconos: brotan */
  .js [data-r].is-visible { opacity: 1; translate: 0 0; scale: 1; }
  .js [data-r="foto"].is-visible img { scale: 1; }

  /* ---- Subrayado terracota que se dibuja de izquierda a derecha (una vez por título) ---- */
  .js [data-sub]::after { clip-path: inset(0 100% 0 0); transition: clip-path 640ms var(--ease-vivo) 160ms; }
  .js [data-sub].is-visible::after { clip-path: inset(0 0 0 0); }

  /* ---- La enredadera: la línea crece con el scroll y en cada paso brota una hoja ---- */
  .js .paso { --llenado: 0%; }
  .js .paso__num { opacity: .7; scale: .9; transition: opacity 360ms var(--ease-vivo), scale 480ms var(--ease-vivo); }
  .js .paso--alcanzado .paso__num { opacity: 1; scale: 1; }
  .js .paso__num::after { opacity: 0; scale: .4; rotate: -24deg; transform-origin: 50% 100%; transition: opacity 300ms var(--ease-vivo) 120ms, scale 620ms var(--ease-vivo) 120ms, rotate 620ms var(--ease-vivo) 120ms; }
  .js .paso--alcanzado .paso__num::after { opacity: 1; scale: 1; rotate: var(--hoja-giro, 0deg); }

  /* ---- Estados del formulario ---- */
  .campo--error .campo__error { animation: sube-corto 220ms var(--ease-vivo) both; }
  .aviso { animation: sube 260ms var(--ease-vivo) both; }
  .form-tarjeta--ok .form__exito { animation: sube 420ms var(--ease-vivo) both; }
}

/* ---------- Movimiento: sin animaciones si el usuario lo pide ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}