/* =========================================================================
   WhiteMoon · Reformas, Electricidad y Fontanería — demo premium
   Design system WhiteMoon: morado #7c4dff sobre #08080d / #0e0e16 / #13131e
   Tipografía: Sora (títulos y texto) + Space Grotesk (etiquetas técnicas)

   Contrastes medidos sobre los tres fondos (bg / bg-2 / bg-3):
     --text  #f0f0f5 → 17.59 / 16.91 / 16.22
     --text-2 #c8c8d8 → 12.09 / 11.63 / 11.15
     --muted #8888a0 →  5.78 /  5.56 /  5.33
     --p2    #9d70ff →  5.90 /  5.67 /  5.44
     --g     #00d4aa → 10.47 / 10.06 /  9.65
     --steel #9fb3c8 →  9.28 /  8.93 /  8.56
   --p (#7c4dff) NO se usa nunca como color de texto: da 3.83–4.15:1.
   Se reserva a iconos, bordes, fondos y al botón primario con texto #fff (4.81:1).
   ========================================================================= */

/* =========================================================================
   TIPOGRAFÍA — Sora + Space Grotesk servidas desde assets/fonts
   Variable fonts (SIL Open Font License 1.1), un fichero por subconjunto.
   Autoalojadas para quitar dos round trips a fonts.googleapis.com /
   fonts.gstatic.com y, sobre todo, para que el swap de fuente deje de
   reflotar el hero: con la fuente precargada el texto se pinta ya con Sora
   (el swap tardío llegó a costar 0,33 de CLS en móvil).
   ========================================================================= */
@font-face{
  font-family:"Sora"; font-style:normal; font-weight:200 700; font-display:swap;
  src:url("../fonts/sora-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Sora"; font-style:normal; font-weight:200 700; font-display:swap;
  src:url("../fonts/sora-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Space Grotesk"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("../fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Space Grotesk"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("../fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --bg:      #08080d;
  --bg-2:    #0e0e16;
  --bg-3:    #13131e;
  --line:    rgba(159,179,200,.14);
  --line-2:  rgba(159,179,200,.28);
  --p:       #7c4dff;   /* primario · morado WhiteMoon (intocable) */
  --p2:      #9d70ff;   /* morado accesible para texto */
  --p-dk:    #5c35cc;
  --g:       #00d4aa;   /* verde WhiteMoon */
  --steel:   #9fb3c8;
  --text:    #f0f0f5;
  --text-2:  #c8c8d8;
  --muted:   #8888a0;

  --radius:  16px;
  --radius-s: 10px;
  --maxw:    1200px;
  --gutter:  clamp(20px, 5vw, 64px);

  --ease:    cubic-bezier(.22,.61,.36,1);
  --shadow-p: 0 0 0 1px rgba(124,77,255,.25), 0 18px 50px -18px rgba(124,77,255,.35);

  --f-sans: "Sora", system-ui, -apple-system, sans-serif;
  --f-mono: "Space Grotesk", ui-monospace, monospace;
}

*,*::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;
  font-family:var(--f-sans);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
svg{ display:block; }

:focus-visible{ outline:2px solid var(--p2); outline-offset:3px; border-radius:4px; }

/* --- ambiente de fondo (mancha de luz morada) --- */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(720px 480px at 78% -6%, rgba(124,77,255,.10), transparent 60%),
    radial-gradient(620px 520px at 4% 12%, rgba(159,179,200,.06), transparent 60%);
}

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); position:relative; z-index:1; }
section{ position:relative; z-index:1; }

/* etiqueta técnica reutilizable (eyebrow) */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--steel); font-weight:500;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--p);
  box-shadow:0 0 8px var(--p);
}
.eyebrow--center::before{ display:none; }

.section-head{ max-width:660px; margin-bottom:clamp(36px,5vw,60px); }
.section-head h2{
  font-size:clamp(28px,4.4vw,46px); line-height:1.08; letter-spacing:-.02em;
  margin:16px 0 0; font-weight:700;
}
.section-head p{ color:var(--muted); margin:16px 0 0; font-size:clamp(15px,1.6vw,17px); }

/* botones */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 24px; border-radius:var(--radius-s); font-weight:600; font-size:15px;
  border:1px solid transparent; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; }
/* texto #fff sobre --p: 4.81:1 (AA). Nunca texto oscuro sobre el morado. */
.btn--primary{ background:var(--p); color:#fff; box-shadow:var(--shadow-p); }
.btn--primary:hover{ background:var(--p-dk); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--text); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--p); color:var(--p2); transform:translateY(-2px); }
.btn--sm{ padding:10px 18px; font-size:14px; }

/* =========================================================================
   TOPBAR
   ========================================================================= */
.topbar{
  border-bottom:1px solid var(--line);
  font-size:13px; color:var(--muted);
  background:rgba(8,8,13,.6); backdrop-filter:blur(8px);
  position:relative; z-index:40;
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:42px; flex-wrap:wrap; }
.topbar__info{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.topbar__info a, .topbar__info span{ display:inline-flex; align-items:center; gap:8px; }
.topbar__info a:hover{ color:var(--text); }
.topbar__info svg{ width:15px; height:15px; color:var(--p); }
.topbar__social{ display:flex; align-items:center; gap:14px; }
.topbar__social a{ color:var(--muted); transition:color .2s var(--ease); }
.topbar__social a:hover{ color:var(--p2); }
.topbar__social svg{ width:16px; height:16px; }

/* =========================================================================
   HEADER / NAV
   ========================================================================= */
.header{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--line);
  background:rgba(8,8,13,.72); backdrop-filter:blur(14px);
  transition:border-color .3s var(--ease);
}
.header.scrolled{ border-color:var(--line-2); background:rgba(8,8,13,.92); }
.header .wrap{ display:flex; align-items:center; justify-content:space-between; min-height:70px; gap:20px; }

