/*
 * ╔══════════════════════════════════════════════════════════════╗
 * ║  NOTARÍA 67 — Paleta Azul Institucional v2                  ║
 * ║  paleta-azul.css  — Override completo sobre estilos.css     ║
 * ║  Incluir DESPUÉS de estilos.css en header.php               ║
 * ║                                                             ║
 * ║  PALETA:                                                    ║
 * ║  #2a475e  Azul institucional principal                      ║
 * ║  #7abc59  Verde solo para detalles precisos                 ║
 * ║  #fff / #faf8f5  Blanco                                     ║
 * ║                                                             ║
 * ║  TEMA OSCURO: fondo total #2a475e — cero verde visible      ║
 * ╚══════════════════════════════════════════════════════════════╝
 */

/* ══════════════════════════════════════════════
   VARIABLES — NUEVA PALETA AZUL
══════════════════════════════════════════════ */
:root {
  --brand-cream:  #cebea4;
  --brand-green:  #2a475e;
  --brand-vivid:  #2a6186;
  --brand-lime:   #7abc59;
  --brand-black:  #111d24;

  --green-900:  #07101a;
  --green-800:  #111d24;
  --green-700:  #1a2e3d;
  --green-600:  #2a475e;
  --green-500:  #3a5f7a;
  --green-400:  #4a7896;
  --green-300:  #7abc59;
  --green-200:  #a0d485;
  --green-100:  #d0eebc;
  --green-50:   #eef7e8;

  --vivid-700:  #1d4a67;
  --vivid-600:  #235772;
  --vivid-500:  #2a6186;
  --vivid-400:  #3a7fa8;
  --vivid-300:  #5097c0;

  --cream-900:  #8a7b6a;
  --cream-700:  #a89888;
  --cream-500:  #cebea4;
  --cream-300:  #e2d9cc;
  --cream-100:  #f5f1ec;
  --cream-50:   #faf8f5;

  --dark-900:   #07101a;
  --dark-800:   #111d24;
  --dark-700:   #1a2e3d;
  --dark-600:   #1e3548;
  --dark-500:   #263f52;
  --dark-400:   #3a5f7a;
  --dark-300:   #5a7e96;

  --color-bg:           #faf8f5;
  --color-bg-alt:       #f0ebe4;
  --color-surface:      #ffffff;
  --color-surface-2:    #f5f1ec;
  --color-border:       #ddd4c6;
  --color-border-light: #ede8e0;

  --color-text:         #111d24;
  --color-text-muted:   #3a4a55;
  --color-text-light:   #5a7e96;

  --color-primary:      #111d24;
  --color-accent:       #2a475e;
  --color-accent-hover: #1e3548;
  --color-vivid:        #2a6186;
  --color-lime:         #7abc59;
  --color-cream:        #cebea4;

  --color-success:  #1d7a4a;
  --color-error:    #c0392b;
  --color-warning:  #d68910;
  --color-info:     #2a6186;

  --nav-bg:     #111d24;
  --nav-text:   #faf8f5;
  --nav-border: rgba(42, 71, 94, 0.3);

  --navy-900: var(--dark-900);
  --navy-800: var(--dark-800);
  --navy-700: var(--dark-700);
  --navy-600: var(--dark-600);
  --navy-500: var(--dark-500);
  --gold-500: var(--brand-lime);
  --gold-400: var(--green-200);
  --gold-300: var(--green-100);
  --gold-100: var(--green-50);
  --color-accent-light: var(--green-50);

  --shadow-xs:    0 1px 3px rgba(17, 29, 36, 0.07);
  --shadow-sm:    0 2px 8px rgba(17, 29, 36, 0.09);
  --shadow-md:    0 4px 16px rgba(17, 29, 36, 0.11);
  --shadow-lg:    0 8px 32px rgba(17, 29, 36, 0.14);
  --shadow-xl:    0 16px 48px rgba(17, 29, 36, 0.18);
  --shadow-green: 0 8px 24px rgba(42, 71, 94, 0.35);

  --hero-bg: #1e3548;
}


