/* =========================================================
   MKT SURGE — sistema de marca para el sitio público
   Tipografías cargadas desde <link> en el <head> de cada página
   (Archivo, Public Sans, Caveat, IBM Plex Mono — Google Fonts)
   ========================================================= */

:root{
  --bg:#FBF6EF;
  --surface:#FFFFFF;
  --surface-2:#F3EBDD;
  --ink:#262220;
  --ink-soft:#6E6459;
  --ink-faint:#948A7D;
  --line:rgba(38,34,32,0.13);
  --orange:#FFA500;
  --orange-deep:#B96A00;
  --orange-soft:#FFEBC2;
  --blue:#2E7FB8;
  --blue-soft:#DCEEF9;
  --green:#5C7A1A;
  --green-soft:#E7F1D2;
  --ink-on-orange:#2A1B00;
  --shadow-sm:0 1px 2px rgba(38,34,32,0.06);
  --shadow-lg:0 20px 45px -20px rgba(38,34,32,0.28);
  --radius:16px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#18140F; --surface:#221C16; --surface-2:#2A231C;
    --ink:#F7EFE4; --ink-soft:#C7BBAC; --ink-faint:#93887A;
    --line:rgba(247,239,228,0.13);
    --orange:#FFB733; --orange-deep:#FFCC70; --orange-soft:rgba(255,183,51,0.16);
    --blue:#7CC0EC; --blue-soft:rgba(124,192,236,0.15);
    --green:#B7D869; --green-soft:rgba(183,216,105,0.15);
    --ink-on-orange:#2A1B00;
    --shadow-lg:0 20px 45px -20px rgba(0,0,0,0.6);
  }
}
:root[data-theme="dark"]{
  --bg:#18140F; --surface:#221C16; --surface-2:#2A231C;
  --ink:#F7EFE4; --ink-soft:#C7BBAC; --ink-faint:#93887A;
  --line:rgba(247,239,228,0.13);
  --orange:#FFB733; --orange-deep:#FFCC70; --orange-soft:rgba(255,183,51,0.16);
  --blue:#7CC0EC; --blue-soft:rgba(124,192,236,0.15);
  --green:#B7D869; --green-soft:rgba(183,216,105,0.15);
  --ink-on-orange:#2A1B00;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Public Sans', ui-sans-serif, system-ui, sans-serif;
  line-height:1.62; -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--orange-soft); }
img{ max-width:100%; display:block; }
a{ color:inherit; }
.wrap{ max-width:1160px; margin:0 auto; padding:0 28px; }

h1,h2,h3,h4{ font-family:'Archivo',sans-serif; font-weight:800; text-wrap:balance; margin:0; }
p{ margin:0; }
.lede{ font-size:1.14rem; color:var(--ink-soft); max-width:58ch; }

.eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:0.11em; text-transform:uppercase;
  color:var(--orange-deep); display:flex; align-items:center; gap:10px; margin:0 0 14px;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--orange-deep); }

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:9px; font-family:'Archivo',sans-serif; font-weight:700; font-size:0.96rem;
  padding:14px 26px; border-radius:100px; text-decoration:none; border:1.5px solid transparent; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--orange); color:var(--ink-on-orange); box-shadow:var(--shadow-lg); }
.btn-primary:hover{ box-shadow:0 24px 50px -18px rgba(255,165,0,0.55); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--ink-faint); }
.btn-ghost:hover{ border-color:var(--orange); }
.btn-sm{ padding:9px 18px; font-size:0.85rem; }

