/* Ediciones Kuélap — estilos propios (complementan Tailwind CDN) */

:root {
  --color-turquesa: #b88a49;        /* dorado principal (auditado de las fotos) */
  --color-turquesa-dark: #9d7439;   /* dorado oscuro: hover / texto sobre crema */
  --color-oro-claro: #dbaf70;       /* dorado claro: texto sobre negro */
  --color-azul-marino: #14243f;     /* azul marino profundo editorial */
  --color-azul-electrico: #1e3a5f;
  --color-negro: #0b0b0d;
  --color-crema: #f7f4ee;
  --color-crema-dark: #efe9dd;
  --font-serif: 'Fraunces', 'Georgia', serif;
  --font-sans: 'Inter', system-ui, sans-serif;
  /* Textura sutil de papel premium (grano fino generado con SVG, sin imágenes) */
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.07'/%3E%3C/svg%3E");
  /* Brillo cálido muy sutil para dar profundidad de papel */
  --paper-glow: radial-gradient(130% 90% at 50% -15%, rgba(255, 253, 247, 0.6), rgba(255, 253, 247, 0) 60%);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-crema);
  background-image: var(--paper-glow), var(--paper-grain);
  color: var(--color-negro);
  overflow-x: hidden;
}

.font-serif-editorial {
  font-family: var(--font-serif);
}

/* Tratamiento tipográfico por colección: una misma marca, cuatro voces editoriales. */
.theme-novela #libro-titulo,
.theme-novela #libro-sinopsis,
.theme-poesia #libro-titulo,
.theme-poesia #libro-sinopsis { font-family: 'Cormorant Garamond', var(--font-serif); }
.theme-novela #libro-titulo,
.theme-poesia #libro-titulo { letter-spacing: -.015em; }
.theme-ensayo #libro-titulo,
.theme-ensayo #libro-sinopsis { font-family: 'Literata', var(--font-serif); }
.theme-infantil #libro-titulo { font-family: 'Nunito', var(--font-sans); font-weight: 800; }
.theme-infantil #libro-sinopsis { font-family: 'Nunito', var(--font-sans); }
.sinopsis { text-align: justify; text-justify: inter-word; hyphens: none; }
.sinopsis p { margin: 0 0 1.15em; }
.sinopsis p:last-child { margin-bottom: 0; }
.paragraph-justify { text-align: justify; text-justify: inter-word; hyphens: none; }
/* Párrafos editoriales, informativos y legales: mejor lectura en bloques de texto. */
.story-intro > p,
.story-step > p:not(.story-label),
.payoff-content > p,
#servicios .kuelap-card > p.text-black\/60,
.promise-item > p,
.launch-copy > p:not(:first-child),
.faq-answer p,
#contacto > div > p.reveal-delay-1,
#form-reclamo > p,
#form-reclamo p.text-sm.text-black\/50,
#reclamo-form-wrap ~ #reclamo-confirmacion p.text-black\/70,
#reclamo-confirmacion p.max-w-md,
#opiniones-lista p,
section.pt-32 p.text-black\/70,
section.py-20.bg-cremaDark p.text-black\/60,
section.pt-36 p.text-white\/70,
#hero .max-w-2xl.text-white p.reveal.reveal-delay-1 {
  text-align: justify;
  text-justify: inter-word;
  hyphens: none;
}
.cover-frame { background: #e9e2d6; }
.cover-frame img { filter: saturate(1.04) contrast(1.025); }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1.is-visible { transition-delay: 0.12s; }
.reveal-delay-2.is-visible { transition-delay: 0.24s; }
.reveal-delay-3.is-visible { transition-delay: 0.36s; }

/* ---------- Hero ---------- */
.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(10, 10, 12, 0.82) 0%,
    rgba(10, 10, 12, 0.55) 32%,
    rgba(10, 10, 12, 0.15) 58%,
    rgba(10, 10, 12, 0.05) 100%
  );
}

