/* =============================================================================
   TMSERVICES — styles.css
   Archetype base: "Glassmorphism Modern" adaptado a identidad corporativa B2B
   (fondo claro, azul petróleo estructural, naranja del logo como acento).
   Secciones:
     1. Tokens      5. Componentes      9. Reduced-motion
     2. Reset/base  6. Secciones       10. Print
     3. Utilidades  7. Efectos
     4. Tipografía  8. Responsive
   ============================================================================= */

/* ============================ 1. TOKENS ============================ */
:root {
  /* Identidad (tomada del logotipo) */
  --navy:        #0e3a56;
  --navy-700:    #0b2f47;
  --navy-900:    #072031;
  /* Derivado más claro/vívido del navy, para acentos que necesitan destacar
     sobre fondo claro (brillo, borde animado) donde el navy oscuro no se
     luciría. Mismo tono, no un azul nuevo. */
  --navy-light:  #2f7fc0;
  --orange:      #ef5a2a;
  --orange-600:  #d9481c;
  /* Variante de texto: --orange-600 da 4.3:1 sobre fondo blanco (no llega al
     4.5:1 de WCAG AA para texto normal); esta es la misma familia de color,
     un poco más oscura, para usar como color de TEXTO (nunca como fondo de
     botón) donde sí hace falta ese contraste. */
  --orange-700:  #b43c17;
  /* Fondo de botón/plan con texto blanco encima: --orange (3.4:1) y
     --orange-600 (4.3:1) quedan cortos frente al 4.5:1 exigido; esta es la
     misma familia, ajustada a 4.9:1 en el estado normal. --orange-700 (arriba)
     sirve de estado hover más oscuro, con 5.8:1. */
  --orange-cta:  #c8421a;
  /* Verde de WhatsApp: el oficial (#25d366) da solo 2:1 con texto/ícono
     blanco encima (falla incluso el 3:1 de íconos). Este es un verde-azulado
     más oscuro, del mismo universo de marca de WhatsApp (parecido a su propio
     teal oscuro), que sí llega a 4.5–5:1+ con blanco. */
  --wa-green:     #0e7c67;
  --wa-green-600: #0c6958;
  --slate:       #3f4b57;

  /* Superficies y texto */
  --bg:          #ffffff;
  --bg-soft:     #f4f7fa;
  --bg-2:        #eaf0f5;
  --ink:         #16222e;
  --ink-soft:    #33424f;
  --muted:       #5d6b78;
  --line:        rgba(14, 58, 86, 0.12);
  --line-strong: rgba(14, 58, 86, 0.22);
  --card:        #ffffff;
  --glass:       rgba(255, 255, 255, 0.72);

  /* Sombras (muy sutiles) */
  --shadow-sm: 0 1px 2px rgba(14, 34, 46, 0.05), 0 2px 8px rgba(14, 34, 46, 0.04);
  --shadow-md: 0 6px 18px rgba(14, 34, 46, 0.08), 0 2px 6px rgba(14, 34, 46, 0.05);
  --shadow-lg: 0 20px 45px -18px rgba(14, 34, 46, 0.28);

  /* Tipografía */
  --display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Ritmo */
  --gutter:  clamp(1.15rem, 5vw, 4rem);
  --section: clamp(3.75rem, 9vw, 7rem);
  --radius:  14px;
  --radius-lg: 22px;
  --ease:    cubic-bezier(0.16, 1, 0.3, 1);

  --nav-h: 72px;
}

/* ============================ 2. RESET / BASE ============================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}
body {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
ul, ol { list-style: none; padding: 0; }
p { text-wrap: pretty; text-align: left; hyphens: none; }
::selection { background: var(--orange); color: #fff; }

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 800;
  text-wrap: balance;
}

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
  border-radius: 6px;
}

.skip-link {
  position: fixed; top: -120px; left: 1rem; z-index: 200;
  background: var(--navy); color: #fff;
  padding: .7rem 1.1rem; border-radius: 8px; font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* ============================ 3. UTILIDADES ============================ */
.wrap { width: min(1160px, 100% - var(--gutter) * 2); margin-inline: auto; }

.eyebrow {
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange-700);
  margin-bottom: .9rem;
}

.section { padding-block: var(--section); position: relative; }
.section--soft {
  background:
    radial-gradient(circle at 1.5px 1.5px, var(--line) 1.4px, transparent 0) 0 0/24px 24px,
    var(--bg-soft);
  position: relative;
}
.section--soft::before,
.section--soft::after {
  content: ""; position: absolute; left: 0; right: 0; height: 42px;
  background: var(--bg);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.section--soft::before { top: -1px; }
.section--soft::after { bottom: -1px; transform: rotate(180deg); }

/* Sección oscura: intercala el navy sólido del hero/footer en medio del
   contenido (como el fondo oscuro de "Cómo se hace" en la referencia),
   en vez de que todas las secciones internas sean claras. */
.section--dark {
  background: var(--navy-900);
  position: relative;
  overflow: hidden;
}
.section--dark::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(900px 500px at 12% 0%, rgba(239, 90, 42, 0.12), transparent 60%);
}
.section--dark > .wrap { position: relative; z-index: 1; }
.section--dark .section-head h2,
.section--dark h2 { color: #fff; }
.section--dark .section-lead { color: rgba(255, 255, 255, 0.68); }

.section-head {
  max-width: 46ch;
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
  text-align: left;
}
.section-head h2 { font-size: clamp(1.75rem, 4.2vw, 2.6rem); }
.section-lead { margin-top: .9rem; color: var(--muted); font-size: 1.02rem; }

.fineprint { margin-top: 1.5rem; font-size: .9rem; color: var(--muted); max-width: 60ch; text-align: left; }

.section-cta { margin-top: 2.5rem; text-align: center; }

.placeholder-flag {
  display: inline-block;
  margin-bottom: 1.5rem;
  padding: .5rem .85rem;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  font-size: .82rem;
  color: var(--muted);
  background: rgba(239, 90, 42, 0.05);
}

/* ============================ 4. TIPOGRAFÍA ============================ */
.prose { max-width: 66ch; }
.prose p { color: var(--ink-soft); text-align: left; hyphens: none; }
.prose p + p { margin-top: 1.1rem; }

.pull-quote {
  margin-block: clamp(2rem, 5vw, 3rem);
  padding-left: clamp(1rem, 3vw, 1.75rem);
  border-left: 4px solid var(--orange);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.3rem, 3.4vw, 2rem);
  line-height: 1.25;
  color: var(--navy);
  letter-spacing: -0.02em;
  max-width: 30ch;
}

/* ============================ 5. COMPONENTES ============================ */

