/* =========================================================
   Titanium Industrial Security — hoja de estilos única
   Compartida por todas las páginas y todos los idiomas.
   Sin frameworks. Sin build. Sin border-radius, sombras
   ni degradados: las divisiones son líneas de 1px.
   ========================================================= */

/* ---------- Fuentes (locales, sin Google Fonts) ---------- */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Condensed";
  src: url("../fonts/IBMPlexSansCondensed-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Condensed";
  src: url("../fonts/IBMPlexSansCondensed-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- Variables ---------- */

:root {
  /* Paleta sobria, acromática, alineada con la web original:
     blanco, grises fríos y carbón. El "acento" es el propio contraste. */
  --ink:#121417;  --navy:#31353A;  --navy-2:#3C4147;  --navy-3:#4A5058;
  --steel:#5F666D; --steel-2:#9CA2A8; --steel-3:#C8CCD0;
  --paper:#F2F3F4; --paper-2:#E7E9EA; --white:#FFFFFF;
  --signal:#FFFFFF; --signal-deep:#121417;
  --line:rgba(18,20,23,.14); --line-strong:rgba(18,20,23,.32); --line-dark:rgba(255,255,255,.16);

  --sans:"IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --cond:"IBM Plex Sans Condensed", "Arial Narrow", Arial, sans-serif;
  --mono:"IBM Plex Mono", "Consolas", monospace;

  /* Escala de espaciado única */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  --container:1180px;
}

/* ---------- Base ---------- */

* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}

img { max-width:100%; display:block; }

a { color:var(--navy-2); text-decoration:none; }
a:hover { text-decoration:underline; text-decoration-color:currentColor; text-underline-offset:3px; }

:focus-visible {
  outline:2px solid var(--ink);
  outline-offset:2px;
}
/* En contextos oscuros el foco se marca en blanco */
.topbar :focus-visible, .hero :focus-visible, .page-head :focus-visible,
.dark-block :focus-visible, .site-footer :focus-visible,
.incident-card :focus-visible, .purdue :focus-visible {
  outline-color:var(--white);
}

h1,h2,h3 {
  font-family:var(--cond);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.01em;
}
h1 { font-size:clamp(2rem, 4.2vw, 3.1rem); }
h2 { font-size:clamp(1.5rem, 2.6vw, 2rem); }
h3 { font-size:1.15rem; font-weight:600; }
h4 { font-family:var(--sans); font-weight:600; font-size:1rem; }

p + p { margin-top:var(--sp-4); }

.container {
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--sp-5);
}

main { display:block; }

/* Etiqueta de sección estilo plano de ingeniería */
.kicker {
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--steel);
  display:block;
  margin-bottom:var(--sp-3);
}
.kicker::before { content:"// "; color:var(--signal-deep); }

.on-dark .kicker, .kicker.on-dark { color:var(--steel-2); }
.on-dark .kicker::before { color:var(--signal); }

/* ---------- Accesibilidad ---------- */

.skip-link {
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100;
  background:var(--signal);
  color:var(--ink);
  font-family:var(--mono);
  font-size:.85rem;
  padding:var(--sp-3) var(--sp-4);
}
.skip-link:focus {
  left:0;
  text-decoration:none;
}

.visually-hidden {
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

/* ---------- Barra superior ---------- */

.topbar {
  background:var(--ink);
  color:var(--steel-2);
  font-family:var(--mono);
  font-size:.72rem;
}
.topbar-inner {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:var(--sp-4);
  min-height:34px;
  padding-block:var(--sp-1);
}
.topbar-inner > p { grid-column:2; }
.topbar a { color:var(--steel-2); }
.topbar-incident {
  display:inline-block;
  padding:var(--sp-1) var(--sp-3);
  border:1px solid var(--white);
  background:var(--white);
  color:var(--ink);
  font-weight:500;
  white-space:nowrap;
}
.topbar a.topbar-incident { color:var(--ink); }
.topbar-incident:hover { background:transparent; color:var(--white); text-decoration:none; }
.lang-switch {
  grid-column:3;
  justify-self:end;
  display:flex;
  gap:var(--sp-3);
  list-style:none;
}
.lang-switch a[aria-current="page"] { color:var(--white); border-bottom:1px solid var(--signal); }

/* ---------- Cabecera / navegación principal ---------- */

.site-header {
  position:sticky;
  top:0;
  z-index:50;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-5);
  min-height:72px;
}
.brand { display:block; flex:none; }
.brand:hover { text-decoration:none; }
.brand-logo { display:block; height:92px; width:auto; }

.nav-toggle {
  display:none;
  background:none;
  border:1px solid var(--line-strong);
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink);
  padding:var(--sp-2) var(--sp-3);
  cursor:pointer;
}

