/* ===================== TOKENS ===================== */
:root{
  /* text used INSIDE white cards */
  --ink:#14110f;
  --ink-soft:#6b655d;
  --card:#ffffff;
  --panel-tint:#f2f4fa;
  --line: rgba(20,17,15,.10);
  --line-strong: rgba(20,17,15,.16);

  /* ---------------------------------------------------------------
     LOS DOS ÚNICOS COLORES QUE HAY QUE TOCAR PARA CAMBIAR LA PALETA.
     Se escriben en canales R,G,B (sin "rgb(" ni "#") para poder
     reutilizarlos con transparencia más abajo sin repetir el valor.
       --bg-rgb     = 201,233,252  →  #c9e9fc  (fondo azul de la página)
       --accent-rgb =  52, 87,213  →  #3457d5  (azul de detalles y enlaces)
     --------------------------------------------------------------- */
  --bg-rgb: 201, 233, 252;
  --accent-rgb: 52, 87, 213;

  /* page background (light blue, everywhere) */
  --bg: rgb(var(--bg-rgb));
  --bg-alt:#aedcf5;

  /* text/dividers used directly on the blue page background (light bg → dark text) */
  --on-bg: var(--ink);
  --on-bg-soft: var(--ink-soft);
  --line-on-bg: var(--line-strong);

  /* accent for details directly on the light blue bg (labels, blob, numbers) */
  --accent: rgb(var(--accent-rgb));
  --accent-soft: rgba(var(--accent-rgb), .14);
  /* El azul de marca sobre el fondo negro del pie da 3.2:1 de contraste y
     cuesta leerlo. Esta es la misma tonalidad aclarada (6.2:1).
     Si algún día cambias --accent-rgb, aclara este valor en la misma medida. */
  --accent-on-dark:#6b8cf0;
  --coral: var(--accent);            /* alias histórico */
  --coral-soft: rgba(var(--accent-rgb), .08);

  --radius: 2px;
  /* dos capas: un contacto nítido + una difusión amplia y suave.
     Sobre un fondo pastel, una sola sombra densa apelmaza la página. */
  --shadow-float: 0 1px 2px rgba(8,16,70,.05), 0 16px 38px -18px rgba(8,16,70,.24);
  --shadow-lift: 0 1px 2px rgba(8,16,70,.04), 0 8px 20px -10px rgba(8,16,70,.18);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* cara utilitaria: identificadores y cifras verificadas */
  --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --maxw: 1140px;
}

/* Fraunces es variable: opsz alto sube el contraste de los trazos y WONK
   activa sus formas con carácter. Sin esto se lee como cualquier serif. */
.hero h1,
.section-title,
.about__content h2,
.booking__text h2,
.cta-final h2{
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 144;
}
.stat__num,
.jump__to,
.plan-card__price,
.roi__result-num{
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 120;
}
.handle,
.marquee span,
.viral-card__foot span:first-child{
  font-family:var(--font-mono);
  letter-spacing:-.02em;
}

/* sections that alternate to a plain white background instead of blue */
.section--light{
  background:#ffffff;
  --on-bg: var(--ink);
  --on-bg-soft: var(--ink-soft);
  --line-on-bg: var(--line-strong);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric: tabular-nums;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

.eyebrow{
  font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent); margin-bottom:16px;
}
.eyebrow.center{text-align:center;}
.section-title{
  font-family:var(--font-display);
  font-size:clamp(1.8rem, 3vw, 2.4rem);
  font-weight:500;
  line-height:1.2;
  margin-bottom:14px;
  letter-spacing:-.01em;
  color:var(--on-bg);
 }
.section-title.center{text-align:center;}
.section-sub{
  color:var(--on-bg-soft); max-width:520px; margin:0 auto 56px; text-align:center; font-size:1rem;
}
.text-accent{ color:var(--accent); font-style:italic; }
.mono{ font-variant-numeric: tabular-nums; letter-spacing:-.01em; }

/* ===================== EL SALTO — elemento firma =====================
   Toda la prueba de esta página es un salto entre dos cifras. Antes vivía
   escondido en una línea de pie de 0.85rem. Ahora es el objeto más grande
   de cada tarjeta: cifra de origen pequeña en la cara de datos, una línea
   que se dibuja sola al entrar en pantalla, y la cifra de hoy en Fraunces
   a tamaño display. La línea sustituye a la barra de progreso anterior,
   que marcaba porcentajes arbitrarios y no significaba nada.
====================================================================== */
.jump{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:baseline;
  column-gap:16px; row-gap:6px;
  margin:20px 0 24px;
}
.jump__from, .jump__line, .jump__to{ grid-row:1; }
.jump__cap{ grid-row:2; }

