/* =============================================================
   1. Tokens
   ============================================================= */
@property --mx { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --my { syntax: "<percentage>"; inherits: false; initial-value: 40%; }

:root {
  --bg:         #0b0908;
  --bg-1:       #121010;
  --bg-2:       #1a1512;
  --bg-3:       #241d19;
  --cream:      #F4EFE7;
  --cream-2:    #CBC3B4;
  --cream-3:    #8d8377;
  --accent:     #E8261A;
  --accent-2:   #B81810;
  --accent-soft: rgba(232,38,26,.16);
  --good:       #8FBF6B;
  --line:       rgba(244,239,231,.12);
  --line-strong: rgba(244,239,231,.24);

  --display: "Bebas Neue", "Archivo Black", Impact, sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-bgword: clamp(4.2rem, 24vw, 15rem);
  /* el tope baja de 10.2rem: a partir de ~1100px el título se salía de su
     columna y llegaba a pisar la foto (solo afecta a escritorio, móvil y
     tablet tienen su propio tamaño más abajo) */
  --fs-hero:   clamp(4.4rem, 13.2vw, 9rem);
  --fs-h2:     clamp(2rem, 5vw, 3.2rem);
  --fs-h3:     clamp(1.3rem, 3vw, 1.7rem);

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* antes 1026px (copiado de powerexplosive.com): en pantallas de 1600px o
     más sobraba demasiado margen a los lados */
  --container: 1400px;
  --gutter: 1.5rem;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 2; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--cream-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
ul { list-style: none; padding: 0; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.05; letter-spacing: -0.01em; color: var(--cream); }
::selection { background: var(--accent); color: var(--cream); }

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

/* =============================================================
   3. Utilities
   ============================================================= */
.site-watermark {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
}
.site-watermark img {
  display: block;
  width: min(380px, 55vw);
  height: auto;
  opacity: .14;
}

.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .7rem 1.1rem; background: var(--cream); color: var(--bg);
  z-index: 9999; border-radius: 8px; font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

.kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}
.kicker::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.section-head { max-width: 640px; margin-inline: auto; margin-bottom: 3rem; text-align: center; }
#productos .section-head { margin-bottom: 1.4rem; }
.section-head .kicker { margin-bottom: .9rem; justify-content: center; }
.section-head h1, .section-head h2 { font-family: var(--display); font-size: var(--fs-h2); text-transform: uppercase; }
.section-head p { margin-top: 1rem; font-size: .85rem; color: var(--cream-3); }

/* solo padding inferior por defecto: el hueco entre dos secciones lo
   marca únicamente la de arriba, así el ritmo es el mismo en toda la
   web en vez de sumarse (inferior + superior) y descuadrarse según qué
   secciones queden una al lado de la otra */
section { position: relative; padding-block: 0 clamp(4rem, 9vw, 7.5rem); }

/* primera sección de una página propia (Productos, Contacto...): el nav
   es fixed y no empuja el contenido, así que hace falta hueco arriba
   para que no tape el título — el hero ya lo resuelve con su propio
   padding, esto es lo mismo para el resto de páginas */
.page-intro { padding-top: clamp(7.5rem, 16vw, 10rem); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* reveal on scroll */
[data-reveal] {
  opacity: 0; transform: translateY(36px);
  transition: opacity .85s var(--ease-soft), transform .85s var(--ease-soft);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .1s; }
[data-reveal-delay="2"] { transition-delay: .2s; }
[data-reveal-delay="3"] { transition-delay: .3s; }

/* =============================================================
   4. Buttons
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1.05rem 1.9rem;
  font-weight: 700; font-size: .98rem; letter-spacing: .01em;
  border-radius: 999px;
  transition: transform .5s var(--ease-soft), box-shadow .5s var(--ease-soft), background-color .3s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent); color: #fff;
  box-shadow: 0 14px 30px -10px rgba(232,38,26,.55), 0 2px 8px rgba(0,0,0,.35);
}
.btn-primary:hover { background: #ff2e21; transform: translateY(-3px); box-shadow: 0 22px 44px -12px rgba(232,38,26,.65), 0 4px 10px rgba(0,0,0,.4); }
.btn-primary:active { transform: translateY(-1px); transition-duration: .12s; }

.btn-ghost {
  border: 1px solid var(--line-strong); color: var(--cream);
}
.btn-ghost:hover { border-color: var(--cream-2); background: rgba(244,239,231,.06); }

.btn-block { width: 100%; }

.has-magnetic { display: inline-flex; position: relative; isolation: isolate; }
.magnetic-inner { display: inline-flex; align-items: center; justify-content: center; gap: inherit; will-change: transform; transition: transform .8s var(--ease-soft); }

/* =============================================================
   5. Splash
   ============================================================= */
.splash {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--bg);
  display: grid; place-items: center;
  transition: opacity .3s var(--ease-out), clip-path .4s var(--ease-soft);
  animation: splashSafety .01s 3.6s forwards;
}
.splash-logo { width: 150px; height: auto; opacity: .95; animation: splashPulse 1.6s ease-in-out infinite; }
@keyframes splashPulse { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.06); opacity: 1; } }
.splash.is-out { opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); }
@keyframes splashSafety { to { opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); } }

/* =============================================================
   6. Nav
   ============================================================= */
.nav {
  position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 100;
  width: min(calc(100% - 2rem), var(--container));
  border-radius: 22px;
  padding-block: .55rem;
  background: rgba(19,15,14,.5);
  backdrop-filter: blur(18px) saturate(1.9); -webkit-backdrop-filter: blur(18px) saturate(1.9);
  border: 1px solid rgba(244,239,231,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 16px 34px -16px rgba(0,0,0,.55);
  transition: background-color .4s var(--ease-out), box-shadow .4s var(--ease-out), padding .4s var(--ease-out), border-color .4s, top .4s var(--ease-out);
}
.nav.is-scrolled {
  top: .6rem;
  background: rgba(15,12,11,.72);
  backdrop-filter: blur(24px) saturate(1.9); -webkit-backdrop-filter: blur(24px) saturate(1.9);
  border-color: rgba(244,239,231,.16);
  padding-block: .5rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 18px 38px -16px rgba(0,0,0,.5);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
@media (max-width: 359px) {
  .nav-inner { padding-inline: 1rem; gap: .5rem; }
  .nav .btn-primary { padding: .6rem .85rem; font-size: .78rem; }
}
.nav-brand-wrap { position: relative; min-width: 0; }
.nav-brand { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.nav-brand-logo { display: flex; flex: none; }
.nav-brand img { width: 36px; height: 36px; object-fit: contain; flex: none; }
.nav-brand-toggle {
  display: flex; align-items: center; gap: .5rem; min-width: 0;
  background: none; border: none; padding: 0; font: inherit; cursor: pointer;
  font-family: var(--display); font-size: 1.1rem; letter-spacing: .02em; text-transform: uppercase; color: var(--cream);
}
.nav-brand-text-desktop { display: none; }
.nav-brand-text-mobile { display: inline; }
@media (min-width: 880px) {
  .nav-brand-toggle { font-size: 1.5rem; gap: .7rem; }
  .nav-brand img { width: 46px; height: 46px; }
  .nav-brand-text-mobile { display: none; }
  .nav-brand-text-desktop { display: inline; }
}
.nav-brand-caret { width: 15px; height: 15px; flex: none; color: var(--cream-3); transition: transform .3s var(--ease-out); }
.nav-brand-toggle[aria-expanded="true"] .nav-brand-caret { transform: rotate(180deg); }
@media (max-width: 359px) {
  .nav-brand { gap: .4rem; }
  .nav-brand-toggle { gap: .35rem; font-size: 1rem; }
}

.nav-dropdown {
  position: absolute; top: calc(100% + .8rem); left: 0; z-index: 50;
  min-width: 200px;
  display: flex; flex-direction: column; gap: .15rem;
  background: rgba(15,12,11,.96);
  backdrop-filter: blur(18px) saturate(1.9); -webkit-backdrop-filter: blur(18px) saturate(1.9);
  border: 1px solid rgba(244,239,231,.14);
  border-radius: 16px;
  padding: .6rem;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.nav-dropdown.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.nav-dropdown-link {
  padding: .65rem .8rem; border-radius: 10px;
  font-size: .92rem; font-weight: 500; color: var(--cream-2);
  transition: background-color .2s, color .2s;
}
.nav-dropdown-link:hover { background: rgba(244,239,231,.08); color: var(--cream); }

/* Panel "Secciones" (móvil/tablet): dentro solo quedan Coaching, Productos
   y Contacto; Coaching abre a su vez el resto de secciones de la portada */
.nav-dropdown-group { display: flex; flex-direction: column; gap: .15rem; }
.nav-dropdown-sub-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  width: 100%; text-align: left;
  padding: .65rem .8rem; border-radius: 10px;
  font-family: inherit; font-size: .92rem; font-weight: 500; color: var(--cream-2);
  background: none; border: 0; cursor: pointer;
  transition: background-color .2s, color .2s;
}
.nav-dropdown-sub-toggle:hover,
.nav-dropdown-sub-toggle.is-current { background: rgba(244,239,231,.08); color: var(--cream); }
.nav-dropdown-sub-caret {
  width: 15px; height: 15px; flex: none; display: inline-block;
  transition: transform .25s var(--ease-out);
}
.nav-dropdown-sub-toggle[aria-expanded="true"] .nav-dropdown-sub-caret { transform: rotate(180deg); }
.nav-dropdown-sub {
  display: flex; flex-direction: column; gap: .15rem;
  overflow: hidden; max-height: 0;
  transition: max-height .3s var(--ease-out);
}
.nav-dropdown-sub.is-open { max-height: 320px; }
.nav-dropdown-sub .nav-dropdown-link { padding-left: 1.7rem; font-size: .88rem; }
@media (min-width: 880px) {
  .nav-brand { cursor: default; }
  .nav-brand-caret { display: none; }
  .nav-dropdown { display: none; }
}
.nav-links {
  display: none; align-items: center; gap: 1.4rem;
  /* pegadas al botón de la derecha en vez de sueltas en el centro: con la
     barra ancha quedaban perdidas en medio */
  margin-left: auto; margin-right: 1.8rem;
}
.nav-link { position: relative; font-size: .92rem; font-weight: 500; color: var(--cream-2); padding: .25rem 0; white-space: nowrap; }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease-out);
}
.nav-link:hover { color: var(--cream); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
/* marca en qué multipágina estás ahora mismo */
.nav-link.is-current { color: var(--cream); }
.nav-link.is-current::after { transform: scaleX(1); transform-origin: left; }
.nav-dropdown-link.is-current { background: rgba(244,239,231,.08); color: var(--cream); }
.nav .btn-primary { padding: .7rem 1.1rem; font-size: .82rem; }

/* submenú de "Coaching" en el nav de escritorio: agrupa las anclas de
   la página de Coaching para no llenar la barra de secciones sueltas */
.nav-links-item { position: relative; }
/* rellena el hueco entre "Coaching" y el desplegable: sin esto, al mover
   el ratón en diagonal hacia el menú se cruza una zona sin :hover y se
   cierra antes de llegar */
.nav-links-item::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: .9rem;
}
.nav-link-caret { display: inline-block; width: 13px; height: 13px; margin-left: .25rem; vertical-align: -2px; transition: transform .25s var(--ease-out); }
.nav-links-dropdown {
  position: absolute; top: calc(100% + .9rem); left: 50%; z-index: 50;
  transform: translate(-50%, -8px);
  min-width: 190px;
  display: flex; flex-direction: column; gap: .15rem;
  background: rgba(15,12,11,.96);
  backdrop-filter: blur(18px) saturate(1.9); -webkit-backdrop-filter: blur(18px) saturate(1.9);
  border: 1px solid rgba(244,239,231,.14);
  border-radius: 16px;
  padding: .6rem;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,.55);
  opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.nav-links-item:hover .nav-links-dropdown,
.nav-links-item:focus-within .nav-links-dropdown {
  opacity: 1; transform: translate(-50%, 0); pointer-events: auto;
}
.nav-links-item:hover .nav-link-caret,
.nav-links-item:focus-within .nav-link-caret { transform: rotate(180deg); }

@media (min-width: 880px) {
  .nav-links { display: flex; }
  .nav .btn-primary { padding: .8rem 1.4rem; font-size: .88rem; }
}

/* =============================================================
   7. Hero
   ============================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  overflow: clip;
  padding-block: 7.5rem 3rem;
}
/* el fondo vive en ::before (no directamente en .hero) para poder
   difuminarlo hacia transparente al final de la sección sin afectar al
   contenido real (título, foto). Así el logotipo de fondo fijo (que
   hasta aquí queda completamente tapado) se revela poco a poco en vez
   de aparecer de golpe justo en la costura con la siguiente sección */
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120% 90% at 78% 8%, #1c1210 0%, var(--bg) 55%);
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}
.hero-bg-word {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 0;
  font-family: var(--display);
  font-size: var(--fs-bgword);
  line-height: .8;
  letter-spacing: -.01em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(232,38,26,.35);
  white-space: nowrap;
  user-select: none;
}
.hero-gradient {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(560px circle at var(--mx) var(--my), rgba(232,38,26,.30) 0%, transparent 62%);
  filter: blur(10px);
  mix-blend-mode: screen;
}

