/* NOMIC · landing corporativo
   Identidad: canon NOMIC (nomic-identity/LOGO_CANONICO_Y_COHERENCIA.md) — Poppins, #0a0a0c / #E9E5DC / #B5252E.
   Composición: prototipo SICREA (vidrio, halos, luz alta de 1px, curva única).
   Reglas de casa: sin max-width en el lienzo (WL-350) · la prosa sí se limita · ninguna animación de
   entrada lleva fill-mode (WL-364): el estado base del CSS ES el estado final. */

@font-face{font-family:Poppins;font-weight:300;font-display:swap;src:url(fonts/poppins-light.woff) format("woff")}
@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(fonts/poppins-regular.woff) format("woff")}
@font-face{font-family:Poppins;font-weight:500;font-display:swap;src:url(fonts/poppins-medium.woff) format("woff")}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(fonts/poppins-semibold.woff) format("woff")}

:root{
  --bg:#0a0a0c; --bg2:#0f1013; --ink:#F4F2EE; --mid:#B8B4AC; --dim:#96928A;
  --marca:#E9E5DC; --red:#B5252E; --red-tx:#F07C84; --on-red:#fff;
  --line:rgba(233,229,220,.13); --line2:rgba(233,229,220,.24);
  --glass:rgba(24,25,28,.66); --glass-2:rgba(22,23,26,.52); --luz:rgba(255,255,255,.10);
  --sombra:inset 0 1px 0 var(--luz),0 24px 48px -30px rgba(0,0,0,.9);
  --halo-a:rgba(181,37,46,.10); --halo-b:rgba(233,229,220,.05);
  --code:#E9E5DC; --code-k:#F07C84; --code-c:#8d897f; --code-s:#C9B98F;
  --ease:cubic-bezier(.22,.61,.36,1);
  --r-panel:20px; --r-card:16px; --r-sm:10px; --r-pill:999px;
  --gut:clamp(20px,5vw,112px);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#F5F3ED; --bg2:#ECE9E1; --ink:#161616; --mid:#44474d; --dim:#5d6068;
  --marca:#161616; --red-tx:#B5252E;
  --line:rgba(22,22,22,.12); --line2:rgba(22,22,22,.22);
  --glass:rgba(255,255,255,.80); --glass-2:rgba(255,255,255,.66); --luz:rgba(255,255,255,.9);
  --sombra:inset 0 1px 0 var(--luz),0 18px 36px -26px rgba(20,30,45,.35);
  --halo-a:rgba(181,37,46,.07); --halo-b:rgba(42,60,90,.05);
  --code:#1d1d1f; --code-k:#B5252E; --code-c:#6b6b70; --code-s:#7a5b12;
  color-scheme:light;
}

*{box-sizing:border-box}
html{font-size:19px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Poppins,"Helvetica Neue",Arial,sans-serif;
  font-weight:400;line-height:1.55;overflow-x:hidden;
  background-image:radial-gradient(60vw 50vh at 85% 8%,var(--halo-a),transparent 70%),
                   radial-gradient(50vw 60vh at 5% 60%,var(--halo-b),transparent 70%);
  background-attachment:fixed}
a{color:inherit}
img,svg{display:block}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.nav .marca svg,footer .marca svg{color:var(--marca)}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red-tx);outline-offset:3px;border-radius:6px}

/* ── la red de fondo (red.js) ───────────────────────────── */
#red{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
main,header.nav,footer{position:relative;z-index:1}

/* ── navegación ─────────────────────────────────────────── */
.nav{position:sticky;top:0;display:flex;align-items:center;gap:28px;padding:14px var(--gut);
  background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.nav .marca{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav .marca svg{width:40px;height:40px}
.nav .marca b{font-weight:500;letter-spacing:.32em;font-size:18px}
.nav nav{display:flex;gap:26px;margin-left:auto}
.nav nav a{text-decoration:none;color:var(--mid);font-size:17px;padding:10px 2px}
.nav nav a:hover{color:var(--ink)}
.icono-btn{width:48px;height:48px;border-radius:var(--r-pill);border:1px solid var(--line2);background:transparent;color:var(--ink);
  display:grid;place-items:center;cursor:pointer}
.icono-btn svg{width:24px;height:24px}

/* ── botones ────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:54px;padding:0 28px;border-radius:var(--r-pill);
  font:500 18px/1 Poppins,sans-serif;text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:transform .25s var(--ease)}
.btn svg{width:22px;height:22px}
.btn.rojo{background:var(--red);color:var(--on-red)}
.btn.rojo:hover{transform:translateY(-2px);background:#c52c36}
.btn.linea{border-color:var(--line2);color:var(--ink);background:var(--glass-2)}
.btn.linea:hover{border-color:var(--ink)}

/* ── tipografía ─────────────────────────────────────────── */
.kicker{display:flex;align-items:center;gap:12px;font-size:clamp(15px,.72vw,19px);letter-spacing:.3em;text-transform:uppercase;color:var(--dim);margin:0 0 18px}
.kicker::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--red);flex:none}
h1,h2,h3{font-weight:500;letter-spacing:-.01em;margin:0}
h2{font-size:clamp(32px,2.9vw,68px);line-height:1.12;max-width:26ch}
h3{font-size:clamp(21px,1.1vw,29px);line-height:1.25}
.prosa{max-width:68ch;color:var(--mid);font-size:clamp(19px,1.02vw,27px)}
.prosa b{color:var(--ink);font-weight:500}

