/* =========================================================
   Raíz Calma — Psicología y terapia, Valdivia
   One-page terroso · Digital Bee (demo)
   Paleta: bg #FBF6EE · surface #F3E9DA · fg #3A332B
           muted #7A6F60 · accent #A8643C · line #E4D7C4
   Accent texto chico sobre surface: #8A4E2C (AA)
   ========================================================= */

:root{
  --bg:#FBF6EE;
  --surface:#F3E9DA;
  --fg:#3A332B;
  --muted:#6F6354;  /* taupe AA: 5.44:1 sobre bg, 4.87:1 sobre surface */
  --accent:#A8643C;
  --accent-deep:#8A4E2C;   /* terracota oscuro: texto chico sobre crema/surface */
  --line:#E4D7C4;
  --wa:#25D366;

  --shadow-soft:0 18px 48px -28px rgba(58,51,43,.34);
  --shadow-card:0 1px 0 rgba(255,255,255,.55) inset, 0 22px 50px -34px rgba(58,51,43,.4);

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.16,.84,.44,1);

  --wrap:1140px;
  --gut:clamp(1.25rem,5vw,3rem);

  --r-sm:14px;
  --r-md:20px;
  --r-lg:30px;

  --font-display:"Fraunces", Georgia, "Times New Roman", serif;
  --font-body:"Hanken Grotesk", system-ui, -apple-system, sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:clamp(1rem,.97rem + .2vw,1.0625rem);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0;}
ul,ol{list-style:none;padding:0;}
strong{font-weight:600;color:var(--fg);}

