/* --- Context / frame --- */
.hero-bleed{ background: linear-gradient(120deg,#fff1b6 0%,#ffc6d3 52%,#caa0ff 100%); }
.hero-frame{ border-radius:0 0 22px 22px; overflow:hidden; }
.hero-inner{ max-width:1180px; margin:0 auto; padding:3.5rem 1rem; display:flex; flex-direction:column; gap:1rem; }

/* --- Titular --- */
.hero-inner .hero-title{
  font-family:"Space Grotesk","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  font-weight:700; margin:0; line-height:1.25; letter-spacing:-0.05em;
  font-size:clamp(2.6rem,6.5vw,8.6rem); display:block; width:100%;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  color:#0b1220; text-rendering:optimizeLegibility; text-wrap:balance;
  word-break:keep-all; hyphens:none;
}
:root .hero-inner.hero-title{ font-size:clamp(3.6rem,5.5vw,9.6rem); }

.hero-accent{
  background:linear-gradient(90deg,#00c6a7,#00b0ff 70%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; color:transparent; display:inline-block; transform:translateY(-2px);
}
.hero-sub{ margin:0; color:rgba(11,18,32,0.66); font-size:clamp(1rem,1.6vw,1.25rem); max-width:70ch; }
.hero-ctas{ margin-top:1.25rem; display:flex; gap:.75rem; flex-wrap:wrap; }
.cta-primary{ background:#0b1220; color:#fff; padding:.8rem 1.2rem; border-radius:999px; font-weight:700; text-decoration:none; box-shadow:0 10px 30px rgba(2,6,23,.12); }
.cta-secondary{ background:rgba(255,255,255,.95); color:#0b1220; padding:.7rem 1rem; border-radius:999px; border:1px solid rgba(0,0,0,.06); text-decoration:none; font-weight:600; }

/* Tarjeta de cliente en hero */
.client-card{ display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.95); border:1px solid rgba(2,6,23,.08); border-radius:12px; padding:6px 8px; box-shadow:0 6px 16px rgba(2,6,23,.07); width:fit-content; max-width:360px; }
.client-avatar{ width:36px; height:36px; border-radius:999px; border:1px solid rgba(2,6,23,.12); object-fit:cover; }
.client-info{ display:flex; flex-direction:column; gap:2px; }
.client-name{ font-weight:700; font-size:.9rem; }
.client-meta{ display:flex; align-items:center; gap:6px; font-size:.8rem; }
.client-meta-label{ color:#6b7380; font-weight:600; }
.client-country-pill{ display:inline-flex; align-items:center; gap:6px; padding:2px 6px; border-radius:999px; background:#f1f5f9; border:1px solid rgba(2,6,23,.08); font-weight:700; color:#0b1220; }
.client-flag{ width:16px; height:11px; border-radius:3px; border:1px solid rgba(2,6,23,.12); }

@media (max-width:980px){
  .hero-inner{ padding:2.2rem 1rem; }
  .hero-inner > .hero-title{ font-size:clamp(2.2rem,8.6vw,4.2rem); line-height:1.02; }
  .hero-accent{ transform:none; -webkit-text-stroke:0; }
}
@media (prefers-reduced-motion:reduce){
  .hero-accent,.hero-title{ transition:none; transform:none; }
}

/* Header base / estados (desktop por defecto) */
#siteHeader{
  position:fixed; top:.5rem; left:1.5rem; right:1.5rem; z-index:50;
  transition:background-color .28s, box-shadow .28s, backdrop-filter .28s, border-radius .28s;
}
#siteHeader .header-inner{ max-width:1200px; margin:0 auto; padding:.75rem 1rem; display:flex; align-items:center; justify-content:space-between; }
#siteHeader.site-header--top{ background:transparent!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; box-shadow:none!important; border-radius:0!important; }
#siteHeader.site-header--scrolled{ background:rgba(255,255,255,0.98)!important; -webkit-backdrop-filter:blur(8px)!important; backdrop-filter:blur(8px)!important; box-shadow:0 8px 30px rgba(2,6,23,0.08)!important; border-radius:0 0 18px 18px!important; }
#siteHeader.site-header--top .logo-text, #siteHeader.site-header--top nav a{ color:#0b1220!important; font-weight:700!important; }
#siteHeader.site-header--scrolled .logo-text, #siteHeader.site-header--scrolled nav a{ color:#0b1220!important; }
#siteHeader a{ color:inherit; transition:color .18s ease; }

/* ===== Responsive (celular y tablet ≤ 1024px) ===== */
@media (max-width:1024px){
  #siteHeader{ top:0; left:0; right:0; border-radius:0; padding:.5rem 1rem; }
  #siteHeader.site-header--top{
    background:transparent!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    box-shadow:none!important;
    border-radius:0!important;
  }
  #siteHeader.site-header--scrolled{
    background:rgba(255,255,255,0.98)!important;
    -webkit-backdrop-filter:blur(8px)!important;
    backdrop-filter:blur(8px)!important;
    box-shadow:0 8px 30px rgba(2,6,23,0.08)!important;
    border-radius:0!important;
  }
}

/* ===== Menú móvil ===== */
#mobileMenu{ position:fixed; inset:0; z-index:9999; display:none; isolation:isolate; }
#mobileMenu[aria-hidden="false"]{ display:block; }
#mobileMenuBackdrop{ position:absolute; inset:0; background:rgba(0,0,0,.4); backdrop-filter:blur(4px); opacity:0; transition:opacity 220ms ease; pointer-events:none; }
#mobileMenu[aria-hidden="false"] #mobileMenuBackdrop{ opacity:1; pointer-events:auto; }
#mobileMenu aside{
  position:absolute; right:0; top:0; height:100%;
  width:92vw; max-width:380px; 
  background:#fff !important;
  color:#0b1220;
  box-shadow:0 20px 60px rgba(2,6,23,0.12);
  transform:translateX(110%); transition:transform 300ms cubic-bezier(.2,.9,.2,1); will-change:transform;
}
#mobileMenu[aria-hidden="false"] aside{ transform:translateX(0); }
#mobileMenu nav a{ color:#0b1220 !important; }

/* Suavizados varios */
.blur-3xl{ filter:blur(72px); }
.blur-2xl{ filter:blur(40px); }
.group:hover .shadow-md{ box-shadow:0 18px 45px rgba(2,6,23,0.08); }
article a:focus{ outline:3px solid rgba(59,130,246,0.18); outline-offset:3px; }

/* ===== Botones (utilidad) ===== */
.blk-btn{ padding:.85rem 1.15rem; border-radius:999px; font-weight:800; line-height:1; }
.blk-btn-dark{ background:#0b1220; color:#fff; box-shadow:0 10px 30px rgba(2,6,23,.12); }
.blk-btn-ghost{ background:#fff; border:1px solid rgba(2,6,23,.1); color:#0b1220; }
.blk-btn-accent{ background:linear-gradient(135deg,#00c6a7,#00b0ff); color:#fff; }

/* ===== A) Hero visual con glass + tarjeta flotante ===== */
.blk-hero-wrap{
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(255,255,255,.28), transparent 38%),
    linear-gradient(120deg,#fff1b6 0%,#ffc6d3 52%,#caa0ff 100%);
}
.blk-floating-card{
  position:absolute; left:8%; bottom:10%;
  width:min(560px,84%); background:#fff; border-radius:16px;
  padding:14px; box-shadow:0 30px 80px rgba(2,6,23,.18);
  border:1px solid rgba(2,6,23,.06);
  animation: floaty 6s ease-in-out infinite;
}
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
.blk-chip{
  font-weight:700; font-size:.85rem; padding:.45rem .7rem; border-radius:12px;
  background:#f1f5f9; border:1px solid rgba(2,6,23,.08); color:#0b1220;
}
.blk-chip-cta{ background:#ffedd5; border-color:#fdba74; }
.blk-cursor{
  position:absolute; right:-10px; bottom:-14px; width:0; height:0;
  border-left:16px solid #5b61ff; border-top:16px solid transparent; transform:rotate(-12deg);
  filter:drop-shadow(0 6px 10px rgba(2,6,23,.18));
}

/* ===== B) Mock navegador + code card ===== */
.blk-device{ border-radius:18px; overflow:hidden; background:#0b1220; }
.blk-device-bar{ height:26px; background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.45)); padding:0 12px; display:flex; align-items:center; gap:8px; }
.blk-device-bar span{ width:11px; height:11px; border-radius:999px; background:#ef4444; box-shadow: 18px 0 0 #f59e0b, 36px 0 0 #22c55e; }
.blk-codecard{
  background:linear-gradient(180deg,#0f172a,#0b1220); color:#e2e8f0;
  border-radius:18px; padding:18px; border:1px solid rgba(148,163,184,.18);
  box-shadow:0 20px 60px rgba(2,6,23,.2);
}
.blk-codecard pre{ max-height:420px; overflow:auto; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:.92rem; }

/* Utilidad: clamp de líneas */
.line-clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ===== C) Foto con anillos ===== */
.blk-rings::before,
.blk-rings::after{
  content:""; position:absolute; right:-40px; top:10%; width:220px; height:220px; border-radius:999px;
  background: radial-gradient(circle at center, rgba(255,255,255,.9), rgba(255,255,255,0) 60%);
  mask: radial-gradient(circle at center, transparent 46%, #000 47% 53%, transparent 54% 100%);
  opacity:.6; filter:blur(1px);
}
.blk-rings::after{ top:auto; bottom:6%; width:260px; height:260px; opacity:.45; }

/* ===== D) Banda oscura de casos ===== */
.blk-cta-dark{
  background:
    radial-gradient(120% 140% at 100% 10%, rgba(99,102,241,.22), transparent 60%),
    linear-gradient(180deg,#0b1220,#0b1220);
}
.blk-laptop{
  height:240px; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.12);
  background:#111827; box-shadow:0 16px 60px rgba(0,0,0,.35);
}
.blk-mini-chart{
  position:absolute; right:-8px; top:-10px; width:64px; height:64px;
  background:#fff; color:#0b1220; border-radius:12px; display:grid; place-items:center;
  font-weight:900; box-shadow:0 20px 60px rgba(2,6,23,.2); border:1px solid rgba(2,6,23,.06);
}

/* ===== Reveal simple ===== */
.reveal{ opacity:0; transform: translateY(12px) scale(.985); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.9,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* ====== Responsive helpers SOLO para #expert-web ====== */
#expert-web .exp-device{ border-radius:16px; overflow:hidden; background:#0b1220; }
#expert-web .exp-device-bar{
  height:24px; display:flex; align-items:center; gap:8px; padding:0 12px;
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.45));
}
#expert-web .exp-device-bar span{
  width:10px; height:10px; border-radius:999px; background:#ef4444;
  box-shadow: 16px 0 0 #f59e0b, 32px 0 0 #22c55e;
}
#expert-web .exp-codecard{
  background:linear-gradient(180deg,#0f172a,#0b1220);
  color:#e2e8f0; border-radius:16px;
  border:1px solid rgba(148,163,184,.18);
  box-shadow:0 18px 50px rgba(2,6,23,.18);
}
#expert-web .exp-codecard pre{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  scrollbar-width: thin;
}
#expert-web .exp-codecard pre::-webkit-scrollbar{ height:8px; width:8px; }
#expert-web .exp-codecard pre::-webkit-scrollbar-thumb{ background:rgba(148,163,184,.35); border-radius:8px; }
@media (max-width: 639px){
  #expert-web .exp-codecard{ border-radius:14px; }
}
@media (min-width: 1024px){
  #expert-web .exp-device img{ height:420px; }
}

/* ======== REDISEÑO SÓLIDO: botones flotantes ======== */
.fab-wrap .fab{
  width:56px; height:56px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px rgba(2,6,23,.16); border:1px solid rgba(2,6,23,.06);
  transition: transform .18s ease, filter .18s ease;
}
.fab-wrap .fab:hover{ transform: translateY(-2px); }
.fab-wrap .fab-wa{ background:#25D366; color:#fff; }      /* WhatsApp sólido */
.fab-wrap .fab-wa:hover{ filter:brightness(.95); }
.fab-wrap .fab-quote{ background:#0b1220; color:#fff; }    /* Cotizar sólido (tinta) */
.fab-wrap .fab-quote:hover{ filter:brightness(1.05); }

/* ===== Detalle de proyecto: proceso, branding y galería ===== */
.blk-timeline { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .blk-timeline { grid-template-columns: repeat(3, 1fr); } }
.blk-step { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 16px; box-shadow: 0 2px 6px rgba(0,0,0,0.04); }
.blk-step-title { font-weight: 800; display: flex; align-items: center; gap: 10px; }
.blk-step-num { width: 28px; height: 28px; border-radius: 9999px; background: #00c6a7; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.blk-step-desc { color: #6b7380; margin-top: 6px; }

.blk-brand { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .blk-brand { grid-template-columns: 1fr 1fr; } }
.blk-color { display: flex; align-items: center; gap: 10px; }
.blk-color-swatch { width: 36px; height: 36px; border-radius: 10px; border: 1px solid #e5e7eb; }
.blk-font { padding: 12px; border: 1px solid #e5e7eb; border-radius: 12px; }

.blk-lightbox-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.75); display: none; align-items: center; justify-content: center; z-index: 60; }
.blk-lightbox-backdrop.active { display: flex; }
.blk-lightbox { background: #111; color: #fff; border-radius: 16px; padding: 16px; max-width: 90vw; max-height: 85vh; display: flex; flex-direction: column; gap: 12px; }
.blk-lightbox-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.blk-lightbox-img { max-width: 86vw; max-height: 70vh; object-fit: contain; border-radius: 10px; background: #000; }
.blk-lightbox-btn { background: #fff; color: #0b1220; border: 1px solid #e5e7eb; padding: 8px 12px; border-radius: 10px; font-weight: 700; }

/* ===== Timeline vertical integrada con galería ===== */
.vt-wrap{ align-items:start; }
.vt-aside{ position:sticky; top:100px; align-self:start; }
.vt-timeline{ list-style:none; margin:0; padding:0 0 0 28px; position:relative; }
.vt-timeline::before{ content:""; position:absolute; left:6px; top:0; bottom:0; width:2px; background:#e5e7eb; }
.vt-step{ display:flex; gap:12px; padding:12px 0; cursor:pointer; }
.vt-step{ display:flex; gap:12px; padding:12px; cursor:pointer; border:1px solid #e5e7eb; border-radius:12px; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.vt-step:hover{ background:#f9fafb; }
.vt-dot{ width:24px; height:24px; border-radius:9999px; border:2px solid #0b1220; background:#fff; margin-top:2px; box-shadow:0 0 0 2px rgba(2,6,23,.08); display:grid; place-items:center; }
.vt-dot-label{ font-weight:800; font-size:.8rem; color:#0b1220; line-height:1; }
.vt-step.active{ background:#fff; border-color:#000; box-shadow:0 0 0 2px #000 inset; }
.vt-step.active .vt-dot{ background:#000; border-color:#000; box-shadow:0 0 0 3px #000; }
.vt-step.active .vt-dot-label{ color:#fff; }
.vt-step-title{ font-weight:800; }
.vt-step-desc{ color:#6b7380; font-size:.9rem; }
.vt-gallery{ display:block; }
.vt-card{ margin-bottom:26px; }
.vt-caption{ display:flex; flex-direction:column; gap:4px; margin-top:8px; }
.vt-cap-step{ font-weight:800; }
.vt-cap-desc{ color:#6b7380; font-size:.95rem; }
@media (max-width:1024px){
  .vt-aside{ position:static; }
  .vt-timeline::before{ display:none; }
}