/* ============================================================
   BLUE SHEEP — Agencia de Performance y Automatización
   Hoja de estilos única. Los valores salen del manual de marca.
   ============================================================ */

/* ---------- 1. VARIABLES ---------- */
:root{
  /* Colores del logotipo (fuente de verdad) */
  --logo-deep:#0058a0;
  --logo-mid:#1080c0;
  --logo-light:#28a8e0;

  /* Fondos y superficies */
  --bg:#060b16;
  --bg-2:#0a1224;
  --navy:#0d1b36;
  --navy-2:#112a52;

  /* Azules */
  --blue-600:#1656c4;
  --blue-500:#2f6fed;
  --blue-400:#4a8dff;

  /* Cianes */
  --cyan-400:#29b8dd;
  --cyan-300:#63d9f5;
  --cyan-200:#9fe8fb;

  /* Texto — cuatro niveles, no más */
  --white:#ffffff;
  --ink:#eef3fb;
  --ink-dim:#b9c6dd;
  --muted:#7e8ea9;

  /* Superficies translúcidas */
  --panel:rgba(255,255,255,.035);
  --panel-2:rgba(255,255,255,.055);
  --line:rgba(255,255,255,.10);

  /* Degradado de marca */
  --gradient:linear-gradient(135deg,var(--blue-400),var(--cyan-300));
  --on-gradient:#04101f;

  /* Geometría y movimiento */
  --r:18px;
  --r-sm:10px;
  --r-lg:26px;
  --ease:cubic-bezier(.16,.84,.28,1);
  --container:1200px;
  --gutter:22px;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:'Sora','Inter',sans-serif;
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.02em;
  margin:0;
  color:var(--white);
}
p{margin:0}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
img{max-width:100%;display:block;height:auto}
button,input,select,textarea{font-family:inherit;font-size:inherit}
button{cursor:pointer}
::selection{background:var(--blue-400);color:#fff}

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

.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.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;
}
.skip-link{
  position:absolute;left:-999px;top:0;z-index:2000;
  background:var(--cyan-300);color:var(--on-gradient);
  padding:12px 20px;border-radius:0 0 var(--r-sm) 0;font-weight:600;
}
.skip-link:focus{left:0}

/* ---------- 3. TIPOGRAFÍA DE APOYO ---------- */
.kicker{
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cyan-300);margin-bottom:16px;display:block;
}
.lead{color:var(--ink-dim);font-size:clamp(15px,2vw,17px);max-width:62ch}

/* ---------- 4. ESTRUCTURA DE SECCIÓN ---------- */
.section{padding:clamp(64px,9vw,112px) 0;position:relative}
.section--alt{background:var(--bg-2)}
.section-head{max-width:760px;margin-bottom:clamp(36px,5vw,56px)}
.section-head h2{font-size:clamp(27px,4.4vw,42px);margin-bottom:18px}