.jump__from{
  font-family:var(--font-mono); font-size:.95rem; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.jump__to{
  font-family:var(--font-display); font-weight:500; font-size:2.3rem; line-height:1;
  letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums;
}
.jump__line{ position:relative; align-self:center; height:1px; background:var(--line); }
.jump__line i{
  position:absolute; left:0; top:0; height:1px; width:0; background:var(--accent);
  transition:width 1.2s cubic-bezier(.22,.7,.2,1);
}
.jump__line::after{
  content:""; position:absolute; right:0; top:50%; width:5px; height:5px;
  border-top:1px solid var(--accent); border-right:1px solid var(--accent);
  transform:translate(1px,-50%) rotate(45deg);
  opacity:0; transition:opacity .35s ease .8s;
}
.jump.is-grown .jump__line i{ width:100%; }
.jump.is-grown .jump__line::after{ opacity:1; }

.jump__cap{
  grid-column:1; font-size:.65rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.1em; color:var(--ink-soft);
}
.jump__cap--to{ grid-column:3; text-align:right; }

/* variante compacta del panel del hero */
.jump--sm{
  grid-template-columns:46px 26px 46px;
  column-gap:10px; align-items:center; margin:0;
}
.jump--sm .jump__from{ font-size:.8rem; text-align:right; }
.jump--sm .jump__to{
  font-family:var(--font-mono); font-size:.85rem; font-weight:500;
  letter-spacing:-.02em; text-align:right; color:var(--ink);
}

/* ===================== REVEAL ANIM ===================== */
[data-reveal]{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
[data-reveal].is-visible{opacity:1; transform:translateY(0);}

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px; border-radius:100px; font-weight:600; font-size:.9rem;
  cursor:pointer; border:1px solid transparent; transition:transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn--lg{padding:15px 28px; font-size:.95rem;}
.btn--sm{padding:9px 18px; font-size:.82rem;}
.btn--primary{ background:var(--ink); color:#fff; }
.btn--primary:hover{ background:var(--accent); color:#fff; }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn--ghost:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn--outline{
  width:100%; margin-top:26px; background:transparent; color:var(--ink); border-color:var(--line-strong);
}
.btn--outline:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ===================== NAV ===================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(var(--bg-rgb), .8); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
.nav.scrolled{border-bottom-color:var(--line-on-bg); background:rgba(var(--bg-rgb), .95);}
.nav__inner{display:flex; align-items:center; justify-content:space-between; height:72px; gap:24px;}
.nav__logo{font-family:var(--font-display); font-weight:500; font-size:1.2rem; letter-spacing:-.01em; color:var(--ink);}
.nav__logo span{color:var(--accent); font-style:italic; margin-left:6px; font-size:.85em;}
.nav__links{display:flex; gap:30px; font-weight:500; font-size:.88rem; margin-left:auto;}
.nav__links a{color:var(--ink-soft); transition:color .2s ease;}
.nav__links a:hover{color:var(--ink);}
.nav__cta{margin-left:16px;}

/* ---- conmutador de idioma ES / EN ---- */
.lang-switch{
  display:flex; align-items:center; margin-left:24px;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em;
}
.lang-switch a{
  padding:4px 7px; color:var(--ink-soft); transition:color .2s ease;
}
.lang-switch a:hover{ color:var(--ink); }
.lang-switch a.is-active{ color:var(--accent); }
.lang-switch a + a{ border-left:1px solid var(--line-strong); }

/* ---- aviso "también disponible en…" (solo en la primera visita) ---- */
.lang-note{
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  position:fixed; top:0; left:0; right:0; z-index:110;
  background:var(--ink); color:rgba(255,255,255,.8);
  padding:10px 46px 10px 20px; font-size:.82rem; text-align:center;
}
.lang-note[hidden]{ display:none; }
.lang-note a{ color:#fff; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.lang-note button{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:rgba(255,255,255,.55); font-size:1.3rem;
  line-height:1; cursor:pointer; padding:4px 8px;
}
.lang-note button:hover{ color:#fff; }
/* cuando el aviso está visible, la nav y el hero bajan para no quedar tapados */
body.has-lang-note .nav{ top:var(--lang-note-h, 40px); }
body.has-lang-note .hero{ padding-top:calc(150px + var(--lang-note-h, 40px)); }
.nav__burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}
.nav__burger span{width:20px; height:1.5px; background:var(--ink); transition:.3s;}

/* ===================== HERO ===================== */
.hero{ padding:150px 0 90px; }
.hero__inner{display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:center;}
.hero h1{
  font-family:var(--font-display); font-weight:500; font-size:clamp(2.3rem, 4.2vw, 3.4rem);
  line-height:1.08; letter-spacing:-.02em; margin-bottom:22px; color:var(--on-bg);
}
.hero__sub{font-size:1.05rem; color:var(--on-bg-soft); max-width:460px; margin-bottom:34px;}
.hero__actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:56px;}
/* 2x2 en vez de flex-wrap: con cuatro cifras, el wrap dejaba una huérfana
   en la segunda fila y el bloque se leía como un error de maquetación. */
.hero__stats{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:26px 44px; border-top:1px solid var(--line-on-bg); padding-top:28px;
}
.stat__num{display:block; font-family:var(--font-display); font-size:1.9rem; font-weight:500; line-height:1.1; letter-spacing:-.02em; color:var(--on-bg);}
.stat__label{font-size:.78rem; line-height:1.45; color:var(--on-bg-soft);}

.hero__panel{
  border:1px solid var(--line-strong); border-radius:var(--radius); padding:32px 28px; background:var(--card);
  display:flex; flex-direction:column; gap:16px; box-shadow:var(--shadow-float);
}
.hero__panel-label{font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:4px;}
.hero__panel-row{display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:.9rem; padding-bottom:14px; border-bottom:1px solid var(--line);}
.hero__panel-row .handle{font-size:.82rem; font-weight:500; color:var(--ink);}
.hero__panel-link{color:var(--coral); font-weight:600; font-size:.88rem; margin-top:4px;}
.hero__panel-link:hover{text-decoration:underline;}
.hero__panel-note{font-size:.72rem; color:var(--ink-soft);}

/* ===================== MARQUEE (static) ===================== */
.marquee-wrap{border-top:1px solid var(--line-on-bg); border-bottom:1px solid var(--line-on-bg); padding:22px 0; background:var(--bg-alt);}
.marquee{display:flex; justify-content:center; align-items:center; gap:40px; flex-wrap:wrap; font-weight:600; color:var(--on-bg-soft); font-size:.85rem; letter-spacing:.02em;}

/* ===================== ABOUT ===================== */
.about{padding:120px 0;}
.about__grid{display:grid; grid-template-columns:.68fr 1.32fr; gap:70px; align-items:center;}
.about__photo{display:flex; flex-direction:column; align-items:center; gap:22px;}
.about__frame{ position:relative; width:290px; height:390px; }
.about__blob{
  position:absolute; width:100%; height:100%; border-radius:28px; background:var(--accent);
  top:22px; left:-22px; z-index:0;
}
.about__avatar{
  position:absolute; inset:0; border-radius:24px; background:#ffffff; color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display);
  font-size:4rem; font-weight:500; border:1px solid var(--line-strong); z-index:1;
}
.about__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:24px;
  border:6px solid #ffffff; background:var(--panel-tint); z-index:2; box-shadow:var(--shadow-float);
}
.about__img[data-broken="true"]{ display:none; }
.about__tag{
  font-size:.76rem; font-weight:700; color:var(--coral); background:var(--coral-soft);
  padding:7px 16px; border-radius:100px; letter-spacing:.02em;
}
.about__content h2{font-family:var(--font-display); font-weight:500; font-size:clamp(1.6rem,2.6vw,2.1rem); margin-bottom:22px; line-height:1.25; color:var(--on-bg); text-shadow:0 2px 14px rgba(8,16,70,.18);}
.about__content p{color:var(--on-bg-soft); margin-bottom:16px;}
.about__content p.about__lead{font-size:1.05rem; color:var(--on-bg);}
.about__content strong{color:var(--on-bg);}
.about__points{display:flex; flex-direction:column; gap:0; margin-top:26px; border-top:1px solid var(--line-on-bg);}
.point{display:flex; align-items:center; gap:16px; font-weight:600; font-size:.92rem; padding:16px 0; border-bottom:1px solid var(--line-on-bg); color:var(--on-bg);}
/* marca, no número: son tres cualidades, no tres pasos */
.point::before{content:""; flex:none; width:14px; height:1px; background:var(--accent);}

/* ===================== SERVICES ===================== */
.services{padding:110px 0; background:var(--bg-alt);}
.services__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-strong); border:1px solid var(--line-strong); margin-top:10px; box-shadow:var(--shadow-float);}
.service-card{
  background:var(--card); padding:40px 34px; position:relative;
}
.service-card--accent{ box-shadow: inset 0 3px 0 var(--coral); }
/* aquí el número sí informa: crear contenido → crecer → monetizar es un embudo,
   y el orden le dice al lector por dónde empieza. Se compone en la cara de datos
   para que se lea como un índice y no como adorno. */
