/* ============================================================================
   immersive.css — capa dev de VIDA (gradientes + motion + profundidad + fixes)
   para EVALUACIÓN VISUAL sobre el sitio real. Sesión 2026-07-28 (v0.4.1).
   Reversible: quitar el <link> + <script immersive.js> de templates/base.html.
   Guardrails rubric inmersividad (par D/H): gradiente de marca + grano (no slop),
   motion transform/opacity, HATCH = prefers-reduced-motion apaga todo.
   v0.4.1 (feedback Julián): + sombras/vida, mato el arcoíris de tags de las cards,
   relleno de marca para imágenes vacías, gradiente MÁS visible, hero sobre el mapa.
   ============================================================================ */
:root{
  --im-t-fast:.14s; --im-t-med:.30s; --im-ease:cubic-bezier(.2,.7,.2,1);
  --im-chip-bg:#EEF3F7; --im-chip-ink:#2B3A46; --im-chip-bd:#DCE6EE;
  --im-sh-card:0 2px 4px rgba(20,40,60,.05), 0 14px 30px -14px rgba(20,40,60,.22);
  --im-sh-card-hover:0 8px 16px -6px rgba(20,40,60,.12), 0 28px 50px -18px rgba(20,40,60,.30);
  --im-tint:#0A5876;
}

/* --- Gradiente mesh de marca + grano en el hero/mapa (MÁS visible + vignette de profundidad) --- */
.homepage__cover{
  background:
    radial-gradient(48% 60% at 16% 10%, rgba(55,194,243,.30), transparent 60%),
    radial-gradient(44% 54% at 88% 6%,  rgba(80,158,207,.34), transparent 55%),
    radial-gradient(64% 74% at 74% 100%, rgba(90,140,190,.40), transparent 66%),
    radial-gradient(120% 120% at 50% 40%, transparent 60%, rgba(20,50,80,.18)),  /* vignette: da profundidad al mapa */
    #CFE0F2 !important;
  position: relative;
}
.homepage__cover::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background-repeat:repeat; }
/* --- TEXTURAS (selector 'data-texture'): grain(default) / none / dots / grid / carto --- */
html:not([data-texture]) .homepage__cover::before,
html[data-texture="grain"] .homepage__cover::before{ opacity:.22; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
html[data-texture="none"] .homepage__cover::before{ background-image:none; }
html[data-texture="dots"] .homepage__cover::before{ opacity:.5; mix-blend-mode:multiply;
  background-image:radial-gradient(rgba(10,50,80,.28) 1px, transparent 1.5px); background-size:15px 15px; }
html[data-texture="grid"] .homepage__cover::before{ opacity:.5; mix-blend-mode:multiply;
  background-image:linear-gradient(rgba(10,50,80,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(10,50,80,.16) 1px,transparent 1px); background-size:30px 30px; }
html[data-texture="carto"] .homepage__cover::before{ opacity:.7; mix-blend-mode:multiply;
  background-image:repeating-radial-gradient(circle at 32% 42%, transparent 0 20px, rgba(10,50,80,.05) 20px 21px), repeating-radial-gradient(circle at 78% 70%, transparent 0 24px, rgba(10,50,80,.045) 24px 25px); }
.homepage__cover > *{ position:relative; z-index:1; }

/* --- NAVBAR: no sólido/mate → glass translúcido con blur (deja ver el mapa). Default. --- */
.site-navbar{
  background: color-mix(in srgb, var(--po-color-blue) 76%, transparent) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.12); backdrop-filter: blur(14px) saturate(1.12);
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 10px 30px -18px rgba(0,20,35,.5) !important;
}
html[data-nav="gradient"] .site-navbar{ background: linear-gradient(180deg, color-mix(in srgb,var(--po-color-blue) 92%,transparent), color-mix(in srgb,var(--po-color-blue) 60%,transparent)) !important; }
html[data-nav="solid"] .site-navbar{ background: var(--po-color-blue) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .site-navbar{ background: color-mix(in srgb, var(--po-color-blue) 94%, transparent) !important; }
}

/* --- Hero inyectado sobre el mapa (immersive.js crea .im-hero) --- */
.im-hero{ position:absolute; top:34px; left:max(24px,calc((100% - 1140px)/2 + 12px)); z-index:5; max-width:420px;
  background:rgba(255,255,255,.72); backdrop-filter:blur(16px) saturate(1.1); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.6); border-radius:18px; box-shadow:var(--im-sh-card); padding:22px 24px;
  opacity:0; transform:translateY(12px); animation:im-rise .6s var(--im-ease) .1s forwards; }
@keyframes im-rise{ to{opacity:1;transform:none} }
.im-hero .k{ font:600 11px/1 monospace; letter-spacing:.09em; text-transform:uppercase; color:var(--im-tint); }
.im-hero h2{ font-family:'Chivo',sans-serif; font-weight:900; font-size:26px; line-height:1.12; color:#12303f; margin:8px 0 6px; }
.im-hero p{ font-size:14px; color:#4a5a68; margin:0; }
.im-hero .close{ position:absolute; top:10px; right:10px; width:26px;height:26px;border-radius:50%;border:1px solid #dce6ee;background:#fff;color:#5a6a78;cursor:pointer;line-height:1;transition:transform var(--im-t-fast); }
.im-hero .close:hover{ transform:rotate(90deg); }
.im-hero.hidden{ opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity var(--im-t-med),transform var(--im-t-med); }

/* --- CARDS: sombra + vida + hover con PRESENCIA --- */
.card{ box-shadow:var(--im-sh-card) !important; border:1px solid #E7EEF4 !important; border-radius:14px !important;
  transition: box-shadow var(--im-t-med) var(--im-ease), transform var(--im-t-med) var(--im-ease) !important; }
.card:hover{ transform:translateY(-6px) !important; box-shadow:var(--im-sh-card-hover) !important; }
/* imagen vacía/rota → relleno de marca (no caja blanca) */
.card__image{ background:linear-gradient(140deg, #e8f1f8, #d3e3f1) !important; position:relative; overflow:hidden; }
.card__image::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 45%, rgba(10,88,118,.10), transparent 60%); }
.card__image img{ width:100% !important; height:100% !important; object-fit:cover !important; position:relative; z-index:1; }
.card__title{ transition:color var(--im-t-fast); }

/* --- MATO el arcoíris de tags de contenido → chip sobrio único --- */
[class*="stat__colors"]{ background:var(--im-chip-bg) !important; color:var(--im-chip-ink) !important;
  border:1px solid var(--im-chip-bd) !important; border-radius:9999px !important; font-weight:600 !important; }

/* --- Reveal al scroll con MÁS presencia (más recorrido + escala) --- */
body.js-motion .card{ opacity:0; transform:translateY(30px) scale(.98); }
body.js-motion .card.reveal-in{ opacity:1; transform:none; transition:opacity .55s var(--im-ease), transform .55s var(--im-ease); }

/* --- Micro-vida en controles --- */
.btn-blue,.btn-grey{ transition:transform var(--im-t-fast) var(--im-ease), box-shadow var(--im-t-fast) var(--im-ease) !important; }
.btn-blue:hover,.btn-grey:hover{ transform:translateY(-2px); box-shadow:0 10px 20px -8px rgba(10,88,118,.4); }
.form-control:focus,.custom-select:focus{ box-shadow:0 0 0 4px rgba(80,158,207,.22) !important; }
.number{ transition:color var(--im-t-med) var(--im-ease); }

/* --- COHERENCIA (V4): la textura + un tinte de marca acompañan TODO el sitio (no solo el hero) --- */
/* Tinte de marca muy sutil en el fondo de página (se ve en los cuerpos claros y márgenes). */
body{ background: linear-gradient(180deg, color-mix(in srgb, var(--po-color-horizon-blue) 55%, #fff), #fbfcfd 55%) !important; }
/* Capa de textura GLOBAL fija: cubre navbar + secciones + todo, uniforme. immersive.js crea .im-tex-global */
.im-tex-global{ position:fixed; inset:0; pointer-events:none; z-index:9990; background-repeat:repeat; opacity:.045; }
html[data-texture="none"] .im-tex-global{ background-image:none; }
html:not([data-texture]) .im-tex-global,
html[data-texture="grain"] .im-tex-global{ mix-blend-mode:overlay; opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
html[data-texture="dots"] .im-tex-global{ mix-blend-mode:multiply; opacity:.5; background-image:radial-gradient(rgba(10,50,80,.18) 1px, transparent 1.5px); background-size:16px 16px; }
html[data-texture="grid"] .im-tex-global{ mix-blend-mode:multiply; opacity:.5; background-image:linear-gradient(rgba(10,50,80,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(10,50,80,.10) 1px,transparent 1px); background-size:32px 32px; }
html[data-texture="carto"] .im-tex-global{ mix-blend-mode:multiply; opacity:.6; background-image:repeating-radial-gradient(circle at 30% 30%, transparent 0 26px, rgba(10,50,80,.03) 26px 27px), repeating-radial-gradient(circle at 80% 75%, transparent 0 30px, rgba(10,50,80,.028) 30px 31px); }

/* --- HATCH: sin motion si el usuario lo pide --- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  body.js-motion .card{ opacity:1 !important; transform:none !important; }
  .im-hero{ opacity:1 !important; transform:none !important; }
}