.site-nav { display:flex; align-items:center; gap:var(--sp-6); }
.site-nav ul {
  display:flex;
  gap:var(--sp-5);
  list-style:none;
}
.site-nav ul a {
  font-family:var(--sans);
  font-weight:500;
  font-size:.92rem;
  color:var(--ink);
  padding-block:var(--sp-2);
  border-bottom:2px solid transparent;
}
.site-nav ul a:hover {
  text-decoration:none;
  border-bottom-color:var(--ink);
}
.site-nav ul a[aria-current="page"] { border-bottom-color:var(--navy); }

/* ---------- Botones ---------- */

.btn {
  display:inline-block;
  font-family:var(--sans);
  font-weight:600;
  font-size:.92rem;
  padding:var(--sp-3) var(--sp-5);
  border:1px solid transparent;
  cursor:pointer;
  text-align:center;
}
.btn:hover { text-decoration:none; }

.btn-primary {
  background:var(--ink);
  color:var(--white);
  border-color:var(--ink);
}
.btn-primary:hover { background:var(--navy-3); border-color:var(--navy-3); }
/* Sobre fondo oscuro el botón principal se invierte */
.hero .btn-primary, .page-head .btn-primary, .dark-block .btn-primary {
  background:var(--white);
  color:var(--ink);
  border-color:var(--white);
}
.hero .btn-primary:hover, .page-head .btn-primary:hover, .dark-block .btn-primary:hover {
  background:var(--steel-3);
  border-color:var(--steel-3);
}

.btn-ghost {
  background:transparent;
  color:var(--ink);
  border-color:var(--line-strong);
}
.btn-ghost:hover { border-color:var(--ink); }

.on-dark .btn-ghost, .btn-ghost.on-dark {
  color:var(--white);
  border-color:var(--line-dark);
}
.on-dark .btn-ghost:hover { border-color:var(--white); }

/* ---------- Héroe (portada) ---------- */

.hero {
  background:var(--navy);
  color:var(--white);
  border-bottom:1px solid var(--line);
  /* rejilla técnica muy tenue, líneas de 1px */
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:56px 56px;
}
.hero-grid {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:var(--sp-8);
  padding-block:var(--sp-8);
  align-items:start;
}
.hero h1 { color:var(--white); max-width:22ch; }
.hero .lead {
  margin-top:var(--sp-5);
  font-size:1.08rem;
  color:var(--steel-3);
  max-width:52ch;
}
.hero-actions {
  display:flex;
  gap:var(--sp-4);
  margin-top:var(--sp-6);
  flex-wrap:wrap;
}
.hero-cred {
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2) var(--sp-5);
  margin-top:var(--sp-7);
  padding-top:var(--sp-4);
  border-top:1px solid var(--line-dark);
  list-style:none;
}
.hero-cred li {
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--steel-2);
}

/* ---------- Héroe con vídeo de fondo ---------- */

.hero-video {
  position:relative;
  overflow:hidden;
  min-height:clamp(460px, 78vh, 720px);
  display:flex;
  align-items:center;
}
.hero-bg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}
.hero-overlay {
  position:absolute;
  inset:0;
  z-index:1;
  /* rejilla técnica tenue + oscurecido para legibilidad del texto */
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(100deg, rgba(18,20,23,.92) 0%, rgba(18,20,23,.74) 46%, rgba(18,20,23,.52) 100%);
  background-size:56px 56px, 56px 56px, cover;
}
.hero-inner {
  position:relative;
  z-index:2;
  width:100%;
  padding-block:var(--sp-8);
}
.hero-content { max-width:46ch; }

@media (prefers-reduced-motion: reduce) {
  /* Sin autoplay de vídeo: queda el fondo carbón y su rejilla */
  .hero-bg { display:none; }
}

/* ---------- Pila Purdue (elemento firma) ---------- */

.purdue {
  border:1px solid var(--line-dark);
  background:rgba(18,20,23,.55);
}
.purdue-caption {
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--steel-2);
  padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--line-dark);
}
.purdue ol { list-style:none; }
.purdue-row {
  display:grid;
  grid-template-columns:44px 1fr;
  gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--line-dark);
  border-left:3px solid transparent;
}
.purdue ol li:last-child .purdue-row { border-bottom:none; }
.purdue-row:hover, .purdue-row:focus-within, .purdue-row:focus {
  border-left-color:var(--signal);
  background:rgba(255,255,255,.04);
}
.purdue-level {
  font-family:var(--mono);
  font-weight:500;
  font-size:.85rem;
  color:var(--signal);
}
.purdue-name {
  font-family:var(--sans);
  font-weight:600;
  font-size:.88rem;
  color:var(--white);
  display:block;
}
.purdue-service {
  font-family:var(--mono);
  font-size:.7rem;
  color:var(--steel-2);
  display:block;
  margin-top:2px;
  line-height:1.5;
}

