/* ==========================================================================
   ECI — Equipamiento Clínico Integral
   Hoja de estilos del sitio · conforme al Manual de identidad V2.3 — AGO 2026
   Dirección y diseño de la identidad: Ing. Roberto Francisco Delgado Flores

   TODA decisión de color y de tipografía de este archivo se deriva del manual.
   Referencias entre paréntesis: (p. XX) apunta a la página del manual.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · TIPOGRAFÍAS (p. 13) — Outfit e IBM Plex, SIL Open Font License 1.1.
   Se auto-alojan: el sitio no depende de un CDN externo.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:'Outfit';
  src:url('../assets/fuentes/Outfit-var.woff2') format('woff2-variations'),
      url('../assets/fuentes/Outfit-var.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Sans';
  src:url('../assets/fuentes/IBMPlexSans-var.woff2') format('woff2-variations'),
      url('../assets/fuentes/IBMPlexSans-var.woff2') format('woff2');
  font-weight:100 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('../assets/fuentes/IBMPlexMono-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('../assets/fuentes/IBMPlexMono-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}

/* --------------------------------------------------------------------------
   2 · TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Color (p. 11). Sustitución de valores prohibida. */
  --marino:#0F1E3D;
  --azul:#2563EB;
  --cian:#22D3EE;          /* solo sobre marino; nunca texto corrido ni sobre blanco */
  --cian-claro:#7DEBFA;    /* solo digital */
  --claro:#EFF4FF;
  --fondo:#F5F8FD;
  --g900:#2A3140; --g700:#4A5262; --g500:#7A8393; --g300:#B9C0CC; --g100:#E7EAF0;
  --exito:#15803D; --alerta:#B45309; --error:#B91C1C;
  --blanco:#FFFFFF;

  /* Familias (p. 13). Sustitución declarada: Arial / Consolas. */
  --f-display:'Outfit', Arial, Helvetica, sans-serif;
  --f-texto:'IBM Plex Sans', Arial, Helvetica, sans-serif;
  --f-mono:'IBM Plex Mono', Consolas, 'Courier New', monospace;

  /* Escala normativa (p. 13). Ninguna aplicación define tamaños propios.
     La proporción entre estilos se conserva; el ancla es texto = 11.5 pt = 17 px.
     El máximo del título grande equivale al 3.3 % del ancho de la mancha,
     misma relación que la portada de presentación del manual (p. 26). */
  --e-grande:clamp(2.05rem, 3.28vw, 2.957rem);   /* 32/38 pt · tracking −2 %  */
  --e-seccion:clamp(1.6rem, 2.36vw, 2.125rem);   /* 23/29 pt · tracking −1 %  */
  --e-subtitulo:1.386rem;                        /* 15/20 pt                  */
  --e-texto:1.0625rem;                           /* 11.5/19 pt                */
  --e-chico:.877rem;                             /* 9.5/15 pt                 */
  --e-apoyo:.75rem;                              /* 8/12 pt · piso absoluto   */

  /* Ritmo */
  --e1:.5rem; --e2:1rem; --e3:1.5rem; --e4:2rem;
  --e5:3rem; --e6:4rem; --e7:6rem;
  --bloque:clamp(3.75rem, 6.6vw, 6.5rem);
  --canal:clamp(1.25rem, 4vw, 2.5rem);
  --ancho:1240px;

  /* Radios derivados del squircle (radio 28 u sobre 100 u, p. 05) */
  --r-chip:6px; --r-boton:10px; --r-tarjeta:14px; --r-panel:20px;

  --transicion:180ms cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------------------
   3 · BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:112px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--fondo);
  color:var(--g900);
  font-family:var(--f-texto);
  font-size:var(--e-texto);
  line-height:1.652;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{display:block; max-width:100%; height:auto}
picture{display:block}
a{color:var(--azul); text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}

/* Los titulares reparten sus líneas; el texto evita palabras huérfanas. */
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}

::selection{background:var(--azul); color:var(--blanco)}
.marino ::selection{background:var(--cian); color:var(--marino)}

:focus-visible{
  outline:2px solid var(--azul);
  outline-offset:3px;
  border-radius:3px;
}
.marino :focus-visible{outline-color:var(--cian)}

.salto-contenido{
  position:absolute; left:-9999px; top:0; z-index:200;
  display:inline-flex; align-items:center; min-height:46px;
  background:var(--marino); color:var(--blanco);
  padding:.75rem 1.25rem; border-radius:0 0 var(--r-boton) 0;
  font-family:var(--f-mono); font-size:var(--e-apoyo); letter-spacing:.14em; text-transform:uppercase;
}
.salto-contenido:focus{left:0}

.contenedor{
  width:100%; max-width:var(--ancho);
  margin-inline:auto; padding-inline:var(--canal);
}

