/* =========================================================
   Lápiz y Café — Refuerzo escolar amable · Ñuñoa
   Demo Esencial · Digital Bee
   Paleta: crema cálida + azul cercano + amarillo de relleno
   ========================================================= */

:root{
  --bg:#FFFBF2;
  --surface:#FFF4DC;
  --fg:#1F2A44;
  --muted:#5C6680;
  --accent:#2E5BD6;       /* azul AA sobre crema */
  --accent-deep:#234AB0;  /* azul para texto chico / sobre crema */
  --accent-ink:#16306E;   /* azul muy oscuro para énfasis */
  --yellow:#FFC83D;       /* SOLO relleno, nunca texto */
  --line:#EADfC4;
  --line-soft:#F0E7D2;

  --font-display:"Bricolage Grotesque", system-ui, sans-serif;
  --font-body:"Hanken Grotesk", system-ui, sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --maxw:1180px;
  --pad:clamp(1.25rem, 5vw, 4.5rem);
  --demobar-h:34px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
html.js-on .reveal,
html.js-on .reveal-line{opacity:0}

body{
  margin:0;
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--fg);
  font-size:clamp(1rem,.96rem + .25vw,1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-top:var(--demobar-h);
}

img,svg{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

::selection{background:var(--accent); color:#fff}

h1,h2,h3{font-family:var(--font-display); font-weight:800; line-height:1.04; letter-spacing:-.02em; margin:0}
p{margin:0}

:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:6px}

/* ---------- Reveal ---------- */
.reveal{transform:translateY(22px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out)}
.reveal.is-in{opacity:1; transform:none}
.reveal-line{display:block; transform:translateY(105%); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out)}
.reveal-line.is-in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
  html.js-on .reveal,
  html.js-on .reveal-line{opacity:1 !important; transform:none !important}
}

/* =========================================================
   Barra DEMO
   ========================================================= */
