/* ============================================
   Sin Romper — VERSIÓN 2 (comparación de paleta, 13/10)
   Copia de la Versión 1 (ver /sin-romper/) con una sola variable
   cambiada: la paleta de color. Sin verde suave ni rosa secundario —
   ver :root para la función de cada color en esta versión.
   Estructura, textos, tipografías, tamaños y responsive: idénticos a V1.
   Mobile-first (375px) — ver docs/04-tecnico-y-deploy.md
   ============================================ */

/* Poppins — texto y cuerpo */
@font-face{font-family:'Poppins';font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/poppins-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/poppins-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/poppins-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/poppins-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-display:swap;font-weight:700;src:url(../fonts/poppins-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-display:swap;font-weight:700;src:url(../fonts/poppins-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Anton — frases condensadas cortas y protagonistas */
@font-face{font-family:'Anton';font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/anton-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Anton';font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/anton-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Archivo Black — sans ancha y pesada para títulos narrativos (licencia OFL, Google Fonts) */
@font-face{font-family:'Archivo Black';font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/archivo-black-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo Black';font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/archivo-black-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root {
  /* Paleta V2 — comparación sin verde ni rosa secundario (ver
     docs/06-decisiones.md, entrada "Versión 2"):
     violeta profundo = títulos, texto de alta jerarquía, fondo del
       cierre de compra y de la entrada a "Qué incluye".
     violeta secundario = texto secundario, información complementaria.
     rosa intenso = único rosa fuerte: etiquetas, números, frases
       destacadas, comillas, acentos.
     rosa claro acento (#FF9EC4, derivado): el único rosa que pasa 4,5:1
       sobre violeta profundo — strong/em dentro de bloques violeta.
     manteca = botones, estrella, testimonio destacado, frase principal
       del cierre. Nunca como fondo de la fecha.
     lavanda = fondo de Inicio, testimonio de Noelia, franja de
       grabaciones. rosa suave = fondo de Qué incluye, testimonio de Laura.
     claro cálido = secciones narrativas y fondo del bloque de precio. */
  --violeta-profundo: #393381;
  --violeta-secundario: #625887;
  --rosa-intenso: #AC3476;
  --rosa-claro-acento: #FF9EC4;
  --rosa-suave: #F3DDE8;
  --lavanda: #EEE3F3;
  --claro-calido: #FBF8F3;
  --manteca: #F2E6B8;
  --manteca-hover: #E8D99F;
  --linea: #E3D3E6;

  --font-cuerpo: 'Poppins', 'Helvetica Neue', system-ui, sans-serif;
  --font-ancho: 'Archivo Black', 'Poppins', sans-serif;
  --font-impacto: 'Anton', 'Poppins', sans-serif;

  --radio: 14px;
  --radio-foto: 20px;
  --ancho-contenedor: 1120px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--claro-calido);
  color: var(--violeta-secundario);
  font-family: var(--font-cuerpo);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-ancho);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
  margin: 0 0 0.5em;
  text-transform: none;
  color: var(--violeta-profundo);
}

/* Tres niveles de escala, bien diferenciados (10/12):
   1. Títulos principales de sección (h2): 30-40px mobile / 44-58px escritorio.
   2. Frases condensadas de impacto (.frase-grande, .cierre-breve,
      hero-titulo__condensado): 40-54px mobile / 58-82px escritorio.
   3. Texto de lectura: sin cambios, 17px/1.5. */
h2 { font-size: clamp(30px, 28px + 2.08vw, 58px); }
h3 { font-size: clamp(19px, 2.6vw, 24px); }

p { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 1.2em; }
li { margin-bottom: 0.5em; }

a { color: inherit; }

img, video { max-width: 100%; height: auto; display: block; }

/* Idea principal dentro de un párrafo: violeta profundo (contexto = violeta
   secundario, el color de base del cuerpo). */
strong { font-weight: 700; color: var(--violeta-profundo); }
em { font-style: normal; font-weight: 600; color: var(--violeta-profundo); }

:focus-visible {
  outline: 3px solid var(--rosa-intenso);
  outline-offset: 2px;
}

/* --- Secciones --- */

.seccion {
  padding: 2rem 1.25rem;
}

.seccion > *, .seccion-col > * {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.seccion > ul, .seccion-col > ul { max-width: 640px; }

.seccion > p, .seccion-col > p { max-width: 58ch; text-align: left; }

.seccion--centrada.seccion > p,
.seccion--centrada .seccion-col > p {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.seccion--centrada h2 { text-align: center; }

.seccion > p.frase-emocional {
  text-align: center;
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}

.seccion--inicio { background: var(--lavanda); padding-top: 2rem; }
.seccion--calido { background: var(--claro-calido); }
.seccion--incluye { background: var(--rosa-suave); }

.seccion--violeta {
  background: var(--violeta-profundo);
}
.seccion--violeta p { color: var(--manteca); }
.seccion--violeta h2 { color: var(--claro-calido); }
.seccion--violeta .eyebrow { color: var(--rosa-claro-acento); }
.seccion--violeta .eyebrow::before { background: var(--rosa-claro-acento); }
.seccion--violeta strong, .seccion--violeta em { color: var(--rosa-claro-acento); }

/* --- Eyebrows: etiqueta + barrita, rosa intenso (pasa 4,5:1 en los tres
   fondos claros) --- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 13px;
  font-weight: 700;
  color: var(--rosa-intenso);
  margin-bottom: 0.9rem;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 3px;
  background: var(--rosa-intenso);
}

/* --- Frase emocional (El problema): tratamiento destacado --- */

.frase-emocional {
  font-weight: 700;
  font-size: clamp(19px, 3.2vw, 24px);
  line-height: 1.35;
  color: var(--violeta-profundo);
}

/* --- Cierre breve en dos tonos de rosa: idea principal + continuación.
   Nunca palabra por palabra — cada span es una idea completa. --- */

.cierre-breve {
  font-family: var(--font-impacto);
  text-transform: uppercase;
  line-height: 1.15;
  text-align: center;
  margin: 1.25rem auto 0;
  max-width: 560px;
}
.cierre-breve__principal {
  font-size: clamp(40px, 31px + 3.57vw, 82px);
  color: var(--rosa-intenso);
}
.cierre-breve__continuacion {
  font-size: clamp(32px, 25px + 2.8vw, 62px);
  color: var(--rosa-intenso);
}

/* --- Frase grande (Un fin de semana), sobre fondo violeta --- */

.frase-grande {
  font-family: var(--font-impacto);
  text-transform: uppercase;
  font-size: clamp(40px, 31px + 3.57vw, 82px);
  line-height: 0.95;
  margin: 0 0 0.4em;
  color: var(--manteca);
}

/* --- Cierre de compra: título compacto, resumen en una fila, bloque
   verde pegado al botón. Espacios reducidos a propósito — este bloque
   es un cierre de compra, no una placa informativa. --- */

h2.precio-frase {
  font-family: var(--font-impacto);
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--manteca);
  font-size: clamp(27px, 21px + 2.6vw, 42px);
  line-height: 1.12;
  max-width: 420px;
  margin-bottom: 0.5rem;
}
p.precio-explicacion {
  color: var(--claro-calido);
  max-width: 46ch;
  margin-bottom: 0.75rem;
}

p.precio-fecha {
  color: var(--claro-calido);
  font-family: var(--font-ancho);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(14px, 11px + 1vw, 16px);
  max-width: 420px;
  margin-bottom: 1.25rem;
}

/* Resumen 2 · 6 · 3: siempre en una sola fila de tres columnas iguales,
   nunca una segunda fila con el tercer dato solo. */
.precio-resumen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  max-width: 420px;
}
.precio-dato { border-left: 1px solid rgba(251, 248, 243, 0.25); padding-left: 0.75rem; }
.precio-dato:first-child { border-left: none; padding-left: 0; }
p.precio-dato__numero {
  font-family: var(--font-impacto);
  color: var(--rosa-claro-acento);
  font-size: clamp(28px, 22px + 2.4vw, 38px);
  line-height: 1;
  margin-bottom: 0.15em;
}
p.precio-dato__texto {
  font-family: var(--font-ancho);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--claro-calido);
  font-size: clamp(10.5px, 9px + 0.6vw, 12px);
  line-height: 1.25;
  margin: 0;
}

/* V2: sin verde — el bloque de precio pasa a claro cálido, con
   "Tu acceso a Sin Romper" en rosa intenso como único acento fuerte. */
.precio-acceso {
  background: var(--claro-calido);
  color: var(--violeta-profundo);
  border-radius: var(--radio);
  padding: 1.25rem 1.5rem;
  max-width: 420px;
  margin-bottom: 0.75rem;
}
p.precio-acceso__titulo {
  font-family: var(--font-ancho);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 13px;
  color: var(--rosa-intenso);
  margin-bottom: 0.3em;
}
.precio-monto,
.seccion--violeta p.precio-monto {
  font-family: var(--font-impacto);
  font-size: clamp(48px, 9vw, 76px);
  line-height: 1;
  color: var(--violeta-profundo);
  text-align: left;
  margin: 0 0 0.1em;
}
p.precio-sub {
  color: var(--violeta-secundario);
  font-size: 15px;
  margin: 0;
}

.precio-compra .btn { margin-top: 0; margin-bottom: 0.5rem; max-width: 420px; }

p.precio-whatsapp {
  font-size: 14px;
  color: var(--claro-calido);
  opacity: 0.85;
  margin-top: 0;
  margin-bottom: 0;
}

/* --- Botones: píldora, alto contraste, área táctil cómoda --- */

.btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 1rem 1.75rem;
  min-height: 44px;
  background: var(--manteca);
  color: var(--violeta-profundo);
  text-decoration: none;
  letter-spacing: 0.01em;
  font-weight: 700;
  font-size: 15px;
  border: 2px solid var(--violeta-profundo);
  border-radius: 999px;
  margin: 1.5rem auto;
  max-width: 640px;
  box-shadow: 0 8px 0 0 var(--violeta-profundo);
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.btn:hover { background: var(--manteca-hover); transform: translateY(2px); box-shadow: 0 6px 0 0 var(--violeta-profundo); }
.btn:active { transform: translateY(8px); box-shadow: 0 0 0 0 var(--violeta-profundo); }

/* El link de pago sigue PENDIENTE: el botón queda sin acción real (ver
   js/main.js), pero visualmente pleno — no lo mostramos gris ni apagado. */
.btn--pendiente { cursor: not-allowed; }

.texto-secundario {
  font-size: 14px;
  opacity: 0.75;
  margin-top: -0.5em;
}

/* --- Checklist visual --- */

.lista-chips {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: grid;
  gap: 0.6rem;
}

.lista-chips li {
  background: var(--lavanda);
  border-radius: var(--radio);
  padding: 0.85em 1em 0.85em 2.6em;
  position: relative;
  font-weight: 600;
  font-size: 16px;
  color: var(--violeta-profundo);
}

.lista-chips li::before {
  content: "✓";
  position: absolute;
  left: 0.9em;
  top: 0.85em;
  color: var(--rosa-intenso);
  font-weight: 700;
}

@media (min-width: 640px) {
  .lista-chips { grid-template-columns: 1fr 1fr; }
}

.publico { margin-top: 1.5rem; }
.publico__intro {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
  font-weight: 700;
  color: var(--rosa-intenso);
  margin-bottom: 0.9rem;
}

/* --- Título de la propuesta: dos violetas de la misma familia,
   "hay muchas opciones" en segunda línea y escala algo mayor --- */
.propuesta-titulo { margin-bottom: 0.6em; }
.propuesta-titulo__principal,
.propuesta-titulo__secundario {
  display: block;
}
.propuesta-titulo__principal { color: var(--violeta-profundo); }
.propuesta-titulo__secundario {
  color: var(--violeta-secundario);
  font-size: 1.12em;
  margin-top: 0.15em;
}

/* --- Fotos históricas: proporciones originales, sin recortar (salvo el
   mural, ver más abajo) --- */

.foto-historica {
  margin: 0.75rem auto 0;
  max-width: 300px;
  border: 3px solid var(--violeta-profundo);
  border-radius: var(--radio-foto);
  overflow: hidden;
}

.foto-historica img { width: 100%; height: auto; display: block; }

.foto-historica--rayas { max-width: 230px; }

.foto-historica--clara { border-color: var(--claro-calido); }

/* Mural: archivo ya recortado por Mariela (recorte definitivo) — se
   muestra en su proporción original, sin recorte ni object-fit por CSS. */
.foto-historica--mural {
  max-width: 230px;
}

/* --- Marco de foto: borde de color, esquinas redondeadas, sin deformar --- */

.foto-marco {
  margin: 0 auto;
  max-width: 250px;
  border: 4px solid var(--rosa-intenso);
  border-radius: var(--radio-foto);
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.foto-marco picture, .foto-marco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

figure.foto-marco { padding: 0; }

#tu-historia .foto-marco { border-color: var(--violeta-profundo); }

.foto-marco--suave { border: none; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28); }
.precio-grid__foto .foto-marco--suave { max-width: 220px; }

.seccion img:not(.foto-marco img) {
  width: 100%;
  height: auto;
  border-radius: var(--radio);
}

/* --- Insignia única tipo sol/estrella sobre la foto del hero: SVG para
   la forma (fill + stroke), texto HTML centrado encima. Tamaño en % del
   ancho de la foto para que escale sin generar overflow horizontal. --- */

.foto-sol {
  position: relative;
  width: fit-content;
  margin: 0 auto;
}

.sol-insignia {
  position: absolute;
  left: -18%;
  bottom: -16%;
  width: 66%;
  aspect-ratio: 1;
  z-index: 5;
  transform: rotate(-7deg);
}

.sol-insignia__forma {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: var(--rosa-intenso);
  stroke: var(--manteca);
  stroke-width: 2.6;
  stroke-linejoin: round;
}

.sol-insignia__texto {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  text-align: center;
  color: var(--manteca);
  line-height: 1.15;
  padding: 21%;
  margin: 0;
}

/* Jerarquía entre los dos mensajes: el primero más protagonista */
.sol-insignia__principal {
  font-weight: 700;
  font-size: clamp(10px, 2.9vw, 13.5px);
}
.sol-insignia__secundario {
  font-weight: 600;
  font-size: clamp(8.5px, 2.4vw, 11px);
  opacity: 0.92;
}

@media (min-width: 768px) {
  .sol-insignia { transform: rotate(-9deg); }
}

/* --- Historia: título compacto, contenedor común, texto pegado a su foto --- */

.historia-titulo { font-size: clamp(21px, 3.6vw, 30px); }

.historia-contenedor { margin-top: 0.5rem; }

.historia-fila { margin-bottom: 1.5rem; }
.historia-fila p { max-width: 58ch; }

.historia-cierre { margin-top: 0.5rem; }

.historia-firma {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--linea);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Panel violeta "Un fin de semana" dentro de Mi historia --- */

.finde-panel {
  background: var(--violeta-profundo);
  border-radius: var(--radio);
  padding: 2rem 1.25rem;
  margin: 2rem auto;
}
.finde-panel p { color: var(--manteca); }
.finde-panel strong, .finde-panel em { color: var(--rosa-claro-acento); }

/* --- Propuesta: texto + video --- */

.propuesta-grid__video { margin-top: 1.5rem; }

.video-marco {
  margin: 0 auto;
  max-width: 220px;
  border: 4px solid var(--rosa-intenso);
  border-radius: var(--radio-foto);
  overflow: hidden;
}
.video-marco video { display: block; width: 100%; height: auto; }

/* --- V2: franja de entrada a "Qué incluye" sin verde — violeta
   profundo de fondo, manteca de texto. Misma altura, misma tipografía. --- */

.franja-verde {
  background: var(--violeta-profundo);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 0.5rem 1.25rem;
  text-align: center;
}
.franja-verde__texto {
  font-family: var(--font-impacto);
  text-transform: uppercase;
  color: var(--manteca);
  font-size: clamp(28px, 22px + 3vw, 48px);
  letter-spacing: 0.01em;
  margin: 0;
  line-height: 1;
}
@media (min-width: 768px) {
  .franja-verde { min-height: 96px; }
}

/* --- V2: franja de grabaciones sin verde — lavanda de fondo --- */

p.grabaciones-franja {
  text-align: center;
  font-family: var(--font-ancho);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(16px, 13px + 1vw, 18px);
  color: var(--violeta-profundo);
  background: var(--lavanda);
  border: 1px solid rgba(57, 51, 129, 0.25);
  border-radius: var(--radio);
  padding: 1.5rem 1.5rem;
  margin: 1.75rem auto;
  max-width: 640px;
}

/* --- Qué incluye: encabezado con fecha integrada, método, encuentros
   protagonistas, casas reales, bonos --- */

.incluye-encabezado { margin-bottom: 2rem; }
.incluye-encabezado__titulo { margin-bottom: 0.75rem; }

/* Fecha integrada tipográficamente al encabezado — nada de recuadro ni
   fondo amarillo. El manteca queda reservado a botones. */
.incluye-fecha {
  padding-top: 0.9rem;
  border-top: 1px solid var(--rosa-intenso);
  max-width: 320px;
}
.incluye-fecha__dias {
  font-family: var(--font-impacto);
  color: var(--rosa-intenso);
  font-size: clamp(32px, 24px + 3vw, 44px);
  line-height: 1;
  margin: 0 0 0.05em;
}
.incluye-fecha__mes {
  font-family: var(--font-ancho);
  text-transform: uppercase;
  color: var(--violeta-profundo);
  font-size: 15px;
  letter-spacing: 0.04em;
  margin: 0 0 0.5em;
}
.incluye-fecha__dato {
  font-size: 14px;
  color: var(--violeta-secundario);
  margin: 0 0 0.15em;
}

/* Método Sin Romper: secuencia de verbos, no tarjetas. Ritmo entre dos
   violetas; las flechas en rosa intenso. */
.metodo { margin: 0 auto 2rem; max-width: 900px; }

.metodo-secuencia {
  font-family: var(--font-ancho);
  text-transform: uppercase;
  font-size: clamp(17px, 12px + 2.6vw, 26px);
  line-height: 1.5;
  margin: 1rem 0 0.75rem;
}
.metodo-secuencia__paso--profundo { color: var(--violeta-profundo); }
.metodo-secuencia__paso--secundario { color: var(--violeta-secundario); }
.metodo-secuencia__flecha {
  color: var(--rosa-intenso);
  margin: 0 0.25em;
  display: inline-block;
}
.metodo-explicacion { max-width: 56ch; margin-bottom: 0; }

.encuentro {
  background: var(--claro-calido);
  border-top: 5px solid var(--rosa-intenso);
  border-radius: var(--radio);
  padding: 1.75rem 1.5rem;
  margin: 1.25rem auto;
  max-width: 640px;
  box-shadow: 0 4px 16px rgba(57, 51, 129, 0.08);
}
.encuentro p:last-child { margin-bottom: 0; }

.encuentro__rotulo {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
  font-weight: 700;
  color: var(--rosa-intenso);
  margin: 0 0 0.3em;
}
.encuentro__titulo { font-size: clamp(23px, 3.2vw, 28px); margin-bottom: 0.5em; }

.casos-reales {
  background: var(--claro-calido);
  border-left: 4px solid var(--rosa-intenso);
  border-radius: 0 var(--radio) var(--radio) 0;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem auto;
  max-width: 640px;
}
.casos-reales p:last-child { margin-bottom: 0; }
.casos-reales strong { color: var(--violeta-profundo); font-weight: 700; }
.casos-reales__titulo {
  font-family: var(--font-ancho);
  font-size: 20px;
  color: var(--violeta-profundo);
  margin-bottom: 0.5em;
}
.casos-reales__frase {
  font-family: var(--font-impacto);
  text-transform: uppercase;
  color: var(--rosa-intenso);
  font-size: clamp(22px, 16px + 3vw, 32px);
  line-height: 1.15;
  margin-bottom: 0.7em;
}
.casos-reales__aclaracion {
  font-size: 14px;
  color: var(--violeta-secundario);
  padding-top: 0.9em;
  margin-top: 0.4em;
  border-top: 1px solid var(--linea);
}

/* "Y además, te llevás 4 bonos": encabezado unido, "4 bonos" como
   elemento mayor — marca el inicio de una nueva parte de la oferta. */
.bonos-titulo {
  text-align: center;
  max-width: 640px;
  margin: 3rem auto 0.75rem;
}

/* Disponibilidad de los 4 bonos: un solo aviso compartido, tipografía de
   apoyo (no Anton), destacado lavanda suave — parte natural de la oferta,
   no una advertencia. */
p.bonos-disponibilidad {
  text-align: center;
  max-width: 420px;
  margin: 0 auto 1.75rem;
  font-size: 14px;
  font-weight: 600;
  color: var(--violeta-profundo);
  background: var(--lavanda);
  border-radius: 999px;
  padding: 0.5em 1.1em;
}
.bonos-titulo__intro {
  display: block;
  font-family: var(--font-ancho);
  color: var(--violeta-profundo);
  font-size: clamp(18px, 14px + 1.6vw, 23px);
}
.bonos-titulo__numero {
  display: block;
  font-family: var(--font-impacto);
  text-transform: uppercase;
  color: var(--rosa-intenso);
  font-size: clamp(32px, 22px + 4.5vw, 48px);
  line-height: 1.1;
  margin-top: 0.1em;
}

.bono {
  border-top: 2px solid var(--linea);
  padding: 1.1rem 0;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.bono:last-of-type { border-bottom: 2px solid var(--linea); }

.bono__numero {
  font-family: var(--font-impacto);
  font-size: 22px;
  color: var(--rosa-intenso);
  margin-bottom: 0.1em;
}
.bono__tipo {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  font-weight: 700;
  color: var(--violeta-secundario);
  margin-bottom: 0.3em;
}
.bono__nombre { margin-bottom: 0.4em; }
.bono__subtitulo {
  font-weight: 600;
  color: var(--violeta-secundario);
  margin-bottom: 0.5em;
}
.bono p:last-child { margin-bottom: 0; }

/* Bono sorpresa: mismo sistema visual, con un pequeño detalle manteca
   (etiqueta) que lo diferencia sin volverlo el más importante. */
.bono--sorpresa .bono__tipo {
  display: inline-block;
  background: var(--manteca);
  color: var(--violeta-profundo);
  padding: 0.2em 0.7em;
  border-radius: 999px;
  letter-spacing: 0.06em;
}

/* --- Testimonios: bloques de color con jerarquía, no tarjetas iguales --- */

.testimonios-titulo {
  font-family: var(--font-ancho);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.testimonios-titulo__principal,
.testimonios-titulo__secundario {
  display: block;
  text-wrap: balance;
}
.testimonios-titulo__principal {
  color: var(--violeta-profundo);
  font-size: clamp(21px, 16px + 2vw, 30px);
}
.testimonios-titulo__secundario {
  color: var(--violeta-secundario);
  font-size: clamp(18px, 14px + 1.6vw, 25px);
  margin-top: 0.1em;
}

.testimonio {
  position: relative;
  border-radius: var(--radio);
  padding: 2rem 1.5rem 1.5rem;
  margin: 0 auto 1.5rem;
  max-width: 640px;
}
.testimonio::before {
  content: "\201C";
  position: absolute;
  top: -0.3rem;
  left: 1rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 72px;
  line-height: 1;
  color: var(--rosa-intenso);
  opacity: 0.35;
  z-index: 0;
}
.testimonio p { position: relative; z-index: 1; margin-bottom: 0.5em; }
.testimonio strong { font-weight: 700; }
.testimonio__autora { font-weight: 700; margin-bottom: 0; }

.testimonio--principal { background: var(--manteca); color: var(--violeta-profundo); }
.testimonio--principal p:first-child { font-size: 18px; }
.testimonio--principal strong { color: var(--rosa-intenso); }
.testimonio--principal .testimonio__autora { color: var(--violeta-profundo); }

.testimonio--noelia { background: var(--lavanda); }
.testimonio--laura { background: var(--rosa-suave); }

.testimonios-par { display: grid; gap: 0; }
.testimonios-par .testimonio:last-child { margin-bottom: 0; }

/* --- Preguntas frecuentes (acordeón) --- */

.faq-item {
  border-top: 2px solid var(--linea);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.faq-item:last-child { border-bottom: 2px solid var(--linea); }

.faq-item__pregunta {
  width: 100%;
  text-align: left;
  font-family: var(--font-cuerpo);
  font-weight: 700;
  font-size: 17px;
  min-height: 44px;
  padding: 1.1rem 1.75rem 1.1rem 0;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  color: var(--violeta-profundo);
}

.faq-item__pregunta::after {
  content: "";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--rosa-intenso);
  transform: translateY(-50%) rotate(0deg);
  transition: transform 150ms ease;
}

.faq-item--abierto .faq-item__pregunta::after {
  transform: translateY(-50%) rotate(-180deg);
}

.faq-item__respuesta {
  display: none;
  padding: 0 1.75rem 1.25rem 0;
}

.faq-item--abierto .faq-item__respuesta { display: block; }

/* --- Pie --- */

.pie {
  text-align: center;
  padding: 2.5rem 1.25rem 6rem;
  font-size: 14px;
  color: var(--violeta-secundario);
  background: var(--claro-calido);
  border-top: 2px solid var(--linea);
}

.pie a { color: var(--rosa-intenso); text-decoration: none; font-weight: 600; }

/* --- WhatsApp flotante: oculto en mobile (tapaba contenido), visible
   en escritorio desde 900px --- */

.whatsapp-flotante {
  display: none;
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  align-items: center;
  justify-content: center;
  font-size: 0;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
  z-index: 20;
}

.whatsapp-flotante::before {
  content: "";
  width: 27px;
  height: 27px;
  background: #fff;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M380.9 97.1C339 55.1 283.2 32 224.1 32c-122.1 0-221.4 99.3-221.4 221.4 0 39 10.2 77.1 29.6 110.6L1.4 480l118.5-30.9c32.2 17.6 68.5 26.8 105.5 26.8h.1c122.1 0 221.4-99.3 221.4-221.4 0-59.1-23.1-114.9-65.1-156.9zM224.1 438.5h-.1c-32.6 0-64.6-8.8-92.3-25.4l-6.6-3.9-69.2 18.1 18.5-67.6-4.3-6.9c-18.2-29-27.8-62.4-27.8-96.6 0-100.6 81.9-182.4 182.6-182.4 48.8 0 94.6 19 129 53.4s53.4 80.2 53.3 129c0 100.6-82 182.4-182.7 182.4zm104.9-136.7c-5.7-2.9-33.9-16.7-39.1-18.6-5.2-1.9-9-2.9-12.8 2.9-3.8 5.7-14.7 18.6-18 22.4-3.3 3.8-6.6 4.3-12.3 1.4-33.4-16.7-55.3-29.8-77.3-67.5-5.8-10 5.8-9.3 16.6-31.1 1.8-3.8 .9-7.1-.6-9.9-1.5-2.9-13.5-32.6-18.4-44.6-4.9-11.7-9.9-9.9-13.5-10.1-3.5-.2-7.5-.2-11.4-.2-4 0-10.4 1.5-15.9 7.3-5.5 5.8-21.1 20.6-21.1 50.3 0 29.7 21.6 58.4 24.6 62.4 3 4 42 64.3 103.2 87.6 50.8 19.3 58.7 16.1 69.3 14.5 10.7-1.6 33.9-13.9 38.6-27.3 4.7-13.4 4.7-24.9 3.3-27.3-1.3-2.5-5.1-4-10.9-6.9z'/></svg>") no-repeat center / contain;
}

@media (min-width: 900px) {
  .whatsapp-flotante { display: flex; }
}

/* --- Hero: título en dos tratamientos, cada parte en su propia línea.
   text-wrap:balance evita que la última palabra de la condensada quede
   sola en una línea cuando hay espacio para repartir mejor (se ignora
   en navegadores que no lo soportan, sin efecto negativo). --- */

.hero-titulo { margin-bottom: 0.6em; }
.hero-titulo__ancho,
.hero-titulo__condensado {
  display: block;
  text-wrap: balance;
}
.hero-titulo__ancho {
  font-family: var(--font-ancho);
  color: var(--violeta-profundo);
  font-size: clamp(30px, 23px + 2.3vw, 52px);
  line-height: 1.1;
}
.hero-titulo__condensado {
  font-family: var(--font-impacto);
  color: var(--rosa-intenso);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(40px, 31px + 3.57vw, 82px);
  line-height: 1;
  margin-top: 0.18em;
}

/* --- Escritorio: más aire, nunca cambia el orden --- */

@media (min-width: 768px) {
  .seccion { padding: 2.75rem 2rem; }
  .btn { width: auto; display: block; }
  .foto-marco { max-width: 340px; }
  .precio-grid__foto .foto-marco--suave { max-width: 280px; }
}

/* ============================================
   Composición de escritorio (900px+)
   ============================================ */

@media (min-width: 900px) {
  .seccion > *, .seccion-col > * { max-width: 700px; }

  .hero-grid, .precio-grid, .encuentros-grid, .bonos-grid, .testimonios-grid, .propuesta-grid {
    max-width: var(--ancho-contenedor);
    margin-left: auto;
    margin-right: auto;
  }

  .historia-contenedor, .finde-grid {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
  }

  .metodo { max-width: 1000px; }
  .metodo-secuencia { white-space: nowrap; }

  /* Encabezado de Qué incluye: título a la izquierda, fecha a la derecha
     como parte de la misma composición */
  .incluye-encabezado {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    gap: 3rem;
    align-items: start;
    max-width: var(--ancho-contenedor);
    margin-left: auto;
    margin-right: auto;
  }
  .incluye-encabezado__titulo { margin-bottom: 0; max-width: 560px; }
  .incluye-fecha { max-width: none; margin-top: 0.3em; }

  /* Inicio: texto a la izquierda, foto a la derecha */
  .hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 3.5rem;
    align-items: center;
  }
  .hero-grid__texto, .hero-grid__foto { max-width: none; }
  .hero-grid__texto > * { margin-left: 0; margin-right: 0; max-width: 520px; }
  .hero-grid__foto > * { margin-left: auto; margin-right: auto; max-width: 340px; }

  /* Propuesta: texto y video en dos columnas, video acompaña sin dejar
     vacío alrededor */
  .propuesta-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 3rem;
    align-items: center;
  }
  .propuesta-grid__texto { max-width: none; }
  .propuesta-grid__texto > * { margin-left: 0; margin-right: 0; max-width: 480px; }
  .propuesta-grid__video { margin-top: 0; }
  .video-marco { max-width: 260px; margin: 0 auto; }

  /* Mi historia: cada párrafo con su foto, cerca, sin columnas lejanas */
  .historia-fila {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 1rem;
  }
  .historia-fila > p { max-width: none; margin: 0; }
  .historia-fila .foto-historica { margin: -1rem auto 0; max-width: 300px; }
  .historia-fila--reversa { margin-top: -0.5rem; }
  .historia-fila--reversa > p { order: 2; }
  .historia-fila--reversa > .foto-historica { order: 1; margin: 1rem auto 0; }
  .historia-cierre { max-width: 58ch; margin-left: auto; margin-right: auto; }

  /* Un fin de semana: título + texto a un lado, mural al otro */
  .finde-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3rem;
    align-items: center;
  }
  .finde-grid__texto { max-width: none; }
  .finde-grid__texto > * { margin-left: 0; margin-right: 0; max-width: 480px; }
  .finde-grid__foto > * { margin-left: auto; margin-right: auto; max-width: 400px; }
  .foto-historica--mural { max-width: 400px; }

  /* Encuentros 1 y 2: lado a lado, paneles equilibrados */
  .encuentros-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
  }
  .encuentro { max-width: none; margin: 0; }

  /* Encabezado de bonos: alineado con el contenido, ambas frases unidas
     en una misma línea de base */
  .bonos-titulo {
    text-align: left;
    max-width: var(--ancho-contenedor);
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
  }
  .bonos-titulo__intro, .bonos-titulo__numero { display: inline; }
  p.bonos-disponibilidad { text-align: left; margin: 0 0 1.75rem; max-width: none; }

  /* Bonos (V2, 4 en total): dos columnas por dos filas — con tres
     columnas los textos del bono 2 quedarían demasiado angostos */
  .bonos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem 3rem;
    align-items: start;
  }
  .bono { max-width: none; margin: 0; border-top: none; border-bottom: none; padding: 0; }
  .bono:nth-child(-n+2) { padding-bottom: 1.75rem; border-bottom: 2px solid var(--linea); }
  .bono:last-of-type { border-bottom: none; }

  /* Testimonios: Marcela a todo el ancho arriba, Noelia y Laura debajo
     en dos columnas de altura libre (no se fuerza una altura igual) */
  .testimonio { max-width: none; margin: 0 0 2rem; }
  .testimonio--principal p:first-child { font-size: 21px; max-width: 70ch; }
  .testimonios-par {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
  }
  .testimonios-par .testimonio { margin-bottom: 0; }

  /* Precio: dos sectores (copia | compra) y la foto acompaña sin competir */
  .precio-grid {
    display: grid;
    grid-template-columns: 1fr 0.85fr 0.65fr;
    gap: 2.5rem;
    align-items: start;
  }
  .precio-copia, .precio-compra { max-width: none; }
  .precio-copia > *, .precio-compra > * { margin-left: 0; margin-right: 0; max-width: 420px; }
  .precio-grid__foto > * { margin-left: auto; margin-right: auto; }
}