.solo-lectores{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --------------------------------------------------------------------------
   4 · ESTILOS DE TEXTO NORMATIVOS
   -------------------------------------------------------------------------- */
.t-grande{
  font-family:var(--f-display); font-weight:800;
  font-size:var(--e-grande); line-height:1.1875; letter-spacing:-.02em;
  margin:0;
}
.t-seccion{
  font-family:var(--f-display); font-weight:800;
  font-size:var(--e-seccion); line-height:1.261; letter-spacing:-.01em;
  color:var(--marino); margin:0;
}
.t-subtitulo{
  font-family:var(--f-display); font-weight:700;
  font-size:var(--e-subtitulo); line-height:1.333; letter-spacing:-.005em;
  color:var(--marino); margin:0;
}
.t-chico{font-size:var(--e-chico); line-height:1.579}

/* Estilo de apoyo (p. 13): Plex Mono 500, 8/12 pt, tracking +14 %.
   Es el estilo de kickers, etiquetas de campo, folios y pies. */
.apoyo{
  font-family:var(--f-mono); font-weight:500;
  font-size:var(--e-apoyo); line-height:1.5; letter-spacing:.14em;
  text-transform:uppercase; font-variant-numeric:tabular-nums;
}
.apoyo--azul{color:var(--azul)}
.apoyo--gris{color:var(--g700)}
.apoyo--cian{color:var(--cian)}      /* únicamente sobre marino (p. 11) */
.apoyo--blanco{color:var(--blanco)}

/* El estilo de apoyo no debe emplearse sobre azul (p. 13):
   se sustituye por la variante 600 del texto chico. */
.sobre-azul{
  font-family:var(--f-texto); font-weight:600;
  font-size:var(--e-chico); line-height:1.579; letter-spacing:0; text-transform:none;
  color:var(--blanco);
}

/* Dato técnico: modelos, medidas, capacidades, folios y SKU (p. 13) */
.dato{font-family:var(--f-mono); font-weight:500; font-variant-ligatures:none;
      font-variant-numeric:tabular-nums; white-space:nowrap}

/* Marcador de relleno [entre corchetes], siempre en minúsculas (p. 03).
   Debe sustituirse por un valor real antes de publicar. */
.mk{
  font-family:var(--f-mono); font-weight:500;
  font-size:max(.92em, .75rem); color:var(--azul);
  background:var(--claro); border-radius:var(--r-chip);
  padding:.12em .4em; white-space:nowrap;
}
.marino .mk{color:var(--cian); background:rgba(255,255,255,.08)}

/* --------------------------------------------------------------------------
   5 · BOTONES
   -------------------------------------------------------------------------- */
.boton{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--f-texto); font-weight:600; font-size:var(--e-chico);
  line-height:1; letter-spacing:.005em;
  padding:.95rem 1.4rem; border-radius:var(--r-boton);
  border:1.5px solid transparent; cursor:pointer;
  transition:background var(--transicion), border-color var(--transicion),
             color var(--transicion), transform var(--transicion);
}
.boton svg{width:17px; height:17px; flex:none}
.boton--primario{background:var(--azul); color:var(--blanco); border-color:var(--azul)}
.boton--primario:hover{background:#1D51C4; border-color:#1D51C4; transform:translateY(-1px)}
.boton:active{transform:translateY(0) scale(.985)}
.boton--claro{background:var(--blanco); color:var(--marino); border-color:var(--blanco)}
.boton--claro:hover{background:var(--claro); border-color:var(--claro); transform:translateY(-1px)}
.boton--linea{background:transparent; color:var(--blanco); border-color:rgba(255,255,255,.45)}
.boton--linea:hover{border-color:var(--blanco); background:rgba(255,255,255,.08)}
.boton--linea-azul{background:transparent; color:var(--azul); border-color:var(--g300)}
.boton--linea-azul:hover{border-color:var(--azul); background:var(--claro)}
.boton--ancho{width:100%; justify-content:center}

/* --------------------------------------------------------------------------
   6 · BARRA UTILITARIA + ENCABEZADO
   -------------------------------------------------------------------------- */
.barra-utilitaria{background:var(--marino); color:var(--blanco)}
.barra-utilitaria__fila{
  display:flex; flex-wrap:wrap; gap:.4rem 1.75rem;
  align-items:center; justify-content:space-between;
  padding-block:.6rem;
}
.barra-utilitaria__grupo{display:flex; flex-wrap:wrap; gap:.4rem 1.75rem; align-items:center}
.barra-utilitaria__dato{
  display:inline-flex; align-items:center; gap:.5rem;
  color:rgba(255,255,255,.85);
}
.barra-utilitaria__dato svg{width:14px; height:14px; flex:none; color:var(--cian)}
.barra-utilitaria a.barra-utilitaria__dato:hover{color:var(--blanco)}

@media (max-width:560px){
  .barra-utilitaria__grupo:first-child{display:none}
  .barra-utilitaria__fila{justify-content:center}
  .barra-utilitaria__grupo{gap:0 2rem}
}

.encabezado{
  position:sticky; top:0; z-index:100;
  background:rgba(245,248,253,.92);
  backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--g100);
  transition:box-shadow var(--transicion), border-color var(--transicion);
}
.encabezado.esta-fijo{box-shadow:0 6px 24px -14px rgba(15,30,61,.35); border-color:transparent}
.encabezado__fila{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--e3); min-height:76px;
}
/* Área de respiro x = ¼ del ancho del contenedor del isotipo (p. 09).
   Isotipo a 34 px ⇒ x = 8.5 px. Se respeta con holgura. */
.marca-enlace{display:inline-flex; padding:12px 14px 12px 0}
.marca-enlace img{height:34px; width:auto}
.marca-enlace .lockup-corto{display:none}
@media (max-width:560px){
  .marca-enlace .lockup-horizontal{display:none}
  .marca-enlace .lockup-corto{display:block}
}