/* ══════════════════════════════════════════════
   NAVBAR BRAND MARK — igual al footer
   Azul #2a475e con texto blanco
══════════════════════════════════════════════ */
.brand-mark,
.brand-seal {
  background: var(--brand-green, #2a475e) !important;
  border: 1px solid rgba(122, 188, 89, 0.2) !important;
}
.brand-mark span {
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', 'Source Serif 4', serif !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
}

/* ══════════════════════════════════════════════
   TEMA OSCURO — AZUL INSTITUCIONAL PURO
   Fondo completo en azul, cero verde
══════════════════════════════════════════════ */
[data-theme="dark"] {
  --color-bg:           #1a2e3d;
  --color-bg-alt:       #1e3548;
  --color-surface:      #213a4d;
  --color-surface-2:    #263f52;
  --color-border:       #2a4d65;
  --color-border-light: #1e3a4e;
  --color-text:         #e4ecf0;
  --color-text-muted:   #8aabbd;
  --color-text-light:   #4a7896;
  --nav-bg:             #0d1820;
  --nav-border:         rgba(255, 255, 255, 0.08);
}

/* ══════════════════════════════════════════════
   TIPOGRAFÍA HERO — MODERNA
   Plus Jakarta Sans 800 + Fraunces italic light
══════════════════════════════════════════════ */
.hero-title {
  font-family: "Plus Jakarta Sans", "Source Sans 3", sans-serif !important;
  font-size: clamp(2.4rem, 5vw, 4.4rem) !important;
  font-weight: 800 !important;
  line-height: 1.04 !important;
  letter-spacing: -0.035em !important;
  color: #ffffff !important;
}

.hero-title em {
  font-family: "Fraunces", "Source Serif 4", serif !important;
  font-style: italic !important;
  font-weight: 300 !important;
  color: var(--brand-cream) !important;
  letter-spacing: -0.01em !important;
}

.hero-tag {
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  background: rgba(42, 71, 94, 0.32) !important;
  border: 1px solid rgba(122, 188, 89, 0.28) !important;
  color: #7abc59 !important;
}

.hero-sub {
  font-family: "Plus Jakarta Sans", "Source Sans 3", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  color: rgba(206, 190, 164, 0.82) !important;
  line-height: 1.7 !important;
}

/* ══════════════════════════════════════════════
   HERO — GRADIENTE MÁS CLARO, AZUL VISIBLE
══════════════════════════════════════════════ */
.hero-video-placeholder {
  background: linear-gradient(
    145deg,
    #1a2e3d 0%,
    #2a475e 35%,
    #3a5f7a 60%,
    #2a475e 80%,
    #1e3548 100%
  ) !important;
}

.hero-overlay {
  background:
    linear-gradient(
      to top,
      rgba(13, 24, 32, 0.92) 0%,
      rgba(26, 46, 61, 0.45) 45%,
      rgba(26, 46, 61, 0.12) 100%
    ),
    linear-gradient(
      to right,
      rgba(13, 24, 32, 0.6) 0%,
      transparent 55%
    ) !important;
}

.hero-glow {
  background: radial-gradient(
    ellipse 65% 60% at 68% 38%,
    rgba(42, 97, 134, 0.18) 0%,
    transparent 65%
  ) !important;
}

/* ══════════════════════════════════════════════
   HERO ACTION CARDS — TEXTURA DE MADERA 3D
   Las 4 cards de acción rápida del hero:
   Iniciar Trámite · Agendar Cita
   Calcular Costos · Consultar Estado
══════════════════════════════════════════════ */
.hero-actions-panel {
  gap: 0.7rem !important;
}

.hero-action-card {
  background-image:
    repeating-linear-gradient(
      88deg,
      transparent 0px,
      transparent 5px,
      rgba(0, 0, 0, 0.018) 5px,
      rgba(0, 0, 0, 0.018) 6px
    ),
    repeating-linear-gradient(
      175deg,
      transparent 0px,
      transparent 14px,
      rgba(255, 255, 255, 0.015) 14px,
      rgba(255, 255, 255, 0.015) 15px
    ),
    radial-gradient(
      ellipse 70% 40% at 30% 70%,
      rgba(150, 90, 10, 0.06) 0%,
      transparent 50%
    ),
    linear-gradient(
      168deg,
      #e8c06a 0%,
      #c8882a 14%,
      #b87818 38%,
      #ad7012 55%,
      #b87818 70%,
      #c8882a 84%,
      #e0ba65 100%
    ) !important;
  background-color: transparent !important;

  border: none !important;
  border-radius: 16px !important;

  box-shadow:
    0 6px 0 0 #7a4808,
    0 10px 28px rgba(0, 0, 0, 0.5),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.42),
    inset 0 -2px 0 rgba(0, 0, 0, 0.14),
    inset 2.5px 0 0 rgba(255, 255, 255, 0.12),
    inset -2px 0 0 rgba(0, 0, 0, 0.08) !important;

  transform: translateY(0) !important;
  transition: transform 0.14s ease, box-shadow 0.14s ease !important;
}