/* ---------- 5. BOTONES ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 28px;border-radius:100px;
  font-size:14.5px;font-weight:600;border:1px solid transparent;
  white-space:nowrap;text-align:center;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .25s ease,border-color .25s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{
  background:var(--gradient);color:var(--on-gradient);
  box-shadow:0 14px 34px -14px rgba(74,141,255,.6);
}
.btn--primary:hover{box-shadow:0 18px 40px -12px rgba(99,217,245,.7)}
.btn--ghost{border-color:var(--line);color:var(--ink);background:var(--panel)}
.btn--ghost:hover{border-color:var(--cyan-300);color:var(--white)}
.btn--sm{padding:11px 20px;font-size:13.5px}
.btn--block{width:100%}
.btn svg{width:17px;height:17px;flex-shrink:0}

/* ---------- 6. NAVEGACIÓN ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:900;padding:18px 0;
  border-bottom:1px solid transparent;
  transition:padding .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease);
}
.nav.is-scrolled{
  padding:11px 0;background:rgba(6,11,22,.82);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav__logo img{height:34px;width:auto;transition:height .35s var(--ease),opacity .25s ease}
.nav__logo:hover img{opacity:.85}
.nav.is-scrolled .nav__logo img{height:29px}

.nav__links{display:none;align-items:center;gap:30px}
.nav__links a{
  font-size:13.5px;color:var(--ink-dim);font-weight:500;
  position:relative;padding:4px 0;transition:color .2s ease;
}
.nav__links a::after{
  content:'';position:absolute;left:0;bottom:-2px;width:0;height:1px;
  background:var(--cyan-300);transition:width .28s var(--ease);
}
.nav__links a:hover{color:var(--white)}
.nav__links a:hover::after,.nav__links a.is-active::after{width:100%}
.nav__links a.is-active{color:var(--white)}

.nav__cta{display:none}
.nav__toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-sm);color:var(--white);
}
.nav__toggle svg{width:20px;height:20px}
.nav__toggle .icon-close{display:none}
.nav__toggle[aria-expanded="true"] .icon-menu{display:none}
.nav__toggle[aria-expanded="true"] .icon-close{display:block}

.nav__mobile{
  position:fixed;inset:0;z-index:899;background:rgba(6,11,22,.97);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;
}
.nav__mobile.is-open{display:flex}
.nav__mobile a{font-family:'Sora',sans-serif;font-size:21px;font-weight:500;padding:12px 20px;color:var(--ink)}
.nav__mobile a:hover{color:var(--cyan-300)}
.nav__mobile .btn{margin-top:18px}

@media (min-width:1024px){
  .nav__links,.nav__cta{display:flex}
  .nav__toggle{display:none}
}

/* ---------- 7. HERO ---------- */
.hero{position:relative;padding:clamp(120px,17vw,180px) 0 clamp(56px,8vw,88px);overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.32}
.hero__bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,11,22,.68) 0%,rgba(6,11,22,.88) 55%,var(--bg) 100%);
}
.hero__glow{
  position:absolute;z-index:0;border-radius:50%;pointer-events:none;
  width:min(620px,88vw);aspect-ratio:1;
  top:-16%;right:-14%;
  background:radial-gradient(circle closest-side,rgba(74,141,255,.30),rgba(74,141,255,.08) 55%,transparent 78%);
}
.hero .container{position:relative;z-index:1}
.hero h1{font-size:clamp(33px,6vw,60px);max-width:16ch;margin-bottom:18px}

/* Slogan de marca: acompaña al titular, no compite con él. */
.hero__slogan{
  font-family:'Sora',sans-serif;font-weight:600;
  font-size:clamp(17px,2.6vw,23px);line-height:1.35;
  color:var(--cyan-300);max-width:34ch;margin-bottom:20px;
}
.hero .lead{font-size:clamp(16px,2.2vw,19px);max-width:56ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

.hero__stats{
  display:grid;grid-template-columns:1fr;gap:1px;
  margin-top:clamp(44px,6vw,68px);
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.hero__stat{background:var(--bg);padding:24px 22px}
.hero__stat b{
  display:block;font-family:'Sora',sans-serif;font-weight:600;
  font-size:clamp(26px,4vw,36px);color:var(--white);line-height:1.05;margin-bottom:6px;
}
.hero__stat span{color:var(--muted);font-size:13.5px}
@media (min-width:768px){.hero__stats{grid-template-columns:repeat(3,1fr)}}

/* ---------- 8. FRANJA DE CONFIANZA ---------- */
.trust{padding:44px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2)}
.trust p{text-align:center;color:var(--muted);font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:26px}
/* Los cuatro archivos ya vienen normalizados al mismo lienzo (520x130), así
   que basta con darles el mismo alto: todos ocupan idéntico espacio y la fila
   queda pareja sola. Grid de 4 columnas iguales en desktop, 2x2 en tablet y
   1 columna en móvil. */
.trust__row{
  display:grid;grid-template-columns:repeat(4,1fr);
  align-items:center;justify-items:center;
  column-gap:clamp(20px,3vw,40px);row-gap:24px;
}
.trust__row img{
  height:58px;width:auto;max-width:100%;
  filter:grayscale(1) brightness(1.7);opacity:.62;
  transition:filter .3s ease,opacity .3s ease;
}
.trust__row img:hover{filter:none;opacity:1}

@media (max-width:900px){
  .trust__row{grid-template-columns:repeat(2,1fr);row-gap:28px}
}
@media (max-width:480px){
  .trust__row{grid-template-columns:1fr;row-gap:26px}
  .trust__row img{height:52px}
}

/* ---------- 9. TARJETAS (base compartida) ---------- */
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:28px 26px;position:relative;
  transition:transform .35s var(--ease),border-color .3s ease,background .3s ease;
}
.card:hover{transform:translateY(-4px);border-color:rgba(99,217,245,.35);background:var(--panel-2)}
.card h3{font-size:17.5px;margin-bottom:12px}
.card p{color:var(--ink-dim);font-size:14.5px}