.brand{ display:inline-flex; align-items:center; gap:11px; font-weight:700; letter-spacing:-.01em; font-size:18px; }
.brand__logo{ height:38px; width:auto; flex:none; display:block; border-radius:8px; }
.brand small{ display:block; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--steel); font-weight:500; line-height:1; margin-top:3px; }

.nav{ display:flex; align-items:center; gap:34px; }
.nav a{ font-size:15px; color:var(--text-2); font-weight:500; position:relative; transition:color .2s var(--ease); }
.nav a::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--p); transition:width .28s var(--ease); }
.nav a:hover{ color:var(--text); }
.nav a:hover::after{ width:100%; }

.header__cta{ display:flex; align-items:center; gap:14px; }

.burger{ display:none; width:44px; height:44px; border:1px solid var(--line-2); border-radius:10px; background:transparent; align-items:center; justify-content:center; }
.burger svg{ width:22px; height:22px; color:var(--text); }

/* menú móvil */
.mobile-nav{
  position:fixed; inset:0; z-index:60; background:rgba(8,8,13,.98); backdrop-filter:blur(6px);
  display:flex; flex-direction:column; padding:26px var(--gutter);
  transform:translateX(100%); transition:transform .4s var(--ease); visibility:hidden;
  overflow-y:auto;
}
.mobile-nav.open{ transform:translateX(0); visibility:visible; }
.mobile-nav__top{ display:flex; align-items:center; justify-content:space-between; }
.mobile-nav__close{ width:44px; height:44px; border:1px solid var(--line-2); border-radius:10px; background:transparent; color:var(--text); }
.mobile-nav nav{ display:flex; flex-direction:column; gap:6px; margin-top:40px; }
.mobile-nav nav a{ font-size:24px; font-weight:600; padding:14px 0; border-bottom:1px solid var(--line); }
.mobile-nav .btn{ margin-top:28px; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero{ position:relative; overflow:hidden; padding:clamp(70px,11vw,130px) 0 clamp(60px,8vw,100px); }
#circuit{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.9; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 40%, rgba(8,8,13,.55) 100%);
}
.hero .wrap{ position:relative; z-index:2; }
.hero__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,5vw,64px); align-items:center; }

.hero__ghost{
  position:absolute; right:-2%; top:-8%; z-index:0; pointer-events:none;
  font-family:var(--f-mono); font-weight:700; font-size:clamp(120px,20vw,320px);
  color:rgba(159,179,200,.045); line-height:.8; letter-spacing:-.04em; user-select:none;
}
.hero h1{
  font-size:clamp(38px,6.4vw,74px); line-height:1.02; letter-spacing:-.03em; margin:22px 0 0; font-weight:700;
}
.hero h1 .thin{ font-weight:200; color:var(--text-2); }
.rotator{ display:inline-block; position:relative; color:var(--p2); min-height:1.05em; }
.rotator__word{ display:inline-block; }
.rotator__caret{ display:inline-block; width:3px; height:.92em; background:var(--p); margin-left:4px; vertical-align:-2px; box-shadow:0 0 10px var(--p); animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ .rotator__caret{ animation:none; } }

.hero__p{ color:var(--text-2); font-size:clamp(16px,1.9vw,19px); margin:26px 0 0; max-width:560px; }
.hero__actions{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.hero__meta{ display:flex; gap:26px; margin-top:38px; flex-wrap:wrap; }
.hero__meta div{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text-2); }
.hero__meta svg{ width:18px; height:18px; color:var(--p); flex:none; }

/* columna derecha del hero: foto + tarjeta */
.hero__aside{ display:grid; gap:20px; }
.hero__media{ margin:0; position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line-2); background:var(--bg-3); }
.hero__media img{ width:100%; height:auto; display:block; }
.hero__media::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(150deg, rgba(124,77,255,.14), transparent 46%); }

/* tarjeta lateral del hero (glass) */
.hero__card{
  border:1px solid var(--line-2); border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(19,19,30,.85), rgba(14,14,22,.72));
  backdrop-filter:blur(10px); padding:26px; position:relative; overflow:hidden;
}
.hero__card::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--p), transparent); }
.hero__card h2{ margin:0 0 4px; font-size:18px; font-weight:600; line-height:1.4; display:flex; align-items:center; gap:10px; }
.hero__card h2 svg{ width:20px; height:20px; color:var(--p); flex:none; }
.hero__card p{ margin:0 0 20px; font-size:14px; color:var(--muted); }
.hero__card ul{ list-style:none; margin:0 0 22px; padding:0; display:grid; gap:12px; }
.hero__card li{ display:flex; align-items:center; gap:12px; font-size:14.5px; color:var(--text-2); }
.hero__card li svg{ width:18px; height:18px; color:var(--p); flex:none; }
.hero__card .btn{ width:100%; }

/* =========================================================================
   FRANJA DE CONFIANZA
   ========================================================================= */
.trust{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-2); }
.trust .wrap{ display:grid; grid-template-columns:repeat(3,1fr); }
.trust__item{ display:flex; align-items:center; gap:14px; padding:26px 8px; }
.trust__item + .trust__item{ border-left:1px solid var(--line); padding-left:clamp(16px,3vw,34px); }
.trust__item svg{ width:26px; height:26px; color:var(--p); flex:none; }
.trust__item b{ display:block; font-size:15px; font-weight:600; }
.trust__item span{ font-size:13px; color:var(--muted); }

/* =========================================================================
   PRESUPUESTO (banda CTA)
   ========================================================================= */
