/* ==========================================================
   ATENDIA -- sitio de ventas independiente (PHASE 9A.2 v2)
   REFERENCE-LOCKED REBUILD (2026-08-21): reconstruido seccion por
   seccion comparando directamente contra capturas de pantalla reales
   de la pagina de referencia (Polaris Uno/LeadConnector), nunca por
   interpretacion/memoria. Ningun CSS/HTML de esa plataforma copiado.

   Paleta EXACTA (confirmada por el propio panel "paleta de color" que
   la pagina de referencia muestra como contenido, con los hex
   literales visibles):
     Marfil rosado #FAF3EE -- fondo claro principal
     Roka          #4A3B36 -- texto
     Terracota rosa #D98E7E -- acentos italicos/citas
     Salvia        #8A9B84 -- etiquetas eyebrow en mayusculas
   Mas el terracota solido/degradado de los botones CTA (medido via
   getComputedStyle real): linear-gradient(135deg,#B25C46,#9E5238).

   BATCH 1 (2026-08-21): secciones 1-4 unicamente (header, hero,
   ticker, historia). Secciones 5-16 pendientes de aprobacion de
   Maria antes de continuar.
   ========================================================== */

:root {
  --cream: #faf3ee;
  --cream-card: #fffbf7;
  --dusty: #f3e7e0; /* corregido: medido en vivo rgb(243,231,224) */
  --dark: #3a2e2a;
  --text: #4a3b36;
  --text-on-dark: #f3e9df;
  --accent-soft: #d98e7e;
  --accent-deep: #a64f3b; /* medido en vivo: span.acc de la transicion + nombres de fase ("Responde"/"Cualifica"/"Agenda") */
  --accent-1: #b25c46;
  --accent-2: #9e5238;
  --accent-gradient: linear-gradient(135deg, var(--accent-1) 0%, var(--accent-2) 100%);
  --badge-gradient: linear-gradient(150deg, var(--accent-1) 0%, var(--accent-2) 100%); /* medido en vivo: mismos colores que el CTA pero 150deg, no 135deg -- usado en los numeros de la timeline (seccion 10) */
  --dark-roka: #4a3b36; /* medido en vivo (BATCH 3): fondo de "Que incluye" -- MAS CLARO que --dark (header/ticker), es literalmente el mismo tono que --text usado como fondo */
  --sage: #8a9b84;
  --label-green: #586a50; /* medido en vivo: eyebrows y "Fase uno/dos/tres" -- mas oscuro que --sage */
  --border-soft: rgba(74, 59, 54, 0.14);
  --shadow-soft: 0 14px 34px rgba(58, 46, 42, 0.14);
  /* Medido en vivo (BATCH 4): sombra "elevada" usada en la tarjeta de
     precio y en la imagen de "Imagina un lunes" -- mas marcada que
     --shadow-soft, con un segundo layer en tono terracota. */
  --shadow-elevated: 0 2px 12px rgba(217, 142, 126, 0.1), 0 28px 60px -28px rgba(200, 120, 99, 0.34);
  /* Medido en vivo (BATCH 4): icono "+" del acordeon FAQ. */
  --accent-warm: #c87863;
  /* Medido en vivo (BATCH 4): citas grandes en cursiva sobre fondo
     oscuro (seccion "Imagina un lunes" y cierre final) -- distinto de
     --accent-soft (citas sobre fondo claro). */
  --accent-soft-dark: #de988a;
  --radius-lg: 22px;
  --radius-pill: 999px;
  /* Medido en vivo contra la pagina de referencia real a 1440px de
     viewport (margen izquierdo real 193px) -- ver comentario junto a
     .hero-grid mas abajo para el resto de medidas exactas usadas. */
  --max-width: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: "Karla", system-ui, -apple-system, sans-serif;
  font-size: 1.05rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 0.4em;
  line-height: 1.12;
}

