/* ==========================================================
   Sentiec · estilos propios (complementan a Tailwind)
   ========================================================== */

:root {
  --c-surface: 248 250 255;   /* fondo claro */
  --c-card: 255 255 255;
  --c-ink: 15 23 42;          /* texto principal */
  --c-muted: 71 85 105;       /* texto secundario */
  --c-line: 226 232 240;      /* bordes */
  --brand: #1f51ff;
  --accent: #FFCD1F;
  color-scheme: light;
}

html.dark {
  --c-surface: 9 13 31;
  --c-card: 17 24 48;
  --c-ink: 236 240 255;
  --c-muted: 160 172 200;
  --c-line: 37 48 84;
  color-scheme: dark;
}

/* Contenedor: fluido hasta 1440px con margen lateral según pantalla */
html .container { padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px) { html .container { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { html .container { padding-left: 2.5rem; padding-right: 2.5rem; } }

html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { background: rgb(var(--c-surface)); color: rgb(var(--c-ink)); -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh; }
#main { flex: 1 0 auto; }

[x-cloak] { display: none !important; }

::selection { background: var(--accent); color: #0f172a; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ---------- Decoración ---------- */
.bg-grid {
  background-image:
    linear-gradient(to right, rgb(var(--c-line) / .6) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(var(--c-line) / .6) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

.blob {
  position: absolute; border-radius: 9999px; filter: blur(70px); opacity: .45; pointer-events: none;
}

/* Subrayado amarillo para resaltar palabras clave */
.mark {
  background-image: linear-gradient(transparent 62%, var(--accent) 62%, var(--accent) 90%, transparent 90%);
  padding: 0 .1em;
}
html.dark .mark { background-image: linear-gradient(transparent 62%, rgb(255 205 31 / .45) 62%, rgb(255 205 31 / .45) 90%, transparent 90%); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand);
}
html.dark .eyebrow { color: #93b0ff; }
.eyebrow.on-dark, html.dark .eyebrow.on-dark { color: #fff; }
.eyebrow::before { content: ""; width: 1.5rem; height: 3px; border-radius: 3px; background: var(--accent); }
/* Variante grande (títulos de sección destacados) */
.eyebrow.eyebrow-lg { font-size: clamp(1rem, .9rem + .5vw, 1.25rem); letter-spacing: .1em; gap: .75rem; }
.eyebrow.eyebrow-lg::before { width: 2.25rem; height: 4px; }
/* Título de sección en una sola línea desde 1024px: el tamaño escala con la ventana para no desbordar */
@media (min-width: 1024px) {
  h2.title-1line { white-space: nowrap; font-size: clamp(1.25rem, 2vw, 1.875rem); }
}

/* Revelado al hacer scroll (solo con JS activo) */
html.js [data-reveal] { opacity: 0; }
html.js [data-reveal].animate__animated,
html.js [data-reveal].is-revealed { opacity: 1; }

@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Pasos del proceso: línea conectora */
.timeline-dot::after {
  content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 2.5rem;
  background: linear-gradient(var(--brand), transparent); transform: translateX(-50%);
}

/* ---------- Hover.css: colores corporativos ---------- */
.hvr-sweep-to-right:before,
.hvr-sweep-to-left:before,
.hvr-radial-out:before { background: #1739d6; }
.hvr-sweep-to-right.sweep-accent:before { background: var(--accent); }
.hvr-sweep-to-right.sweep-accent:hover { color: #0f172a !important; }
.hvr-underline-from-left:before,
.hvr-underline-from-center:before { background: var(--accent); height: 3px; }
.hvr-sweep-to-right, .hvr-radial-out { border-radius: .875rem; }
/* Página activa del menú: subrayado amarillo fijo (igual que al pasar el ratón) */
.hvr-underline-from-center.nav-active:before { left: 0; right: 0; }
.hvr-radial-out { overflow: hidden; }

/* Leaflet en modo oscuro */
html.dark .leaflet-tile-pane { filter: invert(1) hue-rotate(200deg) brightness(.9) contrast(.9); }
.leaflet-container { font-family: inherit; }

/* ---------- Textos legales ---------- */
.legal { line-height: 1.75; color: rgb(var(--c-muted)); }
.legal h2 { margin-top: 2rem; font-family: "Plus Jakarta Sans", Inter, sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--brand); }
html.dark .legal h2 { color: #93b0ff; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal ul { margin-top: .75rem; }
.legal ul { list-style: none; padding: 0; }
.legal li { position: relative; padding-left: 1.25rem; margin-top: .4rem; }
.legal li::before { content: ""; position: absolute; left: 0; top: .7em; width: .5rem; height: .5rem; border-radius: 2px; background: var(--accent); }
.legal strong { color: rgb(var(--c-ink)); }
.legal a { color: var(--brand); font-weight: 600; text-decoration: underline; }
html.dark .legal a { color: #93b0ff; }

/* ---------- Accesibilidad: movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html.js [data-reveal] { opacity: 1; }
}