.quote{ padding:clamp(56px,8vw,90px) 0; }
.quote__box{
  position:relative; overflow:hidden; border-radius:var(--radius);
  border:1px solid var(--line-2);
  background:
    radial-gradient(600px 300px at 90% 0%, rgba(124,77,255,.14), transparent 70%),
    linear-gradient(180deg, var(--bg-3), var(--bg-2));
  padding:clamp(32px,5vw,56px); display:grid; grid-template-columns:1.4fr .6fr; gap:32px; align-items:center;
}
.quote__box h2{ font-size:clamp(24px,3.4vw,38px); line-height:1.1; letter-spacing:-.02em; margin:14px 0 0; font-weight:700; }
.quote__box p{ color:var(--text-2); margin:14px 0 0; max-width:560px; }
.quote__actions{ display:flex; flex-direction:column; gap:14px; }
.quote__actions .btn{ width:100%; }
.quote__ghost{ position:absolute; right:-10px; bottom:-40px; font-family:var(--f-mono); font-weight:700; font-size:clamp(90px,14vw,200px); color:rgba(124,77,255,.05); line-height:.8; pointer-events:none; user-select:none; }

/* =========================================================================
   SOBRE NOSOTROS
   ========================================================================= */
.about{ padding:clamp(60px,9vw,110px) 0; }
.about__grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(34px,5vw,70px); align-items:center; }
.about__media{ position:relative; }
.about__media img{
  border-radius:var(--radius); border:1px solid var(--line-2); width:100%; aspect-ratio:4/5; object-fit:cover;
  filter:grayscale(.35) contrast(1.05) brightness(.85);
}
.about__media::after{ content:""; position:absolute; inset:0; border-radius:var(--radius); background:linear-gradient(180deg, transparent 45%, rgba(8,8,13,.5)); }
.about__badge{
  position:absolute; left:-10px; bottom:-14px; z-index:2;
  display:flex; align-items:center; gap:14px;
  background:var(--bg-3); border:1px solid var(--line-2); border-radius:var(--radius-s);
  padding:16px 20px; box-shadow:0 24px 60px -30px rgba(0,0,0,.9); max-width:calc(100% - 24px);
}
.about__badge svg{ width:30px; height:30px; color:var(--p); flex:none; }
.about__badge b{ display:block; font-size:16px; font-weight:600; letter-spacing:-.01em; }
.about__badge span{ display:block; font-size:12.5px; color:var(--steel); margin-top:3px; }

.checklist{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:16px; }
.checklist li{ display:flex; gap:16px; align-items:flex-start; }
.checklist .ic{ width:40px; height:40px; flex:none; border-radius:10px; border:1px solid var(--line-2); background:var(--bg-3); display:flex; align-items:center; justify-content:center; }
.checklist .ic svg{ width:20px; height:20px; color:var(--p); }
.checklist b{ display:block; font-size:16px; font-weight:600; }
.checklist span{ font-size:14.5px; color:var(--muted); }

/* =========================================================================
   MARQUEE
   ========================================================================= */
.marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-2); padding:22px 0; overflow:hidden; }
.marquee__track{ display:flex; gap:40px; width:max-content; animation:scroll-x 34s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__item{ display:inline-flex; align-items:center; gap:14px; font-family:var(--f-mono); font-size:clamp(15px,2vw,20px); font-weight:500; letter-spacing:.02em; color:var(--text-2); white-space:nowrap; }
.marquee__item svg{ width:20px; height:20px; color:var(--p); flex:none; }
@keyframes scroll-x{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; } }

/* =========================================================================
   SERVICIOS (grid editorial con foto)
   ========================================================================= */
.services{ padding:clamp(60px,9vw,110px) 0; }
.services__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; grid-auto-rows:1fr; }
.svc{
  position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--bg-2); display:flex; flex-direction:column; height:100%;
  transition:border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
.svc::before{ content:""; position:absolute; left:0; top:0; height:100%; width:2px; z-index:4; background:var(--p); transform:scaleY(0); transform-origin:top; transition:transform .35s var(--ease); }
.svc:hover{ border-color:var(--line-2); transform:translateY(-4px); background:var(--bg-3); }
.svc:hover::before{ transform:scaleY(1); }

.svc__media{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--bg-3); }
.svc__media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.5) contrast(1.05) brightness(.82); transition:transform .5s var(--ease), filter .4s var(--ease); }
.svc:hover .svc__media img{ transform:scale(1.05); filter:grayscale(.18) brightness(.95); }
.svc__media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(150deg, rgba(124,77,255,.12), transparent 42%),
             linear-gradient(180deg, transparent 44%, rgba(14,14,22,.94)); }

/* --p2 sobre la píldora oscura: 5.4:1 (con --p daría 3.8:1) */
.svc__num{ position:absolute; top:12px; right:12px; z-index:3; font-family:var(--f-mono); font-size:13px; font-weight:600; letter-spacing:.03em; color:var(--p2); padding:4px 11px; border-radius:100px; background:rgba(8,8,13,.72); border:1px solid var(--line-2); backdrop-filter:blur(6px); }
.svc__ic{ position:absolute; left:16px; bottom:14px; z-index:3; width:46px; height:46px; border-radius:11px; border:1px solid rgba(124,77,255,.35); background:rgba(8,8,13,.6); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; }
.svc__ic svg{ width:24px; height:24px; color:var(--p2); }