/* ---- nav ---- */
.topnav{ position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px) saturate(1.1); border-bottom:1px solid var(--line); }
.topnav-inner{ max-width:1160px; margin:0 auto; padding:16px 28px; display:flex; align-items:center; justify-content:space-between; gap:20px; position:relative; }
.brandmark{ display:flex; align-items:center; gap:10px; font-family:'Archivo',sans-serif; font-weight:800; font-size:16px; }
.brandmark img{ width:30px; height:30px; }
.navlinks{ display:flex; gap:6px; align-items:center; }
.navlinks a{ text-decoration:none; font-size:14px; font-weight:600; color:var(--ink-soft); padding:8px 14px; border-radius:100px; white-space:nowrap; }
.navlinks a:hover{ color:var(--ink); background:var(--surface-2); }
.navlinks a.current{ color:var(--orange-deep); }
.nav-toggle{ display:none; background:none; border:1.5px solid var(--ink-faint); border-radius:8px; font-size:17px; line-height:1; cursor:pointer; color:var(--ink); padding:8px 11px; }

/* Switch de idioma ES/EN — vive dentro de .navlinks a propósito, para heredar
   gratis el mismo comportamiento responsivo que ya tienen los enlaces del nav
   (inline en escritorio, dentro del menú hamburguesa en móvil), sin tocar la
   fila del encabezado que ya se ajustó para que no se desborde. */
.navlinks .lang-switch{
  display:flex; align-items:center; gap:2px; background:var(--surface-2);
  border:1.5px solid var(--ink-faint); border-radius:100px; padding:3px; margin-left:6px;
}
.navlinks .lang-switch a{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:700; letter-spacing:.03em;
  padding:6px 12px; border-radius:100px; text-decoration:none; color:var(--ink-faint);
  white-space:nowrap; flex:1; text-align:center;
}
.navlinks .lang-switch a:hover{ color:var(--ink); }
.navlinks .lang-switch a.active{ background:var(--orange); color:var(--ink-on-orange); cursor:default; }
.navlinks .lang-switch a.active:hover{ color:var(--ink-on-orange); }
.theme-toggle{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  background:var(--surface); border:1.5px solid var(--ink-faint); color:var(--ink);
  font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.theme-toggle:hover{ background:var(--surface-2); }

/* ---- hero ---- */
.hero{ padding:88px 0 76px; position:relative; overflow:hidden; }
.hero-ring{ position:absolute; right:-160px; top:-180px; width:520px; height:520px; border-radius:50%; border:60px solid var(--orange-soft); opacity:.65; z-index:0; }
.hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px; align-items:center; }
@media (max-width:860px){ .hero-inner{ grid-template-columns:1fr; } .hero-ring{ display:none; } }
.hero h1{ font-size:clamp(2.5rem,5.2vw,4.1rem); line-height:1.03; }
.hero h1 em{ font-style:normal; color:var(--orange-deep); }
.hero .lede{ margin-top:22px; }
.hero-ctas{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.hero-tagline{ font-family:'Caveat',cursive; font-weight:700; font-size:1.5rem; color:var(--ink-soft); margin-top:28px; }
.hero-art{ display:flex; justify-content:center; }
.hero-art img{ width:min(320px,80%); filter:drop-shadow(0 24px 50px rgba(0,0,0,0.16)); }

/* ---- sections ---- */
section{ padding:80px 0; border-top:1px solid var(--line); }
section.flush{ border-top:none; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:26px; margin-bottom:44px; flex-wrap:wrap; }

/* ---- about strip ---- */
.about-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:48px; align-items:center; }
@media (max-width:820px){ .about-grid{ grid-template-columns:1fr; } }
.stat-row{ display:flex; gap:36px; margin-top:28px; flex-wrap:wrap; }
.stat b{ font-family:'Archivo',sans-serif; font-size:1.9rem; display:block; color:var(--orange-deep); }
.stat span{ font-size:12.5px; color:var(--ink-faint); font-family:'IBM Plex Mono',monospace; }

