/* ==========================================================================
   Cyber Pro — hoja de estilo unica

   Registro: documento de operacion. Cero esquinas redondeadas, filetes de 2px,
   condensada en mayusculas para los rotulos y una sans de trabajo para todo el
   cuerpo. La referencia es un catalogo de servicio o un procedimiento interno
   de turno, no una pagina de mercadeo.

   Decision deliberada contra el sector: la convencion en proveedores de TI
   gestionada son los sellos de certificacion en la portada, los contadores de
   "anos de experiencia" y la rejilla de tarjetas de servicio. Nada de eso se
   usa aqui, primero porque seria inventar credenciales y segundo porque ya lo
   hace todo el mundo. El activo diferencial es la matriz de severidad: casi
   nadie en el sector publica el compromiso real de atencion.

   Fuera tambien la monoespaciada y el punto con halo: eran el tell mas obvio
   de plantilla de herramienta para desarrolladores.
   ========================================================================== */

:root {
  --fondo:   #0C1220;   /* azul-negro, no gris neutro */
  --panel:   #141C2E;
  --filete:  #26314A;
  --blanco:  #FFFFFF;   /* 18.70 sobre fondo */
  --apagado: #7C8798;   /* 5.14 sobre fondo — pasa AA */
  /* Rojo de alarma. 4.34 sobre el fondo y 4.31 sobre blanco: sirve para
     titulares grandes, filetes y bloques, NO para texto de cuerpo. Ese es su
     limite y esta respetado en todo el archivo. */
  --rojo:    #E63329;

  --cond: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --caja:   74rem;
  --margen: clamp(1.25rem, 4vw, 3rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--apagado);
  font: 400 1.0625rem/1.6 var(--sans);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--blanco); text-decoration: underline; text-decoration-color: var(--rojo); text-decoration-thickness: 2px; text-underline-offset: .2em; }
a:hover { color: var(--rojo); }
:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; }
strong { color: var(--blanco); font-weight: 700; }

