/* ============================================================
   SISTEMA DE DISEÑO — VARIABLES GLOBALES
   ============================================================ */

:root {
  /* ===== PALETA TÉCNICA (slots abstractos, NO colores reales) ===== */
  --clr-brand: #B22626;
  --clr-brand-strong: #821C1C;
  --clr-ink: #3A3A3A;
  --clr-muted: #5B5B5B;
  --clr-surface: #F1F3F5;
  --clr-light: #FAFBFC;
  --clr-white: #FFFFFF;

  /* Overlays suaves */
  --overlay-1: linear-gradient(135deg, rgba(58, 58, 58, 0.52), rgba(130, 28, 28, 0.8));
  --overlay-navy: linear-gradient(135deg, rgba(11, 23, 38, 0.50), rgba(33, 48, 64, 0.9));
  --overlay-sapphire: linear-gradient(135deg, rgba(42, 51, 84, 0.52), rgba(17, 26, 45, 0.8));
  --overlay-teal: linear-gradient(135deg, rgba(6, 80, 92, 0.58), rgba(9, 110, 115, 0.8));

  /* Movimiento sutil de fondo */
  --hero-pan-start: 50% 50%;
  --hero-pan-end: 53% 48%;
  /* ===== PALETA SEMÁNTICA (UI real) ===== */

  /* Texto */
  --color-text: var(--clr-ink);
  --color-text-muted: var(--clr-muted);
  --color-text-light: var(--clr-white);

  /* Fondos */
  --color-bg: var(--clr-white);
  --color-bg-alt: var(--clr-light);
  --color-surface: var(--clr-surface);

  /* Footer / zonas oscuras */
  --color-footer-bg: var(--clr-ink);
  --color-footer-text: var(--clr-surface);

  /* Bordes */
  --color-border-light: rgba(0,0,0,.08);
  --color-border-dark: rgba(255,255,255,.15);


  /* ============================================================
     SISTEMA PRO DE COLOR DE MARCA (ESTILO BOOTSTRAP 5.3)
     ============================================================ */

  /* Marca */
  --color-primary: var(--clr-brand);
  --color-primary-strong: var(--clr-brand-strong);

  /* Variantes automáticas (PRO) */
  --color-primary-dark: color-mix(in srgb, var(--clr-brand) 40%, black);
  --color-primary-soft: color-mix(in srgb, var(--clr-brand) 25%, white);
  --color-primary-light: color-mix(in srgb, var(--clr-brand) 10%, white);
  --color-text-light-muted: color-mix(in srgb, var(--clr-white) 60%, transparent);


  /* ============================================================
     OVERRIDE — BOOTSTRAP PRIMARY → USA TU PALETA PRO
     ============================================================ */

  --bs-primary: var(--color-primary);
  --bs-primary-rgb: 31, 95, 139;

  /* Subtles y énfasis (Bootstrap) */
  --bs-primary-bg-subtle: var(--color-primary-light);
  --bs-primary-border-subtle: var(--color-primary-soft);
  --bs-primary-text-emphasis: var(--color-primary-dark);

  /* Links */
  --bs-link-color: var(--color-primary);
  --bs-link-hover-color: var(--color-primary-strong);

  /* Body */
  --bs-body-color: var(--color-text);
  --bs-body-bg: var(--color-bg);
  --bs-heading-color: inherit;
  --bs-border-color: var(--color-border-light);
  --bs-secondary-color: var(--color-text-muted);

  /* Botones */
  --bs-btn-border-radius: 0.375rem;
}

/* Footer = tema oscuro */
footer,
[data-bs-theme="dark"] {
  --bs-primary-text-emphasis: var(--color-primary-light);
}


/* ============================================================
   OVERRIDE DE COMPONENTES DE BOOTSTRAP
   ============================================================ */

/* Botón principal */
.btn-primary {
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary-strong);
  --bs-btn-hover-border-color: var(--color-primary-strong);
  --bs-btn-color: var(--color-text-light);
  --bs-btn-hover-color: var(--color-text-light);
}

/* Outline primary */
.btn-outline-primary {
  --bs-btn-color: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-color: var(--color-text-light);
  --bs-btn-hover-border-color: var(--color-primary);
}

/* Alert primary */
.alert-primary {
  --bs-alert-bg: var(--color-primary-light);
  --bs-alert-border-color: var(--color-primary-soft);
  --bs-alert-color: var(--color-primary-dark);
}

/* Badge primary */
.badge.bg-primary {
  background: var(--color-primary) !important;
}