/* ---- services grid (home summary) ---- */
.svc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; }
.svc-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px;
  display:flex; flex-direction:column; gap:10px; text-decoration:none; color:var(--ink);
  transition:border-color .15s ease, transform .15s ease;
}
.svc-card:hover{ border-color:var(--orange); transform:translateY(-2px); }
.svc-card .tagchip{ align-self:flex-start; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; padding:4px 10px; border-radius:100px; font-weight:600; }
.tagchip.digital{ background:var(--blue-soft); color:var(--blue); }
.tagchip.fisico{ background:var(--green-soft); color:var(--green); }
.tagchip.mixto{ background:var(--orange-soft); color:var(--orange-deep); }
.svc-card h3{ font-size:1.1rem; }
.svc-card p{ color:var(--ink-soft); font-size:0.93rem; }
.svc-card .go{ margin-top:auto; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--orange-deep); font-weight:600; }

/* ---- case studies ---- */
.case-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px; }
.case-card{
  background:var(--surface-2); border-radius:var(--radius); padding:28px; border:1px solid var(--line);
  display:block; text-decoration:none; color:inherit;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.case-card:hover{ border-color:var(--orange); transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.case-card .kicker{ font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); margin-bottom:10px; }
.case-card h3{ font-size:1.2rem; margin-bottom:10px; }
.case-card p{ color:var(--ink-soft); font-size:0.95rem; }
.case-card .metric{ margin-top:16px; padding-top:16px; border-top:1px dashed var(--line); font-family:'Archivo',sans-serif; font-weight:700; color:var(--orange-deep); font-size:0.95rem; }
.case-card .go{ margin-top:14px; display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--orange-deep); font-weight:600; }
.case-card:hover .go{ text-decoration:underline; }

/* ---- portfolio (proyectos reales) ---- */
.portfolio-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px; }
.portfolio-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  text-decoration:none; color:var(--ink); display:flex; flex-direction:column;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.portfolio-card:hover{ border-color:var(--orange); transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.portfolio-thumb{ aspect-ratio:16/9; background:var(--surface-2); overflow:hidden; display:block; }
.portfolio-thumb img{ width:100%; height:100%; object-fit:cover; }
.portfolio-thumb.fallback{ display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--orange-soft), var(--blue-soft)); padding:0 18px; }
.portfolio-thumb.fallback span{ font-family:'Archivo',sans-serif; font-weight:800; font-size:1.25rem; color:var(--ink); text-align:center; }
.portfolio-body{ padding:20px 22px; display:flex; flex-direction:column; gap:8px; flex:1; }
.portfolio-body .kicker{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); }
.portfolio-body h3{ font-size:1.05rem; }
.portfolio-body h3 a{ text-decoration:none; color:inherit; }
.portfolio-body h3 a:hover{ color:var(--orange-deep); }
.portfolio-body p{ color:var(--ink-soft); font-size:0.9rem; }
.portfolio-body .go{ margin-top:auto; padding-top:8px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--orange-deep); font-weight:600; text-decoration:none; display:inline-block; }
.portfolio-body .go:hover{ text-decoration:underline; }
.social-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:2px; }
.social-row a{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-decoration:none; color:var(--ink); border:1.5px solid var(--ink-faint); padding:4px 9px; border-radius:100px; }
.social-row a:hover{ color:var(--orange-deep); border-color:var(--orange); }

/* ---- promo: Departamento de Evangelización Digital ---- */
.promo-strip{
  background:linear-gradient(120deg, var(--orange-soft), var(--blue-soft));
  border-radius:24px; padding:40px 44px; display:flex; justify-content:space-between;
  align-items:center; gap:28px; flex-wrap:wrap;
}
.promo-strip h2{ font-size:1.5rem; max-width:32ch; }
.promo-strip p{ color:var(--ink-soft); margin-top:8px; max-width:48ch; }
@media (max-width:640px){ .promo-strip{ padding:28px 24px; } }