.svc__body{ padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.svc__body h3{ font-size:19px; font-weight:600; margin:0 0 10px; }
.svc__body p{ font-size:14.5px; color:var(--muted); margin:0 0 18px; flex:1; }
.svc__link{ margin-top:auto; font-size:14px; font-weight:600; color:var(--text-2); display:inline-flex; align-items:center; gap:8px; transition:gap .25s var(--ease), color .25s var(--ease); }
.svc__link svg{ width:16px; height:16px; color:var(--p); }
.svc:hover .svc__link{ color:var(--p2); gap:12px; }

/* =========================================================================
   STATS (honestos)
   ========================================================================= */
.stats{ padding:clamp(50px,7vw,80px) 0; }
.stats__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.stat{
  border:1px solid var(--line-2); border-radius:var(--radius); padding:30px 28px;
  background:linear-gradient(180deg, rgba(19,19,30,.7), rgba(14,14,22,.6)); backdrop-filter:blur(8px);
  position:relative; overflow:hidden;
}
.stat svg{ width:30px; height:30px; color:var(--p); margin-bottom:18px; }
.stat b{ display:block; font-size:clamp(19px,2.4vw,23px); font-weight:700; letter-spacing:-.01em; }
.stat span{ display:block; font-size:14.5px; color:var(--muted); margin-top:8px; }

/* =========================================================================
   POR QUÉ ELEGIRNOS (icon-boxes)
   ========================================================================= */
.why{ padding:clamp(60px,9vw,110px) 0; }
.why__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.why__box{ display:flex; gap:20px; padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-2); transition:border-color .3s var(--ease); }
.why__box:hover{ border-color:var(--line-2); }
.why__box .ic{ width:48px; height:48px; flex:none; border-radius:12px; background:rgba(124,77,255,.1); border:1px solid rgba(124,77,255,.25); display:flex; align-items:center; justify-content:center; }
.why__box .ic svg{ width:24px; height:24px; color:var(--p2); }
.why__box h3{ font-size:18px; font-weight:600; margin:0 0 8px; }
.why__box p{ font-size:14.5px; color:var(--muted); margin:0; }

/* =========================================================================
   ZONA
   ========================================================================= */
.zone{ padding:clamp(50px,8vw,90px) 0; }
.zone__grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(30px,5vw,60px); align-items:center; }
.zone__chips{ display:flex; flex-wrap:wrap; gap:12px; }
.zone__chip{
  display:inline-flex; align-items:center; gap:9px; padding:11px 16px; border-radius:100px;
  border:1px solid var(--line-2); background:var(--bg-2); font-size:14.5px; color:var(--text-2);
  transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.zone__chip svg{ width:15px; height:15px; color:var(--p); }
.zone__chip:hover{ border-color:var(--p); color:var(--text); background:var(--bg-3); }

/* =========================================================================
   CTA FINAL
   ========================================================================= */
.cta{ padding:clamp(60px,9vw,110px) 0; }
.cta__box{
  position:relative; overflow:hidden; text-align:center; border-radius:calc(var(--radius) + 4px);
  border:1px solid var(--line-2); padding:clamp(44px,7vw,90px) var(--gutter);
  background:
    radial-gradient(700px 340px at 50% -10%, rgba(124,77,255,.16), transparent 70%),
    linear-gradient(180deg, var(--bg-3), var(--bg));
}
.cta__box h2{ font-size:clamp(30px,5vw,54px); line-height:1.05; letter-spacing:-.03em; margin:18px auto 0; max-width:760px; font-weight:700; }
.cta__box p{ color:var(--text-2); margin:18px auto 0; max-width:560px; font-size:clamp(15px,1.8vw,18px); }
.cta__actions{ display:flex; gap:14px; justify-content:center; margin-top:34px; flex-wrap:wrap; }

/* =========================================================================
   GARANTÍAS + RESEÑAS (espacio reservado a valoraciones reales)
   ========================================================================= */
.reviews{ padding:clamp(50px,8vw,90px) 0; }
.reviews__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.guarantee{ border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-2); padding:28px; }
.guarantee svg{ width:28px; height:28px; color:var(--p); margin-bottom:16px; }
.guarantee h3{ font-size:17px; font-weight:600; margin:0 0 8px; }
.guarantee p{ font-size:14.5px; color:var(--muted); margin:0; }

.reviews__real{
  margin-top:22px; border:1px dashed var(--line-2); border-radius:var(--radius);
  background:var(--bg-2); padding:26px 28px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; justify-content:space-between;
}
.reviews__real .g{ display:flex; align-items:center; gap:16px; }
.reviews__real .stars{ display:flex; gap:3px; }
.reviews__real .stars svg{ width:20px; height:20px; color:var(--p); }
.reviews__real b{ font-size:15px; font-weight:600; }
.reviews__real span{ font-size:13.5px; color:var(--muted); display:block; margin-top:3px; }

/* =========================================================================
   FAQ
   ========================================================================= */
.faq{ padding:clamp(60px,9vw,110px) 0; }
.faq__grid{ display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(30px,5vw,60px); align-items:start; }
.faq__list{ display:grid; gap:12px; }
.faq__item{ border:1px solid var(--line); border-radius:var(--radius-s); background:var(--bg-2); overflow:hidden; transition:border-color .25s var(--ease); }
.faq__item[open]{ border-color:var(--line-2); }
.faq__item summary{ list-style:none; cursor:pointer; padding:20px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:16px; font-weight:600; }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary .plus{ width:22px; height:22px; flex:none; position:relative; transition:transform .3s var(--ease); }
.faq__item summary .plus::before,.faq__item summary .plus::after{ content:""; position:absolute; background:var(--p); border-radius:2px; }
.faq__item summary .plus::before{ top:10px; left:2px; right:2px; height:2px; }
.faq__item summary .plus::after{ left:10px; top:2px; bottom:2px; width:2px; transition:transform .3s var(--ease); }
.faq__item[open] summary .plus::after{ transform:rotate(90deg); }
.faq__item .faq__body{ padding:0 22px 22px; color:var(--muted); font-size:14.5px; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer{ border-top:1px solid var(--line); background:var(--bg-2); padding:clamp(50px,7vw,80px) 0 34px; }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; }
.footer__brand p{ color:var(--muted); font-size:14px; margin:18px 0 0; max-width:300px; }
.footer h3{ font-family:var(--f-mono); font-size:12px; line-height:1.6; letter-spacing:.16em; text-transform:uppercase; color:var(--steel); margin:0 0 18px; font-weight:500; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.footer li a, .footer li span{ font-size:14.5px; color:var(--text-2); display:inline-flex; align-items:center; gap:9px; transition:color .2s var(--ease); }
.footer li a:hover{ color:var(--p2); }
.footer li svg{ width:15px; height:15px; color:var(--p); flex:none; }
.footer__social{ display:flex; gap:12px; margin-top:8px; }
.footer__social a{ width:40px; height:40px; border:1px solid var(--line-2); border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--text-2); transition:border-color .25s var(--ease), color .25s var(--ease); }
.footer__social a:hover{ border-color:var(--p); color:var(--p2); }
.footer__social svg{ width:18px; height:18px; }
.footer__bottom{ margin-top:46px; padding-top:26px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--muted); }

