/* =========================================================================
   JN Insurance Agency LLC — Sitio premium bilingüe (ES/EN)
   Sistema visual fiel al Manual de Identidad de Marca v1.0 de JN Insurance.
   Colores muestreados del logotipo oficial. Tipografías: Montserrat + Nunito.
   ========================================================================= */

/* ----------------------------- Fuentes de marca (self-host, CSP-safe) ---- */
@font-face{font-family:"Montserrat";src:url("../fonts/Montserrat-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../fonts/Montserrat-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../fonts/Montserrat-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito";src:url("../fonts/Nunito-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito";src:url("../fonts/Nunito-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito";src:url("../fonts/Nunito-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ----------------------------- Design tokens ----------------------------- */
:root{
  /* Paleta oficial (muestreada del logotipo) */
  --blue:#0072BB;          /* Azul JN */
  --orange:#F89828;        /* Naranja JN */
  --gray:#A8A9AD;          /* Gris JN */
  --ink:#1F2933;           /* Tinta / texto */
  --white:#FFFFFF;

  /* Escala azul derivada (para profundidad y 3D) */
  --blue-050:#e9f3fb;
  --blue-100:#cfe6f6;
  --blue-200:#9fcdec;
  --blue-500:#0072BB;
  --blue-600:#0063a3;
  --blue-700:#03528a;
  --blue-800:#053f6b;
  --blue-900:#062f50;
  --blue-950:#04223b;

  --orange-400:#ffb24d;
  --orange-500:#F89828;
  --orange-600:#e07f12;

  /* Neutros de superficie (tema claro) */
  --bg:#f6f9fc;
  --bg-2:#eef4fa;
  --surface:#ffffff;
  --surface-2:#f2f6fb;
  --line:#e2e8f0;
  --line-2:#d3deea;
  --text:#1F2933;
  --text-2:#465562;
  --text-3:#566572; /* AA: >=4.5:1 sobre blanco y superficies claras */
  --text-inv:#ffffff;

  /* Marca en texto */
  --brand-ink:#123047;

  /* Tipografía */
  --f-head:"Montserrat", "Segoe UI", system-ui, sans-serif;
  --f-body:"Nunito", "Segoe UI", system-ui, sans-serif;

  /* Escala fluida (clamp: escala con el viewport, sin saltos) */
  --f-eyebrow:clamp(.72rem,.68rem + .2vw,.82rem);
  --f-sm:clamp(.85rem,.82rem + .2vw,.95rem);
  --f-body-sz:clamp(1rem,.96rem + .25vw,1.12rem);
  --f-lead:clamp(1.1rem,1rem + .6vw,1.35rem);
  --f-h4:clamp(1.1rem,1rem + .5vw,1.3rem);
  --f-h3:clamp(1.3rem,1.1rem + .9vw,1.65rem);
  --f-h2:clamp(1.85rem,1.4rem + 2.1vw,3rem);
  --f-h1:clamp(2.4rem,1.7rem + 3.4vw,4.4rem);
  --f-display:clamp(3rem,2rem + 5vw,6rem);

  /* Espaciado (ritmo vertical consistente) */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem; --sp-10:8rem;
  --section-y:clamp(3.5rem,2rem + 7vw,7rem);

  /* Radios */
  --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;

  /* Sombras (tinte azul de marca, no gris plano) */
  --sh-xs:0 1px 2px rgba(6,47,80,.06);
  --sh-sm:0 4px 14px -6px rgba(6,47,80,.18);
  --sh-md:0 14px 34px -14px rgba(6,47,80,.28);
  --sh-lg:0 30px 70px -28px rgba(6,47,80,.40);
  --sh-orange:0 16px 40px -14px rgba(224,127,18,.45);
  --sh-blue:0 18px 46px -16px rgba(0,114,187,.5);

  --container:1200px;
  --container-wide:1320px;
  --header-h:78px;
  --focus:0 0 0 3px #fff, 0 0 0 6px var(--orange);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* Tema oscuro */
:root[data-theme="dark"]{
  --bg:#081726;
  --bg-2:#0a1c2f;
  --surface:#0e2439;
  --surface-2:#122c44;
  --line:#1c3a55;
  --line-2:#244764;
  --text:#eaf2f9;
  --text-2:#b7c9d8;
  --text-3:#8ba4b8;
  --text-inv:#ffffff;
  --brand-ink:#eaf2f9;
  --blue-050:#0d2b46;
  --sh-xs:0 1px 2px rgba(0,0,0,.4);
  --sh-sm:0 4px 16px -6px rgba(0,0,0,.55);
  --sh-md:0 16px 40px -16px rgba(0,0,0,.65);
  --sh-lg:0 34px 80px -30px rgba(0,0,0,.75);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#081726; --bg-2:#0a1c2f; --surface:#0e2439; --surface-2:#122c44;
    --line:#1c3a55; --line-2:#244764; --text:#eaf2f9; --text-2:#b7c9d8;
    --text-3:#8ba4b8; --brand-ink:#eaf2f9;
    --sh-sm:0 4px 16px -6px rgba(0,0,0,.55); --sh-md:0 16px 40px -16px rgba(0,0,0,.65);
    --sh-lg:0 34px 80px -30px rgba(0,0,0,.75);
  }
}

/* ----------------------------- Reset base -------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + .75rem)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;font-family:var(--f-body);font-size:var(--f-body-sz);line-height:1.65;
  color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5{font-family:var(--f-head);color:var(--brand-ink);line-height:1.1;margin:0;
  letter-spacing:-.02em;font-weight:800}
p{margin:0 0 1rem}
a{color:var(--blue-600);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--orange-600)}
img,svg{max-width:100%;display:block}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit;cursor:pointer}
/* Foco por teclado con outline real (no lo recorta overflow:hidden) */
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;box-shadow:none;border-radius:var(--r-xs)}
::selection{background:var(--blue-200);color:var(--brand-ink)}
:root[data-theme="dark"] ::selection{background:var(--blue-700);color:#fff}

.skip-link{position:absolute;left:-999px;top:0;z-index:200;background:var(--blue);color:#fff;
  padding:.75rem 1.25rem;border-radius:0 0 var(--r-sm) 0;font-family:var(--f-head);font-weight:700}
.skip-link:focus{left:0;color:#fff}

/* ----------------------------- Layout helpers ---------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.1rem,3vw,2rem)}
.container-wide{max-width:var(--container-wide)}
.section{padding-block:var(--section-y);position:relative}
.section--tight{padding-block:clamp(2.5rem,1.5rem + 5vw,4.5rem)}
.grid{display:grid;gap:clamp(1rem,2.4vw,2rem)}
.center{text-align:center}
.mx-auto{margin-inline:auto}
.measure{max-width:62ch}
.measure-sm{max-width:48ch}
.hidden{display:none !important}
[hidden]{display:none !important}

/* Bilingüe ES/EN — ambos idiomas viven en el HTML (SEO + sin-JS + paridad legal);
   el CSS muestra el activo según el atributo lang del <html>. Por defecto: ES. */
html[lang="en"] .lang-es{display:none}
html:not([lang="en"]) .lang-en{display:none}

/* Eyebrow / section head */
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--f-head);
  font-weight:700;font-size:var(--f-eyebrow);letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-600)}
.eyebrow::before{content:"";width:26px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--orange),var(--orange-400))}
.eyebrow--center{justify-content:center}
.section-head{max-width:64ch}
.section-head--center{margin-inline:auto;text-align:center}
.section-head h2{margin:.7rem 0 0;font-size:var(--f-h2)}
.section-head .lead{margin-top:.9rem;font-size:var(--f-lead);color:var(--text-2)}
.lead{font-size:var(--f-lead);color:var(--text-2)}
.text-orange{color:var(--orange-600)}
.text-blue{color:var(--blue-600)}
.nowrap{white-space:nowrap}

/* Punto naranja de marca (reutiliza el "punto persona" del logo) */
.dot{color:var(--orange-500)}

/* ----------------------------- Botones ----------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--f-head);font-weight:700;font-size:var(--f-sm);line-height:1;
  padding:.95rem 1.6rem;border-radius:var(--r-pill);border:2px solid transparent;
  cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),
  background .25s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
  text-align:center;white-space:nowrap;position:relative;isolation:isolate}
.btn svg{width:1.15em;height:1.15em;flex:none}
/* Texto TINTA sobre naranja = 6.68:1 (AA). Con blanco eran 2.21:1 y no pasaba:
   el naranja de marca es demasiado claro para texto blanco. */
.btn--primary{background:linear-gradient(135deg,var(--orange-500),var(--orange-600));
  color:var(--ink);box-shadow:var(--sh-orange)}
.btn--primary:hover{color:var(--ink);transform:translateY(-3px);box-shadow:0 22px 48px -14px rgba(224,127,18,.6)}
.btn--blue{background:linear-gradient(135deg,var(--blue-500),var(--blue-700));color:#fff;box-shadow:var(--sh-blue)}
.btn--blue:hover{color:#fff;transform:translateY(-3px);box-shadow:0 24px 54px -16px rgba(0,114,187,.62)}
.btn--ghost{background:var(--surface);color:var(--blue-700);border-color:var(--line-2)}
.btn--ghost:hover{color:var(--blue-700);border-color:var(--blue-500);transform:translateY(-3px);box-shadow:var(--sh-sm)}
.btn--outline-light{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.5);backdrop-filter:blur(6px)}
.btn--outline-light:hover{color:var(--blue-800);background:#fff;border-color:#fff;transform:translateY(-3px)}
/* WhatsApp: verde profundo. El #25D366 oficial da 1.98:1 con blanco (falla AA);
   este verde mantiene la lectura "WhatsApp" y da 5.43–6.63:1. */
.btn--wa{background:linear-gradient(135deg,#0e7a3d,#0b6b34);color:#fff;box-shadow:0 16px 40px -14px rgba(11,107,52,.5)}
.btn--wa:hover{color:#fff;transform:translateY(-3px);box-shadow:0 22px 48px -14px rgba(11,107,52,.62)}
.btn--lg{padding:1.1rem 2rem;font-size:1rem}
.btn--sm{padding:.7rem 1.15rem;font-size:.82rem}
.btn--block{width:100%}
.btn:active{transform:translateY(-1px) scale(.99)}

/* ----------------------------- Header / Nav ------------------------------ */
.header{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--header-h);
  display:flex;align-items:center;transition:background .3s var(--ease),box-shadow .3s var(--ease),
  height .3s var(--ease);}
.header::before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--surface) 82%,transparent);
  backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);
  opacity:0;transition:opacity .3s var(--ease);border-bottom:1px solid transparent}
.header.is-stuck::before{opacity:1;border-bottom-color:var(--line)}
.header.is-stuck{box-shadow:var(--sh-sm)}
.header .container{display:flex;align-items:center;gap:1.25rem;width:100%;position:relative;z-index:1}
.brand{display:flex;align-items:center;gap:.6rem;margin-right:auto}
.brand img{height:44px;width:auto;transition:height .3s var(--ease)}
.header.is-stuck .brand img{height:40px}
.brand__logo-light{display:block}
.brand__logo-dark{display:none}
:root[data-theme="dark"] .brand__logo-light{display:none}
:root[data-theme="dark"] .brand__logo-dark{display:block}
/* El tema oscuro también se activa por preferencia del sistema SIN data-theme.
   Sin esta regla, la 1ª visita en modo oscuro mostraba el logo A COLOR sobre
   fondo oscuro (el gris de "Insurance Agency" perdía contraste). */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand__logo-light{display:none}
  :root:not([data-theme="light"]) .brand__logo-dark{display:block}
}

