/* ============================================================
   Mantiene · Facility Partner
   Sistema visual. Verde de marca tomado del logotipo: rgb(136,192,72)
   ============================================================ */

:root{
  /* Marca, medida sobre el logotipo nuevo */
  --brand:        #8DBF44;   /* verde del swoosh y de "Facility Partner" */
  --brand-hi:     #B5D585;   /* sobre el azul: 8.98:1 */   /* verde claro, para texto sobre el azul */
  --brand-ink:    #557B1E;   /* verde del logo oscurecido lo justo: 4.93:1 */
  --brand-lg:     #6C9C26;   /* casi el verde del logo; titulares grandes: 3.26:1 */
  --brand-deep:   #486B15;
  --brand-deep-2: #334616;
  --brand-wash:   #F4F9EA;

  /* Azul de marca. Es la palabra "Mantiene" del logotipo. */
  --navy:         #152944;
  --navy-deep:    #101F33;

  /* Neutros derivados del azul: antes venian del gris verdoso */
  --ground:       #FFFFFF;
  --surface:      #F5F7FA;
  --surface-2:    #E9EDF3;
  --line:         #D8DEE8;
  --line-soft:    #EDF0F5;
  --ink:          #152944;   /* el azul del logo: 14.66:1 */
  --ink-2:        #365278;   /* 8.00:1 */
  --muted:        #466A9B;   /* 5.55:1 */
  --on-dark:      #F6F6F8;
  --on-dark-2:    #C6D0DE;

  --danger:       #A33B12;
  --shadow-sm:    0 1px 2px rgba(16,26,40,.06);
  --shadow:       0 2px 4px rgba(16,26,40,.05), 0 12px 28px -14px rgba(16,26,40,.22);
  --shadow-lg:    0 4px 8px rgba(16,26,40,.06), 0 24px 56px -20px rgba(16,26,40,.30);

  --sans: "Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono: "Cascadia Mono",Consolas,ui-monospace,monospace;

  --wrap: 1140px;
  --r:    10px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:    #0B1119;
    --surface:   #121A25;
    --surface-2: #1A2432;
    --line:      #263143;
    --line-soft: #1E2836;
    --ink:       #E6EAF0;
    --ink-2:     #BAC4D2;
    --muted:     #8794A6;
    --brand-ink: #A6D667;
    --brand-wash:#16220E;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
    --shadow:    0 2px 4px rgba(0,0,0,.4), 0 12px 28px -14px rgba(0,0,0,.7);
    --shadow-lg: 0 4px 8px rgba(0,0,0,.5), 0 24px 56px -20px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --ground:    #0B1119;
  --surface:   #121A25;
  --surface-2: #1A2432;
  --line:      #263143;
  --line-soft: #1E2836;
  --ink:       #E6EAF0;
  --ink-2:     #BAC4D2;
  --muted:     #8794A6;
  --brand-ink: #A6D667;
  --brand-wash:#16220E;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow:    0 2px 4px rgba(0,0,0,.4), 0 12px 28px -14px rgba(0,0,0,.7);
  --shadow-lg: 0 4px 8px rgba(0,0,0,.5), 0 24px 56px -20px rgba(0,0,0,.8);
}

/* ---------------------------------------------------------- base */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
/* Red de seguridad: ningún SVG en línea puede desbordarse aunque falte una regla */
svg{ max-width:100%; }
.btn svg,.btn-sos svg,.sos-bar svg,.tel-link svg,.nav-toggle svg,
.card-ico svg,.checklist .tic svg,.wa-float svg{ flex:0 0 auto; }
a{ color:var(--brand-ink); text-underline-offset:3px; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--brand); outline-offset:2px; border-radius:4px;
}
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 22px; }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:12px; top:12px; z-index:200; background:var(--ground); padding:10px 16px; border-radius:6px; box-shadow:var(--shadow); }

h1,h2,h3,h4{ font-weight:700; letter-spacing:-.02em; line-height:1.12; margin:0; text-wrap:balance; }
h1{ font-size:clamp(2.05rem,4.6vw,3.4rem); }
h2{ font-size:clamp(1.6rem,3.1vw,2.35rem); letter-spacing:-.022em; }
h3{ font-size:1.18rem; letter-spacing:-.012em; }
p{ margin:0 0 1rem; }
.lede{ font-size:clamp(1.05rem,1.7vw,1.22rem); color:var(--ink-2); max-width:60ch; }

.eyebrow{
  font-size:.75rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--brand-ink); margin:0 0 .85rem;
}
.eyebrow.on-dark{ color:var(--brand-hi); }

/* ---------------------------------------------------------- header */
.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; gap:22px; min-height:82px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto; }
.brand img{ height:47px; width:auto; }   /* logotipo nuevo, 24% mas grande */
.brand-txt{ display:flex; flex-direction:column; line-height:1.05; }
.brand-txt b{ font-size:1.16rem; letter-spacing:-.02em; color:var(--ink); }
.brand-txt span{ font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--brand-ink); font-weight:600; }