/* =========================================================================
   DANI — agente IA que capta leads (botFab + botWin)
   ========================================================================= */
.bot-fab{
  position:fixed; right:22px; bottom:22px; z-index:98;
  display:inline-flex; align-items:center; justify-content:center;
  width:60px; height:60px; border-radius:50%;
  border:1px solid rgba(124,77,255,.45); background:var(--p); color:#fff;
  box-shadow:0 14px 40px -12px rgba(124,77,255,.75);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.bot-fab:hover{ transform:scale(1.06); }
.bot-fab svg{ width:25px; height:25px; }
.bot-fab .ring{ position:absolute; inset:-6px; border-radius:50%; border:1px solid rgba(124,77,255,.5); animation:ringPulse 2.6s ease-out infinite; pointer-events:none; }
@keyframes ringPulse{ 0%{ transform:scale(.9); opacity:.9; } 100%{ transform:scale(1.35); opacity:0; } }
/* punto sin texto: un "1" dentro del botón rompería su nombre accesible
   (label-content-name-mismatch), porque no está en el aria-label. */
.bot-fab .badge{ position:absolute; top:-2px; right:-2px; width:14px; height:14px; border-radius:50%; background:#e5484d; border:2px solid var(--bg); }
body.bot-open .bot-fab{ transform:scale(.88); opacity:0; pointer-events:none; }
@media (prefers-reduced-motion: reduce){ .bot-fab .ring{ animation:none; opacity:0; } .bot-fab:hover{ transform:none; } }

.bot-win{
  position:fixed; right:22px; bottom:22px; z-index:99;
  width:min(380px, calc(100vw - 32px)); height:min(600px, calc(100vh - 40px));
  display:flex; flex-direction:column; border-radius:18px; overflow:hidden;
  background:var(--bg-2); border:1px solid var(--line-2);
  box-shadow:0 30px 90px -20px rgba(0,0,0,.9);
  opacity:0; visibility:hidden; transform:translateY(20px) scale(.97); transform-origin:100% 100%;
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
body.bot-open .bot-win{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.bot-head{ display:flex; align-items:center; gap:12px; padding:15px 16px; border-bottom:1px solid var(--line); background:var(--bg-3); flex:none; }
.bot-av{ width:38px; height:38px; border-radius:11px; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; background:var(--p); }
.bot-av svg{ width:20px; height:20px; }
.bot-id{ flex:1; min-width:0; line-height:1.3; }
.bot-id b{ display:block; font-size:14.5px; font-weight:600; }
.bot-id span{ display:flex; align-items:center; gap:.45em; font-size:12px; color:var(--muted); }
.bot-id i{ width:7px; height:7px; border-radius:50%; background:var(--g); flex:none; }
.bot-close{ width:34px; height:34px; border:none; border-radius:9px; background:transparent; color:var(--muted); display:flex; align-items:center; justify-content:center; flex:none; transition:color .25s var(--ease), background .25s var(--ease); }
.bot-close:hover{ color:var(--text); background:var(--bg); }
.bot-close svg{ width:17px; height:17px; }

.bot-body{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:11px; scrollbar-width:thin; scrollbar-color:rgba(124,77,255,.35) transparent; }
.bot-body::-webkit-scrollbar{ width:5px; }
.bot-body::-webkit-scrollbar-thumb{ background:rgba(124,77,255,.35); border-radius:3px; }
.msg{ max-width:86%; padding:11px 14px; border-radius:14px; font-size:14.5px; line-height:1.55; white-space:pre-wrap; word-wrap:break-word; overflow-wrap:anywhere; animation:msgIn .35s var(--ease); }
@keyframes msgIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .msg{ animation:none; } }
.msg.bot{ align-self:flex-start; background:var(--bg-3); border:1px solid var(--line); border-bottom-left-radius:5px; }
.msg.user{ align-self:flex-end; background:var(--p); color:#fff; font-weight:500; border-bottom-right-radius:5px; }
.msg.bot a{ color:var(--p2); font-weight:600; text-decoration:underline; }
.typing{ align-self:flex-start; display:flex; gap:4px; padding:13px 15px; border-radius:14px; border-bottom-left-radius:5px; background:var(--bg-3); border:1px solid var(--line); }
.typing i{ width:6px; height:6px; border-radius:50%; background:var(--muted); animation:typeBounce 1.2s ease-in-out infinite; }
.typing i:nth-child(2){ animation-delay:.15s; }
.typing i:nth-child(3){ animation-delay:.3s; }
@keyframes typeBounce{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-5px); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .typing i{ animation:none; } }

.bot-chips{ display:flex; flex-wrap:wrap; gap:7px; padding:0 16px 10px; flex:none; }
.chip{
  cursor:pointer; font-family:inherit; font-size:13px; font-weight:500;
  padding:.5em .9em; border-radius:100px; color:var(--p2);
  border:1px solid rgba(124,77,255,.4); background:rgba(124,77,255,.08);
  transition:background .25s var(--ease), border-color .25s var(--ease); line-height:1.3;
}
.chip:hover{ background:rgba(124,77,255,.18); border-color:var(--p); }
.chip.urgent{ color:#fff; background:var(--p); border-color:transparent; font-weight:600; }

/* --- tarjeta de confirmación del cierre (datos verificados) ---------------
   Acento verde --g, no morado: cierra el flujo, no invita a otra acción.
   Contrastes sobre el fondo de la tarjeta (#0d1c20, la mezcla real del
   rgba(0,212,170,.07) sobre --bg-2): --g 9.13:1, --text-2 10.56:1, y el
   --g del CTA sobre su propio fondo 7.88:1. */
.bot-done{
  align-self:stretch; display:flex; gap:12px; align-items:flex-start;
  padding:14px 15px; border-radius:14px; border-bottom-left-radius:5px;
  background:rgba(0,212,170,.07); border:1px solid rgba(0,212,170,.32);
  animation:msgIn .35s var(--ease);
}
@media (prefers-reduced-motion: reduce){ .bot-done{ animation:none; } }
.bot-done__ic{
  width:30px; height:30px; flex:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--g); background:rgba(0,212,170,.14); border:1px solid rgba(0,212,170,.45);
}
.bot-done__ic svg{ width:17px; height:17px; }
.bot-done__body{ min-width:0; }
.bot-done b{ display:block; font-size:14.5px; font-weight:600; color:var(--g); }
.bot-done p{ margin:5px 0 0; font-size:14px; line-height:1.55; color:var(--text-2); }
.bot-done__cta{
  display:inline-flex; align-items:center; gap:8px; margin-top:12px;
  padding:9px 14px; border-radius:10px; font-size:13.5px; font-weight:600;
  color:var(--g); border:1px solid rgba(0,212,170,.45); background:rgba(0,212,170,.08);
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.bot-done__cta svg{ width:15px; height:15px; flex:none; }
.bot-done__cta:hover{ background:rgba(0,212,170,.16); border-color:var(--g); }

.bot-input{ display:flex; gap:8px; padding:12px 14px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--bg-2); flex:none; }
/* conversación cerrada: el input queda deshabilitado para que se vea que terminó */
.bot-input.is-done input,
.bot-input.is-done .bot-send{ opacity:.45; }
.bot-input.is-done .bot-send{ pointer-events:none; }
.bot-input input{
  flex:1; min-width:0; padding:.7em .95em; border-radius:11px; font-family:inherit; font-size:14.5px;
  color:var(--text); background:var(--bg-3); border:1px solid var(--line-2); transition:border-color .25s var(--ease);
}
.bot-input input::placeholder{ color:var(--muted); }
.bot-input input:focus{ outline:none; border-color:var(--p); }
.bot-send{ width:42px; height:42px; border:none; border-radius:11px; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; background:var(--p); transition:transform .25s var(--ease); }
.bot-send:hover{ transform:scale(1.06); }
.bot-send svg{ width:18px; height:18px; }
.bot-note{ font-size:11px; color:var(--muted); text-align:center; padding:0 14px 10px; background:var(--bg-2); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* =========================================================================
   REVEAL (animación scroll)
   ========================================================================= */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* cursor personalizado (solo desktop con puntero fino) */
.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; z-index:200; pointer-events:none; border-radius:50%; transform:translate(-50%,-50%); mix-blend-mode:difference; }
.cursor-dot{ width:6px; height:6px; background:var(--p); }
.cursor-ring{ width:34px; height:34px; border:1.5px solid rgba(124,77,255,.5); transition:width .2s var(--ease), height .2s var(--ease), border-color .2s var(--ease); }
.cursor-ring.hover{ width:50px; height:50px; border-color:var(--p); }

/* =========================================================================
   RITMO DE SECCIÓN — banda alterna + numeración de fondo
   Las bandas usan --bg-2, así que las tarjetas que van dentro de una banda
   se pintan sobre --bg-3 para no fundirse con el fondo (es el caso de
   .paso y .precio). Las tarjetas sobre fondo normal siguen en --bg-2.
   ========================================================================= */
.sec-alt{ background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

/* Número de sección en marca de agua. Contorno a .13 de alfa: queda por
   debajo del texto y nunca compite con él. Oculto por debajo de 900px,
   donde no hay margen lateral y se cruzaría con los titulares. */
.bignum{
  position:absolute; top:clamp(8px,2.5vw,30px); z-index:0;
  font-family:var(--f-mono); font-weight:700; line-height:.76;
  font-size:clamp(96px,14vw,200px); letter-spacing:-.03em;
  color:transparent; -webkit-text-stroke:1px rgba(124,77,255,.13);
  pointer-events:none; user-select:none;
}
.bignum--l{ left:0; }
.bignum--r{ right:0; }
/* Paralaje sin JS ni librerías: línea de tiempo de scroll nativa donde
   existe, y nada donde no (Safari/Firefox lo ignoran sin romper nada). */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .bignum{ animation:bignumDrift linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; }
    @keyframes bignumDrift{ from{ transform:translateY(6%); } to{ transform:translateY(-16%); } }
  }
}

/* =========================================================================
   SERVICIOS — precio orientativo y CTA que abre a Dani
   El CTA es <button> porque abre el chat, no navega: mismo aspecto que el
   .svc__link enlace, pero sin los estilos que hereda un botón nativo.
   ========================================================================= */
.svc__price{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  margin:0 0 16px; padding-top:15px; border-top:1px solid var(--line);
  font-size:13.5px; color:var(--muted);
}
.svc__price b{ font-family:var(--f-mono); font-size:20px; font-weight:700; color:var(--text); letter-spacing:-.01em; }
.svc__price small{ font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); }
button.svc__link{ border:none; background:transparent; padding:0; text-align:left; font-size:14px; font-weight:600; }

/* =========================================================================
   CÓMO TRABAJAMOS (04 pasos)
   ========================================================================= */
.proceso{ padding:clamp(60px,9vw,110px) 0; }
.proceso__grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.paso{
  position:relative; padding:30px 26px 28px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--bg-3);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.paso:hover{ border-color:var(--line-2); transform:translateY(-4px); }
.paso__n{
  position:absolute; top:18px; right:20px; font-family:var(--f-mono);
  font-size:34px; font-weight:700; line-height:1; letter-spacing:-.03em;
  color:transparent; -webkit-text-stroke:1px rgba(124,77,255,.35);
}
.paso__ic{
  display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:12px; margin-bottom:20px;
  background:rgba(124,77,255,.1); border:1px solid rgba(124,77,255,.25);
}
.paso__ic svg{ width:24px; height:24px; color:var(--p2); }
.paso h3{ font-size:17.5px; font-weight:600; margin:0 0 9px; }
.paso p{ font-size:14.5px; color:var(--muted); margin:0; }

/* =========================================================================
   ÁREAS DE TRABAJO
   ========================================================================= */
.areas{ padding:clamp(60px,9vw,110px) 0; }
.areas__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.area{
  position:relative; overflow:hidden; padding:32px 28px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-2);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.area::before{
  content:""; position:absolute; left:0; top:0; height:100%; width:2px;
  background:var(--p); transform:scaleY(0); transform-origin:top;
  transition:transform .35s var(--ease);
}
.area:hover{ border-color:var(--line-2); background:var(--bg-3); }
.area:hover::before{ transform:scaleY(1); }
.area__ic{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:13px; margin-bottom:22px;
  background:rgba(124,77,255,.1); border:1px solid rgba(124,77,255,.25);
}
.area__ic svg{ width:26px; height:26px; color:var(--p2); }
.area h3{ font-size:20px; font-weight:600; margin:0 0 10px; }
.area > p{ font-size:14.5px; color:var(--muted); margin:0 0 22px; }
.area ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; border-top:1px solid var(--line); padding-top:20px; }
.area li{ display:flex; align-items:flex-start; gap:11px; font-size:14.5px; color:var(--text-2); }
.area li svg{ width:17px; height:17px; color:var(--g); flex:none; margin-top:3px; }