/* --- Botones --- */
.btn {
  --btn-bg: var(--navy);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .8rem 1.45rem;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--display); font-weight: 700; font-size: .95rem;
  border-radius: 999px;
  border: 1px solid transparent;
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background-color .25s var(--ease), border-color .25s var(--ease);
  will-change: transform;
}
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.35) 48%, transparent 66%);
  transform: translateX(-120%);
  transition: transform .55s var(--ease);
}
.btn:hover::after { transform: translateX(120%); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-primary { --btn-bg: var(--orange-cta); --btn-fg: #fff; }
.btn-primary:hover { --btn-bg: var(--orange-700); }
.btn-ghost {
  --btn-bg: transparent; --btn-fg: var(--navy);
  border-color: var(--line-strong);
}
.btn-ghost:hover { --btn-bg: var(--bg-2); }
.btn-whatsapp { --btn-bg: var(--wa-green); --btn-fg: #fff; }
.btn-whatsapp:hover { --btn-bg: var(--wa-green-600); }
.btn-lg { padding: 1rem 2rem; font-size: 1.05rem; }
.btn-block { width: 100%; }
.ic-wa { width: 20px; height: 20px; fill: currentColor; }

/* --- Nav --- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--glass);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
}
@supports not (backdrop-filter: blur(4px)) {
  .nav { background: #fff; }
}
.nav.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
  background: rgba(255, 255, 255, 0.92);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h);
}
.nav-brand { display: flex; align-items: center; }
.nav-logo { height: 44px; width: auto; }
.nav-brand-fallback, .footer-brand-fallback { display: none; }

.nav-links { display: flex; align-items: center; gap: 1.6rem; }
.nav-links a {
  font-family: var(--display); font-weight: 600; font-size: .92rem;
  color: var(--ink-soft);
  position: relative; padding-block: .35rem;
}
.nav-links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: var(--orange);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav-links a:not(.btn):hover::after,
.nav-links a:not(.btn).is-active::after { transform: scaleX(1); }
.nav-links a:not(.btn):hover { color: var(--ink); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: 10px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--navy);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Cards --- */
.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }

.card {
  position: relative;
  background: linear-gradient(175deg, #fff, var(--bg-soft) 220%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--orange), var(--navy));
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(239, 90, 42, 0.2), var(--shadow-md);
  border-color: var(--orange);
}
.card:hover::before { transform: scaleX(1); }
.card h3 { font-size: 1.14rem; margin-bottom: .45rem; }
.card p { font-size: .95rem; color: var(--muted); }

/* "Nuestro diferencial", prueba de un efecto distinto al resto del sitio.
   Nada de esto depende del mouse: la tarjeta más cercana al centro de la
   pantalla se "enfoca" sola a medida que se scrollea (misma lógica con
   mouse o con el dedo en el celular), con un leve tilt 3D atado al scroll.
   Al enfocar/hover, toda la tarjeta se tiñe con el color propio de su
   ícono (--tech-tint, definido más abajo junto a los colores por tarjeta).
   Si convence, se lleva a Servicios; por ahora vive aparte en ".card--tech"
   para no tocar las tarjetas que ya usan mountServicios(). */
.grid-3 { perspective: 1200px; }
.card--tech {
  --tilt: 0deg;
  border-color: transparent;
  background-image:
    linear-gradient(175deg, #fff, var(--bg-soft) 220%),
    linear-gradient(120deg, var(--line-strong), var(--navy-light) 25%, var(--navy) 60%, var(--line-strong) 90%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: 100% 100%, 250% 250%;
  background-position: 0 0, 0% 0%;
  transform: perspective(1200px) rotateX(var(--tilt));
  transition: background-position 1s var(--ease), transform .2s linear, box-shadow .35s var(--ease);
}
.card--tech:hover,
.card--tech.is-focused {
  border-color: transparent;
  background-position: 0 0, 100% 100%;
  transform: perspective(1200px) rotateX(var(--tilt)) translateY(-6px);
  box-shadow: 0 24px 48px rgba(14, 58, 86, 0.18), var(--shadow-md);
}
.card--tech::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(75deg, transparent 42%, rgba(255, 255, 255, 0.65) 50%, transparent 58%);
  transform: translateX(-160%);
  opacity: 0;
}
.card--tech.is-in::before { animation: cardSweep 1.3s ease-out forwards; animation-delay: .35s; }
@keyframes cardSweep {
  0% { transform: translateX(-160%); opacity: 1; }
  100% { transform: translateX(160%); opacity: 0; }
}
.card--tech .card-ic, .card--tech h3, .card--tech p { position: relative; z-index: 1; }
.card--tech::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  background: var(--tech-tint, rgba(14, 58, 86, 0.1));
  opacity: 0; transition: opacity .35s var(--ease);
}
.card--tech:hover::after,
.card--tech.is-focused::after { opacity: 1; }

/* El ícono se "dibuja" (trazo que se completa) al entrar en pantalla, en vez
   de solo aparecer con el fade genérico del resto de las secciones. */
.card--tech .card-ic svg path,
.card--tech .card-ic svg circle:not([fill]),
.card--tech .card-ic svg rect {
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
}
.card--tech.is-in .card-ic svg path,
.card--tech.is-in .card-ic svg circle:not([fill]),
.card--tech.is-in .card-ic svg rect {
  animation: iconDraw 1s var(--ease) forwards;
  animation-delay: .2s;
}
@keyframes iconDraw { to { stroke-dashoffset: 0; } }

/* Insignia cuadrada redondeada con degradado tenue (en vez del anillo
   circular anterior): mismo lenguaje visual que las tarjetas de la
   referencia, adaptado a navy/naranja. */
.card-ic {
  width: 52px; height: 52px; border-radius: 15px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, rgba(14, 58, 86, 0.15), rgba(14, 58, 86, 0.04));
  border: 1px solid rgba(14, 58, 86, 0.24);
  box-shadow: 0 6px 16px rgba(14, 58, 86, 0.08);
  margin-bottom: 1.25rem;
  transition: transform .4s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease);
}
/* El ícono "salta": escala + rota levemente y se invierte a color sólido
   con el símbolo en blanco (mismo gesto que la referencia), en vez de solo
   cambiar de color. */
.card:hover .card-ic,
.mv-card:hover .card-ic {
  transform: scale(1.08) rotate(-5deg);
  background: linear-gradient(145deg, var(--orange), var(--orange-600));
  border-color: var(--orange);
  box-shadow: 0 16px 32px rgba(239, 90, 42, 0.4);
}
.card-ic svg {
  width: 25px; height: 25px;
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .35s var(--ease), transform .35s var(--ease);
}
.card:hover .card-ic svg,
.mv-card:hover .card-ic svg { stroke: #fff; }
/* La insignia del ícono en "Nuestro diferencial" ya no cambia de color al
   pasar el mouse (ese gesto lo hacen ahora el brillo y el borde animados) —
   se queda quieta para no competir. Va después de la regla de arriba: misma
   especificidad, y así gana por orden en vez de quedar pisada por ella. */
.card--tech:hover .card-ic {
  transform: none;
  background: linear-gradient(145deg, rgba(14, 58, 86, 0.15), rgba(14, 58, 86, 0.04));
  border-color: rgba(14, 58, 86, 0.24);
  box-shadow: 0 6px 16px rgba(14, 58, 86, 0.08);
}
/* Cada tarjeta de "Nuestro diferencial" con un color de ícono distinto,
   elegido a mano de la propia paleta de la marca (navy/naranja y sus
   derivados) para que varíen sin desentonar con el resto del sitio. El
   ícono (no la insignia) crece un poco al enfocar la tarjeta, con mouse o
   por scroll — mismo gesto que ya usan el brillo y el borde. */
.grid-3 .card--tech:nth-child(1) .card-ic svg { stroke: var(--navy); }
.grid-3 .card--tech:nth-child(2) .card-ic svg { stroke: var(--orange); }
.grid-3 .card--tech:nth-child(3) .card-ic svg { stroke: var(--navy-light); }
.grid-3 .card--tech:nth-child(4) .card-ic svg { stroke: var(--navy-900); }
.grid-3 .card--tech:nth-child(5) .card-ic svg { stroke: var(--orange-700); }
.grid-3 .card--tech:nth-child(6) .card-ic svg { stroke: var(--slate); }
.grid-3 .card--tech:nth-child(1) { --tech-tint: color-mix(in srgb, var(--navy) 12%, transparent); }
.grid-3 .card--tech:nth-child(2) { --tech-tint: color-mix(in srgb, var(--orange) 14%, transparent); }
.grid-3 .card--tech:nth-child(3) { --tech-tint: color-mix(in srgb, var(--navy-light) 16%, transparent); }
.grid-3 .card--tech:nth-child(4) { --tech-tint: color-mix(in srgb, var(--navy-900) 14%, transparent); }
.grid-3 .card--tech:nth-child(5) { --tech-tint: color-mix(in srgb, var(--orange-700) 14%, transparent); }
.grid-3 .card--tech:nth-child(6) { --tech-tint: color-mix(in srgb, var(--slate) 14%, transparent); }
.card--tech:hover .card-ic svg,
.card--tech.is-focused .card-ic svg { transform: scale(1.15); }

/* Misión / Visión: mismo borde animado que "Nuestro diferencial"/Servicios
   (.card--tech), pero acá el color al pasar el mouse es siempre azulado
   (no hay un color distinto por tarjeta como en esas grillas de 6 — acá
   son solo 2). Los íconos siguen invirtiendo a naranja igual que siempre
   (.card:hover .card-ic más arriba), eso no se toca. */
.mv-card {
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.4rem);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  background-image:
    linear-gradient(175deg, var(--card), var(--bg-soft) 240%),
    linear-gradient(120deg, var(--line-strong), var(--navy-light) 25%, var(--navy) 60%, var(--line-strong) 90%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: 100% 100%, 250% 250%;
  background-position: 0 0, 0% 0%;
  transition: background-position 1s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.mv-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 1;
  background: linear-gradient(90deg, var(--orange), var(--navy));
}
.mv-card::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  background: color-mix(in srgb, var(--navy-light) 14%, transparent);
  opacity: 0; transition: opacity .35s var(--ease);
}
.mv-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(47, 127, 192, 0.22), var(--shadow-md);
  background-position: 0 0, 100% 100%;
}
.mv-card:hover::after { opacity: 1; }
.mv-card .card-ic, .mv-card h3, .mv-card p { position: relative; z-index: 1; }
.mv-card .card-ic { margin-bottom: 1.2rem; }
.mv-card h3 { font-size: 1.4rem; margin-bottom: .6rem; color: var(--navy); }
.mv-card p { color: var(--ink-soft); }

