/* ============================================================
   GRUPO COPRINCI — styles.css
   Base · layout · header sticky · hero (stub paso 1) · secciones.
   tokens.css es la fuente de verdad de marca; aquí solo componemos.
   ============================================================ */

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; font-weight: 700; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 4px; }

/* ---------- Layout ---------- */
.container { width: min(1180px, 92vw); margin-inline: auto; }
section { scroll-margin-top: 92px; } /* offset para header fijo al usar anclas */
.section { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.section--soft { background: var(--bg-soft); }
.section--dark { background: var(--bg-dark); color: var(--text-invert); }
.section__head { max-width: 720px; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.section__head--left { margin-inline: 0; text-align: left; }
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  font-size: .8rem; color: var(--azul); margin-bottom: .6rem;
}
.eyebrow::before { content: ""; display: inline-block; width: 13px; height: 15px; margin-right: .5rem; vertical-align: -1px; background: currentColor; -webkit-clip-path: var(--hex); clip-path: var(--hex); }
.section--dark .eyebrow { color: var(--energia); }
h2.section__title { font-size: var(--fs-h2); margin-bottom: .6rem; color: var(--marino); }
.section--dark h2.section__title { color: #fff; }
.section__lead { color: var(--text-soft); font-size: 1.1rem; }
.section--dark .section__lead { color: rgba(255,255,255,.78); }

/* ---------- Skip link (accesibilidad) ---------- */
.skip-link {
  position: absolute; left: 1rem; top: -120px; z-index: 1000;
  background: #fff; color: var(--azul); padding: .7rem 1.2rem;
  border-radius: var(--r-sm); font-weight: 700; box-shadow: var(--shadow-md);
  transition: top .2s ease;
}
.skip-link:focus { top: 1rem; }

/* Sólo para lectores de pantalla */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- Barra de progreso de scroll ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--naranja); z-index: 200; transition: width .1s linear;
}

/* ============================================================
   HEADER STICKY (logo blanco/color, se encoge al hacer scroll)
   ============================================================ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 150;
  padding: 1.1rem 0;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}

/* Estado "scrolled": fondo claro, logo a color, más compacto */
.site-header.is-scrolled {
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
  padding: .5rem 0;
}

/* Logo: crossfade blanco <-> color según el estado del header */
.brand { position: relative; display: inline-block; line-height: 0; }
.brand img {
  height: 46px; width: auto;
  transition: height .35s var(--ease), opacity .3s ease;
}
.brand .logo--color { position: absolute; inset: 0; opacity: 0; }
.site-header.is-scrolled .brand img { height: 38px; }
.site-header.is-scrolled .brand .logo--white { opacity: 0; }
.site-header.is-scrolled .brand .logo--color { opacity: 1; }

/* Navegación */
.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.8rem); }
.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.8rem); }
.nav__links a:not(.btn) {
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  color: var(--text-invert); position: relative; padding: .3rem 0;
  transition: color .3s ease;
}
.nav__links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--naranja); transition: width .25s var(--ease);
}
.nav__links a:not(.btn):hover::after,
.nav__links a:not(.btn):focus-visible::after { width: 100%; }
.site-header.is-scrolled .nav__links a:not(.btn) { color: var(--text); }
.nav .btn { padding: .68rem 1.5rem; font-size: 1rem; }

/* Botón hamburguesa (móvil) */
.nav__toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: .4rem; color: var(--text-invert); z-index: 160;
}
.site-header.is-scrolled .nav__toggle { color: var(--text); }
.nav__toggle span {
  display: block; height: 2px; width: 26px; background: currentColor; margin: 5px auto;
  transition: transform .3s var(--ease), opacity .2s 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); }

