/* ==========================================================================
   METROL — Layout de secciones + responsive
   ========================================================================== */

/* ---------- Hero home (cinematográfico) ---------- */
.hero{
  position:relative; min-height: 94vh; display:flex; align-items:center;
  background: linear-gradient(180deg, #fff 0%, var(--color-surface) 100%);
  color: var(--color-text); overflow:hidden; padding-top: var(--header-h);
}
.hero-inner{ position:relative; z-index:2; display:grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items:center; padding: 70px 24px 60px; }
.hero-copy{ position:relative; }
.hero-copy .eyebrow{ position:relative; }
.hero-copy p.lead{ font-size: 1.12rem; color: var(--color-muted); max-width: 520px; }
.hero-actions{ display:flex; gap: 14px; flex-wrap:wrap; margin: 30px 0 44px; }
.hero-stats{ display:flex; gap: 0; flex-wrap:wrap; border-top:1px solid var(--color-border); padding-top:24px; }
.hero-stats > div{ padding-right: 30px; margin-right:30px; border-right:1px solid var(--color-border); }
.hero-stats > div:last-child{ border-right:none; margin-right:0; padding-right:0; }
.hero-stats .stat-value{ color: var(--color-primary); font-size: clamp(1.7rem,2.6vw,2.3rem); }
.hero-stats .stat-label{ font-size:.74rem; color: var(--color-muted); text-transform:uppercase; letter-spacing:.08em; }

/* ---------- Hero split (centrado, con glow + buscador) ---------- */
.hero-split{
  min-height:auto; padding-bottom:0; display:block;
  background:
    radial-gradient(1200px 640px at 50% -8%, rgba(var(--color-accent-rgb),.10), transparent 62%),
    linear-gradient(180deg, #fff 0%, var(--color-surface) 100%);
}
/* Fotografía de fondo del hero (referencia: "scroll expansion hero" en
   video/código adjuntos, adaptada sin Framer Motion ni bloquear el scroll).
   Reutiliza una foto ya existente del proyecto (misma escena que el
   carrusel), a opacidad baja y con un lavado claro encima — sostiene el
   "fotografías protagonistas desde la primera pantalla" sin recolorear todo
   el texto del hero a blanco (que ya funciona en fondo claro, con buen
   contraste comprobado). Su opacidad la anima initHeroScrollExpansion() en
   JS, atada al mismo scroll que expande el marco — pointer-events:none
   porque es puramente decorativa, nunca debe interceptar clics (ese fue
   justo el bug real corregido en .hero-split-mockup-fade). Sin JavaScript
   se ve fija a su opacidad de reposo, ya declarada aquí en CSS puro. */
.hero-split-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  opacity:.42; transition:none;
}
.hero-split-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; }
/* Fase 7: el lavado ya no cubre casi toda la foto (antes iba de .55 a la
   superficie base en 88% de la altura) — ahora solo aclara la franja
   superior/inferior lo justo para que el header y el indicador de scroll
   sigan siendo legibles, dejando el resto de la fotografía visible. La
   legibilidad del título/buscador la resuelve .text-scrim, no este lavado
   general. */
.hero-split-bg::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(251,252,254,.5) 0%, transparent 18%, transparent 78%, rgba(251,252,254,.65) 100%);
}
.hero-split-glow{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; opacity:.4; }
.hero-split-beam{
  position:absolute; top:-360px; left:0; width:34rem; height:80rem;
  transform: rotate(-45deg); border-radius:999px;
}
.hero-split-beam-1{ background: radial-gradient(68.54% 68.72% at 55.02% 31.46%, rgba(27,59,140,.10) 0, rgba(27,59,140,.03) 50%, transparent 80%); }
.hero-split-beam-2{ width:14rem; left:5%; background: radial-gradient(50% 50% at 50% 50%, rgba(47,91,199,.09) 0, rgba(47,91,199,.02) 80%, transparent 100%); }
.hero-split-beam-3{ width:14rem; top:-360px; background: radial-gradient(50% 50% at 50% 50%, rgba(47,91,199,.06) 0, rgba(47,91,199,.02) 80%, transparent 100%); }
/* Fase 7: antes este velo (125%/125%) terminaba cubriendo casi todo el
   hero con el color de superficie plano, anulando la fotografía de fondo
   recién reforzada (.hero-split-bg) en toda la zona del título. Se redujo a
   una franja baja, solo para hacer una transición suave hacia la siguiente
   sección — ya no compite con la foto en el resto del hero. */
.hero-split-radial{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(70% 42% at 50% 100%, var(--color-surface) 0%, transparent 100%);
}
.hero-split-inner{
  position:relative; z-index:2; padding: 48px 24px 0; text-align:center;
}
.hero-split-copy{ max-width:840px; margin:0 auto; position:relative; }
/* Superficie de apoyo detrás de todo el bloque de texto (título + lead +
   buscador), independiente de la opacidad/estado de la fotografía de fondo
   — así el texto nunca depende de si la foto quedó más clara u oscura en
   ese punto exacto. Ver .text-scrim en global.css para el degradado. */