.icon-box{
  width:40px;height:40px;border-radius:var(--r-sm);
  background:rgba(99,217,245,.10);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;color:var(--cyan-300);
}
.icon-box svg{width:22px;height:22px}

.grid{display:grid;gap:18px}
.grid--3{grid-template-columns:1fr}
.grid--4{grid-template-columns:1fr}
@media (min-width:480px){
  .grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1024px){
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(4,1fr)}
}

/* ---------- 10. SELECTOR DE SECTORES ---------- */
.sector-pick{
  position:relative;display:block;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r);
  min-height:420px;
  transition:transform .35s var(--ease),border-color .3s ease;
}
.sector-pick:hover{transform:translateY(-5px);border-color:var(--cyan-300)}

.sector-pick__media{position:absolute;inset:0;z-index:0;background:var(--navy)}
.sector-pick__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease);
}
.sector-pick:hover .sector-pick__media img{transform:scale(1.05)}
.sector-pick__media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,11,22,.35) 0%,rgba(6,11,22,.55) 45%,rgba(6,11,22,.94) 100%);
}

.sector-pick__body{
  position:relative;z-index:1;height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:26px 24px;
}
.sector-pick__body .icon-box{
  background:rgba(6,11,22,.55);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.sector-pick h3{font-size:20px;margin-bottom:10px;color:var(--white)}
.sector-pick p{color:var(--ink-dim);font-size:14px;margin-bottom:18px}

.sector-pick__body .tags--pick{margin-top:0}
.tags--pick .tag{
  background:rgba(6,11,22,.55);border-color:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}

/* ---------- 11. SECCIÓN DE SECTOR ---------- */
.sector{padding:clamp(64px,9vw,104px) 0;border-top:1px solid var(--line)}
.sector__top{display:grid;gap:34px;align-items:start;margin-bottom:44px}
@media (min-width:1024px){.sector__top{grid-template-columns:1.15fr .85fr;gap:56px}}
.sector__top--solo{grid-template-columns:1fr}
.sector__top--solo>div{max-width:68ch}
.sector__top h2{font-size:clamp(25px,3.8vw,38px);margin-bottom:18px}

.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tag{
  font-size:12.5px;color:var(--cyan-200);background:rgba(99,217,245,.09);
  border:1px solid rgba(99,217,245,.18);border-radius:100px;padding:6px 14px;
}

.panel{
  background:var(--navy);border:1px solid var(--line);
  border-radius:var(--r);padding:26px 24px;
}
.panel h3{font-size:15px;margin-bottom:18px;color:var(--cyan-300)}
.checklist li{
  display:flex;gap:11px;align-items:flex-start;
  color:var(--ink-dim);font-size:14.5px;padding:9px 0;
}
.checklist li+li{border-top:1px solid var(--line)}
.checklist svg{width:17px;height:17px;color:var(--cyan-300);flex-shrink:0;margin-top:3px}

.pain h3{
  font-size:15px;margin-bottom:10px;color:var(--white);
  font-family:'Sora',sans-serif;font-weight:600;
}
.pain p{color:var(--muted);font-size:14px}
.pain{border-left:2px solid rgba(99,217,245,.35);padding-left:20px}

.sector__figure{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);position:relative}
.sector__figure img{width:100%;aspect-ratio:16/10;object-fit:cover;opacity:.8}
.sector__figure::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(6,11,22,.72) 100%);
}