h1 { font-size: clamp(2.4rem, 4.6vw, 3.4rem); }
/* Corregido (BATCH 2 revision 2): medido en vivo -- H2 de seccion es
   51.2px/lineHeight 54.8px a 1440px en AMBAS secciones "Para quien" y
   "Que es Atendia". El clamp anterior (tope 2.5rem=40px) se quedaba
   corto -- nunca debia usarse como tope real de diseño. */
h2 { font-size: clamp(2.2rem, 2.4vw + 2.4rem, 3.2rem); line-height: 1.07; }

em, .accent { color: var(--accent-soft); font-style: italic; }

p { margin: 0 0 1em; }

a { color: inherit; }

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

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
}

.center { text-align: center; }

/* Corregido (BATCH 2, seccion 8): medido en vivo -- padding real de
   seccion en la pagina de referencia es 105.6px arriba/abajo a
   1440px, no 96px. Aplicado globalmente (mismo patron en todas las
   secciones de la referencia), efecto minimo (+9.6px) en secciones ya
   aprobadas. */
section { padding: clamp(3.5rem, 7.35vw, 6.6rem) 0; }

.sec-marfil { background: var(--cream); }
.sec-dusty { background: var(--dusty); }
.sec-dark { background: var(--dark); color: var(--text-on-dark); }
.sec-dark h1, .sec-dark h2, .sec-dark h3 { color: var(--text-on-dark); }

/* Medido en vivo: fontSize 15.2px, letterSpacing 3.04px, color #586A50 */
.eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--label-green);
  margin-bottom: 0.9rem;
}

/* ---------- Header / nav ---------- */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--dark);
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 0;
}
.logo { display: flex; align-items: center; gap: 0.6rem; }
.logo-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-gradient);
  color: #fffbf7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex: none;
}
.logo-text-wrap { display: flex; flex-direction: column; line-height: 1.1; }
.logo-text {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.3rem;
  color: #c9beb6;
}
.logo-text em { color: var(--accent-soft); font-style: italic; }
.logo-tag {
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  color: #8d8078;
  text-transform: uppercase;
}
.nav-cta {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}

/* ---------- Buttons ---------- */
.cta {
  display: inline-block;
  background: var(--accent-gradient);
  color: #fffbf7;
  font-family: "Karla", sans-serif;
  font-weight: 700;
  text-decoration: none;
  padding: 1.02rem 2.05rem;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-soft);
  border: none;
  cursor: pointer;
  font-size: 1.16rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cta:hover { transform: translateY(-2px); }

/* ---------- Sticky floating CTA (visible once scrolled past hero) ---------- */
.sticky-cta {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(120%);
  z-index: 150;
  transition: transform 0.25s ease;
}
.sticky-cta.visible { transform: translateX(-50%) translateY(0); }
.sticky-cta .cta { padding: 0.85rem 1.7rem; font-size: 0.92rem; }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(3rem, 7vw, 4.5rem); }
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--cream-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  padding: 0.45rem 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}
.badge-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); flex: none; }
/* Medidas exactas tomadas en vivo (javascript_tool + getBoundingClientRect)
   contra https://sites.leadconnectorhq.com/preview/... a 1440px de viewport:
   h1 fontSize 68.8px/lineHeight 73.6px/width 531px (SIN max-width propio,
   llena la columna); lede fontSize 24.8px/lineHeight 37.2px/width 531px
   (MISMO ancho que el h1, nunca mas estrecho); columna izquierda 531px,
   columna derecha (mockup) 453px -> ratio 1.172:1; separacion entre
   columnas 56px; mockup empieza 100px mas abajo que el badge (152px) y
   35px mas abajo que el propio h1 (217px) -- alineado con la 2a linea del
   H1, nunca con el badge. CTA: padding 16.32px/32.8px, fontSize 18.56px. */