.nav{ display:flex; gap:4px; margin-left:auto; align-items:center; }
.nav a{
  color:var(--ink-2); text-decoration:none; font-size:.94rem; font-weight:500;
  padding:9px 13px; border-radius:7px; white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.nav a:hover{ background:var(--surface-2); color:var(--ink); }
.nav a[aria-current="page"]{ color:var(--brand-ink); font-weight:650; background:var(--brand-wash); }

.header-cta{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.tel-link{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  color:var(--ink); font-weight:650; font-size:.95rem; white-space:nowrap;
  padding:8px 10px; border-radius:7px;
}
.tel-link:hover{ background:var(--surface-2); }
.tel-link svg{ width:17px; height:17px; fill:var(--brand-ink); flex:0 0 auto; }

.nav-toggle{
  display:none; margin-left:auto; background:none; border:1px solid var(--line);
  border-radius:8px; padding:9px 11px; cursor:pointer; color:var(--ink);
}
.nav-toggle svg{ width:20px; height:20px; fill:currentColor; display:block; }

@media (max-width:1180px){
  .header-inner{ gap:12px; }
  /* El botón de urgencias sigue visible; el menú pasa al desplegable. */
  .header-cta{ display:flex; margin-left:auto; order:2; }
  .nav-toggle{ display:block; margin-left:0; order:3; }
  .nav{
    order:4;
    position:absolute; top:100%; left:0; right:0;
    background:var(--ground); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; gap:0;
    padding:10px 22px 18px; margin:0;
    box-shadow:var(--shadow); display:none;
  }
  .nav.open{ display:flex; }
  .nav a{ padding:13px 12px; font-size:1rem; }
  .nav .btn{ margin-top:10px; text-align:center; justify-content:center; }
  /* En el desplegable el botón ocupa el ancho completo */
  .nav .btn-cot{ margin-top:12px; justify-content:center; padding:8px 20px 8px 8px; }
}

/* En pantallas chicas el botón se reduce al ícono y la palabra */
@media (max-width:560px){
  .btn-urg{ padding:6px 15px 6px 6px; gap:9px; }
  .btn-urg .disco{ width:30px; height:30px; }
  .btn-urg .txt small{ display:none; }
  .btn-urg .txt b{ font-size:.9rem; }
}
@media (max-width:380px){
  .btn-urg .txt{ display:none; }
  .btn-urg{ padding:6px; }
}

/* ---------------------------------------------------------- botones */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:inherit; font-size:.97rem; font-weight:650; line-height:1.2;
  padding:14px 24px; border-radius:8px; border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn svg{ width:18px; height:18px; fill:currentColor; flex:0 0 auto; }
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

.btn-primary{ background:var(--brand); color:#0E1A0B; border-color:var(--brand); box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--brand-hi); border-color:var(--brand-hi); box-shadow:var(--shadow); }

.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--brand); background:var(--brand-wash); color:var(--brand-ink); }

.btn-on-dark{ background:transparent; color:var(--on-dark); border-color:rgba(255,255,255,.32); }
.btn-on-dark:hover{ background:rgba(255,255,255,.10); border-color:var(--on-dark); }

.btn-wa{ background:#1FA855; color:#fff; border-color:#1FA855; }
.btn-wa:hover{ background:#199348; border-color:#199348; }

.btn-lg{ padding:16px 30px; font-size:1.03rem; }
.btn-block{ width:100%; }

/* ---------------------------------------------------------- hero */
/* Hero claro: el verde queda como acento, no como masa oscura.
   Si se define --hero-foto, la imagen pasa a ser el fondo y el texto se aclara. */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(168deg, #FAFBFB 0%, #F1F7E4 52%, #E6F0D2 100%);
  color:var(--ink);
  padding:clamp(54px,7.5vw,96px) 0 clamp(48px,6.5vw,82px);
  border-bottom:1px solid var(--line);
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(58% 78% at 92% 2%, rgba(141,191,68,.26), transparent 62%),
    radial-gradient(46% 60% at 2% 100%, rgba(91,125,43,.10), transparent 64%);
}
/* Trazo de marca: evoca el swoosh del logotipo */
.hero::after{
  content:""; position:absolute; left:-6%; right:-6%; bottom:-42px; height:120px;
  background:radial-gradient(60% 100% at 50% 0%, rgba(141,191,68,.20), transparent 70%);
  pointer-events:none;
}
.hero > .wrap{ position:relative; z-index:1; }
.hero h1{ color:var(--ink); max-width:19ch; }
.hero .lede{ color:var(--ink-2); max-width:56ch; margin-top:18px; font-size:clamp(1.05rem,1.8vw,1.24rem); }
.hero .eyebrow{ color:var(--brand-ink); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:13px; margin-top:32px; }
/* El botón secundario del hero se comporta como contorno claro */
.hero .btn-on-dark{ color:var(--ink); border-color:var(--line); background:rgba(255,255,255,.6); }
.hero .btn-on-dark:hover{ background:#fff; border-color:var(--brand); color:var(--brand-ink); }

/* --- Banner claro con la fotografía en panel -------------------------
   Sin velo oscuro: la foto se ve tal cual y el texto vive sobre fondo
   claro. El peso visual lo dan la tipografía y el verde de marca.     */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(58% 76% at 88% 6%, rgba(141,191,68,.22), transparent 60%),
    linear-gradient(168deg, #FFFFFF 0%, #F4F9EA 58%, #E9F2D7 100%);
  color:var(--ink);
  padding:clamp(38px,4.5vw,62px) 0 clamp(38px,4.5vw,58px);
  border-bottom:1px solid var(--line);
}
.hero::before,.hero::after{ display:none; }
.hero > .wrap{ position:relative; z-index:1; }
/* El titular venía demasiado grande y se partía en cuatro líneas. */
.hero h1{ color:var(--ink); font-size:clamp(1.95rem,3.5vw,2.95rem); max-width:19ch; }
.hero h1 em{ font-style:normal; color:var(--brand-lg); }
.hero .lede{ color:var(--ink-2); max-width:44ch; margin-top:14px; }
.hero .eyebrow{ color:var(--brand-ink); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:13px; margin-top:24px; }
.hero .btn-on-dark{ color:var(--ink); border-color:var(--line); background:rgba(255,255,255,.72); }
.hero .btn-on-dark:hover{ background:#fff; border-color:var(--brand); color:var(--brand-ink); }

/* Dos columnas: texto a la izquierda, fotografía a la derecha.
   Sin esta regla el banner se apila y queda larguísimo. */
.hero-grid{
  display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(30px,4.5vw,58px); align-items:center;
}
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; gap:26px; } }

/* La fotografía va en un panel con doble contorno: un filete verde
   pegado al borde y un marco desplazado detrás que da profundidad. */
.hero-foto{ position:relative; }
.hero-foto::before{
  content:""; position:absolute; inset:20px -20px -20px 20px;
  border-radius:20px; background:var(--brand); opacity:.18;
  transition:inset .5s cubic-bezier(.22,.61,.36,1);
}
.hero-foto::after{
  content:""; position:absolute; inset:-9px; z-index:2;
  border-radius:24px; border:1.5px solid var(--brand);
  opacity:.5; pointer-events:none;
  transition:inset .5s cubic-bezier(.22,.61,.36,1), opacity .4s ease;
}
.hero-foto:hover::before{ inset:26px -26px -26px 26px; }
.hero-foto:hover::after{ inset:-14px; opacity:.85; }
.hero-foto .media{
  position:relative; border-radius:16px; overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow-lg);
}
.hero-foto .media img{ width:100%; height:clamp(300px,30vw,432px); object-fit:cover; }

/* --- Carrusel de fotografías del banner ---------------------------
   Sólo rota la imagen: el titular y los botones quedan fijos, así el
   mensaje no se pierde y aun así hay movimiento.

   El traspaso NO es un fundido. La foto entrante se arma en seis
   franjas verticales que entran alternadas — unas desde arriba, otras
   desde abajo — escalonadas de izquierda a derecha. Mientras se arma
   se sigue viendo la foto anterior por los huecos, que es lo que le da
   el efecto de persiana.                                             */
.foto-carrusel{
  position:relative; border-radius:16px; overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow-lg);
  height:clamp(320px,34vw,470px); background:var(--surface-2);
}
.foto-carrusel .media{
  position:absolute; inset:0; border:none; border-radius:0; box-shadow:none;
  opacity:0; z-index:0;
}
.foto-carrusel .media[data-activo="1"]{
  opacity:1; z-index:2;
  animation:deriva-a 6.8s ease-out both;   /* deriva lenta ya instalada */
}
/* Alterna el sentido de la deriva: dos seguidas moviéndose igual se
   nota mecánico. */
.foto-carrusel .media:nth-child(even)[data-activo="1"]{ animation-name:deriva-b; }
@keyframes deriva-a{
  from{ transform:scale(1.06) translate(-.9%,  .6%); }
  to  { transform:scale(1.005) translate(0,0); }
}
@keyframes deriva-b{
  from{ transform:scale(1.06) translate( .9%, -.6%); }
  to  { transform:scale(1.005) translate(0,0); }
}
/* La saliente aguanta abajo hasta que la persiana terminó de cerrar. */
.foto-carrusel .media[data-saliendo="1"]{
  opacity:1; z-index:1;
  animation:sale-atras 1.25s cubic-bezier(.19,.72,.28,1) both;
}
@keyframes sale-atras{
  from{ transform:scale(1); }
  to  { transform:scale(1.05); }
}
.foto-carrusel .media img{ width:100%; height:100%; object-fit:cover; }
/* Mientras se arma la persiana, la foto de base se mantiene oculta:
   la que se ve es la de las franjas. */
.foto-carrusel .media[data-revelando="1"] > img{ opacity:0; }

/* --- Las franjas --------------------------------------------------
   Cada franja lleva una copia de la misma foto, tan ancha como el
   carrusel entero y corrida a su posición, de modo que las seis juntas
   reconstruyen la imagen sin costuras ni deformación.               */
.foto-carrusel .tiras{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.foto-carrusel .tira{
  position:absolute; top:0; bottom:0; overflow:hidden;
  width:calc(100% / var(--n) + .6px);
  left:calc(var(--k) * 100% / var(--n));
  animation:tira-entra .78s cubic-bezier(.16,.84,.3,1) both;
  animation-delay:calc(var(--k) * 62ms);
}
.foto-carrusel .tira img{
  position:absolute; top:0; left:calc(var(--k) * -100%);
  width:calc(100% * var(--n)); height:100%;
  max-width:none; object-fit:cover;
}
@keyframes tira-entra{
  from{ transform:translateY(var(--desde)); opacity:.35; }
  60% { opacity:1; }
  to  { transform:translateY(0); opacity:1; }
}


/* --- El mismo carrusel, dentro de un bloque de servicio -------------
   OJO con la especificidad: `.bloque-foto .media` (más abajo en este
   archivo) define position:relative para las fotos de los bloques. Con
   igual peso gana la que viene después, así que las cuatro láminas
   quedaban apiladas en el flujo en vez de superpuestas y el carrusel
   parecía congelado. Por eso aquí se califica con `.bloque-foto`
   delante: pesa más y no depende del orden.                          */
.foto-carrusel-bloque{
  height:clamp(260px,30vw,360px);
  border-radius:18px;
}
.bloque-foto .foto-carrusel-bloque .media{
  position:absolute; inset:0;
  border:none; border-radius:0; box-shadow:none;
}
.bloque-foto .foto-carrusel-bloque .media img{
  width:100%; height:100%; object-fit:cover; transition:none;
}
/* La deriva de la foto activa reemplaza al zoom de hover del bloque. */
.bloque-foto:hover .foto-carrusel-bloque img{ transform:none; }
.bloque-foto .foto-carrusel-bloque .tira img{ width:calc(100% * var(--n)); }

/* Velo inferior: sostiene la lectura de los puntos sobre fotos claras. */
.foto-carrusel::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:96px;
  z-index:3; pointer-events:none;
  background:linear-gradient(to top, rgba(11,19,32,.45), transparent);
}

.foto-puntos{
  position:absolute; left:0; right:0; bottom:13px; z-index:4;
  display:flex; justify-content:center; gap:7px;
}
.foto-puntos button{
  position:relative; overflow:hidden;
  width:9px; height:9px; padding:0; border-radius:100px; cursor:pointer;
  border:1.5px solid rgba(255,255,255,.85); background:rgba(255,255,255,.28);
  transition:background .25s ease, transform .25s ease, width .45s cubic-bezier(.22,.61,.36,1);
}
.foto-puntos button[aria-selected="true"]{ width:32px; background:rgba(255,255,255,.3); }
/* El punto activo se llena a medida que corre el turno de la foto. */
.foto-puntos button[aria-selected="true"]::after{
  content:""; position:absolute; inset:0; border-radius:100px; background:#fff;
  transform-origin:left center; animation:punto-avanza 5200ms linear both;
}
@keyframes punto-avanza{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
/* Si el visitante deja el cursor encima, el giro se detiene: la barra
   tiene que detenerse con él o miente. */
.foto-carrusel:hover .foto-puntos button[aria-selected="true"]::after{ animation-play-state:paused; }
.foto-puntos button:hover{ transform:scale(1.15); }

@media (prefers-reduced-motion:reduce){
  .foto-carrusel .media{ transition:opacity .3s linear; }
  .foto-carrusel .media[data-activo="1"],
  .foto-carrusel .media[data-saliendo="1"]{ animation:none; transform:none; }
  .foto-carrusel .media[data-saliendo="1"]{ opacity:0; }
  .foto-puntos button[aria-selected="true"]::after{ animation:none; transform:scaleX(1); }
}

/* --- Áreas de cobertura en el banner ------------------------------
   El titular dice qué somos (facility partner); esta fila dice de
   inmediato qué cubrimos y lleva a cada página de servicio.        */
.hero-areas{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:18px;
}
.hero-areas .ha-tit{
  width:100%; font-size:.72rem; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-2); opacity:.75; margin-bottom:2px;
}
.hero-areas a{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 15px 8px 12px; border-radius:100px; text-decoration:none;
  font-size:.9rem; font-weight:700; color:var(--brand-deep);
  background:#fff; border:1px solid rgba(141,191,68,.6);
  box-shadow:var(--shadow-sm);
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.hero-areas a svg{ width:15px; height:15px; fill:var(--brand-ink); flex:none; }
.hero-areas a:hover{
  transform:translateY(-2px); border-color:var(--brand-ink); box-shadow:var(--shadow);
}
.hero-areas a.ha-mas{
  color:var(--ink-2); border-style:dashed; border-color:var(--line);
  background:transparent; box-shadow:none; font-weight:650;
}
.hero-areas a.ha-mas:hover{ border-color:var(--brand); color:var(--brand-deep); }
@media (prefers-reduced-motion:reduce){ .hero-areas a:hover{ transform:none; } }

/* Credenciales compactas bajo los botones */
.hero-sellos{ display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }
.hero-sellos span{
  font-size:.82rem; font-weight:650; padding:8px 15px; border-radius:100px;
  background:#fff; color:var(--ink-2); border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.hero-sellos span::before{
  content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--brand); margin-right:8px; vertical-align:middle;
}


/* --- Equipo con el sistema andando -------------------------------
   La sección de gestión afirma que todo se planifica y se registra
   sobre un sistema. Mostrarlo corriendo en una pantalla es la prueba;
   una fotografía de archivo no prueba nada.                        */
.mac{ margin:0; }
.mac-tapa{
  position:relative;
  background:linear-gradient(#41454a 0%, #24272a 42%, #17191b 100%);
  border-radius:15px; padding:12px 12px 14px;
  box-shadow:0 26px 50px -26px rgba(14,22,36,.55),
             0 3px 10px -4px rgba(14,22,36,.3),
             inset 0 0 0 1px rgba(255,255,255,.08);
}
/* la cámara del borde superior */
.mac-tapa::before{
  content:""; position:absolute; top:5px; left:50%; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%; background:#0b0d0e;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.mac-pantalla{
  position:relative; border-radius:5px; overflow:hidden;
  background:#0b0d0e; aspect-ratio:1642 / 912;   /* el de la captura, sin recortar */
}
.mac-pantalla img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:left top;
}
/* Reflejo diagonal: sin él la pantalla se lee como una lámina pegada. */
.mac-pantalla::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(114deg, rgba(255,255,255,.14) 0 26%, transparent 47%);
}
/* La base: apenas más ancha que la tapa y en trapecio, que es lo que
   da la lectura de portátil visto de frente. */