/* =========================================================================
   PRECIOS ORIENTATIVOS
   Demo: ninguna cifra es una tarifa cerrada y la web lo dice tres veces
   (aviso bajo el titular, "desde" en cada fila y nota al pie del grid).
   ========================================================================= */
.precios{ padding:clamp(60px,9vw,110px) 0; }
.precios__flag{
  display:inline-flex; align-items:center; gap:10px; margin:22px 0 0;
  padding:10px 16px; border-radius:100px;
  border:1px solid rgba(0,212,170,.32); background:rgba(0,212,170,.07);
  /* !important no: basta con ganar en especificidad a `.section-head p`,
     que si no impone su clamp(15px,1.6vw,17px) y descuadra la píldora */
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--g); font-weight:500; line-height:1.4;
}
.section-head .precios__flag{ font-size:12.5px; }
.precios__flag svg{ width:16px; height:16px; flex:none; }
.precios__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:start; }
.precio{
  display:flex; flex-direction:column; padding:26px 24px 24px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-3);
  transition:border-color .3s var(--ease);
}
.precio:hover{ border-color:var(--line-2); }
.precio--urg{ border-color:rgba(124,77,255,.28); }
.precio__head{ display:flex; align-items:center; gap:13px; margin-bottom:20px; }
.precio__ic{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:40px; height:40px; border-radius:11px;
  background:rgba(124,77,255,.1); border:1px solid rgba(124,77,255,.25);
}
.precio__ic svg{ width:20px; height:20px; color:var(--p2); }
.precio__head h3{ font-size:17.5px; font-weight:600; margin:0; }
.precio__list{ margin:0; display:grid; gap:0; }
.precio__list > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:12px 0; border-top:1px solid var(--line);
}
.precio__list > div:first-child{ border-top:none; padding-top:0; }
.precio__list dt{ font-size:14px; color:var(--text-2); }
.precio__list dd{
  margin:0; flex:none; font-family:var(--f-mono); font-size:13.5px; font-weight:600;
  color:var(--text); white-space:nowrap;
}
.precio__nota{ font-size:13.5px; color:var(--muted); margin:18px 0 16px; padding-top:16px; border-top:1px solid var(--line); }
.precio--urg .btn{ width:100%; }
.precios__note{
  margin:26px 0 0; padding:18px 22px; border-radius:var(--radius-s);
  border:1px dashed var(--line-2); background:var(--bg-3);
  font-size:14px; color:var(--muted);
}
.precios__note strong{ color:var(--text-2); font-weight:600; }