/* Two-zone layout: text and photo side by side at every breakpoint */
.hero-grid {
  position: relative; z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "kicker kicker" "title title" "content photo";
  gap: 1rem;
  align-items: start;
}
@media (min-width: 720px) and (max-width: 859px) {
  .hero-grid {
    grid-template-columns: 1.6fr 1fr;
    grid-template-areas: "kicker photo" "title photo" "content photo";
  }
}
@media (min-width: 860px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
    grid-template-areas: "kicker photo" "title photo" "content photo";
    gap: 3rem; align-items: end;
  }
}

.hero-grid > .kicker { grid-area: kicker; margin-bottom: 1.3rem; }
.hero-content { grid-area: content; max-width: 560px; }

.hero-photo-col {
  grid-area: photo;
  position: relative;
  display: flex; justify-content: center;
  max-height: 34svh;
}
.hero-photo {
  width: auto; height: 100%; max-height: 34svh; max-width: 100%;
  object-fit: contain; object-position: bottom center;
  filter: saturate(1.04) contrast(1.03);
  animation: heroPhotoReveal 1.2s var(--ease-soft) .25s both;
  -webkit-mask-image: linear-gradient(to bottom, #000 96%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 96%, transparent 100%);
}
/* Foto del héroe un poco más grande SOLO en móvil.
   Estado anterior (al que volver si no convence): 34svh, el mismo valor
   que sigue usándose de 720px en adelante. */
@media (max-width: 719px) {
  /* foto más grande (antes: 34svh + columnas 1fr 1fr) */
  .hero-grid { grid-template-columns: 1fr 1.3fr; }
  .hero-photo-col, .hero-photo { max-height: 40svh; }
  /* el texto ocupa las dos columnas de su fila y se superpone a la foto,
     por delante de ella: al lado solo le quedaban 142px y la frase se
     partía en 4 trozos ("y mente con un" / "nuevo estilo de vida").
     A ancho completo son 2 líneas limpias, y conserva su sitio de antes
     (abajo, a la altura del pie de la foto).
     Para volver al reparto anterior, basta con quitar estas reglas. */
  .hero-content {
    grid-area: 3 / 1 / 4 / -1;
    align-self: end; max-width: none;
    position: relative; z-index: 3;
    margin-bottom: 2.2rem; /* lo sube un poco respecto al pie de la foto */
  }
  .hero-sub {
    text-wrap: balance; max-width: none;
    /* legibilidad sobre la foto */
    text-shadow: 0 2px 10px rgba(0,0,0,.75), 0 0 22px rgba(0,0,0,.55);
  }
}

@keyframes heroPhotoReveal {
  from { opacity: 0; transform: scale(.94); filter: saturate(1.04) contrast(1.03) blur(10px); }
  to   { opacity: 1; transform: scale(1);   filter: saturate(1.04) contrast(1.03) blur(0); }
}
@media (prefers-reduced-motion: reduce) { .hero-photo { animation: none; } }

@media (min-width: 860px) {
  .hero-photo-col { justify-content: flex-end; align-self: stretch; max-height: none; }
  .hero-photo { max-height: 66svh; height: 100%; }
}
.hero-title {
  grid-area: title;
  font-family: var(--display);
  font-size: var(--fs-hero);
  text-transform: uppercase;
  white-space: pre-line;
}
@media (max-width: 859px) {
  .hero-title { font-size: clamp(1.7rem, 9vw, 3rem); }
}
/* en tablet el tope de 3rem dejaba el título en 48px con media columna
   libre al lado; se sube el tope para que aproveche el espacio */
@media (min-width: 720px) and (max-width: 859px) {
  .hero-title { font-size: clamp(3rem, 9vw, 4.6rem); }
}
.hero-sub {
  margin-top: 1.4rem; font-size: 1rem; max-width: 46ch; color: var(--cream-2);
}
@media (min-width: 960px) {
  .hero-sub { font-size: 1.12rem; }
}
/* solo móvil y tablet: el texto encoge al tamaño de los subtítulos de
   sección (.section-head p) y se apoya en la parte baja del héroe.
   De 860px en adelante el héroe se queda como estaba. */
@media (max-width: 859px) {
  .hero-sub { font-size: .85rem; }
  .hero-content { align-self: end; }
}
.hero-actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.hero-note { font-size: .85rem; color: var(--cream-3); }

.hero-stats {
  margin-top: clamp(2.4rem, 6vw, 4rem);
  display: flex; flex-wrap: wrap; gap: clamp(1.6rem, 5vw, 3.2rem);
  border-top: 1px solid var(--line); padding-top: 1.6rem;
}
.hero-stat { display: flex; flex-direction: column; }
.hero-stat-value { font-family: var(--display); font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--cream); }
.hero-stat-label { font-size: .82rem; color: var(--cream-3); margin-top: .2rem; }

@media (max-width: 719px) {
  .hero { padding-block: 6.5rem 2.5rem; }
  .hero-bg-word {
    /* COACHING más grande, dejando ~26px libres a cada lado
       (antes: clamp(3.2rem, 20vw, 6rem)) */
    -webkit-text-stroke: 1px rgba(232,38,26,.28); font-size: clamp(4.6rem, 29vw, 13rem);
    display: block; top: 64%; bottom: auto; transform: translateY(-50%); text-align: center;
  }
  /* más grande, con tope para que "TRANSFORMA" siga cabiendo en una línea
     (antes: clamp(3rem, 15.5vw, 3.7rem)) */
  .hero-title { font-size: clamp(3rem, 19vw, 4.6rem); }
  .hero-stats { max-width: none; }
}

/* =============================================================
   8. Beneficios
   ============================================================= */
.benefits-grid {
  display: grid; gap: 1.4rem;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .benefits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .benefits-grid { grid-template-columns: repeat(4, 1fr); } }

.benefit-card {
  --rx: 0deg; --ry: 0deg;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 1.2rem 1.2rem 1.6rem;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .55s var(--ease-soft), border-color .4s, background-color .4s;
}
.benefit-card:hover { border-color: rgba(232,38,26,.4); background: var(--bg-3); transition-duration: .15s; }
.benefit-photo {
  border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3.4;
  margin-bottom: 1.3rem; transform: translateZ(20px);
}
.benefit-photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.03) contrast(1.02);
  transition: transform .8s var(--ease-soft);
}
.benefit-card:hover .benefit-photo img { transform: scale(1.05); }
.benefit-card h3 { font-family: var(--sans); font-weight: 800; font-size: 1.05rem; color: var(--cream); text-transform: uppercase; letter-spacing: .03em; transform: translateZ(20px); }
.benefit-card p { margin-top: .7rem; font-size: .93rem; color: var(--cream-3); transform: translateZ(20px); }
/* ---- PRUEBA: la foto es la tarjeta y el texto va encima ----------------
   Para volver al diseño anterior basta con quitar la clase
   "benefits-grid--overlay" del div en index.html; este bloque queda inerte. */
