/* Fuentes self-hosted: se cargan desde el layout (/fonts/fonts.css) */

/* ===================================================================
   ULTREIA COMUNICACIONES — sistema visual 2026
   Tema CLARO por defecto · tema OSCURO vía :root[data-theme="dark"]
   =================================================================== */

:root{
  /* Surfaces (claro) */
  --bg:#ffffff; --bg-1:#f4f7fc; --bg-2:#ecf1f8; --bg-3:#dde6f2;
  --line:#e2e9f3; --line-2:#cdd9ea; --line-hi:#aabad1;
  /* Text */
  --fg:#0c1830; --fg-2:#2a3a55; --fg-3:#586780; --fg-4:#5d6e8c;
  /* Accents */
  --accent:#2e6cd1; --accent-d:#1f54aa;
  --cyan:#17709f; --amber:#91630e; --red:#d0453f;
  --tag-green-fg:var(--accent-d);
  /* Watermark / chrome */
  --watermark-2:#e8f0fc;
  --statusbar-bg:#0c1830; --statusbar-fg:#c8d4e8; --statusbar-sep:#3a4762; --statusbar-dot:#7ab2ff;
  --nav-bg:rgba(255,255,255,0.82);
  --card-shadow:0 1px 2px rgba(12,24,48,.04), 0 8px 24px -16px rgba(46,108,209,.18);
  --wm-opacity:.26; --wm-rack-opacity:.38;
  --radius:6px; --radius-lg:10px;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:"Geist", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  --logo-fg:#1f4e79;
}

:root[data-theme="dark"]{
  --bg:#0a0d10; --bg-1:#0f1316; --bg-2:#141a1f; --bg-3:#1a2128;
  --line:#1f272f; --line-2:#2a343d; --line-hi:#3a4753;
  --fg:#e8edf2; --fg-2:#b6c0ca; --fg-3:#7c8893; --fg-4:#7b8794;
  --accent:oklch(0.82 0.19 145); --accent-d:oklch(0.62 0.16 145);
  --tag-green-fg:var(--accent);
  --cyan:oklch(0.80 0.10 215); --amber:oklch(0.82 0.14 75); --red:oklch(0.70 0.20 25);
  --watermark-2:#0d1a2e;
  --statusbar-bg:#06090b; --statusbar-fg:#7c8893; --statusbar-sep:#3a4753; --statusbar-dot:var(--accent);
  --nav-bg:rgba(10,13,16,0.85);
  --card-shadow:none;
  --wm-opacity:.08; --wm-rack-opacity:.10;
  --logo-fg:#e8edf2;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ background:var(--bg); color:var(--fg); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
body{ font-size:15px; line-height:1.55; position:relative; overflow-x:hidden; }
a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--accent); }
button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }
img{ max-width:100%; display:block; }
::selection{ background:var(--accent); color:#fff; }

/* ===== Accesibilidad ===== */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:2px; }
p a:not(.btn), .muted a{ text-decoration:underline; text-underline-offset:2px; }
.skip-link{ position:absolute; left:-9999px; z-index:200; }
.skip-link:focus{ left:16px; top:16px; background:var(--accent); color:#fff; padding:10px 16px; border-radius:6px; font-weight:600; }

/* ===== Page background wash + watermarks ===== */
.pagebg{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:radial-gradient(900px 700px at -10% 25%, var(--watermark-2) 0%, transparent 55%), var(--bg);
}
.wm-mesh{
  position:absolute; left:50%; top:180px; width:980px; height:640px;
  transform:translateX(-50%);
  background:url('wm-mesh.svg') no-repeat center; background-size:contain;
  opacity:var(--wm-opacity); pointer-events:none; z-index:0;
}
.wm-rack{
  position:absolute; right:24px; bottom:0; width:300px; height:660px;
  background:url('wm-rack.svg') no-repeat right bottom; background-size:contain;
  opacity:var(--wm-rack-opacity); pointer-events:none; z-index:0;
}
:root[data-theme="dark"] .wm-mesh, :root[data-theme="dark"] .wm-rack{ filter:invert(1) hue-rotate(180deg); }

/* everything above watermarks */
.statusbar, .nav, section, footer.site-foot, .breadcrumb-bar{ position:relative; z-index:1; }

/* ===== Layout ===== */
.wrap{ max-width:1280px; margin:0 auto; padding:0 28px; }
.wrap-narrow{ max-width:960px; margin:0 auto; padding:0 28px; }

/* ===== Status bar ===== */
.statusbar{
  background:var(--statusbar-bg); color:var(--statusbar-fg);
  border-bottom:1px solid var(--statusbar-bg);
  font-family:var(--mono); font-size:11px; letter-spacing:0.02em;
}
.statusbar .row{ display:flex; align-items:center; gap:18px; padding:8px 28px; max-width:1280px; margin:0 auto; }
.statusbar .dot{ width:7px; height:7px; border-radius:50%; background:var(--statusbar-dot); box-shadow:0 0 8px var(--statusbar-dot); animation:pulse 2.4s ease-in-out infinite; }
.statusbar .sep{ color:var(--statusbar-sep); }
.statusbar .ml-auto{ margin-left:auto; display:flex; gap:14px; align-items:center; }
.statusbar strong{ color:var(--statusbar-dot); font-weight:500; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.4} }
.theme-toggle{ font-family:var(--mono); font-size:11px; color:var(--statusbar-fg); padding:2px 8px; border:1px solid var(--statusbar-sep); border-radius:4px; letter-spacing:.04em; transition:.15s; }
.theme-toggle:hover{ border-color:var(--statusbar-dot); color:#fff; }
@media (max-width:600px){
  .statusbar .row{ gap:10px; padding:8px 16px; }
  .statusbar .sb-extra{ display:none; }
}

/* ===== Menú móvil ===== */
.mnav{ display:none; position:relative; }
.mnav summary{ list-style:none; cursor:pointer; font-size:18px; line-height:1; padding:9px 12px; border:1px solid var(--line-2); border-radius:6px; color:var(--fg-2); }
.mnav summary::-webkit-details-marker{ display:none; }
.mnav[open] summary{ background:var(--bg-2); color:var(--fg); }
.mnav .mnav-list{ list-style:none; position:absolute; right:0; top:calc(100% + 10px); background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--card-shadow); padding:8px; display:flex; flex-direction:column; gap:2px; min-width:220px; z-index:60; }
.mnav .mnav-list a{ display:block; padding:10px 14px; font-size:15px; color:var(--fg-2); border-radius:6px; }
.mnav .mnav-list a:hover{ background:var(--bg-2); color:var(--fg); }
.mnav .mnav-list a.active{ color:var(--accent); }
@media (max-width:600px){
  .mnav{ display:block; }
  .nav .row{ gap:14px; padding:12px 16px; }
  .nav .cta .btn-ghost{ display:none; }
  .brand small{ display:none; }
  .card[style*="padding:64px"]{ padding:32px !important; }
  section{ padding:64px 0; }
}