/* Servicios (render dinámico) */
.svc { }
.svc h3 { font-size: 1.08rem; }

/* Productos (render dinámico): mismo borde animado que "Nuestro
   diferencial"/Servicios (.card--tech), en naranja (el acento que ya usan
   estas tarjetas en logo, t-num y t-ir). El logo/insignia, el número
   fantasma y la flecha siguen moviéndose exactamente igual que antes —
   ninguna de esas reglas se toca, solo el borde. */
.product {
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3.5vw, 2.1rem);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex; flex-direction: column;
  background-image:
    linear-gradient(175deg, #fff, var(--bg-soft) 240%),
    linear-gradient(120deg, var(--line-strong), var(--orange) 25%, var(--orange-700) 60%, var(--line-strong) 90%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: 100% 100%, 250% 250%;
  background-position: 0 0, 0% 0%;
  transition: background-position 1s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.product::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 1;
  background: linear-gradient(90deg, var(--navy), var(--orange));
}
.product:hover { transform: translateY(-6px); box-shadow: 0 26px 52px rgba(239, 90, 42, 0.2), var(--shadow-md); background-position: 0 0, 100% 100%; }
.product-top { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.2rem; }
/* Logo real o iniciales: mismo tamaño, mismo "salto" al pasar el mouse
   (antes solo lo hacían las iniciales, no los logos ya cargados). */
.product-logo,
.product-badge {
  width: 72px; height: 72px; flex: none;
  border-radius: 17px;
  box-shadow: 0 8px 20px rgba(14, 58, 86, 0.12);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.product-logo {
  object-fit: contain; padding: 9px;
  background: linear-gradient(150deg, #fff, var(--bg-soft));
  border: 1px solid var(--line);
}
.product-badge {
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 1.02rem;
  color: #fff; background: linear-gradient(135deg, var(--navy), var(--orange-cta));
  letter-spacing: -0.01em;
}
.product:hover .product-logo,
.product:hover .product-badge {
  transform: rotate(-5deg) scale(1.06);
  box-shadow: 0 18px 34px rgba(239, 90, 42, 0.35);
}
.product h3 { font-size: 1.3rem; }
.product-desc { color: var(--muted); font-size: .96rem; margin-bottom: 1rem; }
.product-fns { display: grid; gap: .5rem; margin-bottom: 1.4rem; }
.product-fns li {
  position: relative; padding-left: 1.5rem; font-size: .92rem; color: var(--ink-soft);
}
.product-fns li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 8px; height: 8px; border-radius: 3px; background: var(--orange);
}
.product .btn { margin-top: auto; align-self: flex-start; }

/* Número fantasma de fondo + enlace con flecha (en vez de botón): mismo
   patrón que la referencia para la grilla de "todos los productos". */
.t-num {
  position: absolute; top: .5rem; right: 1.1rem; z-index: -1;
  font-family: var(--display); font-weight: 800; font-size: 3.8rem;
  letter-spacing: -0.05em;
  color: rgba(14, 58, 86, 0.08);
  transition: color .35s var(--ease), transform .35s var(--ease);
  user-select: none;
}
.product:hover .t-num { color: rgba(239, 90, 42, 0.16); transform: scale(1.06); }
.t-ir {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: auto; align-self: flex-start;
  font-family: var(--display); font-weight: 700; font-size: .9rem;
  color: var(--navy);
  padding: .5rem .35rem;
  margin-left: -.35rem;
  border-radius: 999px;
  transition: color .3s var(--ease), gap .3s var(--ease), background-color .3s var(--ease), padding-right .3s var(--ease);
}
.t-ir svg {
  width: 17px; height: 17px;
  fill: none; stroke: var(--orange); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s var(--ease);
}
.product:hover .t-ir { color: var(--orange-700); gap: .7rem; background: rgba(239, 90, 42, 0.09); padding-right: .9rem; }

/* Planes de facturación electrónica */
/* Sub-bloques dentro de "Productos & Servicios" (Servicios / Productos /
   Facturación electrónica), separados por una línea sutil en vez de ser
   secciones completas independientes. */
.ps-block + .ps-block {
  margin-top: clamp(3rem, 7vw, 4.5rem);
  padding-top: clamp(3rem, 7vw, 4.5rem);
  border-top: 1px dashed var(--line);
}
.ps-subhead {
  text-align: left;
  margin-bottom: 1.75rem;
}
.ps-block--highlight {
  position: relative;
  overflow: hidden;
  background: var(--navy-900);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3rem) clamp(1.1rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-lg);
}
.ps-block--highlight::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 480px at 88% -15%, rgba(239, 90, 42, 0.22), transparent 60%),
    radial-gradient(650px 420px at 6% 115%, rgba(42, 140, 226, 0.18), transparent 62%);
}
.ps-block--highlight::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 1.5px 1.5px, rgba(255,255,255,0.14) 1.4px, transparent 0);
  background-size: 22px 22px;
}
.ps-block--highlight > * { position: relative; z-index: 1; }
.ps-block--highlight .eyebrow { color: var(--orange); }
.ps-block--highlight .ps-plans-lead { color: rgba(255, 255, 255, 0.75); }
.ps-block--highlight .plans-cta { color: #fff; display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; }
.ps-block--highlight .plans-cta .btn-ghost { --btn-fg: #fff; border-color: rgba(255, 255, 255, 0.4); }
.ps-block--highlight .plans-cta .btn-ghost:hover { --btn-bg: rgba(255, 255, 255, 0.1); }
.ps-plans-lead { text-align: left; margin-bottom: .5rem; }
.plan-perks {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem 1.75rem;
  margin: 1.4rem auto 2.75rem;
}
.plan-perks li {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--display); font-weight: 600; font-size: .92rem; color: var(--ink-soft);
}
.plan-perks svg {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: #1c7a43; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.ps-block--highlight .plan-perks li { color: rgba(255, 255, 255, 0.9); }
.ps-block--highlight .plan-perks svg { stroke: #4ade80; }

.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 620px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.plan-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.plan-card:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35), 0 0 0 3px rgba(255, 255, 255, 0.28);
  z-index: 2;
}
.plan-card--basico:hover     { box-shadow: 0 24px 48px rgba(140, 95, 219, 0.45), 0 0 0 3px rgba(140, 95, 219, 0.55); }
.plan-card--estandar:hover   { box-shadow: 0 24px 48px rgba(24, 181, 140, 0.45), 0 0 0 3px rgba(24, 181, 140, 0.55); }
.plan-card--profesional:hover{ box-shadow: 0 24px 48px rgba(42, 140, 226, 0.45), 0 0 0 3px rgba(42, 140, 226, 0.55); }
.plan-card--premium:hover    { box-shadow: 0 24px 48px rgba(239, 90, 42, 0.45), 0 0 0 3px rgba(239, 90, 42, 0.55); }

.plan-head {
  position: relative;
  padding: 1.75rem 1.5rem 2.75rem;
  color: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}
.plan-name {
  display: inline-block;
  font-family: var(--display); font-weight: 700; font-size: .78rem;
  letter-spacing: .08em; text-transform: uppercase;
  background: rgba(255, 255, 255, 0.2);
  padding: .35rem .75rem; border-radius: 999px;
  margin-bottom: 1rem;
}
.plan-price { font-family: var(--display); font-weight: 800; font-size: 2.05rem; line-height: 1; }
.plan-currency { font-size: 1rem; font-weight: 700; margin-right: .2rem; }
.plan-period { font-size: .92rem; font-weight: 500; opacity: .85; }

/* Encabezados de plan: versiones más oscuras de los mismos colores que el
   hover de arriba (que sí puede quedarse vivo, es solo un brillo decorativo).
   Los tonos originales (#8c5fdb, #18b58c, #2a8ce2) daban entre 2.6:1 y 4.4:1
   con el texto blanco encima — por debajo del 4.5:1 de WCAG AA. Estos llegan
   todos a 4.7:1 o más en ambos extremos del degradado. */
.plan-card--basico .plan-head { background: linear-gradient(135deg, #7e56c5, #6a3bc2); }
.plan-card--estandar .plan-head { background: linear-gradient(135deg, #107b5f, #0d8061); }
.plan-card--profesional .plan-head { background: linear-gradient(135deg, #2270b5, #1968b8); }
.plan-card--premium .plan-head { background: linear-gradient(135deg, var(--orange-cta), var(--orange-700)); }

.plan-body { padding: 1.6rem 1.5rem 1.75rem; display: flex; flex-direction: column; flex: 1; }
.plan-feats { display: grid; margin-bottom: 1.5rem; }
.plan-feats li {
  padding: .65rem 0; text-align: center; font-size: .87rem; color: var(--ink-soft);
  border-bottom: 1px dashed var(--line);
}
.plan-feats li:last-child { border-bottom: 0; }
.plan-feats strong { color: var(--navy); font-weight: 800; }
.plan-body .btn { margin-top: auto; }

.plans-cta {
  margin-top: 2.25rem; text-align: center;
  font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--navy);
}

/* Timeline */
.timeline { display: grid; gap: 0; position: relative; }
.tl-item {
  display: grid; grid-template-columns: 64px 1fr; gap: 1.2rem;
  padding: 1.6rem 0;
  position: relative;
}
.tl-item:not(:last-child)::after {
  content: "";
  position: absolute; left: 27px; top: 62px; bottom: -1.6rem;
  width: 2px;
  background: repeating-linear-gradient(var(--line-strong), var(--line-strong) 4px, transparent 4px, transparent 9px);
}
.tl-num {
  position: relative; z-index: 1;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 1.15rem;
  color: #fff;
  background: linear-gradient(140deg, var(--navy), var(--navy-900));
  box-shadow: 0 0 0 5px var(--bg-soft), var(--shadow-sm);
}
.section:not(.section--soft) .tl-num { box-shadow: 0 0 0 5px var(--bg), var(--shadow-sm); }
.tl-item:hover .tl-num,
.tl-item.is-active .tl-num { background: linear-gradient(140deg, var(--orange-cta), var(--orange-700)); }
.tl-body { padding-top: .5rem; }
.tl-body h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.tl-body p { color: var(--muted); font-size: .96rem; }

.section--dark .tl-item::after {
  background: repeating-linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22) 4px, transparent 4px, transparent 9px);
}
.section--dark .tl-num { box-shadow: 0 0 0 5px var(--navy-900), var(--shadow-sm); }
.section--dark .tl-body h3 { color: #fff; }
.section--dark .tl-body p { color: rgba(255, 255, 255, 0.65); }

/* "Cómo trabajamos" en ancho de escritorio: en vez del stepper horizontal
   típico (ícono + número + línea recta, como en cualquier sitio de
   referencia), la línea se va "completando" como el progreso de un build a
   medida que se scrollea la sección — el mismo lenguaje de "reacciona al
   scroll, no al mouse" que ya usamos en "Nuestro diferencial", asi que se
   siente igual en mobile y en desktop. */
@media (min-width: 1040px) {
  .timeline {
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
  }
  .tl-item {
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 0;
  }
  .tl-item::after { display: none; }
  .tl-body { padding-top: 1.4rem; }
  .timeline::before,
  .timeline::after {
    content: ""; position: absolute; top: 28px; left: 28px; height: 2px;
    z-index: 0;
  }
  .timeline::before {
    right: 28px;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 4px, transparent 4px 9px);
  }
  .timeline::after {
    width: var(--fillpx, 0px);
    background: linear-gradient(90deg, var(--orange-cta), var(--orange-700));
  }
}

/* Clientes — cinta doble infinita (inspirada en carruseles de logos,
   dos filas en sentidos opuestos, en pausa al pasar el mouse) */
.client-carousel {
  display: grid; gap: .9rem;
  padding-block: .5rem 1.75rem;
  margin-top: 1rem;
}
.client-row {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.client-track {
  display: inline-flex; flex: none; align-items: center; gap: 1rem;
  padding-inline: .5rem;
  animation: clientScroll 48s linear infinite;
}
.client-row--rev .client-track { animation-direction: reverse; animation-duration: 54s; }
.client-row:hover .client-track { animation-play-state: paused; }
@keyframes clientScroll { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .client-track { animation-duration: 90s; } }

.client-tile {
  flex: none;
  display: grid; place-items: center;
  width: auto; min-width: 188px; height: 108px;
  padding: 1rem 1.5rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.client-row:hover .client-tile { border-color: var(--line-strong); }
.client-tile img {
  /* height fija (no max-height): antes cada logo se mostraba a su tamaño
     de archivo original, así que uno subido más chico se veía más chico
     que el resto aunque el espacio disponible fuera el mismo. */
  height: 64px; max-width: 100%; width: auto; object-fit: contain;
  transition: filter .25s var(--ease);
}
/* El gris-hasta-el-hover es un efecto solo para mouse: en touch (celular)
   no hay hover, así que los logos quedaban grises para siempre. Se aplica
   nada más en dispositivos que de verdad pueden pasar el mouse. */
@media (hover: hover) and (pointer: fine) {
  .client-tile img { filter: grayscale(1) opacity(.75); }
  .client-tile:hover img { filter: grayscale(0) opacity(1); }
}

/* Con logo real: sin caja, el logo "flota" directo sobre el fondo
   (estilo "empresas que confían en nosotros"). Sin logo (solo texto),
   se mantiene el recuadro de arriba para que el nombre no quede suelto. */
.client-tile--logo {
  background: none; border: none; box-shadow: none; padding: 0 1.75rem;
}
.client-tile--logo img { height: 72px; }
.client-tile .client-name {
  font-family: var(--display); font-weight: 700; color: var(--muted);
  font-size: .92rem; text-align: center; white-space: nowrap;
  transition: color .25s var(--ease);
}
.client-tile:hover .client-name { color: var(--navy); }
.clients-line {
  margin-top: 1.5rem;
  margin-inline: auto;
  text-align: center;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  color: var(--navy);
  max-width: 40ch;
}

/* Testimonios: mismo borde animado que Productos/Misión-Visión (naranja,
   coherente con la comilla y la barra superior que ya usan ese acento). */
.testimonial {
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  padding: 1.7rem;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  overflow: hidden;
  background-image:
    linear-gradient(var(--card), var(--card)),
    linear-gradient(120deg, var(--line-strong), var(--orange) 25%, var(--orange-700) 60%, var(--line-strong) 90%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: 100% 100%, 250% 250%;
  background-position: 0 0, 0% 0%;
  transition: background-position 1s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.testimonial::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 1;
  background: linear-gradient(90deg, var(--navy), var(--orange));
}
.testimonial:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); background-position: 0 0, 100% 100%; }
.testimonial-quote {
  font-size: .98rem; color: var(--ink-soft); margin-bottom: 1.3rem;
  white-space: pre-line;
}
.testimonial-quote::before {
  content: "\201C";
  display: block;
  font-family: var(--display); font-weight: 800;
  font-size: 2.4rem; line-height: .2; color: var(--orange);
  margin-bottom: .7rem;
}
.testimonial-person { display: flex; align-items: center; gap: .8rem; margin-top: auto; }
.testimonial-avatar {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  background: var(--bg-2);
}
.testimonial-initials {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; color: #fff;
  background: var(--navy);
  font-size: .95rem;
}
.testimonial-name { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: .92rem; }
.testimonial-role { font-size: .82rem; color: var(--muted); }

/* Formulario */
.contact-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; }
.contact-info h2 { font-size: clamp(1.75rem, 4.2vw, 2.6rem); }
.contact-list { margin-top: 1.75rem; display: grid; gap: 1rem; }
.contact-list li { display: grid; gap: .1rem; }
.cl-label {
  font-family: var(--display); font-weight: 700;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.contact-list a { color: var(--navy); font-weight: 600; }
.contact-list a:hover { color: var(--orange-700); }

.contact-form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 4vw, 2.2rem);
  box-shadow: var(--shadow-md);
  display: grid; gap: 1rem;
}
.field { display: grid; gap: .4rem; }
.field-row { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.field label {
  font-family: var(--display); font-weight: 600; font-size: .85rem; color: var(--ink);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: .7rem .85rem;
  font: inherit; color: var(--ink);
  background: var(--bg-soft);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--orange);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(239, 90, 42, 0.15);
}
.field input:user-invalid, .field textarea:user-invalid,
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: #cf3b2f;
}
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.req { color: var(--orange-700); margin-left: .1rem; }
.form-required-note { font-size: .82rem; color: var(--muted); margin-top: -.3rem; }
.field-error { font-size: .84rem; color: #cf3b2f; font-weight: 600; }

.form-status {
  font-size: .9rem; font-weight: 600; min-height: 1.2em;
}
.form-status.is-ok { color: #1c7a43; }
.form-status.is-error { color: #cf3b2f; }
.form-legal { font-size: .78rem; color: var(--muted); }

/* ============================ 6. SECCIONES ============================ */

/* Hero */
.hero {
  position: relative;
  padding-block: clamp(3.5rem, 9vw, 6rem);
  background: var(--navy-900);
}
.hero-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1100px 620px at 84% -12%, rgba(14, 58, 86, 0.55), transparent 60%),
    radial-gradient(680px 460px at 4% 108%, rgba(239, 90, 42, 0.18), transparent 62%);
}
.hero-grid {
  position: relative; z-index: 1;
  display: grid;
  /* minmax(0, 1fr) en vez de dejar la columna implícita en "auto": sin esto,
     un contenido sin espacios para cortar (como una línea larga del bloque
     de código) empuja la columna a su min-content y desborda el grid en
     mobile, aunque ese contenido tenga su propio overflow-x:auto. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.75rem, 6vw, 4rem);
  align-items: center;
}
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

.hero-copy { position: relative; z-index: 2; }

/* Migas de pan (páginas propias de producto) */
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  font-size: .82rem; color: rgba(255, 255, 255, 0.55);
  margin-bottom: 1.5rem;
}
.breadcrumb a { color: rgba(255, 255, 255, 0.7); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb span[aria-current] { color: rgba(255, 255, 255, 0.9); }

/* Insignia de estado en el hero de producto (p. ej. "Producto propio") */
.hero-status {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--display); font-weight: 700; font-size: .7rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: #29d97a;
  margin-bottom: 1rem;
}
.hero-status::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #29d97a; box-shadow: 0 0 0 3px rgba(41, 217, 122, 0.2);
}

.card-sublist { margin-top: .9rem; display: grid; gap: .5rem; }
.card-sublist li {
  position: relative; padding-left: 1.05rem;
  font-size: .92rem; color: var(--ink-soft); line-height: 1.45;
}
.card-sublist li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--orange);
}