/* ---------- 12. METODOLOGÍA ---------- */
.method{display:grid;gap:18px}
@media (min-width:1024px){.method{grid-template-columns:repeat(3,1fr)}}
.step{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:32px 26px;position:relative;
  transition:transform .35s var(--ease),border-color .3s ease;
}
.step:hover{transform:translateY(-4px)}
.step--core{background:var(--navy);border-color:rgba(99,217,245,.3)}
.step__badge{
  position:absolute;top:-11px;left:26px;
  background:var(--gradient);color:var(--on-gradient);
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 13px;border-radius:100px;
}
.step__num{
  font-family:'Sora',sans-serif;font-weight:600;font-size:13px;
  color:var(--cyan-300);background:rgba(99,217,245,.10);
  width:38px;height:38px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
}
.step h3{font-size:18px;margin-bottom:12px}
.step p{color:var(--ink-dim);font-size:14.5px;margin-bottom:20px}

/* ---------- 12b. SISTEMA COMERCIAL (servicio integral) ---------- */
.system{
  background:var(--navy);border:1px solid rgba(99,217,245,.22);
  border-radius:var(--r-lg);padding:clamp(28px,4vw,48px);
  margin-bottom:clamp(52px,7vw,76px);
}
.system__badge{
  display:inline-block;background:var(--gradient);color:var(--on-gradient);
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 14px;border-radius:100px;margin-bottom:18px;
}
.system h3{font-size:clamp(22px,3.2vw,28px);margin-bottom:14px;color:var(--white)}
.system>.lead{max-width:70ch;margin-bottom:32px}
.system__steps{display:grid;gap:16px;margin-bottom:32px}
@media (min-width:640px){.system__steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.system__steps{grid-template-columns:repeat(4,1fr)}}
.system__steps .step{background:var(--bg-2)}
/* La estrategia ocupa toda la fila: se lee como cimiento de las otras cuatro. */
.step--base{grid-column:1/-1;background:var(--navy)!important;border-color:rgba(99,217,245,.3)}

/* El CTA "Conoce cómo funciona el sistema completo" tiene texto largo:
   en móvil necesita poder envolver y ocupar el ancho, si no se corta. */
@media (max-width:479px){
  .system>.btn--primary{
    width:100%;white-space:normal;text-align:center;line-height:1.3;
  }
}
.system__alacarte-head{margin-top:0}

/* ---------- 13. NOSOTROS ---------- */
.about{display:grid;gap:36px;align-items:center}
@media (min-width:1024px){.about{grid-template-columns:.85fr 1.15fr;gap:60px}}
.about__photo{
  border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);position:relative;
  transition:border-color .35s ease,box-shadow .35s ease;
}
.about__photo img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .5s var(--ease)}
.about__photo::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(6,11,22,.55) 100%);
}
.about__photo:hover{
  border-color:rgba(99,217,245,.45);
  box-shadow:0 0 0 1px rgba(99,217,245,.15),0 20px 50px -18px rgba(74,141,255,.55);
}
.about__photo:hover img{transform:scale(1.04)}
.about__linkedin{
  display:inline-flex;align-items:center;gap:11px;
  margin-top:22px;padding:8px 20px 8px 8px;
  border-radius:100px;background:var(--panel);border:1px solid var(--line);
  font-size:13.5px;font-weight:600;color:var(--ink);
  transition:border-color .25s ease,background .25s ease,transform .25s var(--ease);
}
.about__linkedin:hover{
  border-color:rgba(99,217,245,.4);background:var(--panel-2);
  transform:translateY(-2px);color:var(--white);
}
.about__linkedin-icon{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,#0a66c2,#0e86d4);color:#fff;
}
.about__linkedin-icon svg{width:17px;height:17px}
.about h2{font-size:clamp(25px,3.8vw,38px);margin-bottom:20px}

.quote{
  border-left:2px solid var(--cyan-300);padding:4px 0 4px 24px;margin:28px 0;
}
.quote p{
  font-family:'Sora',sans-serif;font-size:clamp(16px,2.2vw,19px);
  line-height:1.5;color:var(--white);font-weight:500;margin-bottom:14px;
}
.quote cite{font-style:normal;color:var(--muted);font-size:13.5px}
.quote cite b{color:var(--ink-dim);font-weight:600;display:block}

