/* ══════════════════════════════════════════════════════════════════════
   TEMA "INSTITUCIONAL" — CIFP moderno
   Azul corporativo, degradados suaves, tarjetas limpias, aire premium.
   ══════════════════════════════════════════════════════════════════════ */

.tema-institucional {
  --lp-acento-2: color-mix(in srgb, var(--lp-acento) 62%, #0ea5e9);
  --lp-radio: 20px;
  --lp-radio-boton: 12px;
  /* Sombras suaves y de bajo contraste — "official file", no campaña. */
  --lp-sombra: 0 12px 30px -10px rgba(9, 22, 52, 0.08);
  --lp-sombra-hover: 0 22px 48px -12px rgba(9, 22, 52, 0.16);
  --lp-footer-fondo: #091634;
  --lp-fuente-titulos: 'Plus Jakarta Sans', var(--lp-fuente);
}

/* Tinte azul claro de secciones alternas — solo modo claro */
html:not([data-theme="dark"]) .tema-institucional {
  --lp-fondo-alt: #f5f8fd;
}

.tema-institucional h1,
.tema-institucional .lp-sec-cabecera h2 {
  font-weight: 800;
  letter-spacing: -0.015em;
}

/* Widen container layout for a premium institutional spacious feel */
.tema-institucional .lp-contenedor {
  max-width: 1280px;
}

/* Cabeceras de sección con subrayado degradado */
.tema-institucional .lp-sec-cabecera h2 { position: relative; padding-bottom: 18px; }
.tema-institucional .lp-sec-cabecera h2::after {
  content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 64px; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--lp-acento), var(--lp-acento-2));
}

/* Hero split: soft gradient mesh spotlight in corners instead of cheap repeating dot grids */
.tema-institucional .lp-hero-split::before { display: none; }
.tema-institucional .lp-hero-split {
  background-image:
    radial-gradient(at 0% 0%, color-mix(in srgb, var(--lp-acento) 18%, transparent) 0px, transparent 50%),
    radial-gradient(at 100% 100%, color-mix(in srgb, var(--lp-acento-2) 12%, transparent) 0px, transparent 50%),
    linear-gradient(135deg, var(--lp-fondo-alt) 0%, var(--lp-fondo) 100%);
  border-bottom: 1px solid var(--lp-borde);
  position: relative;
  overflow: hidden;
}

.tema-institucional .lp-hero-split .lp-hero-inner {
  align-items: center;
}

@media (min-width: 1101px) {
  .tema-institucional .lp-hero-split .lp-hero-inner {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 64px;
  }
}

/* Tarjetas: Refined bordered layout with top brand accent line */
.tema-institucional .lp-tarjeta, .tema-institucional .lp-contacto-grid {
  border: 1px solid var(--lp-borde);
  border-top: 4px solid var(--lp-acento);
  background: var(--lp-fondo);
  border-radius: var(--lp-radio);
  box-shadow: var(--lp-sombra);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}
.tema-institucional .lp-tarjeta:hover {
  transform: translateY(-4px);
  box-shadow: var(--lp-sombra-hover);
  border-color: color-mix(in srgb, var(--lp-acento) 30%, transparent);
}

/* Botones: Relleno plano (sin degradados de campaña) */
.tema-institucional .lp-boton-primario::before { display: none; }
.tema-institucional .lp-boton-primario {
  background: var(--lp-acento);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--lp-acento) 20%, transparent),
              0 8px 20px color-mix(in srgb, var(--lp-acento) 18%, transparent);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.tema-institucional .lp-boton-primario:hover {
  background: color-mix(in srgb, var(--lp-acento) 88%, black 12%);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px color-mix(in srgb, var(--lp-acento) 22%, transparent),
              0 14px 28px color-mix(in srgb, var(--lp-acento) 24%, transparent);
}

/* Cifras sobre azul institucional profundo */
.tema-institucional .lp-cifras:not(.lp-variante-foto) {
  background: radial-gradient(900px 400px at 80% 120%,
              color-mix(in srgb, var(--lp-acento) 55%, #091634), #091634);
}
.tema-institucional h1, .tema-institucional h2, .tema-institucional h3 {
  font-weight: 800;
}