.nav{display:flex;align-items:center;gap:.2rem}
.nav a{font-family:var(--f-head);font-weight:600;font-size:.92rem;color:var(--text);
  padding:.55rem .8rem;border-radius:var(--r-sm);position:relative;transition:color .2s,background .2s}
.nav a::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.34rem;height:2px;
  background:var(--orange-500);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease)}
.nav a:hover{color:var(--blue-700)}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}

.header__tools{display:flex;align-items:center;gap:.5rem}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--surface);color:var(--text-2);
  transition:transform .2s,box-shadow .2s,color .2s,border-color .2s}
.icon-btn:hover{color:var(--blue-700);border-color:var(--blue-200);transform:translateY(-2px);box-shadow:var(--sh-xs)}
.icon-btn svg{width:20px;height:20px}

/* Toggle idioma */
.lang{display:inline-flex;align-items:center;background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:var(--r-pill);padding:3px;font-family:var(--f-head);font-weight:700;font-size:.78rem}
.lang button{border:0;background:transparent;color:var(--text-2);padding:.5rem .72rem;border-radius:var(--r-pill);
  min-height:38px;transition:color .2s,background .2s}
.lang button.is-active{background:var(--blue-600);color:#fff;box-shadow:var(--sh-xs)}

.nav-toggle{display:none}
.header__cta{display:inline-flex}

/* Menú móvil */
.mobile-menu{position:fixed;inset:0;z-index:99;background:color-mix(in srgb,var(--bg) 96%,transparent);
  backdrop-filter:blur(6px);padding:calc(var(--header-h) + 1rem) clamp(1.1rem,4vw,2rem) 2rem;
  display:flex;flex-direction:column;gap:.4rem;transform:translateY(-8px);opacity:0;pointer-events:none;
  visibility:hidden;transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;overflow-y:auto}
.mobile-menu.open{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.mobile-menu a{font-family:var(--f-head);font-weight:700;font-size:1.3rem;color:var(--brand-ink);
  padding:.85rem .4rem;border-bottom:1px solid var(--line)}
.mobile-menu .btn{margin-top:1.2rem}

/* ----------------------------- Fondos / decor ---------------------------- */
.bg-orbs{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5}
.orb--blue{background:radial-gradient(circle at 30% 30%,var(--blue-400,#2a97dd),transparent 70%);
  background:radial-gradient(circle,#2a97dd,transparent 70%)}
.orb--orange{background:radial-gradient(circle,var(--orange-400),transparent 70%)}
:root[data-theme="dark"] .orb{opacity:.32}

/* Malla de puntos sutil */
.dot-grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(currentColor 1px,transparent 1px);background-size:26px 26px;
  color:color-mix(in srgb,var(--blue-500) 12%,transparent);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent 75%)}

/* Arco de protección (motivo derivado del círculo del logo) */
.shape-divider{position:absolute;left:0;right:0;line-height:0;pointer-events:none;z-index:1}
.shape-divider svg{width:100%;height:auto;display:block}
.shape-divider--top{top:-1px}
.shape-divider--bottom{bottom:-1px}

/* ----------------------------- HERO -------------------------------------- */
.hero{position:relative;padding-top:calc(var(--header-h) + clamp(2rem,5vw,4rem));
  padding-bottom:clamp(3rem,6vw,6rem);
  background:
    radial-gradient(120% 90% at 82% 8%,var(--blue-050),transparent 55%),
    linear-gradient(180deg,var(--bg),var(--bg-2));
  overflow:hidden}
:root[data-theme="dark"] .hero{background:
  radial-gradient(120% 90% at 82% 8%,#0b2f4d,transparent 55%),
  linear-gradient(180deg,#081726,#0a1f34)}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,4rem);align-items:center;
  position:relative;z-index:2}
.hero__badge{display:inline-flex;align-items:center;gap:.5rem;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-pill);padding:.45rem .9rem .45rem .5rem;
  font-family:var(--f-head);font-weight:700;font-size:.78rem;color:var(--text-2);box-shadow:var(--sh-xs)}
.hero__badge b{color:var(--blue-700)}
.hero__badge .pill{display:inline-flex;align-items:center;gap:.35rem;background:var(--blue-050);
  color:var(--blue-700);border-radius:var(--r-pill);padding:.25rem .6rem;font-size:.72rem}
:root[data-theme="dark"] .hero__badge .pill{background:var(--blue-900)}
.hero h1{font-size:var(--f-h1);margin-top:1.2rem}
/* Subrayado naranja dibujado con background: sobrevive al salto de línea en móvil
   (nunca usar white-space:nowrap aquí: fuerza el track del grid y desborda). */
.hero h1 .accent{color:var(--blue-600);
  background-image:linear-gradient(90deg,var(--orange-400),var(--orange-500));
  background-repeat:no-repeat;background-size:100% .14em;background-position:0 92%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero__lead{margin-top:1.3rem;font-size:var(--f-lead);color:var(--text-2);max-width:36ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.8rem}
.hero__trust{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:2rem;align-items:center}
.trust-item{display:flex;align-items:center;gap:.55rem;font-size:.9rem;color:var(--text-2);font-weight:600}
.trust-item svg{width:20px;height:20px;color:var(--blue-500);flex:none}

/* Stats */
.stats{display:flex;flex-wrap:wrap;gap:clamp(1.2rem,3vw,2.6rem);margin-top:2.2rem;
  padding-top:1.6rem;border-top:1px solid var(--line)}
.stat__num{font-family:var(--f-head);font-weight:800;font-size:clamp(1.7rem,1.2rem + 1.6vw,2.4rem);
  color:var(--blue-700);line-height:1;letter-spacing:-.03em}
.stat__num .dot{font-size:.8em}
.stat__label{font-size:.82rem;color:var(--text-3);margin-top:.35rem;font-weight:600;max-width:16ch}

/* --- Hero visual: escena 3D de protección --- */
.hero__visual{position:relative;perspective:1400px;min-height:420px;display:flex;justify-content:center;align-items:center}
.scene{position:relative;width:min(100%,440px);aspect-ratio:1/1;transform-style:preserve-3d;
  transition:transform .4s var(--ease-out)}
.scene__ring{position:absolute;inset:0;margin:auto;border-radius:50%;transform-style:preserve-3d}
.ring-1{width:100%;height:100%;background:
  conic-gradient(from 200deg,var(--blue-200),var(--blue-500),var(--blue-700),var(--blue-500),var(--blue-200));
  filter:blur(2px);opacity:.35;box-shadow:var(--sh-lg);animation:spin 26s linear infinite}
.ring-1::after{content:"";position:absolute;inset:14%;border-radius:50%;background:var(--bg)}
:root[data-theme="dark"] .ring-1::after{background:#0a1f34}
.scene__core{position:absolute;inset:18%;margin:auto;border-radius:50%;
  background:linear-gradient(150deg,var(--blue-500),var(--blue-800));
  box-shadow:inset 0 4px 20px rgba(255,255,255,.25),inset 0 -10px 30px rgba(0,0,0,.35),var(--sh-blue);
  display:flex;align-items:center;justify-content:center;transform:translateZ(60px)}
.scene__core img{width:58%;filter:drop-shadow(0 10px 18px rgba(0,0,0,.3));animation:breathe 6s var(--ease) infinite}
.scene__glow{position:absolute;inset:-8%;border-radius:50%;
  background:radial-gradient(circle,rgba(0,114,187,.4),transparent 65%);filter:blur(30px);z-index:-1}

/* Tarjetas flotantes de cobertura (orbitan la escena) */
.chip3d{position:absolute;display:flex;align-items:center;gap:.55rem;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);padding:.6rem .85rem;box-shadow:var(--sh-md);
  font-family:var(--f-head);font-weight:700;font-size:.82rem;color:var(--brand-ink);
  transform-style:preserve-3d;backface-visibility:hidden;will-change:transform;white-space:nowrap}
.chip3d .ic{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:var(--blue-050);color:var(--blue-600);flex:none}
:root[data-theme="dark"] .chip3d .ic{background:var(--blue-900)}
.chip3d .ic svg{width:18px;height:18px}
.chip3d--a{top:4%;left:-6%;transform:translateZ(90px);animation:float1 7s var(--ease) infinite}
.chip3d--b{top:38%;right:-10%;transform:translateZ(120px);animation:float2 8s var(--ease) infinite}
.chip3d--c{bottom:6%;left:2%;transform:translateZ(70px);animation:float3 9s var(--ease) infinite}
.chip3d .ic.ic--orange{background:#fff2e0;color:var(--orange-600)}
:root[data-theme="dark"] .chip3d .ic.ic--orange{background:#3a2a12}

/* ----------------------------- Marquee ----------------------------------- */
.marquee{overflow:hidden;position:relative;padding-block:1.1rem;background:var(--blue-700);
  border-block:1px solid var(--blue-800)}
:root[data-theme="dark"] .marquee{background:var(--blue-900)}
.marquee__track{display:flex;width:max-content;white-space:nowrap;animation:slide 32s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{display:inline-flex;align-items:center;gap:.7rem;padding-inline:1.6rem;
  font-family:var(--f-head);font-weight:700;font-size:clamp(.95rem,1.4vw,1.2rem);color:#fff;letter-spacing:.01em}
.marquee__item svg{width:20px;height:20px;color:var(--orange-400)}
.marquee__sep{color:var(--blue-200);opacity:.6}

/* ----------------------------- Cards / superficies ----------------------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.3rem,2.2vw,1.9rem);box-shadow:var(--sh-sm);position:relative;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.card:hover{border-color:var(--blue-100)}

/* Servicios: tarjetas 3D tilt */
.services__grid{grid-template-columns:repeat(3,1fr)}
.svc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.4rem,2.2vw,2rem);box-shadow:var(--sh-sm);position:relative;overflow:hidden;
  transform-style:preserve-3d;transition:transform .3s var(--ease-out),box-shadow .3s var(--ease),border-color .3s;
  will-change:transform}
.svc::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .3s var(--ease);
  background:radial-gradient(120% 100% at 15% 0%,var(--blue-050),transparent 60%);z-index:0}
:root[data-theme="dark"] .svc::before{background:radial-gradient(120% 100% at 15% 0%,#0d2f4e,transparent 60%)}
.svc:hover{box-shadow:var(--sh-lg);border-color:var(--blue-100)}
.svc:hover::before{opacity:1}
.svc>*{position:relative;z-index:1;transform:translateZ(24px)}
.svc__icon{display:grid;place-items:center;width:60px;height:60px;border-radius:16px;margin-bottom:1.1rem;
  background:linear-gradient(150deg,var(--blue-500),var(--blue-700));color:#fff;box-shadow:var(--sh-blue);
  transform:translateZ(46px)}
.svc__icon svg{width:30px;height:30px}
.svc--orange .svc__icon{background:linear-gradient(150deg,var(--orange-400),var(--orange-600));box-shadow:var(--sh-orange)}
.svc h3{font-size:var(--f-h4);margin-bottom:.5rem}
.svc p{color:var(--text-2);font-size:.98rem;margin-bottom:1rem}
.svc__link{font-family:var(--f-head);font-weight:700;font-size:.86rem;color:var(--blue-700);
  display:inline-flex;align-items:center;gap:.4rem;transition:gap .25s var(--ease)}
.svc__link svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.svc:hover .svc__link{gap:.65rem}
.svc:hover .svc__link svg{transform:translateX(3px)}

/* ----------------------------- Feature split ----------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.split--reverse .split__media{order:2}
.feature-list{display:grid;gap:1.1rem;margin-top:1.6rem}
.feature{display:flex;gap:.9rem;align-items:flex-start}
.feature__ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;flex:none;
  background:var(--blue-050);color:var(--blue-600)}
:root[data-theme="dark"] .feature__ic{background:var(--blue-900)}
.feature__ic svg{width:22px;height:22px}
.feature h3{font-size:1.05rem;margin-bottom:.2rem}
.feature p{margin:0;color:var(--text-2);font-size:.95rem}

/* Media card 3D (para problema/transformación/nosotros) */
.media-card{position:relative;border-radius:var(--r-xl);padding:clamp(1.5rem,3vw,2.5rem);
  background:linear-gradient(155deg,var(--blue-600),var(--blue-900));color:#fff;box-shadow:var(--sh-lg);
  overflow:hidden;transform-style:preserve-3d}
.media-card::after{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 80% 10%,rgba(248,152,40,.35),transparent 45%),
  radial-gradient(circle at 10% 90%,rgba(0,114,187,.5),transparent 45%);pointer-events:none}
.media-card__inner{position:relative;z-index:1}
.media-card .kpi{display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:1.4rem}
.media-card .kpi div span{display:block}
.media-card .kpi b{font-family:var(--f-head);font-size:1.7rem;font-weight:800;color:#fff}
.media-card .kpi small{color:var(--blue-100);font-size:.8rem}

/* Retrato / foto slot */
.portrait{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-lg);
  background:linear-gradient(160deg,var(--blue-100),var(--blue-050));aspect-ratio:4/5}
:root[data-theme="dark"] .portrait{background:linear-gradient(160deg,#0e2c48,#0a2036)}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait__ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.6rem;color:var(--blue-600);text-align:center;padding:2rem}
.portrait__ph svg{width:64px;height:64px;opacity:.5}
.portrait__ph span{font-family:var(--f-head);font-weight:700;font-size:.85rem;opacity:.7;max-width:22ch}
.portrait__badge{position:absolute;left:1rem;bottom:1rem;right:1rem;background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--r-md);padding:.85rem 1.1rem;
  box-shadow:var(--sh-md);display:flex;align-items:center;gap:.75rem}
.portrait__badge img{height:34px;width:auto}
.portrait__badge b{display:block;font-family:var(--f-head);color:var(--brand-ink);font-size:.95rem}
.portrait__badge small{color:var(--text-3);font-size:.78rem}

/* ----------------------------- Valores ----------------------------------- */
.values{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.value{text-align:center;padding:1.5rem 1rem;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh-xs);transition:transform .3s var(--ease),box-shadow .3s}
.value:hover{transform:translateY(-5px);box-shadow:var(--sh-md)}
.value__ic{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;margin:0 auto .8rem;
  background:var(--blue-050);color:var(--blue-600)}
:root[data-theme="dark"] .value__ic{background:var(--blue-900)}
.value__ic svg{width:26px;height:26px}
.value h3{font-size:1rem}
.value p{font-size:.84rem;color:var(--text-3);margin:.3rem 0 0}

/* ----------------------------- Proceso ----------------------------------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,2rem);position:relative}
.step{position:relative;padding:clamp(1.4rem,2.4vw,2rem);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-sm)}
.step__num{font-family:var(--f-head);font-weight:800;font-size:2.6rem;line-height:1;color:var(--blue-100);
  -webkit-text-stroke:1px var(--blue-300,#7bb9e3);letter-spacing:-.04em}
:root[data-theme="dark"] .step__num{color:#12395c;-webkit-text-stroke:1px #2c6da3}
.step h3{font-size:1.25rem;margin:.6rem 0 .5rem}
.step p{color:var(--text-2);font-size:.96rem;margin:0}
.step__ic{position:absolute;top:1.6rem;right:1.6rem;width:44px;height:44px;border-radius:12px;display:grid;
  place-items:center;background:linear-gradient(150deg,var(--orange-400),var(--orange-600));color:#fff;box-shadow:var(--sh-orange)}
.step__ic svg{width:22px;height:22px}

/* ----------------------------- Testimonios ------------------------------- */
.testis{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.2vw,1.6rem)}
.testi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.7rem;
  box-shadow:var(--sh-sm);display:flex;flex-direction:column;gap:1rem}
.testi__stars{display:flex;gap:.15rem;color:var(--orange-500)}
.testi__stars svg{width:18px;height:18px}
.testi p{font-size:1rem;color:var(--text);margin:0;font-style:italic}
.testi__who{display:flex;align-items:center;gap:.75rem;margin-top:auto}
.testi__av{width:44px;height:44px;border-radius:50%;background:linear-gradient(150deg,var(--blue-400,#2a97dd),var(--blue-700));
  display:grid;place-items:center;color:#fff;font-family:var(--f-head);font-weight:800;flex:none}
.testi__who b{display:block;font-family:var(--f-head);font-size:.95rem;color:var(--brand-ink)}
.testi__who small{color:var(--text-3);font-size:.82rem}

/* ----------------------------- FAQ --------------------------------------- */
.faq{max-width:820px;margin-inline:auto}
.faq__item{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);
  margin-bottom:.85rem;box-shadow:var(--sh-xs);overflow:hidden;transition:border-color .25s,box-shadow .25s}
.faq__item[open]{border-color:var(--blue-200);box-shadow:var(--sh-sm)}
.faq__q{font-family:var(--f-head);font-weight:700;font-size:1.02rem;color:var(--brand-ink);
  padding:1.1rem 3rem 1.1rem 1.3rem;cursor:pointer;position:relative;list-style:none;transition:color .2s}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{content:"";position:absolute;right:1.3rem;top:50%;width:12px;height:12px;
  border-right:2.5px solid var(--blue-600);border-bottom:2.5px solid var(--blue-600);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.faq__item[open] .faq__q::after{transform:translateY(-30%) rotate(225deg)}
.faq__q:hover{color:var(--blue-700)}
.faq__a{padding:0 1.3rem 1.2rem;color:var(--text-2);font-size:.97rem}
.faq__a p{margin:0}

/* ----------------------------- Blog -------------------------------------- */
.posts{grid-template-columns:repeat(3,1fr)}
.post{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-sm);display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s}
.post:hover{transform:translateY(-6px);box-shadow:var(--sh-lg)}
.post__cover{aspect-ratio:16/10;background:linear-gradient(150deg,var(--blue-500),var(--blue-800));position:relative;overflow:hidden}
.post__cover .tag{position:absolute;left:1rem;top:1rem;background:var(--orange-500);color:#fff;
  font-family:var(--f-head);font-weight:700;font-size:.72rem;padding:.3rem .7rem;border-radius:var(--r-pill)}
.post__cover svg{position:absolute;right:-10px;bottom:-10px;width:120px;height:120px;color:rgba(255,255,255,.12)}
.post__body{padding:1.3rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.post__body small{color:var(--text-3);font-size:.8rem;font-weight:600}
.post h3{font-size:1.12rem}
.post__body p{color:var(--text-2);font-size:.92rem;margin:0}
.post .svc__link{margin-top:auto}

/* ----------------------------- CTA band ---------------------------------- */
.cta-band{position:relative;border-radius:var(--r-xl);overflow:hidden;padding:clamp(2.2rem,4vw,3.6rem);
  background:linear-gradient(135deg,var(--blue-600),var(--blue-900));color:#fff;box-shadow:var(--sh-lg);text-align:center}
.cta-band::before{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 15% 20%,rgba(248,152,40,.4),transparent 40%),
  radial-gradient(circle at 85% 80%,rgba(255,255,255,.12),transparent 45%)}
.cta-band__in{position:relative;z-index:1;max-width:60ch;margin-inline:auto}
.cta-band h2{color:#fff;font-size:var(--f-h2)}
.cta-band p{color:var(--blue-100);font-size:var(--f-lead);margin-top:.8rem}
.cta-band .btn-row{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:1.8rem}

/* ----------------------------- Contacto / formulario --------------------- */
.contact__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(1.6rem,3vw,3rem);align-items:start}
.contact__info{display:grid;gap:1rem;align-content:start}
.info-card{display:flex;gap:1rem;align-items:flex-start;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:1.1rem 1.2rem;box-shadow:var(--sh-xs)}
.info-card__ic{width:46px;height:46px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:var(--blue-050);color:var(--blue-600)}
:root[data-theme="dark"] .info-card__ic{background:var(--blue-900)}
.info-card__ic svg{width:22px;height:22px}
.info-card b{font-family:var(--f-head);color:var(--brand-ink);display:block;font-size:.95rem}
.info-card a,.info-card span{color:var(--text-2);font-size:.95rem}
.info-card a:hover{color:var(--orange-600)}

.form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.4rem,2.6vw,2.2rem);box-shadow:var(--sh-md)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{margin-bottom:1.05rem;display:flex;flex-direction:column;gap:.4rem}
.field label{font-family:var(--f-head);font-weight:700;font-size:.85rem;color:var(--brand-ink)}
.field label .req{color:var(--orange-600)}
.field input,.field select,.field textarea{font-family:var(--f-body);font-size:1rem;color:var(--text);
  background:var(--surface-2);border:1.5px solid var(--line-2);border-radius:var(--r-sm);padding:.8rem .95rem;
  transition:border-color .2s,box-shadow .2s,background .2s;width:100%}
.field textarea{resize:vertical;min-height:120px}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue-500);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--blue-500) 18%,transparent);background:var(--surface)}
.field--invalid input,.field--invalid select,.field--invalid textarea{border-color:#d92d20;
  box-shadow:0 0 0 4px rgba(217,45,32,.14)}
.field__err{color:#d92d20;font-size:.8rem;font-weight:600;min-height:0}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;color:var(--text-2);margin-bottom:1rem}
.consent input{margin-top:.2rem;width:20px;height:20px;flex:none;accent-color:var(--blue-600)}
.consent a{font-weight:700;text-decoration:underline}
.form__choose{font-size:.88rem;color:var(--text-2);margin:.2rem 0 .7rem;text-align:center}
.form__choose strong{color:var(--brand-ink)}
.form__actions{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.form__actions .btn{width:100%}
.form__note{font-size:.82rem;color:var(--text-3);margin-top:.9rem;display:flex;gap:.5rem;align-items:flex-start}
.form__note svg{width:16px;height:16px;flex:none;margin-top:.15rem;color:var(--blue-500)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__success{display:none;text-align:center;padding:1rem}
.form__success.show{display:block}
.form__success .ok{width:66px;height:66px;border-radius:50%;background:linear-gradient(150deg,#12b76a,#039855);
  display:grid;place-items:center;margin:0 auto 1rem;color:#fff;box-shadow:0 12px 30px -10px rgba(3,152,85,.6)}
.form__success .ok svg{width:34px;height:34px}
.form.is-sent .form__body{display:none}

/* ----------------------------- Footer ------------------------------------ */
.footer{background:linear-gradient(180deg,var(--blue-900),var(--blue-950));color:#c9dcec;
  padding-top:clamp(3rem,5vw,4.5rem);position:relative;overflow:hidden}
.footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2rem}
.footer__brand img{height:52px;width:auto;margin-bottom:1rem}
.footer__brand p{color:#9fbdd6;font-size:.92rem;max-width:34ch}
.footer__col-title{font-family:var(--f-head);color:#fff;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 1.1rem;font-weight:700}
.footer__links a{display:block;color:#b9d1e6;padding:.32rem 0;font-size:.94rem}
.footer__links a:hover{color:var(--orange-400)}
.footer__contact li{display:flex;gap:.6rem;align-items:flex-start;margin-bottom:.7rem;font-size:.92rem;color:#b9d1e6}
.footer__contact svg{width:18px;height:18px;flex:none;margin-top:.15rem;color:var(--orange-400)}
.footer__contact a{color:#b9d1e6}
.footer__contact a:hover{color:var(--orange-400)}
.footer__social{display:flex;gap:.6rem;margin-top:1rem}
.footer__social a{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,255,255,.08);color:#dcebf7;transition:background .2s,transform .2s}
.footer__social a:hover{background:var(--orange-500);color:#fff;transform:translateY(-3px)}
.footer__social svg{width:20px;height:20px}
.hablamos{display:inline-flex;align-items:center;gap:.5rem;background:rgba(248,152,40,.16);
  border:1px solid rgba(248,152,40,.4);color:#ffd8a6;border-radius:var(--r-pill);padding:.4rem .9rem;
  font-family:var(--f-head);font-weight:700;font-size:.82rem;margin-top:1rem}
.footer__legal{margin-top:clamp(2rem,4vw,3rem);padding:1.6rem 0;border-top:1px solid rgba(255,255,255,.12)}
.footer__legal .disclaimer{font-size:.78rem;color:#8fb0cb;line-height:1.6;max-width:none;margin-bottom:1.2rem}
.footer__legal .disclaimer strong{color:#c9dcec}
.footer__bottom{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  font-size:.82rem;color:#8fb0cb}
.footer__bottom nav{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem}
.footer__bottom nav a{color:#a9c6dd}
.footer__bottom nav a:hover{color:var(--orange-400)}

/* ----------------------------- Flotantes --------------------------------- */
.floats{position:fixed;right:clamp(1rem,3vw,1.6rem);bottom:clamp(1rem,3vw,1.6rem);z-index:90;
  display:flex;flex-direction:column;gap:.7rem;align-items:flex-end}
.fab{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;border:none;
  box-shadow:var(--sh-md);transition:transform .25s var(--ease),box-shadow .25s;position:relative}
.fab:hover{transform:translateY(-3px) scale(1.05)}
.fab svg{width:28px;height:28px}
.fab--wa{background:#0e7a3d;color:#fff} /* icono blanco: 5.43:1 (WCAG 1.4.11 pide ≥3:1) */
.fab--chat{background:linear-gradient(150deg,var(--blue-500),var(--blue-700));color:#fff}
.fab--top{width:46px;height:46px;background:var(--surface);color:var(--blue-700);border:1px solid var(--line-2);
  opacity:0;pointer-events:none;transform:translateY(10px)}
.fab--top.show{opacity:1;pointer-events:auto;transform:none}
.fab--top svg{width:22px;height:22px}
.fab__badge{position:absolute;top:-2px;right:-2px;width:14px;height:14px;border-radius:50%;
  background:var(--orange-500);border:2px solid var(--bg);animation:pulse 2.4s var(--ease) infinite}

/* ----------------------------- Chat concierge ---------------------------- */
.chat__panel{position:fixed;right:clamp(1rem,3vw,1.6rem);bottom:calc(56px + clamp(1rem,3vw,1.6rem) + 1rem);
  width:min(370px,calc(100vw - 2rem));height:min(540px,70vh);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);z-index:95;display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(20px) scale(.96);opacity:0;pointer-events:none;visibility:hidden;
  transition:transform .3s var(--ease-out),opacity .3s,visibility .3s}
.chat__panel.open{transform:none;opacity:1;pointer-events:auto;visibility:visible}
.chat__head{display:flex;align-items:center;gap:.75rem;padding:.9rem 1rem;
  background:linear-gradient(135deg,var(--blue-600),var(--blue-800));color:#fff}
/* Logo símbolo BLANCO sobre la cabecera azul del chat (uso válido del brandbook) */
.chat__head img{width:40px;height:40px;flex:none}
.chat__head b{font-family:var(--f-head);font-size:.95rem;display:block}
.chat__head small{font-size:.75rem;color:#bfe0f5;display:flex;align-items:center;gap:.35rem}
/* Punto de marca (naranja), no un "online" verde: no hay una persona conectada */
.chat__head small::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange-500);box-shadow:0 0 0 3px rgba(248,152,40,.3)}
.chat__close{margin-left:auto;background:rgba(255,255,255,.15);border:none;color:#fff;width:40px;height:40px;
  border-radius:50%;display:grid;place-items:center}
.chat__close svg{width:18px;height:18px}
.chat__body{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.7rem;background:var(--bg)}
.msg{max-width:82%;padding:.7rem .95rem;border-radius:16px;font-size:.92rem;line-height:1.5;animation:msgin .3s var(--ease)}
.msg.bot{align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:5px;color:var(--text)}
.msg.user{align-self:flex-end;background:var(--blue-600);color:#fff;border-bottom-right-radius:5px}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;padding:.2rem 0}
.chip{background:var(--surface);border:1.5px solid var(--blue-200);color:var(--blue-700);border-radius:var(--r-pill);
  padding:.45rem .85rem;font-family:var(--f-head);font-weight:700;font-size:.8rem;transition:background .2s,color .2s}
.chip:hover{background:var(--blue-600);color:#fff;border-color:var(--blue-600)}
/* Elección final del chat: WhatsApp o llamada */
.chip--wa,.chip--call{color:#fff;border:none;padding:.6rem 1rem;font-size:.84rem}
.chip--wa{background:linear-gradient(135deg,#0e7a3d,#0b6b34)}
.chip--wa:hover{background:linear-gradient(135deg,#0b6b34,#095828);color:#fff}
.chip--call{background:linear-gradient(135deg,var(--blue-500),var(--blue-700))}
.chip--call:hover{background:linear-gradient(135deg,var(--blue-600),var(--blue-800));color:#fff}
.chat__foot{display:flex;gap:.5rem;padding:.75rem;border-top:1px solid var(--line);background:var(--surface)}
.chat__foot textarea{flex:1;resize:none;height:42px;border:1.5px solid var(--line-2);border-radius:var(--r-md);
  padding:.55rem .8rem;font-family:var(--f-body);font-size:.92rem;background:var(--surface-2);color:var(--text)}
.chat__foot textarea:focus{outline:none;border-color:var(--blue-500)}
.chat__send{width:44px;height:44px;border-radius:12px;border:none;background:var(--blue-600);color:#fff;flex:none;display:grid;place-items:center}
.chat__send svg{width:20px;height:20px}
.typing{display:flex;gap:4px;padding:.8rem .95rem;align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.typing span{width:7px;height:7px;border-radius:50%;background:var(--gray);animation:blink 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}

/* ----------------------------- Cookie banner ----------------------------- */
.cookie{position:fixed;left:clamp(1rem,3vw,1.6rem);bottom:clamp(1rem,3vw,1.6rem);z-index:96;
  max-width:440px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);padding:1.3rem;transform:translateY(20px);opacity:0;pointer-events:none;
  visibility:hidden;transition:transform .4s var(--ease-out),opacity .4s,visibility .4s}
.cookie.show{transform:none;opacity:1;pointer-events:auto;visibility:visible}
.cookie h4{font-size:1.02rem;margin-bottom:.4rem;display:flex;align-items:center;gap:.5rem}
.cookie h4 svg{width:22px;height:22px;color:var(--blue-600)}
.cookie p{font-size:.86rem;color:var(--text-2);margin:0 0 1rem}
.cookie p a{font-weight:700;text-decoration:underline}
.cookie__btns{display:flex;gap:.6rem;flex-wrap:wrap}
.cookie__btns .btn{flex:1;min-width:120px}

/* ----------------------------- Legal pages ------------------------------- */
.legal-hero{padding-top:calc(var(--header-h) + clamp(2rem,5vw,3.5rem));padding-bottom:clamp(1.5rem,3vw,2.5rem);
  background:linear-gradient(180deg,var(--bg-2),var(--bg))}
.legal-body{max-width:820px;margin-inline:auto}
.legal-body h2{font-size:var(--f-h3);margin:2.2rem 0 .8rem;padding-top:.5rem}
.legal-body h3{font-size:var(--f-h4);margin:1.5rem 0 .5rem;color:var(--text)}
.legal-body p,.legal-body li{color:var(--text-2);font-size:1rem}
.legal-body ul{list-style:disc;padding-left:1.4rem;margin:0 0 1rem}
.legal-body li{margin-bottom:.5rem}
.legal-body strong{color:var(--text)}
.legal-body .updated{color:var(--text-3);font-size:.9rem;font-weight:600}
.legal-toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:1.2rem 1.4rem;margin-bottom:2rem}
.legal-toc b{font-family:var(--f-head);font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;color:var(--blue-700)}
.legal-toc a{display:block;padding:.25rem 0;font-size:.94rem}
.callout{background:var(--blue-050);border-left:4px solid var(--blue-500);border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:1rem 1.2rem;margin:1.2rem 0}
:root[data-theme="dark"] .callout{background:var(--blue-900)}
.callout p{margin:0;font-size:.94rem;color:var(--text-2)}
.callout--warn{background:#fff5e9;border-left-color:var(--orange-500)}
:root[data-theme="dark"] .callout--warn{background:#3a2a12}

/* ----------------------------- Reveal (IntersectionObserver) ------------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
/* Sin JS (theme.js añade .js antes del paint): mostrar todo el contenido */
html:not(.js) .reveal{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
.reveal[data-delay="4"]{transition-delay:.32s}
.reveal[data-delay="5"]{transition-delay:.40s}

/* ----------------------------- Keyframes --------------------------------- */
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes pulseGlow{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.9;transform:scale(1.08)}}
@keyframes float1{0%,100%{transform:translateZ(90px) translateY(0)}50%{transform:translateZ(90px) translateY(-14px)}}
@keyframes float2{0%,100%{transform:translateZ(120px) translateY(0)}50%{transform:translateZ(120px) translateY(-18px)}}
@keyframes float3{0%,100%{transform:translateZ(70px) translateY(0)}50%{transform:translateZ(70px) translateY(-11px)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(248,152,40,.6)}70%{box-shadow:0 0 0 10px rgba(248,152,40,0)}100%{box-shadow:0 0 0 0 rgba(248,152,40,0)}}
@keyframes msgin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes blink{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* ----------------------------- Responsive -------------------------------- */
@media (max-width:1024px){
  .hero__grid{grid-template-columns:1fr;gap:2.5rem}
  .hero__visual{order:-1;min-height:340px}
  .scene{width:min(80%,360px)}
  .services__grid{grid-template-columns:repeat(2,1fr)}
  .values{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
  .split--reverse .split__media{order:0}
  .contact__grid{grid-template-columns:1fr}
}
@media (max-width:860px){
  .nav,.header__cta{display:none}
  .nav-toggle{display:inline-flex}
  .posts,.testis{grid-template-columns:1fr}
}
@media (max-width:620px){
  :root{--header-h:66px}
  .services__grid{grid-template-columns:1fr}
  .values{grid-template-columns:repeat(2,1fr)}
  .footer__top{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  .form__actions{grid-template-columns:1fr}
  .hero__cta .btn{flex:1;min-width:0}
  .chip3d{font-size:.74rem;padding:.5rem .65rem}
  .stats{gap:1.2rem}
  /* En móvil: copy primero, la escena decorativa después → CTA sobre el pliegue */
  .hero__visual{order:0;min-height:280px;margin-top:.5rem}
  .scene{width:min(72%,300px)}
  /* Banner de cookies por encima de los botones flotantes (no los tapa) */
  .cookie{left:.7rem;right:.7rem;max-width:none;bottom:calc(clamp(1rem,3vw,1.6rem) + 132px)}
}
@media (max-width:400px){
  .values{grid-template-columns:1fr}
}

/* Respeta reduced-motion en TODO */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
  .scene__core img,.ring-1,.chip3d,.orb,.marquee__track,.fab__badge{animation:none !important}
}

/* Print */
@media print{.header,.floats,.chat__panel,.cookie,.marquee,.bg-orbs,.dot-grid{display:none !important}
  body{color:#000;background:#fff}}

/* =========================================================================
   ▓▓▓ SISTEMA "PENDIENTE DE INFORMACIÓN" — SOLO PÁGINA MODELO ▓▓▓
   El fucsia es DELIBERADAMENTE ajeno a la paleta de marca: resalta y hace
   imposible publicarlo por error.
   ▸ PARA PUBLICAR: borra este bloque y todo el HTML marcado con
     data-pending / class="pending-*" / class="photo-slot". Ver README §8.
   ========================================================================= */
:root{
  --pending:#E5007E; --pending-dark:#B00062; --pending-bg:#fff0f7;
  --pending-ink:#8a0049; --pending-line:#ffb3d9;
}
:root[data-theme="dark"]{
  --pending-bg:#3d0a26; --pending-ink:#ffc2e0; --pending-line:#7d1a4f;
}

/* --- Modo por defecto: LIMPIO (tal como se publicará) ---------------------
   Los marcadores solo aparecen si <html> tiene .show-pending (lo enciende el
   switch flotante). Se usa html:not(.show-pending) —y no un display:revert— para
   que cada elemento conserve su propio display al reaparecer. */
html:not(.show-pending) [data-pending]{display:none !important}
html.show-pending [data-clean]{display:none !important}

/* Barra superior de aviso (bajo el header fijo) */
.pending-bar{margin-top:var(--header-h);
  background:repeating-linear-gradient(45deg,var(--pending),var(--pending) 14px,var(--pending-dark) 14px,var(--pending-dark) 28px);
  padding:.6rem 0;position:relative;z-index:2}
/* Solo cuando la barra se ve, el hero deja de compensar el header */
html.show-pending .pending-bar + .hero{padding-top:clamp(2rem,5vw,4rem)}

/* Switch flotante Ver limpio / Ver pendientes */
.pending-switch{position:fixed;left:clamp(1rem,3vw,1.6rem);bottom:clamp(1rem,3vw,1.6rem);z-index:98;
  display:inline-flex;align-items:center;gap:.45rem;background:var(--surface);border:2px solid var(--pending);
  color:var(--pending);border-radius:var(--r-pill);padding:.6rem 1rem;font-family:var(--f-head);
  font-weight:800;font-size:.74rem;letter-spacing:.04em;box-shadow:var(--sh-md);min-height:44px;
  transition:transform .2s var(--ease),background .2s,color .2s}
.pending-switch:hover{transform:translateY(-2px)}
.pending-switch svg{width:16px;height:16px;flex:none}
html.show-pending .pending-switch{background:var(--pending);color:#fff}
.pending-switch .ps-on{display:none}
html.show-pending .pending-switch .ps-off{display:none}
html.show-pending .pending-switch .ps-on{display:inline}
/* El banner de cookies se sube para no chocar con el switch */
.cookie{bottom:calc(clamp(1rem,3vw,1.6rem) + 64px)}
@media (max-width:620px){.cookie{bottom:calc(clamp(1rem,3vw,1.6rem) + 132px)}}
.pending-bar__in{display:flex;gap:.6rem;align-items:center;justify-content:center;text-align:center;
  background:rgba(0,0,0,.22);color:#fff;border-radius:var(--r-pill);padding:.5rem 1.1rem;
  font-family:var(--f-head);font-weight:700;font-size:.82rem;line-height:1.35;max-width:900px;margin-inline:auto}
.pending-bar__in svg{width:20px;height:20px;flex:none}

/* Chip inline "PENDIENTE" */
.pending-chip{display:inline-flex;align-items:center;gap:.3rem;background:var(--pending);color:#fff;
  border-radius:var(--r-pill);padding:.18rem .55rem;font-family:var(--f-head);font-weight:800;
  font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;vertical-align:middle;white-space:nowrap}
.pending-chip svg{width:12px;height:12px}

/* Letrero / nota de pendiente */
.pending-note{border:2px dashed var(--pending);background:var(--pending-bg);color:var(--pending-ink);
  border-radius:var(--r-md);padding:.85rem 1rem;margin:.9rem 0 0;font-size:.85rem;line-height:1.5}
.pending-note strong{color:var(--pending)}
.pending-note__head{display:flex;align-items:center;gap:.45rem;font-family:var(--f-head);font-weight:800;
  color:var(--pending);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.35rem}
.pending-note__head svg{width:15px;height:15px;flex:none}

/* Texto marcado como pendiente/ejemplo — en modo limpio se ve normal, sin resaltar
   (el contenido sigue ahí: es el ejemplo de cómo quedará publicado). */
html.show-pending .pending-text{background:var(--pending-bg);box-shadow:inset 0 -2px 0 var(--pending);
  color:var(--pending-ink);border-radius:3px;padding:0 .15rem}

/* Etiqueta "EJEMPLO" — SIEMPRE visible, NO depende del switch.
   Ningún contenido inventado (testimonios, horario) puede leerse como real,
   ni siquiera en la vista limpia. Se borra junto con el contenido de ejemplo. */
.sample-tag{display:inline-flex;align-items:center;gap:.28rem;background:var(--surface-2);
  border:1px dashed var(--line-2);color:var(--text-3);border-radius:var(--r-pill);
  padding:.16rem .55rem;font-family:var(--f-head);font-weight:700;font-size:.62rem;
  letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.sample-tag svg{width:11px;height:11px;flex:none}
.testi .sample-tag{position:absolute;top:1rem;right:1rem}
.testi{position:relative}

/* Slot de foto faltante */
.photo-slot{position:relative;display:grid;place-items:center;gap:.3rem;text-align:center;
  border:2px dashed var(--pending);background:var(--pending-bg);color:var(--pending);border-radius:50%;
  width:56px;height:56px;flex:none}
.photo-slot svg{width:22px;height:22px}
.photo-slot__tag{position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);background:var(--pending);
  color:#fff;font-family:var(--f-head);font-weight:800;font-size:.52rem;letter-spacing:.06em;
  padding:.1rem .35rem;border-radius:var(--r-pill);white-space:nowrap}

@media (max-width:620px){
  .pending-bar__in{font-size:.74rem;padding:.5rem .8rem}
}