@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:600 800;font-display:swap;src:url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";font-style:normal;font-weight:400 600;font-display:swap;src:url("../fonts/onest-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#0A1128;
  --ink-2:#161F3F;
  --cobalt:#2340E0;
  --cobalt-deep:#1A2FA8;
  --cobalt-tint:#E6EAFC;
  --sun:#FFC83D;
  --sun-deep:#E5A100;
  --sun-tint:#FFF1C7;
  --paper:#F5F7FC;
  --white:#FFFFFF;
  --muted:#4A5373;
  --muted-on-dark:#B9C1E0;
  --line:#D9DFF1;
  --r-card:16px;
  --r-pill:999px;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --shadow:0 24px 48px -24px rgba(10,17,40,.35);
  --gutter:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 "Onest",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3{font-family:"Bricolage Grotesque","Onest",sans-serif;margin:0;line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}
img,svg{display:block;max-width:100%}
::selection{background:var(--sun);color:var(--ink)}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;border-radius:8px}
.dark :focus-visible{outline-color:var(--sun)}
html{scrollbar-color:var(--cobalt) var(--paper)}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:var(--white);padding:10px 16px;border-radius:var(--r-pill);z-index:100;text-decoration:none;font-weight:600}
.skip:focus{top:12px}

html[data-lang="es"] .en{display:none !important}
html[data-lang="en"] .es{display:none !important}

.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 var(--gutter)}
section{padding:clamp(64px,9vw,112px) 0}
.sec-head{max-width:760px;margin-bottom:clamp(32px,5vw,56px)}
.sec-head h2,.h2{font-size:clamp(1.9rem,3.9vw,3.1rem);font-weight:700}
.sec-head p{margin-top:16px;color:var(--muted);font-size:1.125rem;max-width:52ch}
.ico{width:1.25em;height:1.25em;fill:currentColor;flex:none}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:var(--r-pill);font:600 1rem/1.2 "Onest",sans-serif;text-decoration:none;white-space:nowrap;border:2px solid transparent;cursor:pointer;transition:transform 160ms var(--ease-out),background-color 160ms ease,color 160ms ease,border-color 160ms ease}
.btn:active{transform:scale(.97)}
.btn-wa{background:var(--cobalt);color:var(--white)}
.btn-mail{background:transparent;color:var(--ink);border-color:var(--ink)}
.on-dark .btn-wa,.dark .btn-wa{background:var(--sun);color:var(--ink)}
.on-dark .btn-mail,.dark .btn-mail{color:var(--white);border-color:rgba(255,255,255,.55)}
.btn-sm{min-height:42px;padding:9px 18px;font-size:.95rem}
@media (hover:hover) and (pointer:fine){
  .btn-wa:hover{background:var(--cobalt-deep)}
  .on-dark .btn-wa:hover,.dark .btn-wa:hover{background:#FFD968}
  .btn-mail:hover{background:var(--ink);color:var(--white)}
  .on-dark .btn-mail:hover,.dark .btn-mail:hover{background:var(--white);color:var(--ink);border-color:var(--white)}
}
.cta{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-name{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.15rem;line-height:1;letter-spacing:-.02em;display:block}
.brand-by{font-size:.75rem;color:var(--muted);display:block;margin-top:3px}
.nav{display:none;gap:28px;font-weight:500;font-size:.97rem}
.nav a{text-decoration:none;padding:6px 0;background:linear-gradient(var(--cobalt),var(--cobalt)) 0 100%/0 2px no-repeat;transition:background-size 200ms var(--ease-out)}
.head-actions{display:flex;align-items:center;gap:12px}
.head-actions .btn{display:none}
.lang{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-pill);padding:3px;background:var(--white)}
.lang button{font:600 .8rem "Onest",sans-serif;border:0;background:transparent;color:var(--muted);padding:6px 12px;border-radius:var(--r-pill);cursor:pointer;min-height:32px;transition:background-color 160ms ease,color 160ms ease}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--white)}
@media (hover:hover) and (pointer:fine){.nav a:hover{background-size:100% 2px}}
@media (min-width:1000px){.nav{display:flex}.head-actions .btn{display:inline-flex}}

