/* ============================================================
   CONECTA Servicios Informáticos — Sistema visual v2
   Estilo "Blueprint Técnico": plano de circuito (PCB),
   paneles biselados, trazos azul/rojo, navy + rojo ladrillo.
   ============================================================ */

:root {
  /* ---- Marca / paleta del deck ---- */
  --navy:       #173a7e;   /* azul profundo de títulos y trazos */
  --navy-deep:  #122f66;
  --navy-900:   #0d2147;
  --blue:       #1f57b5;   /* azul medio de trazos */
  --blue-bright:#0a5bef;   /* azul logo / estados activos */
  --blue-tint:  #e7eef9;
  --blue-tint2: #d3e0f4;
  --red:        #be2a23;   /* rojo ladrillo del deck */
  --red-bright: #ee1b22;   /* rojo logo */
  --red-deep:   #a01f1a;
  --red-tint:   #fbe9e8;

  /* ---- Superficies / blueprint ---- */
  --paper:      #fbfcfe;   /* fondo papel */
  --paper-2:    #f3f6fb;
  --grid:       #e6ebf4;   /* línea de cuadrícula fina */
  --grid-2:     #dde5f1;   /* línea de cuadrícula marcada */
  --panel:      #e9eff6;   /* relleno de panel técnico */
  --panel-2:    #eef3fa;
  --panel-line: #c5d3e8;   /* borde sutil de panel */

  /* ---- Tinta / texto ---- */
  --ink:    #25303f;       /* slate oscuro (citas/titulares alt) */
  --slate:  #4a5670;
  --body:   #44506a;       /* cuerpo */
  --mute:   #76849c;       /* secundario */
  --line:   #e2e8f1;
  --line-2: #edf1f8;

  /* ---- Tipografía ---- */
  --font-head: "Montserrat", system-ui, sans-serif;
  --font-body: "Mulish", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* ---- Sistema ---- */
  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 64px);
  --bevel: 13px;          /* corte de esquina de paneles */
  --bevel-sm: 9px;
  --radius: 4px;
  --shadow-sm: 0 1px 2px rgba(18,47,102,.06), 0 2px 4px rgba(18,47,102,.05);
  --shadow:    0 14px 34px -16px rgba(18,47,102,.30), 0 3px 8px rgba(18,47,102,.06);
  --shadow-lg: 0 40px 80px -30px rgba(18,47,102,.40);
  --ease: cubic-bezier(.22,.61,.36,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 38px 38px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

h1,h2,h3,h4 { font-family: var(--font-head); margin: 0; line-height: 1.05; letter-spacing: -.015em; font-weight: 800; color: var(--navy); }
p { margin: 0; }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); position: relative; }
.section { padding-block: clamp(64px, 9vw, 124px); position: relative; }
.section--soft { background: rgba(243,246,251,.7); }
.section--navy { background: var(--navy-deep); color: #fff; }
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }

/* fondo blueprint reforzado para secciones oscuras */
.section--navy {
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 38px 38px;
  background-color: var(--navy-deep);
}

/* ---------- Eyebrow técnico ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 0;
  border-top: 2px solid var(--red);
  display: inline-block;
  position: relative;
}
.eyebrow::after {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red);
  margin-left: -6px;
}
.eyebrow--light { color: #8fb4f5; }

.h-sec {
  font-size: clamp(30px, 4.4vw, 50px);
  margin-top: 18px;
  max-width: 20ch;
  text-wrap: balance;
}
.lead { font-size: clamp(16.5px, 1.4vw, 19px); color: var(--body); max-width: 62ch; }
.section--navy .lead { color: #b9c8e4; }

/* ============================================================
   UTILIDADES DEL ESTILO BLUEPRINT
   ============================================================ */

/* --- Bisel de esquinas opuestas (TL + BR) --- */
.bevel { clip-path: polygon(var(--bevel) 0, 100% 0, 100% calc(100% - var(--bevel)), calc(100% - var(--bevel)) 100%, 0 100%, 0 var(--bevel)); }
/* --- Octágono: las 4 esquinas cortadas --- */
.oct { clip-path: polygon(var(--bevel) 0, calc(100% - var(--bevel)) 0, 100% var(--bevel), 100% calc(100% - var(--bevel)), calc(100% - var(--bevel)) 100%, var(--bevel) 100%, 0 calc(100% - var(--bevel)), 0 var(--bevel)); }

/* --- Panel técnico: relleno con borde biselado (doble línea) --- */
.tpanel { position: relative; background: var(--panel-line); padding: 1.5px; }
.tpanel--oct { } /* usar junto con .oct en ambos niveles */
.tpanel__in { position: relative; background: var(--panel); height: 100%; }
.tpanel__in::after { /* línea interior fina = doble borde */
  content: ""; position: absolute; inset: 4px; border: 1px solid var(--panel-line);
  opacity: .5; pointer-events: none;
}