/* Lista de funciones a mayor escala (página propia de producto) */
.feature-list {
  display: grid; gap: .9rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .feature-list { grid-template-columns: 1fr 1fr; } }
.feature-list li {
  position: relative; padding: .1rem 0 .1rem 1.75rem;
  font-size: 1rem; color: var(--ink-soft); line-height: 1.5;
}
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 10px; height: 10px; border-radius: 3px; background: var(--orange);
}

.hero-kicker {
  display: inline-flex; align-items: center; gap: .65rem;
  font-family: var(--display); font-weight: 700; font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1.2rem;
}
.hero-kicker-rule { width: 24px; height: 2px; background: var(--orange); flex: none; }

.hero-title {
  font-size: clamp(2.15rem, 5vw, 3.35rem);
  font-weight: 800;
  color: #fff;
}
.hero-title em { font-style: normal; color: var(--orange); }

.hero-sub {
  margin-top: 1.25rem;
  font-size: clamp(1.02rem, 2.2vw, 1.2rem);
  color: rgba(255, 255, 255, 0.72);
  max-width: 46ch;
}

.hero-actions {
  margin-top: 2rem;
  display: flex; flex-wrap: wrap; gap: .9rem;
}
/* .btn-ghost por defecto usa texto navy (pensado para fondos claros); sobre
   el navy oscuro del hero necesita blanco y un borde visible. */
.hero-actions .btn-ghost { --btn-fg: #fff; border-color: rgba(255, 255, 255, 0.32); }
.hero-actions .btn-ghost:hover { --btn-bg: rgba(255, 255, 255, 0.08); }

.hero-checklist {
  margin-top: 1.9rem;
  display: flex; flex-wrap: wrap;
  gap: .6rem 1.6rem;
}
.hero-checklist li {
  display: flex; align-items: center; gap: .5rem;
  font-size: .92rem; color: rgba(255, 255, 255, 0.72);
}
.hero-checklist svg {
  width: 19px; height: 19px; flex: none;
  fill: none; stroke: var(--orange); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Franja de métricas al pie del hero (mismo fondo oscuro, solo una línea
   divisoria arriba: evita el sándwich oscuro-claro-oscuro de meter una
   sección nueva entre el hero y el ticker, los dos oscuros). */
.hero-stats {
  position: relative; z-index: 1;
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem;
}
.hero-stat { display: flex; flex-direction: column; gap: .3rem; }
.hero-stat-num {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 2.4rem); color: var(--orange); line-height: 1;
}
.hero-stat-label {
  font-size: .86rem; line-height: 1.35; color: rgba(255, 255, 255, 0.65);
}
.hero-stat-divider { width: 1px; align-self: stretch; background: rgba(255, 255, 255, 0.12); }

/* Vista previa (mockup navegador + celular), inspirada en el formato
   "duo" de escritorio + móvil superpuesto. */
/* width:100% es necesario: con solo "margin-inline:auto" y width:auto, un
   ítem de grid se encoge a su contenido (ver spec de auto-margins en grid)
   en vez de llenar la columna y luego limitarse por max-width. */
.hero-showcase { position: relative; z-index: 1; width: 100%; max-width: 460px; margin-inline: auto; }
@media (min-width: 960px) {
  /* Agranda visualmente el mockup sin robarle espacio a la columna de texto:
     scale() no participa en el cálculo de la grilla, solo del render.
     Va en un wrapper propio (no en el .reveal) porque la animación de
     entrada del hero fija su propio transform y pisaría este.
     transform-origin a la izquierda para que el crecimiento y el
     desplazamiento vayan hacia la derecha, no hacia el texto. */
  .hero-showcase--wide .showcase-scale { transform: scale(1.16) translateX(33px); transform-origin: center left; }
}

/* Panel "equipos que atendemos" (Servicio técnico): en vez de un mockup de
   navegador (no tiene sentido para un servicio de hardware), unos íconos
   de línea de los equipos reales que cubre el servicio. */
.tech-panel {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: color-mix(in srgb, var(--navy) 55%, var(--navy-900));
  box-shadow: 0 22px 56px rgba(4, 16, 24, 0.4), 0 6px 14px rgba(4, 16, 24, 0.2);
  overflow: hidden;
  padding: clamp(1.25rem, 4vw, 1.75rem);
}
.tech-panel-head { display: flex; align-items: center; gap: .55rem; margin-bottom: 1.4rem; }
.tech-panel-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: #29d97a; box-shadow: 0 0 0 3px rgba(41, 217, 122, 0.2);
}
.tech-panel-label {
  font-family: var(--display); font-weight: 700; font-size: .78rem;
  letter-spacing: .04em; color: rgba(255, 255, 255, 0.6);
}
.tech-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.tech-item {
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  text-align: center;
  padding: 1.1rem .75rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--display); font-weight: 600; font-size: .82rem;
  color: rgba(255, 255, 255, 0.75);
  transition: transform .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
}
.tech-item:hover {
  transform: translateY(-3px);
  background: rgba(239, 90, 42, 0.1);
  border-color: rgba(239, 90, 42, 0.35);
}
.tech-ic {
  width: 52px; height: 52px; border-radius: 14px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(145deg, rgba(239, 90, 42, 0.18), rgba(239, 90, 42, 0.05));
  border: 1px solid rgba(239, 90, 42, 0.3);
  transition: transform .3s var(--ease);
}
.tech-item:hover .tech-ic { transform: scale(1.08) rotate(-4deg); }
.tech-ic svg {
  width: 27px; height: 27px;
  fill: none; stroke: var(--orange); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 380px) {
  .tech-item span:last-child { font-size: .76rem; }
}

/* Mockup "monitor": captura real de pantalla dentro de un marco de monitor,
   con biselo y base. Usado cuando se muestra software propio en funcionamiento. */
.device-monitor {
  padding: 14px;
  border-radius: 20px;
  background: linear-gradient(160deg, #1c2b38, var(--navy-900));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 40px 90px rgba(4, 16, 24, 0.55), 0 14px 32px rgba(4, 16, 24, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.device-cam { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); margin: 0 auto 10px; }

/* Pestaña de editor (mockup de código del hero): reemplaza los puntitos
   estilo macOS por algo que se lee como IDE, no como ventana de escritorio. */
.ide-tabbar { display: flex; margin-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.ide-tab {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: 0 .2rem .6rem;
  font-family: var(--display); font-weight: 600; font-size: .78rem;
  color: rgba(255, 255, 255, 0.8);
  border-bottom: 2px solid var(--orange);
  margin-bottom: -1px;
}
.ide-tab svg {
  width: 13px; height: 13px; flex: none;
  fill: none; stroke: var(--orange); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.device-screen {
  position: relative;
  aspect-ratio: 1920 / 1079;
  border-radius: 7px;
  overflow: hidden;
  background: #0a1620;
}
.device-screen img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.08) saturate(1.15) brightness(1.03);
}
.device-screen::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 42%);
}

/* Pantalla con código en vez de una captura: sin relación de aspecto fija,
   que la altura la marquen las líneas de código. */
.device-screen--code { aspect-ratio: auto; padding: 1.1rem 1.25rem 1.3rem; }
.code-body {
  margin: 0; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .85rem; line-height: 1.7; color: rgba(255, 255, 255, 0.82);
}
.code-body code { counter-reset: code-line; }
/* Numeración de línea (gutter), como en cualquier editor: generada sola con
   contadores CSS, no hay que mantener números a mano en el HTML. */
.code-ln {
  display: block; position: relative; padding-left: 2.1em;
  opacity: 0; transform: translateY(4px);
  animation: codeLineIn .4s var(--ease) forwards;
}
.code-ln::before {
  counter-increment: code-line;
  content: counter(code-line);
  position: absolute; left: 0; width: 1.6em;
  text-align: right; color: rgba(255, 255, 255, 0.28);
}
.code-ln:nth-child(1) { animation-delay: .5s; }
.code-ln:nth-child(2) { animation-delay: .65s; }
.code-ln:nth-child(3) { animation-delay: .8s; }
.code-ln:nth-child(4) { animation-delay: .95s; }
.code-ln:nth-child(5) { animation-delay: 1.1s; }
.code-ln:nth-child(6) { animation-delay: 1.2s; }
.code-ln:nth-child(7) { animation-delay: 1.3s; }
.code-ln:nth-child(8) { animation-delay: 1.45s; }
@keyframes codeLineIn { to { opacity: 1; transform: none; } }
/* Paleta de sintaxis limitada a lo que ya usa la marca (naranja + blanco),
   nada de verdes/azules/violetas genéricos de tema de editor. */
.tok-kw { color: var(--orange); font-weight: 600; }
.tok-fn { color: #fff; }
.tok-cm { color: rgba(255, 255, 255, 0.4); font-style: italic; }

.code-cursor {
  display: inline-block; width: 7px; height: 1.1em; margin-left: 2px;
  background: var(--orange); vertical-align: text-bottom;
  animation: cursorBlink 1s step-end infinite; animation-delay: 1.5s;
}
@keyframes cursorBlink { 50% { opacity: 0; } }

.device-redact {
  position: absolute; z-index: 1; border-radius: 4px;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0 6px, transparent 6px 12px), var(--navy-900);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.device-nav {
  position: absolute; top: 50%; z-index: 3;
  width: 30px; height: 30px; margin-top: -15px;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(7, 20, 30, 0.55); color: #fff;
  display: grid; place-items: center; font-size: 1.1rem; line-height: 1;
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.device-nav:hover { background: rgba(239, 90, 42, 0.85); border-color: transparent; }
.device-nav--prev { left: 8px; }
.device-nav--next { right: 8px; }
.device-nav[hidden] { display: none; }

.device-dots { display: flex; justify-content: center; gap: .4rem; margin-top: .9rem; }
.device-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); }
.device-dot.is-active { background: var(--orange); }