/* ---------- Hero ---------- */
.hero{padding:clamp(32px,5vw,64px) 0 clamp(64px,8vw,104px)}
.hero-grid{display:grid;grid-template-columns:1fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.2rem,6vw,3.9rem);font-weight:800;letter-spacing:-.03em;max-width:16ch}
.hero h1 mark{background:none;color:var(--cobalt);display:block}
.lead{margin-top:22px;font-size:clamp(1.05rem,2vw,1.25rem);color:var(--muted);max-width:44ch}
.hero .cta{margin-top:32px}
.hero-visual{position:relative;display:flex;flex-direction:column;align-items:center;padding:28px 0 0}
.hero-visual::before{content:"";position:absolute;inset:0 6% 36px 6%;background:var(--cobalt);border-radius:28px}
.phone{position:relative;width:100%;max-width:340px;background:var(--white);border:1px solid var(--line);border-radius:28px;overflow:hidden;box-shadow:var(--shadow)}
.phone-head{display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--white);padding:14px 16px}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--sun);color:var(--ink);display:grid;place-items:center;font:800 .8rem "Bricolage Grotesque",sans-serif;flex:none}
.phone-title{font-weight:600;font-size:.92rem;line-height:1.2}
.phone-sub{font-size:.75rem;color:var(--muted-on-dark)}
.chat{background:var(--cobalt-tint);padding:18px 12px 56px;min-height:372px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:84%;padding:9px 13px 7px;border-radius:14px;font-size:.92rem;line-height:1.42}
.msg time{display:block;text-align:right;font-size:.75rem;color:var(--muted);margin-top:2px}
.msg.out{align-self:flex-end;background:var(--sun-tint);border-bottom-right-radius:4px}
.msg.in{align-self:flex-start;background:var(--white);border-bottom-left-radius:4px}
.typing{align-self:flex-start;background:var(--white);border-radius:14px;padding:12px 14px;display:none;gap:4px}
.typing span{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:blink 1s infinite}
.typing span:nth-child(2){animation-delay:.15s}
.typing span:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
.anim .chat .msg{opacity:0;transform:translateY(8px);transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out)}
.anim .chat .msg.show{opacity:1;transform:none}
.typing.on{display:flex}
.nfc-chip{position:absolute;left:0;bottom:30px;display:flex;align-items:center;gap:10px;background:var(--white);border-radius:14px;padding:10px 14px 10px 10px;box-shadow:var(--shadow);max-width:240px}
.nfc-chip .ic{width:38px;height:38px;border-radius:10px;background:var(--sun);display:grid;place-items:center;flex:none}
.nfc-chip strong{display:block;font-size:.82rem;line-height:1.25;font-weight:600}
.stars{display:flex;gap:2px;color:var(--sun-deep);font-size:.8rem;margin-top:2px}
.anim .nfc-chip{opacity:0;transform:translateY(10px) scale(.96);transition:opacity 350ms var(--ease-out),transform 350ms var(--ease-out)}
.anim .nfc-chip.show{opacity:1;transform:none}
.caption{position:relative;font-size:.8rem;color:var(--muted);margin-top:14px;text-align:center}
@media (min-width:960px){
  .hero-grid{grid-template-columns:1.05fr .95fr;gap:48px}
  .nfc-chip{left:-8px}
}