.nav{display:flex; align-items:center; gap:1.5rem}
.nav__enlace{
  font-family:var(--f-mono); font-weight:500;
  font-size:var(--e-apoyo); line-height:1.5; letter-spacing:.14em; text-transform:uppercase;
  color:var(--g700); padding:.4rem 0; position:relative;
  transition:color var(--transicion);
}
.nav__enlace::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:var(--azul); transition:right var(--transicion);
}
.nav__enlace:hover,
.nav__enlace.esta-activo{color:var(--marino)}
.nav__enlace:hover::after,
.nav__enlace.esta-activo::after{right:0}

.encabezado__acciones{display:flex; align-items:center; gap:.75rem}
.menu-boton{
  display:none; background:transparent; border:1px solid var(--g300);
  border-radius:var(--r-boton); padding:.6rem; cursor:pointer; color:var(--marino);
}
.menu-boton svg{width:20px; height:20px}

/* El CTA acompaña al lector en toda la página, también en el teléfono. Por
   debajo de 420 px la etiqueta se acorta; el nombre accesible no cambia. */
.txt-corto{display:none}
@media (max-width:420px){
  .txt-largo{display:none}
  .txt-corto{display:inline}
  .encabezado__acciones .boton{padding-inline:1rem}
}

@media (max-width:1024px){
  .nav{
    position:fixed; inset:auto 0 0 0; top:0;
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:.25rem; background:var(--fondo);
    padding:5.5rem var(--canal) calc(2rem + env(safe-area-inset-bottom));
    height:100dvh;
    transform:translateY(-100%); visibility:hidden;
    transition:transform 280ms cubic-bezier(.22,.61,.36,1), visibility 0s 280ms;
    overflow-y:auto;
  }
  .nav.esta-abierta{
    transform:translateY(0); visibility:visible;
    transition:transform 280ms cubic-bezier(.22,.61,.36,1), visibility 0s;
  }
  /* Teléfono en apaisado: el menú deja de centrarse para que quepa entero. */
  @media (max-height:520px){
    .nav{justify-content:flex-start; padding-top:4.5rem}
    .nav__enlace{padding:.6rem 0; font-size:1rem}
    .nav .boton{margin-top:1rem}
  }
  .nav__enlace{font-size:1.05rem; letter-spacing:.06em; padding:.9rem 0; width:100%;
               border-bottom:1px solid var(--g100); color:var(--marino)}
  .nav__enlace::after{display:none}
  .menu-boton{display:inline-flex}
  .nav .boton{display:inline-flex; margin-top:1.5rem}
}
@media (min-width:1025px){ .nav .boton{display:none} }

/* --------------------------------------------------------------------------
   7 · HERO
   Regla de capas (p. 06): pieza de imagen ⇒ azul; sobre fotografía, el texto
   exige 4.5:1, de modo que se coloca placa marino al 100 % (p. 06 y p. 08).
   El texto se compone íntegramente dentro de la zona de marino sólido.
   -------------------------------------------------------------------------- */
.hero{position:relative; background:var(--marino); overflow:hidden; isolation:isolate}
.hero__foto{position:absolute; inset:0; z-index:0}
.hero__foto picture{width:100%; height:100%}
.hero__foto img{width:100%; height:100%; object-fit:cover; object-position:center center}
/* Placa marino al 100 % bajo todo el texto (p. 06 y p. 08), disuelta deprisa
   para que la fotografía quede visible en más de la mitad de la pieza.
   El fin de la zona sólida sigue al borde derecho de la columna de texto,
   que se desplaza con el centrado del contenedor en pantallas anchas.
   Gradiente a 90°: los porcentajes coinciden con el ancho real. */
.hero__placa{
  /* Fin de la zona sólida = borde del contenedor + canal + ancho del texto +
     holgura. Con el contenedor centrado, ese borde se corre en pantallas
     anchas, por eso la expresión sigue al 50 % en vez de a un porcentaje fijo. */
  --fin:max(46%, calc(50% - 12px));
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,
    var(--marino) 0%,
    var(--marino) var(--fin),
    rgba(15,30,61,.55) calc(var(--fin) + 5%),
    rgba(15,30,61,.22) calc(var(--fin) + 11%),
    rgba(15,30,61,.05) calc(var(--fin) + 18%),
    rgba(15,30,61,0)   calc(var(--fin) + 24%));
}
.hero__contenido{
  position:relative; z-index:2;
  padding-block:clamp(2.75rem, 4.4vw, 4rem);
  min-height:clamp(480px, 44vw, 720px);
  display:flex; flex-direction:column; justify-content:center;
}
.hero__texto{width:min(34rem, 40vw)}
/* Ventana baja (teléfono en apaisado, navegador con muchas barras): la portada
   deja de reservar altura mínima y se ciñe a su contenido. */
@media (max-height:560px){
  .hero__contenido{min-height:0; padding-block:1.75rem}
  .hero__nota{display:none}
}
.hero__kicker{
  display:inline-flex; align-items:center; gap:.7rem;
  margin:0 0 1.35rem;
  line-height:1;
}
/* Viñeta de la portada: el cuadro redondeado del logotipo reducido a marca
   mínima. Sustituye al recuadro-pastilla, ajeno al sistema. */
.hero__kicker::before{
  content:""; flex:none;
  width:9px; height:9px; border-radius:3px;
  background:var(--cian);
}
.hero__titulo{color:var(--blanco); margin-bottom:1rem}
.hero__titulo em{font-style:normal; color:var(--cian)}   /* titular sobre marino (p. 11) */
.hero__entrada{color:rgba(255,255,255,.88); margin:0 0 1.5rem; max-width:46ch}
/* Línea de pulso (p. 14): una sola vez por pieza, siempre horizontal.
   Este es su único uso en toda la página. */
