/* ════════════════════════════════════════════════════════════════════
   ACADEMIA PREPARANDO · hoja de estilo compartida
   Sale del logo: papel cuadriculado, cuatro colores (rojo, verde, azul,
   naranja) y Prepi, el dinosaurio. Alegre pero ordenado: fondo limpio,
   tarjetas blancas con borde fino, un color por servicio y mucho aire.
   ════════════════════════════════════════════════════════════════════ */
:root{
  --paper:#FFFCF7; --paper-2:#FFF6EA;
  --grid:rgba(240,150,60,.085);
  --ink:#1B2540; --text:#3B4660; --soft:#626C85; --line:#EFE6D8; --line-2:#F6EFE4;

  --red:#E53935;    --red-bg:#FDEDEC;    --red-ink:#B3261E;
  --green:#3A9F48;  --green-bg:#E8F6E7;  --green-ink:#1F7A2E;
  --blue:#1E7BD8;   --blue-bg:#E6F1FD;   --blue-ink:#145EA8;
  --orange:#F28C18; --orange-bg:#FFF1DE; --orange-ink:#A35700;
  --wa:#1FAF5B; --star:#FBBC05;

  --shell:min(1140px, 100% - 48px);
  --r-xl:28px; --r-lg:20px; --r-md:14px;
  --ease:cubic-bezier(.22,.68,.24,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.45,.64,1);
  --round:"Fredoka","Nunito",system-ui,sans-serif;
  --body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --script:"Dancing Script",cursive;
  --shadow:0 1px 2px rgba(27,37,64,.04), 0 12px 32px -18px rgba(27,37,64,.22);
  --shadow-up:0 2px 4px rgba(27,37,64,.04), 0 26px 50px -24px rgba(27,37,64,.34);
  --head-h:76px;
}
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--head-h) + 70px) }
body{
  margin:0; color:var(--text); font-family:var(--body); font-size:17px; line-height:1.7; overflow-x:hidden;
  background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:32px 32px; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
  padding-top:var(--head-h);
}
img,svg{ display:block; max-width:100% }
a{ color:var(--blue-ink) }
h1,h2,h3,h4{ font-family:var(--round); color:var(--ink); margin:0; line-height:1.15; font-weight:600; letter-spacing:-.005em }
h1{ font-size:clamp(36px,5.4vw,58px) }
h2{ font-size:clamp(30px,4vw,42px) }
h3{ font-size:22px }
p{ margin:0 }
b, strong{ color:var(--ink); font-weight:700 }
::selection{ background:#FFE1B8 }
:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; border-radius:8px }
.c-red{ color:var(--red) } .c-green{ color:var(--green) } .c-blue{ color:var(--blue) } .c-orange{ color:var(--orange) }
.t-red{ --c:var(--red); --bg:var(--red-bg); --ci:var(--red-ink) }
.t-green{ --c:var(--green); --bg:var(--green-bg); --ci:var(--green-ink) }
.t-blue{ --c:var(--blue); --bg:var(--blue-bg); --ci:var(--blue-ink) }
.t-orange{ --c:var(--orange); --bg:var(--orange-bg); --ci:var(--orange-ink) }

/* ── Estructura ──────────────────────────────────────────────────────── */
section{ padding:96px 0; position:relative }
section.tight{ padding:56px 0 }
section.alt{ background:var(--paper-2); border-block:1px solid var(--line) }
.shell{ width:var(--shell); margin-inline:auto }
.narrow{ width:min(860px, 100% - 48px); margin-inline:auto }
.sec-head{ max-width:660px; margin-bottom:48px }
.sec-head.center{ margin-inline:auto; text-align:center }
.sec-head.row{ max-width:none; display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap }
.sec-head.row > div{ max-width:620px }
.sec-head .lead{ margin-top:16px; font-size:18.5px; color:var(--soft) }
.kicker{ display:inline-flex; align-items:center; gap:8px; font-family:var(--round); font-weight:600; font-size:14.5px; letter-spacing:.01em;
  color:var(--ci, var(--orange-ink)); background:var(--bg, var(--orange-bg)); padding:6px 14px; border-radius:999px; margin-bottom:16px }
.kicker::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--c, var(--orange)) }
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow); position:relative }
.ico{ width:56px; height:56px; border-radius:17px; display:grid; place-items:center; background:var(--bg); color:var(--c); flex:none;
  transition:transform .5s var(--spring) }
.ico.sm{ width:44px; height:44px; border-radius:13px }
.ico.lg{ width:68px; height:68px; border-radius:21px }

/* ── Botones ─────────────────────────────────────────────────────────── */
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 26px; border-radius:999px; border:0;
  cursor:pointer; font:600 16.5px/1.2 var(--round); text-decoration:none; white-space:nowrap; letter-spacing:.005em;
  transition:transform .3s var(--spring), box-shadow .25s var(--ease), background .25s, color .25s }