/* ---------- Google banner ---------- */
.gbanner{background:var(--cobalt);color:var(--white);padding:104px 0}
.gb-grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
.gbanner h2{font-size:clamp(1.9rem,4vw,3.2rem);font-weight:800;letter-spacing:-.03em;max-width:21ch}
.gbanner h2 em{font-style:normal;color:var(--sun)}
.gb-copy{margin-top:20px;font-size:1.125rem;color:#DCE2FF;max-width:50ch}
.gb-list{margin-top:24px;display:grid;gap:12px}
.gb-list li{display:flex;gap:12px;align-items:flex-start;color:var(--white)}
.gb-list .ico{color:var(--sun);margin-top:2px}
.gbanner .cta{margin-top:32px}
.serp-wrap{display:flex;flex-direction:column;align-items:center}
.serp{width:100%;max-width:460px;background:var(--white);color:var(--ink);border-radius:20px;padding:18px;box-shadow:0 30px 60px -30px rgba(5,10,40,.6)}
.serp-bar{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:var(--r-pill);padding:11px 16px;font-size:.95rem;background:var(--paper)}
.serp-bar .ico{color:var(--muted)}
.serp-list{--row:92px;--gap:10px;position:relative;margin-top:16px;height:calc(var(--row)*3 + var(--gap)*2)}
.sr{--slot:0;position:absolute;left:0;right:0;top:0;height:var(--row);border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--white);transform:translateY(calc(var(--slot)*(var(--row) + var(--gap))));transition:transform 800ms var(--ease-io) 500ms;display:flex;flex-direction:column;justify-content:center;gap:8px}
.sr-me{--slot:0;border:2px solid var(--sun-deep);background:var(--sun-tint);z-index:2}
.sr-a{--slot:1}
.sr-b{--slot:2}
.sr-title{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.95rem}
.sr-title .ico{color:var(--cobalt)}
.sr-meta{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--muted)}
.sr-a .sr-meta,.sr-b .sr-meta{color:#6B7392}
.anim .serp:not(.go) .sr-me{--slot:2}
.anim .serp:not(.go) .sr-a{--slot:0}
.anim .serp:not(.go) .sr-b{--slot:1}
.serp-note{margin-top:14px;font-size:.8rem;color:#DCE2FF;text-align:center;max-width:42ch}
@media (min-width:960px){.gb-grid{grid-template-columns:1.05fr .95fr;gap:64px}}

/* ---------- Services bento ---------- */
.bento{display:grid;grid-template-columns:1fr;gap:20px}
.svc{border-radius:var(--r-card);padding:clamp(24px,3.4vw,36px);display:flex;flex-direction:column;gap:16px}
.svc .ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-size:1.4rem}
.svc h3{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:700}
.svc p.d{font-size:1.05rem}
.svc ul{display:grid;gap:10px;margin-top:4px}
.svc li{display:flex;gap:10px;align-items:flex-start}
.svc li .ico{margin-top:3px}
.svc .cta{margin-top:auto;padding-top:12px}
.svc-bot{background:var(--ink);color:var(--white)}
.svc-bot .ic{background:var(--sun);color:var(--ink)}
.svc-bot p.d{color:var(--muted-on-dark)}
.svc-bot li .ico{color:var(--sun)}
.svc-google{background:var(--cobalt-tint)}
.svc-google .ic{background:var(--cobalt);color:var(--white)}
.svc-google p.d{color:var(--muted)}
.svc-google li .ico{color:var(--cobalt)}
.svc-nfc{background:var(--sun)}
.svc-nfc .ic{background:var(--ink);color:var(--sun)}
.svc-nfc p.d{color:#3A3510}
.svc-nfc li .ico{color:var(--ink)}
.svc-nfc .btn-wa{background:var(--ink);color:var(--white)}
.svc-nfc .btn-mail{border-color:var(--ink)}
@media (hover:hover) and (pointer:fine){.svc-nfc .btn-wa:hover{background:var(--ink-2)}}
@media (min-width:900px){
  .bento{grid-template-columns:repeat(12,1fr)}
  .svc-bot{grid-column:span 12;display:grid;grid-template-columns:1fr 1fr;column-gap:64px;row-gap:16px;grid-template-rows:auto auto auto 1fr}
  .svc-bot > *{grid-column:1}
  .svc-bot ul{grid-column:2;grid-row:1 / span 4;margin-top:0;gap:16px;align-self:center}
  .svc-bot .cta{align-self:end}
  .svc-google,.svc-nfc{grid-column:span 6}
}

/* ---------- Rubros carousel ---------- */
.rubros{background:var(--white);padding-bottom:clamp(56px,8vw,96px)}
.rubros-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.rubros-head .sec-head{margin-bottom:clamp(24px,4vw,40px)}
.rail-ctl{display:none;gap:8px;margin-bottom:clamp(24px,4vw,40px)}
.rail-ctl button{width:48px;height:48px;border-radius:50%;border:2px solid var(--ink);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:transform 160ms var(--ease-out),background-color 160ms ease,color 160ms ease,opacity 160ms ease}
.rail-ctl button:active{transform:scale(.95)}
.rail-ctl button:disabled{opacity:.3;cursor:default}
@media (hover:hover) and (pointer:fine){.rail-ctl button:not(:disabled):hover{background:var(--ink);color:var(--white)}}
@media (min-width:700px){.rail-ctl{display:flex}}
.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px max(var(--gutter),calc((100% - 1180px)/2 + var(--gutter))) 20px;scroll-padding-inline:max(var(--gutter),calc((100% - 1180px)/2 + var(--gutter)));scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.rail::-webkit-scrollbar{display:none}
.rubro{flex:none;width:min(310px,82vw);scroll-snap-align:start;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:24px;display:flex;flex-direction:column;gap:16px}
.rubro .ic{width:48px;height:48px;border-radius:50%;background:var(--cobalt);color:var(--white);display:grid;place-items:center;font-size:1.35rem}
.rubro:nth-child(3n+2) .ic{background:var(--ink)}
.rubro:nth-child(3n) .ic{background:var(--sun);color:var(--ink)}
.rubro h3{font-size:1.35rem;font-weight:700}
.ex{display:flex;gap:10px;font-size:.95rem;line-height:1.5;color:var(--ink)}
.ex .ico{color:var(--cobalt);margin-top:2px}
.rubros-foot{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.rubros-foot p{color:var(--muted);max-width:46ch}

/* ---------- How it works ---------- */
.how-grid{display:grid;grid-template-columns:1fr;gap:40px}
.how-note{margin-top:20px;color:var(--muted);font-size:1.05rem;max-width:42ch}
.how-steps{counter-reset:s}
.how-steps li{counter-increment:s;display:grid;grid-template-columns:56px 1fr;gap:16px;padding:26px 0;border-top:1px solid var(--line)}
.how-steps li:last-child{border-bottom:1px solid var(--line)}
.how-steps li::before{content:counter(s);font:800 2.6rem/1 "Bricolage Grotesque",sans-serif;color:var(--cobalt)}
.how-steps h3{font-size:1.3rem;margin-bottom:6px;font-weight:700}
.how-steps p{color:var(--muted)}
@media (min-width:900px){
  .how-grid{grid-template-columns:.8fr 1.2fr;gap:72px;align-items:start}
  .how-head{position:sticky;top:110px}
}

/* ---------- Pilot ---------- */
.pilot{background:var(--cobalt-tint);padding:104px 0}
.pilot-in{max-width:880px}
.pilot h2{font-size:clamp(1.9rem,4vw,3.2rem);font-weight:700;max-width:20ch}
.pilot-p{margin-top:22px;font-size:clamp(1.1rem,1.8vw,1.3rem);color:var(--ink-2);max-width:56ch}
.pilot-p + .pilot-p{margin-top:14px;color:var(--muted)}
.trust{margin-top:40px;display:grid;grid-template-columns:1fr;gap:12px}
.trust li{background:var(--white);border-radius:var(--r-card);padding:20px 22px;display:flex;gap:14px;align-items:flex-start}
.trust .ico{color:var(--cobalt);font-size:1.5rem;margin-top:1px}
.trust strong{display:block;font-weight:600;margin-bottom:2px}
.trust span{color:var(--muted);font-size:.97rem}
.founder{margin-top:28px;font-size:.95rem;color:var(--muted)}
.founder b{color:var(--ink);font-weight:600}
@media (min-width:900px){.trust{grid-template-columns:repeat(3,1fr);margin-top:48px}}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:1fr;gap:32px}
details{border-top:1px solid var(--line)}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;list-style:none;padding:22px 0;font-weight:600;font-size:1.1rem;min-height:56px}
summary::-webkit-details-marker{display:none}
summary .ico{transition:transform 200ms var(--ease-out);color:var(--cobalt)}
details[open] summary .ico{transform:rotate(45deg)}
details .ans{padding:0 0 22px;color:var(--muted);max-width:62ch}
@media (min-width:900px){.faq-grid{grid-template-columns:.8fr 1.2fr;gap:72px;align-items:start}}

/* ---------- Contact ---------- */
.contact{background:var(--ink);color:var(--white);padding:104px 0}
.contact h2{font-size:clamp(2.1rem,5vw,3.6rem);font-weight:800;letter-spacing:-.03em;max-width:22ch}
.contact .sub{margin-top:18px;color:var(--muted-on-dark);font-size:1.15rem;max-width:46ch}
.opts{margin-top:44px;display:grid;grid-template-columns:1fr;gap:16px}
.opt{border-radius:var(--r-card);padding:clamp(24px,3.4vw,36px);display:flex;flex-direction:column;gap:16px}
.opt h3{font-size:1.4rem;font-weight:700}
.opt-main{background:var(--cobalt)}
.opt-alt{background:var(--ink-2);border:1px solid rgba(255,255,255,.18)}
.copyline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.copyline code{font:600 clamp(1.1rem,2.4vw,1.35rem)/1.2 "Bricolage Grotesque",sans-serif;letter-spacing:-.01em;user-select:all;word-break:break-all}
.copy{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.45);background:transparent;color:var(--white);font:500 .85rem "Onest",sans-serif;cursor:pointer;transition:transform 160ms var(--ease-out),background-color 160ms ease}
.copy:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.copy:hover{background:rgba(255,255,255,.14)}}
.opt .cta{margin-top:auto}
@media (min-width:800px){.opts{grid-template-columns:1fr 1fr}}

/* ---------- Footer ---------- */
footer{background:var(--ink);color:var(--muted-on-dark);border-top:1px solid rgba(255,255,255,.14);padding:36px 0 calc(40px + 72px);font-size:.95rem}
.foot{display:grid;gap:20px;grid-template-columns:1fr}
.foot a{color:var(--white);text-decoration-color:rgba(255,255,255,.4);text-underline-offset:4px}
.foot-brand{font:800 1.1rem "Bricolage Grotesque",sans-serif;color:var(--white)}
.foot-links{display:grid;gap:6px}
@media (min-width:800px){.foot{grid-template-columns:1.3fr 1fr 1fr;align-items:start}footer{padding-bottom:40px}}

/* ---------- Floating WhatsApp ---------- */
.fab{position:fixed;right:16px;bottom:max(16px,calc(env(safe-area-inset-bottom) + 8px));z-index:60;width:54px;height:54px;border-radius:50%;background:var(--cobalt);color:var(--white);display:grid;place-items:center;font-size:1.7rem;box-shadow:0 12px 28px -8px rgba(10,17,40,.5);text-decoration:none;transition:transform 160ms var(--ease-out),opacity 200ms ease,visibility 200ms}
.fab:active{transform:scale(.95)}
.fab.away{opacity:0;visibility:hidden;pointer-events:none}
.fab:focus-visible{outline-color:var(--sun);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.fab:hover{transform:scale(1.05)}}

/* ---------- Helpers (replace inline styles) ---------- */
.d80{--d:80ms}.d100{--d:100ms}.d120{--d:120ms}.d160{--d:160ms}
.sec-head.flush{margin-bottom:0}
.copy-ta{position:fixed;left:-9999px;top:0;opacity:0}

/* ---------- Scroll reveal (content visible by default; hidden only while html.anim is set) ---------- */
.anim .rv{opacity:0;transform:translateY(14px);transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out);transition-delay:var(--d,0ms)}
.anim .rv.in{opacity:1;transform:none}

@media (max-width:560px){
  :root{--gutter:16px}
  .brand-by{display:none}
  .btn{white-space:normal;text-align:center}
  .cta .btn{flex:1 1 100%}
  .head-in{height:60px}
  html{scroll-padding-top:72px}
  .gbanner,.pilot,.contact{padding:64px 0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .typing span{animation:none}
  .sr{transition:none}
  .btn,.rail-ctl button,.fab,summary .ico{transition:none}
}

@media print{
  .anim .rv,.anim .chat .msg,.anim .nfc-chip{opacity:1;transform:none;transition:none}
  .fab{display:none}
}