.hero__pulso{width:210px; margin-bottom:1.6rem}
.hero__pulso svg{width:100%; height:auto; overflow:visible}
.hero__acciones{display:flex; flex-wrap:wrap; gap:.75rem}
.hero__nota{
  margin-top:1.75rem; padding-top:1.1rem;
  border-top:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.62); max-width:44ch;
}

@media (max-width:900px){
  .hero__contenido{min-height:0; padding-block:0}
  .hero__texto{width:100%; max-width:34rem; padding-block:2.5rem 3rem}
  .hero__foto{position:relative; height:clamp(190px,44vw,320px)}
  @media (max-height:560px){
    .hero__foto{height:clamp(130px,34vh,190px)}
    .hero__texto{padding-block:1.75rem 2.25rem}
  }
  .hero__foto img{object-position:center}
  .hero__placa{
    inset:auto 0 0 0; height:100%;
    background:linear-gradient(180deg, rgba(15,30,61,0) 0%, rgba(15,30,61,.35) 55%, var(--marino) 100%);
  }
  .hero{display:flex; flex-direction:column}
  .hero__contenido{order:2}
}

/* --------------------------------------------------------------------------
   8 · CINTILLO DE CERTEZAS
   -------------------------------------------------------------------------- */
.certezas{background:var(--claro); border-bottom:1px solid var(--g100)}
.certezas__rejilla{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px; background:var(--g300);
  border-inline:1px solid var(--g300);
}
.certeza{background:var(--claro); padding:1.75rem clamp(1rem,1.8vw,1.6rem)}
.certeza__etiqueta{
  color:var(--g700); display:flex; align-items:center; gap:.5rem; margin-bottom:.6rem;
}
.certeza__icono{width:16px; height:16px; flex:none; color:var(--azul)}
.certeza__valor{
  font-family:var(--f-texto); font-weight:600; font-size:var(--e-chico); line-height:1.5;
  color:var(--marino); margin:0;
}
@media (max-width:900px){ .certezas__rejilla{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:460px){ .certezas__rejilla{grid-template-columns:minmax(0,1fr)} }

/* --------------------------------------------------------------------------
   9 · SECCIONES
   -------------------------------------------------------------------------- */
.bloque{padding-block:var(--bloque)}
.bloque--claro{background:var(--claro)}
.bloque--blanco{background:var(--blanco)}
.marino{background:var(--marino); color:var(--blanco)}

.cabeza{max-width:62ch; margin-bottom:clamp(2.25rem,4vw,3.25rem)}
.cabeza--ancha{
  max-width:none; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,26rem);
  gap:var(--e4) var(--e6); align-items:end;
}
@media (max-width:940px){
  .cabeza--ancha{grid-template-columns:minmax(0,1fr); gap:var(--e2); align-items:start}
  .cabeza--ancha .cabeza__intro{max-width:60ch}
}
/* Etiqueta de sección.
   Compuesta como folio de expediente: número de orden en azul, filete
   vertical fino y tema en gris de apoyo. Es la gramática de los folios y
   claves del manual (p. 13) —mono, tabular, tracking +14 %— aplicada como
   membrete clínico, sin recuadro decorativo. */
.cabeza__kicker{
  display:inline-flex; align-items:center;
  margin:0 0 1.15rem;
  line-height:1;
  color:var(--g700);
}
.cabeza__kicker[data-folio]::before{
  content:attr(data-folio);
  color:var(--azul);
  padding-right:.75rem; margin-right:.75rem;
  border-right:1px solid var(--g300);
}
.marino .cabeza__kicker,
.panel-contacto .cabeza__kicker{color:rgba(255,255,255,.82)}
.marino .cabeza__kicker[data-folio]::before,
.panel-contacto .cabeza__kicker[data-folio]::before{
  color:var(--cian); border-color:rgba(255,255,255,.26);
}
.cabeza__intro{color:var(--g700); margin:1rem 0 0; max-width:58ch}
.marino .cabeza__intro{color:rgba(255,255,255,.78)}
.marino .t-seccion{color:var(--blanco)}
.marino .t-subtitulo{color:var(--blanco)}

/* --------------------------------------------------------------------------
   10 · CATEGORÍAS — «Qué surtimos»
   -------------------------------------------------------------------------- */