/* ---------- Secciones genéricas ---------- */

.section { padding-block:var(--sp-8); border-top:1px solid var(--line); }
.section:first-of-type { border-top:none; }
.section-head { max-width:64ch; margin-bottom:var(--sp-6); }
.section-head p { margin-top:var(--sp-4); color:var(--steel); }

.section-paper { background:var(--paper); }

/* Rejilla de tarjetas: los separadores son las juntas */
.grid-1px {
  display:grid;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.grid-1px > * { background:var(--white); padding:var(--sp-5); }
.section-paper .grid-1px > * { background:var(--white); }
.cols-4 { grid-template-columns:repeat(4, 1fr); }
.cols-3 { grid-template-columns:repeat(3, 1fr); }
.cols-2 { grid-template-columns:repeat(2, 1fr); }

.card h3 { margin-bottom:var(--sp-3); }
.card p { font-size:.92rem; color:var(--steel); }
.card .card-link {
  display:inline-block;
  margin-top:var(--sp-4);
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--navy-2);
}
.card .card-link::after { content:" →"; color:var(--signal-deep); }

/* Investigación: líneas activas y publicaciones */
.research-card { display:flex; flex-direction:column; min-height:100%; }
.research-card h3 { margin:var(--sp-3) 0; }
.research-card p { flex:1; }
.research-status {
  width:max-content;
  padding:.28rem .5rem;
  border:1px solid var(--line-strong);
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.08em;
  line-height:1;
  text-transform:uppercase;
}
.research-status.applied { border-color:var(--signal-deep); color:var(--signal-deep); }
.research-status.roadmap { color:var(--steel); }
.research-card .source-link {
  margin-top:var(--sp-4);
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.research-card .source-link::after,
.publication-title::after { content:" ↗"; color:var(--signal-deep); }
.research-subhead { margin:var(--sp-7) 0 var(--sp-4); }

.cve-card { display:flex; flex-direction:column; min-height:100%; }
.cve-card h3 { margin-top:var(--sp-3); }
.cve-card > p:not(.cve-date) { flex:1; }
.cve-date {
  font-family:var(--mono);
  font-size:.7rem !important;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--steel-2) !important;
}
.cve-ids { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:var(--sp-3); }
.cve-ids span {
  border:1px solid var(--signal-deep);
  padding:.3rem .45rem;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.04em;
  color:var(--signal-deep);
}

.publication-list {
  list-style:none;
  border-top:1px solid var(--line-strong);
}
.publication-item {
  display:grid;
  grid-template-columns:5rem minmax(0,1fr);
  gap:var(--sp-5);
  padding:var(--sp-5) 0;
  border-bottom:1px solid var(--line);
}
.publication-year {
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.08em;
  color:var(--signal-deep);
}
.publication-title {
  font-family:var(--cond);
  font-size:1.06rem;
  font-weight:650;
  line-height:1.35;
}
.publication-meta { margin-top:var(--sp-2); color:var(--steel); font-size:.86rem; }

/* Fases numeradas */
.phase-num {
  font-family:var(--mono);
  font-weight:500;
  font-size:.85rem;
  color:var(--signal-deep);
  display:block;
  margin-bottom:var(--sp-3);
}
.phase-num::before { content:"["; color:var(--steel-2); }
.phase-num::after { content:"]"; color:var(--steel-2); }

/* Lista con guiones ámbar */
.checklist { list-style:none; }
.checklist li {
  padding-left:var(--sp-5);
  position:relative;
  margin-top:var(--sp-3);
}
.checklist li::before {
  content:"—";
  position:absolute;
  left:0;
  color:var(--signal-deep);
  font-weight:600;
}

/* ---------- Bloques oscuros ---------- */

.dark-block {
  background:var(--navy);
  color:var(--white);
  border-top:1px solid var(--line);
}
.dark-block h2, .dark-block h3 { color:var(--white); }
.dark-block p { color:var(--steel-3); }
.dark-block a { color:var(--white); }
.dark-inner { padding-block:var(--sp-8); }

.next-links {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line-dark);
  border:1px solid var(--line-dark);
  margin-top:var(--sp-6);
  list-style:none;
}
.next-links li { background:var(--navy); }
.next-links a {
  display:block;
  padding:var(--sp-5);
  color:var(--white);
  font-weight:500;
  font-size:.95rem;
}
.next-links a:hover { background:var(--navy-2); text-decoration:none; }
.next-links .next-label {
  display:block;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--steel-2);
  margin-bottom:var(--sp-2);
}
.next-links a:hover .next-label { color:var(--signal); }

/* ---------- Cabecera de página interior ---------- */

