/* ============================================================
   PIEL — tecnomedia.pe
   Patrón "Enterprise Gateway", estilo "Trust & Authority".
   Se carga DESPUÉS de nucleo.css y sitio.css y manda sobre los dos.

   Encargo: "son 2 web diferentes, no 1". Esta es la de la EMPRESA:
   institucional, densa, de proveedor con años encima. Esquinas poco
   redondeadas, sombras cortas, reglas horizontales, nada de auroras.
   ============================================================ */

/* ---------- 1. TIPOGRAFÍA PROPIA ---------- */
:root{
  --tipo: "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --titular: "Poppins", "Open Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}
h1,h2,h3,h4,.version__tit,.tarjeta__titulo,.acor__btn,.cifra__n{
  font-family:var(--titular);
  letter-spacing:-.018em;   /* menos apretado que la otra web */
  font-weight:600;
}
h1{font-weight:700;letter-spacing:-.024em;line-height:1.12}
h2{font-weight:600;letter-spacing:-.02em;line-height:1.16}
body{line-height:1.68;letter-spacing:.002em}

/* escala más contenida: una web corporativa no grita */
:root{
  --t-3xl: clamp(1.86rem, 1.50rem + 1.72vw, 2.86rem);
  --t-4xl: clamp(2.14rem, 1.62rem + 2.48vw, 3.72rem);
}

/* ---------- 2. FORMA: ESQUINAS MARCADAS ---------- */
:root{
  --r-xs: 3px;  --r-sm: 5px;  --r-md: 7px;
  --r-lg: 9px;  --r-xl: 12px; --r-full: 4px;   /* ni una píldora en toda la web */

  --sombra-1: 0 1px 0 rgba(15,32,61,.05), 0 1px 3px rgba(15,32,61,.07);
  --sombra-2: 0 1px 0 rgba(15,32,61,.06), 0 6px 16px -8px rgba(15,32,61,.18);
  --sombra-3: 0 2px 0 rgba(15,32,61,.06), 0 18px 40px -20px rgba(15,32,61,.28);

  --v-1: .14s; --v-2: .22s; --v-3: .34s;        /* movimiento más seco */
  --sec-y: clamp(3rem, 6vw, 5.6rem);            /* secciones más juntas */
  --ancho: 1180px;
}
.btn{border-radius:6px;font-weight:600;letter-spacing:.005em}
.btn::after{display:none}                        /* sin el brillo que cruza */
.btn:hover{transform:none;box-shadow:var(--sombra-2)}
.btn--acento{color:#fff;background:#b45309}      /* ámbar de autoridad, no naranja de app */
.btn--acento:hover{background:#92400e}
.chip,.eyebrow{border-radius:3px}
.tarjeta,.version,.maqueta,.tabla-env,.cierre{border-radius:8px}
.wa,.arriba{border-radius:6px}
.mod{border-radius:4px}

/* ---------- 3. EL SUPERTÍTULO, EN VERSIÓN INSTITUCIONAL ---------- */
.eyebrow{
  background:transparent;border:0;padding:0;
  color:var(--marca-texto);font-family:var(--mono);font-weight:500;
  letter-spacing:.1em;gap:.7rem;
}
.eyebrow::before{
  width:24px;height:2px;border-radius:0;background:var(--acento);
  animation:none;box-shadow:none;
}

/* ---------- 4. NADA DE DEGRADADOS SOBRE TEXTO ---------- */
/* Es el tic visual que más delata una landing de IA. Aquí el énfasis va en
   color plano y en un subrayado grueso, como en un informe. */
.deg,.deg--anima{
  background:none !important;color:var(--marca-texto) !important;
  -webkit-text-fill-color:currentColor;animation:none !important;
  position:relative;
}
.cifra__n{background:none;-webkit-text-fill-color:currentColor;color:var(--marca-texto)}

/* ---------- 5. FONDO: SIN AURORAS, CON RETÍCULA ---------- */
.aurora{display:none}
.portada{
  padding-block:clamp(5.5rem,10vw,8rem) var(--sec-y);
  border-bottom:1px solid var(--borde);
  background:
    linear-gradient(180deg, color-mix(in srgb,var(--marca) 4%,transparent) 0%, transparent 62%),
    var(--fondo);
}
.malla{
  background-image:
    linear-gradient(to right, var(--borde) 1px, transparent 1px),
    linear-gradient(to bottom, var(--borde) 1px, transparent 1px);
  background-size:76px 76px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 78%);
  mask-image:linear-gradient(180deg,#000 0%,transparent 78%);
  opacity:.5;
}
/* Filete de marca arriba del todo, como el membrete de un papel oficial.
   Va DEBAJO de la barra de progreso, que ocupa la misma franja: si los dos se
   pintan en top:0 el degradado de una se ve encima del corte seco del otro. */
body::before{
  content:"";position:fixed;inset:0 0 auto;height:3px;z-index:998;
  background:var(--borde-2);
}
.progreso{height:3px;background:var(--acento)}   /* color plano, sin degradado */

/* ---------- 6. CABECERA CON BARRA DE UTILIDAD ---------- */
.nav{padding-block:.55rem;background:var(--fondo);backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:1px solid var(--borde);top:3px}
.nav[data-pegado="1"]{background:var(--fondo);box-shadow:var(--sombra-1)}
.nav__enlace{border-radius:3px;font-weight:600;font-size:var(--t-sm);color:var(--texto-2)}
.nav__enlace:hover,.nav__enlace[aria-current="true"]{background:transparent;color:var(--marca-texto)}
.nav__enlace[aria-current="true"]{box-shadow:inset 0 -2px 0 var(--acento)}
.tema-btn{border-radius:5px}
.nav__hamb{border-radius:5px}

/* ---------- 7. SECCIONES SEPARADAS POR REGLA, NO POR COLOR ---------- */
.sec{border-top:1px solid var(--borde)}
.sec--alt{background:var(--fondo-2)}
.sec:first-of-type{border-top:0}

/* ---------- 8. TARJETAS DE FICHA, NO DE APP ---------- */
.tarjeta{box-shadow:none;border-color:var(--borde-2)}
.tarjeta:hover{transform:none;box-shadow:var(--sombra-2);border-color:var(--marca)}
.tarjeta--foco::before{display:none}
.tarjeta__icono{
  width:38px;height:38px;border-radius:5px;
  background:var(--marca);color:#fff;border:0;
}
.tarjeta:hover .tarjeta__icono{transform:none;background:var(--marca-oscuro)}
.version{box-shadow:none;border-color:var(--borde-2)}
.version:hover{transform:none;box-shadow:var(--sombra-3)}
.version::after{display:none}
.version__sigla{border-radius:5px}

/* tabla: aire de documento */
.tabla thead th{background:var(--marca);color:#fff;letter-spacing:.06em}
.tabla tbody tr:hover{background:var(--fondo-3)}

/* ---------- 9. MOVIMIENTO CONTENIDO ---------- */
[data-anima]{transform:translateY(14px) !important}
[data-anima="izq"],[data-anima="der"]{transform:translateY(14px) !important}
[data-anima].visto{transform:none !important;transition-duration:.45s}
.palabra{transform:translateY(.22em);transition-duration:.36s}
.maqueta--3d,.maqueta--3d:hover{transform:none}
.maqueta{border-radius:8px;box-shadow:var(--sombra-3)}
.maqueta__barra{border-radius:8px 8px 0 0}
.mq-fila{border-radius:4px}
.mq-eti{border-radius:3px}
.cinta__pista{animation-duration:52s}

/* ---------- 10. PIE DE MEMBRETE ---------- */
.pie{background:var(--fondo-2);border-top:3px solid var(--marca)}
.pie__tit{letter-spacing:.09em;color:var(--marca-texto)}
.pie__abajo{font-family:var(--mono);font-size:11px}

/* ---------- 11. BLOQUE DE CIERRE, SOBRIO ---------- */
.cierre{
  background:var(--marca);
  border-radius:8px;
}
.cierre::before{display:none}
.cierre::after{opacity:.08;background-size:44px 44px}

/* ---------- 12. FORMULARIO DE EXPEDIENTE ---------- */
.campo input,.campo textarea,.campo select{border-radius:4px;border-width:1px}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  border-color:var(--marca-texto);box-shadow:0 0 0 3px color-mix(in srgb,var(--marca) 16%,transparent)}
.campo__et{font-weight:600;color:var(--texto);letter-spacing:.01em}
.aviso{border-radius:4px}

/* ---------- 13. OSCURO: AZUL DE MEDIANOCHE, NO NEGRO ---------- */
:root[data-tema="oscuro"]{
  --fondo:#0a1220; --fondo-2:#0e1929; --fondo-3:#142338; --panel:#0e1a2c;
  --borde:#1d2f47; --borde-2:#2a4160;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --fondo:#0a1220; --fondo-2:#0e1929; --fondo-3:#142338; --panel:#0e1a2c;
    --borde:#1d2f47; --borde-2:#2a4160;
  }
}
:root[data-tema="oscuro"] .tarjeta__icono{background:var(--marca-claro);color:#04101d}
:root[data-tema="oscuro"] .tabla thead th{background:var(--fondo-3);color:var(--texto)}
:root[data-tema="oscuro"] .deg{color:var(--marca-claro) !important}
:root[data-tema="oscuro"] .cifra__n{color:var(--marca-claro)}
:root[data-tema="oscuro"] .btn--acento{background:#d97706;color:#1a1000}
:root[data-tema="oscuro"] .btn--acento:hover{background:#f59e0b}

/* ---------- 14. MÓVIL ---------- */
@media (max-width:1080px){
  .nav__enlaces{border-radius:8px}
  .nav__enlace[aria-current="true"]{box-shadow:inset 3px 0 0 var(--acento)}
}

/* ---------- 15. LA ÚLTIMA SECCIÓN CIERRA EN AZUL PLENO ---------- */
/* La web corporativa no alterna bloques de color como la de producto, pero el
   contacto del final gana con un fondo firme. Solo esa: la marca nucleo.js. */
.sec--color[data-alt-pos="ultima"]{
  background:linear-gradient(172deg,var(--marca) 0%,var(--marca-oscuro) 100%);
  color:#eaf2f8;
  --texto:#ffffff; --texto-2:#bcd3e4; --texto-3:#8fb0c8;
  --panel:rgba(255,255,255,.07); --borde:rgba(255,255,255,.16); --borde-2:rgba(255,255,255,.28);
  --fondo:rgba(255,255,255,.06); --fondo-2:rgba(255,255,255,.05); --fondo-3:rgba(255,255,255,.1);
  --marca-texto:#ffffff; --marca-06:rgba(255,255,255,.08); --marca-12:rgba(255,255,255,.18);
  border-top:0;
}
.sec--color[data-alt-pos="ultima"] h2{color:#fff}
.sec--color[data-alt-pos="ultima"] .deg{color:var(--acento-suave) !important}
.sec--color[data-alt-pos="ultima"] .eyebrow{color:var(--acento-suave)}
.sec--color[data-alt-pos="ultima"] .tarjeta{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.sec--color[data-alt-pos="ultima"] .tarjeta__icono{background:rgba(255,255,255,.16);color:#fff}
.sec--color[data-alt-pos="ultima"] .lista-check svg{color:var(--acento-suave)}
.sec--color[data-alt-pos="ultima"] .campo input,
.sec--color[data-alt-pos="ultima"] .campo textarea,
.sec--color[data-alt-pos="ultima"] .campo select{
  background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);color:#fff}
.sec--color[data-alt-pos="ultima"] .campo input::placeholder,
.sec--color[data-alt-pos="ultima"] .campo textarea::placeholder{color:#a9c4d8}
.sec--color[data-alt-pos="ultima"] .campo__et{color:#dbe9f3}
.sec--color[data-alt-pos="ultima"] .btn--marco{--btn-fg:#fff;--btn-bd:rgba(255,255,255,.42)}
.sec--color[data-alt-pos="ultima"] .btn--marco:hover{--btn-bd:#fff;background:rgba(255,255,255,.14)}

/* ---------- 16. LA CABECERA NO SE PARTE ---------- */
@media (min-width:1081px) and (max-width:1400px){
  .nav__enlace{padding-inline:.55rem;font-size:var(--t-xs)}
  .nav__acciones .btn{padding:.72rem 1.05rem;font-size:var(--t-xs)}
  .tema-btn{width:36px;height:36px}
}