.rejilla-categorias{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem}
@media (max-width:960px){ .rejilla-categorias{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .rejilla-categorias{grid-template-columns:minmax(0,1fr)} }

.categoria{
  position:relative; overflow:hidden;
  background:var(--blanco); border:1px solid var(--g100);
  border-radius:var(--r-tarjeta); padding:1.75rem;
  display:flex; flex-direction:column;
  transition:border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
/* Filete azul que se traza al pasar el cursor: marca la tarjeta activa sin
   introducir color nuevo ni desplazar el contenido. */
.categoria::before{
  content:''; position:absolute; inset:0 auto auto 0; height:2px; width:100%;
  background:var(--azul); transform:scaleX(0); transform-origin:left;
  transition:transform 320ms cubic-bezier(.22,.61,.36,1);
}
.categoria:hover{border-color:var(--g300); transform:translateY(-3px);
                 box-shadow:0 22px 48px -30px rgba(15,30,61,.5)}
.categoria:hover::before{transform:scaleX(1)}
.categoria:hover .icono{transform:scale(1.06)}
.categoria__alto{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.15rem}
/* Iconos (p. 14): línea 1.75, retícula 24, esquinas r2, remates redondos, sin
   rellenos, en azul primario o gris 700. Nunca en cian. */
.icono{width:26px; height:26px; color:var(--azul); flex:none;
        transition:transform var(--transicion)}
.icono--gris{color:var(--g700)}
.categoria__clave{
  font-family:var(--f-mono); font-weight:500; font-size:var(--e-apoyo);
  letter-spacing:.1em; color:var(--g700); font-variant-numeric:tabular-nums;
  border:1px solid var(--g100); border-radius:var(--r-chip);
  padding:.28rem .5rem; background:var(--fondo);
  transition:color var(--transicion), border-color var(--transicion);
}
.categoria:hover .categoria__clave{color:var(--azul); border-color:var(--azul)}
.categoria__desc{color:var(--g700); font-size:var(--e-chico); line-height:1.579; margin:.7rem 0 1.25rem}
.categoria__lista{list-style:none; margin:auto 0 0; padding:0; border-top:1px solid var(--g100)}
.categoria__lista li{
  display:flex; gap:.6rem; align-items:baseline;
  padding:.55rem 0; border-bottom:1px solid var(--g100);
  font-size:var(--e-chico); line-height:1.5; color:var(--g900);
}
.categoria__lista li:last-child{border-bottom:0}
.categoria__lista li::before{content:''; width:5px; height:5px; flex:none; border-radius:1px;
                             background:var(--azul); transform:translateY(-2px)}

/* --------------------------------------------------------------------------
   11 · PERFILES — «A quién servimos» (p. 04)
   -------------------------------------------------------------------------- */
.rejilla-perfiles{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.25rem}
@media (max-width:1000px){ .rejilla-perfiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .rejilla-perfiles{grid-template-columns:minmax(0,1fr)} }

.perfil{
  background:var(--blanco); border:1px solid var(--g100);
  border-radius:var(--r-tarjeta); overflow:hidden; display:flex; flex-direction:column;
  transition:border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.perfil:hover{border-color:var(--g300); transform:translateY(-3px);
              box-shadow:0 22px 48px -30px rgba(15,30,61,.5)}
.perfil__foto{position:relative; aspect-ratio:4/3; background:var(--g100); overflow:hidden}
.perfil__foto picture{width:100%; height:100%}
.perfil__foto img{width:100%; height:100%; object-fit:cover; transition:transform 500ms cubic-bezier(.22,.61,.36,1)}
/* En una sola columna la tarjeta debe caber entera en pantalla: la fotografía
   pasa a 16:9 y cada tarjeta pierde 65 px de alto. */
@media (max-width:560px){ .perfil__foto{aspect-ratio:16/9} }
.perfil:hover .perfil__foto img{transform:scale(1.035)}
.perfil__cuerpo{padding:1.35rem 1.5rem 1.6rem}
.perfil__rol{display:block; color:var(--azul); margin-bottom:.5rem}
.perfil__nota{color:var(--g700); font-size:var(--e-chico); line-height:1.579; margin:.5rem 0 0}

/* --------------------------------------------------------------------------
   12 · PROCESO — secuencia real, por eso va numerada
   -------------------------------------------------------------------------- */
.rejilla-pasos{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0; border-top:1.5px solid var(--marino);
}
.paso{padding:1.75rem 1.5rem 0 0; position:relative}
.paso + .paso{padding-left:1.5rem; border-left:1px solid var(--g300)}
.paso__alto{display:flex; align-items:baseline; gap:.7rem; margin-bottom:1.2rem}
/* La cifra es dato, por eso va en Plex Mono 500 (p. 13); la etiqueta usa el
   estilo de apoyo. */
.paso__cifra{
  font-family:var(--f-mono); font-weight:500; font-variant-numeric:tabular-nums;
  font-size:var(--e-subtitulo); line-height:1; color:var(--azul);
}
.paso__etiqueta{color:var(--g700)}
.paso__regla{flex:1; height:1px; background:var(--g300); align-self:center}
.paso__titulo{margin-bottom:.6rem}
.paso__texto{color:var(--g700); font-size:var(--e-chico); line-height:1.579; margin:0}
.paso__pie{
  margin-top:1rem; padding-top:.85rem; border-top:1px solid var(--g100);
  color:var(--g700);
}
@media (max-width:900px){
  .rejilla-pasos{grid-template-columns:minmax(0,1fr); border-top:0}
  .paso{padding:1.5rem 0; border-top:1.5px solid var(--marino)}
  .paso + .paso{padding-left:0; border-left:0; border-top:1px solid var(--g300)}
}

/* --------------------------------------------------------------------------
   13 · CATÁLOGO — la pieza se compone como una tabla normativa
   -------------------------------------------------------------------------- */
.catalogo{border:1px solid var(--g100); border-radius:var(--r-tarjeta); overflow:hidden; background:var(--blanco)}
.catalogo__cabeza,
.catalogo__fila{
  display:grid;
  grid-template-columns:minmax(0,10rem) minmax(0,1fr) minmax(0,9rem) minmax(0,11rem);
  gap:1rem; align-items:center;
  padding:1rem 1.35rem;
}
.catalogo__cabeza{background:var(--marino); color:var(--blanco); padding-block:.85rem}
.catalogo__fila{
  position:relative; border-top:1px solid var(--g100);
  transition:background var(--transicion);
}
.catalogo__fila::before{
  content:''; position:absolute; inset:0 auto 0 0; width:2px;
  background:var(--azul); transform:scaleY(0); transform-origin:center;
  transition:transform 260ms cubic-bezier(.22,.61,.36,1);
}
.catalogo__fila:hover{background:var(--fondo)}
.catalogo__fila:hover::before{transform:scaleY(1)}
.catalogo__sku{
  font-family:var(--f-mono); font-weight:500; font-size:var(--e-chico);
  font-variant-numeric:tabular-nums; color:var(--marino);
}
.catalogo__desc{font-size:var(--e-chico); line-height:1.5; color:var(--g900)}
.catalogo__reg{display:block; color:var(--g700); margin-top:.3rem}
.catalogo__cat{color:var(--g700)}
.catalogo__accion{justify-self:end}
.catalogo__accion .boton{padding:.6rem .9rem; font-size:var(--e-apoyo); letter-spacing:.02em}
.catalogo__pie{
  padding:1.1rem 1.35rem; background:var(--fondo); border-top:1px solid var(--g100);
  color:var(--g700); font-size:var(--e-chico); line-height:1.579;
}
@media (max-width:860px){
  .catalogo__cabeza{display:none}
  .catalogo__fila{grid-template-columns:minmax(0,1fr); gap:.55rem; padding:1.35rem}
  .catalogo__accion{justify-self:start; margin-top:.35rem}
}

/* --------------------------------------------------------------------------
   14 · BLOQUE MARINO — posicionamiento + galería
   -------------------------------------------------------------------------- */
.declaracion{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:var(--e4) clamp(2.5rem,6vw,5.5rem); align-items:start;
}
@media (max-width:900px){ .declaracion{grid-template-columns:minmax(0,1fr)} }
.declaracion__texto p:not(.cabeza__kicker){color:rgba(255,255,255,.82); margin:1.25rem 0 0; max-width:52ch}

/* Tabla de compromisos: misma forma que las tablas del manual */
.tabla-ficha{width:100%; border-collapse:collapse; border-top:1px solid rgba(255,255,255,.22)}
.tabla-ficha th,
.tabla-ficha td{
  text-align:left; padding:.95rem 0; vertical-align:top;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.tabla-ficha th{
  font-family:var(--f-mono); font-weight:500; font-size:var(--e-apoyo);
  letter-spacing:.14em; text-transform:uppercase; color:var(--cian);
  width:42%; padding-right:1.5rem; white-space:nowrap;
}
.tabla-ficha td{font-size:var(--e-chico); line-height:1.579; color:rgba(255,255,255,.9)}

/* Por debajo de 440 px no cabe la etiqueta sin partir: la fila se apila y cada
   parte ocupa el ancho completo. */
@media (max-width:440px){
  .tabla-ficha tr{display:block; border-bottom:1px solid rgba(255,255,255,.12)}
  .tabla-ficha th,
  .tabla-ficha td{
    display:block; width:auto; border-bottom:0; padding:0; white-space:normal;
  }
  .tabla-ficha th{padding:.95rem 0 .3rem}
  .tabla-ficha td{padding-bottom:.95rem}
  .mk{white-space:normal}
}

.galeria{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:clamp(2.5rem,4vw,3.5rem)}
@media (max-width:760px){ .galeria{grid-template-columns:minmax(0,1fr)} }
.galeria figure{margin:0; border-radius:var(--r-tarjeta); overflow:hidden;
                background:rgba(255,255,255,.06)}
.galeria img{aspect-ratio:4/3; width:100%; object-fit:cover;
             transition:transform 500ms cubic-bezier(.22,.61,.36,1)}
.galeria figure:hover img{transform:scale(1.035)}
@media (max-width:760px){ .galeria img{aspect-ratio:16/9} }
.galeria figcaption{padding:.9rem 1.1rem; color:rgba(255,255,255,.68)}

/* --------------------------------------------------------------------------
   15 · COTIZACIÓN
   -------------------------------------------------------------------------- */
.cotizacion{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:var(--e5) clamp(2.5rem,5vw,4.5rem); align-items:start;
}
@media (max-width:940px){ .cotizacion{grid-template-columns:minmax(0,1fr)} }

.formulario{
  min-width:0;
  background:var(--blanco); border:1px solid var(--g100);
  border-radius:var(--r-panel); padding:clamp(1.5rem,3vw,2.25rem);
}
.campos{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem}
@media (max-width:560px){ .campos{grid-template-columns:minmax(0,1fr)} }
.campo{display:flex; flex-direction:column; gap:.45rem; min-width:0}
.campo--ancho{grid-column:1/-1}
.campo label{color:var(--g700)}
.campo input,
.campo select,
.campo textarea{
  min-width:0; max-width:100%;
  font-family:var(--f-texto); font-size:var(--e-texto); line-height:1.5; color:var(--marino);
  background:var(--fondo); border:1px solid var(--g300); border-radius:var(--r-boton);
  padding:.8rem .9rem; width:100%;
  transition:border-color var(--transicion), background var(--transicion);
}
.campo textarea{min-height:118px; resize:vertical; line-height:1.6}
.campo input::placeholder,
.campo textarea::placeholder{color:var(--g700)}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:var(--g500)}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none; border-color:var(--azul); background:var(--blanco);
  box-shadow:0 0 0 3px rgba(37,99,235,.14);
}
.campo select{appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234A5262' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .75rem center; background-size:18px;
  padding-right:2.5rem;
}
.formulario__acciones{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.6rem}
.formulario__acciones .boton{flex:1 1 13rem; min-width:0}
.formulario__nota{color:var(--g700); margin:1.1rem 0 0}
.formulario__aviso{
  margin-top:1.1rem; padding:.85rem 1rem; border-radius:var(--r-boton);
  background:var(--claro); color:var(--marino);
  font-size:var(--e-chico); line-height:1.5; display:none;
}
.formulario__aviso.es-visible{display:block}
.formulario__aviso[data-tipo="error"]{background:#FDEDED; color:var(--error)}

.panel-contacto{
  background:var(--marino); color:var(--blanco);
  border-radius:var(--r-panel); padding:clamp(1.5rem,3vw,2.25rem);
}
.panel-contacto .tabla-ficha{margin-top:1.5rem}
.contacto-directo{display:grid; gap:.75rem; margin-top:1.75rem}
.contacto-directo a{
  display:flex; align-items:center; gap:.8rem;
  padding:.9rem 1rem; border-radius:var(--r-boton);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  color:var(--blanco); font-size:var(--e-chico); font-weight:500;
  transition:background var(--transicion), border-color var(--transicion);
}
.contacto-directo a:hover{background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.3)}
.contacto-directo svg{width:18px; height:18px; flex:none; color:var(--cian)}

/* --------------------------------------------------------------------------
   16 · PIE
   -------------------------------------------------------------------------- */
.pie{background:var(--marino); color:var(--blanco); padding-block:clamp(3rem,5vw,4.5rem) 0}
.pie__rejilla{
  display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  min-width:0;
  gap:var(--e4) var(--e5);
}
@media (max-width:1000px){ .pie__rejilla{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .pie__rejilla{grid-template-columns:minmax(0,1fr)} }
.pie__marca img{height:44px; width:auto; margin-bottom:1.25rem}
.pie__marca p{color:rgba(255,255,255,.7); font-size:var(--e-chico); line-height:1.579; margin:0; max-width:34ch}
.pie__titulo{display:block; color:var(--cian); margin-bottom:1rem}
.pie__lista{list-style:none; margin:0; padding:0; display:grid; gap:.6rem}
.pie__lista a,
.pie__lista span{color:rgba(255,255,255,.8); font-size:var(--e-chico); line-height:1.5}
.pie__lista a:hover{color:var(--blanco)}
.pie__lista .mk{white-space:normal}

.pie__legal{
  margin-top:clamp(2.5rem,4vw,3.5rem); padding:1.5rem 0;
  border-top:1px solid rgba(255,255,255,.14);
}
.pie__legal p{color:rgba(255,255,255,.62); font-size:var(--e-chico); line-height:1.579; margin:0 0 .8rem; max-width:92ch}
.pie__datos{
  display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; align-items:center;
  padding-block:1.25rem; border-top:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.6);
}
.pie__colofon{
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
  padding-block:1.25rem 1.75rem; border-top:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.64);
}

/* --------------------------------------------------------------------------
   17 · MOVIMIENTO
   -------------------------------------------------------------------------- */
.js [data-revelar]{opacity:0; transform:translateY(14px)}
.js [data-revelar].es-visible{
  opacity:1; transform:none;
  transition:opacity 620ms cubic-bezier(.22,.61,.36,1), transform 620ms cubic-bezier(.22,.61,.36,1);
}
/* El trazo del pulso se dibuja una sola vez al cargar: es la señal clínica
   del isotipo, no un adorno repetible. */
.js .hero__pulso path{stroke-dasharray:100; stroke-dashoffset:100}
.js .hero__pulso.esta-trazado path{
  stroke-dashoffset:0; transition:stroke-dashoffset 1150ms cubic-bezier(.65,0,.35,1) 320ms;
}
/* La fotografía de portada asienta al cargar: un solo movimiento, lento y
   mínimo, en la misma familia de curvas del resto del sitio. */
@keyframes hero-asienta{from{transform:scale(1.045)}to{transform:scale(1)}}
.js .hero__foto img{animation:hero-asienta 2400ms cubic-bezier(.22,.61,.36,1) 120ms both}

@media (prefers-reduced-motion:reduce){
  .js [data-revelar]{opacity:1; transform:none; transition:none}
  .js .hero__pulso path{stroke-dasharray:none; stroke-dashoffset:0}
  .js .hero__pulso.esta-trazado path{transition:none}
  .js .hero__foto img{animation:none}
  .perfil__foto img,.galeria img,.boton,.categoria,.perfil,
  .categoria::before,.catalogo__fila::before,.icono{transition:none !important}
  .visor__fondo,.visor__burbuja,.visor__img,
  .visor__cerrar,.visor__paso{transition:none !important}
}

/* --------------------------------------------------------------------------
   18 · VISOR DE FOTOGRAFÍAS — burbuja ampliada
   Las fotografías de perfiles y galería se abren sobre la página en una
   burbuja con el radio, la sombra y el folio del sistema. El visor lo
   construye js/eci.js: sin JavaScript no queda rastro de él.
   -------------------------------------------------------------------------- */
.js .perfil__foto,
.js .galeria picture{position:relative; display:block; cursor:zoom-in}

/* Señal de ampliable al pasar el puntero: esquina con flechas hacia afuera */
.js .perfil__foto::after,
.js .galeria picture::after{
  content:""; position:absolute; right:.7rem; bottom:.7rem;
  width:32px; height:32px; border-radius:9px;
  background:rgba(15,30,61,.55)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E")
    center/14px no-repeat;
  opacity:0; transform:translateY(4px);
  transition:opacity var(--transicion), transform var(--transicion);
  pointer-events:none;
}
.js .perfil__foto:hover::after,
.js .galeria picture:hover::after{opacity:1; transform:none}
@media (pointer:coarse){
  .js .perfil__foto::after,
  .js .galeria picture::after{opacity:1; transform:none}
}

.visor{
  position:fixed; inset:0; z-index:150;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem, 3vw, 2.75rem);
}
.visor[hidden]{display:none}
.visor__fondo{
  position:absolute; inset:0; border:0; padding:0; cursor:zoom-out;
  background:rgba(10,19,40,.72);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  backdrop-filter:blur(14px) saturate(1.15);
  opacity:0; transition:opacity 300ms ease;
}
.visor.esta-abierto .visor__fondo{opacity:1}
.visor__burbuja{
  position:relative; margin:0; max-width:min(62rem, 100%);
  border-radius:calc(var(--r-tarjeta) + 6px); overflow:hidden;
  background:var(--marino);
  box-shadow:0 42px 90px -18px rgba(10,19,40,.6);
  opacity:0; transform:scale(.55);
}
.visor.esta-abierto .visor__burbuja{
  opacity:1; transform:none;
  transition:transform 460ms cubic-bezier(.3,1.18,.35,1), opacity 260ms ease;
}
.visor__img{
  display:block; width:100%; max-height:min(78vh, 52rem);
  object-fit:contain; background:var(--marino);
  transition:opacity 240ms ease;
}
.visor__img.esta-cargando{opacity:.35}
.visor__pie{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.95rem 1.25rem;
  border-top:1px solid rgba(255,255,255,.14);
}
.visor__tema{display:inline-flex; align-items:center; gap:.65rem; color:rgba(255,255,255,.85)}
.visor__tema::before{content:""; width:8px; height:8px; border-radius:2.5px; background:var(--cian); flex:none}
.visor__folio{color:rgba(255,255,255,.55)}