.service-card__num{ font-family:var(--font-mono); color:var(--accent); font-size:.78rem; letter-spacing:.04em; display:block; margin-bottom:18px;}
.service-card h3{font-family:var(--font-display); font-size:1.2rem; font-weight:500; margin-bottom:18px;}
.service-card li{padding:9px 0; border-top:1px solid var(--line); font-size:.9rem; color:var(--ink-soft);}
.service-card li:first-child{border-top:none;}

/* ===================== RESULTS ===================== */
.results{padding:120px 0;}
.results__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-strong); border:1px solid var(--line-strong); box-shadow:var(--shadow-float);}
.rcard{ background:var(--card); padding:36px; }
.rcard__head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px;}
.rcard__handle{font-weight:500; font-size:.95rem; transition:color .2s ease;}
.rcard__handle:hover{color:var(--accent);}
.rcard__growth{font-family:var(--font-mono); font-size:.78rem; font-weight:500; color:var(--accent); font-variant-numeric:tabular-nums;}
.rcard__niche{display:inline-block; font-size:.72rem; font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em;}
.rcard p{font-size:.9rem; color:var(--ink-soft); margin:0;}
.results__note{text-align:center; font-size:.76rem; color:var(--on-bg-soft); margin-top:36px;}

/* ===================== VIRAL VIDEOS ===================== */
.viral{padding:120px 0; background:var(--bg-alt);}
.viral__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-strong); border:1px solid var(--line-strong); box-shadow:var(--shadow-float);}
.viral-card{position:relative; display:block; background:var(--card); overflow:hidden;}
.viral-card img{width:100%; height:300px; object-fit:cover; object-position:center bottom; display:block; transition:transform .5s ease;}
.viral-card:hover img{transform:scale(1.04);}
.viral-card__foot{display:flex; align-items:center; justify-content:space-between; padding:18px 22px; font-size:.85rem;}
.viral-card__foot span:first-child{font-weight:500; font-size:.82rem;}
.viral-card__views{font-family:var(--font-mono); color:var(--accent); font-weight:500; font-size:.82rem; font-variant-numeric:tabular-nums;}

