/* ============================================================
   Antes del Resultado — hero
   Composición al estilo del componente MinimalistHero:
   copy breve a un flanco, tipografía gigante al otro,
   protagonista centrada sobre una franja vertical.
   ============================================================ */

:root {
  /* color — hero blanco con franja vertical clara.
     Contrastes sobre el punto más oscuro de la superficie:
     ink 15.4:1 · ink-soft 8.0:1. */
  --surface:    #FFFFFF;
  --surface-hi: #FFFFFF;
  --surface-lo: #FBFBFA;
  /* franja vertical tras la protagonista. Para recuperar el verde de marca:
     --band: #EDF0EA */
  --band:       #F3F3F1;
  --frame:      #A5AF86;                    /* oliva claro del marco */
  --frame-w:    clamp(2px, .22vw, 3px);
  --ink:        #232622;
  --ink-soft:   #4E534B;
  --page:       #F0F0EE;

  /* medidas */
  --inset:   clamp(12px, 1.6vw, 22px);
  --edge:    clamp(20px, 3.2vw, 46px);
  --radius:  clamp(14px, 1.6vw, 24px);

  /* tipografía
     --font-title es la del rótulo de referencia (letra/): sans de alto
     contraste y trazo fino. Solo tiene un peso y está pensada para
     tamaños grandes; el texto pequeño sigue en Inter por legibilidad. */
  --font-title:   'Italiana', Georgia, serif;
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-ui:      'Inter', system-ui, sans-serif;
  --title-size:   clamp(2.9rem, 5.7vw, 6.4rem);
  --pillar-size:  clamp(1.05rem, 2.3vw, 2.3rem);
  --micro:        clamp(.62rem, .72vw, .72rem);

  /* geometría del hero */
  --title-col: min(34vw, 520px);
  --copy-col:  min(24vw, 320px);
  --band-w:    clamp(250px, 34vw, 500px);
  --photo-h:   86%;
  --photo-max: min(42vw, 470px);

  /* motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: .75rem 1rem;
  background: var(--ink);
  color: var(--surface);
  font-size: .85rem;
}
.skip-link:focus { left: var(--inset); top: var(--inset); }

/* ---------- superficie del hero ---------- */

/* el olivo del marco se extiende del borde interno hacia afuera: el gutter
   (entre el borde de la tarjeta y el filo de la pantalla) se pinta con --frame,
   así la superficie blanca queda enmarcada sobre el olivo */
.hero {
  padding: var(--inset);
  background: var(--frame);
}

.hero__surface {
  position: relative;
  overflow: hidden;
  /* svh, no dvh: dvh crece cuando el móvil oculta su barra al hacer scroll,
     y como el retrato y los pilares se anclan en porcentaje, saltaban 42px
     a media lectura. svh es la altura con la barra visible y no cambia. */
  height: calc(100vh - var(--inset) * 2);
  height: calc(100svh - var(--inset) * 2);
  min-height: 560px;
  /* el marco va por dentro del radio: recorta también la foto y la franja */
  border: var(--frame-w) solid var(--frame);
  border-radius: var(--radius);
  background:
    radial-gradient(130% 100% at 50% -15%, var(--surface-hi) 0%, var(--surface) 55%, var(--surface-lo) 100%);
  isolation: isolate;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

/* ---------- barra superior ---------- */

/* de borde a borde con relleno propio: así el 100% de sus hijos absolutos
   coincide con el de la superficie y comparten eje con la pirámide */
.hero__top {
  position: absolute;
  z-index: 3;
  top: var(--edge);
  left: 0;
  right: 0;
  padding-inline: var(--edge);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .1rem;
  min-height: 44px;
  color: var(--ink);
}

/* la firma, en la misma tipografía que el título */
.brand__name {
  font-family: var(--font-title);
  font-size: clamp(1.15rem, 1.55vw, 1.6rem);
  line-height: 1.1;
  letter-spacing: .04em;
}

.brand__tag {
  font-size: calc(var(--micro) - 1px);
  font-weight: 300;
  letter-spacing: .08em;
  color: var(--ink-soft);
}

/* centrado en el mismo eje que la pirámide, no pegado al margen */
.nav {
  position: absolute;
  top: 50%;
  left: calc(75% + var(--band-w) / 4);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.6rem);
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 .15rem;
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-soft);
  transition: color .18s ease;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: .15rem;
  bottom: 12px;
  width: 0;
  height: 1px;
  background: var(--ink);
  transition: width .22s var(--ease-out);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { width: calc(100% - .3rem); }

/* ---------- título gigante, columna izquierda ---------- */

.hero__title {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: var(--edge);
  transform: translateY(-50%);
  width: var(--title-col);
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: var(--title-size);
  line-height: .96;
  letter-spacing: .005em;
  color: var(--ink);
}

.hero__line { display: block; width: fit-content; }

/* ---------- franja + protagonista ---------- */

/* recorre el hero de arriba abajo por detrás de ella */
.hero__band {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--band-w);
  background: var(--band);
  transform: translateX(-50%);
}

