/* ==========================================================================
   CÓRDOVA & ASOCIADOS - ESTÉTICA EDITORIAL ESTILO CARAVAGGIO
   Fondo: Negro antracita muy profundo (#080a0e) con auras azul zafiro/noche
   Tipografía: Cinzel (Serif clásico de gran escala) + Montserrat/Inter
   ========================================================================== */

:root {
  --container-width: 1320px;
  --bg-deep: #07090e;
  --bg-surface: #0e121a;
  --bg-card: rgba(16, 21, 30, 0.65);
  --color-white: #FFFFFF;
  --color-silver: #cbd5e1;       /* Plata claro de alto contraste */
  --color-silver-muted: #94a3b8;
  --color-border: rgba(255, 255, 255, 0.04);
  --color-wa: #25D366;
  --font-serif: 'Cinzel', 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-sans: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ==========================================================================
   1. ESCALA RAÍZ Y BASE GLOBAL
   ========================================================================== */
html, body {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-width: 100% !important;
}

html {
  font-size: 13.5px !important; /* Reduce la escala base del sistema rem de golpe */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth !important;
}

/* ==========================================================================
   NORMALIZACIÓN Y HOMOLOGACIÓN TOTAL DE ANCLAJE Y ESPACIADO
   (Igualado exactamente al comportamiento perfecto de ÁREAS DE PRÁCTICA)
   ========================================================================== */
#estudio,
#el-estudio,
#especialistas,
#cuerpo-juridico,
#areas-practica,
#areas,
#resenas,
#resenas-opiniones,
#ubicacion,
#contacto,
.estudio-section,
.cuerpo-juridico-section,
.areas-section,
.practice-areas,
.section-wrapper,
section:not(#hero):not(.hero) {
  scroll-margin-top: 40px !important; /* Mismo offset que hace funcionar perfecto a Áreas de Práctica */
  padding-top: 50px !important;
  padding-bottom: 60px !important;
  box-sizing: border-box !important;
  min-height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
}

/* Homologa los encabezados de todas las secciones para que tengan el mismo margen superior respecto al borde */
.section-header,
.section-title,
.cuerpo-juridico-header,
#estudio .section-header,
#estudio .cuerpo-juridico-header,
#el-estudio .cuerpo-juridico-header,
#resenas .section-header,
#ubicacion .section-header,
#contacto .section-header,
section:not(#hero) .section-header,
section:not(#hero) .section-title,
section:not(#hero) h2 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Portada hero con distribución vertical equilibrada y min-height: 100vh */
#hero,
.hero,
.hero-section {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  height: 100vh !important;
  justify-content: space-between !important;
  align-items: center !important;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-deep);
  color: var(--color-white);
  font-size: 1rem !important;
  line-height: 1.55;
  zoom: 0.9; /* Compacta la escala visual completa al estándar nativo */
  position: relative;
  min-height: 100vh;
}

/* ==========================================================================
   CONTENEDOR GLOBAL CONTENIDO
   ========================================================================== */
section:not(#hero):not(.hero):not(.hero-section):not(#resenas):not(.resenas-section):not(.site-footer),
.container:not(.hero-content):not(.hero-main-block):not(.hero-bottom-bar):not(.site-header-inner):not(.navbar-container):not(.resenas-container):not(.footer-grid):not(.footer-bottom-container),
.estudio-section,
.areas-section,
.ubicacion-section,
.contacto-section {
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

#resenas,
.resenas-section {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ==========================================================================
   AURA INTERACTIVA AL MOVIMIENTO DEL CURSOR (MOUSE FOLLOWER)
   ========================================================================== */
.cursor-aura {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  overflow: hidden !important;
  background: radial-gradient(
    650px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(59, 130, 246, 0.16) 0%,
    rgba(37, 99, 235, 0.08) 35%,
    transparent 70%
  ) !important;
  transition: opacity 0.3s ease;
}

section,
main,
footer,
.site-footer {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   HALOS Y AURAS AZULES AMBIENTALES DE FONDO (DESVANECIMIENTO CONTINUO)
   Unificación en base #07090e con degradado vertical prolongado hacia el tono base
   ========================================================================== */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, transparent 50%, #07090e 100%),
    radial-gradient(ellipse 130% 70% at 50% 25%, rgba(20, 55, 110, 0.30) 0%, rgba(12, 32, 68, 0.15) 55%, transparent 80%),
    linear-gradient(180deg, rgba(16, 42, 85, 0.20) 0%, transparent 45%, #07090e 100%);
  filter: blur(85px);
}

/* Tipografía de prestigio con espaciado editorial */
.font-serif-prestige {
  font-family: var(--font-serif);
}

/* ==========================================================================
   PORTADA PRINCIPAL (HERO) - FLUIDA EN PANTALLAS GRANDES Y ULTRA-WIDE (>1400px)
   ========================================================================== */
#hero,
.hero,
.hero-section {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-top: max(88px, 11vh) !important;
  padding-bottom: max(18px, 2.5vh) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
}

/* El bloque central se ajusta de forma fluida (88vw a 92vw) */
.hero-content,
#hero .container,
.hero-main-block {
  width: 90vw !important;
  max-width: 92vw !important;
  min-width: 88vw !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  text-align: left !important;
  flex: 1 1 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 20 !important;
}

/* La barra inferior descansa al ras y se extiende de 88vw a 92vw sin deformarse */
.hero-bottom-bar,
.hero-footer-info,
#hero .bottom-nav,
#hero > div:last-child {
  position: relative !important;
  width: 90vw !important;
  max-width: 92vw !important;
  min-width: 88vw !important;
  margin-top: auto !important;
  margin-bottom: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 14px !important;
  padding-bottom: 6px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  box-sizing: border-box !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 20 !important;
  flex-shrink: 0 !important;
}

/* La siguiente sección ("Cuerpo Jurídico") inicia limpio debajo sin invadir */
#equipo,
#cuerpo-juridico,
#especialistas,
#estudio,
.specialists-section,
.cuerpo-juridico-section {
  position: relative !important;
  clear: both !important;
  margin-top: 0 !important;
}

/* Subtítulo superior */
.hero-pretitle,
.hero-eyebrow,
#hero p:first-of-type {
  margin-bottom: 24px !important;
  letter-spacing: 0.20em !important;
  opacity: 0.85 !important;
  font-size: clamp(0.72rem, 0.85vw, 0.88rem) !important;
  text-transform: uppercase;
  display: block !important;
}

/* Titular Principal Serif con clamp() de 3.8rem a 6rem */
.hero-title,
.hero-title-monumental,
#hero h1 {
  font-family: var(--font-serif, 'Cinzel', 'Playfair Display', Georgia, serif) !important;
  font-size: clamp(3.8rem, 5vw, 6rem) !important;
  letter-spacing: 0.015em !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  color: #ffffff !important;
  margin-top: 0 !important;
  margin-bottom: 26px !important;
  line-height: 1.05 !important;
  width: 100% !important;
  max-width: 90vw !important;
}

/* Espacio y presencia de la bajada */
.hero-description,
.hero-desc,
#hero h1 + p {
  margin-top: 0 !important;
  margin-bottom: 36px !important;
  font-size: clamp(1.05rem, 1.2vw, 1.25rem) !important;
  line-height: 1.6 !important;
  letter-spacing: 0.03em !important;
  color: #cbd5e1 !important;
  max-width: min(680px, 80vw) !important;
}

/* Margen del botón de WhatsApp */
#hero .btn,
#hero a.button,
.hero-cta-wrapper {
  margin-bottom: 0 !important;
}

.hero-cta-btn {
  font-size: 0.8rem !important;
  letter-spacing: 0.08em !important;
  padding: 13px 26px !important;
  display: inline-flex !important;
}

.font-sans-clean {
  font-family: var(--font-sans);
}

.hero-info-link {
  color: inherit !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: opacity 0.2s ease, color 0.2s ease;
  display: inline-block;
}

.hero-info-link:hover {
  color: #ffffff !important;
  opacity: 0.9;
}

/* ==========================================================================
   1. BARRA DE NAVEGACIÓN FIJA: ESTADO NORMAL Y SCROLLED (GLASSMORPHISM)
   ========================================================================== */
/* Barra fija base */
header,
.site-header,
.navbar,
.nav-header,
.nav-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  transition: all 0.3s ease-in-out !important;
  background: transparent;
}

/* Estado al hacer scroll (se activa automáticamente cuando no está en el inicio) */
header.scrolled,
.site-header.scrolled,
.navbar.scrolled,
.nav-header.scrolled,
.nav-container.scrolled {
  /* Fondo mucho más translúcido y suave */
  background: rgba(4, 8, 16, 0.6) !important;
  
  /* Desenfoque más refinado */
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  
  /* Borde inferior ultra fino y sutil */
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  
  /* Sombra suave sin manchón negro duro */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

/* 1. Barra de navegación: fluida en 88vw a 92vw de borde a borde */
.navbar-container,
.nav-wrapper,
.site-header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 90vw !important;
  max-width: 92vw !important;
  min-width: 88vw !important;
  margin: 0 auto !important;
  padding: 14px 0 !important;
  box-sizing: border-box !important;
}

/* Contenedor de opiniones / testimonios alineado con el pie de página */
.resenas-container {
  display: block !important;
  width: 90% !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* 2. Estructura y expansión del menú central */
.nav-menu,
.navbar-links,
.nav-links,
.site-header nav,
nav ul {
  display: flex !important;
  flex: 1 1 auto !important; /* Toma todo el ancho libre entre el logo y el botón derecho */
  justify-content: space-evenly !important; /* Reparte los 5 enlaces con distancias exactamente iguales */
  align-items: center !important;
  max-width: 900px !important; /* Permite una apertura holgada */
  margin: 0 auto !important;
  padding: 0 40px !important;
  list-style: none !important;
}

/* 3. Estilo de los enlaces individuales */
.nav-menu a,
.navbar-links a,
.nav-links a,
.site-header nav a,
nav ul li a {
  padding: 8px 16px !important;
  white-space: nowrap !important;
  letter-spacing: 0.12em !important;
  transition: opacity 0.2s ease, color 0.2s ease;
}

/* 4. Ajuste del bloque derecho y logotipo */
.nav-actions,
.nav-right-badge {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-shrink: 0 !important;
}

.navbar-logo-container {
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}

.navbar-logo {
  height: 38px !important;
  max-height: 38px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
  mix-blend-mode: screen;
}

/* Botón interactivo de ubicación en Navbar (📍 Santiago Centro) */
.btn-location-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.05rem;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 9999px;
  transition: all 0.25s ease;
  backdrop-filter: blur(6px);
}

.btn-location-nav:hover {
  background: rgba(25, 65, 120, 0.35) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #FFFFFF;
  box-shadow: 0 0 16px rgba(25, 65, 120, 0.3);
  transform: translateY(-1px);
}

/* ==========================================================================
   2. BOTÓN PRINCIPAL INTERACTIVO HERO (ESTILO "BUY TICKET ↗")
   Alineado a la izquierda
   ========================================================================== */
.btn-caravaggio-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 1.05rem 2.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.btn-caravaggio-cta:hover {
  background: #ffffff;
  color: #080a0e;
  border-color: #ffffff;
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
}

/* ==========================================================================
   3. BADGE CÁPSULA DE RESEÑAS EN GOOGLE (SECCIÓN FINAL)
   ========================================================================== */
.reviews-badge {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 999px !important;
  padding: 8px 20px !important;
  color: #e2e8f0 !important;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
  text-decoration: none;
  backdrop-filter: blur(8px);
}

.reviews-badge:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-1px);
}