.mac-base{
  height:12px; margin:0 -5.5%;
  background:linear-gradient(#d2d6da 0%, #a7adb4 46%, #767c83 100%);
  clip-path:polygon(0 0, 100% 0, 97.6% 100%, 2.4% 100%);
  border-radius:0 0 10px 10px;
  position:relative;
  box-shadow:0 10px 18px -12px rgba(14,22,36,.5);
}
/* la muesca central para abrir la tapa */
.mac-base::after{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:13%; height:5px; border-radius:0 0 8px 8px; background:rgba(0,0,0,.2);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .mac-base{
    background:linear-gradient(#9ba1a8 0%, #767c83 46%, #4d5258 100%);
  }
}
:root[data-theme="dark"] .mac-base{
  background:linear-gradient(#9ba1a8 0%, #767c83 46%, #4d5258 100%);
}

/* franja de credenciales bajo el hero */
.trust{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r);
  margin-top:44px; overflow:hidden; box-shadow:var(--shadow);
}
.trust div{ background:var(--ground); padding:18px 20px; }
.trust b{ display:block; font-size:1.45rem; color:var(--brand-ink); line-height:1.1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.trust span{ display:block; font-size:.83rem; color:var(--muted); margin-top:5px; }

/* Sobre fondo fotográfico o secciones verdes, la caja se invierte */
.hero.con-foto .trust,
.section-dark .trust{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.22); box-shadow:none; }
.hero.con-foto .trust div,
.section-dark .trust div{ background:rgba(19,33,10,.42); backdrop-filter:blur(3px); }
.hero.con-foto .trust b,
.section-dark .trust b{ color:var(--brand-hi); }
.hero.con-foto .trust span,
.section-dark .trust span{ color:var(--on-dark-2); }

/* ---------------------------------------------------------- secciones */
.section{ padding:clamp(56px,7vw,92px) 0; }
.section-alt{ background:var(--surface); }
/* Antes era un bloque verde oscuro. Ahora es claro con acento verde:
   el sitio queda luminoso de principio a fin. */
.section-dark{
  background:linear-gradient(168deg, #F7FBEF 0%, #ECF4DD 100%);
  color:var(--ink);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.section-dark h2{ color:var(--ink); }
.section-dark p{ color:var(--ink-2); }

.section-head{ max-width:64ch; margin-bottom:clamp(30px,4vw,48px); }
.section-head p{ color:var(--muted); margin-top:12px; font-size:1.04rem; }
/* La volanta es un <p>, y la regla de arriba le ganaba por peso: dentro
   de un encabezado de seccion salia en azul apagado en vez del verde. */
.section-head p.eyebrow{ color:var(--brand-ink); font-size:.75rem; margin-top:0; }
.section-dark .section-head p{ color:var(--muted); }

/* ---------------------------------------------------------- tarjetas de servicio */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(292px,1fr)); gap:20px; }
/* Grupos de cuatro: rejilla 2×2, para que no quede una tarjeta suelta */
.cards.dos{ grid-template-columns:repeat(2,1fr); }
@media (max-width:760px){ .cards.dos{ grid-template-columns:1fr; } }
.card{
  background:var(--ground); border:1px solid var(--line); border-radius:var(--r);
  padding:28px 26px 26px; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .22s ease, border-color .18s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--brand); }
.card-ico{
  width:46px; height:46px; border-radius:9px; background:var(--brand-wash);
  display:grid; place-items:center; margin-bottom:17px;
}
.card-ico svg{ width:24px; height:24px; fill:var(--brand-ink); }
.card h3{ margin-bottom:9px; }
.card p{ color:var(--muted); font-size:.96rem; margin-bottom:16px; }
.card ul{ list-style:none; padding:0; margin:0 0 20px; }
.card li{ position:relative; padding-left:24px; font-size:.93rem; color:var(--ink-2); margin-bottom:8px; }
.card li::before{
  content:""; position:absolute; left:2px; top:.55em;
  width:9px; height:5px; border-left:2px solid var(--brand); border-bottom:2px solid var(--brand);
  transform:rotate(-45deg);
}
.card .card-link{
  margin-top:auto; font-weight:650; font-size:.95rem; text-decoration:none;
  display:inline-flex; align-items:center; gap:7px; color:var(--brand-ink);
}
.card .card-link::after{ content:"→"; transition:transform .16s ease; }
.card:hover .card-link::after{ transform:translateX(4px); }

/* ---------------------------------------------------------- proceso numerado */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:26px; counter-reset:s; }
.step{ counter-increment:s; }
.step::before{
  content:counter(s,decimal-leading-zero);
  display:block; font-size:1.65rem; font-weight:700; color:var(--brand);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
  border-top:2px solid var(--brand); padding-top:11px; margin-bottom:12px; width:100%;
}
.step h3{ margin-bottom:7px; font-size:1.06rem; }
.step p{ font-size:.94rem; color:var(--muted); margin:0; }
.section-dark .step p{ color:var(--muted); }
.section-dark .step h3{ color:var(--ink); }