/* ---------- Foco visible ---------- */
:focus-visible{
  outline:2.5px solid var(--accent-deep);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- Layout ---------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.wrap--narrow{max-width:760px;}

/* =========================================================
   Barra DEMO
   ========================================================= */
.demobar{
  position:fixed;
  inset:0 0 auto 0;
  z-index:90;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  padding:0 1rem;
  background:var(--fg);
  color:var(--bg);
  font-size:.72rem;
  letter-spacing:.02em;
}
.demobar__dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(168,100,60,.22);
  flex:none;
}
.demobar__txt{
  opacity:.92;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.demobar__cta{
  flex:none;
  font-weight:600;
  color:var(--bg);
  border-bottom:1px solid rgba(251,246,238,.45);
  padding-bottom:1px;
  transition:opacity .25s var(--ease);
}
.demobar__cta:hover{opacity:.7;}
@media (max-width:640px){
  .demobar{font-size:.66rem;gap:.45rem;}
}

/* =========================================================
   Navegación
   ========================================================= */
.nav{
  position:sticky;
  top:34px;
  z-index:80;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.nav__inner{
  max-width:var(--wrap);
  margin-inline:auto;
  padding:.85rem var(--gut);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem;
}
.nav__brand{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  flex:none;
}
.nav__mark{
  width:34px;height:34px;
  display:grid;place-items:center;
  color:var(--accent);
  background:var(--surface);
  border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--line);
}
.nav__mark svg{width:22px;height:22px;}
.nav__name{
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.2rem;
  letter-spacing:.005em;
  color:var(--fg);
}
.nav__menu{
  display:flex;
  align-items:center;
  gap:.35rem;
}
.nav__link{
  padding:.5rem .8rem;
  border-radius:999px;
  font-size:.92rem;
  font-weight:500;
  color:var(--muted);
  transition:color .25s var(--ease), background .25s var(--ease);
}
.nav__link:hover{ color:var(--fg); background:color-mix(in srgb,var(--surface) 70%,transparent); }
.nav__link--cta{
  color:var(--bg);
  background:var(--accent-deep);
  padding-inline:1.15rem;
}
.nav__link--cta:hover{ color:var(--bg); background:#763F22; }
@media (max-width:860px){
  .nav__menu{gap:.1rem;}
  .nav__link{padding:.45rem .55rem;font-size:.85rem;}
}
@media (max-width:640px){
  .nav__link:not(.nav__link--cta){display:none;}
  .nav__name{font-size:1.08rem;}
}

/* =========================================================
   Botones
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.95rem 1.6rem;
  border-radius:999px;
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:600;
  letter-spacing:.005em;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .4s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .4s var(--ease);
  will-change:transform;
}
.btn--solid{
  background:var(--accent-deep);
  color:var(--bg);
  box-shadow:var(--shadow-soft);
}
.btn--solid:hover{ background:#763F22; transform:translateY(-2px); box-shadow:0 24px 50px -24px rgba(138,78,44,.55); }
.btn--solid:active{ transform:translateY(0); }
.btn--ghost{
  background:transparent;
  color:var(--accent-deep);
  border-color:var(--accent);
}
.btn--ghost:hover{ background:color-mix(in srgb,var(--accent) 12%, transparent); transform:translateY(-2px); }

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-block:clamp(5rem,12vh,8rem);
  overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__mesh{
  position:absolute; inset:-10%;
  background:
    radial-gradient(60% 55% at 12% 18%, color-mix(in srgb,var(--surface) 90%, #fff) 0%, transparent 60%),
    radial-gradient(55% 60% at 88% 82%, color-mix(in srgb,var(--accent) 16%, transparent) 0%, transparent 58%),
    radial-gradient(70% 65% at 78% 8%, color-mix(in srgb,var(--surface) 80%, transparent) 0%, transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb,var(--surface) 55%, var(--bg)) 100%);
}
.hero__leaves{ position:absolute; inset:0; width:100%; height:100%; opacity:.9; }

.hero__inner{
  position:relative;
  z-index:2;
  max-width:var(--wrap);
  width:100%;
  margin-inline:auto;
  padding-inline:var(--gut);
}
.hero__eyebrow{
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-deep);
  margin-bottom:1.4rem;
}
.hero__title{
  font-family:var(--font-display);
  font-weight:340;
  font-size:clamp(2.7rem,7.4vw,5.6rem);
  line-height:.98;
  letter-spacing:-.02em;
  color:var(--fg);
  max-width:14ch;
  margin-bottom:1.6rem;
}
.hero__line{ display:block; overflow:hidden; }
.hero__word{ display:inline-block; }
.hero__word--italic{
  font-style:italic;
  font-weight:360;
  color:var(--accent-deep);
}
.hero__sub{
  font-size:clamp(1.06rem,.98rem + .6vw,1.3rem);
  line-height:1.55;
  color:var(--muted);
  max-width:46ch;
  margin-bottom:2.4rem;
}
.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.9rem;
  margin-bottom:2.6rem;
}
.hero__chips{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}
.hero__chip{
  font-size:.85rem;
  font-weight:500;
  color:var(--fg);
  background:color-mix(in srgb,var(--surface) 78%, var(--bg));
  border:1px solid var(--line);
  padding:.4rem .9rem;
  border-radius:999px;
}

.hero__breath{
  position:absolute;
  right:clamp(1.25rem,5vw,3.4rem);
  bottom:2rem;
  z-index:2;
  display:flex;
  align-items:center;
  gap:.6rem;
  color:var(--muted);
}
.hero__breathword{
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.hero__breathdot{
  width:12px;height:12px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%, transparent);
  animation:breathe 6s var(--ease-soft) infinite;
}
@keyframes breathe{
  0%,100%{ transform:scale(.7); box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 40%, transparent); }
  50%{ transform:scale(1); box-shadow:0 0 0 14px color-mix(in srgb,var(--accent) 0%, transparent); }
}
@media (max-width:640px){ .hero__breath{display:none;} }

/* =========================================================
   Sección genérica de cabecera
   ========================================================= */
.about,.services,.process,.trust,.visit,.contact{
  padding-block:clamp(4.5rem,10vh,8rem);
  position:relative;
}

.about__eyebrow,.services__eyebrow,.process__eyebrow,.visit__eyebrow,.contact__eyebrow{
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-deep);
  margin-bottom:1rem;
}

/* =========================================================
   Sobre / Enfoque
   ========================================================= */
.about{ background:var(--bg); }
.about__grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:clamp(2.5rem,6vw,5.5rem);
  align-items:start;
}
.about__title{
  font-family:var(--font-display);
  font-weight:360;
  font-size:clamp(2rem,4vw,3.1rem);
  line-height:1.04;
  letter-spacing:-.015em;
  margin-bottom:1.3rem;
}
.about__lead{
  font-size:1.12rem;
  color:var(--muted);
  line-height:1.6;
}
.about__intro{ position:sticky; top:120px; }
.about__p{ margin-bottom:1.2rem; }
.about__values{
  margin-top:2rem;
  display:grid;
  gap:1rem;
}
.about__value{
  display:flex;
  align-items:flex-start;
  gap:.95rem;
  padding:1.05rem 1.2rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
}
.about__valicon{
  flex:none;
  width:38px;height:38px;
  display:grid;place-items:center;
  border-radius:12px;
  background:var(--bg);
  color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--line);
}
.about__valicon svg{width:22px;height:22px;}
@media (max-width:860px){
  .about__grid{ grid-template-columns:1fr; }
  .about__intro{ position:static; }
}

/* =========================================================
   Servicios
   ========================================================= */