.hero-action-card:hover {
  background-image:
    repeating-linear-gradient(
      88deg,
      transparent 0px,
      transparent 5px,
      rgba(0, 0, 0, 0.018) 5px,
      rgba(0, 0, 0, 0.018) 6px
    ),
    repeating-linear-gradient(
      175deg,
      transparent 0px,
      transparent 14px,
      rgba(255, 255, 255, 0.015) 14px,
      rgba(255, 255, 255, 0.015) 15px
    ),
    radial-gradient(
      ellipse 70% 40% at 30% 70%,
      rgba(150, 90, 10, 0.06) 0%,
      transparent 50%
    ),
    linear-gradient(
      168deg,
      #f0cc7a 0%,
      #d4943a 14%,
      #c48428 38%,
      #ba7c22 55%,
      #c48428 70%,
      #d4943a 84%,
      #eac870 100%
    ) !important;
  border-color: transparent !important;
  transform: translateY(-4px) !important;
  box-shadow:
    0 10px 0 0 #7a4808,
    0 16px 36px rgba(0, 0, 0, 0.58),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.42),
    inset 0 -2px 0 rgba(0, 0, 0, 0.14),
    inset 2.5px 0 0 rgba(255, 255, 255, 0.12),
    inset -2px 0 0 rgba(0, 0, 0, 0.08) !important;
  color: #2e1200 !important;
}

.hero-action-card:active {
  transform: translateY(5px) !important;
  box-shadow:
    0 1px 0 0 #7a4808,
    0 4px 12px rgba(0, 0, 0, 0.38),
    inset 0 2px 5px rgba(0, 0, 0, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08) !important;
}

/* Ícono — círculo oscuro en relieve sobre madera */
.hero-action-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: #5a3608 !important;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.15) !important;
  color: #e8c87a !important;
  font-size: 1.15rem !important;
}

/* Textos sobre la madera */
.hero-action-label {
  font-family: "Plus Jakarta Sans", "Source Sans 3", sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  color: #2e1200 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  letter-spacing: -0.01em !important;
}

.hero-action-desc {
  font-family: "Plus Jakarta Sans", "Source Sans 3", sans-serif !important;
  font-size: 0.68rem !important;
  color: rgba(80, 40, 0, 0.72) !important;
  line-height: 1.4 !important;
}

.hero-action-arrow {
  font-family: "Plus Jakarta Sans", "Source Sans 3", sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  color: #6b3400 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: auto !important;
  letter-spacing: 0.02em !important;
}