/* ===================== PLANS ===================== */
.plans{padding:120px 0; background:var(--bg-alt);}
.plans__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-strong); border:1px solid var(--line-strong); align-items:stretch; box-shadow:var(--shadow-float);}
.plan-card{
  background:var(--card); padding:38px 30px; position:relative; display:flex; flex-direction:column;
}
.plan-card--popular{ box-shadow: inset 0 3px 0 var(--coral); }
.plan-card__tag{
  font-size:.7rem; font-weight:700; color:var(--coral); text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px;
}
.plan-card h3{font-family:var(--font-display); font-size:1.3rem; font-weight:500; margin-bottom:6px;}
.plan-card__price{font-family:var(--font-display); font-size:1.7rem; font-weight:500; margin-bottom:10px;}
.plan-card__price span{font-family:var(--font-body); font-size:.75rem; font-weight:600; color:var(--ink-soft);}
.plan-card__desc{color:var(--ink-soft); font-size:.84rem; margin-bottom:24px;}
.plan-card li{padding:10px 0; border-top:1px solid var(--line); font-size:.84rem; color:var(--ink);}
.plan-card li:first-child{border-top:none;}

/* ===================== ROI CALCULATOR ===================== */
.roi{padding:120px 0;}
.roi__box{
  display:grid; grid-template-columns:1.1fr .9fr; gap:0; border:1px solid var(--line-strong); background:var(--card);
  box-shadow:var(--shadow-float);
}
.roi__inputs{ padding:44px; display:flex; flex-direction:column; gap:28px; border-right:1px solid var(--line-strong); }
.roi__field label{ display:block; font-size:.76rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:12px; }
.roi__packages{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.roi__pkg{
  display:flex; flex-direction:column; gap:4px; align-items:flex-start; padding:12px 14px; background:var(--panel-tint);
  border:1px solid var(--line-strong); cursor:pointer; font-family:var(--font-body); transition:border-color .2s ease, background .2s ease;
}
.roi__pkg span{font-weight:700; font-size:.86rem; color:var(--ink);}
.roi__pkg small{font-size:.76rem; color:var(--ink-soft);}
.roi__pkg:hover{ border-color:var(--ink-soft); }
.roi__pkg.is-active{ background:var(--ink); border-color:var(--ink); }
.roi__pkg.is-active span, .roi__pkg.is-active small{ color:#fff; }
.roi__field input{
  width:100%; border:none; border-bottom:1.5px solid var(--line-strong); background:transparent; padding:8px 2px;
  font-family:var(--font-display); font-size:1.6rem; color:var(--ink); font-weight:500; transition:border-color .2s ease;
}
.roi__field input:focus{ outline:none; border-color:var(--coral); }
.roi__results{ padding:44px; display:flex; flex-direction:column; justify-content:center; gap:0; }
.roi__result{ display:flex; align-items:baseline; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--line); }
.roi__result:first-child{ padding-top:0; }
.roi__result:last-child{ border-bottom:none; padding-bottom:0; }
.roi__result-label{ font-size:.86rem; color:var(--ink-soft); font-weight:500; }
.roi__result-num{ font-family:var(--font-display); font-size:1.3rem; font-weight:500; font-variant-numeric:tabular-nums; color:var(--ink); }
.roi__result--highlight{ margin:6px 0; padding:16px; background:var(--coral-soft); border-bottom:none; }
.roi__result--highlight .roi__result-num{ color:var(--coral); font-size:1.5rem; }

/* ===================== BOOKING ===================== */
.booking{padding:120px 0;}
.booking__grid{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;}
.booking__text h2{font-family:var(--font-display); font-weight:500; font-size:clamp(1.7rem,2.8vw,2.2rem); margin-bottom:18px; line-height:1.25; color:var(--on-bg); text-shadow:0 2px 14px rgba(8,16,70,.18);}
.booking__text p{color:var(--on-bg-soft); margin-bottom:24px;}
.booking__list{display:flex; flex-direction:column; gap:0; margin-bottom:30px; font-weight:600; font-size:.9rem; border-top:1px solid var(--line-on-bg); color:var(--on-bg);}
.booking__list li{padding:12px 0; border-bottom:1px solid var(--line-on-bg);}
.booking__contacts{display:flex; gap:10px; flex-wrap:wrap;}
.contact-pill{
  padding:11px 18px; border:1px solid var(--line-strong); font-weight:600; font-size:.84rem; color:var(--ink);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.contact-pill:hover{background:var(--ink); color:#fff; border-color:var(--ink);}

.calendar-embed{
  min-height:440px; border:1px solid var(--line-strong); background:var(--card); box-shadow:var(--shadow-float);
  display:flex; align-items:center; justify-content:center; overflow:hidden; padding:36px; text-align:center;
}
.calendar-embed iframe{width:100%; height:500px; border:none;}
.calendar-fallback__icon{font-family:var(--font-display); font-style:italic; font-size:2rem; color:var(--coral); margin-bottom:18px;}
.calendar-fallback h4{font-family:var(--font-display); font-size:1.2rem; font-weight:500; margin-bottom:10px; color:var(--ink);}
.calendar-fallback p{color:var(--ink-soft); font-size:.87rem; margin-bottom:24px; max-width:300px;}

/* ===================== FAQ ===================== */
.faq{padding:120px 0; background:var(--bg-alt);}
.faq__list{max-width:720px; margin:0 auto; border-top:1px solid var(--line-strong); background:var(--card); box-shadow:var(--shadow-float);}
.faq-item{ border-bottom:1px solid var(--line-strong); }
.faq-item__q{
  width:100%; text-align:left; background:none; border:none; padding:24px 20px; font-weight:600; font-size:.96rem;
  display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-family:var(--font-body); color:var(--ink);
}
.faq-item__q span{font-size:1.2rem; color:var(--coral); font-weight:400; transition:transform .3s ease;}
.faq-item.open .faq-item__q span{transform:rotate(45deg);}
.faq-item__a{max-height:0; overflow:hidden; transition:max-height .35s ease;}
.faq-item__a p{padding:0 20px 24px; color:var(--ink-soft); font-size:.9rem;}

/* ===================== CTA FINAL ===================== */
.cta-final{padding:130px 0; text-align:center;}
.cta-final h2{font-family:var(--font-display); font-weight:500; font-size:clamp(1.9rem,3.6vw,2.7rem); margin-bottom:16px; color:var(--on-bg); text-shadow:0 2px 14px rgba(8,16,70,.18);}
.cta-final p{color:var(--on-bg-soft); max-width:460px; margin:0 auto 32px; font-size:1.02rem;}

/* ===================== FOOTER ===================== */
.footer{background:var(--ink); color:rgba(255,255,255,.65); padding:70px 0 24px;}
/* "Sofhia Cruz" hereda --ink (casi negro) y sobre el pie oscuro era invisible. */
.footer .nav__logo{ color:#fff; }
.footer .nav__logo span{ color:var(--accent-on-dark); }
.footer__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.12);}
.footer__tag{margin-top:14px; font-size:.88rem; max-width:220px;}
.footer__col h4{color:#fff; font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:16px; font-weight:600;}
.footer__col a{display:block; margin-bottom:10px; font-size:.88rem; transition:color .2s ease;}
.footer__col a:hover{color:#fff;}
.footer__bottom{padding-top:24px; font-size:.78rem; text-align:center; color:rgba(255,255,255,.4);}

/* ===================== FLOATING BUTTONS ===================== */
.wa-float{
  position:fixed; bottom:26px; right:26px; width:52px; height:52px; border-radius:50%; background:#25D366;
  color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(8,16,70,.3);
  z-index:80; transition:transform .2s ease;
}
.wa-float:hover{transform:scale(1.06);}
.to-top{
  position:fixed; bottom:26px; right:92px; width:42px; height:42px; border-radius:50%; background:var(--ink);
  color:#fff; border:none; font-size:1.05rem; cursor:pointer; opacity:0; pointer-events:none; z-index:80;
  transition:opacity .3s ease, transform .2s ease;
}
.to-top.visible{opacity:1; pointer-events:auto;}
.to-top:hover{transform:translateY(-2px);}

/* ===================== ACCESIBILIDAD ===================== */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}
.btn:focus-visible, .contact-pill:focus-visible{ outline-offset:4px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
  .jump__line i{ width:100%; }
  .jump__line::after{ opacity:1; }
}

/* ===================== RESPONSIVE ===================== */
@media (max-width:980px){
  .hero__inner, .about__grid, .booking__grid{grid-template-columns:1fr;}
  /* En móvil manda el mensaje, no la tabla: primero el titular, el texto,
     los botones y las cifras; el panel de crecimiento va debajo. */
  .hero__panel{margin-top:8px;}
  .services__grid, .results__grid, .plans__grid, .viral__grid{grid-template-columns:repeat(2,1fr);}
  .about__photo{margin-bottom:10px;}
  .footer__grid{grid-template-columns:1fr; text-align:left;}
  .roi__box{grid-template-columns:1fr;}
  .roi__inputs{border-right:none; border-bottom:1px solid var(--line-strong);}
}
@media (max-width:720px){
  .nav__links{
    position:fixed; top:72px; left:0; right:0; background:var(--bg-alt); flex-direction:column; padding:20px 24px;
    gap:18px; border-bottom:1px solid var(--line-on-bg); transform:translateY(-130%); transition:transform .3s ease; z-index:99;
  }
  .nav__links.open{transform:translateY(0);}
  .nav__cta{display:none;}
  .nav__burger{display:flex;}
  .lang-switch{margin-left:auto; margin-right:4px;}
  .lang-note{font-size:.78rem; padding:9px 40px 9px 14px; gap:10px;}
  body.has-lang-note .hero{padding-top:calc(110px + var(--lang-note-h, 40px));}
  .services__grid, .results__grid, .plans__grid, .viral__grid{grid-template-columns:1fr;}
  .viral-card img{height:240px;}
  .roi__packages{grid-template-columns:1fr 1fr;}
  .roi__inputs, .roi__results{padding:30px 24px;}
  .hero{padding-top:110px;}
  /* Apilados y a lo ancho: dos botones de anchos distintos se ven descuidados
     y son más difíciles de pulsar con el pulgar. */
  .hero__actions{flex-direction:column; align-items:stretch; gap:10px; margin-bottom:44px;}
  .hero__actions .btn{width:100%;}
  .hero__stats{gap:22px 24px;}
  .marquee{gap:20px;}
  .wa-float{right:18px; bottom:18px;}
  .to-top{right:18px; bottom:82px;}
}