.hero-scroll-cue {
  animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

/* Efecto "escritura en vivo" en el titular del hero */
.typewrite-caret::after {
  content: '';
  display: inline-block;
  width: 3px;
  height: 0.9em;
  background: var(--color-turquesa);
  margin-left: 4px;
  vertical-align: -0.1em;
  animation: caret-blink 0.9s steps(1) infinite;
}
@keyframes caret-blink {
  50% { opacity: 0; }
}

/* ---------- CTA buttons ---------- */
.btn-primary {
  background-color: var(--color-turquesa);
  color: var(--color-negro);
  font-weight: 700;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
  box-shadow: 0 8px 24px rgba(184, 138, 73, 0.35);
}
.btn-primary:hover {
  background-color: var(--color-turquesa-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(184, 138, 73, 0.45);
}

.btn-outline {
  border: 2px solid rgba(255, 255, 255, 0.7);
  color: #fff;
  transition: all 0.25s ease;
}
.btn-outline:hover {
  background-color: #fff;
  color: var(--color-negro);
}

.btn-dark {
  background-color: var(--color-negro);
  color: #fff;
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.btn-dark:hover {
  background-color: var(--color-azul-marino);
  transform: translateY(-2px);
}

/* ---------- Camino del autor ---------- */
.camino-track {
  position: relative;
}
.camino-line {
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-turquesa), var(--color-azul-marino));
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.4s ease;
}
.camino-line.is-visible {
  transform: scaleX(1);
}
.camino-step {
  transition: transform 0.4s ease;
}
.camino-step:hover {
  transform: translateY(-6px);
}
.camino-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--color-crema);
  border: 3px solid var(--color-turquesa);
}

/* ---------- Antes / Después slider ---------- */
.compare-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  cursor: ew-resize;
  user-select: none;
}
.compare-after {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 0 0 50%);
}
.compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: #fff;
  transform: translateX(-50%);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.25);
}
.compare-handle-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #fff;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  color: var(--color-negro);
}

/* ---------- Cards genéricas ---------- */
.kuelap-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(10, 10, 12, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.kuelap-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(10, 10, 12, 0.12);
}

.plan-card-featured {
  border: 2px solid var(--color-turquesa);
}

/* ---------- Placeholder de imagen (mientras no hay asset real) ---------- */
.img-placeholder {
  background: linear-gradient(135deg, var(--color-crema-dark), #e4ddcb);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(10,10,12,0.35);
  font-family: var(--font-serif);
  font-style: italic;
  text-align: center;
  padding: 1rem;
}

/* ---------- Galería autores ---------- */
.book-cover {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.book-cover:hover {
  transform: translateY(-8px) rotate(-1deg);
  box-shadow: 0 24px 40px rgba(0,0,0,0.18);
}

/* ---------- Testimonios carrusel ---------- */
.testi-slide {
  display: none;
}
.testi-slide.is-active {
  display: block;
  animation: fadeInSlide 0.6s ease;
}
@keyframes fadeInSlide {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.testi-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(10,10,12,0.2);
  transition: background 0.25s ease, transform 0.25s ease;
}
.testi-dot.is-active {
  background: var(--color-turquesa);
  transform: scale(1.3);
}

/* ---------- WhatsApp flotante ---------- */
.whatsapp-float {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 50;
  width: 60px;
  height: 60px;
  border-radius: 999px;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.45);
  animation: pulse-wa 2.4s ease-in-out infinite;
}
.whatsapp-float:hover {
  transform: scale(1.08);
}
@keyframes pulse-wa {
  0%, 100% { box-shadow: 0 10px 26px rgba(37, 211, 102, 0.45); }
  50% { box-shadow: 0 10px 34px rgba(37, 211, 102, 0.7); }
}

/* ---------- Simulador de portada ---------- */
.portada-mock {
  aspect-ratio: 2 / 3;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  transition: background 0.4s ease;
  position: relative;
  overflow: hidden;
}
.portada-mock::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18), transparent 60%);
}
.portada-badge {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-weight: 700;
  color: #fff;
}

/* ---------- Nav ---------- */
#site-nav {
  transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}
#site-nav.scrolled {
  background-color: rgba(247, 244, 238, 0.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.06);
}