.page-head {
  background:var(--navy);
  color:var(--white);
  border-bottom:1px solid var(--line);
}
.page-head-inner { padding-block:var(--sp-7); max-width:70ch; }
.page-head h1 { color:var(--white); margin-top:var(--sp-4); }
.page-head .lead { margin-top:var(--sp-4); color:var(--steel-3); font-size:1.05rem; }

.crumbs { font-family:var(--mono); font-size:.72rem; letter-spacing:.05em; }
.crumbs ol { list-style:none; display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.crumbs li + li::before { content:"/"; color:var(--steel); margin-right:var(--sp-2); }
.crumbs a { color:var(--steel-2); }
.crumbs [aria-current="page"] { color:var(--white); }

/* ---------- Maquetas con ficha lateral ---------- */

.split {
  display:grid;
  grid-template-columns:1fr 360px;
  gap:var(--sp-8);
  align-items:start;
  padding-block:var(--sp-8);
}
.split .prose { max-width:66ch; }
.prose h2 { margin-top:var(--sp-7); margin-bottom:var(--sp-4); }
.prose h2:first-child { margin-top:0; }
.prose h3 { margin-top:var(--sp-6); margin-bottom:var(--sp-3); }
.prose ul { margin-top:var(--sp-4); }
.prose .kicker { margin-top:var(--sp-7); }

.sidecard {
  position:sticky;
  top:96px;
  border:1px solid var(--line-strong);
  background:var(--paper);
}
.sidecard-head {
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--line);
  color:var(--steel);
  background:var(--white);
}
.sidecard dl { padding:var(--sp-2) var(--sp-4) var(--sp-4); }
.sidecard dt {
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--steel);
  margin-top:var(--sp-4);
}
.sidecard dd { font-size:.9rem; margin-top:var(--sp-1); }
.sidecard .btn { display:block; margin:var(--sp-2) var(--sp-4) var(--sp-4); }

/* Ficha de referencias (portada, diferenciación) */
.refcard {
  border:1px solid var(--line-strong);
  background:var(--white);
}
.refcard-head {
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--steel);
  padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--line);
}
.refcard ul { list-style:none; }
.refcard li {
  padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--line);
  font-size:.88rem;
}
.refcard li:last-child { border-bottom:none; }
.ref-tag {
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--steel);
  display:block;
  margin-bottom:var(--sp-2);
}
.refcard .ref-tag { margin-bottom:0; }

/* ---------- Tablas ---------- */

.table-wrap { overflow-x:auto; }
.data-table {
  width:100%;
  border-collapse:collapse;
  border:1px solid var(--line-strong);
  font-size:.9rem;
}
.data-table caption {
  text-align:left;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--steel);
  padding-bottom:var(--sp-3);
}
.data-table th, .data-table td {
  border:1px solid var(--line);
  padding:var(--sp-3) var(--sp-4);
  text-align:left;
  vertical-align:top;
}
.data-table th {
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--steel);
  background:var(--paper);
}
.data-table td:first-child { font-family:var(--mono); font-size:.82rem; }

.dark-block .data-table { border-color:var(--line-dark); }
.dark-block .data-table th, .dark-block .data-table td { border-color:var(--line-dark); }
.dark-block .data-table th { background:rgba(255,255,255,.05); color:var(--steel-2); }
.dark-block .data-table td { color:var(--steel-3); }

/* ---------- Filas de servicio (hub) ---------- */

.service-rows { list-style:none; border:1px solid var(--line-strong); background:var(--white); }
.service-rows li { border-bottom:1px solid var(--line); }
.service-rows li:last-child { border-bottom:none; }
.service-rows a {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:var(--sp-5);
  padding:var(--sp-4) var(--sp-5);
  color:var(--ink);
}
.service-rows a:hover { text-decoration:none; background:var(--paper); }
.service-rows a:hover .service-row-name { text-decoration:underline; text-decoration-color:currentColor; text-underline-offset:3px; }
.service-row-name { font-weight:600; }
.service-row-desc { font-size:.88rem; color:var(--steel); display:block; }
.service-row-meta {
  font-family:var(--mono);
  font-size:.75rem;
  color:var(--steel);
  white-space:nowrap;
}
/* Fila sin enlace (p. ej. TITANIUM SIGHT): mismo formato, sin hover */
.service-row-static {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:var(--sp-5);
  padding:var(--sp-4) var(--sp-5);
}

/* Familias del hub de servicios: banda alterna (B) + número gigante (A) +
   regla de cabecera marcada (C), estilo índice de plano de ingeniería. */
.family-section { padding-block:var(--sp-8); }
.family-head {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--sp-4) var(--sp-6);
  align-items:start;
  border-top:2px solid var(--ink);
  padding-top:var(--sp-5);
  margin-bottom:var(--sp-6);
}
.family-num {
  font-family:var(--cond);
  font-weight:700;
  font-size:clamp(3.2rem, 8vw, 6.5rem);
  line-height:.82;
  letter-spacing:-.03em;
  color:var(--steel-2);
}
.family-head-text h2 { margin-bottom:var(--sp-3); }
.family-head-text p { color:var(--steel); max-width:62ch; margin:0; }

