/* Nexium Digital · estilos específicos de la home (ES y EN comparten este fichero).
   Tokens, reset, header, botones, footer y reveal viven en blog.css (hoja global).
   Reglas de diseño («menos IA»): DESIGN.md. Fondos planos, un acento, sin degradados. */

/* ── Base de la home ─────────────────────────────────────────── */
section{padding:96px 0;}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em;margin:0;text-wrap:balance;}
h2{font-size:clamp(2rem,3.2vw,2.5rem);font-weight:700;letter-spacing:-.025em;}
h3{font-size:1.25rem;font-weight:600;}
.lead{font-size:1.08rem;color:var(--muted);max-width:620px;margin:16px 0 0;}
.section-head{max-width:720px;margin-bottom:56px;}

/* Botones propios de la home (.btn/.btn-primary vienen de blog.css) */
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28);}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.45);}
.btn-sm{padding:11px 22px;font-size:.92rem;}

/* ── Hero · navy plano, texto a la izquierda y captura real a la derecha ── */
.hero{background:var(--ink);color:#fff;padding:96px 0 104px;}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.hero-inner{max-width:600px;}
.hero-kicker{font-size:.95rem;font-weight:500;color:#b6c0d6;margin:0 0 18px;}
.hero h1{font-size:clamp(2.3rem,5vw,3.9rem);font-weight:800;letter-spacing:-.03em;line-height:1.06;max-width:15ch;}
.hero h1 em{font-style:normal;}
.hero-lead{font-size:1.15rem;color:#cbd5e1;max-width:56ch;margin:24px 0 36px;}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;}
.hero-channels{margin-top:44px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.hero-channels span{width:100%;font-size:.85rem;font-weight:500;color:#8b97b8;margin-bottom:2px;}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;color:var(--ink);background:#fff;border:0;padding:7px 13px 7px 10px;border-radius:var(--radius-xs);}
.chip img{height:18px;width:auto;display:block;}
a.chip{transition:background .15s var(--ease),transform .15s var(--ease);}
a.chip:hover,a.chip:focus-visible{background:#eef1f7;transform:translateY(-1px);}
.hero-trust{display:flex;gap:24px 48px;flex-wrap:wrap;margin-top:52px;padding-top:26px;border-top:1px solid rgba(255,255,255,.12);}
.hero-trust .num{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;line-height:1.1;}
.hero-trust .lbl{font-size:.88rem;color:var(--muted-2);max-width:22ch;margin-top:4px;}
.hero-visual{min-width:0;}
/* Captura del Hub a sangre: borde fino y sombra neutra; sin marco de navegador */
.hub-shot{border-radius:12px;border:1px solid rgba(255,255,255,.14);box-shadow:0 1px 2px rgba(0,0,0,.25),0 28px 64px rgba(0,0,0,.35);overflow:hidden;background:#fff;}
/* Panel del hero (27-sep-2026): P&L de EJEMPLO interactivo (assets/hub-panel.js) en lugar de la
   captura, que salía de datos de un cliente. Mismo panel y mismas cifras que el hero de nexiumhub.com.
   Barras en transform (translateX al punto de partida + scaleX al peso); alturas reservadas para que
   cambiar de pestaña no mueva nada. */
.hub-panel{color:var(--ink);padding:22px 24px 20px;font-variant-numeric:tabular-nums;}
.hp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.hp-title{margin:0;font-size:.95rem;font-weight:700;color:var(--navy);}
.hp-badge{font-size:.7rem;font-weight:600;color:#92400e;background:#fef3c7;border-radius:999px;padding:3px 9px;white-space:nowrap;}
.hp-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-top:14px;}
.hp-tab{font:inherit;font-size:.78rem;font-weight:600;color:var(--muted);background:var(--bg-soft);border:1px solid var(--line);
  border-radius:999px;padding:5px 10px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  transition:background-color var(--dur-hover) var(--ease-out),color var(--dur-hover) var(--ease-out),border-color var(--dur-hover) var(--ease-out),transform 160ms var(--ease-out);}
.hp-tab:hover{border-color:var(--blue);color:var(--navy);}
.hp-tab:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.hp-tab.is-active{background:var(--navy);border-color:var(--navy);color:#fff;}
.hp-tab:active{transform:scale(.97);}
.hp-est{font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#92400e;background:#fef3c7;border-radius:4px;padding:1px 5px;}
.hp-tab.is-active .hp-est{background:rgba(255,255,255,.18);color:#fff;}
.hp-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0 0;}
.hp-kpi{background:var(--bg-soft);border-radius:10px;padding:11px 12px;min-width:0;}
.hp-kpi dt{font-size:.72rem;color:var(--muted);font-weight:600;}
.hp-kpi dd{margin:4px 0 0;font-size:1.3rem;font-weight:700;color:var(--navy);letter-spacing:-.01em;white-space:nowrap;}
.hp-kpi dd small{display:block;font-size:.66rem;font-weight:500;color:var(--muted);letter-spacing:0;margin-top:2px;white-space:normal;}
.hp-kpi dd.hp-good{color:#14532d;}
.hp-kpi dd small.hp-oculta{visibility:hidden;}
.hp-aprox{font-size:.82em;font-weight:600;margin-right:.15em;}
.hp-aprox[hidden]{display:none;}
.hp-cascada{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:7px;}
.hp-row{display:grid;grid-template-columns:168px minmax(0,1fr) 84px;align-items:center;gap:12px;min-height:26px;font-size:.78rem;}
.hp-label{color:var(--muted);min-width:0;}
.hp-row--total .hp-label,.hp-row--resultado .hp-label{font-weight:700;color:var(--navy);}
.hp-track{position:relative;height:14px;background:var(--bg-soft);border-radius:3px;overflow:hidden;}
.hp-bar{position:absolute;inset:0;transform-origin:left center;border-radius:3px;
  transform:translateX(calc(var(--desde) * 100%)) scaleX(var(--ancho));
  transition:transform .42s var(--ease-out);background:#e11d48;opacity:.72;}
.hp-row--ventas .hp-bar{background:var(--blue);opacity:1;}
.hp-row--iva .hp-bar{background:var(--muted);opacity:.45;}
.hp-row--publicidad .hp-bar{background:#d97706;opacity:.8;}
.hp-row--producto .hp-bar{background:var(--navy);opacity:.5;}
.hp-row--beneficio .hp-bar{background:var(--green);opacity:1;}
.hp-valor{text-align:right;color:var(--muted);white-space:nowrap;}
.hp-row--total .hp-valor{font-weight:700;color:var(--navy);}
.hp-row--resultado .hp-valor{font-weight:700;color:#14532d;}
.hp-row--resultado{border-top:1px dashed var(--line);padding-top:8px;margin-top:2px;}
.hp-lectura{margin:16px 0 0;font-size:.8rem;line-height:1.5;color:var(--muted);min-height:4.5em;border-left:3px solid var(--blue);padding:2px 0 2px 12px;}
.hp-lectura strong{color:var(--navy);margin-right:6px;}

/* ── Franja de valor ─────────────────────────────────────────── */
.strip{background:var(--bg-soft);border-bottom:1px solid var(--line);padding:44px 0;}
.strip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.strip-grid p{margin:0;color:var(--muted);font-size:1rem;}
.strip-grid .strip-title{font-size:1.05rem;font-weight:600;color:var(--ink);margin:0 0 6px;}

/* ── Servicios · intro a la izquierda, lista enfatizada a la derecha ── */
.services-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start;}
.services-grid .section-head{margin-bottom:0;position:sticky;top:100px;}
.services-list{border-top:1px solid var(--line);}
.service{padding:28px 0;border-bottom:1px solid var(--line);}
.service h3{margin-bottom:8px;}
.service p{margin:0;color:var(--muted);font-size:1rem;max-width:56ch;}
.service--core{padding:32px 0 36px;}
.service--core h3{font-size:1.6rem;font-weight:700;letter-spacing:-.025em;max-width:22ch;}
.service--core p{font-size:1.08rem;color:var(--ink);}
/* Único acento magenta de la sección */
.service-label{display:inline-block;font-size:.85rem;font-weight:600;color:var(--magenta);margin-bottom:12px;}
.service-cta{display:inline-flex;align-items:center;gap:6px;margin-top:20px;font-weight:600;color:var(--blue-dk);border-bottom:1px solid rgba(44,70,184,.3);transition:border-color .15s var(--ease);}
.service-cta:hover{border-bottom-color:var(--blue-dk);}

/* ── Sectores · lista con énfasis: una fila por sector, título a la izquierda ──
   (Fase 3, ritmo editorial: sectores, método y resultados tenían la misma anatomía de columnas) */
.sectors{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.sector-grid{border-bottom:1px solid #d4ddf5;}
.sector{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:8px 64px;align-items:baseline;border-top:1px solid #d4ddf5;padding:28px 0;}
/* Reset del .tag de blog.css: aquí es una etiqueta de texto, sin píldora ni mayúsculas */
.sector .tag{display:block;font-size:.85rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted);background:none;padding:0;border-radius:0;margin-bottom:10px;}
.sector .tag{grid-column:1;}
.sector h3{grid-column:1;margin:0;font-size:1.35rem;letter-spacing:-.015em;}
.sector p{grid-column:2;grid-row:1 / span 2;align-self:center;max-width:60ch;}
.sector p{margin:0;color:var(--muted);font-size:1rem;}

/* ── Proceso · 4 pasos numerados, sin cajas ni línea conectora ── */
.process{background:var(--bg);}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;}
.step{border-top:1px solid var(--line);padding-top:20px;}
.step .n{font-size:.9rem;font-weight:600;color:var(--blue-dk);font-variant-numeric:tabular-nums;margin-bottom:14px;}
.step h3{margin-bottom:8px;}
.step p{margin:0;color:var(--muted);font-size:1rem;}

/* ── Por qué Nexium · lista con líneas + panel del director ──── */
.why{background:var(--bg-soft);}
.why-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center;}
.why h2{margin-bottom:28px;}
.why-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--line);}
.why-list li{padding:20px 0;border-bottom:1px solid var(--line);}
.why-list h3{margin-bottom:4px;}
.why-list p{margin:0;color:var(--muted);font-size:1rem;}
.why-panel{background:var(--ink);color:#fff;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:40px;box-shadow:var(--shadow-lg);}
.who-head{display:flex;align-items:center;gap:18px;margin:0 0 22px;}
.who-img{width:100px;height:100px;border-radius:50%;object-fit:cover;object-position:50% 16%;border:2px solid rgba(165,180,252,.35);background:#0a0f1d;flex:none;}
.who-name{font-size:1.35rem;font-weight:700;letter-spacing:-.02em;line-height:1.1;}
.who{color:#94a3b8;font-size:.9rem;margin-top:5px;}
.who-bio{color:#cbd5e1;font-size:1.02rem;margin:0 0 24px;line-height:1.6;}

/* ── Resultados · banda de cifras grandes, separadas por filetes verticales ── */
.proof{background:var(--bg);}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-bottom:28px;}
.stat{border-left:1px solid var(--line);padding:4px 0 4px 24px;}
.stat .big{font-size:clamp(2.2rem,3.6vw,3.2rem);font-weight:700;color:var(--ink);letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums;}
.stat .lbl{font-size:.95rem;color:var(--muted);margin-top:6px;}
.proof-disclaimer{font-size:.85rem;color:var(--muted);max-width:760px;margin:0;line-height:1.5;}

/* ── Hub · sección oscura plana ──────────────────────────────── */
.hub{background:var(--ink);color:#fff;}
.hub-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:72px;align-items:start;}
.hub-intro>h2,.hub-intro>p,.hub-intro>.btn{grid-column:1;}
.hub-intro>.btn{justify-self:start;margin-top:14px;}
.hub h2{margin-bottom:18px;}
.hub p{color:#cbd5e1;font-size:1.08rem;}
.hub-feats{list-style:none;padding:0;margin:0;grid-column:2;grid-row:1 / span 3;border-top:1px solid rgba(255,255,255,.12);}
.hub-feats li{display:flex;gap:12px;align-items:center;padding:16px 0;color:#e2e8f0;font-size:1.05rem;border-bottom:1px solid rgba(255,255,255,.12);}
.hub-feats .dot{width:6px;height:6px;border-radius:50%;background:#8b97b8;flex:none;}

/* ── FAQ · acordeón nativo, filas separadas por líneas ───────── */
.faq{background:var(--bg-soft);}
.faq .section-head{margin-bottom:28px;}
.faq details{border-top:1px solid var(--line);}
.faq details:last-of-type{border-bottom:1px solid var(--line);}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-weight:600;font-size:1.08rem;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-size:1.3rem;font-weight:500;color:var(--muted);flex:none;transition:transform var(--dur-ui) var(--ease-in-out);}
.faq summary:focus-visible{outline:2px solid var(--blue);outline-offset:4px;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details p{margin:0;padding:0 0 22px;color:var(--muted);line-height:1.6;max-width:62ch;}
/* La respuesta entra (fundido + 4px); el alto NO se anima */
@keyframes nd-faq-in{from{opacity:0;transform:translateY(-4px)}}
@keyframes nd-faq-fade{from{opacity:0}}
.faq details[open] p{animation:nd-faq-in var(--dur-ui) var(--ease-out);}
.faq details a{color:var(--blue-dk);font-weight:600;}

/* ── CTA / contacto · navy plano ─────────────────────────────── */
.cta{background:var(--ink);color:#fff;text-align:center;}
.cta .eyebrow{color:#8b97b8;}
.cta h2{font-size:clamp(2rem,3.6vw,2.8rem);max-width:760px;margin:0 auto 18px;}
.cta p{font-size:1.1rem;color:#cbd5e1;max-width:560px;margin:0 auto 36px;}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.cta .btn-ghost{border-color:rgba(255,255,255,.35);}
.cta-contacts{margin-top:34px;display:flex;gap:30px;justify-content:center;flex-wrap:wrap;font-size:.98rem;color:#cbd5e1;}
.cta-contacts a{font-weight:600;color:#fff;border-bottom:1px solid rgba(255,255,255,.4);}

/* Formulario de contacto (sección #contacto) */
.lead-form{max-width:640px;margin:34px auto 0;text-align:left;}
.lead-form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.lead-form label{display:block;font-size:.85rem;font-weight:600;color:#cbd5e1;margin:0 0 6px;}
.lead-form input,.lead-form textarea{width:100%;padding:13px 15px;border-radius:var(--radius-xs);font:inherit;font-size:1rem;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:#fff;transition:border-color .15s,background .15s,box-shadow .15s;}
.lead-form input::placeholder,.lead-form textarea::placeholder{color:#8fa0c4;}
/* Foco: anillo visible (sustituye al outline del navegador) */
.lead-form input:focus,.lead-form textarea:focus{outline:none;border-color:#a5b4fc;box-shadow:0 0 0 3px rgba(165,180,252,.25);background:rgba(255,255,255,.09);}
.lead-form [aria-invalid="true"]{border-color:#ffb4b4;}
.lead-form .field{margin-bottom:14px;}
.lead-form textarea{resize:vertical;min-height:92px;}
.lead-form .consent{display:flex;gap:10px;align-items:flex-start;margin:6px 0 18px;font-size:.85rem;color:#cbd5e1;line-height:1.5;}
.lead-form .consent input{width:18px;height:18px;margin:3px 0 0;flex:0 0 auto;accent-color:var(--blue);}
.lead-form .consent input:focus-visible{outline:2px solid #a5b4fc;outline-offset:2px;}
.lead-form .consent label{font-weight:500;margin:0;}
.lead-form .consent a{color:#c7d2fe;text-decoration:underline;}
.lead-form .actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
/* Mensaje del formulario: fuera del <form> (que se oculta al enviar), en la misma columna */
.lead-msg{max-width:640px;margin:14px auto 0;text-align:left;font-size:.92rem;font-weight:600;display:none;outline:none;}
.lead-msg.err{color:#ffb4b4;display:block;}
.lead-msg.ok{color:#9df5c0;display:block;text-align:center;font-size:1.05rem;}
.lead-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ── Responsive ──────────────────────────────────────────────── */
@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:40px;}
  .hero-inner{max-width:none;}
  .services-grid{grid-template-columns:1fr;gap:40px;}
  .services-grid .section-head{position:static;}
  .steps,.strip-grid,.proof-grid{grid-template-columns:1fr 1fr;}
  .sector{grid-template-columns:1fr;gap:6px;}
  .sector p{grid-column:1;grid-row:auto;}
  .hub-intro{grid-template-columns:1fr;}
  .hub-intro>*,.hub-feats{grid-column:1;grid-row:auto;}
  .hub-feats{margin:26px 0 12px;}
  .why-grid{grid-template-columns:1fr;}
  .why-panel{order:-1;}
}
@media(max-width:640px){
  section{padding:72px 0;}
  .hub-panel{padding:18px 16px 16px;}
  .hp-kpis{gap:6px;}
  .hp-kpi{padding:9px 8px;}
  .hp-kpi dd{font-size:.9rem;letter-spacing:-.02em;}
  .hp-lectura{min-height:6em;}
  .hp-row{grid-template-columns:104px minmax(0,1fr) 70px;gap:8px;font-size:.72rem;}
  .hp-tab{font-size:.74rem;}
  .hero{padding:64px 0 72px;}
  .steps,.strip-grid{grid-template-columns:1fr;}
  .proof-grid{grid-template-columns:1fr;gap:24px;}
  .stat{padding:0 0 0 16px;}
  .hero-trust{gap:20px 32px;}
  .why-panel{padding:28px;}
  .lead-form .row{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  .faq summary::after,a.chip,.service-cta{transition:none;}
  .faq details[open] p{animation:nd-faq-fade var(--dur-ui) ease;}
  a.chip:hover,a.chip:focus-visible{transform:none;}
  .hp-bar,.hp-tab{transition:none;}
  .hp-tab:active{transform:none;}
}