/* ---------------------------------------------------------- listas de valor */
.checks{ list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.checks li{ position:relative; padding-left:34px; color:var(--ink-2); }
.checks li strong{ color:var(--ink); display:block; margin-bottom:2px; }
.section-dark .checks li{ color:var(--on-dark-2); }
.section-dark .checks li strong{ color:#fff; }
.checks li::before{
  content:""; position:absolute; left:0; top:2px; width:22px; height:22px; border-radius:50%;
  background:var(--brand-wash);
}
.checks li::after{
  content:""; position:absolute; left:7px; top:9px;
  width:9px; height:5px; border-left:2px solid var(--brand-ink); border-bottom:2px solid var(--brand-ink);
  transform:rotate(-45deg);
}
.section-dark .checks li::before{ background:rgba(141,191,68,.18); }
.section-dark .checks li::after{ border-color:var(--brand-hi); }

/* ---------------------------------------------------------- dos columnas */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,62px); align-items:start; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------- cobertura */
.coverage{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.chip{
  font-size:.88rem; padding:7px 14px; border-radius:100px;
  background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line);
}
.section-dark .chip{ background:#fff; color:var(--ink-2); border-color:var(--line); }

/* ---------------------------------------------------------- formulario */
.form-card{
  background:var(--ground); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,3.4vw,34px); box-shadow:var(--shadow-lg);
}
.form-card h2{ font-size:1.42rem; margin-bottom:6px; }
.form-card > p{ color:var(--muted); font-size:.95rem; margin-bottom:22px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:.87rem; font-weight:650; color:var(--ink-2); margin-bottom:6px; }
.field .req{ color:var(--danger); }
.field input,.field select,.field textarea{
  width:100%; font-family:inherit; font-size:.97rem; color:var(--ink);
  background:var(--ground); border:1.5px solid var(--line); border-radius:8px;
  padding:12px 14px; transition:border-color .15s ease, box-shadow .15s ease;
}
.field textarea{ min-height:104px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-wash);
}
.field input::placeholder,.field textarea::placeholder{ color:var(--muted); opacity:.75; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }
.form-note{ font-size:.82rem; color:var(--muted); margin:14px 0 0; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.alert{ padding:13px 16px; border-radius:8px; font-size:.93rem; margin-bottom:18px; }
.alert-error{ background:#FDEDE6; color:#7A2C0B; border:1px solid #E9BCA6; }
.alert-ok{ background:var(--brand-wash); color:var(--brand-ink); border:1px solid var(--brand); }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .alert-error{ background:#2C1409; color:#F0BFA6; border-color:#5C2A12; }
}

/* ---------------------------------------------------------- banda CTA
   Cierre claro: lavado verde de marca sobre blanco, con un filete
   superior que hace de corte. El peso lo da la tipografia, no el fondo. */
.cta-band{
  position:relative; overflow:hidden;
  padding:clamp(50px,6.5vw,78px) 0;
  color:var(--ink);
  background:
    radial-gradient(72% 140% at 88% 16%, rgba(141,191,68,.22), transparent 62%),
    radial-gradient(48% 100% at 4% 96%, rgba(21,41,68,.07), transparent 66%),
    linear-gradient(168deg, #FFFFFF 0%, #F7FAF2 52%, #EEF5E2 100%);
  border-top:1px solid var(--line);
}
/* filete de marca: verde que se apaga hacia el azul */
.cta-band::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--brand) 0%, var(--brand) 26%, var(--navy) 100%);
}
.cta-band > .wrap{
  position:relative; display:flex; flex-wrap:wrap; gap:28px;
  align-items:center; justify-content:space-between;
}
.cta-band h2{ color:var(--ink); max-width:22ch; margin-bottom:8px; }
.cta-band p{ color:var(--ink-2); margin:0; max-width:52ch; }
.cta-band .actions{ display:flex; flex-wrap:wrap; gap:12px; }
/* el boton secundario vive sobre claro: deja de ser fantasma blanco */
.cta-band .btn-on-dark{
  background:#fff; color:var(--ink); border-color:var(--line);
  box-shadow:var(--shadow-sm);
}
.cta-band .btn-on-dark:hover{
  background:#fff; border-color:var(--brand); color:var(--brand-ink);
  box-shadow:var(--shadow);
}

/* ---------------------------------------------------------- footer */
/* El pie en el azul del logotipo: es la superficie grande que le da
   presencia a la marca sin oscurecer el cuerpo de la pagina. */
.site-footer{ background:var(--surface); color:var(--ink-2); border-top:1px solid var(--line); padding:clamp(48px,6vw,72px) 0 28px; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.1fr; gap:40px; }
@media (max-width:880px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.site-footer h4{ font-size:.74rem; letter-spacing:.15em; text-transform:uppercase; color:var(--brand-ink); margin-bottom:15px; font-weight:800; }
.site-footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:9px; }
.site-footer a{ color:var(--ink-2); text-decoration:none; font-size:.94rem; transition:color .2s ease; }
.site-footer a:hover{ color:var(--brand-ink); }
.site-footer .brand{ margin-bottom:14px; }
.footer-about p{ font-size:.92rem; color:var(--muted); max-width:38ch; line-height:1.6; }
.footer-contact li{ font-size:.94rem; color:var(--ink-2); }
.footer-bottom{
  border-top:1px solid var(--line); margin-top:40px; padding-top:22px;
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  font-size:.84rem; color:var(--muted);
}