/* =========================================================================
   NAV — sección activa (scroll-spy de main.js)
   ========================================================================= */
.nav a.active{ color:var(--text); }
.nav a.active::after{ width:100%; }

/* =========================================================================
   DANI · AGENDA — calendario de día y franjas de hora
   El calendario vive dentro del hilo del chat, así que hereda su ancho:
   7 columnas de ~42px en la ventana de 380px, por encima del objetivo
   táctil mínimo. Domingos y días pasados salen deshabilitados.
   ========================================================================= */
.bot-cal{
  align-self:stretch; padding:13px; border-radius:14px;
  border:1px solid var(--line-2); background:var(--bg-3);
  animation:msgIn .35s var(--ease);
}
@media (prefers-reduced-motion: reduce){ .bot-cal{ animation:none; } }
.bot-cal.locked{ opacity:.7; }
.bot-cal__head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.bot-cal__title{ font-family:var(--f-mono); font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-2); }
.bot-cal__nav{
  width:30px; height:30px; flex:none; border-radius:8px; font-size:16px; line-height:1;
  border:1px solid var(--line-2); background:transparent; color:var(--text-2);
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.bot-cal__nav:hover:not(:disabled){ border-color:var(--p); color:var(--p2); }
.bot-cal__nav:disabled{ opacity:.3; cursor:default; }
.bot-cal__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.bot-cal__dow{ margin-bottom:5px; }
.bot-cal__dow span{ font-family:var(--f-mono); font-size:11px; text-align:center; color:var(--steel); }
.bot-cal__day{
  aspect-ratio:1; min-height:36px; display:flex; align-items:center; justify-content:center;
  border-radius:8px; border:1px solid transparent; background:transparent;
  font-family:var(--f-mono); font-size:13px; color:var(--text-2);
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.bot-cal__day:hover:not(:disabled){ background:rgba(124,77,255,.14); border-color:var(--p); color:var(--text); }
/* los días no disponibles siguen siendo legibles (no son "invisibles"),
   pero se leen claramente como apagados. Un control deshabilitado queda
   fuera del mínimo de contraste de la 1.4.3, así que aquí prima que se
   distinga del día seleccionable, no el ratio. */
.bot-cal__day:disabled{ color:rgba(159,179,200,.4); cursor:default; }
.bot-cal__day.empty{ border:none; }
.bot-cal__day.sel{ background:var(--p); border-color:var(--p); color:#fff; font-weight:700; }

.bot-slots{ align-self:stretch; display:flex; flex-wrap:wrap; gap:7px; }
.bot-slots.locked{ opacity:.7; }
.chip[disabled]{ cursor:default; }
.chip.sel{ background:var(--p); border-color:var(--p); color:#fff; font-weight:600; }

/* resumen de la cita dentro de la tarjeta de cierre (--text-2 sobre el
   fondo verdoso de la tarjeta: 10.56:1) */
.bot-done__cita{
  display:flex; align-items:flex-start; gap:8px;
  margin:11px 0 0; padding-top:11px; border-top:1px solid rgba(0,212,170,.22);
  font-size:13px; line-height:1.5; color:var(--text-2);
}
.bot-done__cita svg{ width:14px; height:14px; flex:none; color:var(--g); margin-top:3px; }

/* =========================================================================
   RESPONSIVE — 900 / 600
   ========================================================================= */
@media (max-width:900px){
  .cursor-dot,.cursor-ring{ display:none; }
  .nav, .header__cta .btn{ display:none; }
  .burger{ display:inline-flex; }
  .hero__grid{ grid-template-columns:1fr; }
  .hero__aside{ order:2; max-width:520px; }
  .quote__box{ grid-template-columns:1fr; }
  .about__grid{ grid-template-columns:1fr; }
  .about__media{ max-width:420px; }
  .services__grid{ grid-template-columns:repeat(2,1fr); }
  .why__grid{ grid-template-columns:1fr; }
  .zone__grid{ grid-template-columns:1fr; }
  .faq__grid{ grid-template-columns:1fr; }
  .reviews__grid{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .stats__grid{ grid-template-columns:1fr; }
  /* la marca de agua se cruzaría con los titulares: fuera en tablet y móvil */
  .bignum{ display:none; }
  .proceso__grid{ grid-template-columns:repeat(2,1fr); }
  .areas__grid{ grid-template-columns:1fr; }
  .precios__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  :root{ --gutter:18px; }
  .topbar__info{ gap:14px; font-size:12px; }
  .topbar__info .hide-xs{ display:none; }
  .trust .wrap{ grid-template-columns:1fr; }
  .trust__item + .trust__item{ border-left:none; border-top:1px solid var(--line); padding-left:8px; }
  .services__grid{ grid-template-columns:1fr; }
  .reviews__grid{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .hero__meta{ gap:16px; }
  .about__badge{ left:0; padding:13px 16px; }
  .cta__actions .btn{ width:100%; }
  .bot-win{ right:10px; width:calc(100vw - 20px); }
  .bot-fab{ right:14px; }
  .proceso__grid{ grid-template-columns:1fr; }
  .precios__grid{ grid-template-columns:1fr; }
  .precios__flag{ letter-spacing:.06em; font-size:11.5px; padding:9px 14px; }
  .precio__list dt{ font-size:13.5px; }
  .precio__list > div{ gap:10px; }
}

/* =========================================================================
   MÓVIL — coste de pintado
   El blur de backdrop-filter es lo más caro de pintar y en pantallas
   pequeñas apenas se percibe. Se neutraliza y se compensa subiendo la
   opacidad del fondo para que todo se siga leyendo igual.
   ========================================================================= */
@media (max-width:768px){
  .topbar,
  .header,
  .mobile-nav,
  .hero__card,
  .svc__num,
  .svc__ic,
  .stat{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
  .topbar{ background:rgba(8,8,13,.8); }
  .header{ background:rgba(8,8,13,.9); }
  .mobile-nav{ background:#08080d; }
  .hero__card{ background:linear-gradient(180deg, rgba(19,19,30,.95), rgba(14,14,22,.88)); }
  .svc__num{ background:rgba(8,8,13,.85); }
  .svc__ic{ background:rgba(8,8,13,.75); }
  .stat{ background:linear-gradient(180deg, rgba(19,19,30,.85), rgba(14,14,22,.78)); }
}