.services{ background:var(--surface); }
.services__head{
  max-width:720px;
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.services__title{
  font-family:var(--font-display);
  font-weight:360;
  font-size:clamp(2rem,4.2vw,3.2rem);
  line-height:1.04;
  letter-spacing:-.015em;
  margin-bottom:1rem;
}
.services__intro{ color:var(--muted); font-size:1.08rem; max-width:56ch; }

.services__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.25rem;
}
.card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:1.8rem 1.7rem 1.6rem;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
  overflow:hidden;
}
.card::after{
  content:"";
  position:absolute;
  inset:auto -30% -40% auto;
  width:62%;height:62%;
  background:radial-gradient(circle at 70% 70%, color-mix(in srgb,var(--accent) 16%, transparent) 0%, transparent 70%);
  opacity:0;
  transition:opacity .5s var(--ease);
  pointer-events:none;
}
.card:hover{
  transform:translateY(-6px);
  border-color:color-mix(in srgb,var(--accent) 40%, var(--line));
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 30px 60px -34px rgba(138,78,44,.45);
}
.card:hover::after{ opacity:1; }
.card__icon{
  width:50px;height:50px;
  display:grid;place-items:center;
  border-radius:16px;
  background:var(--surface);
  color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--line);
  margin-bottom:1.2rem;
}
.card__icon svg{width:28px;height:28px;}
.card__title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.4rem;
  letter-spacing:-.01em;
  margin-bottom:.55rem;
}
.card__text{
  color:var(--muted);
  font-size:.98rem;
  line-height:1.55;
  margin-bottom:1.2rem;
  flex:1;
}
.card__price{
  font-size:.9rem;
  font-weight:600;
  color:var(--accent-deep);
  padding-top:.85rem;
  border-top:1px solid var(--line);
}
.services__note{
  margin-top:2rem;
  text-align:center;
  color:var(--muted);
  font-size:.96rem;
}
.services__note p{ max-width:60ch; margin-inline:auto; }
@media (max-width:920px){ .services__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .services__grid{ grid-template-columns:1fr; } }

/* =========================================================
   Proceso
   ========================================================= */
.process{ background:var(--bg); }
.process__head{ max-width:680px; margin-bottom:clamp(2.2rem,5vw,3.4rem); }
.process__title{
  font-family:var(--font-display);
  font-weight:360;
  font-size:clamp(1.9rem,4vw,3rem);
  line-height:1.05;
  letter-spacing:-.015em;
}
.process__steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
  counter-reset:step;
}
.process__step{
  position:relative;
  padding:2rem 1.7rem 1.8rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
}
.process__num{
  font-family:var(--font-display);
  font-weight:300;
  font-size:2.6rem;
  font-style:italic;
  color:var(--accent);
  line-height:1;
  display:block;
  margin-bottom:1rem;
  opacity:.9;
}
.process__steptitle{
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.35rem;
  margin-bottom:.55rem;
}
.process__steptext{ color:var(--muted); font-size:.98rem; line-height:1.55; }
@media (max-width:780px){ .process__steps{ grid-template-columns:1fr; } }

/* =========================================================
   Confianza
   ========================================================= */
.trust{
  background:
    radial-gradient(80% 120% at 18% 0%, color-mix(in srgb,var(--accent) 12%, transparent) 0%, transparent 55%),
    var(--surface);
}
.trust__inner{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(2.5rem,6vw,5rem);
  align-items:center;
}
.trust__quote{ position:relative; padding-left:1.5rem; }
.trust__mark{
  position:absolute;
  left:-.4rem;top:-1.6rem;
  font-family:var(--font-display);
  font-size:5rem;
  line-height:1;
  color:var(--accent);
  opacity:.55;
}
.trust__text{
  font-family:var(--font-display);
  font-weight:340;
  font-size:clamp(1.5rem,2.8vw,2.1rem);
  line-height:1.28;
  letter-spacing:-.01em;
  color:var(--fg);
  margin-bottom:1.2rem;
}
.trust__who{ font-size:.95rem; font-weight:500; color:var(--muted); }
.trust__stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.trust__stat{
  background:var(--bg);
  padding:1.6rem 1.4rem;
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.trust__num{
  font-family:var(--font-display);
  font-weight:400;
  font-size:2.2rem;
  line-height:1;
  color:var(--accent-deep);
}
.trust__lbl{ font-size:.86rem; color:var(--muted); line-height:1.4; }
@media (max-width:860px){
  .trust__inner{ grid-template-columns:1fr; }
}
@media (max-width:420px){
  .trust__stats{ grid-template-columns:1fr; }
}

/* =========================================================
   Consulta / Ubicación
   ========================================================= */
.visit{ background:var(--bg); }
.visit__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,6vw,4.5rem);
  align-items:center;
}
.visit__title{
  font-family:var(--font-display);
  font-weight:360;
  font-size:clamp(1.9rem,3.6vw,2.9rem);
  line-height:1.06;
  letter-spacing:-.015em;
  margin-bottom:1.1rem;
}
.visit__lead{ color:var(--muted); font-size:1.06rem; margin-bottom:2rem; max-width:48ch; }
.visit__details{ display:grid; gap:1.2rem; }
.visit__row{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:1rem;
  padding-bottom:1.2rem;
  border-bottom:1px solid var(--line);
}
.visit__row:last-child{ border-bottom:0; padding-bottom:0; }
.visit__dt{
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent-deep);
  padding-top:.15rem;
}
.visit__dd{ color:var(--fg); font-size:1rem; line-height:1.5; }