.hero-grid {
  display: grid;
  grid-template-columns: 1.17fr 1fr;
  gap: 3.5rem;
  align-items: start;
}
.hero-copy h1 {
  font-size: clamp(2.9rem, 2.6vw + 2.35rem, 4.3rem);
  line-height: 1.07;
}
.hero-copy h1 em { display: block; margin-top: 0.15em; }
.hero-copy p.lede {
  font-size: clamp(1.2rem, 1.4vw + 0.75rem, 1.55rem);
  line-height: 1.5;
  color: var(--text);
}
.hero-copy .support {
  font-size: 1.02rem;
  margin-top: 1.6rem;
  max-width: 32ch;
}
.hero-copy .support b { display: block; }

.hero-visual {
  background: var(--cream-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 1.75rem;
  text-align: center;
  margin-top: 6rem;
}
.hero-visual .eyebrow { text-align: center; }
.hero-visual h3 {
  font-size: 1.3rem;
  margin-bottom: 1.25rem;
}
.phone-mock {
  background: var(--cream);
  border-radius: 16px;
  overflow: hidden;
  text-align: left;
  border: 1px solid var(--border-soft);
}
.phone-mock .phone-header {
  background: var(--dark);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
}
.phone-mock .phone-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex: none;
}
.phone-mock .phone-name { font-size: 0.85rem; font-weight: 700; line-height: 1.2; }
.phone-mock .phone-sub { font-size: 0.65rem; color: #b8aca4; }
.phone-mock .phone-body { padding: 0.9rem; }
.phone-mock .bubble {
  max-width: 82%;
  padding: 0.55rem 0.8rem;
  border-radius: 12px;
  font-size: 0.82rem;
  margin-bottom: 0.6rem;
  line-height: 1.35;
}
.phone-mock .bubble.in { background: #efe6de; color: var(--text); border-bottom-left-radius: 3px; }
.phone-mock .bubble.out { background: var(--accent-gradient); color: #fff; margin-left: auto; border-bottom-right-radius: 3px; }
.phone-mock .bubble .time { display: block; font-size: 0.6rem; color: #9c8f87; margin-top: 0.2rem; }
.phone-mock .bubble.out .time { color: rgba(255,255,255,.75); }
.phone-mock .status-bar {
  background: var(--sage);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 0.5rem;
}
.hero-visual .caption {
  margin-top: 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
  text-align: center;
}

/* ---------- Marquee ticker ---------- */
.ticker {
  background: var(--dark);
  overflow: hidden;
  white-space: nowrap;
  padding: 1.2rem 0;
}
.ticker-track {
  display: inline-flex;
  animation: ticker-scroll 28s linear infinite;
}
.ticker-track span {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--accent-soft);
  padding: 0 1.5rem;
  white-space: nowrap;
}
.ticker-track span.sep { color: var(--sage); font-style: normal; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Story block ---------- */
.story { max-width: 62ch; margin: 0 auto; text-align: center; }
.story p { font-size: 1.05rem; }
.story .aside { font-style: italic; color: var(--accent-soft); }
.story blockquote {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  color: var(--accent-soft);
  font-size: 1.35rem;
  line-height: 1.5;
  margin: 1.75rem auto;
  max-width: 52ch;
}

/* ==========================================================
   BATCH 2 (2026-08-21): secciones 5-8. Medido en vivo contra la pagina
   de referencia real a 1440px de viewport (javascript_tool +
   getBoundingClientRect/getComputedStyle) -- nunca estimado desde
   capturas de pantalla.
   ========================================================== */

/* ---------- Seccion 5: franja de transicion (oscuro/dusty) ---------- */
/* Medido: seccion bg #F3E7E0, padding 105.6px arriba/abajo; texto
   fontSize 40.8px, primera linea color Roka, segunda linea (span.acc)
   italic color #A64F3B; parrafo de apoyo fontSize 19.84px color Roka
   72% opacidad, ambos centrados, measure ~612-680px. */
.transition-block { max-width: 680px; margin: 0 auto; text-align: center; }
.transition-block p.heading {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.55rem;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 1.1rem;
}
.transition-block p.heading .acc { display: block; color: var(--accent-deep); font-style: italic; margin-top: 0.1em; }
.transition-block .support { font-size: 1.24rem; color: rgba(74, 59, 54, 0.72); max-width: 38ch; margin: 0 auto; }

/* ---------- Seccion 6: "Para quien es Atendia" ---------- */
/* Medido: bloque "measure" width 840px centrado en el contenedor,
   texto alineado a la izquierda DENTRO de ese bloque (no en el borde
   del contenedor). li fontSize 27.52px italic, gap entre items 16px,
   padding-left 24px (hueco para el punto). */
.measure-840 { max-width: 840px; margin: 0 auto; }
.recognize-list {
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 0;
  display: grid;
  gap: 1rem;
}
.recognize-list li {
  position: relative;
  padding-left: 1.5rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.72rem;
  line-height: 1.3;
  color: var(--text);
}
.recognize-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-1);
}
.closing-line { font-size: 1.24rem; color: rgba(74, 59, 54, 0.72); margin-top: 1.75rem; }

/* ---------- Seccion 7: "Por que existe Atendia" (fundadora) ---------- */
/* Medido: figure border-radius 24px, overflow hidden, sombra suave
   rgba(217,142,126,.1); foto width 405/height 541 (ratio ~1.336);
   columna de texto empieza justo donde acaba la foto + 51px de hueco;
   parrafo fontSize 19.84px. */
.founder-grid {
  display: grid;
  grid-template-columns: 0.7fr 1fr;
  gap: 3.2rem;
  align-items: center;
}
.founder-photo-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(217, 142, 126, 0.1), 0 18px 30px rgba(200, 120, 99, 0.08);
  aspect-ratio: 405 / 541;
  background: var(--cream-card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--label-green);
  font-size: 0.8rem;
  text-align: center;
  padding: 1rem;
}
.founder-copy p { font-size: 1.24rem; color: var(--text); }
.founder-copy .accent-line { color: var(--accent-deep); font-style: italic; }

/* NETLIFY LIVE PREVIEW CLEANUP (2026-08-26): placeholder visual neutro (monograma) -- nunca cambia el aspect-ratio/radius/shadow ya aprobados de .founder-photo-frame, solo el contenido interior mientras no exista la foto real. */
.founder-photo-placeholder { background: linear-gradient(160deg, var(--dusty) 0%, var(--cream-card) 100%); }
.founder-monogram {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 6rem;
  line-height: 1;
  color: var(--accent-deep);
  opacity: 0.5;
}

/* ---------- Seccion 8: "Que es Atendia" + 3 fases ---------- */
/* Medido: bloque intro "measure" width 680px centrado (texto alineado
   a la izquierda dentro); grid de 3 cards ocupa el ANCHO COMPLETO del
   contenedor (no el measure estrecho) -- 3 columnas iguales, gap 20px.
   Card: fondo TRANSPARENTE (se funde con el fondo de la seccion),
   solo borde 1px #EBDDD5 + sombra muy suave + radius 24px + padding
   35.2px. "Fase uno" fontSize 17.92px italic color #586A50; nombre de
   fase ("Responde") fontSize 23.2px italic serif color #A64F3B;
   cuerpo fontSize 18px color Roka 72%; icono ✦ absoluto arriba-derecha,
   color terracota translucido, fontSize 25.6px. */
.measure-680 { max-width: 680px; margin: 0 auto; }
.phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.75rem;
}
.phase-card {
  position: relative;
  background: transparent;
  border: 1px solid #ebddd5;
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 10px rgba(74, 59, 54, 0.05);
  padding: 2.2rem;
}
/* Medido en vivo: gap real entre "Fase uno" y el nombre de fase es 0px (sin margen). */
.phase-card .phase-label {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.12rem;
  color: var(--label-green);
  margin-bottom: 0;
}
.phase-card h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--accent-deep);
  margin: 0 0 0.55rem;
}
.phase-card p { font-size: 1.125rem; color: rgba(74, 59, 54, 0.72); line-height: 1.62; margin: 0; }
.phase-card .sparkle {
  position: absolute;
  top: 1.4rem;
  right: 1.55rem;
  font-size: 1.6rem;
  color: rgba(200, 120, 99, 0.5);
}
/* Corregido: medido en vivo fontSize 31.2px, color #A64F3B (no el
   terracota claro), gap real tras el grid de cards ~64px. */
.section-close {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.95rem;
  line-height: 1.3;
  color: var(--accent-deep);
  text-align: center;
  max-width: 680px;
  margin: 4rem auto 0;
}

/* ==========================================================
   BATCH 3 (2026-08-21): secciones 9-12. Medido en vivo contra la
   pagina de referencia real a 1440px de viewport.
   ========================================================== */

/* ---------- Seccion 9: "Cada lunes, en euros" ---------- */
/* Medido: bg #F3E7E0, texto NO inset (left 193, igual que el
   contenedor), width 583; imagen 405x279 (horizontal, no vertical
   como la de la fundadora), gap 51px; parrafos 19.84px, el ultimo
   ("Ese dinero...") en 72% opacidad; caption 15.2px color 56% opacidad. */
.panel-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.8fr;
  gap: 3.2rem;
  align-items: center;
}
.panel-grid .eyebrow, .panel-grid h2 { text-align: left; }
.panel-copy p { font-size: 1.24rem; color: var(--text); }
.panel-copy p.muted { color: rgba(74, 59, 54, 0.72); }
.panel-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(217, 142, 126, 0.1), 0 18px 30px rgba(200, 120, 99, 0.08);
  aspect-ratio: 405 / 279;
  background: var(--cream-card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--label-green);
  font-size: 0.8rem;
  text-align: center;
  padding: 1rem;
  border: 1px solid var(--border-soft);
}
.panel-caption { margin-top: 1rem; font-size: 0.95rem; color: rgba(74, 59, 54, 0.56); text-align: center; }

/* NETLIFY LIVE PREVIEW CLEANUP (2026-08-26): filas ilustrativas ficticias -- nunca cambia el aspect-ratio/radius/shadow/border ya aprobados de .panel-frame, solo reorganiza el contenido interior de un bloque centrado a una lista en columna mientras no exista la captura real. */
.panel-illustrative { flex-direction: column; align-items: stretch; justify-content: center; gap: 0.6rem; }
.illus-row { display: flex; align-items: center; gap: 0.6rem; background: var(--cream); border-radius: 10px; padding: 0.55rem 0.8rem; }
.illus-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-1); flex: none; }
.illus-name { font-size: 0.9rem; font-weight: 700; color: var(--text); flex: 1; text-align: left; }
.illus-tag { font-size: 0.72rem; color: var(--label-green); text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- Seccion 10: "Como se instala" (timeline vertical) ---------- */
/* Medido: badge circulo 44.8px, gradiente 150deg, numero blanco
   18.4px; fila completa ("etapa") 820px de ancho, empieza 110px
   dentro del contenedor (left 303 vs 193); hueco badge-contenido
   ~17px; separacion vertical entre badges 170px; titulo de paso
   23.2px SIN cursiva (normal, no como los nombres de fase de la
   seccion 8); cuerpo 19.84px 72% opacidad; frase animo 19.2px
   cursiva color #A64F3B. */
.timeline-wide { max-width: 820px; margin: 2.75rem auto 0; }
.timeline-step {
  display: grid;
  grid-template-columns: 44.8px 1fr;
  gap: 1.1rem;
  padding-bottom: 2.2rem;
}
.timeline-step:last-child { padding-bottom: 0; }
.timeline-badge {
  width: 44.8px;
  height: 44.8px;
  border-radius: 50%;
  background: var(--badge-gradient);
  color: #fffbf7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 600;
}
.timeline-step h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: normal;
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 0.5rem;
}
.timeline-step .eyebrow { margin-bottom: 0.3rem; }
.timeline-step p { font-size: 1.24rem; color: rgba(74, 59, 54, 0.72); margin: 0 0 0.6rem; }
.timeline-step .mood { font-style: italic; color: var(--accent-deep); font-size: 1.2rem; }