/* ===== Nav ===== */
.nav{ position:sticky; top:0; z-index:50; background:var(--nav-bg); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.nav .row{ display:flex; align-items:center; gap:36px; padding:14px 28px; max-width:1280px; margin:0 auto; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand small{ color:var(--fg-3); font-family:var(--mono); font-size:11px; }
.nav ul{ list-style:none; display:flex; gap:6px; }
.nav ul a{ display:inline-block; padding:8px 12px; font-size:14px; color:var(--fg-2); border-radius:6px; transition:.15s; }
.nav ul a:hover{ color:var(--fg); background:var(--bg-2); }
.nav ul a.active{ color:var(--accent); }
.nav .cta{ margin-left:auto; display:flex; gap:10px; align-items:center; }
.logo-svg{ height:28px; width:auto; display:block; }
.logo-svg .wordmark{ fill:var(--logo-fg); }

/* ===== Buttons ===== */
.btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; font-size:14px; font-weight:500; border-radius:6px; border:1px solid var(--line-2); background:var(--bg); color:var(--fg); transition:.15s; }
.btn:hover{ background:var(--bg-2); border-color:var(--line-hi); color:var(--fg); }
.btn-primary{ background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600; }
.btn-primary:hover{ background:var(--accent-d); border-color:var(--accent-d); color:#fff; }
:root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .btn-primary:hover{ color:#06090b; }
.btn-ghost{ background:transparent; }
.btn .arrow{ font-family:var(--mono); transition:transform .2s; }
.btn:hover .arrow{ transform:translateX(2px); }

/* ===== Type ===== */
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:0.06em; text-transform:uppercase; }
.eyebrow::before{ content:""; width:6px; height:6px; background:var(--accent); border-radius:50%; }
h1,h2,h3,h4{ font-weight:500; letter-spacing:-0.025em; line-height:1.1; color:var(--fg); }
h1{ font-size:64px; }
h2{ font-size:40px; }
h3{ font-size:22px; letter-spacing:-0.01em; }
.muted{ color:var(--fg-3); }
.lead{ font-size:18px; color:var(--fg-2); line-height:1.55; max-width:62ch; }

/* ===== Sections ===== */
section{ padding:96px 0; border-top:1px solid var(--line); }
section.hero{ padding:64px 0 96px; border-top:0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:48px; gap:32px; flex-wrap:wrap; }
.section-head h2{ max-width:20ch; }
.breadcrumb-bar{ border-bottom:1px solid var(--line); }
.breadcrumb-bar .wrap{ padding-top:16px; padding-bottom:16px; font-family:var(--mono); font-size:11px; color:var(--fg-4); }

/* ===== Cards ===== */
.card{ background:var(--bg-1); border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px; transition:.18s; box-shadow:var(--card-shadow); }
.card:hover{ border-color:var(--line-hi); }

/* ===== Grid helpers (hairline) ===== */
.grid{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.grid > *{ background:var(--bg); padding:32px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){
  .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); }
  /* los grids de 2 columnas definidos en estilo inline (tarjetas CTA, secciones
     mixtas) no los cubre ninguna media query del diseño: colapsarlos aquí */
  main [style*="grid-template-columns:1.4fr"], main [style*="grid-template-columns:1.5fr"],
  main [style*="grid-template-columns:1.1fr"], main [style*="grid-template-columns:1.2fr"],
  main [style*="grid-template-columns:1fr 1.2fr"], main [style*="grid-template-columns:1fr 1fr"]{ grid-template-columns:1fr !important; }
}
@media (max-width:600px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } h1{ font-size:42px; } h2{ font-size:30px; } .nav .row > ul{ display:none; } }