/* ══════════════════════════════════════════════
   STATS BAR
══════════════════════════════════════════════ */
.hero-stat-num {
  color: #7abc59 !important;
}

/* ══════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════ */
.navbar.scrolled {
  border-bottom-color: rgba(42, 71, 94, 0.25) !important;
}
.nav-links a.active {
  color: var(--brand-lime) !important;
  background: rgba(122, 188, 89, 0.1) !important;
}
.mobile-nav-links a.active {
  color: var(--brand-lime) !important;
}
.mobile-nav-links a i {
  color: var(--brand-lime) !important;
}

/* ══════════════════════════════════════════════
   BOTONES — Paleta azul
══════════════════════════════════════════════ */
.btn-primary {
  background: var(--brand-green) !important;
  border-color: var(--brand-green) !important;
}
.btn-primary:hover {
  background: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
  box-shadow: 0 8px 24px rgba(42, 71, 94, 0.38) !important;
}

.btn-secondary {
  background: var(--brand-vivid) !important;
  border-color: var(--brand-vivid) !important;
  color: #fff !important;
}
.btn-secondary:hover {
  background: var(--vivid-700) !important;
  border-color: var(--vivid-700) !important;
  box-shadow: 0 8px 24px rgba(42, 97, 134, 0.38) !important;
}

.btn-nav-cta,
.btn-nav-schedule {
  background: var(--brand-green) !important;
  color: #fff !important;
}
.btn-nav-cta:hover,
.btn-nav-schedule:hover {
  background: var(--color-accent-hover) !important;
  color: #fff !important;
}