.about__points{display:grid;gap:16px;margin-top:8px}
.about__points li{display:flex;gap:13px;align-items:flex-start}
.about__points svg{width:18px;height:18px;color:var(--cyan-300);flex-shrink:0;margin-top:3px}
.about__points b{display:block;color:var(--white);font-size:14.5px;font-weight:600;margin-bottom:3px}
.about__points span{color:var(--ink-dim);font-size:14px}

/* ---------- 14. FORMULARIO ---------- */
/* Trampa anti-spam: fuera de pantalla, no oculta con display:none
   para que los bots que ignoran CSS igual la completen. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact{display:grid;gap:38px;align-items:start}
@media (min-width:1024px){.contact{grid-template-columns:.9fr 1.1fr;gap:60px}}
.form{
  background:var(--navy);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(24px,4vw,36px);
}
.field{margin-bottom:18px}
.field label{
  display:block;font-size:12.5px;font-weight:600;letter-spacing:.03em;
  color:var(--ink-dim);margin-bottom:8px;
}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--ink);font-size:15px;
  transition:border-color .2s ease,background .2s ease;
}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--cyan-300);background:rgba(255,255,255,.06);
}
.field textarea{resize:vertical;min-height:104px}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237e8ea9' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:42px;
}
.field select option{background:var(--navy);color:var(--ink)}
.form__row{display:grid;gap:18px}
@media (min-width:480px){.form__row{grid-template-columns:1fr 1fr}}

/* iOS hace zoom automático a toda la página al enfocar un campo con menos de
   16px. Se sube a 16px solo en móvil para evitar ese salto molesto al escribir. */
@media (max-width:767px){
  .field input,.field select,.field textarea,
  .agent-form .field input,.agent-form .field select,
  .agent-input input,
  .multiselect__control-text{font-size:16px}
}

/* ---------- Dropdown multi-select "Qué te interesa" ---------- */
.multiselect{position:relative}
.multiselect__control{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:50px;padding:9px 15px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--ink);text-align:left;cursor:pointer;
  transition:border-color .2s ease,background .2s ease;
}
.multiselect__control:hover{border-color:rgba(99,217,245,.45)}
.multiselect__control:focus-visible,
.multiselect__control[aria-expanded="true"]{
  outline:none;border-color:var(--cyan-300);background:rgba(255,255,255,.06);
}
.multiselect__control-text{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--ink);font-size:14.5px;
}
.multiselect__control-text.is-placeholder{color:var(--muted)}
.multiselect__arrow{
  width:17px;height:17px;flex-shrink:0;color:var(--muted);
  transition:transform .25s var(--ease);
}
.multiselect__control[aria-expanded="true"] .multiselect__arrow{transform:rotate(180deg)}

/* Fila de chips: fuera del botón (un <button> no puede contener otro),
   solo ocupa espacio cuando hay algo elegido. */
.multiselect__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.multiselect__chips:empty{display:none;margin-top:0}

.chip{
  display:inline-flex;align-items:center;gap:4px;max-width:100%;
  background:rgba(99,217,245,.12);border:1px solid rgba(99,217,245,.3);
  border-radius:100px;padding:4px 6px 4px 12px;
  font-size:12.5px;color:var(--cyan-200);white-space:nowrap;
}
.chip__remove{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;flex-shrink:0;border-radius:50%;
  background:transparent;border:0;color:var(--cyan-200);
  font-size:15px;line-height:1;cursor:pointer;padding:0;
}
.chip__remove:hover{background:rgba(255,255,255,.15);color:var(--white)}

.multiselect__panel{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:40;
  background:var(--navy);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;box-shadow:0 24px 60px -20px rgba(0,0,0,.65);
  max-height:min(420px,60vh);overflow-y:auto;
}
.multiselect__panel[hidden]{display:none}
.multiselect__panel .choice{background:rgba(255,255,255,.03)}
.multiselect__panel .choices__grid{margin-top:8px}

/* ---- Variante móvil: acordeón EN LÍNEA, sin posicionamiento fijo ----
   En iOS Safari, position:fixed se ancla al viewport de layout, no al área
   realmente visible. Con el teclado abierto (el foco se queda en el campo
   anterior al tocar el botón), un panel anclado con bottom:0 se dibuja debajo
   del teclado y el usuario no ve nada: comprobado en iPhone.
   Por eso en móvil el panel se despliega dentro del flujo normal del documento
   (position:static) y empuja el contenido hacia abajo. No depende de fixed,
   ni del viewport, ni del teclado. */