.saltar { position: absolute; left: -9999px; background: var(--rojo); color: #fff; padding: .6rem 1rem; font-weight: 700; z-index: 10; }
.saltar:focus { left: 1rem; top: .6rem; }

.marco { max-width: var(--caja); margin: 0 auto; padding: 0 var(--margen); }

/* Marcador de dato pendiente. Chillon a proposito. */
.pend { display: inline-block; background: var(--rojo); color: #fff; padding: .05em .4em; font-weight: 700; font-size: .9em; }

/* ---------- barra ---------- */
.barra { border-bottom: 2px solid var(--rojo); }
.barra__marco {
  max-width: var(--caja); margin: 0 auto;
  padding: 1rem var(--margen);
  display: flex; flex-wrap: wrap; gap: .75rem 2rem;
  align-items: center; justify-content: space-between;
}
.barra__logo img { height: 26px; width: auto; }
.barra nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.barra nav a {
  font: 700 1.0625rem/1 var(--cond); text-transform: uppercase;
  color: var(--apagado); text-decoration: none;
}
.barra nav a:hover { color: var(--blanco); }

/* ---------- encabezado ---------- */
.encabezado { padding: clamp(2.25rem, 5vw, 4rem) 0 clamp(1.75rem, 4vw, 2.75rem); }
.encabezado__linea { margin: 0 0 1.25rem; font-weight: 700; font-size: .95rem; color: var(--rojo); text-transform: uppercase; letter-spacing: .02em; }

h1 {
  margin: 0 0 1.5rem; max-width: 26ch;
  font: 700 clamp(2.2rem, 6.5vw, 4rem)/1.02 var(--cond);
  text-transform: uppercase; color: var(--blanco);
}

.parrafo { max-width: 42rem; margin: 0 0 1.1rem; font-size: 1.0625rem; }
.parrafo:last-child { margin-bottom: 0; }
/* La entrada carga el peso del mensaje: el gris de servicio (5.14) cumple AA
   pero se lee apagado a ese tamano. Un tono mas claro solo para la entrada. */
.parrafo--entrada { color: #B4BECD; font-size: 1.125rem; }

/* ---------- secciones ---------- */
.seccion { padding: clamp(2rem, 4.5vw, 3.25rem) 0; border-top: 1px solid var(--filete); }

h2 {
  margin: 0 0 1.5rem;
  font: 700 clamp(1.3rem, 3vw, 1.75rem)/1.1 var(--cond);
  text-transform: uppercase; color: var(--blanco);
  padding-bottom: .5rem; border-bottom: 2px solid var(--rojo);
}
h3 { margin: 0 0 .35rem; font: 700 1.1875rem/1.2 var(--cond); text-transform: uppercase; color: var(--blanco); }

/* ---------- catalogo de servicios ---------- */
.catalogo { list-style: none; margin: 0; padding: 0; }
.catalogo > li {
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0 1.25rem;
  padding: 1.15rem 0; border-bottom: 1px solid var(--filete);
}
.catalogo > li:last-child { border-bottom: 0; }
.catalogo__n { font: 700 1.75rem/1.05 var(--cond); color: var(--rojo); font-variant-numeric: tabular-nums; }
.catalogo p { margin: 0; max-width: 42rem; }

/* ---------- matriz de severidad ---------- */
.envoltura { overflow-x: auto; margin-bottom: 1.25rem; border: 1px solid var(--filete); }
.matriz { width: 100%; min-width: 42rem; border-collapse: collapse; text-align: left; }
.matriz caption { text-align: left; padding: 0 0 .85rem; color: var(--apagado); font-size: .95rem; }
.matriz th, .matriz td { padding: .8rem .95rem; border-bottom: 1px solid var(--filete); vertical-align: top; }
.matriz thead th { background: var(--panel); font: 700 1.0625rem/1.1 var(--cond); text-transform: uppercase; color: var(--blanco); white-space: nowrap; }
.matriz tbody tr:last-child th, .matriz tbody tr:last-child td { border-bottom: 0; }
.matriz tbody th { width: 4.5rem; }
.sev { display: inline-block; min-width: 2rem; padding: .1rem 0; text-align: center; font: 700 1.125rem/1.3 var(--cond); color: #fff; background: var(--filete); }
.sev--1 { background: var(--rojo); }
.sev--2 { background: #A6291F; }
.sev--3 { background: #4C5773; }

.nota {
  max-width: 42rem; margin: 0 0 2.25rem;
  padding: .9rem 1.1rem;
  border-left: 4px solid var(--rojo); background: var(--panel);
  color: var(--blanco); font-size: 1rem;
}

/* ---------- procedimiento ---------- */
.procedimiento { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: 1px; background: var(--filete); border: 1px solid var(--filete); }
.procedimiento > li { background: var(--panel); padding: 1.25rem 1.15rem; }
.procedimiento__n { display: block; margin-bottom: .5rem; font: 700 1.5rem/1 var(--cond); color: var(--rojo); font-variant-numeric: tabular-nums; }
.procedimiento p { margin: 0; font-size: 1rem; }

/* ---------- alcance ---------- */
.alcance { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: 1.75rem; }
.alcance > article { padding-top: .9rem; border-top: 2px solid var(--filete); }
.alcance > article:first-child { border-top-color: var(--rojo); }
.alcance__rom { margin: 0 0 .4rem; font: 700 1.0625rem/1 var(--cond); color: var(--rojo); }
.alcance p:last-child { margin: 0; font-size: 1rem; }

/* ---------- contacto ---------- */
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1.5rem 2rem; margin: 0; max-width: 62rem; }
.datos dt { font: 700 1.0625rem/1.1 var(--cond); text-transform: uppercase; color: var(--rojo); margin-bottom: .3rem; }
.datos dd { margin: 0; color: var(--blanco); }

/* ---------- pie ---------- */
.pie { border-top: 2px solid var(--rojo); margin-top: clamp(2rem, 4vw, 3rem); background: var(--panel); }
.pie__marco { max-width: var(--caja); margin: 0 auto; padding: clamp(1.75rem, 4vw, 2.5rem) var(--margen); }
.pie img { height: 26px; width: auto; margin-bottom: 1.25rem; }
.pie__objeto { max-width: 48rem; margin: 0 0 1.15rem; font-size: .9375rem; line-height: 1.7; }
.pie__objeto b { color: var(--blanco); font-weight: 700; }
.pie__legal { margin: 0; font-size: .875rem; line-height: 1.8; color: #5F6B7E; }

/* ---------- estrecho ---------- */
@media (max-width: 40rem) {
  .catalogo > li { grid-template-columns: 1fr; gap: .2rem; }
  .catalogo__n { line-height: 1.2; }
}

/* ==========================================================================
   FONDOS FOTOGRAFICOS
   Velos derivados de medir la luminancia p99.5 de cada imagen tratada, no
   elegidos a ojo. Opacidades minimas para AA (4.5) medidas:
     pasillo-racks  titular 0.00 / entrada 0.00  ->  se usa 0.16-0.30
     panel-fibra    h2 0.17 / parrafo 0.40       ->  se usa 0.50-0.60
   El pasillo de racks salio con una luminancia p99.5 de 0.100: ya es tan
   oscuro que el texto blanco pasa AA sin velo alguno. El velo del 16-30% esta
   ahi solo para cubrir el pixel especular mas claro (max 0.186, que daria
   4.45, tres centesimas por debajo del umbral) y para unificar el tono.
   La tabla de severidad va sobre fondo solido: el dato de un compromiso
   contractual no se lee sobre una fotografia.
   ========================================================================== */

.encabezado {
  background-color: var(--fondo);   /* respaldo si la imagen no carga */
  background-image:
    linear-gradient(rgba(12, 18, 32, .30), rgba(12, 18, 32, .16)),
    url("img/pasillo-racks-900.webp");
  background-size: cover;
  /* Anclado a la izquierda: el tercio derecho del original es el que se quema,
     y centrado volvia a entrar en cuadro desequilibrando la seccion. */
  background-position: left center;
  background-repeat: no-repeat;
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2.25rem, 5vw, 4rem);
}
/* El rojo de marca da 2.6 sobre la composicion de esta imagen: no llega ni al
   umbral de 3.0 de elementos de interfaz. Sobre la foto el rotulo va blanco.
   El rojo sigue estando en el filete de la barra, sobre fondo solido. */
.encabezado .encabezado__linea { color: #FFFFFF; }
.encabezado .parrafo--entrada { color: #C9D2DF; }

.seccion--fondo {
  background-color: var(--fondo);
  background-image:
    linear-gradient(rgba(12, 18, 32, .60), rgba(12, 18, 32, .50)),
    url("img/panel-fibra-900.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-top: 0;
  padding: clamp(2.25rem, 5vw, 3.5rem) 0;
}
.seccion--fondo .parrafo { color: #C9D2DF; }
/* la matriz, la nota y las cuatro celdas del tramite ya tienen relleno solido */
.seccion--fondo .envoltura { background: var(--fondo); }

@media (min-width: 56rem) {
  .encabezado { background-image:
    linear-gradient(rgba(12, 18, 32, .30), rgba(12, 18, 32, .16)),
    url("img/pasillo-racks-1400.webp"); }
  .seccion--fondo { background-image:
    linear-gradient(rgba(12, 18, 32, .60), rgba(12, 18, 32, .50)),
    url("img/panel-fibra-1400.webp"); }
}

@media print {
  body { background: #fff; color: #111; }
  .encabezado, .seccion--fondo { background: none !important; }
  .encabezado h1, h2, h3, .datos dd { color: #111 !important; }
  .encabezado .encabezado__linea, .encabezado .parrafo--entrada,
  .seccion--fondo .parrafo, .parrafo { color: #333 !important; }
}