/* Se conserva por si el patrón antiguo se usa en otra página */
.family-block { margin-top:var(--sp-7); }
.family-block:first-of-type { margin-top:0; }
.family-block > h2 { margin-bottom:var(--sp-2); }
.family-block > p { color:var(--steel); max-width:64ch; margin-bottom:var(--sp-4); }

/* ---------- Formulario ---------- */

/* formulario.html sirve ES y EN desde una sola URL raíz. El atributo del
   documento se fija antes de cargar la hoja para evitar mostrar ambos idiomas. */
html[data-form-lang="es"] [data-lang="en"],
html[data-form-lang="en"] [data-lang="es"] { display:none !important; }

.form-page-layout { grid-template-columns:minmax(0, 1fr) 360px; }
.crmWebToEntityForm {
  border-top:2px solid var(--ink);
  padding-top:var(--sp-5);
}
.crmWebToEntityForm h2 { margin-bottom:var(--sp-2); }
.form-required-note {
  color:var(--steel);
  font-size:.85rem;
  margin-bottom:var(--sp-5);
}

.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-5);
}
.form-field { display:flex; flex-direction:column; gap:var(--sp-2); }
.form-field.wide { grid-column:1 / -1; }
.form-field label { font-weight:600; font-size:.92rem; }
.form-field .hint { font-size:.8rem; color:var(--steel); }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  font-family:var(--sans);
  font-size:.95rem;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--line-strong);
  padding:var(--sp-3);
  width:100%;
}
input:focus, select:focus, textarea:focus {
  outline:2px solid var(--ink);
  outline-offset:0;
  border-color:var(--navy);
}
textarea { min-height:140px; resize:vertical; }

.consent { display:flex; gap:var(--sp-3); align-items:flex-start; font-size:.85rem; }
.consent input { width:auto; margin-top:4px; }
.consent a { text-decoration:underline; }

.captcha-controls {
  display:grid;
  grid-template-columns:minmax(150px, 1fr) auto;
  gap:var(--sp-3);
  align-items:center;
}
.captcha-controls input { grid-column:1 / -1; }
.captcha-controls img {
  display:block;
  max-width:100%;
  min-height:48px;
  border:1px solid var(--line-strong);
  background:var(--paper);
}
.captcha-reload { justify-self:start; }
.form-error {
  color:#8b1e1e;
  font-size:.82rem;
  font-weight:600;
}
.form-honeypot,
.form-captcha-frame { display:none; }
.form-actions {
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
}
.formsubmit:disabled { cursor:wait; opacity:.55; }

.incident-card {
  border:1px solid var(--signal-deep);
  background:var(--ink);
  color:var(--white);
}
.incident-card .incident-head {
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--signal);
  padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--line-dark);
}
.incident-card .incident-body { padding:var(--sp-4); }
.incident-card p { color:var(--steel-3); font-size:.9rem; }
.incident-phone {
  display:block;
  font-family:var(--cond);
  font-weight:700;
  font-size:1.9rem;
  color:var(--signal);
  margin-top:var(--sp-3);
  letter-spacing:.02em;
}
.incident-card a.incident-phone:hover { text-decoration:none; color:var(--white); }

/* ---------- Pie (estructura de rutileics.com, paleta de Titanium) ---------- */

.site-footer {
  background:var(--ink);
  color:var(--steel-2);
  padding:40px 0;
}
.footer-grid {
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:32px;
}
.footer-logos {
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
}
.footer-logo { display:block; width:auto; }
.footer-logo-titanium { height:54px; filter:invert(1); }
.footer-logo-europe { height:42px; }
.legal {
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  font-size:.8rem;
}
.legal a {
  color:var(--steel-2);
  text-decoration:underline;
}
.legal a:hover { color:var(--white); }
.social-link {
  display:grid;
  place-items:center;
  width:33px;
  height:33px;
  border:1px solid var(--line-dark);
  text-decoration:none;
}
.legal a.social-link { text-decoration:none; }
.social-link svg { width:18px; height:18px; }
.social-link:hover { border-color:var(--steel-2); }

/* ---------- Diálogos legales del pie ---------- */