.google-icon-muted {
  filter: grayscale(40%) brightness(1.1);
}

.stars-gold {
  color: #c5a880 !important;
  letter-spacing: 2px;
}

/* ==========================================================================
   WIDGET DE RESEÑAS REALES DE GOOGLE (ELFSIGHT)
   ========================================================================== */
.elfsight-app-f7e629e8-85a0-452c-ba15-cb7c24d5bcf3 {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  min-height: 250px;
}

/* ==========================================================================
   TARJETAS DE TESTIMONIOS (CRISTAL OSCURO EDITORIAL)
   ========================================================================== */
.resena-card {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 6px !important;
  padding: 36px 30px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  opacity: 0;
  transform: translateY(40px);
  /* Aumentamos de 0.8s a 1.4s con desaceleración muy suave */
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), transform 1.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
  will-change: opacity, transform;
}

/* Estado activo cuando entran en pantalla */
.resena-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Retrasos más espaciados para que cada tarjeta se tome su tiempo al entrar */
.resena-card:nth-child(1).is-visible {
  transition-delay: 0.15s;
}
.resena-card:nth-child(2).is-visible {
  transition-delay: 0.45s;
}
.resena-card:nth-child(3).is-visible {
  transition-delay: 0.75s;
}

.resena-card.is-visible:hover {
  border-color: rgba(255, 255, 255, 0.18) !important;
  transform: translateY(-2px);
  transition-delay: 0s !important;
}

.resena-quote {
  font-style: italic !important;
  color: #cbd5e1 !important;
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
  font-weight: 300;
  margin-bottom: 1.5rem;
}

/* Paneles translúcidos */
.glass-panel-subtle {
  background: rgba(14, 18, 26, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--color-border);
}



.cuerpo-juridico-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

/* ==========================================================================
   SECCIÓN CUERPO JURÍDICO (VISOR INTERACTIVO EDITORIAL)
   ========================================================================== */
/* Quitar margin o padding excesivo en el contenedor de Especialistas */
#cuerpo-juridico,
#equipo,
#especialistas,
.specialists-section,
.cuerpo-juridico-section {
  padding-top: 40px !important; /* Reduce drásticamente el espacio muerto superior */
  padding-bottom: 40px !important;
  margin-top: 0 !important;
  min-height: auto !important;
}

/* Ajuste del scroll-margin para cuando se hace clic en la navegación */
#cuerpo-juridico,
#equipo,
#especialistas {
  scroll-margin-top: 80px !important;
}

/* Cabecera de la sección (título y texto lateral) */
.specialists-section .section-header,
#cuerpo-juridico .section-header,
.cuerpo-juridico-header {
  margin-bottom: 24px !important; /* Espacio moderado antes de la tarjeta principal */
  padding-bottom: 0.5rem !important;
}

/* 2. Quitar el posicionamiento absoluto para que la barra no flote sobre el contenido */
.team-container,
.estudio-wrapper,
.specialists-wrapper,
.cuerpo-juridico-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  position: relative !important;
  height: auto !important;
  min-height: unset !important;
}

/* Contenedor de la ficha activa (foto + datos) */
.specialist-card,
.team-main-card,
.team-detail-container,
.cuerpo-juridico-center {
  display: flex !important;
  align-items: center !important;
  gap: 40px !important;
  position: relative !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  height: auto !important;
  min-height: unset !important;
}

@media (max-width: 1024px) {
  .specialist-card,
  .team-detail-container,
  .cuerpo-juridico-center {
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px !important;
    text-align: center !important;
  }
}

/* 5. Ajustar proporciones de la foto */
.member-image-container,
.specialist-photo-wrapper,
.team-detail-photo,
.spotlight-portrait-frame {
  width: 280px !important;
  height: 360px !important;
  min-width: 280px !important;
  max-width: 280px !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  position: relative !important;
  flex-shrink: 0 !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.member-image-container img,
.specialist-photo-wrapper img,
.team-detail-photo img,
#spotlight-portrait {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 20% !important;
  display: block !important;
}

#spotlight-name {
  font-size: clamp(1.8rem, 2.5vw, 2.3rem) !important;
  line-height: 1.15 !important;
}

.specialist-university,
#spotlight-university {
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-top: 4px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  line-height: 1.4;
  gap: 8px;
}

#spotlight-role,
.specialist-role-header {
  font-size: 0.8rem !important;
  letter-spacing: 0.08em !important;
}

#spotlight-bio {
  font-size: 0.88rem !important;
  line-height: 1.65 !important;
  max-width: 600px !important;
}
.estudio-portrait-frame {
  width: 100% !important;
  max-width: 320px !important;
  height: 420px !important;
  max-height: 420px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important;
  overflow: hidden !important;
}

.estudio-portrait {
  width: 100% !important;
  max-width: 320px !important;
  height: 420px !important;
  max-height: 420px !important;
  object-fit: cover !important;
  object-position: top center !important;
  border-radius: 4px !important;
  display: block !important;
}

@media (max-width: 640px) {
  .estudio-portrait-frame,
  .estudio-portrait,
  .spotlight-portrait-frame,
  #spotlight-portrait {
    height: 380px !important;
    max-height: 380px !important;
  }
}

/* ==========================================================================
   4. FORZAR QUE LA BARRA DE LOS 6 ESPECIALISTAS QUEDE ABAJO DEL CONTENIDO, NUNCA MONTADA
   ========================================================================== */
.team-selector-container,
.team-bar-container,
.cuerpo-juridico-bottom,
[class*="cuerpo-juridico-bar"] {
  position: static !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 24px auto 0 auto !important;
  z-index: 1 !important;
  background: rgba(13, 17, 23, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 10px 16px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important;
  transition: all 0.3s ease;
}

.team-tabs-container,
.team-selector {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 8px !important;
}

@media (max-width: 992px) {
  .team-tabs-container,
  .team-selector {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .team-tabs-container,
  .team-selector {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .cuerpo-juridico-bottom,
  .team-selector-container,
  .team-bar-container {
    position: static !important;
    bottom: auto !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
  }
}

/* ==========================================================================
   SECCIÓN DE ABOGADOS (ESTILO ABOUT EDITORIAL)
   ========================================================================== */
/* Contenedor principal sin barras de scroll */
.cuerpo-juridico-container,
.team-tabs-container,
.specialist-tabs,
.team-bar-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  overflow: hidden !important;
}

/* Grilla de 6 columnas exactas y balanceadas */
.team-tabs-grid,
.cuerpo-juridico-grid,
.specialists-nav,
.team-selector {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
  overflow: hidden !important;
}

/* Tarjeta individual estilizada y simétrica */
.team-tab,
.specialist-btn,
.cuerpo-juridico-btn,
.thumb-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 8px !important;
  min-height: 68px !important;
  height: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transition: all 0.25s ease !important;
  cursor: pointer;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Foto circular nítida pero proporcionada */
.team-tab img,
.specialist-btn img,
.cuerpo-juridico-btn img,
.thumb-avatar img,
.thumb-avatar {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

/* Tipografía fluida que no se corta */
.team-tab-info,
.specialist-info,
.thumb-item > div.min-w-0 {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
  text-align: left !important;
  flex: 1 !important;
}

.team-tab-name,
.specialist-name,
.thumb-name {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  white-space: normal !important;
  line-height: 1.15 !important;
  text-overflow: clip !important;
}

.team-tab-role,
.specialist-role,
.thumb-role {
  font-size: 0.68rem !important;
  color: #94a3b8 !important;
  white-space: normal !important;
  line-height: 1.2 !important;
  margin-top: 2px !important;
}

.specialist-role .role-title,
.team-tab-role .role-title,
.thumb-role .role-title {
  display: block !important;
  font-size: 0.68rem !important;
  line-height: 1.2 !important;
  color: #cbd5e1 !important;
  white-space: normal !important;
}

.specialist-role .role-dept,
.team-tab-role .role-dept,
.thumb-role .role-dept {
  display: block !important;
  font-size: 0.64rem !important;
  line-height: 1.2 !important;
  color: #94a3b8 !important;
  white-space: normal !important;
}

@media (max-width: 992px) {
  .team-tabs-grid,
  .cuerpo-juridico-grid,
  .specialists-nav,
  .team-selector {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .team-tabs-grid,
  .cuerpo-juridico-grid,
  .specialists-nav,
  .team-selector {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

.thumb-item.active .role-title {
  color: #ffffff !important;
  font-weight: 500 !important;
}

.thumb-item.active .role-dept {
  color: #93c5fd !important;
}

.thumb-item:hover,
.team-tab:hover,
.team-selector button:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-2px);
}

/* Mantener el estado activo resaltado con el halo azul característico */
.team-tab.active,
[data-member-target].active,
.team-selector button.active,
.thumb-item.active {
  background: rgba(37, 99, 235, 0.15) !important;
  border-color: rgba(59, 130, 246, 0.5) !important;
  box-shadow: 0 0 15px rgba(37, 99, 235, 0.25) !important;
}

.thumb-item.active .thumb-avatar {
  border-color: #60a5fa;
  box-shadow: 0 0 14px rgba(59, 130, 246, 0.5);
  transform: scale(1.05);
  opacity: 1;
}

.thumb-item.active .thumb-name {
  color: #FFFFFF;
  font-weight: 700;
}

.thumb-item.active .thumb-role {
  color: #e2e8f0;
}

.thumb-item:not(.active) .thumb-avatar {
  border-color: rgba(255, 255, 255, 0.25);
  opacity: 0.85;
}

.thumb-item:not(.active) .thumb-name {
  color: #f1f5f9;
}

.thumb-item:not(.active) .thumb-role {
  color: #cbd5e1;
}

/* Tarjetas de áreas clave */
.service-preview-card {
  transition: all 0.25s ease;
  background: rgba(14, 18, 26, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.75rem;
}

.service-preview-card:hover {
  transform: translateY(-2px);
  border-color: rgba(59, 130, 246, 0.4);
  background: rgba(20, 26, 38, 0.85);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   SECCIÓN ÁREAS DE PRÁCTICA: TRANSPARENCIA Y BORDE TENUE (MINIMALISTA)
   ========================================================================== */
.area-practice-card,
.practice-card {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 6px !important;
  padding: 36px 32px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 580px !important;
  height: 100% !important;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 1.4s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.3s ease, 
              background 0.3s ease !important;
  will-change: opacity, transform;
}

.area-practice-card.is-visible,
.practice-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Entrada escalonada para las 3 tarjetas */
.area-practice-card:nth-child(1).is-visible,
.practice-card:nth-child(1).is-visible {
  transition-delay: 0.15s;
}
.area-practice-card:nth-child(2).is-visible,
.practice-card:nth-child(2).is-visible {
  transition-delay: 0.35s;
}
.area-practice-card:nth-child(3).is-visible,
.practice-card:nth-child(3).is-visible {
  transition-delay: 0.55s;
}

.area-practice-card:hover,
.practice-card:hover {
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  transform: translateY(-2px);
  transition-delay: 0s !important;
}

.area-practice-card ul li {
  line-height: 1.45 !important;
  font-size: 0.88rem !important;
}

.area-practice-card ul li strong {
  color: #f8fafc;
  font-weight: 500;
}

.area-practice-card .btn-sober {
  margin-top: 1.5rem !important;
  flex-shrink: 0 !important;
}

/* Grilla armónica para 3 tarjetas de Áreas de Práctica */
.practice-cards-grid,
#areas-practica .grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  width: 100% !important;
  align-items: stretch !important;
}

@media (max-width: 1024px) and (min-width: 769px) {
  .practice-cards-grid,
  #areas-practica .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    justify-content: center !important;
  }
  .practice-cards-grid > .area-practice-card:nth-child(3),
  #areas-practica .grid > .area-practice-card:nth-child(3) {
    grid-column: 1 / -1 !important;
    max-width: 580px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 768px) {
  .practice-cards-grid,
  #areas-practica .grid {
    grid-template-columns: 1fr !important;
  }
  .area-practice-card,
  .practice-card {
    min-height: auto !important;
  }
  .practice-cards-grid > .area-practice-card:nth-child(3),
  #areas-practica .grid > .area-practice-card:nth-child(3) {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* ==========================================================================
   SECCIÓN UBICACIÓN: PANELES SIMÉTRICOS DE CRISTAL OSCURO
   ========================================================================== */
/* Forzar a que la grilla y tarjetas de Ubicación tengan el mismo ancho y separación */
#ubicacion .container,
#ubicacion > div,
#areas-practica .container,
#areas-practica > div {
  max-width: var(--container-width, 1320px) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

#ubicacion .grid,
.location-grid {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
}

#ubicacion .location-card,
#ubicacion .grid > div {
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  #ubicacion .grid,
  .location-grid {
    grid-template-columns: 1fr !important;
  }
}

.ubicacion-panel {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 6px !important;
  padding: 36px 32px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  transition: border-color 0.3s ease, transform 0.3s ease !important;
}

.ubicacion-panel:hover {
  border-color: rgba(255, 255, 255, 0.18) !important;
}

/* ==========================================================================
   SECCIÓN CONTACTO: CONTENEDOR ARQUITECTÓNICO E INPUTS SOBRIOS
   ========================================================================== */
/* Ancho unificado al tamaño de las tarjetas de Ubicación (1150px) */
#contacto .contact-card,
#contacto .form-container,
.contact-card,
.contacto-container,
#contacto > div {
  max-width: 1150px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.contacto-container {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 6px !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4) !important;
  padding: 48px 40px !important;
}

/* Contenedor en cuadrícula perfecta de 2 columnas aprovechando el 100% */
.contact-form,
#contacto form,
.contact-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

/* Selector Superior: Segmented Control Rediseñado (Nueva Consulta / Ya soy Cliente) */
.client-type-wrapper {
  grid-column: 1 / -1 !important;
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 22px !important;
  width: 100% !important;
}

.client-tabs {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 9999px !important;
  padding: 4px !important;
  gap: 4px !important;
  box-sizing: border-box !important;
}

.client-tab {
  background: transparent !important;
  color: #94a3b8 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.05em !important;
  font-weight: 500 !important;
  padding: 8px 24px !important;
  border-radius: 9999px !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  user-select: none !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.client-tab:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

.client-tab.active {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* Si existen contenedores intermedios .grid, desglosarlos para que sus hijos participen del grid principal */
#contacto form > div.grid,
.contact-form > div.grid {
  display: contents !important;
}

/* Etiquetas (Labels) alineadas y parejas */
.form-group label,
.contact-form label,
#contacto label,
#contacto .form-label {
  display: block !important;
  margin-bottom: 8px !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #94a3b8;
  font-weight: 500;
  line-height: 1.2 !important;
}

/* Forzar altura uniforme a todos los campos y selects */
.contact-form input,
.contact-form select,
.contact-form textarea,
#contacto input,
#contacto select,
.form-group input,
.form-group select,
.editorial-input,
.custom-select-trigger {
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  line-height: 52px !important;
  box-sizing: border-box !important;
  padding: 0 16px !important;
  font-size: 0.95rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important; /* Corta textos largos de opciones elegantemente sin agrandar la casilla */
}

.editorial-input {
  background: rgba(7, 9, 14, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 4px !important;
  color: #e2e8f0 !important;
  width: 100% !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.editorial-input:focus {
  border-color: rgba(255, 255, 255, 0.3) !important;
  outline: none !important;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.05) !important;
}

/* ==========================================================================
   CUSTOM DROPDOWNS (CONTACT FORM)
   ========================================================================== */
.custom-select-wrapper {
  position: relative;
  user-select: none;
  width: 100%;
}

.custom-select-trigger {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: #f1f5f9;
  background: rgba(10, 15, 29, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
}

.custom-select-trigger:hover,
.custom-select-wrapper.open .custom-select-trigger {
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.08);
}

.custom-select-trigger span {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  line-height: normal !important;
  text-align: left !important;
}

.custom-select-trigger .arrow {
  width: 8px;
  height: 8px;
  border-right: 2px solid #94a3b8;
  border-bottom: 2px solid #94a3b8;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
  margin-left: 10px;
  flex-shrink: 0 !important;
}

.custom-select-wrapper.open .arrow {
  transform: rotate(-135deg);
  border-color: #ffffff;
}

/* Caja flotante desplegada con iluminación */
.custom-options {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #090e1c;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.7), 0 0 20px rgba(56, 189, 248, 0.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 100;
  overflow: hidden;
  padding: 6px;
}

.custom-select-wrapper.open .custom-options {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Opciones individuales con efecto iluminado (glow) al pasar el mouse */
.custom-option {
  padding: 12px 16px;
  font-size: 0.84rem;
  color: #94a3b8;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
  position: relative;
}

.custom-option:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.04), 0 0 10px rgba(255, 255, 255, 0.05);
  padding-left: 20px; /* Sutil movimiento para resaltar */
}

.custom-option.selected {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  font-weight: 500;
}

/* Botonera Dual de Contacto (WhatsApp & Correo) */
.contact-actions,
#contacto .contact-actions,
.contact-buttons-row {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin-top: 10px !important;
  width: 100% !important;
}

/* Homologar también los botones inferiores a la misma altura exacta */
.contact-form button,
.contact-form .btn,
#contacto button,
#contacto .btn,
.contact-buttons-row button,
.btn-action {
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.08em;
  font-weight: 500;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.25s ease;
  text-align: center;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.03);
  color: #ffffff;
}

.btn-whatsapp:hover {
  background: rgba(37, 211, 102, 0.12);
  border-color: #25d366;
  color: #25d366;
}

.btn-email:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}

@media (max-width: 640px) {
  .contacto-container {
    padding: 32px 20px !important;
  }
  .contact-form,
  #contacto form,
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .contact-actions,
  #contacto .contact-actions,
  .contact-buttons-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* Botón sobrio para enlaces */
.btn-sober {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  transition: all 0.2s ease;
}

.btn-sober:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
}

/* Botón WhatsApp secundario */
.btn-wa-luxury {
  background-color: var(--color-wa);
  color: #FFFFFF;
  font-weight: 600;
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.25);
}

.btn-wa-luxury:hover {
  background-color: #1ebe5d;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

/* Animación sutil de pulso */
@keyframes wa-pulse-subtle {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.pulse-wa {
  animation: wa-pulse-subtle 2.5s infinite;
}

#spotlight-wrapper {
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* ==========================================================================
   BOTÓN FLOTANTE DE WHATSAPP (VISIBILIDAD CONDICIONAL)
   Oculto en desktop para mantener la sobriedad y pureza del diseño
   Visible únicamente en dispositivos móviles (max-width: 768px)
   ========================================================================== */
.whatsapp-float {
  display: none !important;
}

@media (max-width: 768px) {
  .whatsapp-float {
    display: flex !important;
    flex-direction: column;
    align-items: flex-end;
  }
}

/* ==========================================================================
   PIE DE PÁGINA (FOOTER SIMÉTRICO EDITORIAL)
   ========================================================================== */
footer,
.site-footer {
  background: linear-gradient(180deg, #060b14 0%, #04070d 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 60px !important;
  padding-bottom: 40px !important;
  color: #94a3b8;
  font-size: 0.85rem;
}

.footer-grid,
.footer-columns {
  width: 90% !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 0 0 50px 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important; /* Todas las columnas alineadas arriba de forma pareja */
  box-sizing: border-box !important;
  gap: 2.5rem !important;
}

.footer-grid > .footer-col:first-child {
  flex: 0 1 320px !important;
  max-width: 320px !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  text-align: left !important;
}

.footer-grid > .footer-col:nth-child(2) {
  flex: 0 1 auto !important;
  text-align: left !important;
}

.footer-grid > .footer-col:nth-child(3) {
  flex: 0 1 auto !important;
  text-align: left !important;
}

.footer-grid > .footer-col:last-child {
  flex: 0 1 auto !important;
  text-align: left !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
}

@media (max-width: 1024px) {
  .footer-grid,
  .footer-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 36px !important;
  }
  .footer-grid > .footer-col:first-child,
  .footer-grid > .footer-col:last-child {
    max-width: none !important;
    flex: none !important;
  }
}

@media (max-width: 640px) {
  .footer-grid,
  .footer-columns {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
  }
}

.footer-brand-logo {
  display: inline-block;
  text-decoration: none;
  margin-bottom: 18px;
}

.footer-brand-logo img,
.footer-brand-logo svg,
.footer-logo-img {
  height: 38px !important;
  max-height: 38px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block;
  mix-blend-mode: screen;
}

.footer-brand {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.1em;
  color: #ffffff;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 6px;
  display: inline-block;
  font-family: inherit;
}

.footer-desc {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  max-width: 320px !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  color: #94a3b8 !important;
}

.footer-badges {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.footer-badge-location,
.footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.03);
  padding: 8px 14px !important;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.status-dot,
.badge-dot {
  width: 6px;
  height: 6px;
  background: #e11d48;
  border-radius: 50%;
}

.footer-reflota-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  padding: 9px 16px !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: #94a3b8;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  transition: all 0.25s ease;
}

.footer-reflota-badge strong {
  color: #f1f5f9;
  font-weight: 500;
}

.footer-reflota-badge .instagram-icon {
  color: #cbd5e1;
  transition: transform 0.25s ease, color 0.25s ease;
}

.footer-reflota-badge:hover {
  background: rgba(225, 48, 108, 0.1);
  border-color: rgba(225, 48, 108, 0.35);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(225, 48, 108, 0.15);
  transform: translateY(-1px);
}

.footer-reflota-badge:hover .instagram-icon {
  color: #f43f5e;
  transform: scale(1.1);
}

.footer-title,
.footer-heading {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  color: #f1f5f9 !important;
  text-transform: uppercase !important;
  margin-bottom: 1.2rem !important;
}

.footer-subgroup-divider {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-subgroup .footer-title {
  font-size: 0.95rem !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 12px;
  font-weight: 600;
}

.footer-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.footer-list li strong,
.footer-member-link .member-name {
  display: block !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  color: #f1f5f9 !important;
}

.footer-list li span {
  display: block !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  opacity: 0.85 !important;
  color: #94a3b8 !important;
}

.footer-member-link {
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: all 0.2s ease;
  margin: -4px -6px;
}

.footer-member-link:hover {
  background: rgba(255, 255, 255, 0.04);
}

.footer-member-link:hover .member-name {
  color: #ffffff !important;
  transform: translateX(3px);
}

.footer-member-link .member-name {
  display: inline-block;
  transition: color 0.2s ease, transform 0.2s ease;
}

.footer-team-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-team-list li {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  line-height: 1.4;
}

.footer-team-list strong {
  color: #e2e8f0;
  font-weight: 500;
}

.footer-team-list span {
  color: #64748b;
  font-size: 0.74rem;
}

.footer-info-block,
.footer-contact-item {
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 18px !important;
  line-height: 1.6 !important;
}

.footer-info-block label,
.contact-label {
  font-size: 0.95rem !important;
  letter-spacing: 0.08em !important;
  color: #94a3b8 !important;
  opacity: 0.85 !important;
  line-height: 1.6 !important;
  margin-bottom: 4px !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}

.footer-info-block a,
.footer-info-block p,
.contact-value {
  color: #cbd5e1 !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  margin: 0 !important;
}

.footer-info-block a:hover,
.contact-value:hover {
  color: #fff !important;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding: 24px 0 !important;
  width: 100% !important;
}

.footer-bottom-container {
  max-width: 1440px !important;
  width: 90% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: #94a3b8 !important;
  box-sizing: border-box !important;
}

.footer-bottom-container p {
  margin: 0 !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: #94a3b8 !important;
}

@media (max-width: 900px) {
  .footer-container {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .footer-bottom-container {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}

/* ===================================================
   NAVEGACIÓN MÓVIL (DRAWER Y HAMBURGUESA)
   En PC el botón hamburguesa y el drawer están 100% ocultos
   =================================================== */
.mobile-hamburger-btn,
.mobile-menu-btn,
.mobile-nav-drawer,
.mobile-menu-overlay {
  display: none !important;
}

/* En móviles (pantallas menores a 850px) */
@media (max-width: 850px) {
  /* Evitar desbordes de ancho */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
  }

  /* Forzar la desaparición de CUALQUIER lista o enlace horizontal en el header */
  header nav,
  header nav a:not(:has(img)):not(.logo-link),
  header ul,
  .desktop-nav,
  .nav-menu,
  .navbar-links,
  .nav-links,
  nav ul:not(.mobile-nav-links) {
    display: none !important;
  }

  /* Barra de navegación superior */
  .navbar-container,
  .nav-wrapper,
  .site-header-inner,
  header nav {
    padding: 12px 18px !important;
    justify-content: space-between !important;
    width: 100% !important;
  }

  /* Mostrar botón hamburguesa a la derecha */
  .mobile-hamburger-btn,
  .mobile-menu-btn {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 28px !important;
    height: 20px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin-left: auto !important;
    z-index: 9999 !important;
  }

  .mobile-hamburger-btn span,
  .mobile-menu-btn span {
    display: block !important;
    width: 100% !important;
    height: 2px !important;
    background-color: #ffffff !important;
    border-radius: 2px !important;
  }

  /* Menú Full-Screen Overlay Elegante y Sólido */
  .mobile-nav-drawer,
  .mobile-menu-overlay {
    position: fixed !important;
    inset: 0 !important; /* top: 0, left: 0, right: 0, bottom: 0 */
    width: 100vw !important;
    height: 100vh !important;
    background: #070b12 !important; /* Fondo sólido oscuro profundo para que nada se trasluzca */
    z-index: 99999 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 24px 24px 40px 24px !important;
    box-sizing: border-box !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(-10px);
  }

  .mobile-nav-drawer.open,
  .mobile-menu-overlay.active {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  /* Barra superior interna del menú abierto */
  .drawer-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }

  .close-drawer-btn,
  .mobile-menu-close {
    position: static !important;
    background: none !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 32px !important;
    cursor: pointer !important;
    line-height: 1 !important;
    padding: 4px !important;
  }

  /* Enlaces principales centrados */
  .drawer-links,
  .mobile-nav-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
    align-items: center !important;
    justify-content: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .drawer-links a,
  .mobile-nav-links a {
    color: #ffffff !important;
    font-size: 1.15rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.14em !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    transition: color 0.2s ease, opacity 0.2s ease;
  }

  .drawer-links a:hover,
  .mobile-nav-links a:hover {
    opacity: 0.7;
  }

  /* Bloque inferior con los datos de contacto directos */
  .drawer-footer,
  .mobile-menu-footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: center !important;
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
  }

  .drawer-footer a,
  .mobile-menu-footer a {
    color: rgba(255, 255, 255, 0.65) !important;
    text-decoration: none !important;
  }

  /* Bloquear scroll del body cuando el menú está abierto */
  body.menu-open {
    overflow: hidden !important;
  }

  /* Ajustar tamaño del título principal para que no se corte */
  .hero-title,
  h1 {
    font-size: 2.1rem !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
  }

  /* Apilar tarjetas en una sola columna vertical */
  .areas-grid,
  .practice-grid,
  .team-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    width: 100% !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  /* Permitir desplazamiento táctil fluido en la barra de especialistas */
  .team-selector-container,
  .team-bar-container,
  .cuerpo-juridico-bottom,
  [class*="cuerpo-juridico-bar"] {
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 10px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Botón flotante de WhatsApp accesible */
  .whatsapp-floating,
  .floating-wsp {
    bottom: 20px !important;
    right: 20px !important;
    width: 52px !important;
    height: 52px !important;
  }
}

/* ==========================================================================
   LAYOUT RESPONSIVO Y ADAPTATIVO PARA PANTALLAS GRANDES Y ULTRA-WIDE (>1400px)
   ========================================================================== */
@media (min-width: 1400px) {
  /* 1. Contenedor global de hasta 85vw o max-width: 1550px con márgenes automáticos */
  .container:not(.hero-content):not(.hero-main-block):not(.hero-bottom-bar):not(.site-header-inner):not(.navbar-container):not(.resenas-container):not(.footer-grid):not(.footer-bottom-container),
  .max-w-7xl,
  section:not(#hero):not(.hero):not(.hero-section):not(#resenas):not(.resenas-section):not(.site-footer),
  .cuerpo-juridico-inner,
  .specialists-wrapper,
  .team-container,
  .estudio-section,
  .areas-section,
  .ubicacion-section,
  .contacto-section,
  #cuerpo-juridico > div,
  #estudio > div,
  #areas-practica > div,
  #ubicacion > div,
  #contacto > div {
    width: 85vw !important;
    max-width: 1550px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* 2. Header y Portada Hero: Ancho relativo 88vw a 92vw */
  .site-header-inner,
  .navbar-container,
  .nav-wrapper,
  .hero-content,
  .hero-main-block,
  .hero-bottom-bar,
  .hero-footer-info {
    width: 90vw !important;
    max-width: 92vw !important;
    min-width: 88vw !important;
  }

  /* Título de portada con clamp(3.8rem, 5vw, 6rem) y altura min-height: 100vh */
  .hero-title,
  .hero-title-monumental,
  #hero h1 {
    font-size: clamp(3.8rem, 5vw, 6rem) !important;
    line-height: 1.05 !important;
    letter-spacing: 0.015em !important;
    max-width: 90vw !important;
  }

  .hero-description,
  .hero-desc {
    max-width: 740px !important;
    font-size: clamp(1.15rem, 1.2vw, 1.3rem) !important;
    line-height: 1.65 !important;
  }

  .nav-menu,
  .navbar-links {
    max-width: 1050px !important;
    gap: 2.2rem !important;
  }

  /* 3. Sección Cuerpo Jurídico (Perfil de Abogados y Selector) */
  .specialist-card,
  .team-main-card,
  .team-detail-container,
  .cuerpo-juridico-center {
    gap: 56px !important;
    margin-bottom: 28px !important;
  }

  .spotlight-portrait-frame {
    width: 320px !important;
    height: 410px !important;
    min-width: 320px !important;
    max-width: 320px !important;
  }

  #spotlight-name {
    font-size: 2.6rem !important;
    line-height: 1.15 !important;
  }

  #spotlight-bio {
    max-width: 850px !important;
    font-size: 0.95rem !important;
    line-height: 1.75 !important;
  }

  .team-selector-container,
  .team-bar-container,
  .cuerpo-juridico-bottom,
  .cuerpo-juridico-container,
  .specialist-tabs {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 20px !important;
  }

  .team-tabs-grid,
  .cuerpo-juridico-grid,
  .specialists-nav,
  .team-selector {
    gap: 12px !important;
  }

  .team-tab,
  .specialist-btn,
  .cuerpo-juridico-btn,
  .thumb-item {
    padding: 12px 14px !important;
    min-height: 74px !important;
    gap: 12px !important;
  }

  .thumb-avatar {
    width: 48px !important;
    height: 48px !important;
  }

  .thumb-name,
  .team-tab-name {
    font-size: 0.88rem !important;
  }

  .thumb-role,
  .team-tab-role {
    font-size: 0.76rem !important;
  }

  /* 4. Sección 'El Estudio' (Proporciones armónicas de retrato y texto) */
  .estudio-portrait-frame,
  .estudio-portrait {
    max-width: 380px !important;
    height: 480px !important;
    max-height: 480px !important;
  }

  #estudio .space-y-6 {
    max-width: 880px !important;
  }

  #estudio p {
    font-size: 0.95rem !important;
    line-height: 1.75 !important;
  }

  /* 5. Sección 'Áreas de Práctica' (Tarjetas expandidas con amplitud) */
  .practice-cards-grid,
  #areas-practica .grid {
    gap: 32px !important;
  }

  .area-practice-card {
    padding: 42px 36px !important;
    min-height: 560px !important;
  }

  /* 6. Sección 'Ubicación' y 'Contacto' */
  #ubicacion .grid,
  .location-grid {
    gap: 32px !important;
  }

  .ubicacion-panel,
  .location-card {
    padding: 42px 36px !important;
  }

  /* 7. Pie de Página (Footer) y Reseñas en pantallas grandes */
  .resenas-container,
  .footer-grid,
  .footer-columns,
  .footer-bottom-container {
    width: 90% !important;
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .footer-grid,
  .footer-columns {
    display: flex !important;
    justify-content: space-between !important;
    gap: 2.5rem !important;
  }

  .footer-grid > .footer-col:first-child {
    flex: 0 1 320px !important;
    max-width: 320px !important;
  }

  .footer-title,
  .footer-heading {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 1.2rem !important;
  }

  .footer-desc {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    max-width: 320px !important;
  }

  .footer-list li strong,
  .footer-member-link .member-name,
  .footer-info-block a,
  .footer-info-block p,
  .contact-value {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
  }

  .footer-list li span,
  .footer-info-block label,
  .contact-label,
  .footer-badge-location,
  .footer-reflota-badge,
  .footer-bottom-container p {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }
}