.demobar{
  position:fixed; top:0; left:0; right:0; height:var(--demobar-h); z-index:200;
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  background:var(--accent); color:#fff;
  font-size:.74rem; font-weight:600; letter-spacing:.01em;
  padding:0 1rem;
}
.demobar__dot{width:8px; height:8px; border-radius:50%; background:var(--yellow); flex:none; box-shadow:0 0 0 3px rgba(255,200,61,.3)}
.demobar__txt{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.demobar__cta{
  flex:none; background:#fff; color:var(--accent-ink);
  font-weight:700; font-size:.72rem; padding:.28rem .7rem; border-radius:999px;
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.demobar__cta:hover{transform:translateY(-1px); background:var(--yellow)}
@media (max-width:560px){ .demobar__cta{display:none} }

/* =========================================================
   Navegación
   ========================================================= */
.nav{
  position:fixed; top:var(--demobar-h); left:0; right:0; z-index:150;
  display:flex; align-items:center; justify-content:space-between;
  padding:.7rem var(--pad);
  background:rgba(255,251,242,.78);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.nav.is-stuck{border-bottom-color:var(--line); box-shadow:0 10px 30px -22px rgba(31,42,68,.35)}

.nav__brand{display:flex; align-items:center; gap:.6rem}
.nav__mark{display:grid; place-items:center; transition:transform .5s var(--ease)}
.nav__brand:hover .nav__mark{transform:rotate(-6deg)}
.nav__name{font-family:var(--font-display); font-weight:800; font-size:1.18rem; letter-spacing:-.02em; color:var(--fg)}
.nav__amp{color:var(--accent); margin:0 .12em; font-weight:700}

.nav__links{display:flex; align-items:center; gap:.4rem}
.nav__links a{
  position:relative; font-weight:600; font-size:.92rem; color:var(--fg);
  padding:.45rem .7rem; border-radius:8px; transition:color .25s var(--ease), background .25s var(--ease);
}
.nav__links a:not(.nav__cta)::after{
  content:""; position:absolute; left:.7rem; right:.7rem; bottom:.32rem; height:2px;
  background:var(--accent); border-radius:2px; transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav__links a:not(.nav__cta):hover{color:var(--accent-deep)}
.nav__links a:not(.nav__cta):hover::after{transform:scaleX(1)}
.nav__cta{
  background:var(--accent); color:#fff !important; font-weight:700;
  padding:.5rem 1rem !important; border-radius:999px;
  box-shadow:0 12px 24px -14px rgba(46,91,214,.8);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.nav__cta:hover{transform:translateY(-2px); background:var(--accent-deep); box-shadow:0 18px 30px -16px rgba(46,91,214,.9)}

.nav__toggle{display:none; flex-direction:column; gap:5px; width:42px; height:42px; border:0; background:none; cursor:pointer; align-items:center; justify-content:center}
.nav__toggle span{width:22px; height:2.4px; background:var(--fg); border-radius:2px; transition:transform .35s var(--ease), opacity .35s var(--ease)}
.nav__toggle[aria-expanded="true"] span:first-child{transform:translateY(3.7px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.7px) rotate(-45deg)}

/* Menú móvil */
.mobnav{
  position:fixed; inset:calc(var(--demobar-h) + 60px) 0 auto 0; z-index:140;
  background:var(--bg); border-bottom:1px solid var(--line);
  padding:1rem var(--pad) 1.5rem;
  transform:translateY(-12px); opacity:0; pointer-events:none;
  transition:transform .4s var(--ease), opacity .4s var(--ease);
}
.mobnav.is-open{transform:none; opacity:1; pointer-events:auto}
.mobnav__links{display:flex; flex-direction:column; gap:.2rem}
.mobnav__links a{font-family:var(--font-display); font-weight:700; font-size:1.3rem; padding:.7rem 0; border-bottom:1px solid var(--line-soft); color:var(--fg)}
.mobnav__cta{color:var(--accent) !important; border-bottom:0 !important}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-display); font-weight:700; font-size:1rem;
  padding:.95rem 1.6rem; border-radius:999px; cursor:pointer; border:0;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
  will-change:transform;
}
.btn--solid{background:var(--accent); color:#fff; box-shadow:0 18px 34px -16px rgba(46,91,214,.85)}
.btn--solid:hover{transform:translateY(-3px); background:var(--accent-deep); box-shadow:0 26px 44px -18px rgba(46,91,214,.95)}
.btn--ghost{background:transparent; color:var(--accent-deep); box-shadow:inset 0 0 0 2px var(--accent)}
.btn--ghost:hover{transform:translateY(-3px); background:rgba(46,91,214,.08)}

.kicker{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-body); font-weight:700; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-deep);
}
.kicker::before{content:""; width:26px; height:2px; background:var(--accent); border-radius:2px}
.kicker--light{color:#dbe7ff}
.kicker--light::before{background:var(--yellow)}

.h2{font-size:clamp(1.7rem,1.2rem + 2.4vw,2.85rem); max-width:18ch}
.h2--light{color:#fff}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; min-height:calc(100svh - var(--demobar-h));
  display:flex; align-items:center;
  padding:clamp(5rem,9vw,7.5rem) var(--pad) clamp(3rem,6vw,5rem);
  overflow:hidden;
}
.hero__mesh{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(60% 55% at 82% 18%, rgba(255,200,61,.4), transparent 60%),
    radial-gradient(50% 60% at 12% 80%, rgba(46,91,214,.14), transparent 62%),
    radial-gradient(70% 70% at 50% -10%, rgba(255,244,220,.9), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg));
}
.hero__paper{
  position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:linear-gradient(var(--line) 1px, transparent 1px);
  background-size:100% 34px;
  -webkit-mask-image:radial-gradient(70% 60% at 30% 50%, #000, transparent 80%);
  mask-image:radial-gradient(70% 60% at 30% 50%, #000, transparent 80%);
}
.hero__inner{
  position:relative; z-index:1; width:100%; max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center;
}

.hero__kicker{
  display:inline-flex; align-items:center; gap:.55rem;
  font-weight:700; font-size:.86rem; letter-spacing:.04em; color:var(--accent-deep);
  background:#fff; padding:.45rem .9rem; border-radius:999px;
  box-shadow:0 10px 26px -18px rgba(31,42,68,.5); border:1px solid var(--line);
}
.hero__pin{width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(46,91,214,.18)}

.hero__title{
  margin:1.4rem 0 0; font-size:clamp(2.4rem,1.5rem + 5.6vw,4.6rem); letter-spacing:-.03em;
}
.hero__title em{font-style:normal; color:var(--accent); position:relative}
.hero__title em::after{
  content:""; position:absolute; left:-.04em; right:-.04em; bottom:.08em; height:.32em; z-index:-1;
  background:var(--yellow); border-radius:4px; transform:skewX(-8deg);
}

.hero__lead{margin:1.5rem 0 0; max-width:46ch; color:var(--muted); font-size:1.12rem}

.hero__cta{display:flex; flex-wrap:wrap; gap:.9rem; margin:2rem 0 0}

.hero__stats{
  list-style:none; margin:2.6rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:1.6rem 2.4rem;
}
.hero__stats li{display:flex; flex-direction:column}
.hero__stats strong{font-family:var(--font-display); font-weight:800; font-size:1.7rem; color:var(--accent-deep); line-height:1}
.hero__stats span{font-size:.86rem; color:var(--muted); margin-top:.25rem}

/* Hero art */
.hero__art{position:relative}
.hero__artcard{
  position:relative; padding:1rem; border-radius:28px;
  background:linear-gradient(160deg, #fff, var(--surface));
  border:1px solid var(--line);
  box-shadow:0 50px 80px -42px rgba(31,42,68,.4);
  transform:rotate(2deg);
}
.hero__artcard::before{
  content:""; position:absolute; inset:0; border-radius:28px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  pointer-events:none;
}

.hero__scroll{
  position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem; z-index:1;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.hero__scroll-line{width:1.6px; height:34px; background:linear-gradient(var(--accent), transparent); border-radius:2px; animation:scrollPulse 1.9s var(--ease) infinite}
@keyframes scrollPulse{0%,100%{transform:scaleY(.55); opacity:.5} 50%{transform:scaleY(1); opacity:1}}

/* =========================================================
   Marquee
   ========================================================= */
.marquee{
  background:var(--accent); color:#fff; overflow:hidden; padding:.95rem 0;
  border-top:3px solid var(--accent-ink); border-bottom:3px solid var(--accent-ink);
}
.marquee__track{display:flex; align-items:center; gap:1.6rem; width:max-content; animation:slide 26s linear infinite}
.marquee__track span{font-family:var(--font-display); font-weight:700; font-size:1.18rem; letter-spacing:.01em; white-space:nowrap}
.marquee__track i{color:var(--yellow); font-style:normal; font-size:1.2rem}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .marquee__track{animation:none; flex-wrap:wrap; justify-content:center} }

/* =========================================================
   Sección genérica
   ========================================================= */
section{padding:clamp(3.5rem,7vw,6.5rem) var(--pad)}

/* ---------- About / método ---------- */
.about{max-width:var(--maxw); margin:0 auto}
.about__head{max-width:60ch; margin-bottom:clamp(2rem,4vw,3rem)}
.about__head .h2{margin-top:.9rem; max-width:22ch}
.about__body{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:start}
.about__text p{color:var(--muted); margin-bottom:1.1rem; font-size:1.08rem}
.about__pillars{list-style:none; margin:1.8rem 0 0; padding:0; display:flex; flex-direction:column; gap:1.1rem}
.about__pillars li{display:flex; gap:1rem; align-items:flex-start}
.about__ico{
  flex:none; width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  background:#fff; border:1px solid var(--line); box-shadow:0 12px 24px -18px rgba(31,42,68,.5);
}
.about__pillars h3{font-size:1.1rem; margin-bottom:.2rem}
.about__pillars p{color:var(--muted); font-size:.98rem}

.about__visual{margin:0}
.about__card{
  border-radius:24px; overflow:hidden; padding:.8rem;
  background:linear-gradient(160deg,#fff,var(--surface)); border:1px solid var(--line);
  box-shadow:0 44px 70px -40px rgba(31,42,68,.42);
}
.about__cap{margin:.9rem .3rem 0; font-size:.85rem; color:var(--muted); display:flex; align-items:center; gap:.45rem}
.about__cap::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--accent)}

/* ---------- Clases ---------- */
.clases{max-width:var(--maxw); margin:0 auto}
.clases__head{max-width:60ch; margin-bottom:clamp(2.2rem,4vw,3.2rem)}
.clases__head .h2{margin-top:.9rem; max-width:24ch}
.clases__lead{margin-top:1rem; color:var(--muted); font-size:1.08rem; max-width:52ch}

.clases__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem}
.clase{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:1.6rem 1.5rem 1.5rem; overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.clase::after{
  content:""; position:absolute; left:0; top:0; height:100%; width:4px;
  background:var(--accent); transform:scaleY(0); transform-origin:top; transition:transform .45s var(--ease);
}
.clase:hover{transform:translateY(-6px); box-shadow:0 36px 56px -34px rgba(31,42,68,.4); border-color:#dfe7fa}
.clase:hover::after{transform:scaleY(1)}
.clase__ico{
  width:52px; height:52px; border-radius:15px; display:grid; place-items:center; margin-bottom:1rem;
  background:var(--surface); border:1px solid var(--line);
}
.clase h3{font-size:1.22rem; margin-bottom:.45rem}
.clase p{color:var(--muted); font-size:.98rem}
.clase__tags{list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; margin:1.1rem 0 0; padding:0}
.clase__tags li{font-size:.74rem; font-weight:600; color:var(--accent-deep); background:rgba(46,91,214,.09); padding:.26rem .6rem; border-radius:999px}
.clase--feat{background:linear-gradient(165deg,#fff,#fff7e6); border-color:#f3dca0}
.clase--feat .clase__ico{background:#fff; border-color:#f0d99a}
.clase__badge{
  position:absolute; top:1.1rem; right:1.1rem;
  font-family:var(--font-display); font-weight:700; font-size:.7rem; color:var(--fg);
  background:var(--yellow); padding:.3rem .65rem; border-radius:999px; box-shadow:0 6px 14px -8px rgba(31,42,68,.5);
}

/* ---------- Precios ---------- */
.precios{
  margin-top:clamp(2rem,4vw,3rem); background:var(--surface); border:1px solid var(--line);
  border-radius:24px; padding:clamp(1.6rem,4vw,2.6rem);
}
.precios__head{display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.4rem; max-width:60ch}
.precios__head h3{font-size:1.4rem}
.precios__head p{color:var(--muted); font-size:1rem}
.precios__list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem}
.precios__list li{
  position:relative; display:grid; grid-template-columns:1fr auto; grid-template-areas:"name val" "meta val";
  align-items:center; gap:.1rem .8rem;
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:1rem 1.2rem;
}
.precios__name{grid-area:name; font-family:var(--font-display); font-weight:700; font-size:1.05rem}
.precios__meta{grid-area:meta; font-size:.82rem; color:var(--muted)}
.precios__val{grid-area:val; font-family:var(--font-display); font-weight:800; font-size:1.4rem; color:var(--accent-deep)}
.precios--feat{border:2px solid var(--accent); box-shadow:0 24px 44px -30px rgba(46,91,214,.6)}
.precios--feat::before{
  content:"Más elegido"; position:absolute; top:-.7rem; left:1.1rem;
  font-family:var(--font-display); font-weight:700; font-size:.68rem; color:#fff;
  background:var(--accent); padding:.2rem .6rem; border-radius:999px;
}
.precios__fine{margin-top:1.2rem; font-size:.84rem; color:var(--muted)}

/* ---------- Confianza ---------- */
.conf{position:relative; overflow:hidden; color:#fff}
.conf__bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(60% 70% at 85% 10%, rgba(255,200,61,.22), transparent 55%),
    radial-gradient(50% 60% at 10% 100%, rgba(255,200,61,.12), transparent 60%),
    linear-gradient(165deg, #2E5BD6, #234AB0 55%, #1d3f97);
}
.conf > *{position:relative; z-index:1}
.conf__head{max-width:var(--maxw); margin:0 auto clamp(2rem,4vw,3rem)}
.conf__head .h2{margin-top:.9rem; max-width:20ch}
.conf__grid{max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem}
.conf__card{
  margin:0; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18);
  border-radius:20px; padding:1.6rem 1.5rem; backdrop-filter:blur(4px);
}
.conf__stars{color:var(--yellow); font-size:1.05rem; letter-spacing:.12em; margin-bottom:.8rem}
.conf__card blockquote{margin:0; font-size:1.04rem; line-height:1.55; color:#f3f6ff}
.conf__card figcaption{display:flex; align-items:center; gap:.7rem; margin-top:1.3rem}
.conf__av{
  flex:none; width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:var(--yellow); color:var(--fg); font-family:var(--font-display); font-weight:800; font-size:.9rem;
}
.conf__card figcaption strong{display:block; font-size:.95rem; color:#fff}
.conf__card figcaption span{font-size:.8rem; color:#dbe5fb}

.conf__badges{
  max-width:var(--maxw); margin:clamp(1.8rem,3vw,2.6rem) auto 0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:.8rem;
}
.conf__badges li{
  display:flex; align-items:center; gap:.6rem; font-weight:600; font-size:.92rem; color:#16306E;
  background:#fff; padding:.65rem 1rem; border-radius:999px;
}
.conf__bico{flex:none; display:grid; place-items:center}

/* ---------- Ubicación ---------- */
.ubi{max-width:var(--maxw); margin:0 auto}
.ubi__head{max-width:60ch; margin-bottom:clamp(2rem,4vw,3rem)}
.ubi__head .h2{margin-top:.9rem; max-width:20ch}
.ubi__cols{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start}
.ubi__list{list-style:none; margin:0 0 2rem; padding:0; display:flex; flex-direction:column; gap:0}
.ubi__list li{padding:1rem 0; border-bottom:1px solid var(--line); font-size:1.02rem; color:var(--fg)}
.ubi__list li:first-child{padding-top:0}
.ubi__list span{display:inline-block; min-width:5.2rem; font-weight:700; color:var(--accent-deep); font-size:.84rem; letter-spacing:.04em; text-transform:uppercase}

.ubi__hours{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:1.5rem 1.6rem}
.ubi__hours h3{font-size:1.2rem; margin-bottom:.9rem}
.ubi__hours ul{list-style:none; margin:0; padding:0}
.ubi__hours li{display:flex; justify-content:space-between; align-items:baseline; padding:.55rem 0; border-bottom:1px solid var(--line-soft)}
.ubi__hours li:last-child{border-bottom:0}
.ubi__hours li span{color:var(--muted)}
.ubi__hours li strong{font-family:var(--font-display); font-weight:700; color:var(--fg)}
.ubi__hoursnote{margin-top:.9rem; font-size:.86rem; color:var(--muted)}

.ubi__map{margin:0; border-radius:22px; overflow:hidden; border:1px solid var(--line); box-shadow:0 40px 64px -42px rgba(31,42,68,.4)}
.ubi__map svg{aspect-ratio:6/5; width:100%; height:auto}
.ubi__cap{padding:.9rem 1.1rem; background:#fff; font-size:.85rem; color:var(--muted); display:flex; align-items:center; gap:.45rem; border-top:1px solid var(--line)}
.ubi__cap::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--accent)}

/* ---------- Contacto ---------- */
.contact{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2rem,5vw,4.5rem); align-items:start;
}
.contact__info .h2{margin-top:.9rem; max-width:18ch}
.contact__lead{margin-top:1.1rem; color:var(--muted); font-size:1.08rem; max-width:42ch}
.contact__wa{
  display:inline-flex; align-items:center; gap:.6rem; margin-top:1.6rem;
  background:#25D366; color:#0a3d1c; font-family:var(--font-display); font-weight:700; font-size:1rem;
  padding:.85rem 1.4rem; border-radius:999px;
  box-shadow:0 16px 30px -16px rgba(37,211,102,.7);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.contact__wa:hover{transform:translateY(-3px); box-shadow:0 24px 40px -18px rgba(37,211,102,.85)}
.contact__points{list-style:none; margin:2rem 0 0; padding:0; display:flex; flex-direction:column; gap:.7rem}
.contact__points li{display:flex; align-items:center; gap:.7rem; font-size:1rem; color:var(--fg)}
.contact__points li::before{
  content:""; flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--accent)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12l4.5 4.5L19 7' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    center/14px no-repeat;
}

.form{
  background:#fff; border:1px solid var(--line); border-radius:24px;
  padding:clamp(1.5rem,4vw,2.4rem);
  box-shadow:0 44px 70px -44px rgba(31,42,68,.4);
}
.field{display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.1rem}
.field--row{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:0}
.field--row .field{margin-bottom:1.1rem}
.field label{font-weight:600; font-size:.88rem; color:var(--fg)}
.field input,.field select,.field textarea{
  font-family:var(--font-body); font-size:1rem; color:var(--fg);
  background:var(--bg); border:1.5px solid var(--line); border-radius:12px;
  padding:.8rem .95rem; width:100%; transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:#767e93}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--accent); background:#fff;
  box-shadow:0 0 0 4px rgba(46,91,214,.16);
}
.field textarea{resize:vertical; min-height:96px}
.field select{appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='%23234AB0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right .85rem center; background-size:18px; padding-right:2.4rem;
}
.form__send{width:100%; margin-top:.6rem}
.form__msg{margin-top:.9rem; font-weight:600; font-size:.95rem; color:var(--accent-deep); min-height:1.2em}
.form__msg.is-error{color:#b3261e}
.form__demo{margin-top:.7rem; font-size:.78rem; color:var(--muted); text-align:center}

/* =========================================================
   CTA Digital Bee
   ========================================================= */
.db{padding:clamp(3.5rem,7vw,6rem) var(--pad); background:var(--fg); color:#fff; text-align:center}
.db__inner{max-width:640px; margin:0 auto; display:flex; flex-direction:column; align-items:center}
.db__kicker{
  font-family:var(--font-body); font-weight:700; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--yellow);
}
.db__title{margin:1rem 0 0; font-size:clamp(2rem,1.4rem + 3vw,3.2rem); letter-spacing:-.03em; color:#fff}
.db__text{margin:1.2rem 0 0; color:#c7cbd8; max-width:48ch; font-size:1.06rem}
.db__btn{
  margin-top:2rem; display:inline-flex; align-items:center; gap:.5rem;
  background:#25D366; color:#0a3d1c; font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  padding:1rem 2rem; border-radius:999px; box-shadow:0 20px 40px -18px rgba(37,211,102,.7);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.db__btn:hover{transform:translateY(-3px); box-shadow:0 28px 50px -20px rgba(37,211,102,.85)}

/* =========================================================
   Footer
   ========================================================= */
.foot{background:#16203a; color:#c7cbd8; padding:clamp(2.5rem,5vw,3.5rem) var(--pad) 2rem}
.foot__top{max-width:var(--maxw); margin:0 auto; display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1.2rem}
.foot__brand{font-family:var(--font-display); font-weight:800; font-size:1.5rem; color:#fff}
.foot__tag{font-size:.92rem; color:#9aa3bb}
.foot__cols{
  max-width:var(--maxw); margin:1.6rem auto 0; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1.4rem;
}
.foot__nav{display:flex; flex-wrap:wrap; gap:.4rem 1.3rem}
.foot__nav a{font-weight:600; font-size:.95rem; color:#c7cbd8; transition:color .25s var(--ease)}
.foot__nav a:hover{color:#fff}
.foot__addr p{font-size:.9rem; color:#9aa3bb; line-height:1.7}
.foot__fine{max-width:var(--maxw); margin:1.8rem auto 0; font-size:.8rem; color:#7e88a3}

/* =========================================================
   WhatsApp flotante
   ========================================================= */
.wafloat{
  position:fixed; right:clamp(1rem,3vw,1.6rem); bottom:clamp(1rem,3vw,1.6rem); z-index:160;
  width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  background:#25D366; color:#fff;
  box-shadow:0 16px 34px -12px rgba(37,211,102,.8);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.wafloat::after{
  content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid rgba(37,211,102,.45);
  animation:waPulse 2.4s var(--ease) infinite;
}
.wafloat:hover{transform:translateY(-3px) scale(1.05); box-shadow:0 22px 42px -14px rgba(37,211,102,.9)}
@keyframes waPulse{0%{transform:scale(.92); opacity:.8} 70%{transform:scale(1.25); opacity:0} 100%{opacity:0}}
@media (prefers-reduced-motion:reduce){ .wafloat::after{animation:none} }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1000px){
  .clases__grid{grid-template-columns:repeat(2,1fr)}
  .conf__grid{grid-template-columns:1fr; max-width:560px}
}

@media (max-width:880px){
  .nav__links{display:none}
  .nav__toggle{display:flex}
  .hero__inner{grid-template-columns:1fr; gap:2.5rem}
  .hero__art{order:-1; max-width:420px; margin:0 auto}
  .hero__artcard{transform:none}
  .about__body{grid-template-columns:1fr}
  .ubi__cols{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .precios__list{grid-template-columns:1fr}
}

@media (max-width:540px){
  :root{--pad:1.15rem}
  .hero__stats{gap:1.2rem 1.8rem}
  .hero__stats strong{font-size:1.4rem}
  .clases__grid{grid-template-columns:1fr}
  .field--row{grid-template-columns:1fr; gap:0}
  .hero__scroll{display:none}
  .h2{max-width:none}
}