/* ---------- Seccion 11: "Que incluye" / "Todo montado" (oscuro) ---------- */
/* Medido: fondo #4A3B36 (Roka -- distinto del --dark del header),
   lista 820px de ancho (misma medida que la timeline), items
   contiguos separados SOLO por un borde inferior de 1px
   rgba(250,243,238,.16), padding vertical 19.2px cada uno, sin hueco
   adicional; icono ✦ INLINE (no absoluto) color #D98E7E 17.6px,
   seguido del texto en negrita blanca y el resto en cream normal. */
.sec-roka { background: var(--dark-roka); color: var(--text-on-dark); }
.sec-roka h2 { color: var(--text-on-dark); }
.includes-wide {
  list-style: none;
  padding: 0;
  margin: 2.75rem auto 0;
  max-width: 820px;
}
.includes-wide li {
  padding: 1.2rem 0;
  border-bottom: 1px solid rgba(250, 243, 238, 0.16);
  font-size: 1.24rem;
  color: var(--text-on-dark);
}
.includes-wide li:last-child { border-bottom: none; }
.includes-wide .mk { color: var(--accent-soft); font-size: 1.1rem; margin-right: 0.4rem; }
.includes-wide b { display: block; color: #fffbf7; margin-bottom: 0.35rem; }

/* ---------- Seccion 12: "Lo que no vas a tener que hacer" ---------- */
/* Medido: cards son <li> en un grid de 3 columnas iguales de 336px,
   gap 16px, bg SOLIDO #FFFBF7 (no transparente como las de la
   seccion 8), border 1px #EBDDD5, radius 16px (no 24px), padding
   25.6/27.2px; titulo 22.4px cursiva color #A64F3B, cuerpo 18px
   color Roka SIN opacidad reducida (100%, distinto de otras
   secciones), sin icono ✦. */
.nothing-grid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 2.75rem 0 0;
}
.nothing-card {
  background: var(--cream-card);
  border: 1px solid #ebddd5;
  border-radius: 16px;
  padding: 1.6rem 1.7rem;
}
.nothing-card b {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--accent-deep);
  margin-bottom: 0.35rem;
}
.nothing-card span.body { font-size: 1.125rem; color: var(--text); line-height: 1.55; }

/* ==========================================================
   BATCH 4 (2026-08-26): secciones 13-16. Medido en vivo contra la
   pagina de referencia real a 1440px de viewport.
   ========================================================== */

/* ---------- Seccion 13: FAQ "Antes de que preguntes" ---------- */
/* Medido: seccion bg identico a --dusty (reutilizada sec-dusty, sin
   clase nueva); bloque intro measure-680 estandar; acordeon en un
   measure-840 con margin-top 22.4px; cada item <details> ancho
   completo (840px), padding horizontal 20.8px, separador inferior
   1px #EBDDD5; summary flex, sin marcador nativo, fontSize 19.84px
   weight 500, padding vertical 20.8px; icono "+" (::after) fontSize
   27.2px color --accent-warm, MISMO color abierto/cerrado (no rota);
   cuerpo fontSize 19.84px lineHeight 34.1px color Roka 72% opacidad,
   padding-bottom 22.4px. */
.faq-wide { max-width: 840px; margin: 1.4rem auto 0; }
.faq {
  padding: 0 1.3rem;
  border-bottom: 1px solid #ebddd5;
}
.faq:last-child { border-bottom: none; }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  list-style: none;
  cursor: pointer;
  padding: 1.3rem 0;
  font-size: 1.24rem;
  font-weight: 500;
  color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
.faq summary::after {
  content: "+";
  flex: none;
  font-size: 1.7rem;
  color: var(--accent-warm);
  line-height: 1;
}
.faq[open] summary::after { content: "+"; }
.faq-body { padding-bottom: 1.4rem; }
.faq-body p {
  font-size: 1.24rem;
  line-height: 1.72;
  color: rgba(74, 59, 54, 0.72);
  margin: 0;
}