/* ===== Footer ===== */
footer.site-foot{ border-top:1px solid var(--line); background:var(--bg-1); padding:64px 0 32px; font-size:13px; color:var(--fg-3); }
footer.site-foot .cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px; }
@media (max-width:900px){ footer.site-foot .cols{ grid-template-columns:1fr 1fr; } }
footer.site-foot h2{ font-family:var(--mono); font-size:11px; font-weight:500; line-height:1.55; text-transform:uppercase; letter-spacing:0.08em; color:var(--fg-4); margin-bottom:16px; }
footer.site-foot ul{ list-style:none; display:flex; flex-direction:column; gap:8px; }
footer.site-foot ul a{ color:var(--fg-2); }
footer.site-foot ul a:hover{ color:var(--accent); }
footer.site-foot .legal{ border-top:1px solid var(--line); padding-top:24px; display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; color:var(--fg-4); }

/* ===== Decorative ===== */
.tag{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; padding:4px 8px; background:var(--bg-2); border:1px solid var(--line-2); border-radius:4px; color:var(--fg-2); letter-spacing:0.02em; }
.tag.green{ color:var(--tag-green-fg); border-color:color-mix(in oklab, var(--accent) 35%, transparent); background:color-mix(in oklab, var(--accent) 10%, var(--bg-2)); }
.kbd{ font-family:var(--mono); font-size:11px; padding:2px 6px; background:var(--bg-2); border:1px solid var(--line-2); border-radius:4px; color:var(--fg-2); }
code.inline{ font-family:var(--mono); font-size:12px; background:var(--bg-2); padding:1px 6px; border-radius:4px; }
.grid-bg{ background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:56px 56px; background-position:-1px -1px; }

/* ===== Terminal (siempre oscuro, monitor) ===== */
.terminal{ --fg:#e8edf2; --fg-2:#c2ccd6; --fg-3:#8a96a2; --fg-4:#7d8995; --accent:oklch(0.82 0.19 145); --cyan:oklch(0.80 0.10 215); --line:#1a2128; --line-2:#242c33; --bg-1:#0c1114; background:#06090b; color:var(--fg-2); box-shadow:var(--card-shadow); }
.terminal .tbar{ display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--line); background:var(--bg-1); }
.dot-r{ width:10px; height:10px; border-radius:50%; background:#ff5f57; }
.dot-y{ width:10px; height:10px; border-radius:50%; background:#febc2e; }
.dot-g{ width:10px; height:10px; border-radius:50%; background:#28c840; }