/* ---------------------------------------------------------- WhatsApp flotante */
.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:90;
  width:56px; height:56px; border-radius:50%; background:#1FA855;
  display:grid; place-items:center; box-shadow:0 6px 20px rgba(0,0,0,.28);
  transition:transform .16s ease;
}
.wa-float:hover{ transform:scale(1.06); }
.wa-float svg{ width:30px; height:30px; fill:#fff; }

/* ------------------------------------------- par de botones del encabezado
   .btn-cot y .btn-urg comparten forma, tipografía y altura (48px).
   Sólo cambia el color: verde de marca y rojo de urgencia.            */
.btn-cot,
.btn-urg{
  display:inline-flex; align-items:center; gap:11px;
  padding:7px 18px 7px 8px; border-radius:100px; text-decoration:none;
  white-space:nowrap;
  transition:transform .16s ease, box-shadow .22s ease, filter .18s ease;
}
.btn-cot .disco,
.btn-urg .disco{
  position:relative; flex:0 0 auto;
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
}
.btn-cot .disco svg,
.btn-urg .disco svg{ width:17px; height:17px; position:relative; z-index:1; }
.btn-cot .txt,
.btn-urg .txt{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.16; }
.btn-cot .txt b,
.btn-urg .txt b{ font-size:.94rem; font-weight:700; letter-spacing:-.01em; }
.btn-cot .txt small,
.btn-urg .txt small{ font-size:.72rem; font-weight:500; opacity:.86; letter-spacing:.01em; }
.btn-cot:active,
.btn-urg:active{ transform:translateY(0); }

/* --- Contacto: ámbar, para separarlo del rojo de Urgencias ---
   Se escribe como `.nav a.btn-cot` porque `.nav a` gana en especificidad
   y de lo contrario impone su radio de 7px y su color de texto gris.
   Lleva texto oscuro: sobre ámbar el blanco no alcanza contraste. */
.btn-cot,
.nav a.btn-cot{
  /* Naranjo con más fuerza que el ámbar apagado, pero sin llegar al rojo
     de Urgencias. La sombra del texto sostiene la lectura del blanco. */
  background:linear-gradient(135deg, #E58A12 0%, #B96206 100%); color:#fff;
  border-radius:100px; padding:7px 18px 7px 8px; font-weight:700;
  text-shadow:0 1px 3px rgba(70,36,0,.55);
  box-shadow:0 2px 7px -1px rgba(170,95,6,.38), 0 10px 26px -12px rgba(170,95,6,.58);
}
.btn-cot:hover,
.nav a.btn-cot:hover{
  color:#fff;
  transform:translateY(-1.5px); filter:saturate(1.08) brightness(1.05);
  box-shadow:0 4px 10px -2px rgba(140,84,6,.42), 0 16px 32px -12px rgba(140,84,6,.64);
}
.btn-cot .disco{ background:rgba(255,255,255,.22); }
.btn-cot .disco svg{ fill:#fff; }

/* ---------------------------------------------------------- botón de urgencias */
.btn-urg{
  display:inline-flex; align-items:center; gap:11px;
  padding:7px 18px 7px 8px; border-radius:100px; text-decoration:none;
  background:linear-gradient(135deg, #E24A22 0%, #C2360D 100%);
  color:#fff; white-space:nowrap;
  box-shadow:0 2px 6px -1px rgba(194,54,13,.34), 0 10px 24px -12px rgba(194,54,13,.5);
  transition:transform .16s ease, box-shadow .22s ease, filter .18s ease;
}
.btn-urg:hover{
  transform:translateY(-1.5px); filter:saturate(1.08);
  box-shadow:0 4px 10px -2px rgba(194,54,13,.42), 0 16px 32px -12px rgba(194,54,13,.62);
}
.btn-urg:active{ transform:translateY(0); }

/* Disco del ícono, con halo que late */
.btn-urg .disco{
  position:relative; flex:0 0 auto;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.18);
  display:grid; place-items:center;
}
.btn-urg .disco::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(255,255,255,.55);
  animation:halo 2.6s cubic-bezier(.3,.1,.3,1) infinite;
}
@keyframes halo{
  0%   { transform:scale(1);    opacity:.7; }
  70%  { transform:scale(1.55); opacity:0; }
  100% { transform:scale(1.55); opacity:0; }
}
.btn-urg .disco svg{ width:17px; height:17px; fill:#fff; position:relative; z-index:1; }

.btn-urg .txt{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.16; }
.btn-urg .txt b{ font-size:.94rem; font-weight:700; letter-spacing:-.01em; }
.btn-urg .txt small{ font-size:.72rem; font-weight:500; opacity:.86; letter-spacing:.01em; }

@media (prefers-reduced-motion:reduce){
  .btn-urg .disco::after{ animation:none; opacity:.5; }
}

/* ---------------------------------------------------- selector de servicios
   Va inmediatamente bajo el banner: es lo primero que responde
   "¿qué vende esta empresa?" y deja elegir camino en un clic.   */
.selector{
  background:var(--ground);
  padding:clamp(30px,4vw,46px) 0 clamp(34px,4.5vw,52px);
}
.selector .wrap{ position:relative; }
.selector-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:860px){ .selector-grid{ grid-template-columns:1fr; } }
.via{
  display:flex; flex-direction:column; gap:8px;
  background:var(--ground); border:1px solid var(--line); border-radius:12px;
  padding:24px 24px 20px; text-decoration:none;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
  transition:transform .18s ease, box-shadow .24s ease, border-color .18s ease;
}
.via::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:var(--brand); transform:scaleX(0); transform-origin:left;
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
.via:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--brand); }
.via:hover::before{ transform:scaleX(1); }
/* Fotografía real en la cabecera de la tarjeta, con el distintivo
   del servicio montado sobre el borde inferior de la imagen. */
.via-foto{
  position:relative; margin:-24px -24px 0; height:132px; overflow:hidden;
  border-radius:11px 11px 0 0; background:var(--surface-2);
}
.via-foto .media{ border:none; border-radius:0; box-shadow:none; height:100%; }
.via-foto img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.via:hover .via-foto img{ transform:scale(1.06); }
.via-foto::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,16,5,.06) 0%, rgba(8,16,5,.30) 100%);
}

.via .ico{
  position:relative; z-index:2; margin:-26px 0 12px;
  width:52px; height:52px; border-radius:14px;
  background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow); display:grid; place-items:center;
  transition:transform .2s ease, border-color .2s ease;
}
.via:hover .ico{ transform:translateY(-2px); border-color:var(--brand); }
.via .ico svg{ width:26px; height:26px; fill:none; stroke:var(--brand-ink); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; }
.via b{ font-size:1.16rem; font-weight:700; letter-spacing:-.015em; color:var(--ink); }
.via span{ font-size:.94rem; color:var(--muted); }
.via em{
  font-style:normal; margin-top:auto; padding-top:12px;
  font-size:.92rem; font-weight:650; color:var(--brand-ink);
  display:inline-flex; align-items:center; gap:7px;
}
.via em::after{ content:"→"; transition:transform .18s ease; }
.via:hover em::after{ transform:translateX(4px); }

/* ---------------------------------------------------------- clientes (cinta) */
.clients{ padding:clamp(34px,4vw,50px) 0; border-bottom:1px solid var(--line); background:var(--ground); }
.clients p.eyebrow{ text-align:center; margin-bottom:22px; }