.visit__map{
  position:relative;
  aspect-ratio:4/3.4;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  background:var(--surface);
}
.visit__mapmesh{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 60% at 30% 25%, color-mix(in srgb,var(--surface) 92%, #fff) 0%, transparent 60%),
    radial-gradient(70% 70% at 80% 90%, color-mix(in srgb,var(--accent) 14%, transparent) 0%, transparent 60%),
    var(--surface);
}
.visit__mapart{ position:absolute; inset:0; width:100%; height:100%; }
.visit__pin{
  position:absolute;
  left:50%;top:46%;
  transform:translate(-50%,-50%);
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem .95rem .5rem .7rem;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:999px;
  font-size:.88rem;
  font-weight:600;
  color:var(--fg);
  box-shadow:0 14px 30px -18px rgba(58,51,43,.5);
}
.visit__pin svg{ width:20px;height:20px; }
@media (max-width:860px){
  .visit__grid{ grid-template-columns:1fr; }
  .visit__map{ order:-1; aspect-ratio:16/10; }
}
@media (max-width:480px){
  .visit__row{ grid-template-columns:1fr; gap:.25rem; }
}

/* =========================================================
   Contacto / Formulario
   ========================================================= */
.contact{ background:var(--surface); }
.contact__grid{
  display:grid;
  grid-template-columns:0.92fr 1.08fr;
  gap:clamp(2.5rem,6vw,4.5rem);
  align-items:start;
}
.contact__intro{ position:sticky; top:120px; }
.contact__title{
  font-family:var(--font-display);
  font-weight:360;
  font-size:clamp(2rem,4vw,3.1rem);
  line-height:1.04;
  letter-spacing:-.015em;
  margin-bottom:1.1rem;
}
.contact__lead{ color:var(--muted); font-size:1.08rem; margin-bottom:1.5rem; max-width:48ch; }
.contact__assure{
  font-size:.92rem;
  color:var(--muted);
  background:var(--bg);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:var(--r-sm);
  padding:.9rem 1.1rem;
  max-width:52ch;
}

.form{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2.2rem);
  box-shadow:var(--shadow-card);
}
.form__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
.form__field{ margin-bottom:1.1rem; display:flex; flex-direction:column; }
.form__label{
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--fg);
  margin-bottom:.4rem;
}
.form__input{
  font-family:var(--font-body);
  font-size:1rem;
  color:var(--fg);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:.8rem .95rem;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  width:100%;
}
.form__input::placeholder{ color:color-mix(in srgb,var(--muted) 78%, transparent); }
.form__input:focus{
  outline:none;
  background:var(--bg);
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%, transparent);
}
.form__select{
  appearance:none;
  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='%238A4E2C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  padding-right:2.6rem;
  cursor:pointer;
}
.form__textarea{ resize:vertical; min-height:110px; line-height:1.5; }
.form__submit{ width:100%; margin-top:.4rem; }
.form__msg{
  margin-top:1rem;
  font-size:.95rem;
  font-weight:500;
  padding:.85rem 1rem;
  border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--accent) 12%, var(--bg));
  border:1px solid color-mix(in srgb,var(--accent) 35%, var(--line));
  color:var(--accent-deep);
}
.form__fine{
  margin-top:.9rem;
  font-size:.8rem;
  color:var(--muted);
  text-align:center;
}
@media (max-width:860px){
  .contact__grid{ grid-template-columns:1fr; }
  .contact__intro{ position:static; }
}
@media (max-width:480px){
  .form__row{ grid-template-columns:1fr; gap:0; }
}

/* =========================================================
   Regla / CTA Digital Bee
   ========================================================= */
