/* ==========================================================================
   Experiencia v4 (sep. 2026)
   Referencias grabadas por la usuaria (Casa di Solare, Ivy, Faers, Acron),
   traducidas a la marca: sol que asciende dentro de un arco, órbita de
   palabras, panel en arco que cubre el inicio, texto que se ilumina al leer,
   palabras gigantes en movimiento, capítulos numerados con índice fijo,
   paso a paso con contador y preguntas numeradas.

   Regla de robustez: sin JavaScript todo se ve en su estado final.
   js/experience.js solo agrega la clase .xp en <html> y el movimiento ligado
   al scroll. Con prefers-reduced-motion todo queda estático.
   Solo colores de la paleta; el ámbar nunca es texto informativo.
   ========================================================================== */

/* ---- Escenario de inicio -------------------------------------------------- */
.stage { position: relative; }

.hero-x {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 7rem;
  padding-bottom: var(--sp-2xl);
  background: var(--ivory);
  overflow: hidden;
}
.hero-x__grid {
  display: grid;
  gap: var(--sp-xl);
  align-items: center;
  position: relative;
  z-index: 2;
}
.hero-x .hero-title {
  font-size: clamp(2.2rem, 1.3rem + 2.9vw, 3.9rem);
  max-width: 22ch;
}
/* Logo con slogan en el inicio: el slogan vive debajo del nombre, como parte del logo */
.hero-x__logo { display: block; width: clamp(190px, 13vw, 210px); height: auto; margin-bottom: var(--sp-sm); }
.hero-x .hero-sub { max-width: 44ch; }

.hero-x__art {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 600 / 720;
  justify-self: center;
  border: 1.5px solid var(--camel);
  border-radius: 50% 50% var(--radius-lg) var(--radius-lg) / 42% 42% var(--radius-lg) var(--radius-lg);
  overflow: hidden;
  background: var(--ivory);
}
.hero-x__art svg { width: 100%; height: 100%; }

.hero-x__cue {
  position: absolute;
  left: 50%;
  bottom: var(--sp-md);
  transform: translateX(-50%);
  z-index: 3;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  font-size: var(--step-2xs);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brown);
}
.hero-x__cue-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 5px rgba(217,139,43,.18);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-x__cue-dot { animation: cuePulse 2.4s var(--ease-in-out) infinite; }
}
@keyframes cuePulse {
  0%, 100% { transform: translateY(0); box-shadow: 0 0 0 5px rgba(217,139,43,.18); }
  50% { transform: translateY(6px); box-shadow: 0 0 0 9px rgba(217,139,43,.08); }
}

/* Escena: sol, órbita y rayo */
.scene__sun { transform: translateY(calc((0.5 - var(--p, .5)) * 150px)); }
.scene__orbit {
  transform-box: view-box;
  transform-origin: 300px 330px;
  rotate: calc(var(--p, 0) * 70deg);
}
@media (prefers-reduced-motion: no-preference) {
  .scene__orbit { animation: orbitSpin 110s linear infinite; }
  /* Amanecer al cargar: el sol arranca detrás de las colinas y sube */
  .xp .scene__sun { translate: 0 170px; transition: translate 2.2s var(--ease-out) .2s; }
  .xp .hero-x.is-risen .scene__sun { translate: 0 0; }
}
@keyframes orbitSpin { to { transform: rotate(360deg); } }

@media (min-width: 860px) {
  .hero-x__grid { grid-template-columns: 1.1fr .9fr; }
  .hero-x__art { width: auto; height: min(68svh, 640px); max-width: 100%; }
  .hero-x__cue { display: flex; }
}

/* En escritorio el inicio queda fijo y el manifiesto sube encima en arco */
@media (min-width: 860px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) {
  .hero-x {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 0;
    padding-bottom: var(--sp-xl);
  }
}

/* ---- Manifiesto: panel teal con remate en arco ---------------------------- */
.manifesto--arch {
  --arch: clamp(56px, 11vw, 190px);
  position: relative;
  z-index: 3;
  padding-top: calc(var(--arch) + var(--sp-xl));
  border-radius: 50% 50% 0 0 / var(--arch) var(--arch) 0 0;
  overflow: hidden;
}
.manifesto--arch .manifesto__title { margin-inline: auto; text-align: center; }
.manifesto--arch .kicker { display: flex; justify-content: center; }