.benefits-grid--overlay .benefit-card {
  position: relative; overflow: hidden;
  /* un punto más alta que cuadrada */
  padding: 0; aspect-ratio: 1 / 1.12;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.benefits-grid--overlay .benefit-photo {
  position: absolute; inset: 0; margin: 0;
  aspect-ratio: auto; border-radius: inherit; transform: none;
}
.benefits-grid--overlay .benefit-photo img { object-position: center center; }
/* encuadre elegido a mano para cada foto con tools/encuadre.html */
.benefits-grid--overlay .benefit-card:nth-child(1) .benefit-photo img { object-position: 0% 63%; }
.benefits-grid--overlay .benefit-card:nth-child(2) .benefit-photo img { object-position: 0% 100%; }
.benefits-grid--overlay .benefit-card:nth-child(3) .benefit-photo img { object-position: 100% 0%; }
.benefits-grid--overlay .benefit-card:nth-child(4) .benefit-photo img { object-position: 75% 68%; }
/* velo oscuro para que el texto se lea sobre cualquier foto */
.benefits-grid--overlay .benefit-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(11,9,8,0) 38%, rgba(11,9,8,.62) 62%, rgba(11,9,8,.94) 100%);
}
.benefits-grid--overlay .benefit-card h3,
.benefits-grid--overlay .benefit-card p {
  position: relative; z-index: 2; transform: none;
  padding-inline: 1.15rem;
}
.benefits-grid--overlay .benefit-card p {
  margin-top: .5rem; padding-bottom: 1.2rem; color: var(--cream-2);
  font-size: .88rem; line-height: 1.5;
}
/* Dos por fila en escritorio en lugar de cuatro: a 220px de ancho el texto
   ocupaba el 61% de la tarjeta y tapaba la foto. Con el doble de ancho el
   texto cabe en tres líneas y la imagen se ve entera, que es la gracia. */
@media (min-width: 1100px) {
  /* con la tarjeta vertical y el contenedor a 1400px, cuatro en fila vuelven
     a tener un tamaño cómodo (antes, a 1026px, salían a 220px y no cabía el texto) */
  .benefits-grid--overlay { grid-template-columns: repeat(4, 1fr); }
  .benefits-grid--overlay .benefit-card h3 { font-size: 1.15rem; }
  .benefits-grid--overlay .benefit-card p { font-size: .9rem; max-width: 46ch; }
  .benefits-grid--overlay .benefit-card h3,
  .benefits-grid--overlay .benefit-card p { padding-inline: 1.5rem; }
  .benefits-grid--overlay .benefit-card p { padding-bottom: 1.5rem; }
}


/* ---- Tarjetas de beneficio con icono en lugar de foto -------------------
   Para volver a las fotos, cambia en index.html la clase
   "benefits-grid--icons" por "benefits-grid--overlay". */
.benefits-grid--icons .benefit-photo { display: none; }
.benefits-grid--icons .benefit-card { padding: 1.6rem 1.5rem 1.8rem; }
.benefits-grid--icons .benefit-card::before {
  content: "";
  display: block; width: 52px; height: 52px; border-radius: 15px;
  margin-bottom: 1.3rem;
  background-color: rgba(232,38,26,.12);
  background-repeat: no-repeat; background-position: center;
  background-size: 26px 26px;
  border: 1px solid rgba(232,38,26,.22);
  transition: background-color .3s, border-color .3s;
}
.benefits-grid--icons .benefit-card:hover::before {
  background-color: rgba(232,38,26,.2); border-color: rgba(232,38,26,.45);
}
.benefits-grid--icons .benefit-card:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8261A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.5 20.5c0-3.9 3.4-6.2 7.5-6.2s7.5 2.3 7.5 6.2'/%3E%3C/svg%3E"); }
.benefits-grid--icons .benefit-card:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8261A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17.5l5.5-5.5 3.5 3.5L21 6.5'/%3E%3Cpath d='M15 6.5h6v6'/%3E%3C/svg%3E"); }
.benefits-grid--icons .benefit-card:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8261A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6M7.5 6.5v11M16.5 6.5v11M20 9v6M7.5 12h9'/%3E%3C/svg%3E"); }
.benefits-grid--icons .benefit-card:nth-child(4)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8261A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8.2c-1.4-1.6-3.6-2-5.2-.9C5 8.5 4.6 11 5.4 13.4c.8 2.4 2.5 5.3 4.2 5.3.9 0 1.3-.5 2.4-.5s1.5.5 2.4.5c1.7 0 3.4-2.9 4.2-5.3.8-2.4.4-4.9-1.4-6.1-1.6-1.1-3.8-.7-5.2.9z'/%3E%3Cpath d='M12 8.2V5.2'/%3E%3Cpath d='M12 5.2c1.2 0 2.2-.9 2.4-2.1-1.2-.2-2.3.6-2.4 2.1z'/%3E%3C/svg%3E"); }

/* =============================================================
   8.5 Prueba / disciplina strip
   ============================================================= */
.proof-section { padding-block: 0 clamp(3rem, 7vw, 5rem); }
.proof-grid { display: grid; gap: .9rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .proof-grid { grid-template-columns: repeat(3, 1fr); } }
.proof-item {
  --depth: 12px;
  position: relative; border-radius: 18px;
  aspect-ratio: 4 / 5; border: 1px solid var(--line);
  perspective: 1500px; cursor: pointer;
  box-shadow: 0 22px 40px -22px rgba(0,0,0,.6);
  transition: transform .5s var(--ease-soft), box-shadow .5s var(--ease-soft), border-color .8s var(--ease-soft);
}
.proof-item:hover,
.proof-item.is-in-view,
.proof-item.is-flipped {
  border-color: transparent;
}
.proof-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 52px -20px rgba(0,0,0,.65), 0 8px 20px -8px rgba(232,38,26,.22);
}

.proof-flip-inner {
  --tilt-rx: 0deg; --tilt-ry: 0deg; --flip-ry: 0deg;
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-rx)) rotateY(calc(var(--flip-ry) + var(--tilt-ry)));
  transition: transform .8s var(--ease-soft);
}
.proof-item.is-in-view:not(.is-flipped) .proof-flip-inner {
  --flip-ry: 14deg;
}
/* escritorio (ratón real): el hover voltea la tarjeta del todo, en vez
   del ligero tilt de aviso que usan is-in-view/el móvil */
@media (hover: hover) and (pointer: fine) {
  .proof-item:hover:not(.is-flipped) .proof-flip-inner {
    --flip-ry: 180deg;
    /* deja ver el brillo/iluminado un instante antes de empezar a girar */
    transition-delay: .1s;
  }
}
/* al quitar el ratón, se mantiene volteada un momento (ver JS) antes de
   volver a girar hacia el frente */
.proof-item.is-hover-hold .proof-flip-inner { --flip-ry: 180deg; }
.proof-item.is-flipped .proof-flip-inner { --flip-ry: 180deg; }

.proof-flip-front, .proof-flip-back {
  position: absolute; inset: 0; border-radius: 18px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 2px solid transparent;
}
/* las dos caras se separan medio píxel en profundidad: al cruzar los 90º
   quedaban en el mismo plano y algunos navegadores dejaban asomar la cara
   delantera por detrás durante un instante */
.proof-flip-front { overflow: visible; transform: translateZ(.5px); }
/* el contenido de la cara delantera hereda la ocultación de su cara, pero
   varios navegadores móviles no la aplican de forma fiable a los hijos */
.proof-flip-media, .proof-flip-media img, .proof-item-label {
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
/* red de seguridad final: pasada la mitad del giro (0,8s) la cara delantera
   se apaga del todo, y al volver no reaparece hasta cruzar de nuevo los 90º */
.proof-flip-front { transition: opacity .12s .42s, visibility 0s .42s; }
.proof-item.is-flipped .proof-flip-front { opacity: 0; visibility: hidden; }

.proof-item:hover:not(.is-flipped) .proof-flip-front,
.proof-item.is-in-view:not(.is-flipped) .proof-flip-front {
  background-image:
    linear-gradient(var(--bg), var(--bg)),
    conic-gradient(
      from var(--lead-angle),
      #3a0906 0%, #E8261A 22%, #ff9a80 28%, #E8261A 34%,
      #3a0906 50%, #3a0906 60%, #E8261A 72%, #ff9a80 78%, #E8261A 84%, #3a0906 100%
    );
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  animation: leadBorderRotate 6s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .proof-flip-front { animation: none; } }

/* physical "thickness" strips — visible on all 4 sides as the card tilts */
.proof-flip-edge {
  position: absolute;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: background .45s, opacity .45s;
}
.proof-flip-edge--left, .proof-flip-edge--right { top: 18px; bottom: 18px; width: var(--depth); }
.proof-flip-edge--top, .proof-flip-edge--bottom { left: 18px; right: 18px; height: var(--depth); }

.proof-flip-edge--right {
  right: 0; transform: rotateY(90deg); transform-origin: 100% 50%;
  background: linear-gradient(90deg, rgba(0,0,0,.68) 0%, rgba(255,255,255,.05) 55%, rgba(0,0,0,.45) 100%);
}
.proof-flip-edge--left {
  left: 0; transform: rotateY(-90deg); transform-origin: 0% 50%;
  background: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(255,255,255,.05) 45%, rgba(0,0,0,.68) 100%);
}
.proof-flip-edge--top {
  top: 0; transform: rotateX(-90deg); transform-origin: 50% 0%;
  background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.75) 100%);
}
.proof-flip-edge--bottom {
  bottom: 0; transform: rotateX(90deg); transform-origin: 50% 100%;
  background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.75) 100%);
}

.proof-item:hover .proof-flip-edge--left, .proof-item:hover .proof-flip-edge--right,
.proof-item.is-in-view .proof-flip-edge--left, .proof-item.is-in-view .proof-flip-edge--right,
.proof-item.is-flipped .proof-flip-edge--left, .proof-item.is-flipped .proof-flip-edge--right {
  background: linear-gradient(90deg, #4a0906 0%, #E8261A 30%, #ff9a80 50%, #E8261A 70%, #4a0906 100%);
}
.proof-item:hover:not(.is-flipped) .proof-flip-edge--top, .proof-item:hover:not(.is-flipped) .proof-flip-edge--bottom,
.proof-item.is-in-view:not(.is-flipped) .proof-flip-edge--top, .proof-item.is-in-view:not(.is-flipped) .proof-flip-edge--bottom {
  background: linear-gradient(180deg, #4a0906 0%, #E8261A 30%, #ff9a80 50%, #E8261A 70%, #4a0906 100%);
}
/* the flip rotates around the Y axis, so the X-rotated top/bottom strips
   land off-angle at 180deg instead of staying edge-on — keep them hidden
   once fully flipped rather than let them show as stray lines */
.proof-item.is-flipped .proof-flip-edge--top,
.proof-item.is-flipped .proof-flip-edge--bottom {
  opacity: 0;
}

.proof-flip-media { position: absolute; inset: 2px; border-radius: 16px; overflow: hidden; }

.proof-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease-soft), filter .5s;
  filter: saturate(1.0) contrast(1.02) brightness(.75);
}
.proof-flip-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,9,8,.08) 0%, rgba(11,9,8,.22) 55%, rgba(11,9,8,.45) 100%);
  transition: opacity .5s var(--ease-out);
}
.proof-item:hover .proof-flip-media::after, .proof-item.is-in-view .proof-flip-media::after { opacity: .45; }
.proof-item:hover img, .proof-item.is-in-view img { transform: scale(1.06); filter: saturate(1.12) contrast(1.03) brightness(1.05); }
.proof-item-label {
  position: absolute; left: 0; right: 0; bottom: 1.4rem; z-index: 1;
  text-align: center;
  font-family: var(--display); font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  color: var(--cream); text-transform: uppercase; letter-spacing: .03em;
  text-shadow: 0 2px 10px rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.9);
  /* un-flipping back to front: stay hidden until the card (.8s transform)
     has rotated nearly all the way back, only then fade in — otherwise
     some real mobile browsers show it mirrored while still mid-rotation */
  transition: opacity .15s .65s, visibility 0s .65s;
}
/* some real mobile browsers don't reliably hide a 3D-transformed child via
   the parent's backface-visibility (dev-tools mobile emulation doesn't
   reproduce it), so hide it explicitly once flipped as a hard safety net */
