/* Landing de Vruma Kayaks: el hero de la propuesta de Alba (A o B) y lo del boceto de la estrategia. */
@font-face{ font-family:'Montserrat'; src:url('fuentes/montserrat-variable.woff2') format('woff2'); font-weight:100 900; font-display:swap }
:root{
  --morado:#74308B; --anil:#351487; --anil2:#2A0F70; --agua:#0E4A4C; --agua2:#1D7471; --menta:#F1FAF7; --menta2:#E2F2ED;
  --arena:#F7F1E8; --naranja:#F2661C; --amarillo:#F7C531; --tinta:#211C33; --gris:#5E5970; --linea:#E6E0EC; --bl:#FFFFFF;
  --m:'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ancho:1200px; --lado:clamp(20px, 5vw, 64px);
}
*{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{ font-family:var(--m); color:var(--tinta); background:var(--bl); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased }
img{ display:block; max-width:100%; height:auto }
a{ color:inherit }
h1,h2,h3{ text-wrap:balance }
.saltar{ position:absolute; left:-9999px; top:12px; z-index:60; background:var(--bl); color:var(--anil); padding:8px 14px; border-radius:10px; font-weight:700 }
.saltar:focus{ left:12px }
.caja{ width:100%; max-width:var(--ancho); margin:0 auto; padding:0 var(--lado) }

/* Variante A/B: solo se ve la elegida (la decide el script del <head>) */
html[data-variante="a"] .solo-b, html[data-variante="b"] .solo-a{ display:none !important }

/* ── Cabecera (Alba): clara, con el logo y el lema ── */
.cabecera{ background:var(--menta); display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px var(--lado) }
.cabecera .logo{ height:26px; width:auto }
.lema{ font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--anil); display:flex; align-items:center; gap:14px; text-align:right }
.lema i{ font-style:normal; color:var(--morado) }
@media (max-width:560px){ .lema{ display:none } .cabecera{ padding:16px var(--lado) } .cabecera .logo{ height:22px } }

/* ── Botones ── */
.boton{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 30px; border-radius:14px; font-family:inherit; font-size:15px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; cursor:pointer; transition:background-color .15s ease, transform .15s ease }
.boton:active{ transform:translateY(1px) }
.boton:focus-visible{ outline:3px solid var(--amarillo); outline-offset:3px }
.boton.solido{ background:var(--anil); color:var(--bl) }
.boton.solido:hover{ background:var(--anil2) }
.boton.contorno{ border:1.5px solid rgba(255,255,255,.92); color:var(--bl) }
.boton.contorno:hover{ background:rgba(255,255,255,.14) }
.boton.grande{ min-height:58px; padding:0 34px; font-size:16px }
.nota{ font-size:13px; line-height:1.45; margin-top:10px }