/* ============================================================
   HERO (stub paso 1 — la cascada/animación completa llega en paso 2)
   ============================================================ */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  color: var(--text-invert); overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background: var(--grad-hero); background-size: 180% 180%;
  animation: heroBreath 20s ease-in-out infinite; /* "respira" lento */
}
.hero__grid {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse at 28% 25%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse at 28% 25%, #000 0%, transparent 72%);
}
.hero__inner { padding: 9rem 0 4rem; display: grid; grid-template-columns: 1.35fr .85fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero__main { max-width: 720px; }
.hero__panel { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2rem); }
.hero__panel-title { font-size: var(--fs-h3); color: #fff; margin-bottom: .8rem; }
.hero__panel p { color: rgba(255,255,255,.85); font-size: 1rem; margin-bottom: 1rem; }
.hero__panel-list { display: grid; gap: .6rem; }
.hero__panel-list li { display: flex; gap: .6rem; align-items: center; color: #fff; font-family: var(--font-display); font-weight: 600; font-size: .98rem; }
.hero__panel-list li::before { content: ""; flex: 0 0 auto; width: 14px; height: 16px; background: var(--energia); -webkit-clip-path: var(--hex); clip-path: var(--hex); }
@media (max-width: 880px) { .hero__inner { grid-template-columns: 1fr; } .hero__panel { max-width: 540px; } }
.hero__eyebrow {
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; font-size: .85rem;
  color: rgba(255,255,255,.85); margin-bottom: 1.1rem;
}
.hero__title { font-size: var(--fs-hero); font-weight: 700; letter-spacing: -.01em; margin-bottom: 1.3rem; }
.hero__title .accent { color: var(--energia); }
.hero__sub {
  font-size: clamp(1.05rem, 1.4vw, 1.3rem); color: rgba(255,255,255,.9);
  max-width: 620px; margin-bottom: 2.2rem;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; }
@keyframes heroBreath { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* Entrada en cascada del hero — CSS puro (se reproduce al cargar, no depende de JS).
   La cascada completa/parallax llega en el paso 2; esto ya da el "vivo" base. */
.hero__main > * { animation: heroUp .85s var(--ease) both; }
.hero__eyebrow { animation-delay: .05s; }
.hero__title   { animation-delay: .18s; }
.hero__sub     { animation-delay: .34s; }
.hero__cta     { animation-delay: .5s; }
@keyframes heroUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ---------- Barra de confianza (estática en paso 1; contador en paso 2) ---------- */
.trust { background: #fff; border-bottom: 1px solid var(--border); }
.trust__inner {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(1rem, 4vw, 3rem); padding: 1.4rem 0;
}
.trust__item { display: flex; align-items: baseline; gap: .5rem; font-family: var(--font-display); }
.trust__item .v { font-weight: 700; color: var(--marino); font-size: 1.05rem; }
.trust__item.is-num .v { color: var(--naranja); font-size: 1.5rem; }
.trust__item .l { color: var(--text-soft); font-weight: 600; font-size: .95rem; }

/* ============================================================
   HOME — tarjetas de servicio (4 -> landings)
   ============================================================ */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.svc-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.svc-card__img { aspect-ratio: 16 / 10; background-size: cover; background-position: center; background-color: var(--marino); }
.svc-card__body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.svc-card__body h3 { color: var(--marino); font-size: 1.15rem; margin-bottom: .5rem; }
.svc-card__body p { color: var(--text-soft); font-size: .95rem; flex: 1; }
.svc-card__link { margin-top: 1rem; color: var(--azul); font-family: var(--font-display); font-weight: 700; display: inline-flex; align-items: center; gap: .3rem; transition: gap .2s var(--ease); }
.svc-card:hover .svc-card__link { gap: .6rem; }
@media (max-width: 980px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .svc-grid { grid-template-columns: 1fr; } }

/* ---------- Banner intermedio ---------- */
.banner-mid { position: relative; background: var(--grad-marca); color: #fff; overflow: hidden; }
.banner-mid__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(ellipse at 80% 15%, #000, transparent 70%); mask-image: radial-gradient(ellipse at 80% 15%, #000, transparent 70%); }
.banner-mid__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding: clamp(2.2rem, 5vw, 3.4rem) 0; }
.banner-mid h2 { font-size: var(--fs-h2); max-width: 24ch; }
.banner-mid p { color: rgba(255,255,255,.85); margin-top: .5rem; max-width: 48ch; }

/* ---------- Casos de éxito ---------- */
.casos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.caso-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.caso-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.caso-card__img { aspect-ratio: 16 / 10; background: repeating-linear-gradient(135deg, #e3eaee 0 12px, #dbe3e8 12px 24px); display: grid; place-items: center; }
.caso-card__img span { font: 600 .85rem var(--font-display); color: var(--acero); letter-spacing: .03em; }
.caso-card__img--demo { background-color: var(--marino); background-size: cover; background-position: center; position: relative; }
.caso-card__img--demo .caso-card__demo { position: absolute; top: .6rem; left: .6rem; font: 600 .66rem var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--roca); background: var(--energia); padding: .22rem .55rem; border-radius: var(--r-pill); }
.caso-card__body { padding: 1.2rem 1.3rem 1.4rem; }
.caso-card__tag { display: inline-block; font: 600 .72rem var(--font-display); letter-spacing: .05em; text-transform: uppercase; color: var(--azul); margin-bottom: .4rem; }
.caso-card__body h3 { color: var(--marino); font-size: 1.1rem; margin-bottom: .25rem; }
.caso-card__loc { color: var(--text-soft); font-size: .85rem; margin-bottom: .5rem; }
.caso-card__body > p { color: var(--text-soft); font-size: .95rem; }
@media (max-width: 860px) { .casos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .casos-grid { grid-template-columns: 1fr; } }

/* ---------- Retos ---------- */
.retos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.reto { display: flex; align-items: center; gap: .8rem; background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 1.1rem 1.2rem; font-family: var(--font-display); font-weight: 600; color: var(--marino); box-shadow: var(--shadow-sm); }
.reto__ico { flex: 0 0 auto; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: var(--r-md); background: rgba(0,96,241,.10); color: var(--azul); transition: background .22s var(--ease), color .22s var(--ease), transform .22s var(--ease); }
.reto__ico .licon { width: 1.4rem; height: 1.4rem; }
.reto:hover .reto__ico, .reto:focus-visible .reto__ico { background: var(--azul); color: #fff; transform: scale(1.06); }
.retos-cta { text-align: center; margin-top: 2rem; }
@media (max-width: 860px) { .retos-grid { grid-template-columns: 1fr 1fr; } } /* tablets: 4 col quedan apretadas, mejor 2 */
@media (max-width: 400px) { .retos-grid { grid-template-columns: 1fr; } } /* 2 col no caben en pantallas muy angostas (~320px) */

/* ---------- Nuestro trabajo (galería placeholder) ---------- */
.trabajo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.trabajo-tile { aspect-ratio: 4 / 3; border-radius: var(--r-md); background: repeating-linear-gradient(135deg, #e3eaee 0 12px, #dbe3e8 12px 24px); display: grid; place-items: center; }
.trabajo-tile span { font: 600 .85rem var(--font-display); color: var(--acero); }
@media (max-width: 760px) { .trabajo-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Formulario de contacto ---------- */
.contact-form { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(1.4rem, 4vw, 2.2rem); box-shadow: var(--shadow-md); }
.contact-form h3 { color: var(--marino); font-size: 1.3rem; margin-bottom: 1.2rem; }
.contact-form .field { margin-bottom: 1rem; }
.contact-form label { display: block; font: 600 .9rem var(--font-display); color: var(--marino); margin-bottom: .35rem; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; padding: .7rem .9rem; border: 2px solid var(--border); border-radius: var(--r-sm); font: inherit; color: var(--text); background: #fff; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--azul); } /* el anillo de foco lo da :focus-visible global */
.contact-form textarea { resize: vertical; }
.form-msg { margin-top: .9rem; font-size: .9rem; color: var(--fuerza); min-height: 1.2em; }
.form-msg.is-pending { color: #9a5a00; }
@media (min-width: 761px) { .contact__grid { align-items: start; } }

/* ============================================================
   BOTONES (extienden .btn de tokens)
   ============================================================ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; text-decoration: none; }
.btn--lg { padding: 1.1rem 2.4rem; font-size: 1.14rem; font-weight: 700; }
/* Texto oscuro sobre naranja para cumplir contraste AA (blanco/naranja = 2.8:1 ✗; roca/naranja = 5.7:1 ✓).
   Override en styles.css para NO tocar tokens.css. PENDIENTE de decisión de marca de Memo:
   alternativa = CTA de acción en --azul con texto blanco (5.3:1). */
.btn--accent { color: var(--roca); }
.btn--accent:hover { background: #ea670c; }
.btn--primary { box-shadow: 0 4px 14px rgba(0,96,241,.22); transition: background .25s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease); }
.btn--primary:hover { background: #0a55d6; box-shadow: 0 7px 20px rgba(0,96,241,.34); transform: translateY(-1px); }
.btn--ghost:hover { background: rgba(255,255,255,.12); }
/* En el hero (foto oscura), el ghost transparente perdía afordancia de botón en móvil
   (su fondo solo aparecía en :hover, inútil en táctil). Le damos fondo sutil en reposo. */
.hero .btn--ghost { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.75); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.hero .btn--ghost:hover { background: rgba(255,255,255,.26); }
/* CTA secundario sobre fondo CLARO (el ghost se vuelve invisible ahí): contorno marino */
.btn--outline { background: transparent; color: var(--marino); border: 2px solid var(--marino); }
.btn--outline:hover { background: var(--marino); color: #fff; }
.btn--block { width: 100%; }

/* ---------- Placeholders (las secciones se llenan en pasos 2–6) ---------- */
.placeholder {
  border: 2px dashed var(--border); border-radius: var(--r-md);
  padding: clamp(1.5rem, 4vw, 3rem); color: var(--text-soft); text-align: center;
}
.placeholder strong { color: var(--marino); font-family: var(--font-display); }
.pending { color: #9a5a00; font-weight: 600; } /* marca datos pendientes del cliente */

/* ---------- Contacto (stub) ---------- */
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); }
.contact__list li { margin-bottom: .8rem; display: flex; gap: .6rem; }
.contact__list b { font-family: var(--font-display); color: var(--marino); }
@media (max-width: 760px) { .contact__grid { grid-template-columns: 1fr; } }

/* ============================================================
   WHATSAPP FLOTANTE (micro-bounce completo en paso 5)
   ============================================================ */
.wa-float {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 140;
  width: 60px; height: 60px; border-radius: 50%; background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md);
  transition: transform .25s var(--ease);
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 32px; height: 32px; }
.wa-float[data-pending="true"]::after {
  content: "Nº pendiente"; position: absolute; right: 72px; white-space: nowrap;
  background: var(--roca); color: #fff; font-size: .72rem; padding: .25rem .55rem;
  border-radius: var(--r-sm); opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.wa-float[data-pending="true"]:hover::after { opacity: .92; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--roca); color: rgba(255,255,255,.8); padding: clamp(3rem, 6vw, 4.5rem) 0 1.5rem; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.2rem; margin-bottom: 2.5rem; }
@media (max-width: 980px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
.footer__brand img { height: 46px; margin-bottom: 1rem; }
.footer__brand p { font-size: .95rem; max-width: 36ch; }
.site-footer h3 { color: #fff; font-size: .95rem; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 1rem; }
.site-footer a:hover { color: #fff; }
.site-footer li { margin-bottom: .15rem; font-size: .95rem; }
.site-footer li a { display: inline-block; padding: .4rem 0; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.5rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-size: .85rem; color: rgba(255,255,255,.55);
}
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr; } }

/* ============================================================
   REVEAL ON SCROLL (IntersectionObserver añade .in-view)
   ============================================================ */
/* Solo se ocultan si hay JS (.js en <html>); sin JS, todo el contenido es visible. */
/* Reveal robusto: el contenido NUNCA se oculta con opacidad (si el observer no dispara
   —crawlers, print, render sin scroll— quedaba invisible). Solo animamos el desplazamiento. */
.js [data-reveal] { transform: translateY(24px); transition: transform .7s var(--ease); }
.js [data-reveal].in-view { transform: none; }

/* ============================================================
   RESPONSIVE — menú móvil
   ============================================================ */
@media (max-width: 880px) {
  .nav__toggle { display: block; }
  .nav__links {
    position: fixed; inset: 0 0 0 auto; width: min(320px, 82vw);
    background: var(--marino); flex-direction: column; align-items: flex-start;
    padding: 6rem 2rem 2rem; gap: 1.4rem;
    transform: translateX(105%); transition: transform .35s var(--ease);
    box-shadow: var(--shadow-lg);
  }
  .nav__links.open { transform: none; }
  .nav__links a:not(.btn) { color: #fff; font-size: 1.2rem; padding: .55rem 0; }
  .site-header.is-scrolled .nav__links a:not(.btn) { color: #fff; }
  .nav__links .btn { width: 100%; margin-top: .5rem; }
}

/* Scrim del menú móvil: oscurece el fondo y cierra al tocar fuera (lo crea main.js).
   z-index 145 = bajo el header/drawer (150) y sobre el WhatsApp flotante (140). */
.nav-scrim { position: fixed; inset: 0; z-index: 145; background: rgba(10,26,51,.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
body.nav-open { overflow: hidden; }

/* ============================================================
   PREFERS-REDUCED-MOTION — sin animaciones, todo visible
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ============================================================
   HOME — más vida (paso 2): hero carrusel, proceso al scroll,
   carrusel de servicios, marquees, retos interactivos, lightbox.
   ============================================================ */

/* ---------- HERO: carrusel de fondo + ken-burns + overlay marino ---------- */
.hero__slides { position: absolute; inset: 0; z-index: -3; }
.hero__slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.4s var(--ease);
}
.hero__slide.is-active { opacity: 1; will-change: opacity, transform; }
.js .hero__slide.is-active { animation: heroKen 9s var(--ease) both; }
@keyframes heroKen { from { transform: scale(1); } to { transform: scale(1.09); } }
/* Overlay marino: el texto blanco siempre legible sobre cualquiera de los 4 heroes */
.hero__overlay {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(95deg, rgba(11,30,58,.94) 0%, rgba(13,40,77,.82) 42%, rgba(10,26,51,.55) 100%),
    linear-gradient(0deg, rgba(10,26,51,.45), transparent 55%);
}

/* ---------- PROCESO: línea que se dibuja al scroll + nodos hex ---------- */
.proceso__track { position: relative; margin-top: clamp(1.5rem, 4vw, 2.6rem); --proceso-p: 1; }
.proceso__svg { position: absolute; top: 26px; left: 0; width: 100%; height: 8px; overflow: visible; z-index: 0; }
.proceso__rail { stroke: var(--border); stroke-width: 3; }
.proceso__draw {
  stroke: var(--azul); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 920; stroke-dashoffset: calc(920 * (1 - var(--proceso-p)));
  transition: stroke-dashoffset 1.4s var(--ease);
}
.proceso__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; position: relative; z-index: 1; }
.proceso__step { position: relative; text-align: center; }
.proceso__hex {
  display: grid; place-items: center; width: 54px; height: 60px; margin: 0 auto .9rem;
  background: #e7edf1; color: var(--acero); font: 700 1.35rem var(--font-display);
  -webkit-clip-path: var(--hex); clip-path: var(--hex);
  transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.proceso__step.is-active .proceso__hex { background: var(--azul); color: #fff; transform: scale(1.08); }
.proceso__step h3 { color: var(--marino); font-size: 1.1rem; margin-bottom: .3rem; }
.proceso__step p { color: var(--text-soft); font-size: .95rem; }
@media (max-width: 640px) {
  .proceso__svg { display: none; }
  .proceso__steps { grid-template-columns: 1fr; gap: 0; padding-left: 4.4rem; }
  .proceso__steps::before { content: ""; position: absolute; left: 27px; top: 30px; bottom: 30px; width: 3px; background: var(--border); }
  .proceso__steps::after { content: ""; position: absolute; left: 27px; top: 30px; width: 3px; height: calc(var(--proceso-p) * (100% - 60px)); background: var(--azul); transition: height 1.4s var(--ease); }
  .proceso__step { text-align: left; padding: .9rem 0; min-height: 70px; }
  .proceso__hex { position: absolute; left: -4.4rem; top: .7rem; margin: 0; }
}

/* (Carrusel de servicios retirado — la home usa .svc-grid estático.) */

/* ---------- MARQUEE de "Nuestro trabajo" (las industrias ahora son chips estáticos) ---------- */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.industrias { background: var(--marino); color: #fff; padding: clamp(1.8rem, 4vw, 2.6rem) 0; text-align: center; }
.industrias__label { font: 600 .8rem var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 1.1rem; }
.ind-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.ind-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.05rem; border-radius: var(--r-pill); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; font: 600 1rem var(--font-display); }
.ind-chip .licon { width: 1.2rem; height: 1.2rem; color: var(--energia); }

.work-marquee { overflow: hidden; padding-top: .5rem; }
.marquee__track--img { display: inline-flex; gap: .9rem; will-change: transform; animation: marquee 48s linear infinite; }
.work-marquee:hover .marquee__track--img,
.work-marquee:focus-within .marquee__track--img { animation-play-state: paused; }
.work-tile { flex: 0 0 auto; width: clamp(210px, 26vw, 300px); aspect-ratio: 4 / 3; border: 0; padding: 0; margin: 0; border-radius: var(--r-md); overflow: hidden; cursor: default; background: var(--marino); }
.js .work-tile { cursor: zoom-in; }
.work-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s var(--ease); }
.work-tile:hover img, .work-tile:focus-visible img { transform: scale(1.06); }
.demo-note { text-align: center; font-size: .85rem; color: #9a5a00; margin-top: 1.4rem; }

/* ---------- RETOS interactivos (cada uno -> servicio que lo resuelve) ---------- */
.reto { justify-content: space-between; flex-wrap: wrap; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.reto__txt { flex: 1; }
.reto:hover, .reto:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--azul); }
.reto__fix { font: 700 .82rem var(--font-display); color: var(--azul); white-space: nowrap; opacity: .72; transition: opacity .2s var(--ease); }
.reto:hover .reto__fix, .reto:focus-visible .reto__fix { opacity: 1; }

/* ---------- LIGHTBOX (dialog nativo) ---------- */
.lightbox { border: 0; background: transparent; padding: 0; max-width: 96vw; max-height: 96vh; overflow: visible; }
.lightbox::backdrop { background: rgba(10,26,51,.92); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lightbox img { max-width: 94vw; max-height: 86vh; border-radius: var(--r-md); display: block; margin: 0 auto; box-shadow: var(--shadow-lg); }
.lightbox__cap { color: #fff; text-align: center; margin-top: .7rem; font-family: var(--font-display); }
.lightbox__close { position: fixed; top: 1rem; right: 1.2rem; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 1.5rem; cursor: pointer; }
.lightbox__close:hover { background: rgba(255,255,255,.3); }
/* Área de clic cuadrada: el botón redondo (border-radius:50%) recorta su zona clicable,
   así que los clics en las esquinas se cuelan a la imagen/fondo y la X "no cierra".
   El ::before cuadrado sin recorte captura toda la caja, incluidas las esquinas. */
.lightbox__close::before { content: ""; position: absolute; inset: -4px; border-radius: 0; }

/* ---------- Parallax sutil (capas decorativas sobredimensionadas para no dejar borde) ---------- */
[data-parallax] { will-change: transform; }
.hero__grid[data-parallax], .banner-mid__grid[data-parallax] { top: -12%; bottom: -12%; height: auto; }

/* ---------- Ajustes reduced-motion específicos de la home ---------- */
@media (prefers-reduced-motion: reduce) {
  .marquee__track--img { animation: none !important; transform: none !important; }
  .work-marquee { overflow-x: auto; }
  .hero__slide { transition: none !important; }
  .proceso__track { --proceso-p: 1 !important; }
}

/* ============================================================
   ICONOGRAFÍA (Lucide, SVG inline, sin runtime). Set consistente:
   line icons 24×24, stroke=currentColor. Un ícono distintivo por item.
   ============================================================ */
.licon { width: 1.5em; height: 1.5em; flex: 0 0 auto; display: inline-block; vertical-align: middle; stroke: currentColor; }
/* Badge cuadrado tintado (duotone): fondo azul claro + ícono azul */
.ibadge { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; flex: 0 0 auto; border-radius: var(--r-md); background: rgba(0, 96, 241, .10); color: var(--azul); }
.ibadge .licon { width: 1.45rem; height: 1.45rem; }
/* Variante hexagonal (motivo de marca): hex azul lleno + ícono blanco */
.ibadge--hex { border-radius: 0; -webkit-clip-path: var(--hex); clip-path: var(--hex); width: 2.6rem; height: 2.9rem; background: var(--azul); color: #fff; }
/* Variante teal (acento secundario) para diferenciar grupos cuando convenga */
.ibadge--teal { background: rgba(10, 95, 99, .12); color: var(--fuerza); }
/* Ícono inline dentro de chips/etiquetas (sin badge), hereda el color del chip */
.chip .licon, .tag .licon { width: 1.15em; height: 1.15em; margin-right: .15rem; }

/* ============================================================
   MAPA DE COBERTURA (SVG inline) — usado en naves y en la home
   ============================================================ */
.covmap { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.4rem, 4vw, 3rem); align-items: center; }
.covmap__svg { width: 100%; height: auto; max-height: 460px; display: block; }
.covmap__mx path { fill: rgba(255,255,255,.10); stroke: rgba(255,255,255,.30); stroke-width: 2.5; }
.covpin { fill: var(--energia); stroke: var(--marino); stroke-width: 3; cursor: pointer; transition: fill .2s var(--ease); }
.covpin--base { fill: var(--naranja); transform-box: fill-box; transform-origin: center; animation: pulseDot 2.4s var(--ease) infinite; }
.covpin.is-hot { fill: #fff; }
.covmap__legend { display: flex; flex-wrap: wrap; gap: .5rem; }
.covzone { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; min-height: 44px; border-radius: var(--r-pill); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); color: #fff; font: 600 .95rem var(--font-display); cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease); }
.covzone:hover, .covzone:focus-visible, .covzone.is-hot { background: rgba(255,184,1,.16); border-color: var(--energia); }
.covzone__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--energia); flex: 0 0 auto; }
.covzone--base { border-color: rgba(249,115,22,.5); }
.covzone--base .covzone__dot { background: var(--naranja); }
@keyframes pulseDot { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: .75; } }
@media (max-width: 760px) { .covmap { grid-template-columns: 1fr; } .covmap__svg { max-height: 360px; } }

/* ============================================================
   SERVICIOS — paneles verticales de ancho completo (home)
   ============================================================ */
.eyebrow__hi { color: var(--azul); font-weight: 700; } /* naranja reprobaba AA (2.8:1) en texto pequeño */
.svc-panels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.svc-panel { position: relative; min-height: clamp(360px, 58vh, 600px); display: flex; align-items: flex-end; overflow: hidden; color: #fff; text-decoration: none; }
.svc-panel__img { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: var(--marino); transition: transform .6s var(--ease); }
.svc-panel:hover .svc-panel__img, .svc-panel:focus-visible .svc-panel__img { transform: scale(1.07); }
.svc-panel__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,22,46,.94) 6%, rgba(8,22,46,.55) 45%, rgba(8,22,46,.12) 100%); transition: background .3s var(--ease); }
.svc-panel:hover .svc-panel__shade, .svc-panel:focus-visible .svc-panel__shade { background: linear-gradient(0deg, rgba(8,22,46,.9) 6%, rgba(8,22,46,.42) 45%, rgba(8,22,46,0) 100%); }
.svc-panel__body { position: relative; padding: 1.8rem 1.5rem 2rem; width: 100%; }
.svc-panel__ico { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--r-md); background: rgba(255,255,255,.16); margin-bottom: .9rem; }
.svc-panel__ico .licon { width: 1.6rem; height: 1.6rem; color: #fff; }
.svc-panel__title { display: block; font: 700 1.35rem var(--font-display); text-transform: uppercase; letter-spacing: .02em; line-height: 1.12; }
.svc-panel__desc { display: block; color: rgba(255,255,255,.86); font-size: .95rem; margin-top: .5rem; }
.svc-panel__more { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1rem; font: 700 .95rem var(--font-display); color: var(--energia); transition: gap .2s var(--ease); }
.svc-panel:hover .svc-panel__more, .svc-panel:focus-visible .svc-panel__more { gap: .65rem; }
@media (max-width: 900px) { .svc-panels { grid-template-columns: 1fr 1fr; } .svc-panel { min-height: 46vh; } }
@media (max-width: 560px) { .svc-panels { grid-template-columns: 1fr; } .svc-panel { min-height: 300px; } }

/* ---------- Nuestros clientes (placeholder · bloqueante hasta autorización) ---------- */
.clients__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; align-items: center; }
.client { flex: 0 0 calc(14.28% - .9rem); aspect-ratio: 5 / 2; display: grid; place-items: center; background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: .7rem 1rem; }
.client img { max-width: 100%; max-height: 100%; object-fit: contain; opacity: .58; filter: grayscale(1); transition: opacity .25s var(--ease), filter .25s var(--ease), transform .25s var(--ease); }
.client:hover img { opacity: 1; filter: grayscale(0); transform: scale(1.04); }
@media (max-width: 760px) { .client { flex-basis: calc(33.333% - .7rem); } }
@media (max-width: 420px) { .client { flex-basis: calc(50% - .5rem); } }

/* ============================================================
   FONDOS DINÁMICOS — rompen el blanco/gris plano sin saturar.
   --tex  = textura sutil ESTÁTICA (mesh de marca + retícula tenue).
   --spot = glow que SIGUE AL CURSOR (home.js fija --mx/--my).
   Pintan en pseudo-elementos a z-index negativo dentro de un
   stacking context propio (isolation): nunca tapan el contenido.
   ============================================================ */
.section--tex, .section--spot { position: relative; isolation: isolate; }
.section--tex::before,
.section--spot::before,
.section--spot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}

/* TEX estática: dos glows de marca + retícula tenue, desvanecidos en los bordes */
.section--tex::before {
  z-index: -1;
  background-image:
    radial-gradient(38rem 26rem at 14% -8%, rgba(0,96,241,.06), transparent 60%),
    radial-gradient(34rem 24rem at 100% 6%, rgba(249,115,22,.05), transparent 58%),
    linear-gradient(rgba(16,52,97,.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,52,97,.030) 1px, transparent 1px);
  background-size: auto, auto, 46px 46px, 46px 46px;
  -webkit-mask-image: radial-gradient(140% 100% at 50% 0%, #000 56%, transparent 100%);
          mask-image: radial-gradient(140% 100% at 50% 0%, #000 56%, transparent 100%);
}

/* SPOT: glow que sigue el cursor (home.js -> --mx/--my); default arriba-centro.
   Color por variables -> .section--spot = AZUL (marca), .section--spot--warm = NARANJA.
   Se alternan sección a sección. Sin JS / táctil / reduced-motion: glow estático sutil. */
.section--spot { --spot-1: rgba(0,96,241,.12); --spot-2: rgba(249,115,22,.05); }
.section--spot--warm { --spot-1: rgba(249,115,22,.12); --spot-2: rgba(0,96,241,.06); }
.section--spot::before {
  z-index: -1;
  background:
    radial-gradient(24rem 24rem at var(--mx, 50%) var(--my, 16%), var(--spot-1), transparent 62%),
    radial-gradient(28rem 22rem at 92% 110%, var(--spot-2), transparent 60%);
}
/* Retícula base tenue (estática, desvanecida) por debajo del glow del cursor */
.section--spot::after {
  z-index: -2;
  background-image:
    linear-gradient(rgba(16,52,97,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,52,97,.028) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(140% 100% at 50% 0%, #000 54%, transparent 100%);
          mask-image: radial-gradient(140% 100% at 50% 0%, #000 54%, transparent 100%);
}

/* ============================================================
   LOTE S — VIDA Y DINAMISMO. CSS puro (contadores/cue/settle apoyados en JS).
   Reduced-motion-safe. No toca tokens.css.
   ============================================================ */

/* #6 Elevación de marca: sombra de doble nivel + glow azul al hover */
:root { --elev-rest: 0 1px 2px rgba(16,52,97,.10), 0 8px 24px rgba(16,52,97,.10); --elev-hover: 0 2px 4px rgba(16,52,97,.12), 0 18px 40px rgba(16,52,97,.18), 0 0 0 1px rgba(0,96,241,.14); }
.svc-card, .caso-card, .reto { box-shadow: var(--elev-rest); }
.svc-card:hover, .caso-card:hover, .reto:hover, .reto:focus-visible { box-shadow: var(--elev-hover); }

/* #2 Indicador de scroll en el hero (lo inyecta main.js) */
.hero__cue { position: absolute; left: 50%; bottom: clamp(1rem, 3vh, 2rem); transform: translateX(-50%); width: 24px; height: 44px; display: grid; justify-items: center; z-index: 3; }
.hero__cue-line { position: relative; width: 1px; height: 40px; background: linear-gradient(transparent, rgba(255,255,255,.55)); }
.hero__cue-line::after { content: ""; position: absolute; left: 50%; top: 0; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--energia); box-shadow: 0 0 8px rgba(255,185,1,.6); animation: cueDrop 2s var(--ease) 1s infinite; }
@keyframes cueDrop { 0% { transform: translateY(-8px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(34px); opacity: 0; } }

/* #3 Contadores: dígitos de ancho fijo + pulso de aterrizaje (.count-done lo pone el JS) */
.trust__item .v, .fact .n { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
@media (prefers-reduced-motion: no-preference) {
  .trust__item .v.count-done, .fact .n.count-done { animation: countPop .45s var(--ease); display: inline-block; }
}
@keyframes countPop { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* #4 Acento del título del hero: palabra en --energia con subrayado que se traza */
.hero__title .hl, .lhero__title .hl { color: var(--energia); position: relative; }
.hero__title .hl::after, .lhero__title .hl::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .09em; background: var(--energia); transform: scaleX(0); transform-origin: left; animation: hlDraw .6s var(--ease) .95s forwards; }
@keyframes hlDraw { to { transform: scaleX(1); } }

/* #5 Subrayado de marca que crece en enlaces (coherente con el wipe del nav) */
.svc-card__link, .svc-panel__more, .site-footer a { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .3s var(--ease), color .2s var(--ease), gap .2s var(--ease); }
.svc-card:hover .svc-card__link, .svc-card__link:focus-visible, .svc-panel:hover .svc-panel__more, .svc-panel__more:focus-visible, .site-footer a:hover, .site-footer a:focus-visible { background-size: 100% 2px; }

/* #7 Grano de cine sobre el overlay del hero (rompe el banding del degradado) */
.hero__overlay::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 130px; }

/* #8 Chips de industria: relleno azul que sube desde la base al hover */
.ind-chip { position: relative; overflow: hidden; isolation: isolate; transition: border-color .3s var(--ease); }
.ind-chip::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--azul); transform: translateY(101%); transition: transform .35s var(--ease); }
.ind-chip:hover { border-color: var(--azul); }
.ind-chip:hover::before { transform: translateY(0); }

/* #9 Header: hairline de marca al hacer scroll + micro-settle (una vez) */
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); background: linear-gradient(90deg, var(--azul), var(--naranja) 60%, transparent); }
.site-header.is-scrolled::after { transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) {
  .site-header.just-scrolled { animation: headerSettle .5s var(--ease); }
}
@keyframes headerSettle { 0% { transform: translateY(0); } 50% { transform: translateY(-2px); } 100% { transform: translateY(0); } }

/* Reduced-motion: estados finales estáticos */
@media (prefers-reduced-motion: reduce) {
  .hero__cue-line::after { animation: none; top: 50%; }
  .hero__title .hl::after, .lhero__title .hl::after { animation: none; transform: scaleX(1); }
}