/* OTRiskMap — estilos del sitio. Colores y fuentes tomados del Figma (página "OTRiskMap — editable"). */

:root {
  --fondo: #0a0d14;
  --fondo-verde: #04150e;
  --fondo-tarjeta: rgba(4, 21, 14, 0.5);
  --fondo-barra: #072519;
  --borde: #1e293b;
  --borde-verde: #0a3825;
  --borde-barra: #137049;

  --texto: #f8fafc;
  --texto-suave: #94a3b8;
  --texto-tabla: #cbd5e1;
  --texto-apagado: #64748b;
  --menu: #72cba2;
  --verde: #34d399;
  --verde-boton: #10b981;
  --texto-boton: #03120f;
  --cian: #22d3ee;

  --mono: "JetBrains Mono", ui-monospace, monospace;
  --sans: "Inter", system-ui, sans-serif;

  /* Márgenes laterales: 81 px en 1440, menos en pantallas chicas */
  --margen: clamp(16px, 5.6vw, 81px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  line-height: normal;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

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

.boton {
  display: inline-block;
  padding: 16px 24px;
  border-radius: 31px;
  background: var(--verde-boton);
  color: #07131a;
  font: 700 13px var(--mono);
  white-space: nowrap;
  transition: background-color 0.2s, box-shadow 0.2s;
}
.boton:hover { background: #34d399; box-shadow: 0 0 18px rgba(16, 185, 129, 0.45); }
.boton:focus-visible, .menu a:focus-visible, .marca:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 3px;
}

.boton--secundario {
  background: var(--fondo-barra);
  border: 1px solid var(--borde-barra);
  color: var(--verde);
  font-weight: 400;
}
.boton--secundario:hover { background: #0b3a26; }

.boton--chico { padding: 11px 32px; font-size: 11px; color: var(--texto-boton); }
.boton--recto { padding: 15px 26px; border-radius: 4px; color: var(--texto-boton); }

/* ---------- Header ---------- */

.header {
  position: absolute;
  inset: 18px 0 auto;
  z-index: 10;
  padding: 0 clamp(16px, 2vw, 29px);
}

.barra {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 1381px;
  height: 83px;
  margin: 0 auto;
  padding: 0 55px 0 65px;
  background: var(--fondo-barra);
  border: 1px solid var(--borde-barra);
  border-radius: 31px;
}

.marca { display: flex; flex-direction: column; gap: 1px; white-space: nowrap; font-family: var(--mono); }
.marca__nombre { font-size: 18px; font-weight: 700; color: var(--texto); }
.marca__lema { font-size: 9px; color: var(--texto-apagado); }

.menu {
  display: flex;
  gap: 30px;
  margin-left: auto;
  margin-right: auto;
  font: 12px var(--mono);
  color: var(--menu);
}
.menu a { white-space: nowrap; transition: color 0.2s; }
.menu a:hover { color: var(--verde); }

.barra__boton-movil {
  display: none;
  margin-left: auto;
  padding: 6px 12px;
  background: none;
  border: 1px solid var(--borde-barra);
  border-radius: 8px;
  color: var(--verde);
  font-size: 18px;
  cursor: pointer;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 700px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  padding: 152px var(--margen) 35px;
  text-align: center;
}

/* Imagen de fondo: 1458 × 911 en el diseño, 30 px sobre el borde superior */
.hero__fondo {
  position: absolute;
  top: -30px;
  left: 0;
  width: calc(100% + 18px);
  height: calc(100% + 211px);
}
.hero__imagen, .hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__canvas { display: block; pointer-events: none; }
.hero__canvas[hidden] { display: none; }

.hero__velo { position: absolute; left: 0; width: 100%; pointer-events: none; }
.hero__velo--1 {
  top: -3px;
  height: calc(100% + 46px);
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1440 746' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-9.0611e-7 76.764 -148.18 -0.0000020618 720 207.85)'><stop stop-color='rgba(7,19,26,0)' offset='0'/><stop stop-color='rgba(6,25,17,1)' offset='0.85577'/></radialGradient></defs></svg>");
  background-size: 100% 100%;
}
.hero__velo--2 {
  top: -3px;
  height: calc(100% + 46px);
  background-image: linear-gradient(62.76deg, rgba(7, 19, 26, 0) 75.622%, rgba(9, 95, 35, 0.71) 104.81%);
}
.hero__velo--3 {
  top: -94px;
  height: calc(100% + 137px);
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1440 837' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-107.95 2.0446 -1.6 -137.95 720 459.39)'><stop stop-color='rgba(0,0,0,0.69)' offset='0.23077'/><stop stop-color='rgba(7,19,26,0)' offset='1'/></radialGradient></defs></svg>");
  background-size: 100% 100%;
}

.hero__contenido {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1280px;
}

.etiqueta {
  max-width: 398px;
  padding: 8px 14px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid var(--borde-verde);
  border-radius: 12px;
  color: var(--verde);
  font: 700 11px var(--mono);
}

.hero__titulo {
  margin-top: 45px;
  font-size: clamp(34px, 4.03vw, 58px);
  font-weight: 800;
}

.hero__texto {
  max-width: 1129px;
  margin-top: 28px;
  font-size: clamp(17px, 1.67vw, 24px);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 53px;
}

.hero__metricas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 18px;
}

.metrica {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 273px;
  height: 92px;
  padding: 0 24px;
  background: var(--fondo-tarjeta);
  border: 1px solid var(--borde-verde);
  border-radius: 12px;
  text-align: left;
}
.metrica__nombre { color: var(--verde); font: 500 11px var(--mono); }
.metrica__valor { font-size: 22px; font-weight: 700; }

/* ---------- Secciones ---------- */

.seccion {
  position: relative;
  padding: 77px var(--margen);
}

.seccion--fundacion {
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1440 588' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-0.0000053316 75.8 -185.63 -0.000013057 720 266.5)'><stop stop-color='rgba(2,6,5,1)' offset='0.33654'/><stop stop-color='rgba(2,25,16,0.885)' offset='0.66827'/><stop stop-color='rgba(2,43,26,0.77)' offset='1'/></radialGradient></defs></svg>");
  background-size: 100% 100%;
}

.seccion--fondo {
  background: url("../imagenes/fondo-secciones.webp") center / cover no-repeat;
}

.seccion__titulo { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }
.seccion__titulo h2 { font-size: clamp(28px, 2.5vw, 36px); font-weight: 700; }
.seccion__codigo { color: var(--verde); font: 500 12px var(--mono); }
.seccion__codigo--cian { color: var(--cian); }
.seccion__bajada { color: var(--texto-suave); font-size: 18px; }

.grilla { display: grid; gap: 24px; }
.grilla--2 { grid-template-columns: repeat(2, 1fr); }
.grilla--3 { grid-template-columns: repeat(3, 1fr); }

.tarjeta {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--fondo-tarjeta);
  border: 1px solid var(--borde);
  border-radius: 12px;
}
.tarjeta h3 { font-size: 20px; font-weight: 700; }
.tarjeta p { color: var(--texto-suave); font-size: 16px; }
.tarjeta__codigo { font: 500 12px var(--mono); color: var(--cian) !important; }

.tarjeta--fundacion { gap: 0; padding: 28px; border-radius: 16px; }
.tarjeta--fundacion h3 { margin-top: 23px; font-size: 22px; }
.tarjeta--fundacion > p:not(.tarjeta__numero) { margin-top: 18px; }
.tarjeta__numero {
  text-align: right;
  font: 700 40px var(--mono);
  color: var(--cian) !important;
}
.tarjeta--verde .tarjeta__numero { color: var(--verde) !important; }

.terminal {
  display: block;
  margin-top: 24px;
  padding: 14px 16px;
  background: var(--fondo-verde);
  border: 1px solid var(--borde);
  border-radius: 8px;
  color: var(--cian);
  font: 12px var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.tarjeta--verde .terminal { color: var(--verde); font-weight: 700; }

.tarjeta--modelo { gap: 14px; min-height: 306px; }
.tarjeta__identidad {
  display: flex;
  color: var(--cian) !important;
  font: 500 12px var(--mono) !important;
}
.tarjeta__identidad span { flex: 1; }
.tarjeta__identidad span + span { font-weight: 400; }

/* ---------- Tabla de marcos legales ---------- */

.tabla {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #121722;
  border: 1px solid var(--borde);
  border-radius: 12px;
  overflow: hidden;
  font: 12px var(--mono);
  text-align: left;
}
.tabla th, .tabla td { width: 33.33%; padding: 18px 16px; vertical-align: top; font-weight: 400; }
.tabla thead th { padding: 16px; background: var(--fondo-verde); color: var(--verde); }
.tabla tbody tr { background: var(--fondo-tarjeta); }
.tabla tbody tr:nth-child(odd) { background: #0f141d; }
.tabla tbody th, .tabla tbody td { border-top: 1px solid var(--borde); }
.tabla tbody th { color: var(--texto); }
.tabla td { color: var(--texto-tabla); }
.tabla td:nth-child(2) { color: var(--texto-suave); }
.tabla .tabla__destacado { color: var(--verde); }

/* ---------- CTA y footer ---------- */

.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 603px;
  padding: 76px clamp(16px, 15.3vw, 220px);
  background: var(--fondo-verde);
  text-align: center;
}
.cta h2 { font-size: clamp(28px, 2.64vw, 38px); font-weight: 700; }
.cta p { color: var(--texto-suave); font-size: 17px; }
.cta .seccion__codigo { color: var(--verde); font-size: 12px; }

/* Página 404 */
.error { min-height: 100vh; }
.error h1 { font-size: clamp(32px, 4vw, 58px); font-weight: 800; }

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 30px clamp(16px, 5.6vw, 80px);
  background: var(--fondo-verde);
  border: 1px solid var(--verde);
  color: var(--texto-apagado);
  font: 11px var(--mono);
}
.footer__enlaces { display: flex; gap: 24px; }

/* ---------- Tablet ---------- */

@media (max-width: 1180px) {
  .barra { padding: 0 24px; }
  .barra__boton-movil { display: block; }
  .barra > .boton--chico { margin-left: 0; }
  .menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 8px;
    background: var(--fondo-barra);
    border: 1px solid var(--borde-barra);
    border-radius: 20px;
  }
  .menu--abierto { display: flex; }
  .menu a { display: block; padding: 14px 16px; font-size: 14px; }

  .grilla--3 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Celular ---------- */

@media (max-width: 760px) {
  .header { top: 12px; }
  .barra { height: 64px; padding: 0 16px; gap: 12px; }
  .marca__nombre { font-size: 15px; }
  .barra > .boton--chico { padding: 10px 16px; }

  .hero { padding-top: 120px; padding-bottom: 48px; }
  .hero__titulo { margin-top: 32px; }
  .hero__titulo br { display: none; }
  .hero__acciones { margin-top: 36px; }
  .metrica { width: 100%; max-width: 320px; }

  .seccion { padding-top: 56px; padding-bottom: 56px; }
  .seccion__bajada { font-size: 16px; }
  .grilla--2, .grilla--3 { grid-template-columns: 1fr; }
  .tarjeta--modelo { min-height: 0; }

  /* La tabla pasa a una tarjeta por norma */
  .tabla, .tabla tbody, .tabla tr, .tabla th, .tabla td { display: block; width: auto; }
  .tabla thead { display: none; }
  .tabla tbody th { padding-bottom: 8px; font-weight: 700; }
  .tabla tbody td { border-top: 0; padding-top: 4px; padding-bottom: 4px; }
  .tabla tbody td:last-child { padding-bottom: 18px; }
  .tabla td::before {
    content: attr(data-titulo);
    display: block;
    margin-bottom: 2px;
    color: var(--texto-apagado);
    font-size: 10px;
    text-transform: uppercase;
  }

  .cta { min-height: 0; padding-top: 64px; padding-bottom: 64px; }
  .footer { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 400px) {
  .marca__lema { display: none; }
}