.paint-text {
  margin: var(--sp-2xl) auto 0;
  max-width: 34ch;
  font-size: clamp(1.35rem, 1rem + 1.6vw, 2.35rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ivory);
  text-wrap: pretty;
}
.xp .paint-text .w { opacity: .24; transition: opacity .45s var(--ease-out); }
.xp .paint-text .w.is-lit { opacity: 1; }

/* Palabras gigantes en movimiento (Sol → Vida) */
.marquee {
  margin-top: var(--sp-2xl);
  padding-block: var(--sp-md);
  border-block: 1px solid rgba(201,164,106,.45);
  overflow: hidden;
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: .4em;
  width: max-content;
  font-size: clamp(3.2rem, 1.6rem + 7.5vw, 9.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--ivory);
  transform: translateX(var(--mx, 0px));
  will-change: transform;
}
.marquee__sep {
  flex: none;
  width: .32em; height: .32em;
  border-radius: 50%;
  background: var(--amber);
}

/* ---- Soluciones: capítulos numerados ------------------------------------- */
.chapters__layout { display: grid; gap: var(--sp-xl); }
.chapters__index { display: none; }
.chapters__index a {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: var(--step-2xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--teal);
  border: 1px solid var(--line);
  background: var(--ivory);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.chapters__index a:hover { border-color: var(--teal); }
.chapters__index a[aria-current="true"] { background: var(--teal); color: var(--ivory); border-color: var(--teal); }

@media (min-width: 1080px) {
  .chapters__layout { grid-template-columns: minmax(0, 1fr) 46px; gap: var(--sp-lg); }
  .chapters__list { grid-column: 1; grid-row: 1; }
  .chapters__index {
    grid-column: 2; grid-row: 1;
    display: flex; flex-direction: column; gap: .55rem;
    position: sticky; top: calc(50svh - 130px);
    align-self: start;
  }
}

.chapter {
  display: grid;
  gap: var(--sp-xl);
  align-items: center;
  padding-block: var(--sp-2xl);
  border-top: 1px solid var(--line);
  scroll-margin-top: 90px;
}
.chapter:first-child { border-top: none; padding-top: 0; }

.chapter__cat {
  font-size: var(--step-2xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brown);
}
.chapter__num {
  display: block;
  margin: .12em 0 .08em -.05em;
  font-size: clamp(5rem, 2.8rem + 9vw, 10.5rem);
  font-weight: 700;
  line-height: .85;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--amber);
}
.chapter__badge {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin-bottom: var(--sp-sm);
  padding: .45em 1em;
  border: 1.5px solid var(--amber);
  border-radius: var(--radius-pill);
  font-size: var(--step-2xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal);
}
.chapter__badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.chapter__title {
  font-size: var(--step-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--teal);
  max-width: 14ch;
}
.chapter__text > p:not(.chapter__cat):not(.chapter__badge) {
  margin-top: var(--sp-sm);
  font-size: var(--step-md);
  color: var(--brown);
  max-width: 46ch;
}
.chapter__points { margin-top: var(--sp-md); display: grid; max-width: 46ch; }
.chapter__points li {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  padding-block: .75rem;
  border-top: 1px solid var(--line);
  font-size: var(--step-xs);
  font-weight: 500;
  color: var(--teal);
}
.chapter__points li:last-child { border-bottom: 1px solid var(--line); }
.chapter__points li::before {
  content: '';
  flex: none;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--amber);
}
.chapter .btn-link, .chapter .btn { margin-top: var(--sp-lg); }

.chapter__art {
  margin: 0;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 4 / 5;
  justify-self: center;
  border: 1.5px solid var(--camel);
  border-radius: 50% 50% var(--radius-md) var(--radius-md) / 36% 36% var(--radius-md) var(--radius-md);
  overflow: hidden;
  background: var(--ivory);
}
.chapter__art svg, .chapter__art img { width: 100%; height: 100%; object-fit: cover; }

/* El marco en arco se revela de abajo hacia arriba, como un amanecer */
/* (el recorte va en el hijo: si se recorta el propio marco, IntersectionObserver
   no lo detecta como visible y nunca se revela. Ojo: el recorte también esconde
   la foto de la carga diferida del navegador; main.js la pide al terminar de
   cargar la página, ver "Fotos listas antes de llegar a ellas") */