@media (max-width:767px){
  .multiselect__panel{
    position:static;
    z-index:auto;
    margin-top:8px;
    max-height:none;overflow:visible;   /* que crezca en el flujo, sin scroll propio */
    box-shadow:none;
    border-radius:var(--r);
  }
  /* El padding y el borde los pone .choices.multiselect__panel más abajo; no se
     redefinen acá porque, al tener la misma especificidad, esa regla posterior
     ganaría igual y el valor de acá quedaría muerto. */
}

/* ---------- Selección múltiple de servicios ---------- */
.choices{border:0;padding:0;margin-bottom:22px}
/* El panel del dropdown también lleva la clase .choices (reutiliza .choice/.choices__grid);
   esta regla puntual gana por especificidad y restaura el padding/borde del panel. */
.choices.multiselect__panel{padding:16px;margin-bottom:0;border:1px solid var(--line)}
.choices legend{
  display:block;font-size:12.5px;font-weight:600;letter-spacing:.03em;
  color:var(--ink-dim);margin-bottom:10px;padding:0;
}
.choices__hint{
  display:inline-block;margin-left:8px;font-weight:400;letter-spacing:0;
  color:var(--muted);font-size:12px;
}
.choices__grid{display:grid;gap:8px;margin:8px 0}
@media (min-width:520px){.choices__grid{grid-template-columns:1fr 1fr}}

.choice{
  display:flex;align-items:flex-start;gap:10px;cursor:pointer;
  padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:rgba(255,255,255,.03);
  transition:border-color .2s ease,background .2s ease;
}
.choice:hover{border-color:rgba(99,217,245,.45);background:rgba(255,255,255,.05)}
.choice input{
  width:16px;height:16px;flex:0 0 16px;margin-top:2px;
  accent-color:var(--cyan-400);cursor:pointer;
}
.choice span{
  font-size:14px;color:var(--ink);line-height:1.35;
}
.choice b{display:block;font-weight:600;color:var(--white);margin-bottom:2px}
.choice--wide span{font-size:13.5px;color:var(--ink-dim)}
/* .is-checked lo pone main.js: respaldo para navegadores sin :has()
   (Safari iOS anterior a 15.4), donde si no la opción marcada no se resaltaba. */
.choice:has(input:checked),
.choice.is-checked{
  border-color:var(--cyan-300);background:rgba(41,184,221,.10);
}
.choice:focus-within{outline:2px solid var(--cyan-300);outline-offset:2px}
/* Cuando se elige el sistema completo, los sueltos se atenúan. */
.choices.is-exclusivo .choices__grid .choice{opacity:.4}
.choices.is-exclusivo .choices__grid .choice:hover{border-color:var(--line);background:rgba(255,255,255,.03)}
.form__note{color:var(--muted);font-size:12.5px;margin-top:14px;text-align:center}

.form-success{
  display:none;text-align:center;padding:44px 24px;
}
.form-success.is-visible{display:block}
.form-success svg{width:44px;height:44px;color:var(--cyan-300);margin:0 auto 18px}
.form-success h3{font-size:20px;margin-bottom:10px}
.form-success p{color:var(--ink-dim);font-size:14.5px}

.contact__aside h2{font-size:clamp(25px,3.8vw,38px);margin-bottom:18px}
.contact__list{margin-top:28px;display:grid;gap:18px}
.contact__list li{display:flex;gap:13px;align-items:flex-start;color:var(--ink-dim);font-size:14.5px}
.contact__list svg{width:18px;height:18px;color:var(--cyan-300);flex-shrink:0;margin-top:3px}