/* Text emphasis */
.text-primary-emphasis {
  color: var(--color-primary-dark) !important;
}

/* Subtle backgrounds */
.bg-primary-subtle {
  background-color: var(--color-primary-light) !important;
}

.border-primary-subtle {
  border-color: var(--color-primary-soft) !important;
}


/* ============================================================
   ESTILOS GENERALES
   ============================================================ */

body {
  font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  padding-top: 4rem;
  background: var(--color-bg);
  color: var(--color-text);
}

.btn {
  --bs-btn-font-weight: 600;
  border-radius: var(--bs-btn-border-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.btn-lg {
  --bs-btn-padding-y: 0.78rem;
  --bs-btn-padding-x: 1.3rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 600;
  min-height: 48px;
}


/* ============================================================
   HERO SECTION
   ============================================================ */

.hero {
  --hero-space-top: clamp(3rem, 8vw, 6rem);
  --hero-space-bottom: clamp(3rem, 9vw, 7rem);

  padding: var(--hero-space-top) 0 var(--hero-space-bottom);
  background: var(--clr-ink);
  color: var(--color-text-light);
}

.hero-visual {
  --hero-image: none;
  --hero-overlay: var(--overlay-1);
  --hero-bg-size: 110%;
  --hero-bg-position: var(--hero-pan-start);

  position: relative;
  overflow: hidden;
  background-color: var(--clr-ink);
  background-image: var(--hero-overlay);
  background-size: var(--hero-bg-size);
  background-position: var(--hero-bg-position);
  background-repeat: no-repeat;
  color: var(--color-text-light);
}

.hero-bg-ready { background-image: var(--hero-overlay); }
.hero-bg-loaded {
  background-image: var(--hero-overlay), var(--hero-image);
  background-position: var(--hero-pan-start), var(--hero-pan-start);
  animation: hero-pan 28s ease-in-out infinite alternate;
  will-change: background-position;
}

.hero-bg-cover { --hero-bg-size: cover; --hero-bg-position: center; }
.hero-bg-zoom { --hero-bg-size: 115%; --hero-bg-position: 50% 50%; }

.hero-overlay-navy { --hero-overlay: var(--overlay-navy); }
.hero-overlay-sapphire { --hero-overlay: var(--overlay-sapphire); }
.hero-overlay-teal { --hero-overlay: var(--overlay-teal); }

.hero-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.05), transparent 38%);
  pointer-events: none;
}

.hero-visual.hero-bg-loaded::before {
  animation: hero-pan 32s ease-in-out infinite alternate;
}

.hero-visual > * { position: relative; }

.hero-title {
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-text-light);
}

.hero-highlight { color: var(--color-primary); }

.hero-lead { max-width: 720px; }
.hero-sub { max-width: 520px; }

/* ============================================================
   HERO DARK MODE SAFE PACK
   (Corrige colores y contraste dentro de secciones oscuras)
   ============================================================ */

.hero {
  /* Garantiza que el texto base sea claro */
  color: var(--color-text-light);
}

.hero * {
  /* Evita herencias raras de color de Bootstrap */
  color: inherit;
}

/* Texto atenuado especial para fondo oscuro */
.hero .text-muted,
.hero .text-secondary,
.hero small,
.hero .small {
  color: var(--color-text-light-muted) !important;
}

/* Enlaces secundarios/blancos */
.hero a {
  color: var(--color-text-light);
}

.hero a:hover {
  color: var(--color-primary-light);
}

/* Links secundarios (Bootstrap) */
.hero .link-secondary,
.hero .link-light {
  color: var(--color-text-light-muted) !important;
}

.hero .link-secondary:hover,
.hero .link-light:hover {
  color: var(--color-text-light) !important;
}

/* Bordes seguros */
.hero .border,
.hero .border-light,
.hero .border-white {
  border-color: rgba(255,255,255,0.15) !important;
}

/* Fondos claros dentro del hero (cards, badges, etc.) */
.hero .bg-white,
.hero .bg-light,
.hero .bg-body,
.hero .bg-surface {
  background-color: rgba(255,255,255,0.12) !important;
  color: var(--color-text-light) !important;
}

/* Botones outline dentro del hero */
.hero .btn-outline-primary {
  --bs-btn-color: var(--color-text-light);
  --bs-btn-border-color: rgba(255,255,255,0.5);
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-color: var(--color-text-light);
  --bs-btn-hover-border-color: var(--color-primary);
}

/* Formularios dentro del hero */
.hero .form-control,
.hero .form-select {
  background-color: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
  color: var(--color-text-light);
}