.proof-item.is-flipped .proof-item-label {
  opacity: 0; visibility: hidden;
  transition: opacity .1s, visibility 0s;
}

.proof-flip-back {
  transform: rotateY(180deg);
  padding: 1.7rem 1.5rem;
  display: flex; flex-direction: column; justify-content: center;
  border: 2px solid transparent;
  background-image:
    linear-gradient(rgba(21,17,14,.9), rgba(21,17,14,.9)),
    conic-gradient(
      from var(--lead-angle),
      #3a0906 0%, #E8261A 22%, #ff9a80 28%, #E8261A 34%,
      #3a0906 50%, #3a0906 60%, #E8261A 72%, #ff9a80 78%, #E8261A 84%, #3a0906 100%
    );
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 0 26px rgba(232,38,26,.3), 0 18px 34px -12px rgba(0,0,0,.6);
  animation: leadBorderRotate 6s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .proof-flip-back { animation: none; } }
.proof-flip-back h4 {
  font-family: var(--sans); font-weight: 800; font-size: 1.1rem;
  color: var(--cream); text-transform: uppercase; letter-spacing: .03em;
  margin-bottom: 1.1rem;
  transform: translateZ(8px);
}
.proof-flip-back ul { display: flex; flex-direction: column; gap: .55rem; transform: translateZ(8px); }
.proof-flip-back li {
  position: relative; padding-left: 1.1rem; font-size: .88rem; color: var(--cream-2); line-height: 1.35;
  text-align: left;
}
.proof-flip-back li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--accent);
}
.proof-caption { margin-top: 1.6rem; max-width: none; text-align: center; margin-inline: auto; color: var(--cream-3); font-size: 1rem; }

/* =============================================================
   8.7 Línea de tiempo / móvil
   ============================================================= */
.timeline-section { padding-block: 0 clamp(3.5rem, 8vw, 6rem); }
.timeline-section .section-head { margin-bottom: clamp(3rem, 7vw, 5rem); }
.timeline-grid {
  display: grid; gap: 3rem; align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .timeline-grid { grid-template-columns: 1fr .8fr; gap: 2rem; } }

.timeline-steps { display: flex; flex-direction: column; gap: 2.2rem; max-width: 480px; }
.timeline-step { display: flex; align-items: flex-start; gap: 1rem; }
.timeline-step p { font-size: 1rem; line-height: 1.5; color: var(--cream-3); }
.timeline-step strong { color: var(--cream); font-weight: 700; }
@media (min-width: 960px) {
  .timeline-step p { font-size: 1.15rem; }
}
.timeline-dot {
  flex: none; width: 26px; height: 26px; margin-top: .1rem;
  border-radius: 8px; background: var(--accent-soft);
  display: grid; place-items: center;
  position: relative;
}
.timeline-dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 2px;
  background: var(--accent); transform: rotate(45deg);
}

.timeline-phones {
  position: relative; height: clamp(360px, 52vw, 480px);
  display: flex; align-items: center; justify-content: center;
}
.phone-glow {
  position: absolute; inset: 10% 5%; z-index: 0;
  background: radial-gradient(60% 60% at 50% 45%, rgba(232,38,26,.28), transparent 70%);
  filter: blur(50px);
}
.phone-mock {
  --rx: 0deg; --ry: 0deg;
  position: absolute; z-index: 1;
  width: clamp(150px, 21vw, 195px); aspect-ratio: 9 / 19.5;
  background: #0a0808; border-radius: 30px;
  border: 2px solid rgba(244,239,230,.14);
  box-shadow: 0 42px 70px -18px rgba(0,0,0,.7), 0 10px 26px -10px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4);
  padding: 8px;
  transform-style: preserve-3d;
  transition: transform .5s var(--ease-soft);
}
.phone-mock::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,.16) 0%, transparent 26%, transparent 74%, rgba(255,255,255,.06) 100%);
  mix-blend-mode: overlay;
}
.phone-back {
  transform: translate(-58%, -14%) rotate(-6deg) perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  z-index: 1; filter: brightness(.82);
}
.phone-front {
  transform: translate(28%, 10%) rotate(4deg) perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  z-index: 2;
}
.phone-notch {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 34%; height: 16px; background: #0a0808; border-radius: 999px; z-index: 3;
}
.phone-screen {
  position: relative; width: 100%; height: 100%;
  background: linear-gradient(165deg, var(--bg-2), var(--bg));
  border-radius: 24px; overflow: hidden;
  display: flex; flex-direction: column;
}
.phone-statusbar {
  flex: none; position: relative; z-index: 4;
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 13px 0; color: var(--cream);
}
.phone-time { font-size: 10px; font-weight: 700; letter-spacing: .01em; }
.phone-icons { display: flex; align-items: center; gap: 3px; }
.phone-icons svg { width: 13px; height: 8px; fill: var(--cream); color: var(--cream); }
.phone-icons .i-battery { width: 17px; height: 8px; }

.phone-carousel { position: relative; flex: 1; min-height: 0; width: 100%; overflow: hidden; touch-action: pan-y; user-select: none; }
.phone-carousel img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  will-change: transform, opacity;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(11,9,8,.55); backdrop-filter: blur(3px);
  color: #fff; font-size: 1rem; line-height: 1;
  display: grid; place-items: center;
  transition: background-color .25s, transform .25s;
}
.carousel-arrow:hover { background: rgba(232,38,26,.75); }
.carousel-prev { left: 6px; }
.carousel-next { right: 6px; }

.carousel-dots {
  position: absolute; left: 0; right: 0; bottom: 8px; z-index: 4;
  display: flex; justify-content: center; gap: 5px;
}
.carousel-dots span { width: 5px; height: 5px; border-radius: 50%; background: rgba(244,239,230,.4); transition: background-color .25s, width .25s; }
.carousel-dots span.is-active { background: var(--accent); width: 14px; border-radius: 3px; }

@media (max-width: 539px) {
  /* los dos marcos miden lo mismo (150x325, proporción de iPhone 14); en
     móvil se igualan también los ángulos (antes -6º y 4º) porque el giro
     más pronunciado del de atrás lo hacía parecer más alargado */
  .phone-back { transform: translate(-42%, -12%) rotate(-4deg) perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); }
  .phone-front { transform: translate(22%, 10%) rotate(4deg) perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); }
}

/* =============================================================
   9. Es para ti
   ============================================================= */
/* el fondo vive en ::before (no directamente en la sección) para poder
   difuminarlo hacia transparente en los bordes sin afectar al contenido
   real, dejando pasar el logotipo de fondo fijo poco a poco en vez de
   cortarlo en seco justo en la costura con la sección de al lado */
.fit-section::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: var(--bg-1);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 clamp(50px, 8vw, 90px));
          mask-image: linear-gradient(to bottom, transparent 0, #000 clamp(50px, 8vw, 90px));
}
/* además del borde superior (compartido con #faq), esta también difumina
   el inferior */
#es-para-ti::before {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 clamp(50px, 8vw, 90px), #000 calc(100% - clamp(50px, 8vw, 90px)), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 clamp(50px, 8vw, 90px), #000 calc(100% - clamp(50px, 8vw, 90px)), transparent 100%);
}
.fit-section > .container { position: relative; z-index: 1; }
.fit-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 860px) { .fit-grid { grid-template-columns: 1fr 1fr; } }

.fit-card { border-radius: 22px; padding: clamp(1.8rem, 4vw, 2.6rem); border: 1px solid var(--line); transition: border-color .4s; }
.fit-card.is-yes { background: var(--bg-2); }
.fit-card.is-no { background: var(--bg-2); }
.fit-card:hover { border-color: rgba(232,38,26,.55); }
.fit-card h3 { font-family: var(--sans); font-weight: 800; font-size: 1.4rem; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 1.5rem; }
.fit-card.is-no h3 { color: var(--accent); }
.fit-list { display: flex; flex-direction: column; gap: 1rem; }
.fit-list li { display: flex; gap: .9rem; align-items: flex-start; font-size: 1rem; color: var(--cream-2); }
.fit-list svg { flex: none; width: 20px; height: 20px; margin-top: .15rem; }
.fit-card.is-yes svg { color: var(--good); }
.fit-card.is-no svg { color: var(--cream-3); }

.fit-cta { margin-top: 2.6rem; display: flex; justify-content: center; }

/* =============================================================
   9.5 Productos
   ============================================================= */
.products-subhead {
  font-family: var(--sans); font-weight: 800; font-size: 1rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--cream-3);
  margin: 3rem 0 1.2rem;
}
.products-subhead:first-of-type { margin-top: 0; }

.product-card {
  position: relative;
  isolation: isolate;
  border-radius: 20px;
  padding: .6rem;
  border: 2px solid transparent;
  background-image: linear-gradient(var(--bg-2), var(--bg-2)), linear-gradient(var(--line), var(--line));
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  box-shadow: none;
  transition: box-shadow .4s var(--ease-soft), background-image .3s;
}
.product-card:hover, .product-card.is-flash {
  background-image:
    linear-gradient(var(--bg-2), var(--bg-2)),
    conic-gradient(
      from var(--lead-angle),
      #3a0906 0%, #E8261A 22%, #ff9a80 28%, #E8261A 34%,
      #3a0906 50%, #3a0906 60%, #E8261A 72%, #ff9a80 78%, #E8261A 84%, #3a0906 100%
    );
  box-shadow: 0 0 22px rgba(232,38,26,.28);
  animation: leadBorderRotate 6s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .product-card:hover, .product-card.is-flash { animation: none; } }