.chapter__art.reveal { opacity: 1; transform: none; }
.chapter__art.reveal > * { clip-path: inset(100% 0 0 0); }
.chapter__art.reveal.is-visible > * { clip-path: inset(0 0 0 0); transition: clip-path 1.3s var(--ease-out) .1s; }
@media (prefers-reduced-motion: reduce) {
  .chapter__art.reveal > * { clip-path: none; }
}

.chapter__flow { grid-column: 1 / -1; margin-top: 0; }

@media (min-width: 900px) {
  .chapter { grid-template-columns: 1.05fr .95fr; gap: var(--sp-2xl); }
  .chapter:nth-child(even) .chapter__art { order: -1; }
}

/* ---- Cómo trabajamos: contador fijo + pasos ------------------------------ */
.process-x__grid { display: grid; gap: var(--sp-xl); }
.process-x__counter {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-top: var(--sp-xl);
  color: var(--teal);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.process-x__counter [data-step-current] {
  font-size: clamp(4rem, 2.4rem + 5vw, 7.5rem);
  line-height: .85;
  letter-spacing: -0.05em;
}
.process-x__counter span:last-child { font-size: var(--step-md); color: var(--brown); font-weight: 600; }
.process-x__bar {
  max-width: 320px;
  height: 3px;
  margin-top: var(--sp-sm);
  border-radius: 3px;
  background: rgba(201,164,106,.4);
  overflow: hidden;
}
.process-x__bar i {
  display: block;
  height: 100%;
  width: calc(var(--step, 1) * 20%);
  background: var(--amber);
  border-radius: 3px;
  transition: width .6s var(--ease-out);
}
.process-x__note { margin-top: var(--sp-md); font-size: var(--step-2xs); color: var(--brown); }

.process-x__steps { display: grid; gap: var(--sp-md); }
.pstep {
  position: relative;
  padding: var(--sp-lg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--ivory);
  transition: border-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.pstep.is-active { border-color: var(--amber); box-shadow: 0 30px 60px -44px rgba(31,91,90,.55); }
.pstep__num {
  font-size: var(--step-2xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brown);
}
.pstep h3 {
  margin-top: .4rem;
  font-size: var(--step-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--teal);
}
.pstep > p { margin-top: .4rem; font-size: var(--step-md); color: var(--brown); }
.pstep__list { margin-top: var(--sp-md); display: grid; gap: .55rem; }
.pstep__list li {
  display: flex; align-items: baseline; gap: .7rem;
  font-size: var(--step-xs); font-weight: 500; color: var(--teal);
}
.pstep__list li::before {
  content: ''; flex: none;
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--amber);
}
.pstep.is-key { background: var(--teal); border-color: var(--teal); }
.pstep.is-key .pstep__num, .pstep.is-key h3, .pstep.is-key > p, .pstep.is-key .pstep__list li { color: var(--ivory); }

@media (min-width: 960px) {
  .process-x__grid { grid-template-columns: .85fr 1.15fr; gap: var(--sp-2xl); align-items: start; }
  .process-x__intro { position: sticky; top: 130px; }
  .pstep { min-height: 36svh; display: flex; flex-direction: column; justify-content: center; padding: var(--sp-xl); }
}

/* ---- Preguntas frecuentes numeradas -------------------------------------- */
.faq-x { gap: 0; border-top: 1px solid var(--line); }
.faq-x .faq-item {
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 0;
}
.faq-x .faq-item summary {
  justify-content: flex-start;
  gap: var(--sp-md);
  padding-block: 1.2rem;
  font-size: var(--step-md);
  font-weight: 500;
}
.faq-num {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--teal);
  display: grid; place-items: center;
  font-size: var(--step-2xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.faq-x .faq-item[open] .faq-num { background: var(--teal); color: var(--ivory); }
.faq-x .faq-item summary::after,
.faq-x .faq-item[open] summary::after {
  content: '+';
  margin-left: auto;
  font-size: 1.9rem;
  font-weight: 300;
  line-height: 1;
  color: var(--teal);
  transition: transform var(--dur-med) var(--ease-out);
}
.faq-x .faq-item[open] summary::after { transform: rotate(45deg); }
.faq-x .faq-item p { padding: 0 0 1.4rem calc(44px + var(--sp-md)); font-size: var(--step-sm); }

/* ---- Cierre: panel teal en arco con sol en el horizonte ------------------ */
.closing {
  --arch: clamp(56px, 11vw, 190px);
  padding-top: calc(var(--arch) + var(--sp-lg));
  border-radius: 50% 50% 0 0 / var(--arch) var(--arch) 0 0;
  overflow: hidden;
}
.closing__sun {
  display: block;
  width: min(440px, 80%);
  height: auto;
  margin: 0 auto var(--sp-xl);
}

/* ---- Llamado flotante ---------------------------------------------------- */
.float-cta {
  position: fixed;
  left: var(--sp-md);
  bottom: var(--sp-md);
  z-index: 590;
  min-height: 52px;
  transform: translate(0, 160%);
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 18px 40px -18px rgba(31,91,90,.6);
  transition: transform .5s var(--ease-out), opacity .35s var(--ease-out), visibility 0s .5s, background var(--dur-fast) var(--ease-out);
}
.float-cta.is-shown {
  transform: translate(0, 0);
  opacity: 1;
  visibility: visible;
  transition: transform .5s var(--ease-out), opacity .35s var(--ease-out), visibility 0s, background var(--dur-fast) var(--ease-out);
}
.float-cta.is-shown:hover { transform: translate(0, -1px); }
/* En escritorio el encabezado ya muestra siempre "Hablar por WhatsApp":
   el llamado flotante solo hace falta en pantallas pequeñas. */
@media (min-width: 900px) { .float-cta { display: none; } }

/* El contador del paso a paso solo tiene sentido cuando la columna queda fija */
@media (max-width: 959px) {
  .process-x__counter, .process-x__bar { display: none; }
}
.manifesto--arch { padding-bottom: var(--sp-xl); }

/* ==========================================================================
   v5 (sep. 2026) — imágenes conceptuales de Meshy
   Todas llevan "Visualización conceptual" (Prompt Maestro V3, secciones 7–9).
   ========================================================================== */

/* ---- Hero: foto dentro del arco + órbita alrededor del sol real ---------- */
.hero-x__art { margin: 0; }
.hero-x__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: translateY(calc(var(--p, 0) * 36px)) scale(calc(1.02 + var(--p, 0) * .06));
  transform-origin: 70% 30%;
}
.hero-x__orbit {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.hero-x__ring { transform-box: view-box; transform-origin: 915px 255px; rotate: calc(var(--p, 0) * 80deg); }
@media (prefers-reduced-motion: no-preference) {
  .hero-x__ring { animation: orbitSpin 90s linear infinite; }
  .xp .hero-x__photo { scale: 1.12; transition: scale 2.6s var(--ease-out) .1s; }
  .xp .hero-x.is-risen .hero-x__photo { scale: 1; }
}
.hero-x__tag {
  position: absolute;
  left: 50%; bottom: 10px;
  transform: translateX(-50%);
  padding: .15em .6em;
  border-radius: var(--radius-pill);
  background: rgba(31,91,90,.5);
  color: var(--ivory);
  font-size: 8.5px;
  font-weight: 400;
  letter-spacing: .03em;
  white-space: nowrap;
  opacity: .85;
}

/* ---- Manifiesto: macro de celdas solares bajo velo teal ------------------ */
.manifesto--arch {
  background:
    linear-gradient(180deg, rgba(31,91,90,.80) 0%, rgba(31,91,90,.93) 45%, rgba(31,91,90,.97) 100%),
    url('../assets/img/macro-celdas-1536.webp') center top / cover no-repeat,
    var(--teal);
}
@media (max-width: 900px) {
  .manifesto--arch {
    background:
      linear-gradient(180deg, rgba(31,91,90,.82) 0%, rgba(31,91,90,.95) 40%, rgba(31,91,90,.97) 100%),
      url('../assets/img/macro-celdas-900.webp') center top / cover no-repeat,
      var(--teal);
  }
}

/* ---- Del sol al movimiento ------------------------------------------------ */
/* Estado base (sin JS o con "reducir movimiento"): tres escenas seguidas */
.story { position: relative; padding-block: var(--sp-2xl); background: var(--ivory); }
.story__stage { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.story__word { display: none; }
.story__frame { position: relative; display: grid; gap: var(--sp-lg); }
.story__scene { margin: 0; position: relative; }
.story__scene img {
  width: 100%; height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1.5px solid var(--camel);
  border-radius: 50% 50% var(--radius-md) var(--radius-md) / 30% 30% var(--radius-md) var(--radius-md);
}
.story__scene figcaption { display: grid; gap: .35rem; margin-top: var(--sp-sm); color: var(--teal); }
.story__num { font-size: var(--step-2xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--brown); }
.story__scene strong { font-size: var(--step-lg); font-weight: 600; line-height: 1.2; max-width: 26ch; }
.story__tag { font-size: 8.5px; color: var(--brown); opacity: .85; }
@media (min-width: 860px) { .story__frame { grid-template-columns: repeat(3, 1fr); } }

/* Modo inmersivo (con JS): el arco se abre y las escenas se funden */
@media (prefers-reduced-motion: no-preference) {
  .xp .story { height: 420svh; padding: 0; }
  .xp .story__stage {
    position: sticky; top: 0;
    height: 100svh;
    max-width: none; padding: 0;
    display: grid; place-items: center;
    overflow: hidden;
  }
  .xp .story__frame {
    display: block;
    width: var(--fw, 420px);
    height: var(--fh, 76svh);
    overflow: hidden;
    border: 1.5px solid var(--camel);
    border-radius: var(--fr, 50% 50% 28px 28px / 40% 40% 28px 28px);
    background: var(--teal);
    will-change: width, height;
  }
  .xp .story__scene { position: absolute; inset: 0; opacity: 0; }
  .xp .story__scene[data-scene="1"] { opacity: 1; }
  .xp .story__scene img {
    height: 100%; aspect-ratio: auto;
    border: none; border-radius: 0;
    object-position: 68% 56%;
  }
  .xp .story__scene figcaption {
    position: absolute; left: 0; right: 0; bottom: 0;
    margin: 0;
    padding: clamp(5rem, 14vh, 9rem) clamp(1.25rem, 4vw, 3.5rem) clamp(1.5rem, 5vh, 3rem);
    background: linear-gradient(180deg, rgba(31,91,90,0) 0%, rgba(31,91,90,.78) 45%, rgba(31,91,90,.92) 100%);
    color: var(--ivory);
    opacity: var(--cap, 1);
  }
  .xp .story__num { color: var(--ivory); }
  .xp .story__scene strong { font-size: clamp(1.5rem, 1rem + 2.2vw, 3rem); font-weight: 700; letter-spacing: -0.02em; max-width: 22ch; }
  .xp .story__tag {
    position: absolute; top: 14px; right: 16px;
    padding: .15em .6em; border-radius: var(--radius-pill);
    background: rgba(31,91,90,.5); color: var(--ivory);
    font-size: 8.5px; letter-spacing: .03em;
    opacity: calc(var(--cap, 1) * .85);
  }
  .xp .story__word {
    display: block;
    position: absolute; top: 50%;
    margin: 0;
    font-size: clamp(3rem, 1.5rem + 5.5vw, 7.5rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--teal);
    white-space: nowrap;
    opacity: var(--wo, 1);
    pointer-events: none;
  }
  .xp .story__word--l { right: calc(50% + var(--fw, 420px) / 2 + 2vw); transform: translate(calc(var(--wx, 0) * -1px), -50%); }
  .xp .story__word--r { left: calc(50% + var(--fw, 420px) / 2 + 2vw); transform: translate(calc(var(--wx, 0) * 1px), -50%); }
  @media (max-width: 859px) { .xp .story__word { display: none; } }
}

/* ---- Capítulos: objetos 3D flotando sobre un arco ------------------------ */
.chapter__art--object {
  position: relative;
  max-width: 520px;
  aspect-ratio: 1;
  border: none;
  border-radius: 0;
  background: none;
  overflow: visible;
}
.chapter__art--object::before {
  content: '';
  position: absolute;
  inset: 6% 9% 4%;
  border: 1.5px solid var(--camel);
  border-bottom: none;
  border-radius: 50% 50% 0 0 / 42% 42% 0 0;
}
.chapter__art--object::after {
  content: '';
  position: absolute;
  left: 9%; right: 9%; bottom: 4%;
  height: 1.5px;
  background: var(--camel);
}
.chapter__art--object img {
  position: relative;
  width: 100%; height: 100%;
  object-fit: contain;
  transform: translateY(var(--float, 0px));
  transition: transform .15s linear;
}

/* ---- Pasos: íconos de cerámica ------------------------------------------ */
.pstep__icon {
  width: 104px; height: 104px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--camel);
  margin-bottom: var(--sp-sm);
  background: var(--ivory);
}
.pstep.is-key .pstep__icon { border-color: var(--ivory); }
@media (min-width: 960px) {
  .pstep { padding-right: calc(var(--sp-xl) + 150px); }
  .pstep__icon { position: absolute; top: 50%; right: var(--sp-xl); width: 140px; height: 140px; margin: 0; transform: translateY(-50%); }
}

/* ---- Cierre: atardecer en ventana de arco -------------------------------- */
.closing__photo {
  width: min(100% - 2 * var(--gutter), 1180px);
  margin: 0 auto var(--sp-2xl);
  aspect-ratio: 16 / 7;
  overflow: hidden;
  border: 1.5px solid var(--camel);
  border-radius: 50% 50% var(--radius-lg) var(--radius-lg) / 70% 70% var(--radius-lg) var(--radius-lg);
}
.closing__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
@media (max-width: 700px) {
  .closing__photo { aspect-ratio: 4 / 5; border-radius: 50% 50% var(--radius-md) var(--radius-md) / 36% 36% var(--radius-md) var(--radius-md); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 860px) {
  .xp .story__stage { padding-top: 72px; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 859px) {
  .xp .story__tag { top: 90px; right: 12px; }
}

/* Hero v5: la foto va en una ventana en arco; la órbita queda por fuera y
   puede desbordar sobre el marfil (como las letras de Casa di Solare). */
.hero-x__art { border: none; border-radius: 0; background: none; overflow: visible; }
.hero-x__window {
  position: absolute; inset: 0;
  overflow: hidden;
  border: 1.5px solid var(--camel);
  border-radius: 50% 50% var(--radius-lg) var(--radius-lg) / 42% 42% var(--radius-lg) var(--radius-lg);
  background: var(--ivory);
}
.hero-x__orbit { overflow: visible; z-index: 2; }

/* Palabras laterales de "Del sol al movimiento": caben sin salirse */
@media (prefers-reduced-motion: no-preference) {
  .xp .story__word { font-size: clamp(2.6rem, 1rem + 4vw, 5.6rem); white-space: normal; line-height: .95; }
  .xp .story__word--l { top: 36%; text-align: right; }
  .xp .story__word--r { top: 64%; text-align: left; }
}
@media (prefers-reduced-motion: no-preference) {
  .xp .story__scene figcaption { opacity: var(--co, 1); }
}

/* Objetos: el arco los enmarca por fuera (la imagen tiene fondo marfil opaco
   y taparía una línea dibujada detrás de ella). */
.chapter__art--object { padding: 10% 10% 4%; }
.chapter__art--object::before { inset: 0 0 4% 0; }
.chapter__art--object::after { left: 0; right: 0; }

/* Manifiesto: la textura de las celdas se insinúa arriba y se funde en teal */
.manifesto--arch {
  background:
    linear-gradient(180deg, rgba(31,91,90,.62) 0%, rgba(31,91,90,.88) 38%, rgba(31,91,90,.97) 70%),
    url('../assets/img/macro-celdas-1536.webp') center top / cover no-repeat,
    var(--teal);
}
@media (max-width: 900px) {
  .manifesto--arch {
    background:
      linear-gradient(180deg, rgba(31,91,90,.66) 0%, rgba(31,91,90,.9) 36%, rgba(31,91,90,.97) 70%),
      url('../assets/img/macro-celdas-900.webp') center top / cover no-repeat,
      var(--teal);
  }
}
/* Móvil: los textos de la historia quedan por encima de los botones flotantes */
@media (prefers-reduced-motion: no-preference) and (max-width: 859px) {
  .xp .story__scene figcaption { padding-bottom: 112px; }
}

/* Fotos de los capítulos (oct. 2026): la etiqueta IA va dentro del marco en arco */
.chapter__art { position: relative; }
.chapter__art .chapter__tag { width: auto; height: auto; white-space: nowrap; }

/* Imágenes en <picture> (AVIF + WebP, oct. 2026): el envoltorio no cambia el diseño */
.pic-contents { display: contents; }
.pic-fill { display: block; width: 100%; height: 100%; }
.pic-fill img { width: 100%; height: 100%; object-fit: cover; }