.rule{
  border:0;
  height:1px;
  background:var(--line);
  margin:0;
}
.db{
  background:var(--fg);
  color:var(--bg);
  padding-block:clamp(4rem,9vh,6.5rem);
  position:relative;
  overflow:hidden;
}
.db::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(70% 90% at 85% 110%, color-mix(in srgb,var(--accent) 38%, transparent) 0%, transparent 60%);
  pointer-events:none;
}
.db__inner{ position:relative; text-align:center; }
.db__kicker{
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--accent) 60%, var(--bg));
  margin-bottom:1rem;
}
.db__title{
  font-family:var(--font-display);
  font-weight:360;
  font-size:clamp(2rem,4.6vw,3.2rem);
  line-height:1.05;
  letter-spacing:-.015em;
  margin-bottom:1.1rem;
}
.db__text{
  color:color-mix(in srgb,var(--bg) 78%, var(--muted));
  font-size:1.08rem;
  max-width:54ch;
  margin:0 auto 2rem;
}
.db__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:1rem 2rem;
  border-radius:999px;
  background:var(--wa);
  color:#06351c;
  font-weight:700;
  font-size:1.02rem;
  letter-spacing:.005em;
  box-shadow:0 18px 40px -20px rgba(37,211,102,.6);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .3s var(--ease);
}
.db__btn:hover{ transform:translateY(-3px); background:#2bdd6f; box-shadow:0 24px 48px -20px rgba(37,211,102,.7); }
.db__btn:active{ transform:translateY(0); }

/* =========================================================
   Footer
   ========================================================= */
.foot{ background:var(--bg); padding-block:clamp(3rem,6vh,4.5rem) 2rem; }
.foot__grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:2rem;
  padding-bottom:2.5rem;
  border-bottom:1px solid var(--line);
}
.foot__brand{
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.5rem;
  margin-bottom:.4rem;
}
.foot__tag{ color:var(--muted); font-style:italic; font-family:var(--font-display); font-size:1.02rem; }
.foot__h{
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent-deep);
  margin-bottom:.7rem;
}
.foot__line{ color:var(--muted); font-size:.95rem; line-height:1.7; }
.foot__base{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  padding-top:1.6rem;
}
.foot__fine{ color:var(--muted); font-size:.85rem; }
.foot__top{
  font-size:.85rem;
  font-weight:600;
  color:var(--accent-deep);
  transition:opacity .25s var(--ease);
}
.foot__top:hover{ opacity:.65; }
@media (max-width:760px){
  .foot__grid{ grid-template-columns:1fr 1fr; gap:1.6rem; }
}
@media (max-width:440px){
  .foot__grid{ grid-template-columns:1fr; }
}

/* =========================================================
   WhatsApp flotante
   ========================================================= */
.wafloat{
  position:fixed;
  right:clamp(1rem,3vw,1.6rem);
  bottom:clamp(1rem,3vw,1.6rem);
  z-index:85;
  width:56px;height:56px;
  display:grid;place-items:center;
  background:var(--wa);
  border-radius:50%;
  box-shadow:0 14px 34px -10px rgba(37,211,102,.55);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.wafloat:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 20px 40px -10px rgba(37,211,102,.65); }
.wafloat:active{ transform:scale(.96); }
.wafloat__svg{ width:28px;height:28px; fill:#fff; }

/* =========================================================
   Reveals (FOUC-safe: ocultos solo bajo .js-on)
   ========================================================= */
.js-on .reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  will-change:opacity, transform;
}
.js-on .reveal.is-in{ opacity:1; transform:none; }

.js-on .reveal-now{
  opacity:0;
  transform:translateY(18px);
  animation:rise .85s var(--ease) forwards;
}
.js-on .hero__eyebrow.reveal-now{ animation-delay:.05s; }
.js-on .hero__sub.reveal-now{ animation-delay:.55s; }
.js-on .hero__actions.reveal-now{ animation-delay:.7s; }
.js-on .hero__chips.reveal-now{ animation-delay:.85s; }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* Hero words: ocultos bajo js-on, revelados por animación */
.js-on .hero__word{
  transform:translateY(110%);
  animation:wordUp 1s var(--ease) forwards;
}
.js-on .hero__line:nth-child(1) .hero__word{ animation-delay:.15s; }
.js-on .hero__line:nth-child(2) .hero__word{ animation-delay:.32s; }
@keyframes wordUp{ to{ transform:translateY(0); } }

/* ---------- Reduce motion: todo visible ---------- */
@media (prefers-reduced-motion:reduce){
  .js-on .reveal,
  .js-on .reveal-now,
  .js-on .hero__word{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
  }
  .hero__breathdot{ animation:none; }
  .btn,.card,.db__btn,.wafloat{ transition:none; }
}