.product-cover {
  position: relative; aspect-ratio: 3 / 4.1; border-radius: 12px; overflow: hidden;
  background: linear-gradient(155deg, var(--bg-3), var(--bg-1));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem;
  padding: 1rem;
  text-align: center;
}
.product-cover::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 50% 30%, rgba(232,38,26,.22), transparent 70%);
  pointer-events: none;
}
.product-cover-icon {
  position: relative; width: 34px; height: 34px; color: var(--accent);
  filter: drop-shadow(0 0 10px rgba(232,38,26,.35));
  transition: transform .5s var(--ease-soft);
}
.product-card:hover .product-cover-icon { transform: scale(1.08); }
.product-cover-title {
  position: relative; font-family: var(--sans); font-weight: 800; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--cream-2); line-height: 1.25;
}
.product-cover--photo { padding: 0; }
.product-cover--photo img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .8s var(--ease-soft); }
.product-card:hover .product-cover--photo img { transform: scale(1.05); }

.product-price-tag {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%);
  pointer-events: none;
  background: var(--accent);
  color: #fff; font-family: var(--display); font-size: 1.25rem; letter-spacing: .01em;
  padding: .55rem 1.15rem; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 14px 30px -10px rgba(232,38,26,.55), 0 2px 8px rgba(0,0,0,.35), 0 0 24px rgba(232,38,26,.45);
  z-index: 2;
  opacity: 1; transition: opacity .25s, box-shadow .4s var(--ease-soft);
}
/* dentro del carrusel, solo la tarjeta activa muestra su precio */
.carousel-track .product-card .product-price-tag { opacity: 0; }
.carousel-track .product-card.is-carousel-active .product-price-tag { opacity: 1; }

/* el glow del precio se intensifica junto con el bordeado de la tarjeta */
.product-card:hover .product-price-tag,
.product-card.is-flash .product-price-tag {
  box-shadow: 0 14px 30px -10px rgba(232,38,26,.65), 0 2px 8px rgba(0,0,0,.35), 0 0 38px rgba(232,38,26,.75);
}

.product-card-name { font-family: var(--sans); font-weight: 800; font-size: .92rem; color: var(--cream); text-transform: uppercase; letter-spacing: .01em; }
.product-card-desc { margin-top: .45rem; font-size: .84rem; color: var(--cream-3); line-height: 1.45; }

.product-card--soon .product-cover-inner { filter: blur(6px) saturate(.5) brightness(.75); }
.product-cover--photo .product-cover-inner { position: relative; z-index: 1; width: 100%; height: 100%; }
.product-cover--photo .product-cover-inner img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.product-soon-badge {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 .8rem;
  background: rgba(11,9,8,.4);
  font-family: var(--sans); font-weight: 800; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .07em; color: var(--cream);
}
.product-card-name--blurred { filter: blur(3px); user-select: none; }

.coaching-showcase {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: clamp(1.2rem, 2.5vw, 1.8rem);
  background: linear-gradient(165deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: clamp(2rem, 5vw, 3.5rem);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
  transition: border-color .4s;
}
.coaching-showcase:hover { border-color: rgba(232,38,26,.55); }
.coaching-showcase::before {
  content: ""; position: absolute; z-index: -1; top: -20%; right: -10%; width: 60%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(232,38,26,.24), transparent 70%);
  filter: blur(40px); pointer-events: none;
}
.coaching-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .8rem;
}
.coaching-badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.coaching-note { margin-top: 1.6rem; font-size: .85rem; color: var(--cream-3); font-style: italic; }
.coaching-alt-link {
  display: inline-block; margin-top: .9rem;
  font-size: .85rem; color: var(--cream-3);
  border-bottom: 1px dotted var(--cream-3);
  transition: color .25s, border-color .25s;
}
.coaching-alt-link:hover { color: var(--accent); border-color: var(--accent); }