/* ── secciones ──────────────────────────────────────────── */
section{padding:clamp(72px,11vh,140px) var(--gut)}
.cabeza{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:24px 64px;align-items:end;margin-bottom:48px}

/* hero */
.hero{min-height:calc(100svh - 69px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));
  align-items:center;gap:40px 72px;padding-top:clamp(40px,7vh,96px);padding-bottom:clamp(40px,7vh,96px)}
.hero h1{font-size:clamp(40px,min(4.3vw,7.4vh),116px);line-height:1.06;max-width:17ch}
.hero h1 span{display:block;color:var(--dim);font-weight:300;font-size:.74em;line-height:1.14;margin-top:.22em}
.hero .prosa{margin:26px 0 32px}
.acciones{display:flex;flex-wrap:wrap;gap:14px}
.sello{display:flex;flex-direction:column;align-items:center;gap:26px}
.sello svg.logo{width:min(100%,min(60vh,780px));height:auto;overflow:visible}
.palabra{display:flex;gap:.55em;font-size:clamp(28px,2.6vw,64px);letter-spacing:.06em;font-weight:500}
.palabra span{display:inline-block;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.palabra span.brilla{color:var(--red-tx)}
.palabra span.fuera{opacity:0;transform:translateY(14px)}

/* logo animable — el estado base es el logo terminado */
.logo .t{stroke:var(--marca);stroke-width:15;stroke-linecap:round;fill:none;stroke-dasharray:1;stroke-dashoffset:0;
  transition:stroke-dashoffset .62s var(--ease)}
.logo .t.fuera{stroke-dashoffset:1}
.logo .t.brilla{stroke:var(--red)}
.logo .n{fill:var(--bg);stroke:var(--marca);stroke-width:9.5;transform-box:fill-box;transform-origin:center;
  transition:opacity .4s var(--ease),transform .5s var(--ease)}
.logo .n.fuera{opacity:0;transform:scale(.4)}
.logo .n.brilla{stroke:var(--red)}
.logo .o{fill:var(--red);transform-box:fill-box;transform-origin:center;transition:opacity .4s var(--ease),transform .5s var(--ease)}
.logo .o.fuera{opacity:0;transform:scale(.3)}
.logo .o.late{animation:latido 6s var(--ease) infinite}
@keyframes latido{0%,86%,100%{transform:scale(1)}92%{transform:scale(1.09)}}

/* problema */
.fragmentos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:18px}
.frag{display:flex;gap:18px;align-items:flex-start;padding:26px;border-radius:var(--r-card);background:var(--glass);
  border:1px solid var(--line);box-shadow:var(--sombra);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.frag svg{width:40px;height:40px;flex:none;color:var(--marca)}
.frag p{margin:0;color:var(--mid);font-size:clamp(18px,.95vw,24px)}
.frag p b{display:block;color:var(--ink);font-weight:500;font-size:21px;margin-bottom:4px}

/* qué hacemos */
.capas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:22px}
.capa{display:flex;flex-direction:column;gap:18px;padding:30px;border-radius:var(--r-panel);background:var(--glass);
  border:1px solid var(--line);box-shadow:var(--sombra);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:transform .3s var(--ease)}
.capa:hover{border-color:var(--line2);transform:translateY(-3px)}
.capa header{display:flex;align-items:center;gap:16px}
.capa header svg{width:44px;height:44px;flex:none;color:var(--marca)}
.capa header small{display:block;color:var(--dim);font-size:14px;letter-spacing:.24em;text-transform:uppercase}
.capa p{margin:0;color:var(--mid);font-size:clamp(18px,.95vw,24px)}
pre.codigo{margin:auto 0 0;padding:18px 20px;border-radius:var(--r-card);background:color-mix(in srgb,var(--bg) 82%,transparent);
  border:1px solid var(--line);font:400 clamp(14.5px,.72vw,19px)/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--code);
  white-space:pre-wrap;word-break:break-word;min-height:9.6em}
pre.codigo .k{color:var(--code-k)} pre.codigo .c{color:var(--code-c)} pre.codigo .s{color:var(--code-s)}
pre.codigo .cursor{display:inline-block;width:.55em;height:1.1em;vertical-align:text-bottom;background:var(--red);margin-left:1px}

/* cómo trabajamos */
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px}
.paso{position:relative;padding:30px 28px 28px;border-radius:var(--r-card);background:var(--glass);border:1px solid var(--line);box-shadow:var(--sombra)}
.paso .num{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.paso .num svg{width:40px;height:40px;color:var(--marca)}
.paso .num span{font-size:15px;letter-spacing:.24em;color:var(--dim)}
.paso p{margin:10px 0 0;color:var(--mid);font-size:clamp(18px,.95vw,24px)}
.ciclo{margin-top:28px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;color:var(--mid);font-size:19px}
.ficha{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:var(--r-pill);border:1px solid var(--line2);
  background:var(--glass-2);color:var(--ink);font-weight:500}
.ficha svg{width:22px;height:22px}
.ficha i{width:9px;height:9px;border-radius:50%;background:var(--red)}

/* principios + seguridad */
.dos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:22px}
.lista{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.lista li{display:flex;gap:18px;align-items:flex-start;padding:22px 24px;border-radius:var(--r-card);background:var(--glass);border:1px solid var(--line)}
.lista li svg{width:32px;height:32px;flex:none;color:var(--marca);margin-top:2px}
.lista li b{display:block;font-weight:500;font-size:clamp(19px,1vw,26px)}
.lista li span{color:var(--mid);font-size:clamp(17.5px,.9vw,23px)}
.bloque h3{margin:0 0 18px;display:flex;align-items:center;gap:12px}
.bloque h3 svg{width:30px;height:30px;color:var(--red-tx)}

/* el nombre */
.nombre{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:32px 72px;align-items:center}
.griego{font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif;font-size:clamp(64px,8vw,132px);line-height:1;color:var(--ink);margin:0}
.griego small{display:block;font-family:Poppins,sans-serif;font-size:18px;letter-spacing:.3em;color:var(--dim);margin-top:14px;text-transform:uppercase}
.definicion{font-size:clamp(24px,2.1vw,32px);line-height:1.35;margin:0 0 22px;max-width:30ch}
.definicion b{color:var(--red-tx);font-weight:500}

/* contacto */
.contacto{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:32px 72px;align-items:center;
  margin:0 var(--gut) clamp(72px,11vh,140px);padding:clamp(40px,6vw,88px);border-radius:28px;background:var(--glass);
  border:1px solid var(--line2);box-shadow:var(--sombra)}
.contacto h2{max-width:18ch}
.contacto .acciones{justify-content:flex-start}
.correo{font-size:clamp(24px,2.4vw,36px);font-weight:500;text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:4px}

/* pie */
footer{display:flex;flex-wrap:wrap;gap:18px 40px;align-items:center;padding:32px var(--gut) 40px;border-top:1px solid var(--line);color:var(--dim);font-size:16px}
footer .marca{display:flex;align-items:center;gap:12px;color:var(--ink)}
footer .marca svg{width:32px;height:32px}
footer a{color:var(--mid)}
footer .der{margin-left:auto}

/* aparición al hacer scroll — base visible; sólo si main.js marcó el documento */
.js .aparece{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .aparece.espera{opacity:0;transform:translateY(26px)}

@media (max-width:1100px){
  .hero{min-height:auto;gap:28px;padding-top:clamp(28px,5vh,56px)}
  .sello{order:-1;flex-direction:row;justify-content:flex-start;gap:28px}
  .sello svg.logo{width:min(34vw,26vh,240px)}
  .palabra{font-size:clamp(26px,4vw,40px)}
}
@media (max-width:860px){
  .nav nav{display:none}
  .nav .icono-btn{margin-left:auto}
  .hero h1{max-width:none}
  footer .der{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* aviso de privacidad */
.legal{min-height:calc(100svh - 69px - 110px)}
.legal h2{margin-bottom:32px}
.legal .prosa p{margin:0 0 20px}
.legal .fecha{color:var(--dim);font-size:16px}
.legal a{color:var(--red-tx)}
.nav .marca img,footer .marca img{width:40px;height:40px}
footer .marca img{width:32px;height:32px}