/* ══════════════════════════════════════════════
   SERVICIOS
══════════════════════════════════════════════ */
.service-card-img {
  background: linear-gradient(140deg, #111d24 0%, #1a2e3d 50%, #2a475e 100%) !important;
}
[data-theme="dark"] .service-card-icon {
  background: rgba(42, 97, 134, 0.18) !important;
  color: var(--brand-lime) !important;
}
.service-card:hover { border-color: var(--brand-lime) !important; }

/* ══════════════════════════════════════════════
   NOTARIO
══════════════════════════════════════════════ */
.notary-badge {
  background: rgba(7, 16, 26, 0.92) !important;
  border-color: rgba(122, 188, 89, 0.22) !important;
}
.notary-photo-card {
  background: linear-gradient(160deg, #111d24 0%, #1a2e3d 55%, #2a475e 100%) !important;
}

/* ══════════════════════════════════════════════
   PASOS
══════════════════════════════════════════════ */
.steps-grid::before {
  background: linear-gradient(to right, var(--brand-lime), var(--brand-vivid)) !important;
}
[data-theme="dark"] .step-num {
  background: var(--dark-800) !important;
  color: var(--brand-lime) !important;
  border-color: var(--brand-lime) !important;
}

/* ══════════════════════════════════════════════
   ARTÍCULOS
══════════════════════════════════════════════ */
.article-img,
.article-image {
  background: linear-gradient(135deg, #111d24 0%, #2a475e 100%) !important;
}

/* ══════════════════════════════════════════════
   CTA SECTION
══════════════════════════════════════════════ */
.cta-section {
  background: linear-gradient(135deg, #111d24 0%, #1a2e3d 50%, #2a475e 100%) !important;
}
.cta-section::before {
  background: radial-gradient(
    ellipse 80% 80% at 80% 50%,
    rgba(42, 97, 134, 0.1) 0%,
    transparent 60%
  ) !important;
}

/* ══════════════════════════════════════════════
   FORMULARIOS
══════════════════════════════════════════════ */
.input-n67:focus {
  border-color: var(--brand-green) !important;
  box-shadow: 0 0 0 3px rgba(42, 71, 94, 0.16) !important;
}

/* ══════════════════════════════════════════════
   HERO PÁGINAS INTERNAS
══════════════════════════════════════════════ */
.page-hero {
  background: #1a2e3d !important;
}
.page-hero::before {
  background: radial-gradient(
    ellipse 70% 80% at 60% 50%,
    rgba(42, 97, 134, 0.1),
    transparent
  ) !important;
}


/* ══════════════════════════════════════════════
   NAVBAR BRAND MARK — igual al footer
   Azul #2a475e con texto blanco
══════════════════════════════════════════════ */
.brand-mark,
.brand-seal {
  background: var(--brand-green, #2a475e) !important;
  border: 1px solid rgba(122, 188, 89, 0.2) !important;
}
.brand-mark span {
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', 'Source Serif 4', serif !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
}

/* ══════════════════════════════════════════════
   TEMA OSCURO — Superficies azul institucional
══════════════════════════════════════════════ */
[data-theme="dark"] .hero-video-placeholder {
  background: linear-gradient(
    145deg,
    #1a2e3d 0%,
    #2a475e 35%,
    #3a5f7a 58%,
    #2a475e 78%,
    #1e3548 100%
  ) !important;
}
[data-theme="dark"] footer           { background: #07101a !important; }
[data-theme="dark"] .mobile-menu     { background: #111d24 !important; }
[data-theme="dark"] .notary-section  { background: #1e3548 !important; }
[data-theme="dark"] .steps-section   { background: #1e3548 !important; }
[data-theme="dark"] .service-card    { background: #213a4d !important; border-color: #2a4d65 !important; }
[data-theme="dark"] .article-card    { background: #213a4d !important; border-color: #2a4d65 !important; }
[data-theme="dark"] .mission-card-secondary { background: #213a4d !important; border-color: #2a4d65 !important; }
[data-theme="dark"] #page-loader     { background: #111d24 !important; }

/* ══════════════════════════════════════════════
   TRUST BAR
══════════════════════════════════════════════ */
.trust-bar { background: #1a2e3d !important; }
.trust-sep { color: #2a475e !important; }

/* ══════════════════════════════════════════════
   SCROLLBAR & SELECTION
══════════════════════════════════════════════ */
::-webkit-scrollbar-thumb { background: #2a475e !important; }
::selection { background: var(--brand-lime) !important; color: var(--brand-black) !important; }
[data-theme="dark"] blockquote { background: rgba(42, 71, 94, 0.16) !important; color: var(--green-200) !important; }

/* ══════════════════════════════════════════════════
   FOOTER — Azul institucional · Contraste mejorado
   Fondo: #111d24 en lugar del negro profundo #07101a
   Todos los textos con mayor opacidad y legibilidad
══════════════════════════════════════════════════ */

footer {
  background: #111d24 !important;
  border-top: 1px solid rgba(42, 71, 94, 0.4) !important;
}

/* Grid separator line */
.footer-grid {
  border-bottom-color: rgba(42, 71, 94, 0.35) !important;
}

/* Brand mark: lima → azul */
.footer-mark {
  background: var(--brand-green, #2a475e) !important;
  border: 1px solid rgba(122, 188, 89, 0.3);
}
.footer-mark span {
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', 'Source Serif 4', serif;
  font-weight: 800;
}

/* Brand name más legible */
.footer-brand-name {
  font-family: 'Plus Jakarta Sans', 'Source Serif 4', serif !important;
  font-size: 1.1rem !important;
  color: #e4ecf0 !important;
}
.footer-brand-sub {
  color: rgba(228, 236, 240, 0.55) !important; /* ANTES .32 */
}

/* Descripción más legible */
.footer-desc {
  color: rgba(228, 236, 240, 0.72) !important; /* ANTES .52 */
  line-height: 1.7;
}

/* Íconos de contacto: verde brillante → lima (acento) */
.footer-ci i {
  color: var(--brand-lime, #7abc59) !important;
}

/* Texto de contacto más legible */
.footer-ci a,
.footer-ci span {
  color: rgba(228, 236, 240, 0.78) !important; /* ANTES .6 */
}
.footer-ci a:hover {
  color: #fff !important;
}

/* Social buttons — más visibles */
.footer-social-btn {
  color: rgba(228, 236, 240, 0.72) !important; /* ANTES .55 */
  border-color: rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
.footer-social-btn:hover {
  background: var(--brand-green, #2a475e) !important;
  color: #7abc59 !important;
  border-color: var(--brand-green, #2a475e) !important;
}

/* Títulos de columnas — crema más brillante */
.footer-col-title {
  color: #e4ecf0 !important; /* ANTES var(--brand-cream) con poca viveza */
  letter-spacing: 0.14em;
  font-size: 0.65rem;
}

/* Links de columnas más legibles */
.footer-links a {
  color: rgba(228, 236, 240, 0.65) !important; /* ANTES .48 */
}
.footer-links a:hover {
  color: #e4ecf0 !important;
}

/* Link de acento "Ver todos →" */
.footer-link-accent {
  color: var(--brand-lime, #7abc59) !important;
}
.footer-link-accent:hover {
  color: #a0d485 !important;
}

/* Bottom bar */
.footer-bottom {
  border-top: 1px solid rgba(42, 71, 94, 0.3);
}

.footer-copy {
  color: rgba(228, 236, 240, 0.52) !important; /* ANTES .3 */
}
.footer-dev {
  color: rgba(228, 236, 240, 0.52) !important; /* ANTES .3 */
}
.footer-dev i {
  color: var(--brand-lime, #7abc59) !important;
}
.footer-dev a {
  color: var(--brand-lime, #7abc59) !important;
}
.footer-dev a:hover {
  color: #a0d485 !important;
}
.footer-legal-links a {
  color: rgba(228, 236, 240, 0.50) !important; /* ANTES .3 */
}
.footer-legal-links a:hover {
  color: #e4ecf0 !important;
}

/* Tema oscuro — footer aún más claro para compensar */
[data-theme="dark"] footer {
  background: #0d1820 !important;
  border-top-color: rgba(42, 71, 94, 0.5) !important;
}
[data-theme="dark"] .footer-grid {
  border-bottom-color: rgba(42, 71, 94, 0.4) !important;
}

/* ══════════════════════════════════════════════════
   LOADER DE PÁGINA — Paleta azul institucional
   Reemplaza el fondo verde de estilos.css
══════════════════════════════════════════════════ */

/* Fondo: azul-negro institucional */
#page-loader {
  background: #111d24 !important;
}

/* Logo texto N67 — Plus Jakarta Sans */
.loader-logo {
  font-family: 'Plus Jakarta Sans', 'Source Serif 4', serif !important;
  font-size: 3.5rem !important;
  font-weight: 800 !important;
  color: #e4ecf0 !important;
  letter-spacing: -.035em !important;
}

/* El "67" — azul más claro como acento */
.loader-logo span {
  color: var(--brand-lime, #7abc59) !important;
}

/* Subtítulo — más legible */
.loader-sub {
  color: rgba(228, 236, 240, 0.52) !important;
}

/* Barra de progreso — azul → lima */
.loader-bar {
  width: 72px !important;
  height: 3px !important;
  background: rgba(42, 71, 94, 0.4) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
  position: relative;
}

/* Soporte del nuevo div interno */
.loader-bar-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 45%;
  background: linear-gradient(to right, #2a475e, #7abc59);
  border-radius: 3px;
  animation: loaderSlide 1s ease-in-out infinite;
}

/* Override del ::after original */
.loader-bar::after {
  background: linear-gradient(to right, #2a475e, #7abc59) !important;
}

/* Logo imagen en el loader */
.loader-logo-img {
  height: 52px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  /* Invertir si el logo es oscuro sobre fondo blanco */
  /* filter: brightness(0) invert(1); */
  opacity: .92;
}