.coaching-features { position: relative; display: grid; gap: 1.7rem 2.2rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .coaching-features { grid-template-columns: 1fr 1fr; } }
.coaching-features { counter-reset: ventaja; }
.coaching-features li { display: flex; gap: .9rem; align-items: flex-start; }
/* numeración en rojo en lugar del tick (el svg sigue en el HTML, oculto) */
.coaching-features li > svg { display: none; }
.coaching-features li::before {
  counter-increment: ventaja;
  content: counter(ventaja, decimal-leading-zero);
  flex: none; margin-top: .1rem;
  font-family: var(--sans); font-weight: 800; font-size: 1rem;
  letter-spacing: .02em; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.coaching-features h4 { font-family: var(--sans); font-weight: 800; font-size: .98rem; color: var(--cream); text-transform: uppercase; letter-spacing: .02em; }
.coaching-features p { margin-top: .35rem; font-size: 1.02rem; color: var(--cream-2); line-height: 1.5; }

/* Móvil: las 7 ventajas en vertical ocupaban media pantalla y enterraban el
   botón y el ebook de regalo. Pasan a un carrusel lateral con arrastre
   nativo: una tarjeta por gesto, con la siguiente asomando para que se vea
   que hay más. */
.coaching-features-wrap { position: relative; }
.coaching-arrows { display: none; }
@media (max-width: 719px) {
  .coaching-features {
    display: flex; grid-template-columns: none; gap: .9rem;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: .25rem;
  }
  .coaching-features::-webkit-scrollbar { display: none; }
  /* una ventaja por pantalla: la siguiente no asoma. La sangría lateral
     reserva el sitio de las flechas para que nunca pisen el texto */
  .coaching-features li {
    flex: 0 0 100%; scroll-snap-align: center;
    background: rgba(244,239,231,.04);
    border: 1px solid var(--line); border-radius: 16px;
    padding: 1.2rem 2.2rem 1.35rem;
    text-align: left;
  }
  .coaching-features p { font-size: .92rem; }

  /* flechas a los lados, desplazadas hacia fuera para que caigan en el margen
     de la tarjeta contenedora y no tapen el texto de la ventaja.
     La de avanzar desaparece en la última y la de retroceder solo existe a
     partir de la segunda (ver initCoachingFeatures en main.js) */
  .coaching-arrows { display: contents; }
  .coaching-arrow {
    display: grid; place-items: center;
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(11,9,8,.72); border: 1px solid var(--line-strong);
    color: var(--cream);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    transition: background-color .2s;
  }
  .coaching-arrow--next { right: -10px; }
  .coaching-arrow--prev { left: -10px; }
  .coaching-arrow[hidden] { display: none; }
  .coaching-arrow:active { background: rgba(232,38,26,.8); }
  .coaching-arrow svg { width: 17px; height: 17px; }
}

.coaching-showcase .lead-magnet-list { margin-top: 2.4rem; }
.coaching-showcase .lead-magnet {
  margin-top: 0; margin-inline: 0; max-width: none;
  padding: 1.2rem; gap: 1.1rem;
}
.coaching-showcase .lead-magnet-cover { width: 92px; }
.coaching-showcase .lead-magnet-copy h3 { font-size: clamp(1.25rem, 3vw, 1.55rem); }
.coaching-showcase .lead-magnet-copy p { font-size: .85rem; }
.coaching-showcase .lead-magnet-badge { font-size: .66rem; margin-bottom: .4rem; }

.coaching-cta .btn-arrow { width: 18px; height: 18px; flex: none; transition: transform .25s var(--ease-out); }
.coaching-cta:hover .btn-arrow { transform: translateX(3px); }

.coaching-cta { margin-top: 2.4rem; }
@media (max-width: 719px) {
  .coaching-cta { display: flex; width: max-content; max-width: 100%; margin-inline: auto; }
  .coaching-cta .btn-arrow { display: none; }
}

/* rejilla de Ebooks/Rutinas (página Productos): todo visible a la vez,
   sin carrusel */
.products-grid-wrap {
  display: grid; gap: 3.5rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.products-group { min-width: 0; }
.products-group .products-subhead { margin-top: 0; text-align: center; }
.products-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.6rem 1.4rem;
}
@media (min-width: 640px) { .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* minmax(0,1fr) + min-width:0: sin esto un nombre largo sin espacios
   ("SUPLEMENTACIÓN") ensancha su columna y las tarjetas salen desiguales */
.products-grid .product-card { min-width: 0; }
.products-grid .product-card-name {
  margin-top: 1.5rem; text-align: center;
  overflow-wrap: normal; hyphens: manual;
}
/* La palabra más larga ("SUPLEMENTACIÓN") no cabe a tamaño completo en la
   rejilla de 2 columnas, y partirla queda fatal. El título se escala con el
   ancho de la propia tarjeta (cqi), así la proporción es la misma en
   cualquier móvil; min() evita que crezca más que el tamaño base.
   La media query es el respaldo para navegadores sin unidades de contenedor. */
@media (max-width: 639px) {
  .products-grid .product-card-name { font-size: clamp(.58rem, 3.1vw, .92rem); }
}
.products-grid .product-card { container-type: inline-size; }
.products-grid .product-card-name { font-size: min(.92rem, 9.8cqi); }
/* "Próximamente": se ve que hay un nombre pero no se puede leer todavía */
.products-grid .product-card--soon .product-card-name { filter: blur(5px); user-select: none; }
/* precio oculto de momento en la vista de rejilla — para volver a
   mostrarlo, borra esta regla (el resto del mecanismo sigue intacto) */
.products-grid .product-price-tag { display: none; }

.carousels-wrap {
  display: grid; gap: 3rem; grid-template-columns: 1fr;
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
@media (min-width: 960px) { .carousels-wrap { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }

.product-carousel { min-width: 0; }
.product-carousel .products-subhead { margin-top: 0; text-align: center; }

.carousel-viewport { position: relative; padding-block: .4rem 1.2rem; }
.carousel-mask {
  overflow: hidden;
  /* hueco extra abajo para que el precio (y el glow rojo que lo rodea),
     que cuelga medio fuera de la tarjeta activa, no se recorte por este
     mismo overflow:hidden */
  padding-bottom: 60px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.carousel-track { display: flex; transition: transform .55s var(--ease-soft); will-change: transform; }
@media (prefers-reduced-motion: reduce) { .carousel-track { transition: none; } }

.carousel-track .product-card {
  flex: none; width: min(230px, 60vw); margin-inline: 10px;
  opacity: .32; transform: scale(.85);
  transition: opacity .5s var(--ease-soft), transform .5s var(--ease-soft), border-color .4s;
}
.carousel-track .product-card.is-carousel-active { opacity: 1; transform: scale(1); }

.carousel-nav {
  position: absolute; top: 44%; transform: translateY(-50%); z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(11,9,8,.65); border: 1px solid var(--line-strong);
  color: var(--cream); display: grid; place-items: center;
  transition: background-color .25s, border-color .25s;
}
.carousel-nav:hover { background: var(--accent); border-color: transparent; }
.carousel-nav svg { width: 18px; height: 18px; }
.carousel-nav--prev { left: calc(50% - min(115px, 30vw) - 46px); }
.carousel-nav--next { right: calc(50% - min(115px, 30vw) - 46px); }

.product-dots { display: flex; justify-content: center; gap: 6px; margin-top: 1.6rem; }
.product-dots span {
  width: 6px; height: 6px; border-radius: 50%; background: rgba(244,239,230,.25); cursor: pointer;
  transition: background-color .25s, width .25s;
}
.product-dots span.is-active { background: var(--accent); width: 18px; border-radius: 3px; }

/* =============================================================
   10. Testimonios
   ============================================================= */
.testi-marquee {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.testi-track {
  display: flex; gap: 1.4rem; width: max-content;
  cursor: grab; user-select: none; touch-action: pan-y;
  will-change: transform;
}
.testi-marquee.is-dragging .testi-track { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) {
  .testi-marquee { overflow-x: auto; }
}

.testi-card {
  --rx: 0deg; --ry: 0deg;
  flex: none; width: min(360px, 85vw);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 20px;
  padding: 2.2rem 1.8rem 2rem;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .55s var(--ease-soft), border-color .4s;
}
.testi-card:hover { border-color: rgba(232,38,26,.3); transition-duration: .15s; }
.testi-stars { display: flex; justify-content: center; gap: .2rem; color: #FBBC04; margin-top: 1.3rem; transform: translateZ(20px); }
.testi-stars svg {
  width: 16px; height: 16px;
  fill: currentColor;
  filter: drop-shadow(0 0 2px rgba(251,188,4,.5)) drop-shadow(0 0 4px rgba(251,188,4,.22));
}
.testi-text { margin-top: 1.1rem; font-size: .96rem; color: var(--cream-2); transform: translateZ(20px); }
.testi-author { display: flex; flex-direction: column; align-items: center; gap: .7rem; transform: translateZ(20px); }
.testi-avatar { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--line); transition: border-color .3s; }
.testi-avatar:hover { border-color: rgba(232,38,26,.55); }
.testi-avatar--initial {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 800; font-size: 1.3rem; color: var(--cream-2);
  background: linear-gradient(155deg, var(--bg-3), var(--bg-1));
}
.testi-name { font-weight: 700; color: var(--cream); font-size: .95rem; }

/* Móvil: a 85vw la tarjeta no cabía entera (el carrusel difumina un 5% por
   cada lado), así que siempre se veía cortada. Se encoge para que quepa
   completa dentro de la zona nítida, y el contenido se ajusta al nuevo tamaño.
   Valores anteriores: width min(360px, 85vw), padding 2.2rem 1.8rem 2rem,
   avatar 68px, texto .96rem, nombre .95rem, estrellas 16px. */
@media (max-width: 719px) {
  .testi-card {
    width: min(360px, 72vw);
    padding: 1.7rem 1.3rem 1.5rem;
  }
  .testi-avatar { width: 56px; height: 56px; }
  .testi-text { margin-top: .9rem; font-size: .85rem; }
  .testi-name { font-size: .88rem; }
  .testi-stars { margin-top: 1rem; }
  .testi-stars svg { width: 14px; height: 14px; }
}

.transform-head { margin-top: 4rem; margin-bottom: 1.6rem; text-align: left; }
.transform-head h3 {
  font-family: var(--display); font-size: var(--fs-h2);
  text-transform: uppercase; color: var(--cream); letter-spacing: normal;
}

.transform-marquee {
  margin-top: 2.4rem; position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.transform-track {
  display: flex; gap: 1.2rem; width: max-content;
  cursor: grab; user-select: none; touch-action: pan-y;
  will-change: transform;
}
.transform-marquee.is-dragging .transform-track { cursor: grabbing; }
@keyframes transformMarquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .transform-marquee { overflow-x: auto; }
}

.transform-card {
  flex: none; width: min(320px, 82vw);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 20px;
  padding: 1.1rem 1.1rem 1.5rem;
  transition: border-color .4s;
}
.transform-card:hover { border-color: rgba(232,38,26,.3); }

.transform-photos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-radius: 12px; overflow: hidden;
}
.transform-photos figure { position: relative; aspect-ratio: 3 / 4; }
.transform-photos figure:first-child { border-right: 1px solid rgba(11,9,8,.5); }
.transform-photos img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  filter: saturate(1.02) contrast(1.02);
  transition: transform .8s var(--ease-soft);
}
.transform-card:hover .transform-photos img { transform: scale(1.04); }
.transform-photos figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.transform-card h4 {
  margin-top: 1.1rem; font-family: var(--display); font-size: 1.1rem;
  text-transform: uppercase; letter-spacing: .01em;
}
.transform-card p { margin-top: .6rem; font-size: .9rem; color: var(--cream-3); }

/* =============================================================
   11. FAQ
   ============================================================= */
.faq-list { display: flex; flex-direction: column; gap: .8rem; max-width: 780px; margin-inline: auto; }
.faq-item {
  border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2);
  overflow: hidden; transition: border-color .4s;
}
.faq-item:hover { border-color: rgba(232,38,26,.55); }
.faq-item[open] { border-color: var(--line-strong); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.3rem 1.5rem;
  font-weight: 600; font-size: 1rem; color: var(--cream);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-plus {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid transparent;
  background-image: linear-gradient(var(--bg-2), var(--bg-2)), linear-gradient(var(--line-strong), var(--line-strong));
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  display: grid; place-items: center; position: relative;
  transition: transform .4s var(--ease-out), background-color .3s, background-image .3s;
}
.faq-item:hover .faq-plus {
  background-image: linear-gradient(var(--bg-2), var(--bg-2)), conic-gradient(
    from var(--lead-angle),
    #3a0906 0%, #E8261A 22%, #ff9a80 28%, #E8261A 34%, #3a0906 50%,
    #3a0906 60%, #E8261A 72%, #ff9a80 78%, #E8261A 84%, #3a0906 100%
  );
  animation: leadBorderRotate 6s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .faq-item:hover .faq-plus { animation: none; } }
.faq-plus::before, .faq-plus::after {
  content: ""; position: absolute; background: var(--cream-2);
  transition: transform .3s var(--ease-out), background-color .3s;
}
.faq-plus::before { width: 10px; height: 1.5px; }
.faq-plus::after { width: 1.5px; height: 10px; }
.faq-item[open] .faq-plus { background: var(--accent); border-color: var(--accent); }
.faq-item[open] .faq-plus::before, .faq-item[open] .faq-plus::after { background: #fff; }
.faq-item[open] .faq-plus::after { transform: rotate(90deg) scaleY(0); }
.faq-answer { padding: 0 1.5rem 1.4rem; font-size: .96rem; color: var(--cream-3); }

.faq-more {
  display: block; width: fit-content; margin: 2rem auto 0; max-width: 780px;
  text-align: center;
  font-size: .98rem; font-weight: 700; color: var(--accent);
  border-bottom: 1px solid rgba(232,38,26,.4);
  transition: color .3s, border-color .3s;
}
.faq-more:hover { color: #ff2e21; border-color: #ff2e21; }

/* =============================================================
   12. Footer CTA
   ============================================================= */
.footer-cta {
  position: relative;
  overflow: clip;
  background: linear-gradient(165deg, var(--bg-1), #170f0d 70%);
  border-top: 1px solid var(--line);
  text-align: center;
}
.footer-cta-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
  opacity: .58; z-index: 0;
}
.footer-cta-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(70% 60% at 50% 30%, rgba(11,9,8,.4), var(--bg) 92%);
}
.footer-cta .container { position: relative; z-index: 2; }
.footer-cta .kicker { justify-content: center; }
.footer-cta h2 {
  font-family: var(--display); font-size: var(--fs-h2); text-transform: uppercase;
  max-width: 20ch; margin-inline: auto; margin-top: 1.2rem;
}
.footer-cta p { margin-top: 1.1rem; max-width: 46ch; margin-inline: auto; color: var(--cream-3); }
.footer-cta .hero-actions { justify-content: center; margin-top: 2.2rem; }

@property --lead-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.lead-magnet-list { display: flex; flex-direction: column; gap: 1.1rem; }

.lead-magnet {
  position: relative;
  margin: 3.2rem auto 0; max-width: 640px;
  display: flex; flex-direction: column; align-items: center; gap: 1.6rem;
  padding: 1.8rem; border-radius: 22px;
  backdrop-filter: blur(6px);
  text-align: left;
  border: 2px solid transparent;
  background-image:
    linear-gradient(rgba(21,17,14,.82), rgba(21,17,14,.82)),
    conic-gradient(
      from var(--lead-angle),
      #3a0906 0%,
      #E8261A 22%,
      #ff9a80 28%,
      #E8261A 34%,
      #3a0906 50%,
      #3a0906 60%,
      #E8261A 72%,
      #ff9a80 78%,
      #E8261A 84%,
      #3a0906 100%
    );
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 0 26px rgba(232,38,26,.3), 0 18px 34px -12px rgba(0,0,0,.6);
  animation: leadBorderRotate 6s linear infinite;
}
@keyframes leadBorderRotate { to { --lead-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) { .lead-magnet { animation: none; } }
@media (min-width: 640px) { .lead-magnet { flex-direction: row; align-items: center; text-align: left; } }

.lead-magnet-cover {
  position: relative;
  flex: none; width: 130px; aspect-ratio: 3/4.24;
  border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(244,239,230,.18);
  box-shadow: 0 18px 34px -10px rgba(0,0,0,.6), 0 4px 14px rgba(232,38,26,.2);
  transform: perspective(600px) rotateY(-8deg);
  transition: transform .8s var(--ease-soft);
  margin-inline: auto;
}
.lead-magnet:hover .lead-magnet-cover { transform: perspective(600px) rotateY(-8deg) scale(1.08); }
.lead-magnet-cover img { width: 100%; height: 100%; object-fit: cover; }
.lead-magnet-cover--icon {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, var(--bg-3), var(--bg-1));
}
.lead-magnet-cover--icon svg { width: 40px; height: 40px; color: var(--cream-3); }

.lead-magnet-copy { flex: 1; }
.lead-magnet-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .6rem;
}
.lead-magnet-badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.lead-magnet-copy h3 {
  font-family: var(--display); font-size: clamp(1.2rem, 3vw, 1.5rem);
  text-transform: uppercase; color: var(--cream); line-height: 1.08;
}
.lead-magnet-copy p { margin-top: .6rem; font-size: .92rem; color: var(--cream-3); }
/* deja claro que el ebook es un bono sin coste al contratar el asesoramiento */
.lead-magnet-free {
  margin-top: .7rem; font-size: .88rem; font-weight: 700;
  color: var(--accent);
}
.lead-magnet-price-old {
  margin-right: .45rem; font-weight: 500; opacity: .75;
  text-decoration: line-through; text-decoration-thickness: 2px;
}
/* .lead-magnet-copy p { color: var(--cream-3) } de arriba tiene más
   especificidad que .lead-magnet-badge sola (son <p>), así que sin esto
   el bono y el precio tachado saldrían en el mismo gris apagado */
.lead-magnet-copy .lead-magnet-badge,
.lead-magnet-copy .lead-magnet-free {
  color: var(--accent);
}
.lead-magnet-copy .btn { margin-top: 1.1rem; }

/* locked / no-longer-available bonus items */
.lead-magnet--locked {
  animation: none;
  background-image:
    linear-gradient(rgba(21,17,14,.82), rgba(21,17,14,.82)),
    linear-gradient(rgba(244,239,231,.12), rgba(244,239,231,.12));
  box-shadow: 0 14px 26px -14px rgba(0,0,0,.5);
}
.lead-magnet--locked .lead-magnet-cover,
.lead-magnet--locked:hover .lead-magnet-cover { transform: perspective(600px) rotateY(-8deg); filter: grayscale(.55) brightness(.55); }
.lead-magnet--locked .lead-magnet-copy h3 { color: var(--cream-3); }
.lead-magnet-badge--locked { color: var(--cream-3); }
.lead-magnet-badge--locked::before { background: var(--cream-3); box-shadow: 0 0 0 4px rgba(244,239,231,.12); }
.lead-magnet-lock {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11,9,8,.5);
}
.lead-magnet-lock svg { width: 26px; height: 26px; color: var(--cream); }


footer.site-footer { padding-block: 2.6rem; border-top: 1px solid var(--line); }
.footer-row {
  display: flex; flex-direction: column; gap: 1.4rem;
  align-items: center; text-align: center;
}
@media (min-width: 720px) {
  .footer-row { flex-direction: row; justify-content: space-between; text-align: left; }
}
.footer-brand { display: flex; align-items: center; gap: .7rem; }
.footer-brand img { width: 46px; height: 46px; object-fit: contain; }
.footer-brand span { font-family: var(--display); text-transform: uppercase; font-size: 1.5rem; letter-spacing: .02em; color: var(--cream); }
.footer-links { display: flex; gap: 1.6rem; flex-wrap: wrap; justify-content: center; }
.footer-links a { font-size: .88rem; color: var(--cream-3); transition: color .3s; }
.footer-links a:hover { color: var(--accent); }

.footer-social { display: flex; gap: .8rem; }
.footer-social a {
  display: grid; place-items: center; width: 36px; height: 36px;
  border: 1px solid var(--line); border-radius: 50%; color: var(--cream-3);
  transition: color .3s, border-color .3s;
}
.footer-social a:hover { color: var(--accent); border-color: rgba(232,38,26,.4); }
.footer-social svg { width: 17px; height: 17px; }
.footer-copy { font-size: .8rem; color: var(--cream-3); opacity: .7; }

/* =============================================================
   12.5 Product modal
   ============================================================= */
.product-modal {
  position: fixed; inset: 0; z-index: 10050;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease-out);
}
.product-modal.is-open { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .product-modal { transition: none; } }

.product-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(8,6,5,.78);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

.product-modal-card {
  position: relative;
  width: min(680px, 92vw);
  max-height: 88vh; overflow-y: auto;
  border-radius: 20px;
  border: 2px solid transparent;
  background-image:
    linear-gradient(165deg, var(--bg-2), var(--bg-1)),
    conic-gradient(
      from var(--lead-angle),
      #3a0906 0%, #E8261A 22%, #ff9a80 28%, #E8261A 34%,
      #3a0906 50%, #3a0906 60%, #E8261A 72%, #ff9a80 78%, #E8261A 84%, #3a0906 100%
    );
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 0 26px rgba(232,38,26,.3), 0 40px 80px -20px rgba(0,0,0,.7);
  animation: leadBorderRotate 6s linear infinite;
  display: flex; flex-direction: column;
  opacity: 0;
  transform: translateY(16px) scale(.98);
  transition: transform .35s var(--ease-out), opacity .35s var(--ease-out);
}
.product-modal.is-open .product-modal-card { opacity: 1; transform: translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce) { .product-modal-card { transition: opacity .3s; animation: none; } }
@media (min-width: 620px) { .product-modal-card { flex-direction: row; } }

.product-modal-close {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(11,9,8,.55); border: 1px solid rgba(255,255,255,.16);
  color: #fff; display: grid; place-items: center;
  transition: background-color .25s, border-color .25s, transform .25s;
}
.product-modal-close:hover { background: var(--accent); border-color: transparent; transform: rotate(90deg); }
.product-modal-close svg { width: 16px; height: 16px; }

.product-modal-gallery {
  flex: none;
  margin: 1.2rem 1.2rem 0 1.2rem;
}
.product-modal-media {
  width: 100%; aspect-ratio: 3 / 4.1;
  background: linear-gradient(165deg, var(--bg-2), var(--bg-1));
  border-radius: 16px;
  display: flex; flex-direction: row; gap: 10px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.product-modal-media::-webkit-scrollbar { display: none; }
.product-modal-media[hidden] { display: none; }
.product-modal-media img {
  flex: none; width: 100%; height: 100%; object-fit: contain; display: block;
  scroll-snap-align: center; scroll-snap-stop: always;
  cursor: zoom-in;
}
.product-modal-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.product-modal-thumbs[hidden] { display: none; }
.product-modal-thumb {
  flex: 1 1 0; min-width: 0; aspect-ratio: 1;
  border-radius: 8px; overflow: hidden;
  border: 2px solid transparent; padding: 0; background: none; cursor: pointer;
  opacity: .55;
  transition: border-color .25s, opacity .25s;
}
.product-modal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-modal-thumb:hover { opacity: .85; }
.product-modal-thumb.is-active { border-color: var(--accent); opacity: 1; }
@media (min-width: 620px) {
  .product-modal-gallery { width: 200px; align-self: flex-start; margin: 1.6rem 0 1.6rem 1.6rem; }
  .product-modal-media {
    flex-direction: column; gap: 14px;
    overflow-x: hidden; overflow-y: auto;
    scroll-snap-type: y mandatory;
  }
}

.product-modal-body { flex: 1; min-width: 0; padding: clamp(1.6rem, 4vw, 2.2rem); }

.product-modal-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
}
@media (min-width: 620px) { .product-modal-top { padding-right: 2.4rem; } }
.product-modal-top h3 {
  font-family: var(--sans); font-weight: 800; font-size: clamp(1.25rem, 3.2vw, 1.6rem);
  color: var(--cream); line-height: 1.25;
}
.product-modal-price {
  flex: none; display: flex; align-items: baseline; gap: .6rem;
  font-family: var(--display); font-size: clamp(1.5rem, 3.8vw, 1.9rem);
  color: var(--cream); letter-spacing: .02em; white-space: nowrap;
}
.product-modal-price-old {
  font-size: .62em; color: var(--accent);
  text-decoration: line-through; text-decoration-thickness: 2px;
  opacity: .85;
}
.product-modal-price-new {
  color: var(--cream);
}
.product-modal-price-old:not([hidden]) ~ .product-modal-price-new {
  color: var(--accent); font-weight: 800;
  text-shadow: 0 0 18px rgba(232,38,26,.55);
}
.product-modal-price.is-offer {
  font-size: clamp(1.9rem, 5vw, 2.5rem);
}

.product-modal-desc { margin-top: 1.1rem; font-size: .95rem; color: var(--cream-2); line-height: 1.65; }

.product-modal-buyrow { margin-top: 1.8rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.product-modal-buy { padding: .9rem 2.1rem; font-size: .92rem; }
.product-modal-buy.is-disabled,
.product-modal-buy:disabled {
  background: var(--bg-3); color: var(--cream-2);
  border-color: transparent; box-shadow: none;
  opacity: .75; cursor: default; pointer-events: none;
}
.product-modal-offer-note {
  margin-top: .8rem; font-size: .8rem; font-style: italic; color: var(--accent);
}

/* =============================================================
   12.6 Lightbox (full-size product image)
   ============================================================= */
.lightbox {
  position: fixed; inset: 0; z-index: 10100;
  display: flex; align-items: center; justify-content: center; padding: 2rem;
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease-out);
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(6,5,4,.9); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.lightbox-frame { position: relative; display: inline-block; line-height: 0; }
.lightbox-img {
  display: block; max-width: calc(100vw - 4rem); max-height: calc(100vh - 4rem);
  border-radius: 12px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.7);
  opacity: 0; transform: scale(.96);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.lightbox.is-open .lightbox-img { opacity: 1; transform: scale(1); }
.lightbox-close {
  position: absolute; top: -16px; right: -16px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(11,9,8,.85); border: 1px solid rgba(255,255,255,.18); color: #fff;
  display: grid; place-items: center;
  transition: background-color .25s, border-color .25s, transform .25s;
}
.lightbox-close:hover { background: var(--accent); border-color: transparent; transform: rotate(90deg); }

/* =============================================================
   12.7 Página de agradecimiento (post-compra Stripe)
   ============================================================= */
.thanks-page {
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1.5rem;
}
.thanks-card {
  position: relative;
  overflow: hidden;
  width: min(560px, 100%);
  border-radius: 20px;
  border: 2px solid transparent;
  background-image:
    linear-gradient(165deg, var(--bg-2), var(--bg-1)),
    conic-gradient(
      from var(--lead-angle),
      #3a0906 0%, #E8261A 22%, #ff9a80 28%, #E8261A 34%,
      #3a0906 50%, #3a0906 60%, #E8261A 72%, #ff9a80 78%, #E8261A 84%, #3a0906 100%
    );
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 0 26px rgba(232,38,26,.3), 0 40px 80px -20px rgba(0,0,0,.7);
  animation: leadBorderRotate 6s linear infinite, thanksCardIn .7s var(--ease-out) both;
  padding: clamp(2rem, 5vw, 3rem);
  text-align: center;
}
@keyframes thanksCardIn {
  from { opacity: 0; transform: translateY(24px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .thanks-card { animation: none; } }

/* logo como marca de agua de fondo de la propia tarjeta, igual que
   .site-watermark pero contenido dentro de la card */
.thanks-card-watermark {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(280px, 70%);
  height: auto;
  opacity: .06;
  pointer-events: none;
}
.thanks-card-content { position: relative; }

.thanks-check {
  width: 60px; height: 60px; margin: 0 auto 1.4rem;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(244,239,231,.16);
  box-shadow: 0 8px 20px rgba(0,0,0,.4);
  display: grid; place-items: center;
  color: var(--cream);
  animation: thanksCheckPop .6s var(--ease-bounce) .35s both;
}
.thanks-check svg { width: 30px; height: 30px; }
/* misma pieza en la página 404, con el número en lugar del icono */
.thanks-check--404 {
  font-family: var(--display); font-size: 1.4rem;
  letter-spacing: .04em; color: var(--accent);
}
@keyframes thanksCheckPop {
  0%   { opacity: 0; transform: scale(.4); }
  60%  { opacity: 1; transform: scale(1.15); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .thanks-check { animation: none; } }
.thanks-card h1 {
  font-family: var(--display); font-size: clamp(1.9rem, 5vw, 2.6rem);
  text-transform: uppercase; letter-spacing: .01em;
  margin-bottom: .9rem;
}
.thanks-card p { color: var(--cream-2); font-size: 1rem; line-height: 1.6; }
.thanks-card p + p { margin-top: .8rem; }
.thanks-actions { margin-top: 1.8rem; }
.thanks-note { margin-top: 1.6rem; font-size: .85rem; color: var(--cream-3); }
.thanks-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.tw-cursor {
  display: inline-block; width: 2px; height: 1em;
  background: var(--accent); margin-left: 2px; vertical-align: -2px;
  animation: twBlink .8s steps(1) infinite;
}
@keyframes twBlink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tw-cursor { display: none; } }

/* =============================================================
   12.8 Página de contacto
   ============================================================= */
.contact-form { max-width: 620px; margin-inline: auto; display: grid; gap: 1.4rem; }
.contact-field { display: flex; flex-direction: column; gap: .5rem; }
.contact-field span { font-size: .85rem; font-weight: 600; color: var(--cream-2); }
.contact-field input, .contact-field textarea {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  padding: .85rem 1rem; color: var(--cream); font: inherit; resize: vertical;
  transition: border-color .25s, background-color .25s;
}
.contact-field input:focus, .contact-field textarea:focus {
  outline: none; border-color: var(--accent); background: var(--bg-3);
}
.contact-form .btn { justify-self: start; }
.contact-form-status { font-size: .9rem; margin-top: -.4rem; }
.contact-form-status.is-error { color: #ff6b5e; }
.contact-form-status.is-ok { color: var(--good); }
.contact-form-note { font-size: .8rem; color: var(--cream-3); margin-top: -.6rem; }
.contact-form-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* =============================================================
   12.9 Página de detalle de producto (pdp)
   ============================================================= */
.pdp-back {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .9rem; font-weight: 600; color: var(--cream-3);
  margin-bottom: 1.6rem; transition: color .25s;
}
.pdp-back svg { width: 16px; height: 16px; transition: transform .25s var(--ease-out); }
.pdp-back:hover { color: var(--cream); }
.pdp-back:hover svg { transform: translateX(-3px); }

.pdp { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 860px) { .pdp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; } }

.pdp-main-image {
  position: relative; aspect-ratio: 3 / 4.1; border-radius: 18px; overflow: hidden;
  background: linear-gradient(155deg, var(--bg-3), var(--bg-1));
  border: 1px solid var(--line);
}
.pdp-main-image img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.pdp-thumbs { display: flex; gap: .7rem; margin-top: .9rem; flex-wrap: wrap; }
.pdp-thumb {
  width: 64px; aspect-ratio: 3/4.1; border-radius: 10px; overflow: hidden;
  border: 2px solid transparent; padding: 0; cursor: pointer; background: none;
  transition: border-color .2s, opacity .2s; opacity: .6;
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumb:hover { opacity: .85; }
.pdp-thumb.is-active { border-color: var(--accent); opacity: 1; }

.pdp-info {
  border: 1px solid var(--line); border-radius: 20px;
  padding: clamp(1.6rem, 3vw, 2.2rem);
  background: var(--bg-2);
}
.pdp-info h1 { font-family: var(--display); font-size: clamp(1.7rem, 3.4vw, 2.3rem); text-transform: uppercase; margin-bottom: 1.2rem; }
.pdp-author { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.6rem; }
.pdp-author img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: center 15%; border: 1px solid var(--line); }
.pdp-author span { font-size: .9rem; font-weight: 600; color: var(--cream-2); }
.pdp-bottom {
  display: flex; justify-content: space-between; align-items: stretch;
  gap: 1.5rem; flex-wrap: wrap; padding-top: 1.4rem; border-top: 1px solid var(--line);
}
.pdp-meta { display: flex; flex-direction: column; gap: .6rem; font-size: .9rem; }
.pdp-meta > div { display: flex; gap: .5rem; }
.pdp-meta dt { color: var(--cream-3); }
.pdp-meta dd { color: var(--cream-2); font-weight: 600; }
.pdp-tag {
  display: inline-block; padding: .25rem .7rem; border-radius: 999px;
  border: 1px solid var(--line-strong); font-size: .8rem; color: var(--cream-2);
}
.pdp-price-block {
  display: flex; flex-direction: column; align-items: flex-end;
  justify-content: space-between; gap: 1.5rem; text-align: right;
  margin-left: auto; min-width: 0;
}
.pdp-price { font-family: var(--display); font-size: clamp(2rem, 4vw, 2.6rem); color: var(--cream); }
.pdp-buy { width: auto; }
/* en dos columnas el bloque de precio nunca cae a una fila propia: el precio
   debe quedar arriba a la derecha, a la altura de "Categoría" */
@media (min-width: 860px) { .pdp-bottom { flex-wrap: nowrap; } }
/* Móvil/tablet: misma disposición que en escritorio — meta a la izquierda,
   precio arriba a la derecha y botón debajo. Antes el bloque no cabía por
   unos pocos píxeles, caía a una fila propia y dejaba un hueco vertical
   grande; el botón se compacta para que quepa al lado. */
@media (min-width: 360px) and (max-width: 859px) {
  .pdp-bottom:not(.is-offer) { flex-wrap: nowrap; gap: .8rem; }
  .pdp-bottom:not(.is-offer) .pdp-buy { padding-left: 1.1rem; padding-right: 1.1rem; }
}
/* sin esto, una etiqueta larga ("Categoría: Herramienta") ensancha la
   columna de la rejilla y esa página saca la tarjeta y la galería más
   anchas que la descripción y la ficha técnica */
.pdp-info, .pdp-gallery { min-width: 0; }
/* Versión de oferta en móvil/tablet: su botón ("Quiero mi asesoramiento")
   es demasiado ancho para ir al lado de la meta, así que se reparte en
   rejilla — meta y precio arriba en la misma línea, botón entero debajo.
   Queda con el mismo reparto visual que la tarjeta normal. */
@media (max-width: 859px) {
  .pdp-bottom.is-offer {
    display: grid; grid-template-columns: 1fr auto;
    gap: .9rem 1rem; align-items: start;
  }
  .pdp-bottom.is-offer .pdp-price-block { display: contents; }
  .pdp-bottom.is-offer .pdp-price { grid-column: 2; justify-self: end; }
  .pdp-bottom.is-offer .pdp-buy { grid-column: 1 / -1; justify-self: end; }
}
/* pantallas muy estrechas: ahí no caben en la misma fila, pero al menos el
   precio y el botón van en la misma línea en vez de uno sobre otro */
@media (max-width: 359px) {
  .pdp-price-block { flex-direction: row; align-items: center; justify-content: flex-end; gap: .9rem; }
}

/* precio "de oferta" (0€) cuando se llega desde el gancho gratuito del
   asesoramiento — ver initPdpOffer() en main.js */
.pdp-price-old {
  font-size: .55em; color: var(--accent); margin-right: .5rem;
  text-decoration: line-through; text-decoration-thickness: 2px; opacity: .85;
}
.pdp-price-new { color: var(--accent); text-shadow: 0 0 18px rgba(232,38,26,.55); }
.pdp-offer-note { display: none; }
/* el botón de la oferta lleva más texto que "Lo quiero": se compacta para que
   quepa en la misma columna y la tarjeta mantenga el reparto original */
.pdp-bottom.is-offer { gap: 1rem; }
.pdp-bottom.is-offer .pdp-buy { padding-left: 1.15rem; padding-right: 1.15rem; font-size: .92rem; }

.pdp-desc-card, .pdp-specs-card {
  border: 1px solid var(--line); border-radius: 20px;
  padding: clamp(1.6rem, 3vw, 2.2rem);
  background: var(--bg-2);
  margin-top: 2rem;
}
.pdp-desc-card p { color: var(--cream-2); line-height: 1.7; }
.pdp-desc-card p + p { margin-top: 1rem; }
.pdp-desc-card strong { color: var(--cream); font-weight: 700; }
.pdp-specs-card h2 { font-family: var(--sans); font-weight: 800; font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cream); margin-bottom: 1.2rem; }
.pdp-specs { display: grid; gap: .8rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .pdp-specs { grid-template-columns: 1fr 1fr; } }
.pdp-specs > div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .6rem; border-bottom: 1px solid var(--line); font-size: .9rem; }
.pdp-specs dt { color: var(--cream-3); }
.pdp-specs dd { color: var(--cream-2); font-weight: 600; text-align: right; }

/* =============================================================
   13. Responsive — global steps
   ============================================================= */
@media (min-width: 540px) { .container { padding-inline: 2rem; } }
@media (min-width: 960px) { .container { padding-inline: 2.5rem; } }
@media (min-width: 1280px) { .container { padding-inline: 3rem; } }

/* =============================================================
   14. Reduced motion — only intrusive
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .splash-logo { animation: none; }
}