.marquee{
  position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marquee + .marquee{ margin-top:6px; }
.marquee-track{
  display:flex; width:max-content;
  animation:desfile 78s linear infinite;
}
/* La segunda fila avanza en sentido contrario: da sensación de movimiento
   sin que el ojo tenga que seguir una sola línea larguísima. */
.marquee-track.inversa{ animation-name:desfile-inv; animation-duration:86s; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes desfile{     from{ transform:translateX(0);    } to{ transform:translateX(-50%); } }
@keyframes desfile-inv{ from{ transform:translateX(-50%); } to{ transform:translateX(0);    } }

.marquee-track .cell{
  flex:0 0 auto; width:186px; height:62px;
  display:grid; place-items:center; padding:0 12px;
}
.marquee-track .cell img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  filter:grayscale(1); opacity:.58;
  transition:filter .25s ease, opacity .25s ease, transform .25s ease;
}
.marquee-track .cell:hover img{ filter:grayscale(0); opacity:1; transform:scale(1.06); }

@media (prefers-reduced-motion:reduce){
  .marquee-track{ animation:none; flex-wrap:wrap; width:100%; justify-content:center; }
  .marquee{ -webkit-mask-image:none; mask-image:none; }
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .marquee-track .cell img{ filter:grayscale(1) invert(1) brightness(1.75); opacity:.5; }
  :root:not([data-theme="light"]) .marquee-track .cell:hover img{ filter:grayscale(0) invert(1) brightness(1.75); opacity:.95; }
}
:root[data-theme="dark"] .marquee-track .cell img{ filter:grayscale(1) invert(1) brightness(1.75); opacity:.5; }
:root[data-theme="dark"] .marquee-track .cell:hover img{ filter:grayscale(0) invert(1) brightness(1.75); opacity:.95; }


/* ================================================================
   PANEL FLOTANTE (catálogo de servicios)
   Fondo claro, como el resto del sitio. El panel se lleva el foco
   mientras está abierto y devuelve el scroll al cerrarse.
   ================================================================ */
.modal[hidden]{ display:none; }
.modal{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(12px,3vw,34px);
}
.modal-fondo{
  position:absolute; inset:0; cursor:pointer;
  background:rgba(16,26,44,.55);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  animation:modal-fondo .28s ease both;
}
@keyframes modal-fondo{ from{ opacity:0; } to{ opacity:1; } }
.modal-panel{
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  width:min(1180px,100%); max-height:min(88vh,900px);
  background:var(--ground); color:var(--ink);
  border:1px solid var(--line); border-radius:20px;
  box-shadow:0 40px 90px -30px rgba(14,22,36,.55);
  overflow:hidden;
  animation:modal-entra .38s cubic-bezier(.19,.72,.28,1) both;
}
@keyframes modal-entra{
  from{ opacity:0; transform:translateY(22px) scale(.985); }
  to  { opacity:1; transform:none; }
}
.modal-cab{
  display:flex; align-items:flex-start; gap:18px;
  padding:clamp(18px,2.4vw,26px) clamp(18px,2.6vw,32px);
  border-bottom:1px solid var(--line); background:var(--surface);
}
.modal-cab h2{ font-size:clamp(1.25rem,2.4vw,1.75rem); margin:0; }
.modal-cab .eyebrow{ color:var(--brand-ink); margin-bottom:5px; }
.modal-x{
  margin-left:auto; flex:none; width:38px; height:38px; padding:0;
  display:grid; place-items:center; cursor:pointer;
  border-radius:50%; border:1px solid var(--line);
  background:var(--ground); color:var(--ink-2);
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.modal-x:hover{ background:var(--brand); color:#0E1A0B; border-color:var(--brand); transform:rotate(90deg); }
.modal-cuerpo{
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:clamp(18px,2.6vw,30px) clamp(18px,2.6vw,32px);
}
.modal-pie{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  padding:clamp(14px,2vw,20px) clamp(18px,2.6vw,32px);
  border-top:1px solid var(--line); background:var(--surface);
}
.modal-pie p{ margin:0; flex:1 1 320px; color:var(--ink-2); font-size:.95rem; }

/* --- las cinco columnas del catálogo --- */
.cat-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(14px,1.6vw,22px);
}
@media (max-width:1100px){ .cat-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){  .cat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){  .cat-grid{ grid-template-columns:1fr; } }

.cat-col{
  background:var(--surface); border:1px solid var(--line);
  border-radius:15px; padding:16px 15px 18px;
}
.cat-cab{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.cat-ico{
  flex:none; width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center; background:var(--brand-ink);
}
.cat-ico svg{ width:19px; height:19px; fill:#fff; }
.cat-cab h3{
  font-size:.94rem; line-height:1.25; margin:0; color:var(--ink);
  display:flex; align-items:baseline; gap:7px; flex-wrap:wrap;
}
.cat-num{
  font-family:var(--mono); font-size:.72rem; font-weight:700;
  color:var(--brand-ink); letter-spacing:.06em;
}
.cat-lista{ list-style:none; margin:0; padding:0; }
.cat-lista li{
  position:relative; padding:5px 0 5px 15px;
  font-size:.855rem; line-height:1.4; color:var(--ink-2);
  border-top:1px solid var(--line-soft);
}
.cat-lista li:first-child{ border-top:none; }
.cat-lista li::before{
  content:""; position:absolute; left:0; top:12px;
  width:6px; height:6px; border-radius:50%; background:var(--brand);
}

/* --- franja de especialidades --- */
.cat-esp{
  margin-top:clamp(16px,2vw,24px); padding:18px 20px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:15px;
}
.cat-esp h3{
  font-size:.76rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand-deep); margin:0 0 12px;
}
.cat-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.cat-chips span{
  font-size:.85rem; font-weight:650; padding:7px 14px; border-radius:100px;
  background:var(--ground); color:var(--ink-2);
  border:1px solid var(--line); box-shadow:var(--shadow-sm);
}


/* Franja de especialidades visible en la página. Repite lo que hay en el
   panel, pero a la vista: el buscador pondera el texto visible por sobre
   el que está escondido tras un botón. */
.esp-visible{
  margin-top:clamp(26px,3.4vw,38px);
  padding:20px clamp(18px,2.4vw,26px);
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
}
.esp-visible h3{
  font-size:.76rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--brand-deep); margin:0 0 13px;
}
.esp-visible ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.esp-visible li{
  font-size:.86rem; font-weight:650; padding:7px 14px; border-radius:100px;
  background:var(--ground); color:var(--ink-2);
  border:1px solid var(--line); box-shadow:var(--shadow-sm);
}

/* El botón que abre el panel */
.btn-catalogo{ display:inline-flex; align-items:center; gap:9px; }
.btn-catalogo svg{ width:17px; height:17px; fill:currentColor; }
.cat-abrir{ margin-top:clamp(22px,3vw,32px); text-align:center; }
.cat-abrir p{ color:var(--ink-2); margin-top:10px; font-size:.93rem; }

body.modal-abierto{ overflow:hidden; }

@media (prefers-reduced-motion:reduce){
  .modal-fondo, .modal-panel{ animation:none; }
  .modal-x:hover{ transform:none; }
}

/* ---------------------------------------------------------- animación de entrada */
.reveal{ opacity:0; transform:translateY(18px); }
.reveal.visible{
  opacity:1; transform:none;
  transition:opacity .62s cubic-bezier(.22,.61,.36,1), transform .62s cubic-bezier(.22,.61,.36,1);
}
.reveal.d1.visible{ transition-delay:.07s; }
.reveal.d2.visible{ transition-delay:.14s; }
.reveal.d3.visible{ transition-delay:.21s; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; }
}

/* Cinturón de seguridad: si por cualquier vía una lámina recibiera las
   clases de aparición, manda el carrusel y no el scroll-reveal. */
.foto-carrusel .media.reveal,
.foto-carrusel .media.reveal.visible{ opacity:0; transform:none; transition:none; }
.foto-carrusel .media.reveal.visible[data-activo="1"]{ opacity:1; }
.foto-carrusel .media.reveal.visible[data-saliendo="1"]{ opacity:1; }



/* Encabezado compacto al bajar */
.site-header.scrolled{ box-shadow:0 2px 14px -6px rgba(16,26,40,.28); }
.site-header.scrolled .header-inner{ min-height:62px; }
.header-inner{ transition:min-height .22s ease; }

/* ============================================================
   AYUDA DE REVISIÓN — sólo para el ambiente de prueba.
   Numera cada casilla de fotografía para poder referirse a ella
   por número. QUITAR ESTE BLOQUE AL PUBLICAR EN PRODUCCIÓN.
   ============================================================ */
.media, .card-media{ position:relative; }

.foto-pendiente{
  display:grid; place-items:center; text-align:center;
  aspect-ratio:3/2; padding:22px;
  background:repeating-linear-gradient(45deg,
    var(--surface-2), var(--surface-2) 14px, var(--surface) 14px, var(--surface) 28px);
  border:2px dashed var(--line);
  border-radius:var(--r);
}
.card-media .foto-pendiente{ border:none; border-bottom:2px dashed var(--line); border-radius:0; aspect-ratio:auto; height:172px; }
.rot-foto .foto-pendiente{ border:none; border-radius:0; aspect-ratio:auto; height:100%; min-height:220px; }
.foto-pendiente .icono{ width:38px; height:38px; fill:var(--muted); opacity:.65; margin:0 auto 10px; }
.foto-pendiente b{ display:block; font-size:.98rem; color:var(--ink-2); }
.foto-pendiente span{ display:block; font-size:.82rem; color:var(--muted); margin-top:4px; }

/* ---------------------------------------------------------- imagen de apoyo */
.media{
  border-radius:var(--r); overflow:hidden; border:1px solid var(--line);
  background:var(--surface-2); box-shadow:var(--shadow);
}
.media img{ width:100%; height:auto; display:block; }
.media-hero{
  border-color:rgba(255,255,255,.22);
  box-shadow:0 18px 46px -18px rgba(0,0,0,.55);
}
.card-media{
  margin:-28px -26px 20px; border-bottom:1px solid var(--line);
  border-radius:var(--r) var(--r) 0 0; overflow:hidden; background:var(--surface-2);
}
.card-media img{
  width:100%; height:172px; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.card:hover .card-media img{ transform:scale(1.05); }

/* ---------------------------------------------------------- cumplimiento F30 */
.compliance{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(228px,1fr)); gap:18px; margin-top:8px;
}
.doc{
  background:var(--ground); border:1px solid var(--line); border-left:3px solid var(--brand);
  border-radius:var(--r); padding:20px 22px; box-shadow:var(--shadow-sm);
}
.doc b{
  display:block; font-family:var(--mono); font-size:.82rem; letter-spacing:.06em;
  color:var(--brand-ink); margin-bottom:7px; text-transform:uppercase;
}
.doc h3{ font-size:1.02rem; margin-bottom:6px; }
.doc p{ font-size:.92rem; color:var(--muted); margin:0; }

/* --- Sello y checklist de cumplimiento --- */
.cumplimiento{
  display:grid; grid-template-columns:300px 1fr; gap:clamp(26px,4vw,48px);
  align-items:center;
  background:var(--ground); border:1px solid var(--line); border-radius:14px;
  padding:clamp(24px,3.4vw,36px); box-shadow:var(--shadow);
}
@media (max-width:820px){ .cumplimiento{ grid-template-columns:1fr; } }

.sello{
  position:relative; display:grid; place-items:center; text-align:center;
  border:2px solid var(--brand); border-radius:12px;
  background:linear-gradient(160deg, var(--brand-wash), transparent);
  padding:26px 22px;
}
.sello .visto{
  width:62px; height:62px; border-radius:50%; background:var(--brand);
  display:grid; place-items:center; margin:0 auto 14px;
  box-shadow:0 6px 18px -6px rgba(91,125,43,.55);
}
.sello .visto svg{ width:34px; height:34px; fill:#fff; }
.sello strong{ display:block; font-size:1.12rem; letter-spacing:-.01em; color:var(--ink); }
.sello span{ display:block; font-size:.86rem; color:var(--muted); margin-top:6px; }
.sello em{
  display:block; margin-top:14px; padding-top:12px; border-top:1px dashed var(--line);
  font-style:normal; font-size:.76rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--brand-ink); font-weight:700;
}

.checklist{ list-style:none; padding:0; margin:0; display:grid; gap:0; }
.checklist li{
  display:grid; grid-template-columns:26px 1fr auto; gap:14px; align-items:start;
  padding:15px 0; border-bottom:1px solid var(--line-soft);
}
.checklist li:last-child{ border-bottom:none; }
.checklist .tic{
  width:24px; height:24px; border-radius:50%; background:var(--brand-wash);
  display:grid; place-items:center; margin-top:1px;
}
.checklist .tic svg{ width:14px; height:14px; fill:var(--brand-ink); }
.checklist b{ display:block; font-size:1rem; color:var(--ink); margin-bottom:3px; }
.checklist p{ margin:0; font-size:.92rem; color:var(--muted); }
.checklist .estado{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brand-ink); background:var(--brand-wash); border:1px solid var(--brand);
  padding:4px 10px; border-radius:100px; white-space:nowrap; align-self:center; font-weight:700;
}