/* Mobile menu */
#mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-crema);
  box-shadow: 0 14px 30px rgba(11, 11, 13, 0.14);
  border-top: 1px solid rgba(11, 11, 13, 0.06);
  max-height: calc(100svh - 72px);
  overflow-y: auto;
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
#mobile-menu.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
/* La barra se vuelve sólida al abrir el menú (sobre el hero transparente) */
#site-nav.menu-active {
  background-color: rgba(247, 244, 238, 0.97);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}

/* ========== Experiencia inmersiva ========== */
body { letter-spacing: 0; }
.kuelap-card { border-radius: 8px; }

#site-nav { color: #fff; }
#site-nav.scrolled,
#site-nav.menu-active { color: var(--color-negro); }
#site-nav .btn-primary { border-radius: 4px; }

/* Logo: version clara sobre el hero transparente, oscura sobre la barra sólida */
.logo-swap { position: relative; display: inline-block; }
.logo-swap .logo-dark { position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s ease; }
.logo-swap .logo-light { opacity: 1; transition: opacity 0.3s ease; }
#site-nav.scrolled .logo-swap .logo-light,
#site-nav.menu-active .logo-swap .logo-light { opacity: 0; }
#site-nav.scrolled .logo-swap .logo-dark,
#site-nav.menu-active .logo-swap .logo-dark { opacity: 1; }

#hero { min-height: 100svh; }
.hero-media {
  object-position: 58% center;
  transform: scale(calc(1.03 + var(--hero-progress, 0) * .06));
  transform-origin: 65% 50%;
  transition: transform .05s linear;
}
.hero-overlay {
  background: linear-gradient(90deg, rgba(7,7,9,.94) 0%, rgba(7,7,9,.76) 38%, rgba(7,7,9,.18) 70%, rgba(7,7,9,.06) 100%);
}
#hero h1 { letter-spacing: 0; }
#hero h1 em { display: block; font-style: italic; }
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  max-width: 620px;
  margin: 0;
  padding: 20px 0 0;
  border-top: 1px solid rgba(255,255,255,.18);
  list-style: none;
  color: rgba(255,255,255,.68);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero-proof li::before { content: "•"; margin-right: 8px; color: var(--color-turquesa); }