/* ---------- 15. PIE ---------- */
.footer{padding:56px 0 34px;border-top:1px solid var(--line);background:var(--bg-2)}
.footer__top{display:grid;gap:32px;margin-bottom:38px}
@media (min-width:768px){.footer__top{grid-template-columns:1.4fr 1fr 1fr}}
.footer__logo img{height:36px;width:auto;margin-bottom:18px}
.footer__brand p{color:var(--muted);font-size:14px;max-width:38ch}
.footer__social{display:flex;gap:10px;margin-top:20px}
.footer__social a{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:var(--panel);border:1px solid var(--line);color:var(--ink-dim);
  transition:color .2s ease,border-color .2s ease,background .2s ease,transform .25s var(--ease);
}
.footer__social a:hover{color:var(--cyan-300);border-color:rgba(99,217,245,.4);background:var(--panel-2);transform:translateY(-2px)}
.footer__social svg{width:17px;height:17px}
.footer h4{
  font-family:'Inter',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;
}
.footer__nav li+li{margin-top:10px}
.footer__nav a{color:var(--ink-dim);font-size:14px;transition:color .2s ease}
.footer__nav a:hover{color:var(--cyan-300)}
.footer__bottom{
  border-top:1px solid var(--line);padding-top:22px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
}
.footer__bottom p{color:var(--muted);font-size:12.5px}
.footer__badge{display:flex;align-items:center;gap:10px}
.footer__badge img{height:26px;width:auto;opacity:.7}

/* ---------- 16. PÁGINA 404 ---------- */
.error-page{
  min-height:70vh;display:flex;align-items:center;
  padding:clamp(120px,18vw,180px) 0 clamp(64px,9vw,100px);
}
.error-page h1{font-size:clamp(30px,5.4vw,50px);margin-bottom:20px;max-width:14ch}
.error-page__links{
  display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:44px;
  padding-top:26px;border-top:1px solid var(--line);
}
.error-page__links a{color:var(--ink-dim);font-size:14px;transition:color .2s ease}
.error-page__links a:hover{color:var(--cyan-300)}

/* ---------- 17. ANIMACIÓN DE ENTRADA ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .reveal{opacity:1;transform:none}
}

/* ---------- 18. AGENTE IA ---------- */
.agent-fab{
  position:fixed;right:20px;bottom:20px;z-index:950;
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 20px 13px 15px;border-radius:100px;border:none;
  background:var(--gradient);color:var(--on-gradient);
  font-weight:600;font-size:14px;
  box-shadow:0 14px 34px -12px rgba(74,141,255,.65);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.agent-fab:hover{transform:translateY(-3px);box-shadow:0 20px 42px -12px rgba(99,217,245,.7)}
.agent-fab svg{width:21px;height:21px;flex-shrink:0}
.agent-fab__close{display:none}
.agent-fab[aria-expanded="true"] .agent-fab__open,
.agent-fab[aria-expanded="true"] .agent-fab__label{display:none}
.agent-fab[aria-expanded="true"] .agent-fab__close{display:block}
.agent-fab[aria-expanded="true"]{padding:15px;gap:0}
.agent-fab__dot{
  position:absolute;top:11px;right:13px;width:9px;height:9px;border-radius:50%;
  background:#3ddc84;border:2px solid var(--bg);
}
.agent-fab[aria-expanded="true"] .agent-fab__dot{display:none}
@media (max-width:480px){
  .agent-fab__label{display:none}
  .agent-fab{padding:15px;gap:0}
}

.agent-panel{
  position:fixed;right:20px;bottom:86px;z-index:949;
  width:min(370px,calc(100vw - 40px));
  /* Deja libre la altura de la navegación para que el panel nunca la tape. */
  max-height:min(560px,calc(100vh - 180px));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--navy);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.7);
  opacity:0;transform:translateY(14px) scale(.98);
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
/* CRÍTICO: la regla de arriba pone display:flex, y una regla del autor le gana
   al [hidden]{display:none} del navegador. Sin esta línea el panel se sigue
   maquetando aunque tenga el atributo hidden: queda invisible por opacity:0
   pero con pointer-events activos, tapando la pantalla y robándose TODOS los
   toques (en móvil mide casi el ancho completo). Eso dejaba muertos el
   formulario y los botones del hero. */
.agent-panel[hidden]{display:none}
.agent-panel.is-open{opacity:1;transform:none}