.hero-split-copy::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset: -20px -8vw -30px;
  background: radial-gradient(ellipse 60% 90% at 50% 40%, var(--color-background) 0%, rgba(251,252,254,.92) 45%, rgba(251,252,254,.6) 68%, transparent 86%);
}
.hero-split-badge{
  display:inline-flex; align-items:center; gap:14px; margin:0 auto;
  background: rgba(255,255,255,.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border:1px solid var(--color-border);
  border-radius:999px; padding:6px 6px 6px 18px; box-shadow: var(--shadow-sm);
  text-decoration:none; color: var(--color-text); font-size:.85rem; font-weight:600;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.hero-split-badge:hover{ background:#fff; border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.hero-split-badge-sep{ width:1px; height:16px; background: var(--color-border-strong); }
.hero-split-badge-icon{
  display:flex; align-items:center; justify-content:center; width:24px; height:24px;
  border-radius:50%; background: linear-gradient(155deg, var(--color-accent), var(--color-primary)); color:#fff; flex-shrink:0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
  transition: transform var(--transition);
}
.hero-split-badge:hover .hero-split-badge-icon{ transform: translateX(2px); }
.hero-split-title{
  margin: 32px auto 0; max-width: 880px; text-wrap: balance;
  font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height:1.05;
}
.hero-split-lead{
  margin: 26px auto 0; max-width: 620px; font-size:1.14rem; color: var(--color-muted);
}
/* Bug real: era "display:flex" en fila (por defecto), con el campo de
   búsqueda y su contenedor de resultados como dos hijos lado a lado. Con
   .site-search-results en "width:100%" (aunque esté vacío, sin resultados),
   ese segundo hijo seguía ocupando espacio horizontal a la derecha, y
   "justify-content:center" centraba el PAR completo — no el campo de
   búsqueda por sí solo — corriendo la barra visible hacia la izquierda del
   eje real del hero. Se corrige apilando en columna: cada hijo se centra
   horizontalmente por separado, que es el comportamiento que ya se buscaba
   (resultados debajo del campo, no al lado). */
.hero-split-copy .hero-search-wrap{ display:flex; flex-direction:column; align-items:center; margin: 40px auto 0; width:100%; }

.hero-split-mockup{ position:relative; margin: 56px -20px 0; padding: 0 8px; }
.hero-split-mockup-fade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(to bottom, transparent 35%, #fff 100%);
}
/* Envoltura de la expansión por scroll: reserva la altura máxima que el
   marco puede alcanzar (calculada en JS) para que crecer/encoger el marco
   nunca desplace el contenido de abajo — solo cambia cuánto de esta caja
   ocupa el marco, centrado. Sin JS, esta caja no tiene alto propio fijado
   (queda en auto) y el marco simplemente se muestra a su ancho normal. */
.hero-scroll-expand{
  display:flex; align-items:center; justify-content:center; width:100%;
}
.hero-split-mockup-frame{
  position:relative; max-width: 100%; width:100%; margin:0 auto; overflow:hidden;
  border-radius: var(--radius-lg); border:1px solid var(--color-border);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(var(--color-accent-rgb),.06), 0 40px 90px -30px rgba(var(--color-primary-rgb),.35);
  background:#fff; padding:14px;
  transition: width 120ms linear;
}
@media (prefers-reduced-motion: reduce){
  .hero-split-mockup-frame{ transition:none; }
}
.hero-split-mockup-frame img{ width:100%; height:auto; display:block; border-radius: calc(var(--radius-lg) - 8px); aspect-ratio: 15/8; object-fit:cover; transition: transform 900ms var(--ease-out-expo); }
.hero-split-mockup:hover .hero-split-mockup-frame img{ transform: scale(1.015); }

/* ---------- Carrusel del hero (dentro del mismo marco) ---------- */
/* Sin JS (o si initHeroCarousel falla), solo el <img> normal de la 1ª
   diapositiva es visible: no depende de JS para mostrar algo. */
.hero-carousel{
  position:relative; border-radius: calc(var(--radius-lg) - 8px); overflow:hidden;
  aspect-ratio: 16/9; background: var(--color-ink);
  touch-action: pan-y; /* permite el scroll vertical de la página; el swipe horizontal lo maneja JS */
}
.hero-carousel-slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition: opacity 500ms ease;
}
.hero-carousel-slide.is-active{ opacity:1; visibility:visible; z-index:1; }
.hero-carousel-slide img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; display:block; }
@media (prefers-reduced-motion: reduce){
  .hero-carousel-slide{ transition:none; }
}

.hero-carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
  background: rgba(10,21,48,.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color:#fff; display:none; align-items:center; justify-content:center; cursor:pointer;
  transition: background var(--transition), transform var(--transition), border-color var(--transition);
}
.hero-carousel-arrow:hover{ background: rgba(10,21,48,.66); border-color: rgba(255,255,255,.5); }
.hero-carousel-arrow:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.hero-carousel-arrow-prev{ left:12px; }
.hero-carousel-arrow-next{ right:12px; }
.hero-carousel.is-ready .hero-carousel-arrow{ display:flex; }
.hero-carousel-arrow:disabled, .hero-carousel-playpause:disabled, .hero-carousel-dot:disabled{
  opacity:.35; cursor:default; pointer-events:none;
}

.hero-carousel-bottom{
  position:absolute; left:0; right:0; bottom:10px; z-index:3;
  display:none; align-items:center; justify-content:flex-end; gap:12px; padding:0 14px;
}
.hero-carousel.is-ready .hero-carousel-bottom{ display:flex; }
.hero-carousel-dots{ display:flex; align-items:center; gap:8px; }
.hero-carousel-dot{
  width:9px; height:9px; padding:0; border-radius:50%; border:1px solid rgba(255,255,255,.6);
  background: rgba(255,255,255,.28); cursor:pointer; transition: background var(--transition), transform var(--transition);
}
.hero-carousel-dot.is-active{ background:#fff; transform: scale(1.15); }
.hero-carousel-dot:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.hero-carousel-playpause{
  width:32px; height:32px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
  background: rgba(10,21,48,.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition: background var(--transition), border-color var(--transition);
}
.hero-carousel-playpause:hover{ background: rgba(10,21,48,.66); border-color: rgba(255,255,255,.5); }
.hero-carousel-playpause:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.hero-carousel-playpause svg{ width:14px; height:14px; }
.hero-carousel-playpause .icon-play{ display:none; }
.hero-carousel-playpause[aria-pressed="true"] .icon-pause{ display:none; }
.hero-carousel-playpause[aria-pressed="true"] .icon-play{ display:block; }

@media (max-width: 640px){
  .hero-carousel-arrow{ width:32px; height:32px; }
  .hero-carousel-bottom{ bottom:8px; }
}

/* Estado estático cuando ninguna diapositiva pudo cargar: marco visible,
   sin fotografía ni ícono de imagen rota del navegador, con un mensaje
   legible en vez de un fundido a medias. */
.hero-carousel-empty-msg{
  display:none; position:absolute; inset:0; z-index:2;
  align-items:center; justify-content:center; text-align:center; padding:24px;
  color: rgba(255,255,255,.85); font-size:.95rem;
  background: linear-gradient(155deg, var(--color-primary), var(--color-ink));
}
.hero-carousel--empty .hero-carousel-empty-msg{ display:flex; }

.hero-split-trust{
  position:absolute; z-index:2; left: 6%; bottom: 14%;
  display:flex; align-items:center; gap:14px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border:1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 14px 20px; box-shadow: var(--shadow-lg);
}
.hero-split-trust strong{ font-family: var(--font-display); font-size:1.5rem; line-height:1; display:block; }
.hero-split-trust span{ font-size:.72rem; color: var(--color-muted); text-transform:uppercase; letter-spacing:.06em; }

@media (max-width: 720px){
  .hero-split-title{ font-size: clamp(2rem, 8vw, 2.8rem); }
  .hero-split-trust{ display:none; }
}

.hero-visual{ position:relative; }
.hero-visual.hero-search-wrap{ display:flex; align-items:center; justify-content:center; min-height:220px; }
.hero-visual-frame{
  border-radius: var(--radius-lg); overflow:hidden; border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg); position:relative; aspect-ratio: 4/5;
}
.hero-visual-frame::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(200deg, rgba(15,31,69,.28), transparent 55%);
  mix-blend-mode:multiply; pointer-events:none;
}
.hero-visual-frame img{ width:100%; height:100%; object-fit:cover; transform: scale(1.02); }
.hero-visual::before{
  content:""; position:absolute; top:-18px; right:-18px; bottom:18px; left:18px;
  border:1px solid rgba(var(--color-accent-rgb),.3); border-radius: var(--radius-lg); z-index:-1;
}
.border-beam-search{
  position: relative;
  width: 100%;
  max-width: 490px;
  height: 68px;
  border-radius: 64px;
  overflow: hidden;
}
.border-beam-search{ box-shadow: var(--shadow-md); border-radius:64px; transition: box-shadow var(--transition); }
.border-beam-search:focus-within{ box-shadow: var(--shadow-lg); }
.border-beam-search__field{
  position: absolute;
  inset: 2px;
  border-radius: 62px;
  background: linear-gradient(175deg, var(--color-ink-2) 0%, var(--color-ink) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 0 50px 0 rgba(255,255,255,.02);
  display: flex;
  align-items: center;
  padding: 0 26px;
  gap: 14px;
  z-index: 1;
}
.border-beam-search__icon{ opacity:.55; color:#8FB0FF; flex-shrink:0; width:22px; height:22px; }
.border-beam-search__input{
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-family: var(--font-body);
  font-size: 17px;
}
.border-beam-search__input::placeholder{ color:#7C89A8; }

.border-beam-search__beam{
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
.border-beam-search__beam::before{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width: 200%; height: 500%;
  transform-origin: 0 0;
  animation: border-beam-rotate 5.5s linear infinite;
  background: conic-gradient(from 0deg, transparent 0%, rgba(var(--color-accent-rgb),.9) 8%, rgba(143,176,255,.9) 16%, rgba(var(--color-primary-rgb),.9) 24%, transparent 40%, transparent 100%);
}
@keyframes border-beam-rotate{
  from{ transform: rotate(0deg) translate(-50%,-50%); }
  to{ transform: rotate(360deg) translate(-50%,-50%); }
}
@media (prefers-reduced-motion: reduce){
  .border-beam-search__beam::before{ animation: none; }
}

/* Resultados del buscador local del inicio, debajo del campo de búsqueda */
.site-search-results{ width:100%; max-width:490px; margin-top:12px; }
.site-search-results.has-results{
  background: linear-gradient(175deg, var(--color-ink-2) 0%, var(--color-ink) 100%);
  border-radius: 20px;
  box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(255,255,255,.08);
  padding: 10px;
}
.site-search-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.site-search-result{
  display:flex; flex-direction:column; gap:2px; padding:10px 14px; border-radius:14px;
  text-decoration:none; color:#fff; transition: background var(--transition);
}
.site-search-result:hover, .site-search-result:focus-visible{ background: rgba(255,255,255,.08); }
.site-search-result-title{ font-weight:700; font-size:.95rem; color:#fff; }
.site-search-result-desc{ font-size:.82rem; color:#AEB8D4; }
.site-search-empty{ padding:14px; display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.site-search-empty p{ color:#D4D9EC; font-size:.9rem; margin:0; }

.hero-badge{
  position:absolute; bottom:-22px; left:-22px; background:#fff;
  border-radius: var(--radius-md); padding: 16px 20px; box-shadow: var(--shadow-lg);
  display:flex; align-items:center; gap:12px; max-width:230px; border:1px solid var(--color-border);
}
.hero-badge strong{ font-family: var(--font-display); font-size:1.4rem; color: var(--color-primary); display:block; }
.hero-badge span{ font-size:.75rem; color: var(--color-muted); }

.hero-panel{
  position:absolute; top:36px; right:-14px; z-index:3;
  display:flex; flex-direction:column; gap:2px;
  font-family: var(--font-mono); font-size:.72rem; letter-spacing:.06em; color: var(--color-muted);
  text-transform:uppercase;
}
.hero-panel span{ display:flex; align-items:center; gap:8px; }
.hero-panel span::before{ content:""; width:5px; height:5px; border-radius:50%; background: var(--color-accent); }

.scroll-indicator{ position:absolute; bottom: 28px; left:50%; transform: translateX(-50%); z-index:2; }

@media (max-width: 980px){
  .hero{ min-height: auto; padding-bottom: 60px; }
  .hero-inner{ grid-template-columns: 1fr; padding-top: 40px; }
  .hero-visual{ order:-1; max-width: 380px; margin: 0 auto; }
  .hero-badge{ display:none; }
  .hero-panel{ display:none; }
  .hero-stats{ gap:22px; }
  .hero-stats > div{ padding-right:0; margin-right:0; border-right:none; }
}

/* ---------- Sectores ---------- */
.sectors-strip{
  background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
  padding: 26px 0; overflow:hidden; position:relative;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.sectors-track{
  display:flex; gap: 50px; align-items:center; white-space:nowrap; width:max-content;
  animation: sectors-scroll 32s linear infinite;
}
.sectors-strip:hover .sectors-track{ animation-play-state: paused; }
.sectors-track span{ color: var(--color-muted); font-family: var(--font-display); font-weight:600; font-size:.95rem; letter-spacing:.03em; }
.sectors-track span:nth-child(odd){ color: var(--color-primary); opacity:.7; }
@keyframes sectors-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .sectors-track{ animation:none; } }

/* ---------- Marcas asociadas ---------- */
.brands-strip{
  background: var(--color-background); padding: 34px 0 40px;
}
.brands-strip-label{
  text-align:center; color: var(--color-muted); font-family: var(--font-display); font-weight:600;
  font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; margin:0 0 20px;
}
.brands-track-wrap{
  overflow:hidden; position:relative;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.brands-track{
  display:flex; gap: 64px; align-items:center; width:max-content;
  animation: brands-scroll 14s linear infinite;
}
.brands-track-wrap:hover .brands-track{ animation-play-state: paused; }
.brands-logo{ display:flex; align-items:center; flex-shrink:0; }
.brands-logo img{
  height: 56px; width:auto; object-fit:contain; filter: grayscale(1) opacity(.55);
  transition: filter 220ms var(--ease-out-expo);
}
.brands-logo:hover img{ filter:none; }
@keyframes brands-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .brands-track{ animation:none; flex-wrap:wrap; justify-content:center; } }
@media (max-width:640px){ .brands-logo img{ height:40px; } .brands-track{ gap:40px; } }

/* ---------- Compromiso (home): banda con acento de marcas de medición en el
   borde, para que esta franja de texto corto no se sienta un espacio vacío
   sin intención entre "Beneficios" y "FAQ". Reutiliza .hero-scale-marks (ya
   existente para el hero) en vez de crear un adorno nuevo. ---------- */
.commitment-band{
  position:relative; overflow:hidden;
  border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border);
  background: var(--color-surface);
}
.commitment-band-inner{ max-width:680px; margin:0 auto; text-align:center; padding-left:34px; }
.commitment-band .hero-scale-marks{ left:0; opacity:.35; }
@media (max-width:640px){ .commitment-band-inner{ padding-left:0; } .commitment-band .hero-scale-marks{ display:none; } }

/* ---------- Presentación / Nosotros (home): editorial, inspirado en "Cast
   and Render" de MotionSites.ai. Formas de fondo suaves (sin la textura tipo
   arcilla oscura del original: aquí en azules muy claros, sobre el fondo
   claro de Metrol) + tipografía grande y centrada + los tres diferenciadores
   como bloque editorial con divisores, en vez de una cuadrícula de viñetas
   con check. El fondo es estático (sin animación continua): el movimiento de
   esta sección vive en el revelado por líneas del título (data-title-lines,
   ya existente en el sitio) y en el parallax sutil que sigue al cursor
   (initPresentationParallax(), solo en escritorio con mouse, se detiene solo
   porque reacciona a mousemove en vez de correr con un timer). ---------- */
.presentation-editorial{ position:relative; overflow:hidden; }
.presentation-editorial-bg{
  position:absolute; inset:-40px; z-index:0; pointer-events:none;
  background:
    radial-gradient(620px 420px at 10% 10%, rgba(var(--color-accent-rgb),.10), transparent 65%),
    radial-gradient(680px 460px at 92% 90%, rgba(var(--color-primary-rgb),.09), transparent 65%);
  transition: transform 320ms var(--ease-out-expo);
}
.presentation-editorial-bg::before{
  content:""; position:absolute; inset:0;
  background-image: linear-gradient(rgba(27,59,140,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(27,59,140,.05) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image: radial-gradient(ellipse at 50% 42%, #000 15%, transparent 68%);
}
.presentation-editorial > .container{ position:relative; z-index:1; }
/* Fase 7: reemplaza el bloque centrado por una composición asimétrica de
   dos columnas desiguales — texto a la izquierda, los tres diferenciadores
   como una columna vertical con reglas divisorias a la derecha, en vez de
   apilados debajo a todo el ancho. */
.presentation-editorial-grid{
  display:grid; grid-template-columns: 1.3fr .9fr; gap: clamp(32px,5vw,72px); align-items:start;
}
.presentation-editorial-inner{ max-width:560px; text-align:left; }
.presentation-editorial-inner h2{ font-size: clamp(2.1rem, 3.4vw, 2.9rem); margin-top:14px; letter-spacing:-.01em; }
.presentation-editorial-inner p{ color: var(--color-muted); font-size:1.02rem; }
.presentation-editorial-inner p + p{ margin-top:10px; }

.presentation-values{
  list-style:none; margin: 8px 0 0; padding: 26px 0 0; border-top:1px solid var(--color-border);
  display:flex; flex-direction:column;
}
.presentation-values li{ padding: 22px 0; border-bottom:1px solid var(--color-border); display:flex; gap:18px; align-items:flex-start; }
.presentation-values li:last-child{ border-bottom:none; padding-bottom:0; }
.presentation-values-num{
  display:block; font-family: var(--font-display); font-weight:800; font-size:1.4rem;
  color: var(--hero-accent); letter-spacing:0; flex-shrink:0; opacity:.5;
}
.presentation-values li p{ margin:0; font-size:1rem; color: var(--color-text); line-height:1.55; }
@media (max-width:900px){
  .presentation-editorial-grid{ grid-template-columns:1fr; }
  .presentation-editorial-inner{ max-width:none; }
}

/* ---------- Presentación (grilla de diferenciadores usada en otras páginas,
   sin tocar) ---------- */
/* Fase 7: relación asimétrica (antes 1fr/1fr) + marco editorial en la foto
   (borde fino + esquina acentuada), reutilizado tal cual en todas las
   páginas de servicio — un solo cambio compartido en vez de 10 rediseños
   distintos. */
.split{ display:grid; grid-template-columns: 1.08fr .92fr; gap: clamp(32px,4vw,60px); align-items:center; }
.split-media{
  border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; position:relative;
  border: 1px solid var(--color-border);
}
.split-media::before{
  content:""; position:absolute; top:-10px; left:-10px; width:56px; height:56px;
  border-top:2px solid var(--color-accent); border-left:2px solid var(--color-accent);
  z-index:2; pointer-events:none;
}
.split-media img{ width:100%; height:100%; object-fit:cover; }
.diff-list li{ display:flex; gap:12px; margin-bottom:14px; align-items:flex-start; color: var(--color-text); font-size:.95rem; }
.diff-list li::before{ content:"✓"; color: var(--color-primary); font-weight:700; flex-shrink:0; }
/* Bug real: ".diff-list li" (clase+etiqueta) tiene más especificidad que el
   [hidden] nativo del navegador (clase sola) y lo gana por cascada — la fila
   de correo (oculta por defecto en contacto/index.html mientras
   companyData.email siga siendo un valor "PENDIENTE_...") se veía vacía en
   vez de ocultarse. Mismo patrón de bug ya corregido antes en el orbital y
   el carrusel; se corrige igual, con un override explícito. */
.diff-list li[hidden]{ display:none; }
@media (max-width: 900px){ .split{ grid-template-columns: 1fr; } .split-media{ order:-1; } }

/* ---------- Proceso ---------- */
.process-track{ display:grid; grid-template-columns: repeat(6,1fr); gap: 16px; margin-top: 20px; }
/* Cuando initOrbitalProcess() lo reemplaza con éxito por la versión orbital,
   marca este track con [hidden]; sin esta regla, el "display:grid" de
   arriba (misma especificidad que [hidden] del navegador) ganaría y el
   track original seguiría visible además del orbital. */
.process-track[hidden]{ display:none; }
.process-step{ display:flex; flex-direction:column; align-items:center; text-align:center; gap: 14px; }
.process-step h4{ font-size:.92rem; margin:0; }
.process-step p{ font-size:.8rem; margin:0; }
@media (max-width: 900px){ .process-track{ grid-template-columns: repeat(3,1fr); row-gap:36px; } .process-track::before{ display:none; } }
@media (max-width: 560px){ .process-track{ grid-template-columns: 1fr; } }

/* ---------- Beneficios ---------- */
/* Fila editorial de beneficios: reemplaza la cuadrícula de tarjetas por
   columnas con borde superior y número — mismo contenido, composición
   distinta a la de "servicios complementarios" (que sí usa tarjetas). */
.benefits-row{ display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(20px,3vw,40px); }
.benefit-row-item{ border-top:2px solid var(--color-secondary-dark); padding-top:18px; }
.benefit-row-num{ display:block; font-family:var(--font-display); font-weight:800; font-size:.85rem; color:var(--color-primary); letter-spacing:.08em; margin-bottom:10px; }
.benefit-row-item h4{ margin-bottom:8px; font-size:1.05rem; }
.benefit-row-item p{ font-size:.92rem; margin:0; }
@media (max-width:900px){ .benefits-row{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .benefits-row{ grid-template-columns: 1fr; } }

/* Fase 7: reemplaza las tarjetas con sombra por una franja con acento
   lateral — usado en páginas de servicio ("Por qué calibrar con Metrol") y
   en Nosotros ("Valores"). Composición distinta a .benefits-row (home) y a
   .service-card (tarjetas con foto), para no repetir el mismo bloque en
   todo el sitio. */
.benefits-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 28px 40px; }
.benefit-item{
  position:relative; padding: 4px 0 4px 22px; border-left:3px solid var(--color-border);
  transition: border-color var(--transition);
}
.benefit-item:hover{ border-left-color: var(--color-primary); }
.benefit-item .icon{ width:38px; height:38px; border-radius:10px; background: var(--hero-accent-soft); display:flex; align-items:center; justify-content:center; margin-bottom:14px; color: var(--hero-accent); font-size:.95rem; }
.benefit-item h4{ font-size:1.08rem; }
@media (max-width: 980px){ .benefits-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .benefits-grid{ grid-template-columns: 1fr; } }

/* ---------- CTA final ---------- */
.cta-final{
  position:relative; border-radius: var(--radius-lg); overflow:hidden;
  background:
    radial-gradient(700px 380px at 50% -20%, rgba(47,91,199,.22), transparent 60%),
    linear-gradient(165deg, var(--color-ink) 0%, var(--color-ink-2) 100%);
  border: 1px solid var(--color-ink-border);
  padding: clamp(50px, 7vw, 90px); color: var(--color-ink-text); text-align:center;
  box-shadow: var(--shadow-lg);
}
.cta-final::before{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%);
}
/* Foto real (una de las 4 del carrusel del inicio, reutilizada — no es una
   fotografía nueva) para dar presencia a la llamada final, con un velo lo
   bastante fuerte para que el texto siga cumpliendo AA sobre cualquier zona
   de la imagen, no solo donde por casualidad quede oscura. */
/* Corrección: con opacity:.32 en la capa + un velo parejo de .88-.94 encima,
   la foto quedaba prácticamente invisible (reportado por el propietario con
   captura real). Se sube la opacidad base y el velo pasa de un degradado
   lineal parejo a uno RADIAL centrado — igual que .text-scrim del hero: una
   superficie de apoyo sólida justo donde vive el texto (todo centrado en
   este bloque), que se aclara mucho hacia las esquinas, así la fotografía
   se nota con claridad en los bordes sin arriesgar el contraste del texto
   por si esa zona de la foto resulta clara. Comprobado con muestreo de
   píxel real del render (ver ESTADO-PROYECTO.md). */
.cta-final-bg{ position:absolute; inset:0; z-index:0; opacity:.62; }
.cta-final-bg img{ width:100%; height:100%; object-fit:cover; }
.cta-final-bg::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(65% 95% at 50% 50%, rgba(8,16,38,.86) 0%, rgba(9,19,44,.62) 55%, rgba(6,12,28,.3) 100%);
}
.cta-final > *{ position:relative; z-index:1; }
.cta-final h2{ color: var(--color-ink-text); }
.cta-final p{ color: var(--color-ink-muted); max-width: 560px; margin-inline:auto; }
.cta-final .eyebrow{ color: #8FB0FF; }
.cta-final .eyebrow::before{ background: #8FB0FF; }
.cta-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top: 30px; }
.cta-final .btn-outline{ border-color: var(--color-ink-border); color: var(--color-ink-text); }
.cta-final .btn-outline:hover{ border-color: #8FB0FF; color: #8FB0FF; background: rgba(255,255,255,.06); }

/* ---------- Página interior: hero técnico con acento por categoría ---------- */
.page-hero{
  position:relative; padding: calc(var(--header-h) + 66px) 0 64px; color: var(--color-text);
  background: linear-gradient(175deg, var(--color-surface) 0%, #fff 75%);
  border-bottom: 1px solid var(--color-border);
  overflow:hidden;
}
.page-hero::after{
  content:""; position:absolute; top:-120px; right:-120px; width:360px; height:360px; border-radius:50%;
  background: radial-gradient(circle, rgba(var(--color-accent-rgb),.10), transparent 70%);
  pointer-events:none;
}
.page-hero-inner{ position:relative; z-index:2; display:grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items:end; }
.page-hero h1{ color: var(--color-secondary-dark); margin-top:14px; }
.page-hero .lead{ color: var(--color-muted); max-width:520px; }
.page-hero-actions{ display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }
.page-hero-media{ border-radius: var(--radius-lg); overflow:hidden; aspect-ratio: 5/4; box-shadow: var(--shadow-lg); position:relative; border:1px solid var(--color-border); }
.page-hero-media::before{
  content:""; position:absolute; top:-14px; left:-14px; width:70px; height:70px; border-top:2px solid var(--hero-accent); border-left:2px solid var(--hero-accent); z-index:2;
}
.page-hero-media img{ width:100%; height:100%; object-fit:cover; }
/* En móvil la imagen principal pasa a mostrarse debajo del texto (orden de
   lectura natural), en vez de ocultarse: antes esta regla la quitaba por
   completo con display:none. */
@media (max-width: 900px){
  .page-hero-inner{ grid-template-columns:1fr; }
  .page-hero-media{ order:2; margin-top:28px; aspect-ratio:16/10; max-width:480px; }
}

/* ---------- Hero de página con foto a sangre completa (inspirado en "Cordex" de
   MotionSites: foto de producto en primer plano + titular grande sobre un velo
   navy para contraste, en vez de la caja de foto recortada de al lado). Se activa
   solo con el modificador .page-hero--photo, que las 10 páginas con foto de
   servicio (7 servicio-*, mantenimiento, inspección, suministro) agregan a su
   .page-hero existente — las páginas sin foto (nosotros, contacto, FAQ, etc.)
   conservan el .page-hero de siempre, sin tocar. ---------- */
.page-hero--photo{
  min-height: clamp(460px, 58vw, 680px);
  display:flex; align-items:flex-end;
  padding: calc(var(--header-h) + 36px) 0 60px;
  background: var(--color-ink);
  border-bottom:none;
}
.page-hero--photo::after{ content:none; }
.page-hero--photo .hero-grid-lines{ display:none; }
/* position:static a propósito: .page-hero-inner ya no debe ser el contenedor
   de referencia para .page-hero-media (position:absolute) — si lo fuera, la
   foto quedaría acotada al ancho del .container (bloque de texto) en vez de
   cubrir todo el hero de lado a lado. El texto gana su propio contexto de
   apilamiento en el div que lo envuelve, dentro de .page-hero (que sí sigue
   siendo position:relative). */
.page-hero--photo .page-hero-inner{ display:block; max-width:660px; align-items:initial; position:static; }
.page-hero--photo .page-hero-inner > div:first-child{ position:relative; z-index:2; }
.page-hero--photo .page-hero-media{
  position:absolute; inset:0; z-index:0; border-radius:0; box-shadow:none; border:none;
  aspect-ratio:auto; height:100%;
}
.page-hero--photo .page-hero-media::before{ content:none; }
.page-hero--photo .page-hero-media img{ width:100%; height:100%; object-fit:cover; }
.page-hero--photo .page-hero-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(105deg, rgba(6,14,34,.94) 0%, rgba(6,14,34,.78) 34%, rgba(6,14,34,.32) 62%, rgba(6,14,34,.06) 100%);
}
.page-hero--photo .breadcrumbs, .page-hero--photo .breadcrumbs a{ color: rgba(255,255,255,.62); }
.page-hero--photo .breadcrumbs a:hover{ color:#fff; }
.page-hero--photo .breadcrumbs span{ opacity:.5; }
.page-hero--photo .tag{ background: rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.28); backdrop-filter: blur(6px); }
.page-hero--photo h1{ color:#fff; }
.page-hero--photo .lead{ color: rgba(234,239,251,.86); max-width:520px; }
@media (max-width: 900px){
  .page-hero--photo{ min-height: clamp(380px, 108vw, 520px); padding: calc(var(--header-h) + 24px) 0 40px; align-items:flex-end; }
  .page-hero--photo .page-hero-inner{ max-width:none; }
  /* Velo más claro que el original (antes .74/.86/.96 cubría casi toda la
     foto de punta a punta): el equipo debe verse en la mitad superior del
     encuadre, oscureciendo solo lo necesario para que el texto siga siendo
     legible donde se apoya (abajo, por el align-items:flex-end del hero). */
  .page-hero--photo .page-hero-media::after{
    background: linear-gradient(190deg, rgba(6,14,34,.18) 0%, rgba(6,14,34,.38) 45%, rgba(6,14,34,.88) 100%);
  }
}

/* Acento de color por línea de certificación (sin imágenes nuevas, solo variables) */
[data-hero-accent="tensiometros"]{ --hero-accent:#1B3B8C; --hero-accent-soft:rgba(27,59,140,.08); }
[data-hero-accent="cunas-hdpe"]{ --hero-accent:#0E7C66; --hero-accent-soft:rgba(14,124,102,.08); }
[data-hero-accent="extrusoras"]{ --hero-accent:#C1580F; --hero-accent-soft:rgba(193,88,15,.08); }
[data-hero-accent="anemometros"]{ --hero-accent:#0E8FA5; --hero-accent-soft:rgba(14,143,165,.08); }
[data-hero-accent="manometros"]{ --hero-accent:#B0313B; --hero-accent-soft:rgba(176,49,59,.08); }
[data-hero-accent="vacuometros"]{ --hero-accent:#4A3F9C; --hero-accent-soft:rgba(74,63,156,.08); }
[data-hero-accent="balanzas"]{ --hero-accent:#1F8A4C; --hero-accent-soft:rgba(31,138,76,.08); }
[data-hero-accent="spark-tester"]{ --hero-accent:#A8790B; --hero-accent-soft:rgba(168,121,11,.08); }
[data-hero-accent="termofusion"]{ --hero-accent:#A8391E; --hero-accent-soft:rgba(168,57,30,.08); }

/* Marca técnica por categoría (patrón CSS puro, sin peso de imagen) */
.hero-pattern{ position:absolute; inset:0; pointer-events:none; opacity:.5; z-index:1; }
.hero-pattern::before, .hero-pattern::after{ content:""; position:absolute; }

/* Fuerza y tensión (tensiómetros): líneas diagonales de tracción */
[data-hero-pattern="tension"] .hero-pattern{
  background: repeating-linear-gradient(115deg, rgba(var(--color-accent-rgb),.14) 0 2px, transparent 2px 26px);
  mask-image: linear-gradient(100deg, transparent, #000 30%, #000 70%, transparent);
}
/* Geosintéticos (cuñas HDPE): capas apiladas */
[data-hero-pattern="layers"] .hero-pattern{
  background:
    repeating-linear-gradient(180deg, rgba(var(--color-accent-rgb),.12) 0 3px, transparent 3px 22px);
  mask-image: radial-gradient(ellipse at 85% 20%, #000 0%, transparent 65%);
}
/* Soldadura (extrusoras): flujo de calor ondulado */
[data-hero-pattern="flow"] .hero-pattern{
  background-image: radial-gradient(circle at 20% 30%, rgba(var(--color-accent-rgb),.16) 0, transparent 45%),
    radial-gradient(circle at 75% 65%, rgba(var(--color-accent-rgb),.12) 0, transparent 40%);
}
/* Ambiental (anemómetros): corrientes de aire */
[data-hero-pattern="wind"] .hero-pattern{
  background: repeating-linear-gradient(4deg, rgba(var(--color-accent-rgb),.13) 0 2px, transparent 2px 30px);
  mask-image: radial-gradient(ellipse at 90% 10%, #000 0%, transparent 60%);
}
/* Presión (manómetros / vacuómetros): arcos de escala */
[data-hero-pattern="gauge"] .hero-pattern{
  background-image: repeating-radial-gradient(circle at 90% 15%, rgba(var(--color-accent-rgb),.16) 0 1px, transparent 1px 18px);
}
/* Masa (balanzas): marcas de equilibrio */
[data-hero-pattern="balance"] .hero-pattern{
  background: repeating-linear-gradient(90deg, rgba(var(--color-accent-rgb),.14) 0 2px, transparent 2px 40px);
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
/* Spark Tester: destello radial */
[data-hero-pattern="spark"] .hero-pattern{
  background: repeating-conic-gradient(from 0deg at 88% 18%, rgba(var(--color-accent-rgb),.16) 0deg 2deg, transparent 2deg 18deg);
}
/* Termofusión: anillos de unión concéntricos */
[data-hero-pattern="weld"] .hero-pattern{
  background-image: repeating-radial-gradient(circle at 85% 20%, transparent 0 14px, rgba(var(--color-accent-rgb),.15) 14px 16px);
}
/* Vacuómetros / Vacuum Box: anillos de vacío contrayéndose */
[data-hero-pattern="vacuum"] .hero-pattern{
  background-image: repeating-radial-gradient(circle at 82% 22%, rgba(var(--color-accent-rgb),.18) 0 1px, transparent 1px 12px);
  mask-image: radial-gradient(circle at 82% 22%, #000 0%, transparent 60%);
}

/* ---------- FAQ two-col ---------- */
.faq-wrap{ max-width: 780px; margin: 0 auto; }

/* ---------- Utilidades ---------- */
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 900px){ .grid-2{ grid-template-columns: 1fr; } }

/* ---------- Contacto: composición cuidada de datos + redes + mapa + formulario ---------- */
/* Página de preguntas frecuentes: intro + CTA de ayuda a la izquierda
   (fijo al hacer scroll), acordeón a la derecha — en vez del título
   centrado seguido de una lista a todo el ancho. */
.faq-page-grid{ display:grid; align-items:start; gap: clamp(28px,4vw,56px); grid-template-columns: .8fr 1.2fr; }
.faq-page-aside{ position:sticky; top:110px; }
.faq-page-aside h3{ margin-top:14px; }
.faq-page-aside .btn{ justify-content:center; }
@media (max-width:900px){
  .faq-page-grid{ grid-template-columns:1fr; }
  .faq-page-aside{ position:static; margin-bottom:8px; }
}

.contact-grid{ align-items:start; gap: clamp(32px, 4vw, 64px); grid-template-columns: 1.05fr .95fr; }
.contact-form-panel{
  background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: clamp(26px, 3vw, 36px); box-shadow: var(--shadow-sm); position:sticky; top: 110px;
}
/* Mismo punto de corte que .grid-2 (900px): sin este override, la regla de
   arriba (misma especificidad, definida después) le ganaría a la de .grid-2
   en todos los anchos, incluido móvil, y el formulario quedaría apretado al
   lado del texto en vez de apilarse. */
@media (max-width: 900px){
  .contact-grid{ grid-template-columns: 1fr; }
  .contact-form-panel{ position:static; }
}

/* Botones de redes sociales protagonistas: icono reconocible, nombre, texto
   breve, indicador de enlace externo (↗) y respuesta suave al hover/foco —
   en vez de los btn-outline genéricos que se veían como botones secundarios
   sin personalidad. WhatsApp mantiene su verde de siempre; Facebook usa el
   azul corporativo; Instagram limita su degradado de marca al icono (no a
   toda la tarjeta), para no competir visualmente con el resto del sitio. */
.social-links{ display:flex; flex-direction:column; gap:12px; margin-top:26px; }
.social-link{
  display:flex; align-items:center; gap:16px; padding:15px 18px; border-radius: var(--radius-md);
  background:#fff; border:1px solid var(--color-border);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.social-link:hover, .social-link:focus-visible{ transform: translateY(-3px); box-shadow: var(--shadow-md); outline:none; }
.social-link:focus-visible{ outline: 3px solid var(--color-accent); outline-offset: 2px; }
.social-link-icon{
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition: transform var(--transition), box-shadow var(--transition);
}
/* Los archivos reales de cada red vienen con dimensiones distintas entre sí
   (el círculo ocupa casi todo el lienzo en cada uno, ya recortado al procesarlos),
   así que fijar el mismo width/height con object-fit:contain basta para que
   los tres se vean del mismo tamaño visual pese a partir de archivos distintos. */
.social-link-icon img{ width:100%; height:100%; object-fit:contain; }
.social-link-body{ display:flex; flex-direction:column; flex:1; min-width:0; gap:2px; }
.social-link-name{ font-family: var(--font-display); font-weight:800; color: var(--color-secondary-dark); font-size:1rem; }
.social-link-desc{ font-size:.85rem; color: var(--color-muted); }
.social-link-arrow{ font-size:1.15rem; color: var(--color-border-strong); transition: transform var(--transition), color var(--transition); flex-shrink:0; }
.social-link:hover .social-link-arrow, .social-link:focus-visible .social-link-arrow{ transform: translate(3px,-3px); color: var(--color-primary); }

/* Halo sutil por marca al interactuar con la tarjeta, detrás del logo real
   (que nunca se deforma ni rota: solo la tarjeta se eleva y el ícono gana
   este halo de color + sombra). */
.social-link--wa:hover .social-link-icon, .social-link--wa:focus-visible .social-link-icon{ box-shadow: 0 0 0 6px rgba(38,196,104,.16); }
.social-link--wa:hover{ border-color:#1F8A4C; }
.social-link--fb:hover .social-link-icon, .social-link--fb:focus-visible .social-link-icon{ box-shadow: 0 0 0 6px rgba(var(--color-primary-rgb),.14); }
.social-link--fb:hover{ border-color: var(--color-primary); }
.social-link--ig:hover .social-link-icon, .social-link--ig:focus-visible .social-link-icon{ box-shadow: 0 0 0 6px rgba(238,42,123,.14); }
.social-link--ig:hover{ border-color:#EE2A7B; }
@media (prefers-reduced-motion: reduce){
  .social-link, .social-link-arrow, .social-link-icon{ transition-duration:.01ms; }
}
@media (max-width: 420px){
  .social-link{ padding:14px; gap:12px; }
  .social-link-icon{ width:40px; height:40px; }
}
.mb-0{ margin-bottom:0; }
.text-center{ text-align:center; }

/* METROL — Consulta segura de certificados */
.cert-lookup-status{margin-top:12px;text-align:center;font-size:14px;font-weight:650;min-height:22px;color:#53627a}
.cert-lookup-status.is-ok{color:#13795b}.cert-lookup-status.is-error{color:#b4233b}
.cert-viewer{position:fixed;inset:0;z-index:99999;background:rgba(3,12,27,.96);display:none;flex-direction:column}
.cert-viewer.is-open{display:flex}.cert-viewer__bar{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;color:#fff;border-bottom:1px solid rgba(255,255,255,.12);background:#071b2d}
.cert-viewer__title{font-weight:800;letter-spacing:.02em}.cert-viewer__close{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;border-radius:10px;padding:9px 14px;cursor:pointer;font-weight:700}
.cert-viewer__frame{width:min(1100px,96vw);height:calc(100vh - 90px);margin:12px auto 14px;border:0;background:#fff;border-radius:8px}
body.cert-viewer-open{overflow:hidden}