.visor__cerrar,.visor__paso{
  position:absolute; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.26); border-radius:999px;
  background:rgba(10,19,40,.45); color:var(--blanco); cursor:pointer;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background var(--transicion), border-color var(--transicion), transform var(--transicion);
}
.visor__cerrar:hover,.visor__paso:hover{background:rgba(10,19,40,.78); border-color:rgba(255,255,255,.45)}
.visor__cerrar:focus-visible,.visor__paso:focus-visible{outline:2px solid var(--cian); outline-offset:2px}
.visor__cerrar{top:.85rem; right:.85rem; width:42px; height:42px}
.visor__cerrar svg{width:17px; height:17px}
.visor__cerrar:hover{transform:rotate(90deg)}
.visor__paso{top:50%; translate:0 -50%; width:44px; height:44px}
.visor__paso svg{width:18px; height:18px}
.visor__paso--ant{left:.85rem}
.visor__paso--ant svg{transform:rotate(180deg)}
.visor__paso--sig{right:.85rem}
@media (max-width:640px){
  .visor{padding:.75rem}
  .visor__pie{padding:.8rem 1rem}
  .visor__paso{top:auto; bottom:4.4rem; translate:0 0}
}

/* --------------------------------------------------------------------------
   19 · PANTALLA TÁCTIL
   Un dedo necesita 44 × 44 px de blanco para acertar sin error (WCAG 2.5.8).
   Las reglas viven en `pointer:coarse` para no dispersar el escritorio.
   -------------------------------------------------------------------------- */
@media (pointer:coarse){
  .boton{min-height:44px}
  .catalogo__accion .boton{padding-block:.85rem}
  .menu-boton{padding:.75rem}

  .barra-utilitaria__fila{padding-block:0}
  .barra-utilitaria__grupo{gap:0 1.75rem}
  .barra-utilitaria__dato{min-height:44px; padding-block:.6rem}

  .nav__enlace{min-height:44px}

  .pie__lista{gap:0}
  .pie__lista li{display:flex}
  .pie__lista a{min-height:44px; display:flex; align-items:center}
  .pie__lista span{display:flex; align-items:center; min-height:38px}

  .contacto-directo a{min-height:48px}
  .campo input,.campo select{min-height:48px}
}

/* El destello por omisión al tocar es negro; se sustituye por el azul de marca. */
a,button,[role="button"],input,select,textarea,summary{
  -webkit-tap-highlight-color:rgba(37,99,235,.18);
}
.boton,.menu-boton,.nav__enlace{touch-action:manipulation}

/* Muescas y barras de gesto: el contenido nunca queda bajo el recorte. */
@supports (padding:max(0px)){
  .contenedor{
    padding-left:max(var(--canal), env(safe-area-inset-left));
    padding-right:max(var(--canal), env(safe-area-inset-right));
  }
}

@media print{
  .barra-utilitaria,.encabezado,.menu-boton,.formulario__acciones{display:none}
  body{background:#fff}
  .hero{background:#fff}
}