.agent-panel__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 16px 16px 18px;border-bottom:1px solid var(--line);
  background:var(--bg-2);flex-shrink:0;
}
.agent-panel__id{display:flex;align-items:center;gap:12px}
.agent-panel__avatar{
  width:38px;height:38px;border-radius:12px;flex-shrink:0;
  background:rgba(99,217,245,.12);color:var(--cyan-300);
  display:flex;align-items:center;justify-content:center;
}
.agent-panel__avatar svg{width:21px;height:21px}
.agent-panel__id h2{font-size:15px;margin:0 0 3px}
.agent-panel__id p{
  display:flex;align-items:center;gap:6px;
  color:var(--muted);font-size:12px;
}
.agent-panel__status{width:7px;height:7px;border-radius:50%;background:#3ddc84}
.agent-panel__x{
  background:none;border:none;color:var(--muted);padding:6px;
  border-radius:8px;display:flex;transition:color .2s ease,background .2s ease;
}
.agent-panel__x:hover{color:var(--white);background:var(--panel-2)}
.agent-panel__x svg{width:18px;height:18px}

.agent-panel__body{padding:20px 18px;overflow-y:auto;flex:1;min-height:120px}
.agent-msg{
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:14px 14px 14px 4px;padding:14px 16px;margin-bottom:20px;
}
.agent-msg p{color:var(--ink-dim);font-size:14px}
.agent-msg p+p{margin-top:10px}
.agent-msg--done{border-color:rgba(99,217,245,.3)}
.agent-msg--done b{color:var(--white)}
.agent-note{color:var(--muted);font-size:12.5px;font-style:italic}
.agent-whatsapp{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:12px;padding:11px 20px 11px 14px;
  border-radius:100px;background:#25d366;color:#04180d;
  font-size:13.5px;font-weight:700;
  box-shadow:0 10px 26px -12px rgba(37,211,102,.55);
  transition:transform .25s var(--ease),box-shadow .25s ease;
}
.agent-whatsapp:hover{transform:translateY(-2px);box-shadow:0 14px 32px -10px rgba(37,211,102,.7)}
.agent-whatsapp svg{width:19px;height:19px;flex-shrink:0}
.agent-form .field{margin-bottom:14px}
.agent-form .field label{font-size:12px}
.agent-form .field input,.agent-form .field select{padding:11px 13px;font-size:14px}

@media (prefers-reduced-motion:reduce){
  .agent-panel{transition:none}
}

/* ---------- 19. CHAT DEL AGENTE ---------- */
.agent-msg--usuario{
  background:rgba(74,141,255,.14);
  border-color:rgba(99,217,245,.25);
  border-radius:14px 14px 4px 14px;
  margin-left:auto;max-width:88%;
}
.agent-msg--usuario p{color:var(--ink)}
.agent-msg--error{border-color:rgba(255,138,138,.4)}

.agent-msg--typing{
  display:inline-flex;gap:5px;align-items:center;
  padding:15px 18px;width:auto;
}
.agent-msg--typing span{
  width:7px;height:7px;border-radius:50%;background:var(--cyan-300);
  opacity:.35;animation:agentBlink 1.2s infinite;
}
.agent-msg--typing span:nth-child(2){animation-delay:.18s}
.agent-msg--typing span:nth-child(3){animation-delay:.36s}
@keyframes agentBlink{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.agent-input{
  display:flex;gap:8px;align-items:center;flex-shrink:0;
  padding:14px 16px;border-top:1px solid var(--line);background:var(--bg-2);
}
/* Mismo caso que .agent-panel: display:flex anula el hidden del navegador y la
   barra de escritura aparecía antes de tiempo. */
.agent-input[hidden]{display:none}
.agent-input input{
  flex:1;min-width:0;padding:11px 14px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  border-radius:100px;color:var(--ink);font-size:14px;
  transition:border-color .2s ease;
}
.agent-input input::placeholder{color:var(--muted)}
.agent-input input:focus{outline:none;border-color:var(--cyan-300)}
.agent-input input:disabled{opacity:.5}
.agent-input button{
  width:40px;height:40px;flex-shrink:0;border:none;border-radius:50%;
  background:var(--gradient);color:var(--on-gradient);
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s var(--ease);
}
.agent-input button:hover{transform:scale(1.06)}
.agent-input button svg{width:18px;height:18px}

@media (prefers-reduced-motion:reduce){
  .agent-msg--typing span{animation:none}
}