/* ── Hero (móvil primero: la foto arriba, entera, y el texto sobre su parte baja, que se funde con el color) ── */
.hero{ position:relative; color:var(--bl); background-repeat:no-repeat; background-position:top center; background-size:100% auto }
.hero::before{ content:""; position:absolute; left:0; right:0; top:0; height:calc(100vw * 16 / 9); pointer-events:none }
.hero-a{ background-color:#0B3B3D; background-image:url('img/hero-a-movil.webp') }
.hero-b{ background-color:#1A1311; background-image:url('img/hero-b-movil.webp') }
.hero-a::before{ background:linear-gradient(180deg, rgba(5,32,34,.55) 0%, rgba(5,32,34,0) 26%, rgba(5,32,34,0) 62%, #0B3B3D 97%) }
.hero-b::before{ background:linear-gradient(180deg, rgba(26,19,17,.55) 0%, rgba(26,19,17,.1) 30%, rgba(26,19,17,0) 55%, #1A1311 97%) }
.hero-in{ position:relative; padding:34px var(--lado) 44px }
.bloque-titulo{ min-height:calc(100vw * 16 / 9 - 210px) }
.hero-b .bloque-titulo{ min-height:calc(100vw * 16 / 9 - 250px) }
.titulo{ font-weight:800; text-transform:uppercase; line-height:.98; letter-spacing:-.01em; font-size:clamp(42px, 11.5vw, 60px) }
.titulo .fino{ display:block; font-weight:300; letter-spacing:.03em; line-height:1.15; margin-bottom:.3em }
.hero-a .titulo .fino{ font-size:.4em }
.hero-a .titulo .fino b{ font-weight:600 }
.hero-b .titulo .fino{ font-size:.62em; margin-bottom:.12em }
.lado p{ font-size:16px; line-height:1.55; max-width:460px }
.lado p + p{ margin-top:14px }
.gancho b{ display:block; text-transform:uppercase; font-weight:700; letter-spacing:.02em }
.hero-a .lado .boton{ margin-top:22px }
.hero .nota{ color:rgba(255,255,255,.82) }
.accion{ margin-top:24px }

@media (min-width:761px){
  .hero{ background-size:cover; background-position:center; min-height:min(84vh, 760px); display:flex; align-items:center }
  .hero::before{ height:auto; bottom:0 }
  .hero-a{ background-image:url('img/hero-a-1400.webp') }
  .hero-b{ background-image:url('img/hero-b-1400.webp'); background-position:center 40% }
  .hero-a::before{ background:linear-gradient(90deg, rgba(5,32,34,.5) 0%, rgba(5,32,34,.12) 42%, rgba(5,32,34,.12) 58%, rgba(5,32,34,.55) 100%) }
  .hero-b::before{ background:linear-gradient(90deg, rgba(20,12,8,.62) 0%, rgba(20,12,8,.2) 52%, rgba(20,12,8,0) 100%), linear-gradient(0deg, rgba(20,12,8,.5) 0%, rgba(20,12,8,0) 50%) }
  .hero-in{ width:100%; max-width:var(--ancho); margin:0 auto; padding:72px var(--lado) }
  .bloque-titulo, .hero-b .bloque-titulo{ min-height:0 }
  .titulo{ font-size:clamp(52px, 6.6vw, 92px) }
  .hero-a .titulo .fino{ font-size:.34em }
  .hero-b .titulo{ font-size:clamp(46px, 4.8vw, 68px) }
  .hero-a .hero-in{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.7fr) minmax(0,1fr); align-items:center; gap:32px }
  .hero-a .lado{ grid-column:3; justify-self:end; max-width:380px }
  .hero-a .lado p{ font-size:16px }
  .hero-b .hero-in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto auto; column-gap:48px; align-items:end }
  .hero-b .bloque-titulo{ grid-column:1 }
  .hero-b .lado{ grid-column:1; margin-top:22px }
  .hero-b .accion{ grid-column:2; grid-row:1 / 3; align-self:center; justify-self:start; margin-top:0 }
}
@media (min-width:1401px), (min-width:761px) and (min-resolution:1.5dppx){
  .hero-a{ background-image:url('img/hero-a-2400.webp') }
  .hero-b{ background-image:url('img/hero-b-2400.webp') }
}

/* ── Quiénes somos y los dos públicos ── */
.somos{ padding:clamp(64px, 9vw, 112px) 0 clamp(56px, 8vw, 96px) }
.kick{ font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--naranja) }
h2{ font-size:clamp(30px, 4.4vw, 46px); font-weight:800; letter-spacing:-.025em; line-height:1.08; margin-top:12px; max-width:820px }
.sub{ font-size:clamp(17px, 1.6vw, 19px); color:var(--gris); margin-top:14px; max-width:640px }
.publicos{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:36px }
.pub{ background:var(--menta); border-radius:20px; padding:24px 24px 26px }
.pub .ic, .ventajas .ic{ width:46px; height:46px; border-radius:13px; background:var(--morado); display:flex; align-items:center; justify-content:center; flex:none }
.pub .ic svg, .ventajas .ic svg{ width:24px; height:24px; fill:none; stroke:var(--bl); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.pub h3{ font-size:22px; font-weight:800; letter-spacing:-.015em; margin-top:18px; color:var(--anil) }
.pub .dato{ font-size:15px; font-weight:700; color:var(--morado); margin-top:4px }
.pub p:last-child{ font-size:16px; color:var(--gris); margin-top:8px }
@media (min-width:761px){ .publicos{ grid-template-columns:1fr 1fr; gap:18px } .pub{ padding:30px 30px 32px } }

/* ── Hechos para trabajar: la foto del taller y las tres ventajas ── */
.hechos{ background:var(--menta); padding:clamp(56px, 8vw, 104px) 0 }
.hechos .caja{ display:grid; grid-template-columns:1fr; gap:34px; align-items:center }
.taller{ position:relative; border-radius:22px; overflow:hidden; aspect-ratio:4 / 3; background:var(--menta2) }
.taller img{ width:100%; height:100%; object-fit:cover }
.taller figcaption{ position:absolute; left:14px; bottom:14px; background:rgba(33,28,51,.8); color:var(--bl); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; border-radius:100px; padding:6px 12px 5px }
.ventajas h2{ margin-top:0; margin-bottom:8px }
.ventajas article{ display:grid; grid-template-columns:46px 1fr; gap:16px; align-items:start; padding:18px 0; border-bottom:1px solid var(--linea) }
.ventajas article:last-child{ border-bottom:0 }
.ventajas h3{ font-size:19px; font-weight:800; letter-spacing:-.01em; color:var(--anil) }
.ventajas p{ font-size:16px; color:var(--gris); margin-top:3px }
@media (min-width:900px){ .hechos .caja{ grid-template-columns:1.1fr 1fr; gap:64px } .taller{ aspect-ratio:auto; height:100%; min-height:420px } }

/* ── La guía: el motivo para escribir ── */
.guia{ background:var(--arena); padding:clamp(64px, 9vw, 120px) 0; overflow:hidden }
.guia .caja{ display:grid; grid-template-columns:1fr; gap:44px; align-items:center }
.mock{ position:relative; width:min(66%, 340px); aspect-ratio:640 / 906; margin:0 auto 48px; left:-6% }
.mock img{ position:absolute; inset:0; width:100%; height:100%; border-radius:6px; box-shadow:0 18px 40px rgba(33,28,51,.18), 0 2px 6px rgba(33,28,51,.08) }
.mock .p3{ transform:translate(22%, 6%) rotate(7deg) }
.mock .p2{ transform:translate(11%, 3%) rotate(3.5deg) }
.mock .p1{ transform:rotate(-2deg) }
.guia h2{ max-width:560px }
.claves{ list-style:none; counter-reset:clave; display:grid; grid-template-columns:1fr; gap:8px; margin-top:24px; max-width:520px }
.claves li{ counter-increment:clave; display:flex; align-items:center; gap:12px; font-size:16px; font-weight:600; background:var(--bl); border-radius:12px; padding:11px 14px }
.claves li::before{ content:counter(clave); width:28px; height:28px; border-radius:8px; background:var(--morado); color:var(--bl); font-size:14px; font-weight:800; display:flex; align-items:center; justify-content:center; flex:none }
.guia .boton{ margin-top:28px }
.guia .nota{ color:var(--gris); max-width:460px }
.guia .texto{ position:relative; z-index:1 }
/* En dos columnas, la maqueta deja sitio a sus páginas giradas dentro de su columna (no pisa el titular) */
@media (min-width:900px){ .guia .caja{ grid-template-columns:.9fr 1.1fr; gap:72px } .mock{ width:min(72%, 360px); margin:0 0 0 2%; left:0 } .claves{ grid-template-columns:1fr 1fr } }

/* ── Pie ── */
.pie{ background:var(--tinta); color:#CFC9DA; padding:36px 0 calc(36px + env(safe-area-inset-bottom)) }
.pie .caja{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px }
.pie img{ height:20px; width:auto }
.pie p{ font-size:13px; font-weight:600; letter-spacing:.06em }
.pie nav{ display:flex; gap:18px; margin-left:auto; font-size:13px }
.pie nav{ flex-wrap:wrap }
.pie nav a, .enlace-cookies{ text-decoration:none; color:#CFC9DA }
.enlace-cookies{ padding:0; border:0; background:none; font:inherit; cursor:pointer }
.pie nav a:hover, .enlace-cookies:hover{ color:var(--bl); text-decoration:underline; text-underline-offset:4px }
.enlace-cookies:focus-visible{ outline:3px solid var(--amarillo); outline-offset:3px; border-radius:4px }
@media (max-width:560px){ .pie nav{ margin-left:0; width:100% } }

/* ── Llamada fija del móvil: aparece al pasar el botón del hero ── */
.cta-movil{ position:fixed; left:0; right:0; bottom:0; z-index:40; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.96); border-top:1px solid var(--linea); transform:translateY(110%); transition:transform .25s ease; visibility:hidden }
.cta-movil.visible{ transform:none; visibility:visible }
.cta-movil .boton{ width:100% }
@media (min-width:761px){ .cta-movil{ display:none } }

/* ── Aviso de cookies: aceptar y rechazar, al mismo nivel ── */
.cookies{ position:fixed; left:14px; right:14px; bottom:14px; z-index:50; max-width:520px; margin:0 auto; background:var(--bl); color:var(--tinta); border-radius:16px; padding:16px 18px; box-shadow:0 12px 40px rgba(33,28,51,.25); display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px }
.cookies[hidden]{ display:none }
.cookies p{ font-size:14px; line-height:1.45; flex:1 1 240px }
.cookies .botones{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px }
.cookies button{ font-family:inherit; font-size:14px; font-weight:700; border-radius:10px; padding:10px 16px; cursor:pointer; border:1.5px solid var(--anil); background:var(--bl); color:var(--anil) }
.cookies button:hover{ background:var(--menta) }
.cookies button:focus-visible{ outline:3px solid var(--amarillo); outline-offset:2px }
.cookies a{ font-size:13px; color:var(--gris) }

/* ── Aviso del modo prueba (sin número de WhatsApp) ── */
.aviso-prueba{ position:fixed; left:50%; top:16px; transform:translateX(-50%); z-index:70; width:min(560px, calc(100% - 28px)); background:var(--tinta); color:var(--bl); border-radius:14px; padding:14px 16px; font-size:14px; line-height:1.45; box-shadow:0 12px 40px rgba(33,28,51,.3) }
.aviso-prueba[hidden]{ display:none }

/* ── Entradas suaves (solo con JS y si no piden menos movimiento) ── */
@media (prefers-reduced-motion:no-preference){
  html.js .entra{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease }
  html.js .entra.dentro{ opacity:1; transform:none }
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }