/* Calidad y Cumplimiento — portal (landing y formulario de solicitud), 6-nov-2026.
   Tema claro/oscuro con data-theme (llave fongtek-quality-theme en localStorage, ver theme.js).
   Hero: ilustración propia en versión oscura y clara (escritorio y celular), se cambia con el tema.
   Marca FONGTEK: navy #041E42, teal #00C1D5, dark #131E29, acento naranja #ff751f.
   Tipografía web: Archivo / IBM Plex con respaldo (la CSP solo permite recursos propios). */
/* Tipografía de marca alojada en el propio sitio (SIL Open Font License); la CSP solo permite recursos propios. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url('../fonts/archivo-var.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap; src: url('../fonts/plex-sans-var.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/plex-mono-600.woff2') format('woff2'); }

:root{
  --fongtek-navy:#041E42; --fongtek-teal:#00C1D5; --fongtek-dark:#131E29;
  --fongtek-red:#E4002B; --fongtek-green:#3CDBC0; --fongtek-accent2:#ff751f; --fongtek-gray:#8A9BA8;
  --font-display:'Archivo','Arial Narrow',Arial,sans-serif;
  --font-sans:'IBM Plex Sans','Segoe UI',Arial,sans-serif;
  --font-mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
  --bg:#0A1320; --bg-rgb:10,19,32; --panel:rgba(255,255,255,.05); --panel-solid:#101b2b; --line:rgba(255,255,255,.12);
  --text:#FFFFFF; --soft:#9AA8B6; --t2:#DCE3EA; --field:rgba(255,255,255,.06); --accent:#00C1D5;
  --nav-bg:rgba(10,19,32,.82); --shadow:0 18px 40px rgba(0,0,0,.28);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#F5F7FA; --bg-rgb:245,247,250; --panel:#FFFFFF; --panel-solid:#FFFFFF; --line:rgba(4,30,66,.13);
  --text:#041E42; --soft:#51647A; --t2:#1D3354; --field:#F5F7FA; --accent:#006F7E;
  --nav-bg:rgba(255,255,255,.88); --shadow:0 14px 32px rgba(4,30,66,.10);
  color-scheme:light;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; }
body{ font-family:var(--font-sans); font-size:17px; line-height:1.65; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column; }
html.auth-pending body{ visibility:hidden; }
a{ color:inherit; }
img{ max-width:100%; }
.wrap{ width:100%; max-width:1280px; margin:0 auto; padding:0 clamp(16px,4vw,48px); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
:focus-visible{ outline:2px solid var(--fongtek-teal); outline-offset:3px; }

/* ---------- Menú superior ---------- */
.nav{ position:sticky; top:0; z-index:50; background:var(--nav-bg); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.nav-in{ display:flex; align-items:center; gap:20px; height:68px; }
.nav-logo img{ display:block; height:34px; width:auto; }
.logo-light{ display:none !important; }
:root[data-theme="light"] .logo-dark{ display:none !important; }
:root[data-theme="light"] .logo-light{ display:block !important; }
.nav-links{ display:flex; align-items:center; gap:4px; margin-left:12px; flex:1; }
.nav-links a{ text-decoration:none; font-size:14.5px; font-weight:500; color:var(--t2); padding:9px 14px; border-radius:999px; }
.nav-links a:hover{ background:var(--panel); color:var(--text); }
.nav-links a[aria-current="page"]{ color:var(--accent); background:var(--panel); }
.nav-end{ display:flex; align-items:center; gap:10px; }
.user-chip{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--t2); max-width:220px; }
.user-chip svg{ width:20px; height:20px; flex:0 0 auto; color:var(--accent); }
.user-chip .user-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.icon-btn{ width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--panel); color:var(--text); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto; }
.icon-btn:hover{ border-color:var(--fongtek-accent2); color:var(--fongtek-accent2); }
.icon-btn svg{ width:18px; height:18px; }
.theme-btn .sun{ display:none; } :root[data-theme="light"] .theme-btn .sun{ display:block; } :root[data-theme="light"] .theme-btn .moon{ display:none; }
.btn-out{ font-family:inherit; font-size:13.5px; font-weight:600; color:var(--t2); background:transparent; border:1px solid var(--line); border-radius:999px; padding:8px 16px; cursor:pointer; }
.btn-out:hover{ border-color:var(--fongtek-accent2); color:var(--fongtek-accent2); }
.menu-btn{ display:none; }
@media (max-width:900px){
  .menu-btn{ display:inline-flex; margin-left:auto; }
  .nav-links{ display:none; position:absolute; left:0; right:0; top:68px; flex-direction:column; align-items:stretch; margin:0; gap:2px; padding:12px 16px 16px; background:var(--panel-solid); border-bottom:1px solid var(--line); box-shadow:var(--shadow); }
  .nav.open .nav-links{ display:flex; }
  .nav-links a{ padding:13px 14px; border-radius:12px; font-size:16px; }
  .nav-end{ gap:8px; }
  .user-chip{ display:none; }
}
@media (max-width:420px){ .nav-in{ gap:10px; } .nav-logo img{ height:28px; } .btn-out{ padding:8px 12px; } }

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; min-height:580px; display:flex; align-items:center; background:var(--bg); isolation:isolate; }
/* Ilustración: se ve completa (nunca más alta que el hero) y se difumina por izquierda, arriba y abajo para fundirse con el fondo claro u oscuro. */
.hero-art{ position:absolute; top:50%; right:0; width:min(70%, 957px); transform:translateY(-50%); z-index:-2; pointer-events:none; }
.hero-art picture{ display:block; }
.hero-art img{ display:block; width:100%; height:auto; max-width:none;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 38%), linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%); -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to right, transparent 0, #000 38%), linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%); mask-composite:intersect; }
.art-light{ display:none !important; }
:root[data-theme="light"] .art-light{ display:block !important; }
:root[data-theme="light"] .art-dark{ display:none !important; }
/* Velo suave detrás del título (60 %) para que el texto siempre se lea sobre el mapa. */
.hero::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, rgba(var(--bg-rgb),.6) 0%, rgba(var(--bg-rgb),.55) 30%, rgba(var(--bg-rgb),.27) 52%, rgba(var(--bg-rgb),0) 70%),
             linear-gradient(0deg, rgba(var(--bg-rgb),1) 0%, rgba(var(--bg-rgb),0) 8%); }
.hero-text{ max-width:560px; padding:72px 0 88px; }
.label{ font-family:var(--font-mono); font-weight:600; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
h1.hero-title{ margin-top:16px; font-family:var(--font-display); font-weight:700; font-stretch:112%; font-size:clamp(36px,5.2vw,68px); line-height:1.04; letter-spacing:-.03em; }
.bar{ width:96px; height:4px; margin:26px 0 22px; background:var(--fongtek-teal); border:0; }
.lead{ font-size:clamp(17px,1.6vw,20px); color:var(--t2); max-width:30em; }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 26px; border-radius:999px; border:1px solid transparent; font-family:inherit; font-size:16px; font-weight:700; text-decoration:none; cursor:pointer; }
.btn-primary{ background:var(--fongtek-accent2); color:var(--fongtek-dark); box-shadow:0 8px 24px rgba(255,117,31,.30); }
.btn-primary:hover{ filter:brightness(1.07); }
.btn-primary:disabled{ opacity:.6; cursor:not-allowed; box-shadow:none; }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--fongtek-teal); color:var(--accent); }
@media (max-width:860px){
  /* Celular: primero el título y los botones; debajo, la ilustración vertical que se funde con la página por arriba y por abajo. */
  .hero{ display:flex; flex-direction:column; align-items:stretch; min-height:0; }
  .hero .wrap{ order:1; }
  .hero-art{ order:2; position:static; transform:none; width:100%; max-width:560px; margin:0 auto; z-index:auto; }
  .hero-art img{ -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image:linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%); }
  .hero::after{ display:none; }
  .hero-text{ padding:32px 0 8px; max-width:none; }
}

/* ---------- Secciones ---------- */
section.block{ padding:72px 0 8px; }
.sec-head{ max-width:640px; margin-bottom:32px; }
h2.sec-title{ font-family:var(--font-display); font-weight:700; font-stretch:104%; font-size:clamp(26px,3.2vw,38px); line-height:1.12; letter-spacing:-.02em; margin-top:10px; }
.sec-sub{ color:var(--soft); margin-top:12px; font-size:17px; }
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:18px; }
.card-svc{ display:flex; flex-direction:column; gap:10px; text-decoration:none; padding:26px 24px 22px; background:var(--panel); border:1px solid var(--line); border-radius:20px; transition:border-color .15s, transform .15s, box-shadow .15s; }
.card-svc:hover{ border-color:var(--fongtek-teal); transform:translateY(-3px); box-shadow:var(--shadow); }
.card-svc .ico{ width:48px; height:48px; border-radius:14px; display:grid; place-items:center; color:var(--accent); background:rgba(0,193,213,.12); }
.card-svc .ico svg{ width:26px; height:26px; }
.card-svc h3{ font-family:var(--font-display); font-weight:700; font-stretch:100%; font-size:19px; line-height:1.25; margin-top:6px; }
.card-svc p{ color:var(--soft); font-size:15px; flex:1; }
.card-svc .go{ font-size:14px; font-weight:700; color:var(--fongtek-accent2); margin-top:6px; }
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; counter-reset:paso; }
.step{ position:relative; padding:24px 24px 22px 24px; border:1px solid var(--line); border-radius:20px; background:var(--panel); }
.step::before{ counter-increment:paso; content:counter(paso); display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--fongtek-teal); color:var(--fongtek-navy); font-family:var(--font-mono); font-weight:700; margin-bottom:12px; }
.step h3{ font-family:var(--font-display); font-weight:700; font-stretch:100%; font-size:18px; margin-bottom:6px; }
.step p{ color:var(--soft); font-size:15px; }
footer.foot{ margin-top:80px; padding:22px 0; background:var(--fongtek-dark); color:var(--fongtek-gray); font-size:13px; }
:root[data-theme="light"] footer.foot{ background:var(--fongtek-navy); }
footer.foot .wrap{ display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; }

/* ---------- Formulario de solicitud ---------- */
.page-head{ padding:44px 0 8px; }
.crumbs{ font-size:13.5px; color:var(--soft); margin-bottom:12px; }
.crumbs a{ color:var(--accent); text-decoration:none; } .crumbs a:hover{ text-decoration:underline; }
.page-head h1{ font-family:var(--font-display); font-weight:700; font-stretch:112%; font-size:clamp(28px,4vw,42px); line-height:1.1; letter-spacing:-.02em; }
.page-head p{ color:var(--soft); margin-top:10px; max-width:46em; font-size:17px; }
.sop-card{ background:var(--panel); border:1px solid var(--line); border-radius:22px; padding:28px clamp(18px,3vw,34px); margin-top:24px; box-shadow:var(--shadow); }
.sop-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 22px; }
.sop-full{ grid-column:1/-1; }
@media (max-width:720px){ .sop-grid{ grid-template-columns:1fr; } }
.sop-f label{ display:block; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--t2); margin-bottom:7px; }
.sop-f label b{ color:var(--fongtek-accent2); }
.sop-hint{ text-transform:none; letter-spacing:0; font-family:var(--font-sans); font-weight:400; color:var(--soft); }
.sop-f input,.sop-f select,.sop-f textarea{ width:100%; min-height:48px; padding:11px 14px; border-radius:12px; border:1px solid var(--line); background:var(--field); color:var(--text); font-size:15.5px; font-family:inherit; }
.sop-f textarea{ resize:vertical; min-height:150px; line-height:1.5; }
.sop-f input[readonly]{ opacity:.8; cursor:default; }
.sop-f input[type=file]{ padding:10px 12px; }
.sop-f select option{ color:#041E42; background:#fff; }
.sop-f input:focus,.sop-f select:focus,.sop-f textarea:focus{ outline:2px solid var(--fongtek-teal); outline-offset:1px; }
.svc-info{ display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:14px; background:rgba(0,193,213,.10); border:1px solid rgba(0,193,213,.35); font-size:14.5px; color:var(--t2); }
.svc-info svg{ width:22px; height:22px; flex:0 0 auto; color:var(--accent); margin-top:2px; }
.sop-chk{ display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--t2); cursor:pointer; }
.sop-chk input{ width:20px; height:20px; margin-top:2px; accent-color:var(--fongtek-teal); flex:0 0 auto; }
.sop-aut__t{ display:block; margin-bottom:4px; color:var(--text); } .sop-aut__t i{ color:var(--fongtek-accent2); font-style:normal; }
.sop-aut__x{ display:block; font-size:13.5px; color:var(--soft); line-height:1.5; }
.sop-msg{ margin-top:20px; padding:13px 16px; border-radius:14px; font-size:14.5px; line-height:1.5; }
.sop-msg[hidden]{ display:none; }
.sop-msg.is-err{ background:rgba(228,0,43,.12); border:1px solid rgba(228,0,43,.45); }
.sop-msg.is-ok{ background:rgba(60,219,192,.14); border:1px solid rgba(60,219,192,.5); }
.sop-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
h2.sop-h2{ font-family:var(--font-display); font-weight:700; font-stretch:104%; font-size:22px; margin-bottom:14px; }
.sop-lista{ display:flex; flex-direction:column; gap:10px; }
.sop-vacio{ color:var(--soft); }
.sop-tk{ display:grid; grid-template-columns:auto 1fr auto; gap:4px 14px; align-items:baseline; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--field); }
.sop-tk__f{ font-family:var(--font-mono); font-weight:600; font-size:13px; color:var(--accent); }
.sop-tk__t{ font-weight:600; overflow-wrap:anywhere; }
.sop-tk__e{ font-size:12.5px; font-weight:700; color:var(--fongtek-green); }
.sop-tk__e.is-fail{ color:var(--fongtek-red); }
.sop-tk__m{ grid-column:1/-1; font-size:13px; color:var(--soft); }
@media (max-width:520px){ .sop-tk{ grid-template-columns:1fr auto; } .sop-tk__t{ grid-column:1/-1; order:3; } }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } .card-svc{ transition:none; } }