/* ---------- Seccion 14: "Imagina un lunes cualquiera" ---------- */
/* Medido: fondo identico a --dark-roka (reutilizada sec-roka); grid a
   2 columnas 1.1fr:1fr, gap 56px; columna imagen con
   --shadow-elevated, radius --radius-lg, aspect-ratio 467/321,
   object-fit cover; eyebrow en esta seccion oscura usa un verde MAS
   CLARO que --label-green (rgb(157,175,150), similar a --sage) --
   color con ambito SOLO a esta seccion, nunca aplicado
   retroactivamente a la seccion 11 ya aprobada; parrafo cursiva final
   ("kicker-note") fontSize 31.2px lineHeight 41.2px color
   --accent-soft-dark, centrado, max-width 30ch. */
.sensorial-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
.sensorial-grid .eyebrow { color: #9daf96; }
.sensorial-grid p { font-size: 1.24rem; color: var(--text-on-dark); }
.sensorial-grid p strong { color: #fffbf7; }
.figura-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-elevated);
  aspect-ratio: 467 / 321;
  background: rgba(250, 243, 238, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-on-dark);
  font-size: 0.8rem;
  text-align: center;
  padding: 1rem;
}
/* NETLIFY LIVE PREVIEW CLEANUP (2026-08-26): tira semanal ilustrativa ficticia -- nunca cambia el aspect-ratio/radius/shadow ya aprobados de .figura-frame, solo el contenido interior mientras no exista la captura real. */
.illus-week { display: flex; gap: 0.6rem; }
.illus-day { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; background: rgba(250, 243, 238, 0.08); border: 1px solid rgba(250, 243, 238, 0.16); border-radius: 10px; padding: 0.7rem 0.6rem; }
.illus-day-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-soft); }
.illus-day-count { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.6rem; color: var(--text-on-dark); }
.kicker-note {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.95rem;
  line-height: 1.32;
  color: var(--accent-soft-dark);
  text-align: center;
  max-width: 30ch;
  margin: clamp(2.6rem, 5vw, 3.6rem) auto 0;
}

/* ---------- Seccion 15: precio ("La demo, primero") ---------- */
/* Medido: seccion bg --cream (sec-marfil); tarjeta oferta-card 600px,
   padding 48px, bg --cream-card, borde #EBDDD5, radius 24px,
   --shadow-elevated; precio fontSize 64px lineHeight 65.28px peso
   normal (NO bold) color Roka; small bajo el precio fontSize 16.8px
   peso 500 color Roka 72%; lineas con icono ✦ fontSize 19.84px;
   frase "diff" cursiva fontSize 21.12px color --accent-deep; boton
   CTA con sombra propia mas marcada (ambito solo a esta tarjeta, sin
   tocar el .cta global ya aprobado en otras secciones); badge
   "garantia" pill con borde inset color --label-green. */
.oferta-wrap { text-align: center; }
.oferta-wrap .soft { font-size: 1.24rem; color: rgba(74, 59, 54, 0.72); max-width: 46ch; margin: 0 auto; }
.oferta-card {
  max-width: 600px;
  margin: 3rem auto 0;
  background: var(--cream-card);
  border: 1px solid #ebddd5;
  border-radius: 24px;
  box-shadow: var(--shadow-elevated);
  padding: 3rem;
  text-align: left;
}
.oferta-card .plan-label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.95rem;
  line-height: normal;
  font-weight: 700;
  color: var(--label-green);
  margin-bottom: 0.56rem;
}
.oferta-card .precio {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 4rem;
  line-height: 1.02;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 1.375rem;
}
.oferta-card .precio small {
  display: block;
  font-family: "Karla", sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: rgba(74, 59, 54, 0.72);
  margin-top: 0.5rem;
}
.precio-lines {
  list-style: none;
  padding: 0;
  margin: 0 0 1.375rem;
  display: grid;
  gap: 0.85rem;
}
.precio-lines li { display: flex; gap: 0.6rem; font-size: 1.24rem; line-height: 1.36; color: var(--text); }
.precio-lines .mk { color: var(--accent-soft); flex: none; }
.oferta-card .diff {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.32rem;
  line-height: 1.35;
  color: var(--accent-deep);
  margin-bottom: 0.8rem;
}
.oferta-card .cta {
  display: block;
  text-align: center;
  box-shadow: 0 14px 32px -12px rgba(200, 120, 99, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.oferta-card .garantia {
  display: inline-block;
  margin-top: 1.5rem;
  background: var(--cream-card);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px rgba(138, 155, 132, 0.42);
  color: var(--label-green);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: normal;
  padding: 0.55rem 1.1rem;
}
.oferta-card .fine {
  margin-top: 1.2rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(74, 59, 54, 0.72);
}

/* ---------- Seccion 16: cierre final + footer ---------- */
/* Medido: seccion "cierre" fondo --dark-roka (sec-roka); 4 lineas
   "anafora" fontSize 19.84px lineHeight 25.4px color --text-on-dark
   centradas, cada una en bloque propio con margen 17.6px; cita grande
   final fontSize 40.8px lineHeight 51.4px color --accent-soft-dark
   (mismo tono que la seccion 14); footer bg --dark (identico al
   header), padding 70.4px arriba / 40px abajo, todo centrado; "tag"
   cursiva fontSize 19.84px color --accent-soft (coincide exacto);
   texto legal fontSize 14.4px lineHeight 25.2px color cream 76%
   opacidad. Logo del footer: reutiliza el wordmark de texto del
   header (sin imagen), por consistencia -- no hay asset de logo real
   proporcionado, igual que la foto de la fundadora y el panel. */
.anafora { max-width: 680px; margin: 0 auto; text-align: center; }
.anafora span { display: block; font-size: 1.24rem; line-height: 1.28; color: var(--text-on-dark); margin-bottom: 1.1rem; }
.anafora span:last-child { margin-bottom: 0; }
.big-quote {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 2.55rem;
  line-height: 1.26;
  color: var(--accent-soft-dark);
  text-align: center;
  max-width: 620px;
  margin: 2.4rem auto 0;
}
.cierre-cta { margin-top: 2.4rem; text-align: center; }

.site-footer {
  background: var(--dark);
  color: var(--text-on-dark);
  padding: 4.4rem 0 2.5rem;
  text-align: center;
}
.site-footer .logo { justify-content: center; margin: 0 auto 1.7rem; }
.site-footer .tag {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.24rem;
  line-height: 1.22;
  color: var(--accent-soft);
  margin: 0 0 1.7rem;
}
.site-footer .legal {
  font-size: 0.9rem;
  line-height: 1.75;
  color: rgba(250, 243, 238, 0.76);
  margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .nav-row { padding: 0.85rem 0; }
  .founder-grid { grid-template-columns: 1fr; }
  .founder-photo-frame { max-width: 340px; margin: 0 auto; }
  .phases { grid-template-columns: 1fr; }
  .panel-grid { grid-template-columns: 1fr; }
  .panel-frame { max-width: 380px; margin: 0 auto; }
  .timeline-step { grid-template-columns: 36px 1fr; gap: 0.75rem; }
  .timeline-badge { width: 36px; height: 36px; font-size: 0.95rem; }
  .nothing-grid { grid-template-columns: 1fr; }
  .sensorial-grid { grid-template-columns: 1fr; }
  .figura-frame { max-width: 380px; margin: 0 auto; }
  .oferta-card { padding: 2rem; }
}

@media (max-width: 600px) {
  section { padding: 2.75rem 0; }
  .logo-tag { display: none; }
  .nav-cta { font-size: 0.68rem; }
  .cta { width: 100%; text-align: center; }
  .sticky-cta { bottom: 16px; width: calc(100% - 32px); }
  .sticky-cta .cta { width: 100%; text-align: center; }
}