.legal-dialog {
  position:fixed;
  inset:0;
  margin:auto;
  width:760px;
  max-width:calc(100% - 38px);
  max-height:min(82vh, 860px);
  padding:0;
  border:1px solid var(--line-strong);
  background:var(--white);
  color:var(--ink);
  overflow:auto;
}
.legal-dialog::backdrop {
  background:rgba(18,20,23,.55);
}
.dialog-head {
  position:sticky;
  top:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--line);
  background:var(--paper);
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--steel);
}
.dialog-head strong { font-weight:500; }
.dialog-close {
  background:none;
  border:1px solid var(--line-strong);
  color:var(--ink);
  font-size:1.05rem;
  line-height:1;
  width:28px;
  height:28px;
  cursor:pointer;
  flex:none;
}
.dialog-close:hover { background:var(--ink); color:var(--white); }
.legal-document { padding:var(--sp-5); }
.legal-document .eyebrow {
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--steel);
}
.legal-document h2 { margin:var(--sp-2) 0 var(--sp-3); }
.legal-tabs {
  display:flex;
  gap:var(--sp-4);
  padding-bottom:var(--sp-3);
  margin-bottom:var(--sp-4);
  border-bottom:1px solid var(--line);
}
.legal-tab {
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.legal-document p { font-size:.92rem; }
.legal-document p + p { margin-top:var(--sp-3); }

/* ---------- Revelado al hacer scroll ---------- */

/* Solo se oculta si el JS está activo (html.js) */
.js .reveal {
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s ease, transform .5s ease;
}
.js .reveal.is-visible {
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .js .reveal { opacity:1; transform:none; transition:none; }
  * { transition-duration:0s !important; animation:none !important; }
}

/* ---------- Figuras e imágenes de contenido ---------- */

.figure {
  margin:0;
  border:1px solid var(--line);
  background:var(--paper);
}
.figure img {
  width:100%;
  height:auto;
  display:block;
  border-bottom:1px solid var(--line);
}
.figure figcaption {
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.06em;
  color:var(--steel);
  padding:var(--sp-3) var(--sp-4);
}
/* Imagen de ancho completo dentro de una cabecera oscura */
.media-band { border:1px solid var(--line-dark); background:var(--ink); }
.media-band img { width:100%; height:auto; display:block; }
.media-band figcaption {
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.06em;
  color:var(--steel-2);
  padding:var(--sp-3) var(--sp-4);
  border-top:1px solid var(--line-dark);
}
.figure-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.figure-grid figure { margin:0; background:var(--white); }
.figure-grid img { width:100%; height:auto; display:block; }
.figure-grid figcaption {
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.05em;
  color:var(--steel);
  padding:var(--sp-2) var(--sp-3);
}

/* ---------- Utilidades de espaciado (evitan CSS incrustado) ---------- */

.mt-8  { margin-top:var(--sp-2); }
.mt-16 { margin-top:var(--sp-4); }
.mt-24 { margin-top:var(--sp-5); }
.mt-32 { margin-top:var(--sp-6); }
.mt-48 { margin-top:var(--sp-7); }
.pb0   { padding-block:0; }
.muted { color:var(--steel); }
.measure { max-width:64ch; }
.strong-light { color:var(--white); }

/* ---------- Noticias ---------- */

.news-funding-banner {
  margin-bottom:var(--sp-5);
  padding:var(--sp-4);
  border:1px solid var(--line);
  background:var(--white);
  overflow:hidden;
}
.news-funding-banner img { width:100%; height:auto; }
.news-project-grid .card { min-height:100%; }
.news-date {
  display:block;
  margin-bottom:var(--sp-3);
  color:var(--steel);
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.news-reference, .news-source {
  color:var(--steel);
  font-family:var(--mono);
  font-size:.78rem;
}
.news-source { margin-top:var(--sp-4); }
.news-list { border-top:1px solid var(--line-strong); }
.news-item {
  display:grid;
  grid-template-columns:minmax(260px, .9fr) minmax(0, 1.35fr);
  gap:var(--sp-6);
  padding-block:var(--sp-7);
  border-bottom:1px solid var(--line-strong);
}
.news-item-media {
  display:flex;
  min-height:220px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  background:var(--white);
  overflow:hidden;
}
.news-item-media img {
  width:100%;
  height:100%;
  max-height:340px;
  object-fit:contain;
}
.news-item-media-contain { padding:var(--sp-4); }
.news-item-copy h3 { margin-bottom:var(--sp-4); font-size:1.45rem; }
.news-gallery {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1px;
  margin-top:var(--sp-5);
  border:1px solid var(--line);
  background:var(--line);
}
.news-gallery img {
  width:100%;
  height:190px;
  padding:var(--sp-3);
  object-fit:contain;
  background:var(--white);
}
.news-gallery-wide img { height:240px; }
.news-support-strip {
  width:100%;
  margin-top:var(--sp-3);
  padding:var(--sp-3);
  border:1px solid var(--line);
  background:var(--white);
}
.news-blog-grid {
  display:grid;
  grid-template-columns:minmax(0, 1fr) 260px;
  gap:var(--sp-7);
  align-items:center;
}
.news-blog-grid > img {
  width:100%;
  max-height:320px;
  border:1px solid var(--line-dark);
  object-fit:cover;
}
.news-blog-grid p { max-width:62ch; color:var(--steel-3); }
.news-origin { margin-top:var(--sp-5); font-family:var(--mono); font-size:.75rem; }
.news-origin a { color:var(--white); }

/* ---------- Cortes responsive ---------- */

@media (max-width:1180px) {
  .hero-grid { gap:var(--sp-7); }
}

@media (max-width:1080px) {
  /* La navegación completa va justa: se compacta sin pasar aún a hamburguesa */
  .brand-logo { height:80px; }
  .site-nav { gap:var(--sp-3); }
  .site-nav ul { gap:var(--sp-2); }
  .site-nav ul a { font-size:.8rem; }
  .nav-cta { padding:var(--sp-2) var(--sp-3); font-size:.8rem; }
}

@media (max-width:1000px) {
  .hero-grid { grid-template-columns:1fr; }
  .cols-4 { grid-template-columns:repeat(2, 1fr); }
  .cols-3 { grid-template-columns:repeat(2, 1fr); }
  .split { grid-template-columns:1fr; }
  .sidecard { position:static; }
  .next-links { grid-template-columns:1fr; }
}

@media (max-width:900px) {
  .nav-toggle { display:block; }
  .site-nav {
    display:none;
    position:absolute;
    left:0; right:0;
    top:100%;
    background:var(--white);
    border-bottom:1px solid var(--line-strong);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:var(--sp-4) var(--sp-5) var(--sp-5);
  }
  .site-nav.is-open { display:flex; }
  .site-nav ul { flex-direction:column; gap:0; }
  .site-nav ul a {
    display:block;
    padding:var(--sp-3) 0;
    border-bottom:1px solid var(--line);
    font-size:1rem;
  }
  .site-nav ul a:hover { border-bottom-color:var(--line); }
  .site-nav .nav-cta { margin-top:var(--sp-4); }
}

@media (max-width:760px) {
  .brand-logo { height:88px; }
  .nav-toggle { display:block; }
  .site-nav {
    display:none;
    position:absolute;
    left:0; right:0;
    top:100%;
    background:var(--white);
    border-bottom:1px solid var(--line-strong);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:var(--sp-4) var(--sp-5) var(--sp-5);
  }
  .site-nav.is-open { display:flex; }
  .site-nav ul { flex-direction:column; gap:0; }
  .site-nav ul a {
    display:block;
    padding:var(--sp-3) 0;
    border-bottom:1px solid var(--line);
    font-size:1rem;
  }
  .site-nav ul a:hover { border-bottom-color:var(--line); }
  .site-nav .nav-cta { margin-top:var(--sp-4); }
  .cols-4, .cols-3, .cols-2 { grid-template-columns:1fr; }
  .figure-grid { grid-template-columns:1fr; }
  .family-head { grid-template-columns:1fr; gap:var(--sp-2); }
  .form-grid { grid-template-columns:1fr; }
  .publication-item { grid-template-columns:1fr; gap:var(--sp-2); }
  .footer-grid { grid-template-columns:1fr; align-items:start; }
  .service-rows a, .service-row-static { flex-direction:column; gap:var(--sp-1); }
  .hero-grid { padding-block:var(--sp-7); }
  .section { padding-block:var(--sp-7); }
  .news-item { grid-template-columns:1fr; gap:var(--sp-5); }
  .news-blog-grid { grid-template-columns:1fr; }
  .news-blog-grid > img { max-width:260px; }
}

@media (max-width:480px) {
  .container { padding-inline:var(--sp-4); }
  .topbar-inner { grid-template-columns:1fr auto; gap:var(--sp-2); }
  .topbar-inner > p { grid-column:1; }
  .lang-switch { grid-column:2; }
  .topbar-incident { padding-inline:var(--sp-2); font-size:.68rem; }
  .hero-actions .btn { width:100%; }
  .captcha-controls { grid-template-columns:1fr; }
  .captcha-controls input { grid-column:auto; }
  .form-actions .btn { width:100%; }
  .news-gallery { grid-template-columns:1fr; }
}

/* ---------- Gestor de cookies ----------
   Mismo lenguaje que el resto: sin radios, sin sombras, líneas de 1px.
   El banner se ancla abajo y no tapa el contenido en escritorio. */

.cookie-banner {
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:60;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:var(--sp-6);
  padding:var(--sp-5);
  background:var(--ink);
  color:var(--steel-3);
  border-top:1px solid var(--line-dark);
}
.cookie-banner h2 {
  font-size:1.05rem;
  color:var(--white);
  margin-bottom:var(--sp-2);
}
.cookie-banner p { font-size:.85rem; line-height:1.55; max-width:78ch; }
.cookie-banner-link { margin-top:var(--sp-3); }
.cookie-banner a { color:var(--white); text-decoration:underline; text-underline-offset:3px; }
.cookie-banner-actions {
  display:flex;
  gap:var(--sp-3);
  flex-wrap:wrap;
  flex:none;
}
/* Aceptar y rechazar comparten peso visual: lo exige la Guía de cookies
   de la AEPD, y además es lo honesto. */
.cookie-banner-actions .btn-primary {
  background:var(--white);
  color:var(--ink);
  border-color:var(--white);
  min-width:150px;
}
.cookie-banner-actions .btn-primary:hover {
  background:var(--steel-3);
  border-color:var(--steel-3);
}
.cookie-banner-actions .btn-ghost {
  color:var(--white);
  border-color:var(--line-dark);
  min-width:110px;
}
.cookie-banner-actions .btn-ghost:hover { border-color:var(--white); }

@media (max-width:860px) {
  .cookie-banner { grid-template-columns:1fr; gap:var(--sp-4); }
  .cookie-banner-actions .btn { flex:1 1 auto; min-width:0; }
}

/* Panel de configuración: reutiliza el marco de los diálogos legales */
.cookie-panel {
  position:fixed;
  inset:0;
  margin:auto;
  width:640px;
  max-width:calc(100% - 38px);
  max-height:min(82vh, 860px);
  padding:0;
  border:1px solid var(--line-strong);
  background:var(--white);
  color:var(--ink);
  overflow:auto;
}
.cookie-panel::backdrop { background:rgba(18,20,23,.55); }
.cookie-panel-body { padding:var(--sp-5); }
.cookie-panel-body h2 { margin-bottom:var(--sp-3); }
.cookie-panel-body > p { font-size:.92rem; }
.cookie-panel-link { margin-top:var(--sp-4); font-size:.85rem; }
.cookie-panel-link a { text-decoration:underline; text-underline-offset:3px; }

.cookie-cat {
  border-top:1px solid var(--line);
  padding:var(--sp-4) 0;
}
.cookie-cat p { font-size:.85rem; color:var(--steel); margin-top:var(--sp-2); }
.cookie-cat-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--sp-4);
}
.cookie-cat-head h3 { font-size:1rem; }
.cookie-cat-state {
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--steel);
}