.story-section { padding: 120px 0 0; background-color: var(--color-crema); background-image: var(--paper-grain); }
.story-intro { padding-bottom: 96px; }
.story-intro h2,
.payoff-content h2,
.promise-heading h2,
.launch-copy h2 { letter-spacing: 0; }
.story-intro h2 em,
.payoff-content h2 em,
.promise-heading h2 em { color: var(--color-turquesa); font-weight: 500; }
.story-experience {
  width: min(1380px, calc(100% - 40px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(390px, .85fr);
  gap: clamp(54px, 7vw, 108px);
}
.story-stage { position: relative; }
.story-stage-sticky {
  position: sticky;
  top: 96px;
  height: calc(100svh - 122px);
  min-height: 590px;
  overflow: hidden;
  background: #0b0b0d;
}
.story-image {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.08);
  clip-path: inset(7%);
  transition: opacity .75s ease, transform 1.15s cubic-bezier(.2,.75,.25,1), clip-path 1s cubic-bezier(.2,.75,.25,1);
}
.story-image.is-active { z-index: 1; opacity: 1; transform: scale(1); clip-path: inset(0); }
.story-image img { width: 100%; height: 100%; object-fit: cover; }
.story-image-shade {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,11,13,.03) 45%, rgba(11,11,13,.88) 100%);
  pointer-events: none;
}
.story-stage-meta {
  position: absolute;
  z-index: 3;
  top: 24px;
  right: 24px;
  left: 24px;
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-family: var(--font-serif);
  font-size: .9rem;
}
.story-progress {
  position: absolute;
  z-index: 3;
  top: 52px;
  right: 24px;
  left: 24px;
  height: 2px;
  background: rgba(255,255,255,.28);
}
.story-progress span { display: block; width: 20%; height: 100%; background: var(--color-turquesa); transition: width .35s ease; }
.story-caption {
  position: absolute;
  z-index: 3;
  right: 28px;
  bottom: 28px;
  left: 28px;
  max-width: 560px;
  margin: 0;
  color: #fff;
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2vw, 2rem);
  line-height: 1.25;
}
.story-steps { padding-bottom: 18vh; }
.story-step {
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px 20px 72px 0;
  opacity: .22;
  transform: translateX(26px);
  transition: opacity .5s ease, transform .5s ease;
}
.story-step.is-active { opacity: 1; transform: translateX(0); }
.story-number { display: block; margin-bottom: 32px; color: var(--color-turquesa-dark); font-family: var(--font-serif); font-size: 3.4rem; line-height: 1; }
.story-label { margin: 0 0 14px !important; color: var(--color-turquesa-dark) !important; font-size: .72rem !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.story-step h3 { max-width: 520px; margin: 0; font-family: var(--font-serif); font-size: clamp(2.1rem, 4vw, 3.7rem); font-weight: 600; letter-spacing: 0; line-height: 1.04; }
.story-step > p:not(.story-label) { max-width: 530px; margin: 24px 0 0; color: rgba(11,11,13,.64); font-size: 1.02rem; line-height: 1.75; }
.story-whisper { display: block; margin-top: 28px; color: #772f3a; font-family: var(--font-serif); font-style: italic; }
.story-link { width: fit-content; display: inline-flex; gap: 10px; margin-top: 30px; padding-bottom: 4px; border-bottom: 1px solid currentColor; color: var(--color-turquesa-dark); font-weight: 700; }
.story-link span { transition: transform .2s ease; }
.story-link:hover span { transform: translateX(4px); }

.payoff-section {
  position: relative;
  min-height: min(880px, 94svh);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
  background: #0b0b0d;
}
.payoff-section > img,
.payoff-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.payoff-section > img { object-fit: cover; object-position: center 62%; transform: scale(1.02); }
.payoff-shade { background: linear-gradient(90deg, rgba(7,7,9,.92) 0%, rgba(7,7,9,.58) 46%, rgba(7,7,9,.1) 76%), linear-gradient(0deg, rgba(7,7,9,.75), transparent 56%); }
.payoff-content { position: relative; z-index: 2; width: 100%; padding-bottom: 86px; }
.payoff-content > p { line-height: 1.75; }

.promise-section { background-color: var(--color-crema); background-image: var(--paper-grain); }
/* Textura de papel también en las secciones de crema oscuro (antes/después, testimonios) */
.bg-cremaDark { background-image: var(--paper-grain); }
.promise-heading em { font-style: italic; }
.promise-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(11,11,13,.14); }
.promise-item { padding: 42px 40px 0 0; }
.promise-item + .promise-item { padding-left: 40px; border-left: 1px solid rgba(11,11,13,.14); }
.promise-item > span { color: var(--color-turquesa-dark); font-family: var(--font-serif); }
.promise-item h3 { margin: 20px 0 12px; font-family: var(--font-serif); font-size: 1.55rem; }
.promise-item p { margin: 0; color: rgba(11,11,13,.62); line-height: 1.7; }

.launch-section { min-height: 760px; display: grid; grid-template-columns: 1.1fr .9fr; color: #fff; background: #0b0b0d; }
.launch-visual { position: relative; min-height: 650px; overflow: hidden; }
.launch-visual img { width: 100%; height: 100%; object-fit: cover; }
.launch-copy { align-self: center; padding: 80px clamp(36px,7vw,110px); }
.launch-copy > p:not(:first-child) { margin: 24px 0 38px; color: rgba(255,255,255,.66); line-height: 1.75; }
.launch-copy ul { margin: 0; padding: 0; list-style: none; }
.launch-copy li { display: grid; grid-template-columns: 110px 1fr; gap: 18px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.16); }
.launch-copy strong { color: var(--color-turquesa); font-size: .84rem; }
.launch-copy li span { color: rgba(255,255,255,.72); font-size: .9rem; }

#servicios .kuelap-card { border-radius: 8px; }
#servicios .font-serif.text-3xl { font-size: 1.25rem; color: var(--color-turquesa-dark); }
#servicios .plan-card-featured .font-serif.text-3xl { color: var(--color-turquesa); }

#contacto { position: relative; overflow: hidden; background-image: linear-gradient(rgba(7,7,9,.9),rgba(7,7,9,.9)), url('../img/hero-escritorio.webp'); background-size: cover; background-position: center; }
#contacto .kuelap-card { border-radius: 8px; }

@media (max-width: 1024px) {
  .story-experience { grid-template-columns: minmax(0,1.05fr) minmax(330px,.95fr); gap: 46px; }
  .promise-grid { grid-template-columns: 1fr; }
  .promise-item,
  .promise-item + .promise-item { padding: 30px 0; border-left: 0; border-bottom: 1px solid rgba(11,11,13,.14); }
  .promise-item:last-child { border-bottom: 0; }
}

@media (max-width: 767px) {
  #hero { min-height: 100svh; align-items: flex-end; }
  .hero-media { height: 46%; bottom: auto; object-position: 68% center; }
  .hero-overlay { background: linear-gradient(0deg, rgba(7,7,9,1) 0%, rgba(7,7,9,.94) 50%, rgba(7,7,9,.22) 84%, rgba(7,7,9,.08) 100%); }
  #hero > .relative { padding-top: 200px; padding-bottom: 30px; }
  #hero #hero-typewrite { min-height: 2.6em; font-size: 1rem; margin-bottom: 12px; }
  #hero h1 { font-size: clamp(2.25rem,8.5vw,3rem); line-height: 1.1; margin-bottom: 14px; }
  #hero .max-w-2xl > p:not(#hero-typewrite) { font-size: .95rem; margin-bottom: 18px; }
  #hero .flex.flex-wrap { margin-bottom: 16px; gap: 12px; }
  #hero .btn-primary,
  #hero .btn-outline { width: 100%; text-align: center; border-radius: 4px; }
  .hero-proof { gap: 8px 14px; font-size: .64rem; padding-top: 14px; }
  .story-section { padding-top: 82px; }
  .story-intro { padding-bottom: 54px; text-align: left; }
  .story-intro p { margin-left: 0; }
  .story-experience { width: 100%; display: block; }
  .story-stage { height: 48svh; }
  .story-stage-sticky { top: 76px; height: 48svh; min-height: 330px; }
  .story-caption { right: 18px; bottom: 18px; left: 18px; font-size: 1.12rem; }
  .story-stage-meta,
  .story-progress { right: 16px; left: 16px; }
  .story-steps { width: calc(100% - 40px); margin-inline: auto; padding-bottom: 0; }
  .story-step { min-height: 62svh; padding: 72px 0; opacity: .38; transform: none; }
  .story-step h3 { font-size: clamp(2.15rem,10vw,3.15rem); }
  .story-number { margin-bottom: 22px; font-size: 2.4rem; }
  .payoff-section { min-height: 760px; }
  .payoff-section > img { object-position: 68% center; }
  .payoff-shade { background: linear-gradient(0deg, rgba(7,7,9,.96) 0%, rgba(7,7,9,.65) 54%, rgba(7,7,9,.08) 100%); }
  .payoff-content { padding-bottom: 58px; }
  .launch-section { display: block; }
  .launch-visual { min-height: 54svh; }
  .launch-copy { padding: 72px 20px; }
}

@media (max-width: 520px) {
  .launch-copy li { grid-template-columns: 1fr; gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-media { transform: none; }
}
.compare-wrap { border-radius: 8px; }
.compare-after img { width: 100%; max-width: 100%; }

/* Ajuste final de proporciones para pantallas de escritorio */
.story-experience {
  width: min(1180px, calc(100% - 40px));
  grid-template-columns: minmax(0, 1.1fr) minmax(330px, .9fr);
  gap: clamp(40px, 5vw, 72px);
}
.story-step h3 { overflow-wrap: break-word; }
.story-step > p { overflow-wrap: normal; }
@media (max-width: 1024px) {
  .story-experience { width: calc(100% - 40px); grid-template-columns: minmax(0,1fr) minmax(320px,.9fr); gap: 38px; }
}
@media (max-width: 767px) {
  .story-experience { width: 100%; display: block; }
}