/* --- Tarjeta técnica con borde de color --- */
.tcard { position: relative; background: var(--blue); padding: 1.5px; transition: transform .3s var(--ease), background .3s; }
.tcard--red { background: var(--red); }
.tcard__in { position: relative; background: #fff; height: 100%; }

/* --- Corchetes de enfoque en las 4 esquinas --- */
.brackets { position: relative; }
.brk-corner { position: absolute; width: 18px; height: 18px; pointer-events: none; z-index: 2; }
.brk-corner::before, .brk-corner::after { content: ""; position: absolute; background: var(--blue); }
.brk-corner::before { width: 100%; height: 2px; top: 0; }
.brk-corner::after { width: 2px; height: 100%; top: 0; }
.brk-corner--tl { top: var(--brk-inset, -1px); left: var(--brk-inset, -1px); }
.brk-corner--tr { top: var(--brk-inset, -1px); right: var(--brk-inset, -1px); transform: scaleX(-1); }
.brk-corner--bl { bottom: var(--brk-inset, -1px); left: var(--brk-inset, -1px); transform: scaleY(-1); }
.brk-corner--br { bottom: var(--brk-inset, -1px); right: var(--brk-inset, -1px); transform: scale(-1); }
.brk-corner--red::before, .brk-corner--red::after { background: var(--red); }

/* --- Nodo octagonal numerado --- */
.octnode { display: inline-grid; place-items: center; width: 48px; height: 48px; background: var(--blue); padding: 2px; }
.octnode.oct, .octnode { clip-path: polygon(var(--bevel-sm) 0, calc(100% - var(--bevel-sm)) 0, 100% var(--bevel-sm), 100% calc(100% - var(--bevel-sm)), calc(100% - var(--bevel-sm)) 100%, var(--bevel-sm) 100%, 0 calc(100% - var(--bevel-sm)), 0 var(--bevel-sm)); }
.octnode--red { background: var(--red); }
.octnode--lg { width: 60px; height: 60px; }
.octnode__in { width: 100%; height: 100%; display: grid; place-items: center; background: var(--panel-2); font-family: var(--font-head); font-weight: 800; font-size: 16px; color: var(--navy); }
.octnode--red .octnode__in { color: var(--red); }
.octnode--solid .octnode__in { background: var(--blue); color: #fff; }
.octnode--solid.octnode--red .octnode__in { background: var(--red); color: #fff; }

/* --- Trazo conector horizontal con puntos --- */
.trace-line { display: flex; align-items: center; gap: 0; height: 12px; }
.trace-line::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); flex: 0 0 auto; }
.trace-line::after { content: ""; height: 2px; background: linear-gradient(90deg, var(--blue), transparent); flex: 1; }

/* --- Etiqueta tipo "tag" (Máx 48 hrs) --- */
.tagchip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .03em; color: #fff; background: var(--blue);
  padding: 6px 13px 6px 12px;
  white-space: nowrap; flex: 0 0 auto;
  clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%);
}
.tagchip svg { width: 14px; height: 14px; flex: 0 0 auto; }
.tagchip--red { background: var(--red); }

/* ---------- Botones (beveled) ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: .01em;
  padding: 14px 26px;
  border: 0; background: var(--navy); color: #fff;
  clip-path: polygon(var(--bevel-sm) 0, 100% 0, 100% calc(100% - var(--bevel-sm)), calc(100% - var(--bevel-sm)) 100%, 0 100%, 0 var(--bevel-sm));
  transition: transform .25s var(--ease), background .2s, color .2s, box-shadow .25s;
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; }
.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--navy-deep); transform: translateY(-2px); }
.btn--blue { background: var(--blue-bright); color: #fff; }
.btn--blue:hover { background: var(--navy); transform: translateY(-2px); }
.btn--red { background: var(--red); color: #fff; }
.btn--red:hover { background: var(--red-deep); transform: translateY(-2px); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #11151c; transform: translateY(-2px); }
.btn--ghost { background: var(--paper); color: var(--navy); box-shadow: inset 0 0 0 1.6px var(--panel-line); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.6px var(--blue); color: var(--blue); transform: translateY(-2px); }
.btn--outline-light { background: rgba(255,255,255,.05); color: #fff; box-shadow: inset 0 0 0 1.6px rgba(255,255,255,.3); }
.btn--outline-light:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }
.btn--lg { padding: 17px 32px; font-size: 15.5px; }

.arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Image placeholder ---------- */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(135deg, #e3e9f3 0 11px, #eef2f9 11px 22px);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  color: var(--mute);
}
/* La foto llena el hueco y se recorta por el centro: la proporción la manda el
   CSS del contenedor, no el archivo. */
.ph__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph__tag {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 0 1px var(--panel-line);
  padding: 7px 12px;
  color: var(--slate);
  text-align: center;
  max-width: 82%;
}
.ph--navy { background: repeating-linear-gradient(135deg, #11306a 0 11px, #0f2a5e 11px 22px); }
.ph--navy .ph__tag { background: rgba(13,33,71,.7); color: #9db2dc; box-shadow: 0 0 0 1px rgba(255,255,255,.16); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Pills / chips ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .03em;
  padding: 7px 13px;
  background: var(--blue-tint); color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--blue-tint2);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); display: inline-block; }
.dot--red { background: var(--red); }
.dot--green { background: #1f9d57; }

/* ---------- Circuitos decorativos (SVG) ---------- */
.circuits { position: absolute; pointer-events: none; z-index: 0; }
.circuits path, .circuits line, .circuits polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.circuits .c-blue { stroke: var(--blue); }
.circuits .c-red { stroke: var(--red); }
.circuits .c-soft { stroke: var(--grid-2); }
.circuits circle.n-blue { fill: var(--blue); }
.circuits circle.n-red { fill: var(--red); }
.circuits circle.n-hollow { fill: var(--paper); stroke: var(--blue); }

/* ---------- Footer ---------- */
.app-footer { background: var(--navy-900); color: #c7d2e8; position: relative; }

/* ---------- Utilidad ---------- */
.text-red { color: var(--red); }
.text-blue { color: var(--blue); }
.text-navy { color: var(--navy); }
.mono { font-family: var(--font-mono); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }