/* ============================================================
   VISUAL INTERNAS · D-062 · 13-may-2026
   ----------------------------------------------------------------
   Polish editorial Marino & Arena para las 147 páginas internas.
   visual-boost.{css,js} sólo carga en home — las internas estaban
   visualmente "planas". Este CSS añade el mínimo polish:
     - fade-up suave al scroll (IntersectionObserver)
     - scroll progress bar arena (2px top, fixed)
     - micro-animations en botones (hover glow + active scale)
     - smooth scroll con offset header sticky
     - lex blink ocasional (FAB búho)
   Cero dependencias HTML específicas — funciona sobre cualquier
   estructura que tenga `.band`, `.btn`, etc.
   `prefers-reduced-motion: reduce` apaga todas las animaciones.
   ============================================================ */

/* ---------- FADE-UP receivers ---------- */
.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Safety net keyframe — si el JS falla, a los 3.5s aparece igualmente */
@keyframes exaIntFadeUpFallback {
  to { opacity: 1; transform: translateY(0); }
}
.fade-up:not(.is-visible) {
  animation: exaIntFadeUpFallback 0ms linear 3500ms forwards;
}

/* ---------- SCROLL PROGRESS BAR ---------- */
.exa-int-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, #2563EB 0%, #38BDF8 100%);
  z-index: 9999;
  pointer-events: none;
  transition: width 80ms linear;
}

/* ---------- SMOOTH SCROLL ---------- */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 80px; }

/* ---------- BOTONES: micro-animations ---------- */
.btn {
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 240ms ease,
              background-color 180ms ease,
              color 180ms ease,
              border-color 180ms ease !important;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0) scale(0.98);
}

/* Glow sutil en botones primarios */
.btn--primary:hover {
  box-shadow: 0 4px 18px rgba(31, 58, 95, 0.18) !important;
}

/* ---------- LEX FAB BLINK ---------- */
@keyframes exaIntLexBlink {
  0%, 88%, 100% { transform: scaleY(1); }
  90%, 94% { transform: scaleY(0.1); }
}
.lex-fab.is-blinking svg [data-eye],
.lex-fab.is-blinking svg .eye,
.lex-fab.is-blinking svg ellipse {
  animation: exaIntLexBlink 280ms ease-in-out;
  transform-origin: center;
  transform-box: fill-box;
}

/* ---------- HOVER LIFT en cards genéricas (opt-in con .has-hover-lift) ---------- */
.has-hover-lift {
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 240ms ease !important;
}
.has-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(14, 26, 43, 0.10);
}

/* ============================================================
   D-069 · 14-may-2026 · Home theme unification para TODAS las internas
   ----------------------------------------------------------------
   Movido desde landing-visual.css (D-068) porque solo lo cargaban 54
   city landings. Ahora aplica a las 90 internas que cargan
   visual-internas.css: cream bg + .exa-trust-strip dark navy +
   .exa-plazas-banner arena + H1 serif.
   ============================================================ */

/* ---------- BG CREAM (igual que home) ---------- */
html, body {
  background: #FFFFFF !important;
}

/* ---------- TRUST STRIP DARK NAVY (4 badges) ---------- */
.exa-trust-strip {
  background: #0E1A2B;
  color: #FFFFFF;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 49;
  text-transform: none;
}
.exa-trust-strip-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.exa-trust-strip-item svg {
  width: 13px;
  height: 13px;
  fill: #FFBC7D;
  flex-shrink: 0;
}
.exa-trust-strip-item b {
  font-weight: 600;
  color: #fff;
}
@media (max-width: 720px) {
  .exa-trust-strip { gap: 10px; font-size: 9.5px; padding: 7px 10px; }
  .exa-trust-strip-item svg { width: 11px; height: 11px; }
}
@media (max-width: 480px) {
  .exa-trust-strip-item:nth-child(n+3) { display: none; }
}