.device-stand {
  width: 96px; height: 26px; margin: 0 auto; margin-top: -1px;
  background: linear-gradient(180deg, #263847, #16232e);
  clip-path: polygon(28% 0, 72% 0, 100% 100%, 0 100%);
}
.device-base { width: 168px; height: 10px; margin: 0 auto; border-radius: 0 0 8px 8px; background: linear-gradient(180deg, #223342, #101a22); }
.device-caption {
  margin-top: .9rem; text-align: center;
  font-size: .8rem; color: rgba(255, 255, 255, 0.5);
}

/* Aclaración de que los montos/porcentajes de las capturas son de ejemplo
   (no datos reales de ningún cliente), en tono de valor, no de letra chica. */
.device-note {
  margin-top: .6rem; text-align: center;
}
.device-note span {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: .74rem; line-height: 1.4;
  color: rgba(255, 255, 255, 0.62);
}
.device-note svg {
  width: 13px; height: 13px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* Pantalla "vacía": el producto todavía no tiene capturas cargadas, se
   muestra el logo centrado en vez de una foto. */
.device-empty {
  position: relative; aspect-ratio: 1920 / 1080; border-radius: 7px; overflow: hidden;
  background: linear-gradient(160deg, var(--navy), var(--navy-900));
  display: grid; place-items: center;
}
.device-empty img { width: auto; height: auto; max-width: 42%; max-height: 42%; object-fit: contain; }
.device-empty .product-badge { width: 96px; height: 96px; font-size: 1.4rem; border-radius: 20px; }
.device-empty--phone { aspect-ratio: 9 / 19.5; border-radius: 20px; }
.device-empty--phone .product-badge { width: 72px; height: 72px; font-size: 1.1rem; border-radius: 18px; }

/* Mockup "celular": para apps móviles (FACT‑EXPRESS), mismo lenguaje visual
   que .device-monitor pero con forma de teléfono. */
.device-phone {
  width: 240px; margin-inline: auto;
  padding: 14px 10px;
  border-radius: 34px;
  background: linear-gradient(160deg, #1c2b38, var(--navy-900));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 40px 90px rgba(4, 16, 24, 0.55), 0 14px 32px rgba(4, 16, 24, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.device-phone-screen {
  position: relative; aspect-ratio: 9 / 19.5; border-radius: 20px; overflow: hidden; background: #0a1620;
}
.device-phone-screen img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.08) saturate(1.15) brightness(1.03);
}
.device-phone-home { width: 84px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.25); margin: 12px auto 0; }

@media (max-width: 959px) {
  .hero-showcase { max-width: 380px; }
  .hero-showcase--code { max-width: 440px; }
}
@media (min-width: 960px) {
  .hero-showcase--code { max-width: 560px; }
}
@media (max-width: 959px) {
  .hero-showcase--doc { max-width: 480px; }
}
@media (min-width: 960px) {
  .hero-showcase--doc { max-width: 640px; }
}

/* Contenido propio (no una foto) dentro de la pantalla del monitor/celular:
   paneles ilustrativos como el de la portada. */
.device-panel {
  border-radius: 7px; overflow: hidden; background: #0a1620;
  padding: clamp(1.25rem, 4vw, 1.75rem);
  display: flex; justify-content: center;
}
.device-phone-panel {
  border-radius: 20px; overflow: hidden; background: #0a1620;
  padding: 1.1rem .9rem;
  display: flex; justify-content: center;
}
/* Foto/ilustración de producto a página completa (sin panel oscuro detrás,
   la imagen ya trae su propio fondo): solo el marco de esquinas + sombra. */
.showcase-photo {
  width: 100%; height: auto; display: block;
  border-radius: 20px;
  box-shadow: 0 40px 90px rgba(4, 16, 24, 0.45), 0 14px 32px rgba(4, 16, 24, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
/* Dentro de un .tech-panel el panel ya aporta el marco/sombra: la imagen
   (con esquinas transparentes, no un rectángulo limpio) va sin los suyos. */
.tech-panel .showcase-photo { border-radius: 0; box-shadow: none; }

/* Control de pausa: el carrusel de clientes se mueve solo e indefinidamente,
   así que necesita un control accesible para detenerlo (no alcanza con
   pausar solo al pasar el mouse, no sirve en touch/teclado). */
.client-carousel.is-paused .client-track {
  animation-play-state: paused;
}
.motion-toggle {
  position: absolute; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  transition: background-color .2s var(--ease);
}
.motion-toggle:hover { background: rgba(255, 255, 255, 0.3); }
.motion-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.motion-toggle .ic-play { margin-left: 1px; }
.client-carousel { position: relative; }
.motion-toggle--light {
  top: .5rem; right: var(--gutter);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  color: var(--navy);
}
.motion-toggle--light:hover { background: #fff; }

/* CTA band */
.cta-band {
  padding-block: clamp(3rem, 8vw, 5.5rem);
  background: var(--bg-soft);
}
.cta-inner {
  background: linear-gradient(135deg, var(--navy), var(--navy-900));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(2.25rem, 6vw, 4rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-inner::before {
  content: ""; position: absolute; inset: auto -20% -60% -20%; height: 120%; z-index: 0;
  background: radial-gradient(45% 60% at 50% 100%, rgba(239, 90, 42, 0.45), transparent 70%);
  pointer-events: none;
}
.cta-inner::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(circle at 1.5px 1.5px, rgba(255,255,255,0.14) 1.4px, transparent 0);
  background-size: 22px 22px;
  pointer-events: none;
}
.cta-inner h2 { color: #fff; font-size: clamp(1.6rem, 4vw, 2.5rem); position: relative; z-index: 1; }
.cta-inner p {
  position: relative; z-index: 1;
  margin: 1rem auto 1.9rem;
  max-width: 52ch; color: rgba(255, 255, 255, 0.82);
}
.cta-inner .btn { position: relative; z-index: 1; }

/* Footer */
.footer {
  background: var(--navy-900);
  color: rgba(255, 255, 255, 0.75);
  padding-block: clamp(2.75rem, 6vw, 4rem) 1.5rem;
}
.footer-grid {
  display: grid; gap: 2.25rem;
  grid-template-columns: 1fr;
}
.footer-logo {
  height: 56px; width: auto; margin-bottom: .85rem;
}
.footer-links { display: grid; gap: .6rem; }
.footer-links a { font-family: var(--display); font-weight: 600; font-size: .92rem; color: rgba(255,255,255,0.78); width: fit-content; }
.footer-links a:hover { color: #fff; }
.footer-contact { display: grid; gap: .65rem; font-size: .92rem; }
.footer-contact a:hover { color: #fff; }
.footer-contact-item { display: flex; align-items: center; gap: .65rem; }
.footer-contact-item svg {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: var(--orange); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.footer-social { display: flex; gap: .6rem; margin-top: .4rem; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.08);
  transition: background-color .25s var(--ease);
}
.footer-social a:hover { background: var(--orange); }
.footer-social svg { width: 18px; height: 18px; fill: #fff; }
.footer-bottom {
  margin-top: 2.5rem; padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: .85rem; color: rgba(255, 255, 255, 0.6);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
}
.footer-legal-link { color: rgba(255, 255, 255, 0.6); text-decoration: underline; text-underline-offset: 2px; }
.footer-legal-link:hover { color: #fff; }

/* Acceso administrador: antes era un link de texto más entre los legales;
   ahora es solo un ícono (candado) para ocupar menos espacio — el nombre
   accesible (aria-label) sigue diciendo "Acceso administrador". */
.footer-admin-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  transition: background-color .25s var(--ease);
}
.footer-admin-link:hover { background: var(--orange); }
.footer-admin-link svg {
  width: 16px; height: 16px;
  fill: none; stroke: rgba(255, 255, 255, 0.6); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .25s var(--ease);
}
.footer-admin-link:hover svg { stroke: #fff; }

/* WhatsApp flotante */
.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 120;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--wa-green);
  box-shadow: 0 10px 30px -8px rgba(14, 124, 103, 0.6);
  transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.wa-float:hover { transform: scale(1.07); background: var(--wa-green-600); }
.wa-float svg { width: 30px; height: 30px; fill: #fff; }

/* noscript */
.noscript-bar {
  background: var(--navy); color: #fff; text-align: center;
  padding: .75rem 1rem; font-size: .9rem;
}
.noscript-bar a { color: #fff; text-decoration: underline; }
.no-js .reveal { opacity: 1 !important; transform: none !important; }

/* ============================ 7. EFECTOS ============================ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.grid-3 .reveal:nth-child(3n+2) { transition-delay: .05s; }
.grid-3 .reveal:nth-child(3n) { transition-delay: .1s; }

/* El hero está sobre la línea de flotación: entra con animación CSS pura,
   nunca depende de JavaScript ni puede quedarse invisible. */
.hero .reveal {
  opacity: 1;
  transform: none;
  animation: heroIn .7s var(--ease) both;
}
.hero .reveal:nth-child(2) { animation-delay: .05s; }
.hero .reveal:nth-child(3) { animation-delay: .1s; }
.hero .reveal:nth-child(4) { animation-delay: .15s; }
.hero .reveal:nth-child(5) { animation-delay: .2s; }
.hero .reveal:nth-child(6) { animation-delay: .25s; }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .reveal { animation: none; }
}

/* ============================ 8. RESPONSIVE ============================ */
@media (min-width: 620px) {
  .field-row { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 880px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .tl-item { grid-template-columns: 80px 1fr; }
  .contact-grid { grid-template-columns: 0.9fr 1.1fr; align-items: start; }
}
@media (min-width: 1040px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1.2fr; }
}

/* Menú móvil */
@media (max-width: 899px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: .25rem;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    padding: 1rem var(--gutter) 1.5rem;
    transform: translateY(-12px);
    opacity: 0; visibility: hidden;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .nav-links.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
  .nav-links a { padding: .8rem .25rem; font-size: 1rem; border-bottom: 1px solid var(--line); }
  .nav-links a:not(.btn)::after { display: none; }
}

/* ============================ 8b. PÁGINAS LEGALES ============================ */
.legal-section { padding-top: clamp(2.5rem, 6vw, 4rem); }
.legal-head { max-width: 60ch; margin-bottom: clamp(2rem, 5vw, 3rem); }
.legal-head h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.9rem, 4.5vw, 2.75rem); color: var(--navy);
}
.legal-lead { margin-top: .6rem; color: var(--muted); font-size: 1.02rem; }

.legal-prose { max-width: 70ch; }
.legal-prose p { color: var(--ink-soft); margin-top: 1.1rem; text-align: left; hyphens: none; }
.legal-prose p:first-child { margin-top: 0; }
.legal-prose h2 {
  margin-top: 2.5rem; margin-bottom: .5rem;
  font-size: 1.35rem; color: var(--navy);
}
.legal-prose ul { display: grid; gap: .6rem; margin: 1rem 0 1.5rem; }
.legal-prose li { position: relative; padding-left: 1.5rem; font-size: .97rem; color: var(--ink-soft); }
.legal-prose li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 8px; height: 8px; border-radius: 3px; background: var(--orange);
}
.legal-prose a { color: var(--navy); font-weight: 600; }
.legal-prose a:hover { color: var(--orange-700); }
.legal-prose code { background: var(--bg-soft); padding: .1rem .35rem; border-radius: 4px; font-size: .9em; }

/* ============================ 9. REDUCED-MOTION ============================ */
/* Solo se desactivan efectos intrusivos; hovers, fades y micro-interacciones se mantienen. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .code-ln { animation: none; opacity: 1; transform: none; }
  .code-cursor { animation: none; }
  .card--tech .card-ic svg path,
  .card--tech .card-ic svg circle:not([fill]) { animation: none; stroke-dashoffset: 0; }
  .card--tech::before { animation: none; opacity: 0; }
  .card--tech { transform: none; transition: none; }
}

/* ============================ 10. PRINT ============================ */
@media print {
  .nav, .wa-float, .contact-form, .cta-band, .hero-showcase, .guide-toolbar, .footer { display: none; }
  body { color: #000; }
}

.guide-toolbar { margin: 0 0 2rem; }