.hero__photo {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 50%;
  height: var(--photo-h);
  width: auto;
  max-width: var(--photo-max);
  object-fit: contain;
  object-position: bottom center;
  transform: translateX(-50%);
  /* recortada con alfa real: sus colores quedan intactos, sin tintes.
     La sombra la separa del crema: su traje es blanco y sin ella
     los bordes se disuelven en el fondo. */
  filter: drop-shadow(0 22px 44px rgba(35, 38, 34, .26));
}

/* ---------- pilares, columna derecha ----------
   Cinco palabras ordenadas por número de letras. La franja de cada una es
   tan ancha como su texto, así la pirámide la dibuja la propia tipografía:
   centradas, cada línea sobresale por ambos lados de la anterior.
   El color se funde con el blanco en los extremos mediante el degradado:
   el texto empieza justo donde el color ya está a plena intensidad. */

.pillars {
  position: absolute;
  z-index: 2;
  top: 50%;
  /* centrada entre el filo de la franja vertical y la línea oliva del marco.
     Los porcentajes se resuelven contra la caja de relleno, así que el 100%
     es exactamente el interior del borde: punto medio de [50% + franja/2, 100%] */
  left: calc(75% + var(--band-w) / 4);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pillars li {
  width: fit-content;
  padding: .06em .8em;
  font-family: var(--font-title);
  font-size: var(--pillar-size);
  line-height: 1.4;
  color: #FFFFFF;
  background-image: linear-gradient(
    to right,
    transparent 0%,
    var(--c) 16%,
    var(--c) 84%,
    transparent 100%);
}

/* El beige va en una franja ancha, no en la más corta: sobre blanco marca
   1.16:1, así que en "Fe" desaparecía. Aquí funciona como respiro entre
   dos colores plenos, y la escalera cierra en el tono más sólido. */
.pillars li:nth-child(1) { --c: #C46E4A; --dd:   0ms; }                     /* Fe */
.pillars li:nth-child(2) { --c: #F2E8D9; --dd:  70ms; color: var(--ink); }  /* Acción */
.pillars li:nth-child(3) { --c: #7A93A8; --dd: 140ms; }                     /* Decisión */
.pillars li:nth-child(4) { --c: #6B7F6B; --dd: 210ms; }                     /* Confianza */
.pillars li:nth-child(5) { --c: #3D3731; --dd: 280ms; }                     /* Constancia */

/* ---------- barra inferior ---------- */

.hero__bottom {
  position: absolute;
  z-index: 3;
  bottom: var(--edge);
  left: 0;
  right: 0;
  padding-inline: var(--edge);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.social {
  display: flex;
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--ink-soft);
  transition: color .18s ease, transform .18s var(--ease-out);
}
.social svg { width: 20px; height: 20px; }
.social a:hover { color: var(--ink); transform: translateY(-2px); }

/* llamada a la acción: única del hero, apunta al podcast en Spotify */
.cta {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 44px;
  margin-left: clamp(1rem, 2.4vw, 2.6rem);
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}
.cta span {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  transition: text-underline-offset .2s var(--ease-out);
}
.cta svg {
  width: 22px;
  height: 11px;
  transition: transform .22s var(--ease-out);
}
.cta:hover span { text-underline-offset: 9px; }
.cta:hover svg { transform: translateX(5px); }

/* mismo eje que el nav y la pirámide */
.meta {
  position: absolute;
  top: 50%;
  left: calc(75% + var(--band-w) / 4);
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ============================================================
   Carril horizontal: tres paneles que se desplazan lateralmente
   mientras se hace scroll vertical. Los colores salen de la misma
   paleta de la pirámide, ordenados de claro a oscuro para que la
   entrada desde el hero blanco sea gradual.
   ============================================================ */

:root {
  --panel-videos:    #F2E8D9;   /* cream beige  */
  --panel-instagram: #6B7F6B;   /* sage green   */
  --panel-coach:     #3D3731;   /* charcoal     */
  --accent:          #C46E4A;   /* terracotta   */
  --rail-progress:   #7A93A8;   /* dusty blue   */
}

/* del olivo del marco del hero al primer panel, sin línea de corte:
   arranca en --frame para fundirse con el gutter olivo del hero y bajar
   suave hasta el crema de Videos */
.bridge {
  height: clamp(150px, 22vh, 280px);
  background: linear-gradient(to bottom, var(--frame) 0%, var(--panel-videos) 100%);
}

.rail {
  --panels: 3;
  position: relative;
  height: calc(var(--panels) * 100vh);
}

.rail__viewport {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.rail__track {
  display: flex;
  width: calc(var(--panels) * 100vw);
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
}

.panel {
  flex: none;
  width: 100vw;
  height: 100%;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 5vw, 5rem) clamp(1.5rem, 6vw, 7rem);
}

.panel--videos    { background: var(--panel-videos);    color: var(--ink); }
.panel--instagram { background: var(--panel-instagram); color: #FFFFFF; }
.panel--coach     { background: var(--panel-coach);     color: var(--panel-videos); }

.panel__inner {
  width: 100%;
  max-width: 1100px;
}
.panel__inner--center { display: grid; justify-items: center; text-align: center; }

.panel__index {
  margin: 0 0 .6rem;
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  opacity: .72;
}

.panel__title {
  margin: 0 0 clamp(1.5rem, 4vh, 3rem);
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(3.2rem, 11vw, 10rem);
  line-height: .9;
  letter-spacing: -.01em;
  will-change: transform;
}

/* ---------- tarjetas ---------- */

.cards {
  display: grid;
  gap: clamp(1rem, 2.2vw, 2.2rem);
  margin: 0 0 clamp(1.4rem, 3vh, 2.4rem);
  padding: 0;
  list-style: none;
}
.cards--video { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--photo { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card { display: block; color: inherit; }

.card__media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(0, 0, 0, .08);
}
.cards--video .card__media { aspect-ratio: 16 / 9; }
.cards--photo .card__media { aspect-ratio: 4 / 5; }

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease-out);
}
.card:hover .card__media img,
.card:focus-visible .card__media img { transform: scale(1.045); }

.card__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.card__play svg {
  width: 54px;
  height: 54px;
  padding: 14px;
  border-radius: 50%;
  background: rgba(35, 38, 34, .72);
  color: #FFFFFF;
  transition: background .25s ease, transform .25s var(--ease-out);
}
.card:hover .card__play svg { background: var(--accent); transform: scale(1.06); }

.card__title {
  display: block;
  margin-top: .8rem;
  font-size: clamp(.9rem, 1.15vw, 1.05rem);
  line-height: 1.4;
}
.card__meta {
  display: block;
  margin-top: .2rem;
  font-size: var(--micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .7;
}

.panel__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  transition: text-underline-offset .2s var(--ease-out);
}
.panel__link:hover { text-underline-offset: 9px; }

/* ---------- botón de agenda ---------- */

/* en Italiana y a tamaño de display: sobre terracota, el blanco da 3.7:1,
   suficiente solo si el texto es grande (>=24px). No reducir. */
.agendar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: .5rem clamp(2.2rem, 5vw, 3.6rem);
  border-radius: 3px;
  background: var(--accent);
  color: #FFFFFF;
  font-family: var(--font-title);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: .06em;
  transition: transform .25s var(--ease-out), filter .25s ease;
}
.agendar:hover { transform: translateY(-2px); filter: brightness(1.06); }
.agendar:active { transform: translateY(0); }

/* ---------- indicador de avance del carril ---------- */

.rail__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(0, 0, 0, .1);
}
.rail__progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--rail-progress);
}

/* ---------- sin carril: móvil y movimiento reducido ---------- */

@media (max-width: 860px), (prefers-reduced-motion: reduce) {
  .rail { height: auto; }
  .rail__viewport { position: static; height: auto; overflow: visible; }
  .rail__track {
    width: auto;
    flex-direction: column;
    transform: none !important;
  }
  .panel {
    width: 100%;
    height: auto;
    min-height: min(88vh, 720px);
  }
  .panel__title { transform: none !important; }
  .rail__progress { display: none; }
  .cards--photo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
}

@media (max-width: 620px) {
  .cards--video { grid-template-columns: 1fr; }
}

/* ============================================================
   Secuencia de entrada.
   Todo el estado inicial cuelga de .js-intro, que solo se activa
   con JS y sin reduced-motion: sin JS la página se ve entera.
   ============================================================ */

.js-intro .hero__title,
.js-intro .hero__photo,
.js-intro .hero__band,
.js-intro .hero__chrome { will-change: transform, opacity; }

.js-intro .hero__title { opacity: 0; }

/* la franja se dibuja creciendo hacia arriba */
.js-intro .hero__band { clip-path: inset(100% 0 0 0); }

.js-intro .hero__photo {
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  transform: translateX(-50%) translateY(14px) scale(1.03);
}

.js-intro .hero__chrome {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
}

/* fase: el texto DOM releva a las partículas */
.js-intro.intro-title .hero__title {
  opacity: 1;
  transition: opacity .26s ease-out;
}

/* fase: la franja sube y la protagonista entra sobre ella */
.js-intro.intro-photo .hero__band {
  clip-path: inset(0 0 0 0);
  transition: clip-path .9s var(--ease-out);
}

.js-intro.intro-photo .hero__photo {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: translateX(-50%) translateY(0) scale(1);
  transition:
    clip-path .95s var(--ease-out) .12s,
    transform 1.05s var(--ease-out) .12s,
    opacity .45s ease-out .12s;
}

/* fase: chrome escalonado */
.js-intro.intro-chrome .hero__chrome {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity .5s ease-out var(--d, 0ms),
    transform .5s var(--ease-out) var(--d, 0ms);
}
.js-intro .hero__top    { --d: 0ms; }
.js-intro .hero__bottom { --d: 200ms; }

/* los pilares entran uno a uno, en el mismo orden en que crecen */
.js-intro .pillars li {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
}
.js-intro.intro-chrome .pillars li {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity .45s ease-out var(--dd),
    transform .5s var(--ease-out) var(--dd);
}

.intro-done .hero__title,
.intro-done .hero__photo,
.intro-done .hero__band,
.intro-done .hero__chrome { will-change: auto; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1180px) {
  :root {
    --photo-h: 78%;
    --photo-max: min(38vw, 360px);
    --band-w: clamp(230px, 32vw, 400px);
    --title-size: clamp(2.4rem, 5.2vw, 4.2rem);
    --copy-col: min(26vw, 260px);
  }
}

/* tablet y móvil: título arriba, copy debajo, protagonista abajo */
@media (max-width: 860px) {
  :root {
    --title-col: min(72vw, 460px);
    --copy-col: min(64vw, 380px);
    --band-w: clamp(240px, 66vw, 360px);
    --photo-max: min(70vw, 330px);
    --title-size: clamp(2.9rem, 13vw, 4.6rem);
    /* nunca por debajo de 24px: a ese tamaño las palabras cuentan como texto
       grande y el umbral de contraste baja a 3:1, que toda la paleta cumple
       en blanco. Más pequeñas exigirían 4.5:1, imposible sobre terracota
       y salvia con esta paleta. */
    --pillar-size: clamp(1.5rem, 3.2vw, 1.9rem);
  }

  /* el hero pasa a columna en flujo: título → pilares → foto.
     Al fluir uno tras otro no se solapan sea cual sea la altura del viewport
     (antes los pilares se anclaban al nivel de la foto y en pantallas cortas
     subían sobre "Resultado"). La barra superior y la inferior siguen
     absolutas; el relleno del surface les reserva su carril. */
  .hero__surface {
    min-height: 620px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(5.5rem, 15vw, 7rem) var(--edge) 0;
    gap: clamp(.8rem, 3.2vw, 1.35rem);
  }

  .hero__title {
    position: static;
    order: 1;
    transform: none;
    width: 100%;
    text-align: left;
  }

  /* los pilares, justo debajo del título; al envolverse en filas, centrarlas
     conserva la silueta de pirámide */
  .pillars {
    position: static;
    order: 2;
    inset: auto;
    transform: none;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: .3rem;
  }

  /* la protagonista toma el espacio restante y se ancla abajo; la barra
     inferior la sobrevuela como en escritorio (el surface no reserva hueco
     abajo, así ella llega al filo) */
  .hero__photo {
    position: static;
    order: 3;
    margin-top: auto;
    flex: 0 1 auto;
    min-height: 0;
    height: auto;
    width: auto;
    max-width: var(--photo-max);
    max-height: min(58vh, 560px);
    object-fit: contain;
    object-position: bottom center;
    transform: none;
  }


  /* sin columna lateral no hay eje que compartir: vuelven al flujo */
  .nav,
  .meta {
    position: static;
    transform: none;
  }
  .hero__top,
  .hero__bottom { justify-content: space-between; }

  .nav { gap: 1.1rem; }

  /* la intro centra la foto con el layout de flujo, sin el translateX(-50%)
     que usa la composición absoluta de escritorio */
  .js-intro .hero__photo { transform: translateY(14px) scale(1.03); }
  .js-intro.intro-photo .hero__photo { transform: translateY(0) scale(1); }
}

@media (max-width: 620px) {
  /* la barra superior se apila (marca sobre el nav) y ocupa más alto:
     el surface amplía su carril superior para no invadir el título */
  .hero__surface { padding-top: clamp(7rem, 20vw, 8.5rem); }
  .hero__top { flex-direction: column; align-items: flex-start; gap: .4rem; }
  /* el nav arranca en el borde: las tres etiquetas en mayúsculas no caben con sangría */
  .nav { gap: 1rem; }
  .nav__link { letter-spacing: .14em; }
  .social a { width: 40px; height: 40px; }

  /* en 375px no caben iconos + CTA + metadato en una línea:
     la CTA sube a su propia fila y conserva su prominencia */
  .hero__bottom { flex-wrap: wrap; row-gap: .45rem; }
  .cta { order: -1; flex-basis: 100%; margin-left: 0; }
}

/* viewport bajo / apaisado */
@media (max-height: 620px) and (min-width: 861px) {
  .hero__surface { min-height: 480px; }
  :root { --photo-h: 90%; }
}

/* ============================================================
   Accesibilidad de movimiento
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hero__canvas { display: none; }
  .js-intro .hero__title,
  .js-intro .hero__photo,
  .js-intro .hero__band,
  .js-intro .pillars li,
  .js-intro .hero__chrome {
    opacity: 1;
    visibility: visible;
    clip-path: none;
    transform: none;
  }
  .js-intro .hero__photo { transform: translateX(-50%); }
  .js-intro .hero__band  { transform: translateX(-50%); }
}

/* en flujo (móvil) la foto se centra sola: no debe heredar el translateX(-50%)
   del centrado absoluto de escritorio */
@media (prefers-reduced-motion: reduce) and (max-width: 860px) {
  .js-intro .hero__photo { transform: none; }
}