/* ---------- PLAZAS BANNER ARENA con CTA WA ---------- */
.exa-plazas-banner {
  background: linear-gradient(135deg, #2563EB 0%, #1E40AF 100%);
  color: #fff;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 49;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
.exa-plazas-text { color: #fff; }
.exa-plazas-text b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: #fff;
  color: #0E1A2B;
  border-radius: 999px;
  font-weight: 600;
  margin-left: 4px;
}
.exa-plazas-cta {
  background: #fff !important;
  color: #0E1A2B !important;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 11.5px;
  text-decoration: none !important;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.exa-plazas-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
.exa-plazas-secondary {
  color: #fff !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-size: 11px;
}
.exa-plazas-secondary:hover { color: #BAE6FD !important; }
.exa-plazas-close {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 8px;
  margin-left: auto;
  opacity: 0.7;
  transition: opacity 160ms ease;
}
.exa-plazas-close:hover { opacity: 1; }
@media (max-width: 720px) {
  .exa-plazas-banner { font-size: 10.5px; padding: 7px 12px; gap: 8px; }
  .exa-plazas-secondary { display: none; }
}
@media (max-width: 480px) {
  .exa-plazas-cta { padding: 5px 12px; font-size: 10.5px; }
  .exa-plazas-text { font-size: 10px; }
}

/* ---------- H1 SERIF (igual que home) ---------- */
/* Selector amplio para cubrir city landings (.page-hero h1), service
   pillars (#hero-title), nosotros, contacto, legal y aviso pages */
main h1#hero-title,
.page-hero h1,
.stage h1,
main > section:first-of-type h1 {
  font-family: "Newsreader", Georgia, "Times New Roman", serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.012em !important;
  color: #0E1A2B !important;
}
main h1#hero-title em,
.page-hero h1 em,
.stage h1 em {
  font-family: "Newsreader", Georgia, serif !important;
  font-style: italic !important;
  color: #12035F !important;
}

/* ---------- STAGE: bg semitransparente sobre cream body ---------- */
.stage {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.30)) !important;
}

/* ---------- BAR (header) tonos cream-coherentes ---------- */
.bar {
  background: color-mix(in oklab, #FFFFFF 75%, transparent) !important;
}

/* ---------- BAND backgrounds más cream ---------- */
section.band {
  background-color: transparent;
}
section.band.aeo-band {
  background: linear-gradient(180deg, rgba(247, 242, 229, 0.4) 0%, transparent 100%) !important;
}

/* ---------- CONTACT BLOCK adaptado a cream ---------- */
.contact-block {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(247, 242, 229, 0.85) 100%) !important;
}

/* ============================================================
   FIN D-069
   ============================================================ */

/* ---------- REDUCED MOTION: apagar TODO ---------- */
@media (prefers-reduced-motion: reduce) {
  .fade-up,
  .fade-up.is-visible {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .exa-int-progress { display: none !important; }
  .btn { transition: none !important; }
  .btn:hover, .btn:active { transform: none !important; }
  .lex-fab.is-blinking svg [data-eye],
  .lex-fab.is-blinking svg .eye,
  .lex-fab.is-blinking svg ellipse { animation: none !important; }
  .has-hover-lift { transition: none !important; }
  .has-hover-lift:hover { transform: none !important; box-shadow: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   HERO CINEMÁTICO · D-076 · 17-may-2026
   ----------------------------------------------------------------
   Cliente: "la web es super plana". Sustituye el hero "imagen
   flotada 38%" de D-065 por una FOTO FULL-BLEED de fondo con
   DUOTONO AZUL "Corporativo sobrio" (navy #1E3A8A → azul cielo
   #0EA5E9) y texto blanco encima, estilo editorial/cinematográfico.

   Cero cambios de SEO ni de JSON-LD. Reusa el markup ya existente:
     · <div class="page-hero__visual"> con <picture>/<img> dentro
     · <div class="page-hero__badge"> opcional (rating)
   El duotono se logra con la foto en escala de grises + una capa
   `mix-blend-mode: multiply` con gradiente de marca: cualquier foto
   stock queda homogénea y on-brand.

   Aplica a TODA página con `.page-hero` que contenga `.page-hero__visual`.
   `prefers-reduced-motion` desactiva Ken Burns y la entrada animada.
   ============================================================ */

/* TODO el bloque se restringe a `.page-hero:has(.page-hero__visual)`
   para que SOLO los heroes con foto reciban el tratamiento. Los
   heroes sin foto (legales, gracias-pago…) conservan su aspecto. */

.page-hero:has(.page-hero__visual) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
/* Los items del hero no se estiran al ancho del flex container */
.page-hero:has(.page-hero__visual) > .crumbs,
.page-hero:has(.page-hero__visual) > .eyebrow,
.page-hero:has(.page-hero__visual) > h1,
.page-hero:has(.page-hero__visual) > p.lead,
.page-hero:has(.page-hero__visual) > .hero-ctas { max-width: 100%; }

/* — Foto: pasa a fondo absoluto del hero — */
.page-hero:has(.page-hero__visual) .page-hero__visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  float: none;
  width: auto;
  max-width: none;
  height: auto;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  aspect-ratio: auto;
  background: #1E3A8A;
}
.page-hero__visual picture {
  display: block;
  width: 100%;
  height: 100%;
}
.page-hero:has(.page-hero__visual) .page-hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  filter: grayscale(1) contrast(1.04) brightness(1.14);
  transform-origin: 62% 42%;
}
@media (prefers-reduced-motion: no-preference) {
  .page-hero:has(.page-hero__visual) .page-hero__visual img {
    animation: exaHeroKenBurns 28s ease-in-out infinite alternate;
  }
}
@keyframes exaHeroKenBurns {
  from { transform: scale(1.03); }
  to   { transform: scale(1.13); }
}

/* — Duotono azul "Corporativo sobrio": multiply de azul real #1E40AF
     → azul cielo vivo #38BDF8 sobre la foto en escala de grises.
     opacity < 1 deja respirar algo de la textura de la foto. — */
.page-hero__visual::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(142deg,
              #1E40AF 0%, #2563EB 42%, #1f93d6 74%, #38BDF8 100%);
  mix-blend-mode: multiply;
  opacity: 0.9;
  z-index: 1;
}
/* — Capa de legibilidad: más ligera y tintada de azul (no negro),
     con un brillo azul cielo arriba-derecha para dar energía. — */
.page-hero__visual::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(12,28,82,0.64) 0%, rgba(12,28,82,0.24) 46%, rgba(12,28,82,0) 82%),
    linear-gradient(0deg, rgba(12,28,82,0.42) 0%, rgba(12,28,82,0) 42%),
    radial-gradient(64% 76% at 86% 4%, rgba(86,200,255,0.42) 0%, rgba(86,200,255,0) 62%);
  pointer-events: none;
  z-index: 2;
}

/* — Contenido del hero por encima de la foto — */
.page-hero:has(.page-hero__visual) > *:not(.page-hero__visual) {
  position: relative;
  z-index: 3;
}
.page-hero:has(.page-hero__visual) .crumbs,
.page-hero:has(.page-hero__visual) .crumbs a { color: rgba(255,255,255,0.66) !important; }
.page-hero:has(.page-hero__visual) .crumbs a:hover { color: #fff !important; }

.page-hero:has(.page-hero__visual) .eyebrow {
  color: #fff !important;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.26);
  padding: 7px 15px 7px 12px;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.page-hero:has(.page-hero__visual) .eyebrow .pip {
  background: #0EA5E9 !important;
  box-shadow: 0 0 0 3px rgba(14,165,233,0.26) !important;
}

/* Specificity alta a propósito: la regla D-068 "theme unification"
   fuerza `main h1#hero-title { color: navy !important }`. Estos
   selectores la superan para que el h1 del hero sea blanco. */
.page-hero:has(.page-hero__visual) h1,
main .page-hero:has(.page-hero__visual) h1#hero-title {
  color: #fff !important;
  text-shadow: 0 2px 34px rgba(7,5,40,0.5);
}
.page-hero:has(.page-hero__visual) h1 em,
main .page-hero:has(.page-hero__visual) h1#hero-title em { color: #38BDF8 !important; }
.page-hero:has(.page-hero__visual) p.lead { color: rgba(255,255,255,0.90) !important; }
.page-hero:has(.page-hero__visual) p.lead strong { color: #fff !important; }

/* — Botón ghost legible sobre la foto oscura — */
.page-hero:has(.page-hero__visual) .btn--ghost {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
  color: #fff !important;
}
.page-hero:has(.page-hero__visual) .btn--ghost:hover {
  background: #fff !important;
  color: var(--exa-secondary, #12035F) !important;
  border-color: #fff !important;
}

/* — Badge rating: esquina inferior derecha — */
.page-hero:has(.page-hero__visual) .page-hero__badge {
  position: absolute;
  left: auto;
  right: 7vw;
  bottom: 30px;
  z-index: 3;
  text-align: right;
  color: #fff;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(7,5,40,0.6);
}
.page-hero__badge b {
  display: block;
  font-family: "Montserrat", -apple-system, sans-serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.005em;
  text-transform: none;
  margin-bottom: 3px;
}
.page-hero__badge .star { color: #FFBC7D; letter-spacing: 0; }

/* — Entrada animada del contenido — */
@media (prefers-reduced-motion: no-preference) {
  .page-hero:has(.page-hero__visual) .crumbs,
  .page-hero:has(.page-hero__visual) .eyebrow,
  .page-hero:has(.page-hero__visual) h1,
  .page-hero:has(.page-hero__visual) p.lead,
  .page-hero:has(.page-hero__visual) .hero-ctas {
    animation: exaHeroRise 760ms cubic-bezier(0.22,1,0.36,1) both;
  }
  .page-hero:has(.page-hero__visual) .eyebrow   { animation-delay: 70ms; }
  .page-hero:has(.page-hero__visual) h1         { animation-delay: 140ms; }
  .page-hero:has(.page-hero__visual) p.lead     { animation-delay: 210ms; }
  .page-hero:has(.page-hero__visual) .hero-ctas { animation-delay: 280ms; }
}
@keyframes exaHeroRise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* — Marcas de esquina inferiores: visibles sobre la foto — */
.stage:has(.page-hero__visual) .corner.bl,
.stage:has(.page-hero__visual) .corner.br { border-color: rgba(255,255,255,0.55) !important; opacity: 0.65 !important; }

/* — Mobile — */
@media (max-width: 820px) {
  .page-hero:has(.page-hero__visual) {
    min-height: 0;
    padding: 66px 26px 58px;
  }
  .page-hero:has(.page-hero__visual) .page-hero__visual img { object-position: 50% 32%; }
  .page-hero:has(.page-hero__visual) .page-hero__badge { right: 26px; bottom: 24px; }
}
@media (max-width: 480px) {
  .page-hero:has(.page-hero__visual) { padding: 52px 22px 44px; }
  .page-hero:has(.page-hero__visual) .page-hero__badge { right: 22px; bottom: 20px; }
  .page-hero__badge b { font-size: 15px; }
}

/* ============================================================
   HERO BLOG POST · D-078 · 17-may-2026
   ------------------------------------------------------------
   Los 30 posts de /blog/<slug>/ usan `.post-hero` (no `.page-hero`)
   y quedaron fuera del recolor D-076: su hero seguía en blanco con
   titulares teal #538794, rompiendo la coherencia con /blog/ y el
   resto del sitio (navy cinemático). Aquí reciben el hero navy
   duotono coherente, sin necesidad de foto ni de tocar los 30 HTML.
   Todo scoped a `.post-hero` / `body:has(.post-hero)` → exclusivo
   de blog posts; cero impacto en otras internas.
   ============================================================ */

/* Recolor de tokens en toda la página de post — igual que restyle-v2
   en las city landings: --exa-primary / --exa-teal pasan a navy.
   --link y --exa-primary-2 se redefinen explícitamente porque en el
   `:root` inline valen `var(--exa-teal)` / `var(--exa-primary)` y esa
   indirección se resuelve contra el `:root`, no contra `body`. */
body:has(.post-hero) {
  --exa-primary:   #1F3A5F;
  --exa-teal:      #1F3A5F;
  --exa-primary-2: #1F3A5F;
  --link:          #1F3A5F;
}

/* Hero navy full-bleed con duotono navy → cielo */
.post-hero {
  position: relative;
  max-width: none !important;
  margin: 0 !important;
  padding: 104px 24px 64px !important;
  background: linear-gradient(135deg, #12035F 0%, #1E3A8A 54%, #0EA5E9 100%);
  overflow: hidden;
}
/* brillo radial suave para dar profundidad (la web "no plana") */
.post-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 92% at 84% 4%, rgba(56,189,248,0.34), transparent 60%);
  z-index: -1;
  pointer-events: none;
}
/* contenido limitado a ancho de lectura, columna centrada */
.post-hero > * {
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.post-hero h1 {
  font-family: "Newsreader", Georgia, "Times New Roman", serif !important;
  color: #FFFFFF !important;
}
.post-hero h1 em {
  font-family: "Newsreader", Georgia, serif !important;
  color: #38BDF8 !important;
}
.post-hero .crumbs,
.post-hero .crumbs a,
.post-hero .meta-line { color: rgba(255,255,255,0.66) !important; }
.post-hero .crumbs a:hover { color: #FFFFFF !important; }
.post-hero p.lead { color: rgba(255,255,255,0.92) !important; }
.post-hero .author {
  color: rgba(255,255,255,0.74) !important;
  border-top-color: rgba(255,255,255,0.22) !important;
}
.post-hero .author b { color: #FFFFFF !important; }
.post-hero .author a { color: #38BDF8 !important; }

@media (max-width: 720px) {
  .post-hero { padding: 72px 22px 44px !important; }
}