/* ========== Paleta + tipografía ========== */
:root{
  --bg:#0B1220;
  --panel:#0F1726;
  --line:#1C2435;
  --text:#FFFFFF;
  --muted:#C7D0E0;
  --brand:#2B6FFF;
  --radius:18px;
}
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Lato',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
  font-size:16px; line-height:1.55;
}
img{ max-width:100%; height:auto }
a{ color:var(--text); text-decoration:none }
.container{ max-width:1160px; margin:0 auto; padding:0 16px }
.muted{ color:var(--muted) }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* Headings */
.h1{ font-weight:900; font-size:40px; line-height:1.08; margin:0 0 12px; letter-spacing:-0.02em }
@media (min-width:860px){ .h1{ font-size:56px } }
.h2{ font-weight:900; font-size:28px; line-height:1.14; margin:0 0 10px }
.h3{ font-weight:900; font-size:24px; margin:0 0 8px }

/* Header */
.hdr{ border-bottom:1px solid var(--line); background:#0C1423 }
.hdr.sticky{
  position:sticky; top:0; z-index:40;
  backdrop-filter:saturate(120%) blur(10px);
  background:rgba(12,20,35,.72);
  border-bottom-color:#121a2a;
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:12px 0 }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700 }
.only-logo span{ display:none }
.logo-img{ height:32px }
.brand--small .logo-img-small{ height:26px }
@media (min-width:860px){ .logo-img{ height:36px } }
.links{ display:none; gap:22px; align-items:center }
.links a{ color:#E6ECF7 }
.links a:hover{ color:#fff }
.burger{ background:none; border:0; color:#fff; font-size:20px }
@media (min-width:860px){ .links{ display:flex } .burger{ display:none } }
.mobile-menu{ display:none; border-top:1px solid var(--line); padding:8px 0 }
.mobile-menu a{ display:block; padding:10px 0; border-bottom:1px solid #121a2a }

/* ========== Hero ========== */
.hero{
  display:grid; gap:28px; align-items:center; padding:56px 0;
  grid-template-columns:minmax(0,1fr) minmax(340px, 560px);
}
@media (min-width:860px){ .hero{ padding:72px 0 } }
.lead{ color:var(--muted); margin:10px 0 18px }
.cta-row{ display:flex; gap:12px; flex-wrap:wrap }

/* Botones */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:12px 16px;
  border-radius:14px; border:1px solid var(--line); background:var(--panel); color:#fff;
  transition:color .15s, border-color .15s, background .15s, box-shadow .15s;
}
.btn:hover{ border-color:#2a354b }
.btn-primary{ background:var(--brand); border:1px solid #2958d6 }
.btn-primary:hover{ filter:brightness(1.05) }
.btn-primary:active{ transform:translateY(1px) }
.btn-ghost{ background:transparent; border-color:var(--line) }
.proof{ color:#E6ECF7; font-size:14px; margin-top:10px; display:flex; gap:10px; flex-wrap:wrap }

/* Visual hero: panel derecho */
.card-3d{
  position:relative; border:1px solid #182137; border-radius:var(--radius);
  aspect-ratio:16/10; height:auto; overflow:hidden;
  background:radial-gradient(70% 100% at 70% 40%, rgba(30,64,255,.12), transparent 65%), var(--panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  min-height:420px;
}
.card-3d__bg{
  position:absolute; inset:-10%;
  background:
    radial-gradient(42% 42% at 70% 30%, rgba(43,111,255,.12), transparent 60%),
    radial-gradient(26% 26% at 30% 68%, rgba(97,165,255,.10), transparent 70%),
    radial-gradient(14% 14% at 50% 50%, rgba(255,255,255,.05), transparent 60%);
  filter: blur(28px) saturate(112%);
  opacity:.55;
  animation: hero-bg 38s linear infinite;
}
@keyframes hero-bg{ to{ transform:rotate(360deg) } }

/* Contenedor de burbujas (acotado) */
.hero .card-3d{
  width:100%;
  max-width:100%;
  justify-self:end;
  overflow:hidden;
  -webkit-clip-path: inset(0 round var(--radius));
          clip-path: inset(0 round var(--radius));
}
.hero .card-3d > #bubbleHero{
  position:absolute; inset:8px;
  overflow:hidden; border-radius:inherit;
  pointer-events:auto;
  perspective:900px;
  transform-style:preserve-3d;
  contain:layout paint size;
  isolation:isolate;
}

/* ===== Burbujas ===== */
.bh-bubble{
  appearance:none;
  position:absolute;
  left:calc(var(--x,50) * 1%);
  top: calc(var(--y,50) * 1%);
  transform:
    translate(-50%,-50%)
    translate(var(--tx,0px), var(--ty,0px))
    translateZ(var(--z,0px))
    scale(var(--scale,1));
  z-index:var(--z-index,0);
  display:inline-flex; align-items:center;
  padding:12px 18px; border-radius:999px;
  background:rgba(16,26,44,.86);
  border:1px solid rgba(61,88,150,.45);
  backdrop-filter:saturate(115%) blur(4px);
  color:#eaf0ff; font-weight:900; letter-spacing:.1px; white-space:nowrap;
  box-shadow:0 14px 36px rgba(2,6,18,.45), inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(2,8,22,.55);
  text-shadow:0 1px 0 rgba(0,0,0,.35);
  cursor:default;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, opacity .25s ease;
  font-size:clamp(12px, .95vw, 16px);
}
.bh-bubble.is-held{ box-shadow:0 20px 48px rgba(2,6,18,.55), 0 0 0 4px rgba(43,111,255,.18) }
.bh-sm{ padding:8px 14px; font-weight:800 }
.bh-lg{ padding:14px 20px; font-size:clamp(14px,1.05vw,18px) }

/* Secciones */
.section{ padding:72px 0 }
@media (max-width:859px){ .section{ padding:56px 0 } }
.section-sub{ color:var(--muted); margin:0 0 18px }

/* Grid + Cards */
.grid{ display:grid; gap:18px }
.cards-3{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.card:hover{ transform:translateY(-2px); border-color:#2a354b; box-shadow:0 10px 30px #0006 }
.card h3{ margin:0 0 8px }
.card p{ margin:6px 0 0 }
.card-list{ margin:10px 0 0; padding-left:18px; color:var(--muted) }
.card-list li{ margin:6px 0 }

/* Work */
.work-3{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }
.work{
  display:block; border:1px solid var(--line); border-radius:var(--radius); padding:16px;
  background:var(--panel); min-height:140px; position:relative; overflow:hidden;
  transition:transform .2s, border-color .2s;
}
.work:hover{ transform:translateY(-2px); border-color:#2a354b }
.work__badge{
  position:absolute; top:12px; right:12px; font-size:12px; background:#0d1524;
  border:1px solid var(--line); padding:4px 8px; border-radius:999px; color:#E6ECF7;
}

/* Proceso */
.steps{ display:grid; gap:14px; grid-template-columns:1fr; counter-reset:step; list-style:none; padding-left:0; margin-left:0 }
@media (min-width:860px){ .steps{ grid-template-columns:repeat(4,1fr) } }
.step{
  position:relative; display:flex; flex-direction:column; gap:6px;
  padding:22px 16px 16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel);
}
.step::before{
  content:counter(step); counter-increment:step;
  position:absolute; top:-12px; left:-12px; width:32px; height:32px;
  display:grid; place-items:center; border-radius:10px;
  background:var(--brand); color:#fff; font-weight:900; border:2px solid #0a0f1a;
}
.step > strong{ display:block; font-weight:900; margin-top:6px }
.step > p{ margin:0; color:#9fb0cc }
@media (min-width:860px){
  .steps{ position:relative }
  .step{ padding-top:24px }
  .step::after{
    content:""; position:absolute; top:-1px; left:calc(100% + 8px); width:calc(16px + 100% - 32px);
    height:2px; background:var(--line); opacity:.8;
  }
  .step:last-child::after{ display:none }
}

/* Chips logos */
.proof-logos{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px; margin-bottom:6px }
.chip{
  display:inline-flex; align-items:center; gap:10px; height:34px; padding:0 12px;
  border:1px solid var(--line); border-radius:999px;
  background:var(--panel); color:#E6ECF7; font-weight:800; line-height:1;
}
.chip b{ font-weight:800 }
.chip-logo{ display:block; height:18px; width:auto; object-fit:contain; transform:translateY(.5px) }
.chip-wwf{ background:#ffffff; border-color:#e5e7eb; color:#0b1220 }
.chip:not(.chip-wwf) .chip-logo{ filter:brightness(0) invert(1) }

/* Hostinger igual que DigitalOcean */
.chip--hostinger{ padding-left:12px }
.chip--hostinger .chip-logo{ height:60px; filter:brightness(0) invert(1); transform:translateY(.5px) }
@media (min-width:860px){
  .chip--hostinger .chip-logo{ height:60px } /* anula el upscale previo */
}

/* Reveal */
.reveal > *{ opacity:0; transform:translateY(10px); transition:.45s }
.reveal.in > *{ opacity:1; transform:none }

/* Toggle A/B */
.ab-toggle{ position:fixed; right:14px; bottom:14px; z-index:60; display:flex; gap:6px; padding:6px; background:#0c1423; border:1px solid var(--line); border-radius:12px }
.ab-toggle .tab{ appearance:none; border:1px solid var(--line); background:var(--panel); color:#E6ECF7; padding:6px 10px; border-radius:8px; cursor:pointer; font-weight:700; font-size:12px }
.ab-toggle .tab.active{ background:var(--brand); border-color:#2958d6; color:#fff }

/* Footer */
.ftr{ border-top:1px solid var(--line); margin-top:56px; padding:22px 0; position:relative }
.ftr__grid{ display:grid; gap:18px; grid-template-columns:1fr }
@media(min-width:900px){ .ftr__grid{ grid-template-columns:2fr repeat(3,1fr) } }
.ftr h4{ margin:0 0 10px }
.ftr a{ display:block; margin:6px 0 }
.top{
  position:fixed; right:14px; bottom:14px; height:42px; width:42px; border-radius:12px;
  background:var(--brand); color:#fff; border:0; display:grid; place-items:center;
  box-shadow:0 10px 20px #0006; cursor:pointer; opacity:.95;
}

/* ==== Cases ==== */
.case-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px }
.case{
  position:relative; display:block; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:var(--panel);
  min-height:240px; transform:perspective(800px) rotateX(var(--rx,0)) rotateY(var(--ry,0));
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease; will-change:transform; outline:none;
}
.case:focus-visible{ box-shadow:0 0 0 3px #1E40FF55; border-color:#2958d6 }
.case__media{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,18,32,0) 0%, rgba(11,18,32,.55) 55%, rgba(11,18,32,.95) 100%),
    var(--panel);
  background-image:
    linear-gradient(180deg, rgba(11,18,32,0) 0%, rgba(11,18,32,.55) 55%, rgba(11,18,32,.95) 100%),
    var(--img, none);
  background-size:cover; background-position:center;
  filter:saturate(103%); opacity:.42; transform:scale(1.02);
  transition:transform .6s ease, opacity .6s ease;
}
.case:hover .case__media{ transform:scale(1.07); opacity:.55 }
.case::before{
  content:""; position:absolute; inset:-30%;
  background:
    radial-gradient(35% 35% at 70% 25%, rgba(43,111,255,.20), transparent 65%),
    radial-gradient(18% 18% at 35% 80%, rgba(97,165,255,.15), transparent 70%);
  filter:blur(26px) saturate(110%); opacity:.35; pointer-events:none; transition:opacity .35s ease;
}
.case:hover{ border-color:#2a354b; box-shadow:0 18px 50px rgba(0,0,0,.35) }
.case:hover::before{ opacity:.55 }
.case__body{
  position:relative; display:flex; flex-direction:column; gap:10px;
  justify-content:flex-end; min-height:240px; padding:24px; z-index:1;
}
.case__badge{
  position:absolute; top:14px; right:14px; font-size:13px; line-height:1;
  padding:8px 12px; border-radius:999px; background:rgba(16,26,44,.85);
  border:1px solid rgba(61,88,150,.45); backdrop-filter:blur(4px); color:#E6ECF7; font-weight:800;
}
.case__title{ margin:0; font-size:22px; font-weight:900; letter-spacing:.1px }
.case__desc{ margin:2px 0 0; color:#d9e3f8; font-size:16px }
.case__meta{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0; padding:0; list-style:none }
.case__meta li{ font-size:12px; color:#aebedb; padding:6px 10px; border-radius:999px; border:1px solid var(--line); background:#0e1728 }
.case__cta{ margin-top:12px; font-weight:900; color:#eaf0ff; display:inline-flex; align-items:center; gap:6px; opacity:.92; transition:transform .2s ease, opacity .2s ease }
.case:hover .case__cta{ transform:translateX(2px); opacity:1 }

/* Eximius Project — helpers */
.feature-list{ list-style:none; padding:0; margin:8px 0 0; color:var(--muted) }
.feature-list li{ display:flex; gap:10px; align-items:flex-start; margin:8px 0 }
.fcheck{
  flex:0 0 16px; height:16px; border-radius:4px;
  background:linear-gradient(180deg,#2B6FFF 0%,#1E3AFF 100%);
  box-shadow:0 0 0 2px #1C2435 inset, 0 6px 16px rgba(43,111,255,.25);
  position:relative; margin-top:2px;
}
.fcheck::after{
  content:""; position:absolute; left:4px; top:1px; width:6px; height:10px;
  border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg);
}

/* comparativa 2 columnas */
.compare{ display:grid; gap:16px; grid-template-columns:1fr 1fr }
@media (max-width: 800px){ .compare{ grid-template-columns:1fr } }

/* métricas compactas */
.metrics{ display:flex; gap:18px; flex-wrap:wrap }
.metric{ background:#0f1726; border:1px solid var(--line); border-radius:12px; padding:12px 14px; min-width:120px }
.metric strong{ display:block; font-size:22px; line-height:1; margin-bottom:2px }
.metric .muted{ font-size:12px }

/* ===== EXIMIUS PROJECT header ===== */
#eximius-project .xp-hero{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "title logo" "sub logo";
  align-items:center; column-gap:16px; row-gap:8px; margin-bottom:12px;
}
#eximius-project .xp-brand{ grid-area:logo; justify-self:end }
#eximius-project .xp-logo{ --xpLogoH:34px; height:var(--xpLogoH); width:auto; max-width:320px; object-fit:contain; transform:translateY(1px); filter:drop-shadow(0 1px 0 rgba(0,0,0,.35)) }
#eximius-project .xp-title{ grid-area:title; margin:0; font-weight:900; line-height:1.18; letter-spacing:.1px; font-size:clamp(22px, 2.8vw, 36px) }
#eximius-project .xp-sub{ grid-area:sub; margin:0; max-width:68ch; color:var(--muted); font-size:clamp(14px, 1.1vw, 18px) }
#eximius-project .grid{ margin-top:12px }
@media (max-width:900px){
  #eximius-project.section{ padding-top:20px; padding-bottom:36px }
  #eximius-project .xp-hero{
    grid-template-columns:1fr;
    grid-template-areas:"logo" "title" "sub";
    row-gap:6px; margin-bottom:10px;
  }
  #eximius-project .xp-logo{ --xpLogoH:28px; max-width:220px }
  #eximius-project .xp-title{ font-size:clamp(20px, 6.2vw, 28px) }
}
#eximius-project .xp-foot{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-top:32px; padding-top:18px; border-top:1px solid var(--line) }
#eximius-project .xp-foot .btn{ font-weight:900; padding:10px 16px; border-radius:12px }
#eximius-project .xp-foot .btn::after{ content:" →"; font-weight:900; transition:transform .15s }
#eximius-project .xp-foot .btn:hover::after{ transform:translateX(2px) }
#eximius-project .xp-foot .muted{ font-size:14px; margin:0; color:var(--muted) }
@media (max-width:600px){
  #eximius-project .xp-foot{ flex-direction:column; align-items:flex-start }
  #eximius-project .xp-foot .muted{ order:-1 }
}

/* Cases: aire para badge */
.case__body{ padding-top:56px; position:relative }
@media (max-width:1024px){ .case__body{ padding-top:60px } }
@media (max-width:560px){ .case__body{ padding-top:68px } }
.case__badge{ z-index:3 }
.case__title{ position:relative; z-index:2; margin-right:8px }

/* Testimonios */
.testi-3{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); align-items:stretch; gap:20px }
.testi{
  margin:0; border:1px solid #1a2740; border-radius:var(--radius); padding:24px 24px 22px 34px; background:var(--panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 16px 36px rgba(0,0,0,.26);
  display:flex; flex-direction:column; justify-content:center; position:relative; min-height:180px; color:#eaf0ff; font-size:clamp(16px,1.15vw,18px)
}
/* comilla decorativa (no se pisa con estrellas) */
.testi::before{
  content:"“"; position:absolute; left:14px; top:10px; font-size:44px; line-height:.7; color:#8fa7d8; opacity:.18; pointer-events:none
}
.testi cite{ display:block; margin-top:10px; color:#9fb0cc; font-style:normal; font-weight:800; letter-spacing:.2px }

/* Estrellas opcionales SOLO si añades data-stars="N" */
.testi[data-stars]::after{
  --rating: 5;
  content:"★★★★★";
  position:absolute; top:14px; right:16px; font-size:14px; letter-spacing:2px;
  background:linear-gradient(90deg,#f7d76b calc((var(--rating) / 5) * 100%), transparent 0);
  -webkit-background-clip:text; background-clip:text; color:transparent; pointer-events:none;
}
/* Si quieres distintos valores, define inline: style="--rating:4.5" en el blockquote */

/* Carrusel en móvil */
@media (max-width:900px){
  .testi-3{
    display:grid; grid-auto-flow:column; grid-auto-columns:min(88%,520px);
    overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    gap:14px; padding-bottom:6px; scrollbar-width:thin;
  }
  .testi{ scroll-snap-align:start; min-height:160px; padding:18px 18px 16px 28px }
  .testi-3::-webkit-scrollbar{ height:6px }
  .testi-3::-webkit-scrollbar-thumb{ background:#1c2740; border-radius:10px }
}

/* Accordion */
.accordion{ max-width:900px }
.acc{
  width:100%; text-align:left; border:1px solid var(--line); border-radius:12px; padding:14px 16px;
  background:var(--panel); color:#fff; margin:10px 0; cursor:pointer; position:relative;
  transition:color .15s, border-color .15s, background .15s, box-shadow .15s;
}
.acc[aria-expanded="true"]{ border-color:#2a354b }
.acc::after{ content:"▾"; position:absolute; right:14px; top:50%; transform:translateY(-50%) rotate(0deg); transition:transform .2s; opacity:.9 }
.acc[aria-expanded="true"]::after{ transform:translateY(-50%) rotate(180deg) }
.panel{
  display:none; border:1px solid var(--line); border-radius:12px; padding:12px 16px; margin:-6px 0 10px; background:#0e1728;
}
.panel p{ margin:0; color:#9fb0cc }

/* CTA / Form + Chat */
.cta-big{
  border:1px solid #172135; border-radius:calc(var(--radius) + 4px);
  padding:28px 28px 26px;
  background:linear-gradient(0deg,rgba(255,255,255,.03),rgba(255,255,255,.03)), var(--panel);
  box-shadow:0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03); max-width:1160px; margin:0 auto;
}
.cta-big .h3{ margin:0 0 10px }
.cta-big > p{ margin:0 0 22px; color:var(--muted) }

.form{ display:grid; grid-template-columns:1fr; gap:16px; max-width:680px }
@media (min-width:900px){
  .form{ grid-template-columns:1fr 1fr; column-gap:18px; row-gap:16px }
  .form label:has(textarea), .form__row{ grid-column:1 / -1 }
}
@supports not (selector(:has(*))){
  @media (min-width:900px){
    .form label:nth-of-type(3), .form__row{ grid-column:1 / -1 }
  }
}
.form label{ display:grid; gap:8px; color:#dbe6ff; font-weight:800; letter-spacing:.1px }
.form input,.form textarea{
  width:100%; background:#101a2c; border:1px solid #1c2435; border-radius:14px; padding:14px 16px; color:#fff; font:inherit;
  transition:border-color .15s, box-shadow .15s, background .15s, transform .05s;
}
.form input:hover,.form textarea:hover{ border-color:#2a354b }
.form input:focus,.form textarea:focus{
  outline:none; border-color:var(--brand); background:#0e1728; box-shadow:0 0 0 3px rgba(43,111,255,.18);
}
.form input::placeholder,.form textarea::placeholder{ color:#9cb0d1 }
.form textarea{ min-height:160px; resize:vertical; line-height:1.5 }
.form__row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap }
.form .btn-primary{ padding:12px 18px; font-weight:900; border-radius:12px }
.form .btn-primary::after{ content:" →"; font-weight:900; transition:transform .15s }
.form .btn-primary:hover::after{ transform:translateX(2px) }
#form-status{ min-height:1.2em; color:#C7D0E0 }

/* Chat */
.cta-layout{ display:grid; gap:28px; grid-template-columns:1.1fr .9fr; align-items:start }
@media (max-width:980px){ .cta-layout{ grid-template-columns:1fr } }
.cta-col{ max-width:720px }
.hire-chat{ position:relative; min-height:260px; padding:4px 2px; pointer-events:none; max-width:520px; margin-left:auto; border-radius:20px }
@media (max-width:980px){ .hire-chat{ max-width:none; margin-left:0 } }
.chat-stack{ display:flex; flex-direction:column; gap:12px; will-change:opacity, transform }
.bubble{ position:relative; max-width:86%; padding:12px 14px; margin:0; border-radius:16px; background:#0f1726; border:1px solid #1c2435; color:#eaf0ff; line-height:1.4; box-shadow:0 10px 24px rgba(0,0,0,.25); opacity:0; transform:translateY(8px) scale(.98); animation:bubble-in .45s cubic-bezier(.2,.6,.3,1) var(--delay,0ms) forwards }
.bubble.left{ align-self:flex-start } .bubble.right{ align-self:flex-end; background:#102037; border-color:#22314e }
.bubble.strong{ font-weight:900; background:#132040; border-color:#294b8d }
.bubble.left::after,.bubble.right::after{ content:""; position:absolute; bottom:-7px; border:7px solid transparent }
.bubble.left::after{ left:14px;  border-top-color:#0f1726; filter:drop-shadow(0 -1px 0 #1c2435) }
.bubble.right::after{ right:14px; border-top-color:#102037; filter:drop-shadow(0 -1px 0 #22314e) }
.bubble.typing{ min-width:clamp(220px,62%,520px); padding:12px 14px; display:flex; gap:6px; justify-content:center; white-space:nowrap; flex:0 0 auto }
.bubble.typing span{ width:8px; height:8px; border-radius:999px; background:#9fb0cc; opacity:.55; animation:typing 1.2s ease-in-out infinite }
.bubble.typing span:nth-child(2){ animation-delay:.15s } .bubble.typing span:nth-child(3){ animation-delay:.30s }
.chat-stack.exiting{ animation:chat-out .55s ease forwards }
@keyframes bubble-in{ to{ opacity:1; transform:none } }
@keyframes chat-out{ to{ opacity:0; transform:translateY(-6px) } }
@keyframes typing{ 0%,100%{ transform:translateY(0); opacity:.55 } 50%{ transform:translateY(-4px); opacity:.95 } }
@media (min-width:981px){ .cta-layout{ align-items:stretch } .hire-chat{ align-self:stretch; display:flex; align-items:center; height:100% } }
@media (prefers-reduced-motion:reduce){ .bubble{ animation:none; opacity:1; transform:none } .bubble.typing span{ animation:none } .chat-stack.exiting{ animation:none; opacity:1; transform:none } }

/* ======= Responsive general ======= */
@media (max-width: 1180px){
  .container{ padding:0 20px }
}

/* Hero apilado */
@media (max-width: 980px){
  .hero{ grid-template-columns:1fr; row-gap:20px }
  .hero .card-3d{ min-height:300px }
}

/* Pequeñas */
@media (max-width: 680px){
  .h1{ font-size:34px; line-height:1.14 }
  .hero .card-3d{ min-height:280px }
  .proof-logos{ gap:8px }
  .chip{ height:32px; padding:0 10px }
}

/* Cases/portafolio en móvil */
@media (max-width: 900px){
  .case__body{ min-height:260px }
  .case__badge{ top:12px; right:12px }
  .case__title{ font-size:20px }
}

/* Campo trampa anti bots */
.hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0 }

#contactSubmit[data-loading]{ opacity:.7; cursor:progress }
#contactSubmit[data-loading]::after{ content:' …'; margin-left:.25rem }

/* ====== CTA blanco ====== */
#contacto .cta-big.is-light{
  --panel:#FFFFFF; --line:#E5EAF3; --text:#0B1220; --muted:#5A6B86;
  background:var(--panel) !important; background-image:none !important;
  border:1px solid var(--line) !important;
  box-shadow:0 18px 48px rgba(12,18,32,.10), inset 0 1px 0 rgba(0,0,0,.02) !important;
  color:var(--text); border-radius:24px; padding:34px 34px 30px;
}
#contacto .cta-big.is-light .h3{ color:var(--text) }
#contacto .cta-big.is-light > p, #contacto .cta-big.is-light .muted{ color:var(--muted) }
#contacto .hire-chat{ padding:6px 2px }
#contacto .chat-stack .bubble{ max-width:92% }
@media (max-width:980px){
  #contacto .cta-big{ padding:22px 18px }
  #contacto .cta-layout{ grid-template-columns:1fr; row-gap:18px }
  #contacto .hire-chat{ max-width:none; margin:0 }
}

/* ====== Mobile polish: aire y safe areas ====== */
@media (max-width:860px){
  .hdr + main{ padding-top:24px }
  .container{ padding-left:26px; padding-right:26px }
  .hdr .container, .hdr .container.nav{ padding-left:26px; padding-right:26px }
  .nav{ padding:14px 0 }
  .burger{ margin-left:4px }
  .h1{ font-size:clamp(28px, 8.2vw, 36px); line-height:1.12; letter-spacing:-.02em }
  .h2{ font-size:clamp(22px, 5.6vw, 28px); line-height:1.16 }
  .h3{ font-size:clamp(18px, 4.8vw, 22px) }
  .lead{ font-size:clamp(14px, 4.2vw, 16px); line-height:1.55; margin:8px 0 16px }
  .hero{ padding-top:72px }
  .cta-row{ gap:10px }
  .cta-row .btn{ width:100%; justify-content:center; padding:13px 16px }
}
/* safe areas */
@supports (padding: max(0px)){
  @media (max-width:860px){
    .hdr{ padding-top:max(0px, env(safe-area-inset-top)) }
    .hdr .container, .hdr .container.nav{
      padding-left:max(26px, env(safe-area-inset-left) + 16px);
      padding-right:max(26px, env(safe-area-inset-right) + 16px);
    }
    body{
      padding-left:max(0px, env(safe-area-inset-left));
      padding-right:max(0px, env(safe-area-inset-right));
    }
  }
}

/* Ocultar toggle A/B en móvil para que no tape nada */
@media (max-width:980px){
  .ab-toggle{ display:none !important }
}

/* =======================================================
   MOBILE — RITMO VERTICAL / AIRE ENTRE SECCIONES
   ======================================================= */
@media (max-width: 900px){
  :root{ --space-mobile: 68px; }
  .section,
  section.container.section{
    padding-top: var(--space-mobile) !important;
    padding-bottom: calc(var(--space-mobile) - 8px) !important;
  }
  .section + .section{ margin-top: 10px; }
  .section > .h2{ margin-top: 0; margin-bottom: 14px; }
  .section > .section-sub{ margin-bottom: 20px; }
  #portafolio .case-grid{ margin-top: 8px; }
  .testi-3{ margin-top: 10px; }
  #eximius-project.section{ padding-top: calc(var(--space-mobile) + 8px) !important; }
}

/* =======================================================
   TABLET TUNING (768–1180 px)
   ======================================================= */
@media (min-width: 768px) and (max-width: 1180px){
  :root{ --space-tablet: 64px; }
  .container{ padding-left: 24px; padding-right: 24px; }
  .section,
  section.container.section{
    padding-top: var(--space-tablet) !important;
    padding-bottom: calc(var(--space-tablet) - 10px) !important;
  }
  .section + .section{ margin-top: 10px; }
  .hero{ grid-template-columns: 1.1fr .9fr; gap: 24px; padding-top: 80px; padding-bottom: 64px; }
  .cards-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .testi-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .case-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

/* =======================================================
   HOSTINGER — igual altura que DigitalOcean
   ======================================================= */
.chip--hostinger{ padding-left: 12px !important; }
.chip--hostinger .chip-logo{
  height: 50px !important;
  width: auto !important;
  transform: translateY(.5px);
  filter: brightness(0) invert(1);
}
@media (min-width: 860px){
  .chip--hostinger .chip-logo{ height: 50px !important; }
}

/* =======================================================
   HEADER · TABLET (768–1180 px)
   ======================================================= */
@media (min-width: 768px) and (max-width: 859.98px){
  .hdr .container,
  .hdr .container.nav{ padding-left: 28px; padding-right: 28px; }
  .nav{ padding: 16px 0; }
  .logo-img{ height: 34px; }
  .burger{ margin-left: 6px; }
  .hdr + main{ padding-top: 20px; }
}
@media (min-width: 860px) and (max-width: 1180px){
  .hdr .container,
  .hdr .container.nav{ padding-left: 32px; padding-right: 32px; }
  .nav{ padding: 16px 0; }
  .logo-img{ height: 36px; }
  .links{ gap: 20px; }
  .links a{ padding: 8px 0; }
  .hdr + main{ padding-top: 22px; }
}
@supports (padding: max(0px)){
  @media (min-width: 768px) and (max-width: 1180px){
    .hdr .container,
    .hdr .container.nav{
      padding-left: max(28px, env(safe-area-inset-left) + 16px);
      padding-right: max(28px, env(safe-area-inset-right) + 16px);
    }
  }
}

/* =======================================================
   ANCLAS (scroll-padding)
   ======================================================= */
:root{
  --hdr-h-mobile: 76px;
  --hdr-h-tablet: 84px;
  --hdr-h-desktop: 88px;
}
@media (min-width: 860px){ html{ scroll-padding-top: var(--hdr-h-desktop); } }
@media (min-width: 768px) and (max-width: 859.98px){ html{ scroll-padding-top: var(--hdr-h-tablet); } }
@media (max-width: 767.98px){ html{ scroll-padding-top: var(--hdr-h-mobile); } }
@media (min-width: 860px){
  #servicios,#portafolio,#proceso,#faq,#contacto{ scroll-margin-top: var(--hdr-h-desktop); }
}
@media (min-width: 768px) and (max-width: 859.98px){
  #servicios,#portafolio,#proceso,#faq,#contacto{ scroll-margin-top: var(--hdr-h-tablet); }
}
@media (max-width: 767.98px){
  #servicios,#portafolio,#proceso,#faq,#contacto{ scroll-margin-top: var(--hdr-h-mobile); }
}

/* ===== Showcase: base ===== */
.s-showcase .showcase{
  position:relative;
  overflow:hidden;
  border-radius:20px;
  border:1px solid var(--line);
  background:var(--panel);
}
.s-showcase .showcase__tilt{
  transform: rotate(-10deg);
  transform-origin: center;
  transform-style: preserve-3d;
  will-change: transform;
}
.s-showcase .showcase__rows{
  display:grid;
  gap:38px;
  padding:22px 0;
}

/* Filas */
.s-showcase .showcase__row{
  display:flex;
  align-items:center;
  gap:22px;
  list-style:none;
  margin:0; padding:0;
  will-change: transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform-style: preserve-3d;
}

/* Ítems (thumbnails) */
.s-showcase .shot{
  flex:0 0 auto;
  width: var(--w, 280px);
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  background:#0c1423;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform-style:preserve-3d;
  will-change:transform;
}
.s-showcase .shot img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:transform;
}

/* Fades rectos en los BORDES (no rotados) */
.s-showcase .showcase__fades{
  position:absolute; inset:0; pointer-events:none;
}
.s-showcase .showcase__fades::before,
.s-showcase .showcase__fades::after{
  content:""; position:absolute; top:0; bottom:0; width:min(12vw,140px);
  z-index:3;
}
.s-showcase .showcase__fades::before{
  left:0;
  background:linear-gradient(90deg, var(--bg) 0%, rgba(11,18,32,0) 100%);
}
.s-showcase .showcase__fades::after{
  right:0;
  background:linear-gradient(270deg, var(--bg) 0%, rgba(11,18,32,0) 100%);
}

/* Keyframes: usa translate3d para forzar GPU y evitar flicker */
@keyframes marquee-left {
  0%   { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-50%,0,0); }
}
@keyframes marquee-right {
  0%   { transform: translate3d(-50%,0,0); }
  100% { transform: translate3d(0,0,0); }
}

/* ===== Ajustes móviles ===== */
@media (max-width: 860px){
  .s-showcase .showcase{ border-radius:16px; }
  .s-showcase .showcase__rows{ gap:28px; padding:18px 0; }
  /* ANTES: transform:none; — AHORA mantenemos la inclinación también en móvil */
  .s-showcase .showcase__tilt{ transform: rotate(-10deg); }  /* ← cambio clave */
  .s-showcase .shot{ width: clamp(220px, 78vw, 360px); border-radius: 16px; }
  .s-showcase .showcase__fades::before,
  .s-showcase .showcase__fades::after{ width: min(18vw, 120px); }
}

/* Máscara en Safari (fades sin overlays ni repaints) */
@supports (-webkit-mask-image: linear-gradient(#000, #000)) {
  .s-showcase .showcase__fades{ display:none; }
  .s-showcase .showcase{
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
}

/* ======= FIN Showcase ======= */

/* =======================
   iOS WebKit hardening
   ======================= */
html.is-ios .hdr.sticky{
  /* Evita crash + flicker con sticky + backdrop-filter */
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: rgba(12,20,35,.92) !important;
}

html.is-ios .card-3d__bg{
  /* El fondo animado con blur provoca tearing en iOS */
  animation: none !important;
  filter: none !important;
  opacity: .30 !important;
}

html.is-ios .bh-bubble,
html.is-ios .case__badge{
  /* Quita backdrop-filter en elementos sobrepuestos */
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: rgba(16,26,44,.92) !important;
}

html.is-ios .s-showcase{
  /* La máscara en Safari móvil puede disparar repaints caros */
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
html.is-ios .s-showcase .showcase__fades{ display:none !important; } /* sin fades en iOS */

/* ===== GPU polish adicional (anti parpadeo móvil) ===== */
.s-showcase .showcase__row,
.s-showcase .shot,
.s-showcase .shot img{
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform;
}

/* ======= Nav condensado: dropdown (desktop) ======= */
.dropdown{ position:relative; }
.dropbtn{
  appearance:none; background:none; border:0; color:#E6ECF7; font:inherit; font-weight:700;
  padding:8px 0; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
}
.dropbtn:hover{ color:#fff; }
.dropdown-menu{
  position:absolute; top:calc(100% + 8px); left:0; min-width:200px; padding:10px;
  background:#0c1423; border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 36px rgba(0,0,0,.35);
  display:none; z-index:50;
}
.dropdown-menu a{
  display:block; padding:8px 10px; border-radius:8px; color:#E6ECF7;
}
.dropdown-menu a:hover{ background:#0f1726; color:#fff; }

/* Abrir por hover y por foco (accesible) */
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu{ display:block; }
.dropdown:focus-within .dropbtn,
.dropdown:hover .dropbtn{ color:#fff; }

/* Ocultar caret en móviles (se usa otro) */
@media (max-width: 859.98px){
  .dropdown{ display:none; }
}

/* ======= Móvil: submenús ======= */
.m-sub{
  width:100%; text-align:left; background:none; border:0; color:#E6ECF7; padding:10px 0;
  border-bottom:1px solid #121a2a; display:flex; align-items:center; justify-content:space-between; font-weight:700;
}
.m-sub .caret{ opacity:.8; }
.m-sub[aria-expanded="true"] .caret{ transform:rotate(180deg); }
.m-submenu{ padding:6px 0 2px; }
.m-submenu a{ display:block; padding:10px 10px; border-radius:8px; }
.m-submenu a:hover{ background:#0f1726; }

/* Afinado: spacing en mobile menu */
.mobile-menu a{ padding:10px 0; }

/* Asegura que [hidden] realmente no se muestre (iOS/Safari) */
[hidden] { display: none !important; }

/* Submenú móvil: rotación del caret al abrir */
.m-sub .caret { transition: transform .2s ease; }
.m-sub[aria-expanded="true"] .caret { transform: rotate(180deg); }

/* iOS: garantizar que [hidden] no se muestre nunca */
[hidden] { display: none !important; }

/* Submenú móvil */
.m-sub {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  color: #E6ECF7;
  font: inherit;
  font-weight: 800;
  letter-spacing: .1px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 10px;
  display: block;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255,255,255,.1);
  margin: 8px 0;
}
.m-sub .caret { float: right; transition: transform .2s ease; }
.m-sub[aria-expanded="true"] .caret { transform: rotate(180deg); }

.m-submenu {
  /* Aseguramos display incluso cuando se quite [hidden] en iOS */
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 10px 10px 12px;
  margin: -2px 0 10px 6px;
  border-left: 2px solid #1b2740;
}
.m-submenu a { padding: 8px 4px; border-radius: 8px; }
.m-submenu a:active { background: #0f1a2b; }

@supports not (selector(:has(*))) {
  /* Nada especial aquí; solo dejamos el bloque por si lo necesitas después */
}