/* ---------- Detalle de servicio (servicio.html) ---------- */
.svc-top{ margin-top:22px; }
.svc-page{ display:flex; flex-direction:column; gap:18px; margin-top:28px; max-width:860px; }
.svc-page[hidden]{ display:none; }
.svc-sec{ background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:26px clamp(18px,3vw,32px); }
.svc-sec h2, .svc-comp h2, .svc-fin h2{ font-family:var(--font-display); font-weight:700; font-stretch:104%; font-size:22px; line-height:1.2; letter-spacing:-.01em; margin-bottom:12px; }
.svc-sec p, .svc-comp p, .svc-fin p{ color:var(--t2); font-size:17px; }
.svc-sec p + p{ margin-top:12px; }
.svc-ul{ list-style:none; display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.svc-ul li{ position:relative; padding-left:28px; color:var(--t2); font-size:17px; }
.svc-ul li::before{ content:""; position:absolute; left:0; top:.55em; width:14px; height:8px; border-left:2.5px solid var(--fongtek-teal); border-bottom:2.5px solid var(--fongtek-teal); transform:rotate(-45deg) translateY(-50%); }
.svc-links{ display:flex; flex-direction:column; gap:10px; }
.svc-link{ display:flex; align-items:center; justify-content:space-between; gap:16px; text-decoration:none; padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:var(--field); transition:border-color .15s, transform .15s; }
.svc-link:hover{ border-color:var(--fongtek-teal); transform:translateY(-1px); }
.svc-link__t{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.svc-link__t b{ font-weight:700; color:var(--text); }
.svc-link__n{ font-size:14.5px; color:var(--soft); line-height:1.5; }
.svc-link__i{ flex:0 0 auto; color:var(--accent); } .svc-link__i svg{ width:20px; height:20px; display:block; }
.svc-comp{ border-radius:20px; padding:26px clamp(18px,3vw,32px); border:1px solid var(--line); border-left:5px solid var(--fongtek-teal); background:var(--panel); }
.svc-fin{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 28px; max-width:860px; margin-top:28px; padding:26px clamp(18px,3vw,32px); border-radius:20px; border:1px solid var(--line); background:linear-gradient(135deg, rgba(0,193,213,.10), rgba(0,193,213,0) 70%), var(--panel); }
.svc-fin > div:first-child{ flex:1 1 360px; }
.svc-fin h2{ margin-bottom:8px; }
.svc-fin .cta-row{ margin-top:0; }
.svc-h3{ font-family:var(--font-display); font-weight:700; font-stretch:100%; font-size:17px; line-height:1.3; margin:20px 0 2px; color:var(--text); }
.svc-sec h2 + .svc-h3{ margin-top:4px; }
.svc-ul + p, .svc-ul + .svc-h3{ margin-top:16px; }
.svc-h3 + p{ margin-top:4px; }

.svc-sec > p + .svc-links{margin-top:14px}
.btn[hidden]{ display:none; }