.btn svg{ flex:none; transition:transform .35s var(--spring) }
.btn:hover{ transform:translateY(-2px) }
.btn:hover .go{ transform:translateX(4px) }
.btn:active{ transform:translateY(1px); transition-duration:.08s }
.btn-blue{ background:var(--blue); color:#fff; box-shadow:0 4px 0 #145EA8, 0 12px 22px -12px rgba(20,94,168,.6) }
.btn-orange{ background:var(--orange); color:#fff; box-shadow:0 4px 0 #B9650A, 0 12px 22px -12px rgba(185,101,10,.6) }
.btn-green{ background:var(--wa); color:#fff; box-shadow:0 4px 0 #148043, 0 12px 22px -12px rgba(20,128,67,.6) }
.btn-white{ background:#fff; color:var(--ink); box-shadow:0 0 0 1px var(--line), 0 4px 0 #EADFCF }
.btn-ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 2px var(--line) }
.btn-ghost:hover{ background:#fff }
.btn-blue:active{ box-shadow:0 1px 0 #145EA8 } .btn-orange:active{ box-shadow:0 1px 0 #B9650A } .btn-green:active{ box-shadow:0 1px 0 #148043 }
.btn-sm{ padding:11px 18px; font-size:15px }
.btn-block{ width:100% }
.btn-row{ display:flex; gap:12px; flex-wrap:wrap }
.more{ font-family:var(--round); font-weight:600; font-size:16px; color:var(--ci, var(--blue-ink)); text-decoration:none; display:inline-flex; gap:7px; align-items:center;
  background:none; border:0; padding:4px 0; cursor:pointer }
.more svg{ transition:transform .35s var(--spring) }
.more:hover svg{ transform:translateX(5px) }

/* ── Entradas suaves ─────────────────────────────────────────────────── */
html.js .reveal{ opacity:0; transform:translateY(18px) }
html.js .reveal.in{ opacity:1; transform:none; transition:opacity .7s var(--ease-out), transform .8s var(--ease-out); transition-delay:var(--d,0s) }

/* ── Logo ────────────────────────────────────────────────────────────── */
.logo{ display:inline-flex; align-items:flex-end; text-decoration:none; position:relative; line-height:1 }
.logo-txt{ display:flex; flex-direction:column; line-height:1 }
.logo-txt small{ font-family:Georgia,"Times New Roman",serif; color:#4A4A4A; font-size:.3em; margin:0 0 -.02em .95em }
.logo-txt b{ font-family:var(--script); font-weight:700; white-space:nowrap }
.logo-txt b span:nth-child(-n+3){ color:var(--red) }
.logo-txt b span:nth-child(n+4):nth-child(-n+6){ color:var(--green) }
.logo-txt b span:nth-child(n+7):nth-child(-n+8){ color:var(--blue) }
.logo-txt b span:nth-child(n+9){ color:var(--orange) }
.logo .dino{ position:absolute; width:1.15em; height:1.15em; right:-.35em; bottom:.25em }

/* ── Cabecera ────────────────────────────────────────────────────────── */
.head{ position:fixed; top:0; left:0; right:0; z-index:60; height:var(--head-h); background:rgba(255,252,247,.9);
  backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4); border-bottom:1px solid transparent;
  transition:border-color .3s, box-shadow .3s }
.head.scrolled{ border-color:var(--line); box-shadow:0 8px 26px -20px rgba(27,37,64,.35) }
.head .shell{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:20px }
.head .logo{ font-size:34px; padding-right:.7em }
.head .logo:hover .dino{ animation:nod .8s var(--ease) }
@keyframes nod{ 30%{ transform:rotate(-10deg) } 60%{ transform:rotate(5deg) } }
.menu{ display:flex; align-items:center; gap:2px }
.menu a{ white-space:nowrap; position:relative; font-family:var(--round); font-weight:500; font-size:16px; color:var(--soft); text-decoration:none; padding:9px 14px; border-radius:999px;
  transition:color .2s, background .2s }
.menu a:hover{ color:var(--ink); background:#fff }
.menu a[aria-current="page"]{ color:var(--ink); font-weight:600 }
.menu a[aria-current="page"]::after{ content:""; position:absolute; left:14px; right:14px; bottom:3px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--red) 0 25%,var(--green) 25% 50%,var(--blue) 50% 75%,var(--orange) 75%) }
.head-cta{ display:flex; gap:10px; align-items:center }
.head-tel{ white-space:nowrap; font-family:var(--round); font-weight:600; color:var(--ink); text-decoration:none; display:inline-flex; gap:8px; align-items:center; font-size:15.5px; padding:8px 6px }
.head-tel svg{ color:var(--blue); flex:none }
.head-tel:hover{ color:var(--blue-ink) }
.burger{ display:none; width:46px; height:46px; border-radius:14px; border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; place-items:center }
.sheet{ display:none }

/* ── Hero de portada ─────────────────────────────────────────────────── */
.hero{ padding:56px 0 72px; position:relative }
.hero .shell{ display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:center }
.hero h1 .hl-word{ position:relative; white-space:nowrap }
.hero h1 .hl-word svg{ position:absolute; left:0; right:0; bottom:-.12em; width:100%; height:.32em; overflow:visible }
.hero h1 .hl-word path{ fill:none; stroke:var(--orange); stroke-width:4; stroke-linecap:round; stroke-dasharray:260; stroke-dashoffset:260; animation:draw 1.2s var(--ease-out) .6s forwards }
@keyframes draw{ to{ stroke-dashoffset:0 } }
.hero h1{ font-size:clamp(36px,4.5vw,54px) }
.hero .lead{ margin-top:20px; font-size:19px; color:var(--soft); max-width:540px }
.hero .btn-row{ margin-top:32px }
.hero-proof{ display:flex; align-items:center; gap:14px; margin-top:32px; flex-wrap:wrap }
.g-badge{ display:inline-flex; align-items:center; gap:12px; padding:10px 16px 10px 12px; background:#fff; border:1px solid var(--line); border-radius:16px;
  text-decoration:none; color:var(--text); box-shadow:var(--shadow); transition:transform .3s var(--spring) }
.g-badge:hover{ transform:translateY(-2px) }
.g-badge b{ font-family:var(--round); font-size:22px; line-height:1 }
.g-badge small{ display:block; font-size:13.5px; color:var(--soft); line-height:1.2; margin-top:3px }
.stars{ display:inline-flex; gap:2px; color:var(--star) }
.proof-txt{ font-size:15px; color:var(--soft); line-height:1.4 }
.proof-txt b{ display:block; color:var(--ink); font-family:var(--round); font-weight:600; font-size:15.5px }

.brand-card{ padding:84px 36px 100px; text-align:center; overflow:visible;
  background-color:#fff; background-image:linear-gradient(rgba(240,150,60,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(240,150,60,.12) 1px, transparent 1px);
  background-size:26px 26px }
.brand-card .logo{ font-size:clamp(60px,7.4vw,96px); padding-right:.62em }
.brand-card .logo .dino{ width:1.05em; height:1.05em; right:-.12em; bottom:.42em; transform-origin:30% 90%; animation:peek 7s ease-in-out infinite 1.5s }
.brand-card .logo-txt small{ font-size:.24em; margin-left:1.5em }
@keyframes peek{ 0%,100%{ transform:rotate(0) } 6%{ transform:rotate(-8deg) } 12%{ transform:rotate(4deg) } 18%{ transform:rotate(0) } }
.levels{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:26px }
.lvl{ font-family:var(--round); font-weight:600; font-size:15px; padding:8px 15px; border-radius:12px; color:#fff; box-shadow:0 3px 0 rgba(0,0,0,.12) }
.lvl:nth-child(1){ background:var(--red) } .lvl:nth-child(2){ background:var(--green) } .lvl:nth-child(3){ background:var(--blue) } .lvl:nth-child(4){ background:var(--orange) }
html.js .lvl{ opacity:0; transform:translateY(8px) scale(.9) }
html.js .in .lvl{ opacity:1; transform:none; transition:all .5s var(--spring) }
.in .lvl:nth-child(2){ transition-delay:.08s } .in .lvl:nth-child(3){ transition-delay:.16s } .in .lvl:nth-child(4){ transition-delay:.24s }
.bubble{ position:absolute; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-up); padding:12px 14px; text-align:left;
  font-size:14px; line-height:1.4; max-width:230px; animation:float 6s ease-in-out infinite }
.bubble .stars svg{ width:13px; height:13px }
.bubble p{ font-family:var(--round); font-weight:500; color:var(--ink); font-size:15px; margin-top:4px }
.bubble small{ color:var(--soft); font-size:12.5px; display:flex; gap:5px; align-items:center; margin-top:4px }
.bubble.b1{ left:-30px; top:-24px }
.bubble.b2{ right:-24px; bottom:-34px; animation-delay:-3s }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } }

/* ── Franja de confianza ─────────────────────────────────────────────── */
.trust{ padding:0 0 30px }
.trust-row{ display:grid; grid-template-columns:repeat(4,1fr); background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow) }
.trust-item{ display:flex; gap:14px; align-items:center; padding:20px 22px; position:relative }
.trust-item + .trust-item::before{ content:""; position:absolute; left:0; top:22px; bottom:22px; width:1px; background:var(--line) }
.trust-item b{ display:block; font-family:var(--round); font-weight:600; font-size:17px; line-height:1.2 }
.trust-item small{ display:block; color:var(--soft); font-size:14px; line-height:1.3; margin-top:2px }
.trust-item:hover .ico{ transform:rotate(-8deg) scale(1.06) }

/* ── Cabecera de páginas interiores ──────────────────────────────────── */
.page-hero{ padding:64px 0 40px; position:relative }
.page-hero .shell{ display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center }
.page-hero .lead{ margin-top:18px; font-size:19px; color:var(--soft); max-width:640px }
.page-hero .btn-row{ margin-top:28px }
.page-hero .art{ width:200px; height:200px; border-radius:50%; background:var(--bg); display:grid; place-items:center; position:relative }
.page-hero .art > svg{ width:132px; height:132px; animation:float 6s ease-in-out infinite }
.page-hero .art::after{ content:""; position:absolute; inset:-12px; border-radius:50%; border:2px dashed var(--c); opacity:.3; animation:spin 50s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }
.crumbs{ font-size:14.5px; font-weight:700; color:var(--soft); margin-bottom:14px }
.crumbs a{ color:var(--soft); text-decoration:none } .crumbs a:hover{ color:var(--blue-ink) }

/* Submenú de la página (saltar a cada apartado) */
.subnav{ position:sticky; top:calc(var(--head-h) + 10px); z-index:40; display:flex; justify-content:center; padding:0 16px; margin-top:6px }
.subnav-in{ display:flex; gap:4px; padding:6px; background:rgba(255,255,255,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line); border-radius:999px; box-shadow:var(--shadow); overflow-x:auto; scrollbar-width:none; max-width:100%; position:relative }
.subnav-in::-webkit-scrollbar{ display:none }
.subnav a{ display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:999px; font-family:var(--round); font-weight:500; font-size:15px;
  color:var(--soft); text-decoration:none; white-space:nowrap; transition:background .25s, color .25s }
.subnav a svg{ opacity:.8 }
.subnav a:hover{ color:var(--ink); background:var(--paper-2) }
.subnav a.on{ background:var(--ink); color:#fff }

/* ── Reseñas ─────────────────────────────────────────────────────────── */
.reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.score{ padding:32px 28px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; grid-row:span 2;
  background:linear-gradient(180deg,#fff, #FFFAF1) }
.score .g{ display:inline-flex; align-items:center; gap:8px; font-weight:800; color:var(--ink); font-size:15px }
.score-n{ font-family:var(--round); font-weight:700; font-size:80px; line-height:1; color:var(--ink); margin-top:14px; font-variant-numeric:tabular-nums }
.score .stars{ margin:10px 0 4px }
.score .stars svg{ width:24px; height:24px }
html.js .score .stars svg{ opacity:.18; transform:scale(.7) }
html.js .score.in .stars svg{ opacity:1; transform:none; transition:all .45s var(--spring) }
.score.in .stars svg:nth-child(2){ transition-delay:.1s } .score.in .stars svg:nth-child(3){ transition-delay:.2s }
.score.in .stars svg:nth-child(4){ transition-delay:.3s } .score.in .stars svg:nth-child(5){ transition-delay:.4s }
.score p{ color:var(--soft); font-weight:700 }
.score .hl{ display:grid; gap:8px; margin:22px 0; width:100% }
.score .hl span{ font-family:var(--round); font-weight:500; font-size:15px; background:var(--paper-2); border-radius:12px; padding:9px 12px; color:var(--ink) }
.score .btn{ width:100% }
.score .btn + .btn{ margin-top:10px }
.rev{ padding:26px 26px 22px; display:flex; flex-direction:column; transition:transform .45s var(--spring), box-shadow .35s }
.rev:hover{ transform:translateY(-4px); box-shadow:var(--shadow-up) }
.rev .stars svg{ width:17px; height:17px }
.rev blockquote{ margin:14px 0 0; font-size:17.5px; line-height:1.55; color:var(--ink); font-weight:600; flex:1 }
.rev blockquote::before{ content:"“"; display:block; font-family:Georgia,serif; font-size:56px; line-height:.6; height:22px; color:var(--c, var(--orange)); opacity:.5 }
.rev-who{ display:flex; gap:12px; align-items:center; margin-top:18px; padding-top:16px; border-top:1px solid var(--line-2) }
.rev-av{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#fff; font-family:var(--round); font-weight:600; font-size:17px; flex:none; background:var(--c) }
.rev-who b{ display:block; font-family:var(--round); font-weight:600; font-size:16px; line-height:1.2 }
.rev-who small{ color:var(--soft); font-size:13.5px; display:flex; align-items:center; gap:5px }

/* ── Tarjetas de servicio (portada) ──────────────────────────────────── */
.services{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.svc{ padding:30px 28px 26px; text-decoration:none; color:inherit; display:flex; flex-direction:column; overflow:hidden;
  transition:transform .45s var(--spring), box-shadow .35s, border-color .3s }
.svc::before{ content:""; position:absolute; left:0; right:0; top:0; height:5px; background:var(--c); transform:scaleX(.2); transform-origin:left; transition:transform .5s var(--ease-out) }
.svc:hover{ transform:translateY(-6px); box-shadow:var(--shadow-up); border-color:transparent }
.svc:hover::before{ transform:scaleX(1) }
.svc:hover .ico{ transform:rotate(-8deg) scale(1.08) }
.svc h3{ margin-top:20px; font-size:22px }
.svc > p{ margin-top:8px; color:var(--soft); font-size:16px }
.svc ul{ list-style:none; padding:0; margin:16px 0 0; display:grid; gap:8px }
.svc li{ display:flex; gap:9px; font-size:15px; line-height:1.45; color:var(--text) }
.svc li svg{ flex:none; margin-top:3px; color:var(--c) }
.svc .more{ margin-top:auto; padding-top:20px }

/* ── Pasos (cómo trabajamos) ─────────────────────────────────────────── */
.how{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.how-item{ padding:30px 28px; position:relative }
.how-item .num{ position:absolute; top:22px; right:24px; font-family:var(--round); font-weight:700; font-size:44px; line-height:1; color:var(--bg) }
.how-item h3{ margin-top:18px; font-size:21px }
.how-item p{ margin-top:8px; color:var(--soft); font-size:16px }
.how-item:hover .ico{ transform:rotate(-8deg) scale(1.06) }

/* ── Bloques de contenido ────────────────────────────────────────────── */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center }
.split.top{ align-items:start }
.prose > p{ margin-top:16px }
.prose > p.big{ font-family:var(--round); font-weight:500; font-size:21px; color:var(--ink); line-height:1.45 }
.steps{ display:grid; gap:12px; margin-top:28px }
.step{ display:flex; gap:16px; align-items:flex-start; padding:18px 20px; border-radius:var(--r-lg); background:#fff; border:1px solid var(--line) }
.step .ico{ width:44px; height:44px; border-radius:13px }
.step b{ display:block; font-family:var(--round); font-weight:600; font-size:18px }
.step span{ font-size:15.5px; color:var(--soft) }

.board{ padding:32px; background:#2E5E3A; border:11px solid #C98D4A; border-radius:26px; color:#EAF3E6;
  box-shadow:inset 0 0 40px rgba(0,0,0,.25), 0 24px 40px -22px rgba(27,37,64,.5) }
.board-title{ font-family:var(--script); font-size:30px; color:#FFE9A8; margin:0 0 8px }
.eq{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:15px 4px; border-bottom:2px dashed rgba(255,255,255,.18) }
.eq-m{ font-family:var(--round); font-weight:600; font-size:clamp(32px,3.8vw,44px); letter-spacing:.04em; color:#fff }
.eq-m em{ font-style:normal; color:#FFD36B }
.eq-t{ font-family:var(--round); font-weight:600; font-size:14.5px; padding:6px 14px; border-radius:999px; white-space:nowrap }
.eq-t.ok{ background:#CFF0C9; color:#1F5A1F } .eq-t.q{ background:#FFE0A8; color:#7A4300 }
html.js .board .eq{ opacity:0; transform:translateX(-10px) }
html.js .board.in .eq{ opacity:1; transform:none; transition:all .7s var(--ease-out) }
html.js .board.in .eq + .eq{ transition-delay:.3s }
.board p{ margin-top:16px; font-size:16.5px }
.board p b{ color:#FFE9A8 }
.note{ margin-top:22px; padding:22px 24px; border-radius:var(--r-lg); background:var(--orange-bg); border:1px solid #F8D6A8;
  font-family:var(--round); font-weight:600; font-size:20px; color:var(--orange-ink); line-height:1.4 }
.note small{ display:block; font-family:var(--body); font-weight:600; font-size:15px; color:var(--soft); margin-top:6px }

.subjects{ display:grid; grid-template-columns:repeat(7,1fr); gap:14px }
.subj{ padding:22px 10px 18px; text-align:center; transition:transform .45s var(--spring), box-shadow .3s }
.subj:hover{ transform:translateY(-5px); box-shadow:var(--shadow-up) }
.subj .ico{ margin:0 auto 12px }
.subj:hover .ico{ transform:rotate(-8deg) scale(1.08) }
.subj b{ font-family:var(--round); font-weight:600; font-size:15.5px; line-height:1.25; display:block }

/* Ficha de servicio: qué es + datos clave */
.offers{ display:grid; gap:24px }
.offer{ display:grid; grid-template-columns:1.25fr .75fr; overflow:hidden }
.offer-main{ padding:34px 36px }
.offer-head{ display:flex; gap:18px; align-items:center }
.offer-head h3{ font-size:26px }
.offer-head .who{ font-weight:700; color:var(--ci); font-size:15px; margin-top:2px }
.offer-main > p{ margin-top:16px }
.pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px }
.pills span{ font-size:14.5px; font-weight:700; padding:6px 13px; border-radius:999px; background:var(--bg); color:var(--ci) }
.offer-side{ background:var(--paper-2); border-left:1px solid var(--line); padding:30px; display:flex; flex-direction:column }
.facts{ list-style:none; padding:0; margin:0; display:grid; gap:14px }
.facts li{ display:flex; gap:12px; align-items:flex-start; font-size:15.5px; line-height:1.4 }
.facts li svg{ flex:none; color:var(--c); margin-top:1px }
.facts small{ display:block; font-size:12.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--soft) }
.offer-side .btn{ margin-top:auto }
.offer-side .facts + .btn{ margin-top:24px }

.banner{ padding:36px 40px; border-radius:var(--r-xl); display:grid; grid-template-columns:auto 1fr auto; gap:28px; align-items:center; color:#fff; position:relative; overflow:hidden }
.banner::after{ content:""; position:absolute; inset:0; opacity:.13; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.8) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.8) 1px, transparent 1px); background-size:28px 28px }
.banner > *{ position:relative; z-index:1 }
.banner h2, .banner h3{ color:#fff }
.banner p{ margin-top:8px; font-size:17px; opacity:.95 }
.banner .ico{ background:rgba(255,255,255,.18); color:#fff }
.banner.green{ background:var(--green) } .banner.blue{ background:var(--blue) } .banner.orange{ background:var(--orange) }
.banner .prepi-art{ width:120px; height:120px }

.two{ display:grid; grid-template-columns:1fr 1fr; gap:24px }
.three{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.box{ padding:32px; display:flex; flex-direction:column }
.box h3{ font-size:23px; margin-top:20px }
.box > p{ margin-top:10px; color:var(--soft); font-size:16px }
.box .more{ margin-top:auto; padding-top:20px }
.box:hover .ico{ transform:rotate(-8deg) scale(1.06) }
.seasons{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px }
.season{ padding:14px 8px; border-radius:var(--r-md); background:#fff; border:1px solid var(--line); text-align:center }
.season svg{ margin:0 auto 6px; color:var(--c) }
.season b{ display:block; font-family:var(--round); font-weight:600; font-size:15.5px }
.season small{ color:var(--soft); font-size:13px }
.tag-limit{ display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-family:var(--round); font-weight:600; font-size:14px; color:var(--red-ink); background:var(--red-bg);
  padding:5px 12px; border-radius:999px; align-self:flex-start }
.tag-limit::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--red); animation:pulse 1.8s ease-in-out infinite }
@keyframes pulse{ 50%{ opacity:.3 } }

.kits{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.kit{ padding:22px; display:flex; gap:16px; align-items:flex-start; transition:transform .4s var(--spring), box-shadow .3s }
.kit:hover{ transform:translateY(-4px); box-shadow:var(--shadow-up) }
.kit b{ display:block; font-family:var(--round); font-weight:600; font-size:18px }
.kit p{ font-size:15px; color:var(--soft); margin-top:3px; line-height:1.5 }

.talks{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
.talk{ padding:24px 26px; display:flex; gap:18px; align-items:flex-start }
.talk b{ display:block; font-family:var(--round); font-weight:600; font-size:18.5px; line-height:1.3 }
.talk p{ font-size:15.5px; color:var(--soft); margin-top:5px }

/* ── Vela ────────────────────────────────────────────────────────────── */
.water{ background:linear-gradient(180deg, transparent, #E9F3FE 160px, #DCEBFC) }
.facts-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.fact-box{ padding:22px; display:flex; gap:14px; align-items:center }
.fact-box b{ display:block; font-family:var(--round); font-weight:600; font-size:17px; line-height:1.2 }
.fact-box small{ color:var(--soft); font-size:14px }
.opt{ padding:36px; display:flex; flex-direction:column }
.opt .lbl{ display:inline-block; align-self:flex-start; font-family:var(--round); font-weight:600; font-size:14px; color:#fff; background:var(--c); padding:5px 13px; border-radius:999px }
.opt h3{ font-size:28px; margin-top:14px }
.opt > p{ margin-top:10px }
.opt h4{ font-size:16.5px; margin-top:22px }
.opt .facts{ margin-top:20px; padding:18px 20px; border-radius:var(--r-md); background:var(--paper-2) }
.opt .btn{ margin-top:auto; align-self:flex-start }
.opt .facts + .btn, .opt .pills + .btn{ margin-top:26px }
.coin{ width:84px; height:84px; border-radius:50%; background:#fff; color:var(--orange-ink); display:grid; place-items:center; font-family:var(--round); font-weight:700; font-size:25px;
  box-shadow:0 4px 0 rgba(0,0,0,.12); transform:rotate(-8deg) }

/* ── Quiénes somos ───────────────────────────────────────────────────── */
.teacher{ padding:42px; display:grid; grid-template-columns:160px 1fr; gap:34px; align-items:start }
.t-av{ width:160px; height:160px; border-radius:42px; background:var(--blue-bg); display:grid; place-items:center }
.t-av svg{ width:104px }
.teacher h3{ font-size:30px }
.teacher .role{ color:var(--blue-ink); font-weight:800; margin-top:4px }
.ticks{ list-style:none; padding:0; margin:20px 0 0; display:grid; gap:11px }
.ticks li{ display:flex; gap:12px; line-height:1.55 }
.ticks svg{ flex:none; margin-top:4px; color:var(--green) }
.quote{ margin:24px 0 0; padding:18px 22px; border-radius:var(--r-md); background:var(--orange-bg); font-family:var(--round); font-weight:500; font-size:19px; color:var(--ink); line-height:1.45 }
.timeline{ display:grid; position:relative; padding-left:34px }
.timeline::before{ content:""; position:absolute; left:10px; top:8px; bottom:8px; width:2px; background:var(--line) }
.tl{ position:relative; padding:0 0 30px }
.tl:last-child{ padding-bottom:0 }
.tl::before{ content:""; position:absolute; left:-31px; top:5px; width:18px; height:18px; border-radius:50%; background:#fff; border:4px solid var(--c) }
.tl b{ display:block; font-family:var(--round); font-weight:600; font-size:18.5px }
.tl p{ color:var(--soft); margin-top:4px; font-size:16px }
.res-list{ list-style:none; padding:0; margin:16px 0 0; display:grid; gap:8px }
.res-list a{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:13px 16px; border-radius:var(--r-md); background:var(--paper-2);
  text-decoration:none; color:var(--ink); font-weight:700; transition:transform .3s var(--spring), background .25s }
.res-list a:hover{ transform:translateX(4px); background:var(--blue-bg) }

/* ── Formulario y contacto ───────────────────────────────────────────── */
.contact-grid{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:28px; align-items:start }
.ways{ display:grid; gap:12px }
.way{ display:flex; gap:16px; align-items:center; padding:18px 20px; text-decoration:none; color:inherit; transition:transform .35s var(--spring), box-shadow .3s }
.way:hover{ transform:translateX(4px); box-shadow:var(--shadow-up) }
.way:hover .ico{ transform:rotate(-8deg) }
.way small{ display:block; font-size:13.5px; font-weight:800; color:var(--soft) }
.way b{ font-family:var(--round); font-weight:600; font-size:18px; overflow-wrap:anywhere; line-height:1.3 }
.way .arrow{ margin-left:auto; color:var(--soft); flex:none; transition:transform .3s var(--spring) }
.way:hover .arrow{ transform:translateX(3px); color:var(--ink) }
.form{ padding:38px }
.form-head p{ color:var(--soft); margin-top:6px }
.f-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:26px }
.field{ display:flex; flex-direction:column; gap:7px }
.field.full{ grid-column:1/-1 }
.field label, .field .lab{ font-family:var(--round); font-weight:600; font-size:16px; color:var(--ink) }
.field label i, .field .lab i{ font-style:normal; font-family:var(--body); font-weight:600; color:var(--soft); font-size:14px }
.field input, .field select, .field textarea{ font:600 16px/1.3 var(--body); color:var(--ink); padding:14px 15px; border-radius:14px; border:1.5px solid #E6DCCC;
  background:#FFFDF9; width:100%; transition:border-color .2s, box-shadow .2s; -webkit-appearance:none; appearance:none }
.field select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23626C85' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; padding-right:40px }
.field textarea{ min-height:104px; resize:vertical }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(30,123,216,.14) }
.field.err input, .field.err select{ border-color:var(--red); box-shadow:0 0 0 4px rgba(229,57,53,.1) }
.field .msg{ display:none; font-size:13.5px; font-weight:700; color:var(--red-ink) }
.field.err .msg{ display:block }
.choices{ display:flex; flex-wrap:wrap; gap:8px }
.choice{ border:1.5px solid #E6DCCC; background:#FFFDF9; padding:9px 15px; border-radius:999px; cursor:pointer; font:700 14.5px/1 var(--body); color:var(--text);
  transition:all .25s var(--spring) }
.choice:hover{ border-color:var(--blue) }
.choice[aria-pressed="true"]{ background:var(--blue); border-color:var(--blue); color:#fff }
.check{ display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--soft); margin:22px 0; cursor:pointer; line-height:1.5 }
.check input{ width:20px; height:20px; margin:1px 0 0; accent-color:var(--blue); flex:none }
.check.err{ color:var(--red-ink) }
.form-note{ display:flex; gap:8px; align-items:center; justify-content:center; font-size:14px; color:var(--soft); margin-top:14px }
.form-note svg{ color:var(--green) }
.done{ display:none; text-align:center; padding:6px }
.done.show{ display:block; animation:pop .6s var(--spring) }
@keyframes pop{ from{ opacity:0; transform:scale(.95) } to{ opacity:1; transform:none } }
.done .dino-ok{ width:120px; height:120px; margin:0 auto 10px }
.done h3{ font-size:30px }
.done > p{ color:var(--soft); margin:8px auto 0; max-width:440px }
.ticket{ margin:22px auto; max-width:440px; text-align:left; border-radius:var(--r-lg); background:var(--paper-2); border:1px dashed #E6DCCC; padding:16px 20px; display:grid; gap:7px; font-size:15.5px }
.ticket div{ display:flex; justify-content:space-between; gap:16px }
.ticket span{ color:var(--soft) }
.ticket b{ text-align:right }
.done-actions{ display:grid; gap:12px; max-width:440px; margin:0 auto }
.link-btn{ background:none; border:0; color:var(--soft); font:700 14.5px var(--body); cursor:pointer; margin-top:16px; text-decoration:underline }

.faq{ display:grid; gap:12px }
.faq details{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); transition:border-color .3s, box-shadow .3s }
.faq details[open]{ border-color:#F5CF9C; box-shadow:var(--shadow-up) }
.faq summary{ list-style:none; cursor:pointer; padding:20px 24px; display:flex; justify-content:space-between; align-items:center; gap:16px;
  font-family:var(--round); font-weight:600; font-size:18px; color:var(--ink) }
.faq summary::-webkit-details-marker{ display:none }
.faq .pm{ width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--orange-bg); color:var(--orange-ink);
  transition:transform .45s var(--spring), background .3s, color .3s }
.faq details[open] .pm{ transform:rotate(135deg); background:var(--orange); color:#fff }
.faq .ans{ padding:0 24px 22px; font-size:16.5px }

.map{ min-height:420px; overflow:hidden }
.map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:inherit }
.map-load{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:24px; background:var(--blue-bg); border-radius:inherit }
.map-load p{ color:var(--soft); margin:6px 0 16px }
.info-card{ padding:32px; display:flex; flex-direction:column }
.info-row{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line-2) }
.info-row:first-child{ padding-top:0 }
.info-row:last-of-type{ border:0 }
.info-row > svg{ flex:none; color:var(--c); margin-top:2px }
.info-row small{ display:block; font-size:12.5px; font-weight:800; color:var(--soft); text-transform:uppercase; letter-spacing:.06em }
.info-row b{ font-family:var(--round); font-weight:600; font-size:18px; display:block; line-height:1.35 }
.info-row .sub{ display:block; color:var(--soft); font-size:15px; margin-top:2px }
.h-row{ display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px dashed var(--line); font-size:15.5px }
.h-row:last-child{ border:0; padding-bottom:0 }
.h-row span{ color:var(--soft) }
.h-row b{ text-align:right; font-family:var(--body); font-size:15.5px; display:inline }

/* ── Llamada final ───────────────────────────────────────────────────── */
.cta-band{ padding:52px 56px; border-radius:34px; background:var(--ink); color:#C9D2E6; display:grid; grid-template-columns:1.2fr auto; gap:40px; align-items:center;
  position:relative; overflow:hidden; box-shadow:var(--shadow-up) }
.cta-band::after{ content:""; position:absolute; inset:0; opacity:.07; pointer-events:none;
  background-image:linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); background-size:28px 28px }
.cta-band::before{ content:""; position:absolute; left:0; right:0; top:0; height:6px;
  background:linear-gradient(90deg,var(--red) 0 25%,var(--green) 25% 50%,var(--blue) 50% 75%,var(--orange) 75%) }
.cta-band > *{ position:relative; z-index:1 }
.cta-band h2{ color:#fff }
.cta-band p{ margin-top:12px; font-size:18px }
.cta-actions{ display:grid; gap:12px; min-width:280px }
.cta-band .btn-white{ box-shadow:none }

/* ── Pie ─────────────────────────────────────────────────────────────── */
footer{ padding:70px 0 34px; margin-top:30px; background:#fff; border-top:1px solid var(--line) }
.foot{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:36px }
.foot .logo{ font-size:38px; padding-right:.7em }
.foot p{ font-size:15.5px; color:var(--soft); margin-top:16px; max-width:320px }
.foot h5{ font-family:var(--round); font-weight:600; font-size:17px; color:var(--ink); margin:4px 0 14px }
.foot ul{ list-style:none; padding:0; margin:0; display:grid; gap:9px }
.foot a{ color:var(--soft); text-decoration:none; font-size:15.5px; transition:color .2s }
.foot a:hover{ color:var(--blue-ink) }
.social{ display:flex; gap:8px; margin-top:20px }
.social a{ width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:var(--paper-2); color:var(--ink); transition:transform .35s var(--spring), background .25s, color .25s }
.social a:hover{ transform:translateY(-3px); background:var(--ink); color:#fff }
.foot-bottom{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:50px; padding-top:20px; border-top:1px solid var(--line); font-size:14px; color:var(--soft) }
.foot-bottom a{ color:inherit }

/* ── WhatsApp flotante ───────────────────────────────────────────────── */
.wa{ position:fixed; right:22px; bottom:22px; z-index:80; width:62px; height:62px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:var(--wa); box-shadow:0 4px 0 #148043, 0 16px 30px -10px rgba(20,128,67,.6); transition:transform .4s var(--spring); animation:waIn .8s var(--spring) .8s both }
.wa:hover{ transform:scale(1.08) rotate(-8deg) }
.wa:active{ transform:scale(.94) }
.wa::before{ content:""; position:absolute; inset:-2px; border-radius:50%; border:3px solid var(--wa); animation:ring 2.8s ease-out infinite 2.5s; opacity:0 }
@keyframes ring{ 0%{ transform:scale(1); opacity:.6 } 100%{ transform:scale(1.55); opacity:0 } }
@keyframes waIn{ from{ transform:scale(0) rotate(-60deg) } to{ transform:none } }
.wa-tip{ position:fixed; right:96px; bottom:28px; z-index:79; display:flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--line); border-radius:18px 18px 6px 18px;
  padding:7px 10px 7px 8px; box-shadow:var(--shadow-up); font-family:var(--round); font-weight:600; color:var(--ink); font-size:15px;
  opacity:0; transform:translateX(10px) scale(.92); pointer-events:none; transition:all .5s var(--spring) }
.wa-tip.show{ opacity:1; transform:none; pointer-events:auto }
.wa-tip .mini{ width:38px; height:38px }
.wa-tip button{ border:0; background:none; color:var(--soft); cursor:pointer; padding:4px; display:grid }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width:1280px){ .head-tel{ display:none } }
@media (max-width:1180px){
  .menu{ display:none }
  .head-cta .btn, .head-tel{ display:none }
  .burger{ display:grid }
  .sheet{ display:block; position:fixed; inset:var(--head-h) 0 auto 0; z-index:59; background:var(--paper); border-bottom:1px solid var(--line);
    padding:10px 24px 24px; box-shadow:0 30px 50px -30px rgba(27,37,64,.5); transform:translateY(-10px); opacity:0; visibility:hidden;
    transition:transform .4s var(--spring), opacity .25s, visibility 0s .4s }
  .sheet.open{ transform:none; opacity:1; visibility:visible; transition:transform .4s var(--spring), opacity .25s }
  .sheet a.lnk{ display:flex; justify-content:space-between; align-items:center; padding:14px 4px; border-bottom:1px solid var(--line); font-family:var(--round);
    font-weight:600; font-size:19px; color:var(--ink); text-decoration:none }
  .sheet a.lnk[aria-current="page"]{ color:var(--orange-ink) }
  .sheet .btn-row{ margin-top:18px }
  .sheet .btn{ flex:1 }
  .hero .shell{ grid-template-columns:1fr; gap:60px }
  .brand-card{ max-width:620px; margin:0 auto; width:100% }
  .services, .how, .three{ grid-template-columns:1fr 1fr }
  .reviews{ grid-template-columns:1fr 1fr }
  .score{ grid-row:auto; grid-column:1/-1 }
  .trust-row, .facts-row{ grid-template-columns:1fr 1fr }
  .trust-item:nth-child(3)::before{ display:none }
  .trust-item:nth-child(n+3){ border-top:1px solid var(--line) }
  .subjects{ grid-template-columns:repeat(4,1fr) }
  .kits{ grid-template-columns:1fr 1fr }
  .contact-grid{ grid-template-columns:minmax(0,1fr) }
  .foot{ grid-template-columns:1fr 1fr }
  .cta-band{ grid-template-columns:1fr }
  .cta-actions{ min-width:0 }
}
@media (max-width:860px){
  section{ padding:72px 0 }
  .split, .two, .talks{ grid-template-columns:minmax(0,1fr); gap:28px }
  .offer{ grid-template-columns:1fr }
  .offer-side{ border-left:0; border-top:1px solid var(--line) }
  .page-hero .shell{ grid-template-columns:1fr }
  .page-hero .art{ display:none }
  .teacher{ grid-template-columns:1fr }
  .banner{ grid-template-columns:1fr; text-align:center; justify-items:center }
  .bubble.b1{ left:-8px } .bubble.b2{ right:-8px }
}
@media (max-width:640px){
  :root{ --shell:calc(100% - 32px); --head-h:66px }
  body{ font-size:16.5px; background-size:26px 26px }
  section{ padding:60px 0 }
  .narrow{ width:calc(100% - 32px) }
  .head .logo{ font-size:29px }
  .hero{ padding:34px 0 56px }
  .hero .btn-row, .page-hero .btn-row{ flex-direction:column; align-items:stretch }
  .brand-card{ padding:40px 18px 28px }
  .bubble{ display:none }
  .page-hero{ padding:40px 0 30px }
  .services, .how, .three, .reviews, .kits, .facts-row, .seasons{ grid-template-columns:1fr }
  .trust-row{ grid-template-columns:1fr }
  .trust-item + .trust-item::before{ display:none }
  .trust-item + .trust-item{ border-top:1px solid var(--line) }
  .subjects{ grid-template-columns:repeat(2,1fr) }
  .subj:last-child{ grid-column:1/-1 }
  .f-grid{ grid-template-columns:1fr }
  .form, .box, .opt, .offer-main, .offer-side, .teacher, .info-card, .score, .svc, .how-item{ padding:26px 22px }
  .foot{ grid-template-columns:1fr }
  .cta-band{ padding:36px 24px; border-radius:26px }
  .map{ min-height:320px }
  .wa{ right:16px; bottom:16px; width:58px; height:58px }
  .wa-tip{ right:84px; bottom:22px }
  .board{ padding:22px 18px; border-width:8px }
  .subnav{ top:calc(var(--head-h) + 8px) }
  .subnav a{ padding:8px 12px; font-size:14px }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
  html{ scroll-behavior:auto }
  html.js .reveal, html.js .board .eq, html.js .lvl, html.js .score .stars svg{ opacity:1; transform:none }
}

/* ════════════════════════════════════════════════════════════════════
   PORTADA PREMIUM: logo centrado, cifras, mosaico de servicios
   ════════════════════════════════════════════════════════════════════ */

/* Barra de progreso de lectura con los colores del logo */
.progress{ position:fixed; top:0; left:0; height:3px; width:100%; z-index:70; transform-origin:left; transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--red) 0 25%,var(--green) 25% 50%,var(--blue) 50% 75%,var(--orange) 75%) }

/* Brillo que recorre los botones al pasar el ratón */
.btn{ overflow:hidden; isolation:isolate }
.btn::after{ content:""; position:absolute; inset:0 auto 0 0; width:40%; z-index:-1; pointer-events:none;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent); transform:translateX(-160%) skewX(-18deg) }
.btn:hover::after{ transform:translateX(330%) skewX(-18deg); transition:transform .9s var(--ease) }
.btn-white::after, .btn-ghost::after{ background:linear-gradient(105deg, transparent, rgba(242,140,24,.14), transparent) }
.btn-orange:hover{ box-shadow:0 4px 0 #B9650A, 0 18px 30px -12px rgba(242,140,24,.75) }
.btn-blue:hover{ box-shadow:0 4px 0 #145EA8, 0 18px 30px -12px rgba(30,123,216,.7) }
.btn-green:hover{ box-shadow:0 4px 0 #148043, 0 18px 30px -12px rgba(31,175,91,.7) }
.btn-lg{ padding:18px 32px; font-size:18px }

/* Luz que sigue al ratón dentro de las tarjetas */
.spot{ overflow:hidden }
.spot::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--c, #F28C18) 13%, transparent), transparent 45%) }
.spot:hover::after{ opacity:1 }

/* ── Hero centrado ───────────────────────────────────────────────────── */
.hero-c{ position:relative; text-align:center; padding:70px 0 84px; overflow:hidden; overflow:clip; isolation:isolate; contain:paint }
.hero-c .glow{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; pointer-events:none; z-index:-1; animation:drift 16s ease-in-out infinite }
.hero-c .g1{ width:420px; height:420px; background:#FFD7A3; left:-120px; top:-60px }
.hero-c .g2{ width:380px; height:380px; background:#CFE4FB; right:-110px; top:40px; animation-delay:-5s }
.hero-c .g3{ width:300px; height:300px; background:#D7F0D4; left:40%; bottom:-170px; animation-delay:-9s }
@keyframes drift{ 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(30px,-24px) } }
.hero-c .kicker{ margin-bottom:22px; animation:fadeUp .8s var(--ease-out) both }
.hero-c .logo{ font-size:clamp(78px,14.5vw,176px); padding-right:.6em; margin:0 auto }
.hero-c .logo-txt small{ font-size:.22em; margin-left:1.7em; animation:fadeUp .8s var(--ease-out) .15s both }
.hero-c .logo-txt b span{ display:inline-block; animation:letterIn .8s var(--spring) both; animation-delay:calc(var(--i) * 55ms + .25s) }
@keyframes letterIn{ from{ opacity:0; transform:translateY(.35em) rotate(-8deg) scale(.8) } to{ opacity:1; transform:none } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
.hero-c .logo .dino{ width:1.05em; height:1.05em; right:-.14em; bottom:.42em; transform-origin:30% 90%;
  animation:dinoIn .9s var(--spring) 1s both, peek 7s ease-in-out 3.5s infinite }
@keyframes dinoIn{ from{ opacity:0; transform:translateY(40%) scale(.4) rotate(-20deg) } to{ opacity:1; transform:none } }
.hero-c .hero-sub{ font-family:var(--round); font-weight:500; font-size:clamp(19px,2.3vw,24px); color:var(--ink); max-width:720px; margin:30px auto 0; line-height:1.45;
  animation:fadeUp .8s var(--ease-out) 1.1s both }
.hero-c .btn-row{ justify-content:center; margin-top:34px; animation:fadeUp .8s var(--ease-out) 1.25s both }
.hero-c .levels{ margin-top:34px; animation:fadeUp .8s var(--ease-out) 1.4s both }
html.js .hero-c .levels .lvl{ opacity:1; transform:none; transition:transform .35s var(--spring) }
.hero-c .levels .lvl:hover{ transform:translateY(-4px) rotate(-3deg) }
.hero-c .hero-proof{ justify-content:center; margin-top:30px; animation:fadeUp .8s var(--ease-out) 1.55s both }
.doodle{ position:absolute; pointer-events:none; opacity:.9 }
.d1{ left:7%; top:120px; width:58px; animation:bob 6s ease-in-out infinite }
.d2{ right:8%; top:150px; width:56px; animation:bob 7s ease-in-out infinite .8s }
.d3{ left:10%; bottom:110px; width:50px; animation:bob 8s ease-in-out infinite 1.5s }
.d4{ right:11%; bottom:140px; width:64px; animation:bob 6.5s ease-in-out infinite .4s }
@keyframes bob{ 0%,100%{ transform:translateY(0) rotate(0) } 50%{ transform:translateY(-12px) rotate(6deg) } }
.scroll-cue{ display:inline-flex; flex-direction:column; align-items:center; gap:8px; margin-top:44px; color:var(--soft); text-decoration:none; font-size:13.5px; font-weight:700;
  animation:fadeUp .8s var(--ease-out) 1.8s both }
.scroll-cue i{ width:24px; height:38px; border-radius:14px; border:2px solid #D9CDBB; position:relative }
.scroll-cue i::after{ content:""; position:absolute; left:50%; top:7px; width:4px; height:8px; margin-left:-2px; border-radius:2px; background:var(--orange); animation:wheel 1.8s ease-in-out infinite }
@keyframes wheel{ 0%{ opacity:0; transform:translateY(-3px) } 30%{ opacity:1 } 100%{ opacity:0; transform:translateY(12px) } }

/* ── Cifras ──────────────────────────────────────────────────────────── */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow-up) }
.stat{ padding:28px 20px; text-align:center; position:relative }
.stat + .stat::before{ content:""; position:absolute; left:0; top:26px; bottom:26px; width:1px; background:var(--line) }
.stat-n{ font-family:var(--round); font-weight:700; font-size:46px; line-height:1; color:var(--c); font-variant-numeric:tabular-nums }
.stat-n small{ font-size:.55em; margin-left:2px }
.stat p{ margin-top:8px; font-weight:700; color:var(--soft); font-size:15px }

/* ── Mosaico de servicios ────────────────────────────────────────────── */
.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:20px }
.tile{ padding:32px; display:flex; flex-direction:column; text-decoration:none; color:inherit; transition:transform .5s var(--spring), box-shadow .35s, border-color .3s }
.tile:hover{ transform:translateY(-6px); box-shadow:var(--shadow-up) }
.tile:hover .ico{ transform:rotate(-8deg) scale(1.08) }
.tile h3{ font-size:24px; margin-top:20px }
.tile > p{ margin-top:8px; color:var(--soft); font-size:16.5px; max-width:560px }
.tile .more{ margin-top:auto; padding-top:22px; position:relative; z-index:1 }
.tile .pills{ margin-top:16px }
.span-4{ grid-column:span 4 } .span-3{ grid-column:span 3 } .span-2{ grid-column:span 2 }
.tile-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px 16px; flex-wrap:wrap }
.tile-badge{ font-family:var(--round); font-weight:600; font-size:13.5px; color:var(--ci); background:var(--bg); padding:5px 12px; border-radius:999px; max-width:100% }
.mini-subj{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px }
.mini-subj span{ display:inline-flex; align-items:center; gap:8px; padding:7px 12px 7px 8px; border-radius:12px; background:var(--paper-2); font-weight:700; font-size:14.5px; color:var(--ink) }
.mini-subj svg{ flex:none }
.tile.dark{ background:linear-gradient(150deg,#1E7BD8,#155DB0); border-color:transparent; color:#DCEBFC }
.tile.dark h3{ color:#fff } .tile.dark > p{ color:#DCEBFC; max-width:70% }
.tile.dark .ico{ background:rgba(255,255,255,.16); color:#fff }
.tile.dark .tile-badge{ background:rgba(255,255,255,.16); color:#fff }
.tile.dark .pills{ max-width:72% }
.tile.dark .pills span{ background:rgba(255,255,255,.14); color:#fff }
.tile.dark .more{ color:#FFD36B }
.tile.dark .boat-art{ position:absolute; right:20px; bottom:18px; width:150px; opacity:.95; animation:sail 5s ease-in-out infinite }
@keyframes sail{ 0%,100%{ transform:translateY(0) rotate(-2deg) } 50%{ transform:translateY(-8px) rotate(2deg) } }
.tile.dark::before{ content:""; position:absolute; inset:0; border-radius:inherit; opacity:.12; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.8) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.8) 1px, transparent 1px); background-size:28px 28px }
.mini-list{ list-style:none; padding:0; margin:16px 0 0; display:grid; gap:8px }
.mini-list li{ display:flex; gap:9px; font-size:15px; line-height:1.45 }
.mini-list svg{ flex:none; margin-top:3px; color:var(--c) }

/* ── Contacto rápido ─────────────────────────────────────────────────── */
.quick{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:22px }
.quick a{ display:flex; gap:14px; align-items:center; padding:20px 22px; text-decoration:none; color:inherit; transition:transform .4s var(--spring), box-shadow .3s }
.quick a:hover{ transform:translateY(-4px); box-shadow:var(--shadow-up) }
.quick a:hover .ico{ transform:rotate(-8deg) }
.quick small{ display:block; font-size:13px; font-weight:800; color:var(--soft); text-transform:uppercase; letter-spacing:.05em }
.quick b{ font-family:var(--round); font-weight:600; font-size:17px; overflow-wrap:anywhere; line-height:1.3 }

@media (max-width:1100px){
  .bento{ grid-template-columns:repeat(2,1fr) }
  .span-4, .span-3, .span-2{ grid-column:span 1 }
  .bento .wide{ grid-column:1/-1 }
  .stats{ grid-template-columns:1fr 1fr }
  .stat:nth-child(3)::before{ display:none }
  .stat:nth-child(n+3){ border-top:1px solid var(--line) }
  .quick{ grid-template-columns:1fr }
}
@media (max-width:640px){
  .hero-c{ padding:40px 0 60px }
  .hero-c .kicker{ font-size:13px; padding:6px 12px }
  .hero-c .logo{ font-size:clamp(60px,18vw,92px) }
  .hero-c .btn-row{ flex-direction:column; align-items:stretch; max-width:380px; margin-inline:auto }
  .doodle{ display:none }
  .bento{ grid-template-columns:1fr }
  .tile{ padding:26px 22px }
  .tile.dark > p, .tile.dark .pills{ max-width:none }
  .tile.dark .boat-art{ width:90px; opacity:.35 }
  .stat-n{ font-size:38px }
  .scroll-cue{ display:none }
}
@media (prefers-reduced-motion:reduce){
  .hero-c *{ animation:none !important }
  .progress{ display:none }
}

/* Lema del folleto original */
.hero-tag{ font-family:var(--script); font-weight:700; font-size:clamp(30px,4vw,44px); color:var(--green); margin-top:18px; line-height:1.1; animation:fadeUp .8s var(--ease-out) 1s both }
.hero-c .hero-sub{ margin-top:16px }

/* ── Blog y eventos ──────────────────────────────────────────────────── */
.posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.post{ padding:26px 26px 22px; display:flex; flex-direction:column; text-decoration:none; color:inherit; transition:transform .45s var(--spring), box-shadow .35s, opacity .3s }
.post:hover{ transform:translateY(-5px); box-shadow:var(--shadow-up) }
.post[hidden]{ display:none }
.post-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap }
.post-cat{ display:inline-flex; align-items:center; gap:6px; font-family:var(--round); font-weight:600; font-size:13.5px; color:var(--ci); background:var(--bg); padding:5px 11px; border-radius:999px }
.post time{ font-size:14px; font-weight:700; color:var(--soft) }
.post h3{ font-size:19.5px; margin-top:16px; line-height:1.3 }
.post p{ margin-top:8px; font-size:15.5px; color:var(--soft); line-height:1.55 }
.post .more{ margin-top:auto; padding-top:16px }

.featured{ display:grid; grid-template-columns:auto 1fr; gap:36px; align-items:center; padding:36px 40px; text-decoration:none; color:inherit;
  background:linear-gradient(135deg,#fff 0%, #FFF4E4 100%); transition:transform .45s var(--spring), box-shadow .35s }
.featured:hover{ transform:translateY(-4px); box-shadow:var(--shadow-up) }
.featured-art{ width:170px; height:170px; border-radius:50%; background:var(--orange-bg); display:grid; place-items:center }
.featured-art svg{ width:120px; height:120px; animation:float 6s ease-in-out infinite }
.featured h2{ font-size:clamp(26px,3.2vw,36px); margin-top:14px }
.featured p{ margin-top:12px; font-size:17px; color:var(--text) }
.featured .post-cat{ color:var(--orange-ink); background:var(--orange-bg) }
.featured time{ font-size:14px; font-weight:700; color:var(--soft) }
.featured .more{ margin-top:16px; color:var(--orange-ink) }

.agenda{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.agenda-item{ display:flex; gap:20px; align-items:center; padding:20px 22px; text-decoration:none; color:inherit; transition:transform .4s var(--spring), box-shadow .3s }
.agenda-item:hover{ transform:translateY(-3px); box-shadow:var(--shadow-up) }
.agenda-date{ flex:none; width:74px; text-align:center; border-radius:16px; background:var(--red-bg); padding:10px 4px; line-height:1 }
.agenda-date b{ display:block; font-family:var(--round); font-weight:700; font-size:28px; color:var(--red) }
.agenda-date small{ display:block; font-weight:800; font-size:13px; text-transform:uppercase; color:var(--red-ink); margin-top:3px }
.agenda-date i{ display:block; font-style:normal; font-size:12px; font-weight:700; color:var(--soft); margin-top:4px }
.agenda-item h3{ font-size:18px; line-height:1.3 }
.agenda-item p{ font-size:15px; color:var(--soft); margin-top:4px; line-height:1.5 }
.agenda-item .arrow{ margin-left:auto; flex:none; color:var(--soft); transition:transform .3s var(--spring) }
.agenda-item:hover .arrow{ transform:translateX(4px); color:var(--ink) }

.filters{ display:flex; flex-wrap:wrap; gap:8px }
.filter{ border:1px solid var(--line); background:#fff; padding:9px 15px; border-radius:999px; cursor:pointer; font:600 15px/1 var(--round); color:var(--soft);
  display:inline-flex; align-items:center; gap:8px; transition:all .25s var(--spring) }
.filter i{ font-style:normal; font-size:12.5px; background:var(--paper-2); color:var(--soft); padding:3px 8px; border-radius:999px }
.filter:hover{ color:var(--ink); border-color:#E6D8C3 }
.filter[aria-pressed="true"]{ background:var(--ink); color:#fff; border-color:var(--ink) }
.filter[aria-pressed="true"] i{ background:rgba(255,255,255,.18); color:#fff }

@media (max-width:1100px){ .posts{ grid-template-columns:1fr 1fr } }
@media (max-width:860px){ .agenda{ grid-template-columns:1fr } .featured{ grid-template-columns:1fr; text-align:left } .featured-art{ display:none } }
@media (max-width:640px){ .posts{ grid-template-columns:1fr } .featured{ padding:26px 22px } .post{ padding:22px 20px } }

/* ── Pulido final ─────────────────────────────────────────────────── */
h1, h2, h3{ text-wrap:balance }
p, li, blockquote{ text-wrap:pretty }
/* Transición suave al cambiar de página (navegadores que la soportan) */
@view-transition{ navigation:auto }
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.35s }
/* Tarjetas de ventajas: textos sin cortes raros */
.trust-item b{ font-size:16.5px }
@media (prefers-reduced-motion:reduce){ @view-transition{ navigation:none } }
@media (max-width:640px){ .hide-m{ display:none } }