/* ================================================== rotador de servicios
   Un panel grande que va pasando solo de un servicio a otro.
   La lista de la izquierda hace de índice y de barra de avance.      */
.rot{
  display:grid; grid-template-columns:290px 1fr; gap:clamp(20px,3vw,34px);
  align-items:stretch;
}
@media (max-width:940px){ .rot{ grid-template-columns:1fr; } }

/* --- índice --- */
.rot-lista{ display:flex; flex-direction:column; gap:8px; }
@media (max-width:940px){
  .rot-lista{
    flex-direction:row; overflow-x:auto; padding-bottom:6px;
    scrollbar-width:thin; scroll-snap-type:x proximity;
  }
  .rot-tab{ flex:0 0 auto; min-width:172px; scroll-snap-align:start; }
}

.rot-tab{
  position:relative; overflow:hidden; text-align:left; cursor:pointer;
  font-family:inherit; background:var(--ground);
  border:1px solid var(--line); border-radius:11px;
  padding:14px 16px 15px; color:var(--ink-2);
  display:flex; flex-direction:column; gap:2px;
  transition:border-color .22s ease, background .22s ease, transform .18s ease, box-shadow .22s ease;
}
.rot-tab:hover{ border-color:var(--brand); transform:translateX(2px); }
@media (max-width:940px){ .rot-tab:hover{ transform:translateY(-2px); } }
.rot-tab .n{
  font-family:var(--mono); font-size:.7rem; font-weight:700; letter-spacing:.1em;
  color:var(--muted); transition:color .22s ease;
}
.rot-tab .t{ font-size:1.02rem; font-weight:650; color:var(--ink); letter-spacing:-.01em; }

.rot-tab[aria-selected="true"]{
  border-color:var(--brand); background:var(--brand-wash); box-shadow:var(--shadow-sm);
}
.rot-tab[aria-selected="true"] .n{ color:var(--brand-ink); }