/* ---- paquete del Departamento (pricing box) ---- */
.pkg-box{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:36px 40px; }
@media (max-width:560px){ .pkg-box{ padding:26px 22px; } }
.pkg-phase{ display:flex; gap:18px; padding:18px 0; border-bottom:1px dashed var(--line); }
.pkg-phase:first-child{ padding-top:0; }
.pkg-phase-tag{
  flex:0 0 auto; font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--orange-deep); background:var(--orange-soft); border-radius:100px;
  padding:6px 13px; height:fit-content; white-space:nowrap;
}
.pkg-phase h3{ font-size:1.05rem; margin-bottom:6px; }
.pkg-phase p{ color:var(--ink-soft); font-size:0.93rem; }
@media (max-width:480px){ .pkg-phase{ flex-direction:column; gap:8px; } }
.pkg-row{ display:flex; justify-content:space-between; align-items:baseline; padding:14px 0; border-bottom:1px dashed var(--line); gap:20px; }
.pkg-row:last-child{ border-bottom:none; }
.pkg-row span:first-child{ font-family:'Archivo',sans-serif; font-weight:700; }
.pkg-row span:last-child{ font-family:'IBM Plex Mono',monospace; color:var(--orange-deep); font-weight:600; white-space:nowrap; text-align:right; }
.pkg-row.pkg-total{ padding-top:18px; }
.pkg-row.pkg-total span:last-child{ font-size:1.15rem; }
.pkg-includes{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.pkg-includes li{ display:flex; gap:10px; font-size:0.93rem; color:var(--ink-soft); }
.pkg-includes li::before{ content:"✓"; color:var(--green); font-weight:700; }
.pkg-note{ margin-top:24px; padding-top:20px; border-top:1px solid var(--line); font-size:0.88rem; color:var(--ink-faint); }

/* ---- CTA band ---- */
.cta-band{
  background:var(--ink); color:var(--bg); border-radius:24px; padding:56px 48px;
  display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap;
}
:root[data-theme="dark"] .cta-band{ background:var(--surface-2); }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .cta-band{ background:var(--surface-2); }
}
.cta-band h2{ color:#FBF6EF; font-size:1.9rem; max-width:20ch; }
.cta-band p{ color:rgba(251,246,239,0.72); margin-top:10px; }
:root[data-theme="dark"] .cta-band p{ color:var(--ink-soft); }

/* ---- formulario de contacto (cta-band) ---- */
.lead-form{ display:flex; flex-direction:column; gap:14px; width:100%; max-width:380px; }
.lead-form .field{ display:flex; flex-direction:column; gap:6px; }
.lead-form label{ font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:rgba(251,246,239,0.65); }
.lead-form input, .lead-form select, .lead-form textarea{
  background:rgba(251,246,239,0.08); border:1px solid rgba(251,246,239,0.28); border-radius:10px;
  padding:11px 13px; color:#FBF6EF; font-family:'Public Sans',ui-sans-serif,system-ui,sans-serif; font-size:0.92rem;
}
.lead-form input::placeholder, .lead-form textarea::placeholder{ color:rgba(251,246,239,0.4); }
/* La lista desplegable del <select> la pinta el navegador con fondo claro
   propio, así que sus opciones necesitan texto oscuro — el color claro de
   arriba es solo para cuando el combo está cerrado, sobre la banda oscura. */
.lead-form select option{ color:#262220; background:#FBF6EF; }
.lead-form textarea{ resize:vertical; min-height:64px; font-family:inherit; }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus{ outline:2px solid var(--orange); outline-offset:1px; }
.lead-form-honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.lead-form-msg{ font-size:0.85rem; min-height:1.2em; }
.lead-form-msg.ok{ color:#B7D869; }
.lead-form-msg.err{ color:#FFB3A7; }
.lead-form button[disabled]{ opacity:.6; cursor:not-allowed; }

/* ---- footer ---- */
footer{ padding:52px 0 60px; }
.footer-inner{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; }
.footer-brand{ display:flex; align-items:center; gap:10px; font-family:'Archivo',sans-serif; font-weight:800; }
.footer-brand img{ width:26px; height:26px; }
.footer-links{ display:flex; gap:28px; flex-wrap:wrap; font-size:13.5px; }
.footer-links a{ text-decoration:none; color:var(--ink-soft); }
.footer-links a:hover{ color:var(--ink); }
.footer-meta{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-faint); margin-top:18px; }

/* ---- catalog page specific ---- */
.cat-hero{ padding:64px 0 44px; }
.cat-toc{ display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.cat-toc a{
  font-family:'IBM Plex Mono',monospace; font-size:12px; text-decoration:none; color:var(--ink);
  padding:7px 13px; border:1.5px solid var(--ink-faint); border-radius:100px;
}
.cat-toc a:hover{ border-color:var(--orange); color:var(--orange-deep); }

.service-block{ padding:56px 0; border-top:1px solid var(--line); scroll-margin-top:80px; }
.service-block-inner{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:44px; }
@media (max-width:820px){ .service-block-inner{ grid-template-columns:1fr; } }
.service-num{ font-family:'Archivo',sans-serif; font-weight:900; font-size:3rem; color:var(--ink-faint); line-height:1; }
.service-head h2{ font-size:1.7rem; margin-top:10px; }
.service-includes{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.service-includes li{ display:flex; gap:12px; align-items:flex-start; font-size:0.95rem; color:var(--ink-soft); }
.service-includes li::before{ content:"→"; color:var(--orange-deep); font-weight:700; flex:0 0 auto; }
.service-cta{ margin-top:24px; }

@media (max-width:640px){
  .nav-toggle{ display:inline-flex; }
  /* El botón del encabezado cambia de texto según la página ("Ver catálogo",
     "Solicitar diagnóstico"...) y algunos de esos textos se envuelven a 2
     líneas en pantallas angostas, encimándose sobre el logo. Cualquier CTA
     del encabezado que necesite una versión corta en móvil declara
     data-mobile-label="..." en el HTML — sin eso, se muestra tal cual
     (para textos ya cortos como "Cotizar" no hace falta). */
  .topnav-inner{ gap:8px; padding-left:16px; padding-right:16px; }
  .topnav-inner .brandmark{ font-size:14px; gap:6px; }
  .topnav-inner .brandmark img{ width:26px; height:26px; }
  .topnav-inner a.btn-sm[data-mobile-label]{
    font-size:0; white-space:nowrap; padding:9px 14px;
  }
  .topnav-inner a.btn-sm[data-mobile-label]::before{
    content:attr(data-mobile-label); font-size:0.8rem;
  }
  .navlinks{
    display:none;
    position:absolute;
    top:100%;
    left:16px;
    right:16px;
    margin-top:8px;
    background:var(--surface,#fff);
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:0 12px 32px rgba(0,0,0,.12);
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    padding:10px;
    z-index:40;
  }
  .navlinks.open{ display:flex; }
  .navlinks a{ padding:12px 14px; border-radius:10px; }
  .navlinks a:hover{ background:var(--surface-2); }
  .navlinks .lang-switch{ margin:6px 0 2px; }
  .cta-band{ padding:40px 28px; }
}

/* ---- catálogo público: tarjetas por área (levantamiento ago. 2026) ---- */
.area-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(420px,1fr)); gap:24px; }
.area-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:30px 32px;
  scroll-margin-top:90px; transition:border-color .15s ease;
}
.area-card:hover{ border-color:var(--orange); }
.area-card-head{ display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:start; }
.area-num{ font-family:'Archivo',sans-serif; font-weight:900; font-size:2rem; color:var(--ink-faint); line-height:1; }
.area-card-head h2{ font-size:1.32rem; }
.area-count{
  font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--orange-deep); background:var(--orange-soft); padding:5px 11px; border-radius:100px; white-space:nowrap;
  height:fit-content;
}
.area-tasks{ margin-top:20px; }
@media (max-width:560px){
  .area-card{ padding:24px 22px; }
  .area-card-head{ grid-template-columns:auto 1fr; }
  .area-count{ grid-column:1 / -1; justify-self:start; margin-top:8px; }
}