/* =========================================================
   ELACE — Sistema de diseño v2  (estilo editorial/premium)
   Base blanca · Acentos azul / verde / naranja (logo)
   Display: Bricolage Grotesque · Texto: Plus Jakarta Sans
   ========================================================= */

:root{
  --blue:#1366b3; --blue-700:#0c4a87; --blue-900:#06325e;
  --green:#46ad3a; --green-700:#1f8a52;
  --orange:#f7941d; --orange-600:#e87d12;

  --ink:#0d2033; --ink-2:#16334d;
  --body:#54626f; --muted:#8492a0;
  --white:#fff; --tint:#f3f7fb; --tint-green:#f1f9f0;
  --line:#e6edf3;

  --grad-brand:linear-gradient(120deg,var(--blue-700),var(--blue) 38%,var(--green-700) 74%,var(--green));
  --grad-iris:linear-gradient(90deg,var(--blue),var(--green-700) 48%,var(--green) 70%,var(--orange));
  --grad-warm:linear-gradient(120deg,var(--orange),var(--green));

  --sh-sm:0 4px 14px rgba(13,32,51,.06);
  --sh-md:0 18px 44px rgba(13,32,51,.10);
  --sh-lg:0 34px 80px rgba(13,32,51,.18);

  --r:18px; --r-lg:26px; --r-xl:34px;
  --maxw:1240px; --header-h:96px;
  --font-d:'Bricolage Grotesque',system-ui,sans-serif;
  --font-b:'Plus Jakarta Sans',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }
body{ font-family:var(--font-b); color:var(--body); background:var(--white); line-height:1.7; font-size:17px; overflow-x:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
h1,h2,h3,h4,h5{ font-family:var(--font-d); color:var(--ink); line-height:1.06; font-weight:700; letter-spacing:-.02em; overflow-wrap:break-word; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:26px; }
.section{ padding:clamp(70px,9vw,128px) 0; position:relative; }
.section--tint{ background:var(--tint); }
.section--green{ background:var(--tint-green); }
.section--ink{ background:var(--ink); color:#aebccb; }
.section--ink h1,.section--ink h2,.section--ink h3,.section--ink h4{ color:#fff; }

.eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-d); font-weight:600;
  font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; color:var(--blue);
  background:rgba(19,102,179,.08); padding:8px 16px; border-radius:999px; margin-bottom:22px; }
.eyebrow::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--grad-iris); }
.section--green .eyebrow{ color:var(--green-700); background:rgba(31,138,82,.1); }
.section--ink .eyebrow{ color:#fff; background:rgba(255,255,255,.1); }

.h-xl{ font-size:clamp(2.6rem,6vw,4.6rem); letter-spacing:-.03em; }
.h-lg{ font-size:clamp(2rem,4.2vw,3.2rem); }
.h-md{ font-size:clamp(1.5rem,2.6vw,2.1rem); }
.lead{ font-size:clamp(1.06rem,1.5vw,1.24rem); color:var(--body); max-width:62ch; }
.text-center{ text-align:center; } .mx-auto{ margin-inline:auto; }
.hl{ color:var(--ink); background-image:linear-gradient(90deg,rgba(247,148,29,.5),rgba(70,173,58,.45)); background-repeat:no-repeat; background-position:0 92%; background-size:100% .36em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.grad-text{ background:var(--grad-iris); -webkit-background-clip:text; background-clip:text; color:transparent; }
.section-head{ max-width:720px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.head-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; }

/* ---------- Botones ---------- */
.btn{ display:inline-flex; align-items:center; gap:12px; font-family:var(--font-d); font-weight:600; font-size:1rem;
  padding:16px 16px 16px 28px; border-radius:999px; cursor:pointer; border:0; position:relative; white-space:nowrap;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s; }
.btn .ic-circ{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto; transition:transform .35s var(--ease); }
.btn .ic-circ svg{ width:17px; height:17px; }
.btn:hover .ic-circ{ transform:rotate(-45deg); }
.btn--solid{ background:var(--ink); color:#fff; } .btn--solid .ic-circ{ background:var(--orange); color:#fff; }
.btn--solid:hover{ transform:translateY(-3px); box-shadow:var(--sh-md); }
.btn--orange{ background:var(--orange); color:#fff; } .btn--orange .ic-circ{ background:rgba(255,255,255,.22); color:#fff; }
.btn--orange:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(247,148,29,.4); }
.btn--brand{ background:var(--grad-brand); background-size:160% 160%; color:#fff; } .btn--brand .ic-circ{ background:rgba(255,255,255,.22); }
.btn--brand:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(19,102,179,.34); background-position:100% 0; }
.btn--light{ background:#fff; color:var(--ink); box-shadow:var(--sh-sm); } .btn--light .ic-circ{ background:var(--orange); color:#fff; }
.btn--light:hover{ transform:translateY(-3px); box-shadow:var(--sh-md); }
.btn--ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line); padding:15px 26px; }
.btn--ghost:hover{ border-color:var(--ink); transform:translateY(-3px); }
.btn--ghost-w{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.45); padding:15px 26px; }
.btn--ghost-w:hover{ background:#fff; color:var(--ink); }
.link-arrow{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-d); font-weight:600; color:var(--blue); }
.link-arrow svg{ width:16px; height:16px; transition:transform .3s; } .link-arrow:hover svg{ transform:translateX(5px); }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{ position:fixed; inset:0 0 auto 0; z-index:1000; height:var(--header-h); display:flex; align-items:center;
  transition:height .35s var(--ease), background .35s, box-shadow .35s; }
.site-header::before{ content:""; position:absolute; inset:0; background:#fff; opacity:1; transition:box-shadow .35s, border-color .35s; border-bottom:1px solid var(--line); }
.site-header.scrolled{ height:72px; } .site-header.scrolled::before{ box-shadow:var(--sh-sm); }
.header-inner{ position:relative; width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:26px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:center; gap:13px; font-family:var(--font-d); font-weight:800; font-size:1.62rem; letter-spacing:.02em; }
.brand .brand-mark{ height:50px; width:auto; flex:0 0 auto; }
.site-header.scrolled .brand .brand-mark{ height:42px; }
.footer-brand .brand .brand-mark{ height:46px; }
.brand .e1{ color:var(--blue-700); } .brand .e2{ color:var(--green); }
.nav{ display:flex; align-items:center; gap:4px; }
.nav-link{ font-family:var(--font-d); font-weight:500; font-size:1rem; color:var(--ink); padding:11px 17px; border-radius:999px; position:relative; display:inline-flex; align-items:center; gap:6px; transition:color .25s, background .25s; }
.nav-link:hover,.nav-link.active{ color:var(--blue); background:rgba(19,102,179,.07); }
.nav-link .chev{ width:14px; height:14px; transition:transform .3s; }
.has-dropdown{ position:relative; } .has-dropdown.open .chev{ transform:rotate(180deg); }
.dropdown{ position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%) translateY(10px); background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:var(--sh-lg); width:320px; padding:12px; opacity:0; visibility:hidden; transition:opacity .3s var(--ease), transform .3s var(--ease); }
.has-dropdown.open .dropdown{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.dropdown::before{ content:""; position:absolute; top:-7px; left:50%; transform:translateX(-50%) rotate(45deg); width:14px; height:14px; background:#fff; border-left:1px solid var(--line); border-top:1px solid var(--line); }
.drop-item{ display:flex; align-items:center; gap:13px; padding:12px 14px; border-radius:14px; transition:background .2s; font-size:.95rem; color:var(--ink); font-weight:500; }
.drop-item:hover{ background:var(--tint); }
.drop-ico{ width:38px; height:38px; flex:0 0 auto; border-radius:11px; display:grid; place-items:center; color:#fff; } .drop-ico svg{ width:19px; height:19px; }
.header-cta{ display:flex; align-items:center; gap:18px; }
.header-phone{ display:flex; align-items:center; gap:11px; font-family:var(--font-d); font-weight:600; color:var(--ink); font-size:.96rem; }
.header-phone .pic{ width:42px; height:42px; border-radius:50%; background:var(--tint); display:grid; place-items:center; color:var(--blue); } .header-phone .pic svg{ width:18px; height:18px; }
.header-phone small{ display:block; font-weight:500; font-size:.72rem; color:var(--muted); font-family:var(--font-b); }
.burger{ display:none; width:48px; height:48px; border:1px solid var(--line); border-radius:14px; background:#fff; cursor:pointer; position:relative; }
.burger span{ position:absolute; left:13px; right:13px; height:2px; background:var(--ink); border-radius:2px; transition:.3s var(--ease); }
.burger span:nth-child(1){ top:17px; } .burger span:nth-child(2){ top:23px; } .burger span:nth-child(3){ top:29px; }
.burger.active span:nth-child(1){ top:23px; transform:rotate(45deg); }
.burger.active span:nth-child(2){ opacity:0; } .burger.active span:nth-child(3){ top:23px; transform:rotate(-45deg); }
.mobile-nav{ position:fixed; inset:0; z-index:999; pointer-events:none; }
.mobile-nav .scrim{ position:absolute; inset:0; background:rgba(13,32,51,.5); opacity:0; transition:opacity .35s; }
.mobile-nav .panel{ position:absolute; top:0; right:0; bottom:0; width:min(390px,88vw); background:#fff; box-shadow:var(--sh-lg); transform:translateX(100%); transition:transform .4s var(--ease); padding:104px 28px 30px; overflow-y:auto; }
.mobile-nav.open{ pointer-events:auto; } .mobile-nav.open .scrim{ opacity:1; } .mobile-nav.open .panel{ transform:translateX(0); }
.m-link{ display:block; font-family:var(--font-d); font-weight:600; font-size:1.18rem; color:var(--ink); padding:15px 0; border-bottom:1px solid var(--line); }
.m-sub{ padding:6px 0 10px 14px; } .m-sub a{ display:block; padding:9px 0; color:var(--body); } .m-sub a:hover{ color:var(--blue); }

/* =========================================================
   HERO (horizontal a pantalla completa)
   ========================================================= */
.hero{ position:relative; min-height:92vh; display:flex; align-items:center; padding:calc(var(--header-h) + 50px) 0 70px; overflow:hidden; color:#fff; }
.hero-bg{ position:absolute; inset:0; z-index:0; } .hero-bg img{ width:100%; height:100%; object-fit:cover; }
.hero-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(6,50,94,.93), rgba(12,74,135,.8) 48%, rgba(31,138,82,.62)); }
.hero-fallback{ position:absolute; inset:0; background:var(--grad-brand); }
.hero .container{ position:relative; z-index:2; }
.hero .eyebrow{ background:rgba(255,255,255,.14); color:#fff; }
.hero .hl, .subhero .hl, .cta-band .hl, .section--ink .hl{ color:#fff; }
.hero h1{ color:#fff; max-width:22ch; }
.hero .lead{ color:rgba(255,255,255,.92); margin-top:24px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-top:36px; }
.hero-trust{ display:flex; flex-wrap:wrap; gap:18px 30px; margin-top:46px; padding-top:34px; border-top:1px solid rgba(255,255,255,.18); }
.hero-trust .ht{ display:flex; align-items:center; gap:13px; }
.hero-trust .ht-ico{ width:48px; height:48px; flex:0 0 auto; border-radius:13px; background:rgba(255,255,255,.16); display:grid; place-items:center; color:#fff; } .hero-trust .ht-ico svg{ width:23px; height:23px; }
.hero-trust b{ font-family:var(--font-d); font-weight:700; font-size:1.35rem; line-height:1; color:#fff; display:block; }
.hero-trust span{ font-size:.84rem; color:rgba(255,255,255,.78); }

/* ---------- Marquee ---------- */
.marquee{ background:var(--ink); padding:22px 0; overflow:hidden; }
.marquee-track{ display:flex; gap:0; width:max-content; animation:scroll-x 26s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-item{ display:inline-flex; align-items:center; gap:18px; padding:0 28px; font-family:var(--font-d); font-weight:600; font-size:1.45rem; color:#fff; white-space:nowrap; }
.marquee-item .star{ color:var(--orange); display:grid; place-items:center; } .marquee-item .star svg{ width:22px; height:22px; }

/* ---------- subhero ---------- */
.subhero{ position:relative; padding:calc(var(--header-h) + 70px) 0 76px; overflow:hidden; color:#fff; }
.subhero .sh-bg{ position:absolute; inset:0; z-index:0; } .subhero .sh-bg img{ width:100%; height:100%; object-fit:cover; }
.subhero .sh-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg,rgba(6,50,94,.94),rgba(12,74,135,.8) 55%,rgba(31,138,82,.62)); }
.subhero .sh-fallback{ position:absolute; inset:0; background:var(--grad-brand); }
.subhero .container{ position:relative; z-index:2; }
.subhero h1{ color:#fff; } .subhero .lead{ color:rgba(255,255,255,.9); }
.subhero .eyebrow{ background:rgba(255,255,255,.14); color:#fff; }
.crumbs{ display:inline-flex; flex-wrap:wrap; max-width:100%; gap:9px; align-items:center; font-family:var(--font-d); font-size:.86rem; color:rgba(255,255,255,.82); margin-bottom:18px; background:rgba(255,255,255,.1); padding:8px 16px; border-radius:999px; }
.crumbs a:hover{ color:#fff; } .crumbs span{ opacity:.55; }

/* =========================================================
   GRID / CARDS
   ========================================================= */
.grid{ display:grid; gap:26px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

/* service card with image top */
.scard{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; display:flex; flex-direction:column; }
.scard:hover{ transform:translateY(-8px); box-shadow:var(--sh-md); border-color:transparent; }
.scard-media{ position:relative; aspect-ratio:16/11; overflow:hidden; background:var(--grad-brand); }
.scard-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.scard-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(165deg,rgba(13,32,51,.18),rgba(6,50,94,.55)); opacity:1; transition:opacity .5s var(--ease); z-index:1; }
.scard:hover .scard-media::after{ opacity:.4; }
.scard:hover .scard-media img{ transform:scale(1.07); }
.scard-ico{ position:absolute; left:18px; top:18px; width:56px; height:56px; border-radius:16px; display:grid; place-items:center; color:#fff; box-shadow:var(--sh-md); z-index:2; } .scard-ico svg{ width:28px; height:28px; }
.scard-body{ padding:28px 26px 30px; flex:1; display:flex; flex-direction:column; }
.scard-body h3{ font-size:1.32rem; margin-bottom:10px; }
.scard-body p{ font-size:.97rem; }
.scard-body .link-arrow{ margin-top:auto; padding-top:18px; }

/* plain feature card */
.fcard{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:34px 30px; position:relative; overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; }
.fcard::before{ content:""; position:absolute; left:0; top:0; width:100%; height:4px; background:var(--grad-iris); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); }
.fcard:hover{ transform:translateY(-6px); box-shadow:var(--sh-md); border-color:transparent; } .fcard:hover::before{ transform:scaleX(1); }
.fcard .v-ico{ width:58px; height:58px; border-radius:16px; display:grid; place-items:center; color:#fff; margin-bottom:18px; } .fcard .v-ico svg{ width:28px; height:28px; }
.fcard h3{ font-size:1.18rem; margin-bottom:9px; } .fcard p{ font-size:.95rem; }

.ic-blue{ background:linear-gradient(135deg,var(--blue),var(--blue-700)); }
.ic-green{ background:linear-gradient(135deg,var(--green),var(--green-700)); }
.ic-orange{ background:linear-gradient(135deg,var(--orange),var(--orange-600)); }
.ic-teal{ background:linear-gradient(135deg,var(--blue),var(--green-700)); }
.ic-mix{ background:var(--grad-warm); }

/* media + split */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,5vw,76px); align-items:center; }
.split--rev .split-media{ order:-1; }
.media{ position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--grad-brand); box-shadow:var(--sh-md); }
.media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.media:hover img{ transform:scale(1.05); }
.media--wide{ aspect-ratio:16/11; } .media--tall{ aspect-ratio:4/5; } .media--sq{ aspect-ratio:1/1; }
.media-tag{ position:absolute; left:18px; bottom:18px; z-index:2; background:rgba(255,255,255,.94); color:var(--ink); font-family:var(--font-d); font-weight:600; font-size:.82rem; padding:9px 16px; border-radius:999px; backdrop-filter:blur(4px); }

/* overlapping about composition */
.about-art{ position:relative; }
.about-art .a-main{ border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--sh-md); background:var(--grad-brand); }
.about-art .a-main img{ width:100%; height:100%; object-fit:cover; }
.about-art .a-badge{ position:absolute; right:-20px; bottom:40px; background:var(--ink); color:#fff; border-radius:var(--r); padding:24px 26px; text-align:center; box-shadow:var(--sh-lg); }
.about-art .a-badge .num{ font-family:var(--font-d); font-size:2.6rem; line-height:1; background:var(--grad-iris); -webkit-background-clip:text; background-clip:text; color:transparent; }
.about-art .a-badge span{ font-size:.82rem; color:#9fb0c2; display:block; margin-top:4px; max-width:12ch; }
.vm{ display:grid; gap:22px; margin-top:26px; }
.vm-item{ display:flex; gap:16px; }
.vm-item .vm-ico{ width:52px; height:52px; flex:0 0 auto; border-radius:14px; display:grid; place-items:center; color:#fff; } .vm-item .vm-ico svg{ width:25px; height:25px; }
.vm-item h4{ font-size:1.12rem; margin-bottom:4px; } .vm-item p{ font-size:.95rem; }

/* checks */
.checks{ display:grid; gap:14px; margin-top:26px; }
.checks li{ display:flex; gap:14px; align-items:flex-start; font-size:1.02rem; color:var(--body); }
.checks .ck{ flex:0 0 auto; width:28px; height:28px; border-radius:9px; background:var(--tint-green); color:var(--green-700); display:grid; place-items:center; margin-top:3px; } .checks .ck svg{ width:15px; height:15px; }
.checks b{ color:var(--ink); }

/* process */
.proc{ display:grid; gap:0; }
.proc-item{ display:grid; grid-template-columns:auto 1fr; gap:24px; padding:26px 0; border-top:1px solid var(--line); align-items:start; }
.proc-item:last-child{ border-bottom:1px solid var(--line); }
.proc-num{ font-family:var(--font-d); font-weight:700; font-size:1.1rem; width:54px; height:54px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; color:var(--blue); transition:.4s var(--ease); }
.proc-item:hover .proc-num{ background:var(--ink); color:#fff; border-color:var(--ink); transform:scale(1.05); }
.proc-item h3{ font-size:1.3rem; margin-bottom:6px; } .proc-item p{ font-size:.97rem; }

/* projects gallery */
.proj{ position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/5; background:var(--grad-brand); box-shadow:var(--sh-sm); }
.proj img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.proj::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(6,50,94,.86)); }
.proj:hover img{ transform:scale(1.08); }
.proj-info{ position:absolute; left:0; right:0; bottom:0; padding:26px; z-index:2; transform:translateY(14px); opacity:.92; transition:.45s var(--ease); }
.proj:hover .proj-info{ transform:translateY(0); opacity:1; }
.proj-info .cat{ font-family:var(--font-d); font-weight:600; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--orange); }
.proj-info h3{ color:#fff; font-size:1.4rem; margin-top:6px; }
.proj-plus{ position:absolute; top:20px; right:20px; width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.16); backdrop-filter:blur(4px); display:grid; place-items:center; color:#fff; z-index:2; transform:scale(.6); opacity:0; transition:.4s var(--ease); } .proj-plus svg{ width:20px; height:20px; }
.proj:hover .proj-plus{ transform:scale(1); opacity:1; }
.proj--wide{ aspect-ratio:auto; }

/* stats band */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.stat{ text-align:center; }
.stat .num{ font-family:var(--font-d); font-weight:700; font-size:clamp(2.4rem,4.4vw,3.6rem); background:var(--grad-iris); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; }
.stat .lbl{ margin-top:10px; font-size:.94rem; color:#9fb0c2; font-weight:500; }

/* FAQ */
.faq{ display:grid; gap:14px; }
.faq-item{ background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:box-shadow .3s, border-color .3s; }
.faq-item.open{ box-shadow:var(--sh-sm); border-color:transparent; }
.faq-q{ width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:22px 26px; display:flex; align-items:center; justify-content:space-between; gap:18px; font-family:var(--font-d); font-weight:600; font-size:1.1rem; color:var(--ink); }
.faq-q .pm{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:var(--tint); color:var(--blue); display:grid; place-items:center; transition:.35s var(--ease); }
.faq-item.open .faq-q .pm{ background:var(--orange); color:#fff; transform:rotate(135deg); } .faq-q .pm svg{ width:16px; height:16px; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faq-a p{ padding:0 26px 24px; font-size:.98rem; }

/* testimonial */
.quote{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:38px; box-shadow:var(--sh-sm); position:relative; }
.quote .qmark{ font-family:var(--font-d); font-size:5rem; line-height:.7; color:var(--tint); position:absolute; top:20px; right:28px; }
.quote .stars{ display:flex; gap:3px; color:var(--orange); margin-bottom:16px; } .quote .stars svg{ width:19px; height:19px; }
.quote p{ font-size:1.08rem; color:var(--ink); position:relative; z-index:1; }
.quote .who{ margin-top:22px; display:flex; align-items:center; gap:13px; }
.quote .who .av{ width:48px; height:48px; border-radius:50%; background:var(--grad-brand); color:#fff; display:grid; place-items:center; font-family:var(--font-d); font-weight:700; }
.quote .who b{ color:var(--ink); display:block; font-family:var(--font-d); } .quote .who span{ font-size:.85rem; color:var(--muted); }

/* CTA */
.cta-band{ position:relative; overflow:hidden; border-radius:var(--r-xl); padding:clamp(44px,6vw,80px); background:var(--ink); color:#fff; text-align:center; }
.cta-band::before{ content:""; position:absolute; inset:0; background:var(--grad-brand); opacity:.92; }
.cta-band>*{ position:relative; z-index:2; } .cta-band h2{ color:#fff; }
.cta-band .lead{ color:rgba(255,255,255,.92); margin:18px auto 30px; }
.cta-band .blob{ position:absolute; border-radius:50%; filter:blur(50px); opacity:.45; z-index:1; }
.cta-band .b1{ width:320px; height:320px; background:var(--orange); top:-130px; right:-50px; } .cta-band .b2{ width:280px; height:280px; background:var(--green); bottom:-130px; left:-40px; }
.cta-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* =========================================================
   FORMS / CONTACT
   ========================================================= */
.contact-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:start; }
.field{ margin-bottom:20px; }
.field label{ display:block; font-family:var(--font-d); font-weight:600; font-size:.88rem; color:var(--ink); margin-bottom:8px; }
.field input,.field select,.field textarea{ width:100%; padding:15px 17px; border:1.5px solid var(--line); border-radius:13px; font:inherit; color:var(--ink); background:#fff; transition:border-color .25s, box-shadow .25s; }
.field textarea{ resize:vertical; min-height:140px; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:0; border-color:var(--blue); box-shadow:0 0 0 4px rgba(19,102,179,.12); }
.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-note{ font-size:.82rem; color:var(--muted); margin-top:8px; }
.form-ok{ display:none; background:var(--tint-green); border:1px solid #bfe6c4; color:var(--green-700); padding:16px 18px; border-radius:13px; font-weight:600; margin-bottom:20px; } .form-ok.show{ display:block; }
.info-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:28px; box-shadow:var(--sh-sm); margin-bottom:20px; }
.info-row{ display:flex; gap:15px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line); } .info-row:last-child{ border-bottom:0; }
.info-row .ico{ width:46px; height:46px; flex:0 0 auto; border-radius:13px; display:grid; place-items:center; color:#fff; } .info-row .ico svg{ width:21px; height:21px; }
.info-row b{ display:block; color:var(--ink); font-family:var(--font-d); font-size:.96rem; } .info-row span{ font-size:.93rem; }
.map-wrap{ border-radius:var(--r); overflow:hidden; border:1px solid var(--line); aspect-ratio:16/10; background:var(--tint); } .map-wrap iframe{ width:100%; height:100%; border:0; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--ink); color:#9fb0c2; padding:84px 0 0; position:relative; overflow:hidden; }
.footer-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:44px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.09); }
.footer-brand .brand{ color:#fff; margin-bottom:18px; } .footer-brand .brand .e1{ color:#fff; } .footer-brand .brand .e2{ color:var(--green); }
.footer-brand p{ font-size:.94rem; max-width:36ch; }
.f-social{ display:flex; gap:11px; margin-top:20px; }
.f-social a{ width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.07); display:grid; place-items:center; color:#fff; transition:.25s; } .f-social a:hover{ background:var(--grad-brand); transform:translateY(-3px); } .f-social svg{ width:18px; height:18px; }
.f-col h4{ color:#fff; font-size:1rem; margin-bottom:20px; }
.f-col a{ display:block; padding:8px 0; font-size:.93rem; color:#9fb0c2; transition:.2s; } .f-col a:hover{ color:#fff; transform:translateX(4px); }
.f-news p{ font-size:.93rem; margin-bottom:16px; }
.f-news .nl{ display:flex; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:6px 6px 6px 18px; }
.f-news .nl input{ flex:1; background:none; border:0; color:#fff; font:inherit; outline:none; } .f-news .nl input::placeholder{ color:#7f8ea0; }
.f-news .nl button{ width:44px; height:44px; border-radius:50%; border:0; background:var(--orange); color:#fff; cursor:pointer; display:grid; place-items:center; flex:0 0 auto; transition:.25s; } .f-news .nl button:hover{ transform:rotate(-45deg); } .f-news .nl button svg{ width:18px; height:18px; }
.footer-watermark{ font-family:var(--font-d); font-weight:800; font-size:clamp(4rem,17vw,15rem); line-height:.8; letter-spacing:-.04em; text-align:center; padding:36px 0 0; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.07); user-select:none; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:24px 0 30px; font-size:.84rem; color:#7f8ea0; gap:16px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.09); } .footer-bottom a:hover{ color:#fff; }

/* =========================================================
   VIDEO MODAL
   ========================================================= */
.vmodal{ position:fixed; inset:0; z-index:1100; display:grid; place-items:center; padding:24px; opacity:0; visibility:hidden; transition:opacity .3s; }
.vmodal.open{ opacity:1; visibility:visible; }
.vmodal .scrim{ position:absolute; inset:0; background:rgba(6,20,38,.85); }
.vmodal .box{ position:relative; width:min(900px,92vw); aspect-ratio:16/9; background:#000; border-radius:18px; overflow:hidden; box-shadow:var(--sh-lg); transform:scale(.94); transition:transform .35s var(--ease); }
.vmodal.open .box{ transform:scale(1); } .vmodal .box iframe{ width:100%; height:100%; border:0; }
.vmodal .close{ position:absolute; top:-14px; right:-14px; width:44px; height:44px; border-radius:50%; background:#fff; border:0; cursor:pointer; display:grid; place-items:center; z-index:2; box-shadow:var(--sh-md); } .vmodal .close svg{ width:20px; height:20px; color:var(--ink); }

/* =========================================================
   ANIMATIONS
   ========================================================= */
[data-reveal]{ opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.09s; }
[data-reveal][data-delay="2"]{ transition-delay:.18s; }
[data-reveal][data-delay="3"]{ transition-delay:.27s; }
[data-reveal][data-delay="4"]{ transition-delay:.36s; }
@keyframes scroll-x{ to{ transform:translateX(-50%); } }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(70,173,58,.55); } 70%{ box-shadow:0 0 0 12px rgba(70,173,58,0); } 100%{ box-shadow:0 0 0 0 rgba(70,173,58,0); } }
@keyframes ring{ 0%{ transform:scale(1); opacity:.8; } 100%{ transform:scale(1.5); opacity:0; } }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } [data-reveal]{ opacity:1; transform:none; } }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .stats,.hero-stats{ grid-template-columns:repeat(2,1fr); row-gap:34px; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:34px; }
  .hero-grid{ grid-template-columns:1fr; } .hero-visual{ max-width:520px; margin-inline:auto; width:100%; }
}
@media (max-width:920px){
  .nav, .header-phone, .header-cta .btn--solid{ display:none; }
  .burger{ display:block; }
  .split{ grid-template-columns:1fr; } .split--rev .split-media{ order:0; }
  .grid-2{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; gap:34px; }
  .footer-top{ grid-template-columns:1fr; }
  .about-art{ max-width:480px; margin-inline:auto; }
}
@media (max-width:560px){
  body{ font-size:16px; } .container{ padding-inline:18px; }
  .grid-3,.grid-4{ grid-template-columns:1fr; }
  .stats,.hero-stats{ grid-template-columns:1fr 1fr; }
  .marquee-item{ font-size:1.15rem; }
  .row-2{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; text-align:center; }
  .hero-float{ left:0; }
}

/* contacto: métodos directos (sin formulario) */
.methods{ display:grid; gap:14px; margin-bottom:8px; }
.method{ display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.method:hover{ transform:translateY(-3px); box-shadow:var(--sh-md); border-color:transparent; }
.method .ico{ width:54px; height:54px; flex:0 0 auto; border-radius:15px; display:grid; place-items:center; color:#fff; } .method .ico svg{ width:25px; height:25px; }
.method .m-txt{ flex:1; } .method .m-txt small{ display:block; font-size:.8rem; color:var(--muted); } .method .m-txt b{ font-family:var(--font-d); font-size:1.16rem; color:var(--ink); }
.method .m-go{ color:var(--blue); display:grid; place-items:center; } .method .m-go svg{ width:20px; height:20px; transition:transform .3s; } .method:hover .m-go svg{ transform:translateX(4px); }

/* ===== Fixes responsive (móvil) ===== */
.about-art{ max-width:100%; }
.about-art .a-main{ max-width:100%; }
@media (max-width:560px){
  .about-art .a-badge{ right:6px; bottom:8px; padding:15px 18px; }
  .about-art .a-badge .num{ font-size:1.9rem; }
  .hero{ min-height:auto; }
  .scard-ico{ width:50px; height:50px; } .scard-ico svg{ width:25px; height:25px; }
  .h-xl{ font-size:clamp(2.1rem,8vw,2.8rem); }
}
/* evita desbordes horizontales de hijos flex/grid con texto largo */
.hero-trust .ht, .info-row, .method, .vm-item, .checks li, .proc-item{ min-width:0; }
.hero-trust b, .method .m-txt b, .info-row b{ overflow-wrap:break-word; }

/* CLAVE responsive: permitir que columnas grid/flex se encojan y no fuercen ancho */
.grid > *, .split > *, .contact-grid > *, .hero-grid > *, .head-row > *{ min-width:0; }
.split-media{ min-width:0; }