.hero .form-control:focus,
.hero .form-select:focus {
  border-color: var(--color-primary);
  background-color: rgba(255,255,255,0.12);
}

/* Placeholder claro */
.hero .form-control::placeholder,
.hero .form-select::placeholder {
  color: var(--color-text-light-muted);
}

.hero .btn {
  --bs-btn-padding-y: 0.78rem;
  --bs-btn-padding-x: 1.3rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 48px;
  color: var(--bs-btn-color) !important;
}

.hero .btn:hover,
.hero .btn:focus,
.hero .btn:active {
  color: var(--bs-btn-hover-color, var(--bs-btn-color)) !important;
}

.hero .btn-outline-light {
  --bs-btn-color: var(--color-text-light);
  --bs-btn-border-color: rgba(255,255,255,0.75);
  --bs-btn-hover-bg: var(--color-text-light);
  --bs-btn-hover-color: var(--clr-ink);
  --bs-btn-hover-border-color: var(--color-text-light);
  --bs-btn-active-bg: var(--color-text-light);
  --bs-btn-active-color: var(--clr-ink);
  --bs-btn-active-border-color: var(--color-text-light);
}

@keyframes hero-pan {
  from { background-position: var(--hero-pan-start), var(--hero-pan-start); }
  to { background-position: var(--hero-pan-end), var(--hero-pan-end); }
}


/* ============================================================
   AREAS
   ============================================================ */

.areas-band {
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border-light);
}

.areas-band-inner {
  padding: 1.2rem 0;
}

.areas-item {
  font-size: .95rem;
  line-height: 1.35rem;
  padding: 0.5rem 0;
  color: var(--color-text-muted);
}

.areas-item strong {
  font-weight: 600;
  color: var(--color-text);
}

@media (min-width: 992px) {
  .areas-band-inner { padding: 1.8rem 0; }

  .areas-item {
    padding-right: 1rem;
    border-right: 1px solid var(--color-border-light);
  }

  .areas-item:last-child {
    border-right: none;
  }
}


/* ============================================================
   NAVBAR
   ============================================================ */

.navbar-brand-logo {
  height: 48px;
  width: auto;
}

.navbar-brand-text {
  font-family: "Georgia", "Times New Roman", Times, serif;
  color: var(--color-primary-strong);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  line-height: 1.15;
}

.navbar-brand-text .brand-title {
  font-weight: 600;
  color: var(--color-primary-strong);
}

.navbar-brand-text .brand-subtitle {
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--color-primary);
}

.navbar .nav-link.activo {
  color: var(--color-primary) !important;
  font-weight: 600;
  position: relative;
}

.navbar .nav-link.activo::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -.1rem;
  height: 2px;
  background: var(--color-primary);
}


/* ============================================================
   PERFIL / SOBRE LA DRA.
   ============================================================ */

.sobre-dra img {
  max-width: 260px;
}

.profile-photo {
  width: 100%;
  max-width: 260px;
  border-radius: 999px;
  object-fit: cover;
}


/* ============================================================
   SECCIONES
   ============================================================ */

.section-title {
  font-size: 1.25rem;
  font-weight: 600;
}

.section-subtitle {
  color: var(--color-text-muted);
  font-size: .95rem;
  margin-bottom: 1.5rem;
}

.practice-card h3 {
  font-size: 1.05rem;
}


/* ============================================================
   CONTACTO
   ============================================================ */

.contact-section {
  background-color: var(--color-footer-bg);
  color: var(--color-footer-text);
}

.contact-section .form-control,
.contact-section .form-select {
  background-color: #0f2238;
  border-color: #22354b;
  color: var(--color-text-light);
}

.contact-section .form-control::placeholder {
  color: var(--color-text-muted);
}

.contact-section .form-control:focus {
  background-color: #10243f;
  border-color: var(--color-primary);
}


/* ============================================================
   FOOTER
   ============================================================ */

footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  font-size: .85rem;
}


/* ============================================================
   WHATSAPP FLOAT
   ============================================================ */

.whatsapp-float {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 999;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (min-width: 768px) {
  .hero {
    --hero-space-top: clamp(4rem, 6vw, 7rem);
    --hero-space-bottom: clamp(4rem, 7vw, 8rem);
  }

  .hero-title { font-size: 2.6rem; }
}

@media (max-width: 767.98px) {
  .hero {
    min-height: calc(100vh - 72px);
    max-height: calc(100vh - 72px);
    display: flex;
    align-items: center;
  }

  .hero .row { width: 100%; }
}