/* Interruptor: cuadrado, coherente con el resto del sitio */
.cookie-switch {
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  cursor:pointer;
  width:100%;
}
.cookie-switch input {
  position:absolute;
  opacity:0;
  width:1px; height:1px;
}
.cookie-switch-track {
  flex:none;
  position:relative;
  width:44px;
  height:22px;
  border:1px solid var(--line-strong);
  background:var(--paper);
  transition:background .12s linear, border-color .12s linear;
}
.cookie-switch-track::after {
  content:"";
  position:absolute;
  top:2px; left:2px;
  width:16px; height:16px;
  background:var(--steel);
  transition:transform .12s linear, background .12s linear;
}
.cookie-switch input:checked + .cookie-switch-track {
  background:var(--ink);
  border-color:var(--ink);
}
.cookie-switch input:checked + .cookie-switch-track::after {
  transform:translateX(22px);
  background:var(--white);
}
.cookie-switch input:focus-visible + .cookie-switch-track {
  outline:2px solid var(--ink);
  outline-offset:2px;
}
.cookie-switch-text { font-family:var(--cond); font-weight:700; font-size:1rem; }

.cookie-panel-actions {
  display:flex;
  gap:var(--sp-3);
  flex-wrap:wrap;
  margin-top:var(--sp-5);
  padding-top:var(--sp-4);
  border-top:1px solid var(--line);
}

@media (prefers-reduced-motion:reduce) {
  .cookie-switch-track, .cookie-switch-track::after { transition:none; }
}

/* Enlace permanente del pie para volver a abrir el panel */
.legal a.cookie-prefs-link { color:var(--steel-2); text-decoration:underline; }
.legal a.cookie-prefs-link:hover { color:var(--white); }

/* Tabla de cookies dentro de los documentos legales */
.legal-document .data-table, .legal-page .data-table { margin-top:var(--sp-3); }
.legal-document .data-table th, .legal-document .data-table td { font-size:.82rem; }

@media print {
  .cookie-banner, .cookie-panel { display:none !important; }
}

/* Botón que se comporta como enlace, dentro de los textos legales */
.link-button {
  background:none;
  border:0;
  padding:0;
  font:inherit;
  color:var(--navy-2);
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.link-button:hover { color:var(--ink); }
.legal-document h3, .legal-page h3 {
  margin-top:var(--sp-5);
  margin-bottom:var(--sp-2);
  font-size:1.05rem;
}