/* Barra de avance del panel activo */
.rot-tab .barra{
  position:absolute; left:0; right:0; bottom:0; height:3px;
  background:color-mix(in srgb, var(--brand) 24%, transparent);
  opacity:0; transition:opacity .2s ease;
}
.rot-tab[aria-selected="true"] .barra{ opacity:1; }
.rot-tab .barra i{
  display:block; height:100%; width:100%; background:var(--brand);
  transform-origin:left; transform:scaleX(0);
}
.rot-tab[aria-selected="true"] .barra i{ animation:avanza var(--rot-tiempo,6.5s) linear forwards; }
.rot.pausado .rot-tab[aria-selected="true"] .barra i{ animation-play-state:paused; }
@keyframes avanza{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* --- escena --- */
.rot-escena{
  position:relative; background:var(--ground);
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  box-shadow:var(--shadow); min-height:376px;
}
.rot-panel{
  position:absolute; inset:0;
  display:grid; grid-template-columns:1fr 1fr;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .5s ease, visibility .5s;
}
.rot-panel[data-activo="1"]{ opacity:1; visibility:visible; pointer-events:auto; }
@media (max-width:720px){
  .rot-panel{ grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  .rot-escena{ min-height:0; }
  .rot-panel{ position:relative; display:none; }
  .rot-panel[data-activo="1"]{ display:grid; }
}

.rot-foto{ position:relative; overflow:hidden; background:var(--surface-2); }
.rot-foto img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:720px){ .rot-foto{ height:196px; } }
/* La foto entra con un desplazamiento muy leve: da sensación de avance */
.rot-panel[data-activo="1"] .rot-foto img{ animation:foto-entra .9s cubic-bezier(.22,.61,.36,1) both; }
@keyframes foto-entra{ from{ transform:scale(1.07); } to{ transform:scale(1); } }

.rot-texto{ padding:clamp(24px,3vw,34px); display:flex; flex-direction:column; }
.rot-texto .eyebrow{ margin-bottom:.6rem; }
.rot-texto h3{ font-size:clamp(1.2rem,2vw,1.5rem); margin-bottom:10px; }
.rot-texto > p{ color:var(--muted); font-size:.96rem; margin-bottom:16px; }
.rot-texto ul{ list-style:none; padding:0; margin:0 0 20px; display:grid; gap:9px; }
.rot-texto li{ position:relative; padding-left:25px; font-size:.93rem; color:var(--ink-2); }
.rot-texto li::before{
  content:""; position:absolute; left:2px; top:.55em;
  width:9px; height:5px; border-left:2px solid var(--brand); border-bottom:2px solid var(--brand);
  transform:rotate(-45deg);
}
.rot-texto .btn{ margin-top:auto; align-self:flex-start; }
/* El texto entra escalonado tras la foto */
.rot-panel[data-activo="1"] .rot-texto > *{ animation:texto-entra .55s cubic-bezier(.22,.61,.36,1) both; }
.rot-panel[data-activo="1"] .rot-texto > *:nth-child(2){ animation-delay:.05s; }
.rot-panel[data-activo="1"] .rot-texto > *:nth-child(3){ animation-delay:.1s; }
.rot-panel[data-activo="1"] .rot-texto > *:nth-child(4){ animation-delay:.15s; }
.rot-panel[data-activo="1"] .rot-texto > *:nth-child(5){ animation-delay:.2s; }
@keyframes texto-entra{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce){
  .rot-tab[aria-selected="true"] .barra i{ animation:none; transform:scaleX(1); }
  .rot-panel[data-activo="1"] .rot-foto img,
  .rot-panel[data-activo="1"] .rot-texto > *{ animation:none; }
}

/* ================================================ bloques de servicio
   Una imagen, el nombre, dos frases y un botón. Nada más.
   Se alternan izquierda y derecha para dar ritmo al recorrido.      */
.bloques{ display:grid; gap:clamp(46px,6vw,84px); }
.bloque{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(28px,4.5vw,64px); align-items:center;
}
.bloque:nth-child(even) .bloque-foto{ order:2; }
@media (max-width:820px){
  .bloque{ grid-template-columns:1fr; gap:24px; }
  .bloque:nth-child(even) .bloque-foto{ order:0; }
}

.bloque-foto{ position:relative; }
.bloque-foto::before{
  content:""; position:absolute; inset:18px -18px -18px 18px;
  border-radius:18px; background:var(--brand); opacity:.20;
}
.bloque:nth-child(even) .bloque-foto::before{ inset:18px 18px -18px -18px; }
.bloque-foto .media{
  position:relative; border-radius:18px; overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow-lg);
}
.bloque-foto img{
  width:100%; height:clamp(260px,30vw,360px); object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.bloque-foto:hover img{ transform:scale(1.04); }

.bloque-txt .num{
  font-family:var(--mono); font-size:.78rem; font-weight:700; letter-spacing:.14em;
  color:var(--brand-ink); display:block; margin-bottom:12px;
}
.bloque-txt h2{ font-size:clamp(1.7rem,3.2vw,2.5rem); margin-bottom:14px; }
.bloque-txt p{ color:var(--ink-2); font-size:1.06rem; max-width:38ch; margin-bottom:24px; }

/* ------------------------------------------------------ franja de galería
   Fotografías del trabajo real, con el pie sobre la imagen.          */
.galeria{ display:grid; gap:16px; grid-template-columns:repeat(3,1fr); }
.galeria.dos{ grid-template-columns:repeat(2,1fr); }
@media (max-width:860px){ .galeria,.galeria.dos{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .galeria,.galeria.dos{ grid-template-columns:1fr; } }

.galeria figure{
  position:relative; margin:0; border-radius:12px; overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .25s ease;
}
.galeria figure:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.galeria .media{ border:none; border-radius:0; box-shadow:none; }
.galeria img{
  width:100%; height:clamp(200px,20vw,244px); object-fit:cover;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.galeria figure:hover img{ transform:scale(1.05); }
.galeria figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:26px 16px 14px; color:#fff; font-size:.9rem; font-weight:650;
  background:linear-gradient(180deg, rgba(8,16,5,0), rgba(8,16,5,.82));
  text-shadow:0 1px 8px rgba(0,0,0,.5);
}

/* ---------------------------------------------------------- casos de éxito */
.casos{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.caso{
  background:var(--ground); border:1px solid var(--line); border-radius:var(--r);
  padding:26px 26px 24px; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .22s ease, border-color .18s ease;
}
.caso:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--brand); }
.caso .sector{
  font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--brand-ink); margin-bottom:10px;
}
.caso h3{ font-size:1.1rem; margin-bottom:12px; }
.caso .reto,.caso .sol{ font-size:.94rem; color:var(--ink-2); margin-bottom:12px; }
.caso .reto b,.caso .sol b{ color:var(--ink); }
.caso .cifras{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:14px;
  margin-top:auto; padding-top:18px; border-top:1px solid var(--line-soft);
}
.caso .cifras div b{
  display:block; font-size:1.3rem; color:var(--brand-ink); line-height:1.1;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.caso .cifras div span{ display:block; font-size:.78rem; color:var(--muted); margin-top:3px; }

/* ---------------------------------------------------------- utilidades */
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.center{ text-align:center; } .center .lede,.center .section-head{ margin-left:auto; margin-right:auto; }
.faq{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--ground); }
.faq details{ border-bottom:1px solid var(--line); }
.faq details:last-child{ border-bottom:none; }
.faq summary{ padding:17px 22px; cursor:pointer; font-weight:650; font-size:1rem; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:1.3rem; color:var(--brand-ink); flex:0 0 auto; line-height:1; }
.faq details[open] summary::after{ content:"–"; }
.faq details > div{ padding:0 22px 19px; color:var(--muted); font-size:.96rem; }

/* Sobre fondo claro el logotipo va en color. */
.site-footer .brand img{ height:52px; width:auto; }

/* ---------------------------------------------- declaracion de servicios
   Encabezado con mas peso para la seccion que presenta las tres areas.
   La volanta se convierte en pildora, el titular crece, y debajo va una
   fila de cifras que resume la oferta completa de un vistazo. */
/* El encabezado de seccion limita a 64ch; la fila de cifras necesita
   mas. El titular y la bajada se siguen conteniendo por su cuenta. */
.declara{ max-width:900px; margin-left:auto; margin-right:auto; }
.declara .eyebrow{
  display:inline-block; padding:7px 17px; border-radius:100px;
  background:var(--brand-wash); color:var(--brand-deep);
  border:1px solid rgba(141,191,68,.5);
  margin-bottom:20px; box-shadow:var(--shadow-sm);
}
.declara h2{
  font-size:clamp(1.95rem,4.2vw,3.05rem); max-width:19ch;
  margin-left:auto; margin-right:auto; line-height:1.1;
}
.declara h2 em{ font-style:normal; color:var(--brand-lg); }
.declara > p{
  font-size:clamp(1.04rem,1.7vw,1.2rem); color:var(--ink-2);
  max-width:58ch; margin-left:auto; margin-right:auto;
}
.declara-cifras{
  list-style:none; margin:clamp(28px,3.6vw,42px) auto 0; padding:0;
  display:flex; flex-wrap:wrap; max-width:860px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm);
}
.declara-cifras li{
  flex:1 1 190px; padding:22px 18px; text-align:center;
  border-left:1px solid var(--line);
}
.declara-cifras li:first-child{ border-left:none; }
.declara-cifras b{
  display:block; font-size:clamp(1.75rem,3.2vw,2.35rem); line-height:1;
  color:var(--ink); letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.declara-cifras span{
  display:block; margin-top:8px; font-size:.83rem; color:var(--muted);
  letter-spacing:.03em; line-height:1.3;
}
@media (max-width:640px){
  .declara-cifras li{ flex:1 1 50%; }
  .declara-cifras li:nth-child(3){ border-left:none; }
  .declara-cifras li:nth-child(n+3){ border-top:1px solid var(--line); }
}

/* ------------------------------------------------- boton de acceso
   Entrada al sistema de gestion. Discreto: contorno y tinta de marca,
   sin relleno, para que no compita con Contacto ni con Urgencias. */
/* `.nav a` pesa mas que `.btn-acceso` y le imponia su radio y su
   relleno; por eso va calificado, igual que el boton de Contacto. */
.btn-acceso,
.nav a.btn-acceso{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 15px; border-radius:100px; text-decoration:none;
  font-size:.9rem; font-weight:700; white-space:nowrap;
  color:var(--ink-2); background:var(--ground);
  border:1px solid var(--line);
  transition:border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease;
}
.btn-acceso svg{ fill:currentColor; flex:none; opacity:.75; }
.btn-acceso:hover,
.nav a.btn-acceso:hover{
  color:var(--navy); border-color:var(--navy);
  background:var(--surface); box-shadow:var(--shadow-sm);
}
.btn-acceso:hover svg{ opacity:1; }
/* En el menu desplegable del celular ocupa el ancho, como los demas. */
@media (max-width:1060px){
  .nav .btn-acceso{ justify-content:center; width:100%; }
}