/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/
Description: Hello Elementor Child Theme
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* 
  SISTEMA DE DISEÑO PERSONALIZADO - BRAVO ROQUE & ASOCIADOS S.C.
  -------------------------------------------------------------
  Pega este código en la sección de CSS Personalizado Global 
  de WordPress (Ajustes del Sitio > CSS Personalizado en Elementor).
*/

:root {
  /* Paleta de Colores Oficial */
  --firm-gold: #DFA944;
  /* Dorado/Ocre Primario y Acento (#DFA944) */
  --firm-navy: #041C34;
  /* Azul Marino Profundo Principal (#041C34) */
  --firm-white: #FFFFFF;
  /* Blanco Secundario (#FFFFFF) */
  --firm-charcoal: #2C3E50;
  /* Gris Carbón Azulado de Lectura (#2C3E50) */
  --firm-gray: #7A7A7A;
  /* Gris Medio de Soporte (#7A7A7A) */
  --firm-offwhite: #E2E8F0;
  /* Blanco Roto para texto en fondo oscuro (#E2E8F0) */
  --firm-glacial: #F4F6F8;
  /* Gris Glacial/Blanco Humo de fondos (#F4F6F8) */
  --firm-border-dark: #1E3A5F;
  /* Azul Acero para líneas en fondos oscuros (#1E3A5F) */

  /* Familias Tipográficas */
  --font-primary: 'Cormorant Garamond', serif;
  /* Serif de prestigio */
  --font-secondary: 'Inter', sans-serif;
  /* Sans-serif de lectura */
}

/* ==========================================
   1. ESTILOS TIPOGRÁFICOS GLOBAL-OVERLAY (CLASES)
   ========================================== */

/* Título Principal (H1) */
.firm-h1 {
  font-family: var(--font-primary);
  font-size: 3.0em;
  /* 48px base */
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

@media (max-width: 767px) {
  .firm-h1 {
    font-size: 2.25em;
    /* 36px base */
  }
}

/* Título de Sección (H2) */
.firm-h2 {
  font-family: var(--font-primary);
  font-size: 2em;
  /* 36px base */
  font-weight: 400;
  line-height: 1.3;
}

@media (max-width: 767px) {
  .firm-h2 {
    font-size: 1.75em;
    /* 28px base */
  }
}

/* Título de Tarjetas/Pilares/Socios (H3) */
.firm-h3 {
  font-family: var(--font-secondary);
  font-size: 1.25em;
  /* 20px base */
  font-weight: 600;
  line-height: 1.4;
}

.firm-h3-serif {
  font-family: var(--font-primary);
  font-size: 1.5em;
  /* 24px base */
  font-weight: 400;
  line-height: 1.3;
}

/* Texto de Lectura y Párrafos (p) */
.firm-body {
  font-family: var(--font-secondary);
  font-size: 1.0em;
  /* 16px base */
  font-weight: 400;
  line-height: 1.7;
}

@media (max-width: 767px) {
  .firm-body {
    font-size: 0.9375em;
    /* 15px base */
  }
}

/* Frases Clave / Citas Destacadas (blockquote) */
.firm-quote {
  font-family: var(--font-primary);
  font-size: 1.125em;
  /* 18px base */
  font-weight: 400;
  font-style: italic;
  color: var(--firm-gold);
  line-height: 1.6;
}

/* Etiquetas Superiores (span) */
.firm-tag {
  font-family: var(--font-secondary);
  font-size: 0.75em;
  /* 12px base */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

/* ==========================================
   2. COMPONENTES Y ELEMENTOS DE LAYOUT
   ========================================== */

/* Overlay Personalizado para el Hero (Slide Overlay) */
.hero-navy-overlay .swiper-slide::after,
.hero-navy-overlay .elementor-background-overlay {
  background: rgba(4, 28, 52, 0.8);
  /* Azul marino profundo (#041C34) al 80% */
  mix-blend-mode: multiply;
  transition: background 0.5s ease;
}

/* Tarjetas de Servicio Interactivas ("Qué hacemos") */
.interactive-card {
  background-color: transparent;
  border-top: 2px solid transparent;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  padding: 1.5em;
  border-radius: 4px;
}

.interactive-card:hover {
  background-color: var(--firm-white);
  /* Blanco (#FFFFFF) */
  border-top: 2px solid var(--firm-gold);
  /* Dorado (#DFA944) */
  box-shadow: 0 10px 30px rgba(4, 28, 52, 0.05);
  transform: translateY(-4px);
}

/* Tarjeta con Marco Dorado Fino ("Atención a particulares") */
.accent-border-card {
  border: 1px solid var(--firm-gold);
  /* Dorado (#DFA944) */
  background-color: var(--firm-white);
  padding: 2.5em;
  border-radius: 4px;
}

/* Líneas Divisorias delgadas sobre Fondo Oscuro */
.dark-section-divider {
  border-color: var(--firm-border-dark);
  /* Azul acero oscuro (#1E3A5F) */
  border-width: 1px 0 0 0;
  border-style: solid;
  margin: 1.5em 0;
}

/* ==========================================
   3. ESTILOS DE BOTONES (CTAs)
   ========================================== */

/* Botón Contorno - Ghost (Opción A) */
.btn-ghost a,
.btn-ghost button {
  background-color: transparent;
  border: 1px solid var(--firm-gold);
  /* Dorado (#DFA944) */
  color: var(--firm-gold);
  font-family: var(--font-secondary);
  font-size: 0.875em;
  font-weight: 600;
  letter-spacing: 0.05em;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  padding: 0.8em 2.0em;
  border-radius: 4px;
  display: inline-block;
}

.btn-ghost a:hover,
.btn-ghost button:hover {
  background-color: var(--firm-gold);
  /* Dorado (#DFA944) */
  color: var(--firm-navy);
  /* Azul marino profundo (#041C34) */
}

/* Botón Sólido - Dorado (Opción B) */
.btn-solid a,
.btn-solid button,
.btn-solid.e-form-submit-button-base {
  background-color: var(--firm-gold);
  /* Dorado (#DFA944) */
  border: 1px solid var(--firm-gold);
  color: var(--firm-navy);
  /* Azul marino profundo (#041C34) */
  font-family: var(--font-secondary);
  font-size: 0.875em;
  font-weight: 600;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
  padding: 0.8em 2.0em;
  border-radius: 4px;
  display: inline-block;
}

.btn-solid a:hover,
.btn-solid button:hover,
.btn-solid.e-form-submit-button-base:hover {
  background-color: var(--firm-white);
  /* Blanco (#FFFFFF) */
  border-color: var(--firm-white);
  color: var(--firm-navy);
  /* Azul marino profundo (#041C34) */
}

/* ==========================================
   4. CABECERA PEGADIZA (STICKY HEADER)
   ========================================== */

/* 
  Aplica la clase '.site-header' al contenedor/sección principal del Header en Elementor.
*/
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background-color: var(--firm-navy);
  /* Azul marino profundo (#041C34) al 100% de opacidad */
  transition: background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), padding 0.4s ease, box-shadow 0.4s ease;
}

/* 
  Estado activo (cuando el usuario hace scroll hacia abajo):
  - Reduce la opacidad del fondo al 70% (con efecto de desenfoque de fondo).
  - Reduce sutilmente el padding para dar un efecto de encogimiento elegante.
*/
.site-header.scrolled {
  background-color: rgba(4, 28, 52, 0.7) !important;
  /* Azul marino profundo (#041C34) al 70% de opacidad */
  backdrop-filter: blur(10px) !important;
  /* Efecto de cristal esmerilado (glassmorphism) */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  padding-top: 0.8em !important;
  padding-bottom: 0.8em !important;
}

/* ==========================================
   5. TARJETAS DE EQUIPO (INTERACTIVE HOVER TEAM CARDS)
   ========================================== */

/* 
  Asigna la clase '.team-card' al contenedor de cada integrante en Elementor. 
  La relación de aspecto recomendada del contenedor es de 3:4.
*/
.team-card {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  width: 100%;
  height: 450px;
  /* Altura sugerida para mantener proporción 3:4 */
  background-color: var(--firm-navy);
  /* Fondo de respaldo azul marino profundo (#041C34) */
}

/* Retrato en blanco y negro */
.team-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  /* Asegura escala de grises pura */
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.team-card:hover img {
  transform: scale(1.05);
  /* Zoom sutil en hover */
}

/* Capa de Información Deslizable (Overlay) */
.team-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(244, 246, 248, 0.95);
  /* Gris glacial (#F4F6F8) al 95% para máxima legibilidad del texto en hover */
  transform: translateY(calc(100% - 85px));
  /* Deja visible solo el zócalo inferior (85px) en reposo */
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  padding: 20px;
  z-index: 2;
}

.team-card:hover .team-card-overlay {
  transform: translateY(0);
  /* Se desliza cubriendo toda la tarjeta */
  background-color: rgba(244, 246, 248, 0.98);
  /* Prácticamente sólido en hover */
}

/* Encabezado del Integrante (Nombre y Cargo siempre visibles en la base) */
.team-card-header {
  margin-bottom: 15px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
  padding-bottom: 5px;
}

.team-card:hover .team-card-header {
  border-color: var(--firm-gold);
  /* Línea divisoria dorada (#DFA944) en hover */
}

/* Nombre (H3) y Cargo (span) dentro del zócalo */
.team-card-header h3,
.team-card-header .firm-h3 {
  color: var(--firm-navy);
  /* Azul marino profundo (#041C34) */
  margin: 0 0 5px 0;
  font-family: var(--font-primary);
  font-size: 1.35em;
  font-weight: 400;
}

.team-card-header span,
.team-card-header .firm-tag {
  color: var(--firm-gold);
  /* Dorado (#DFA944) */
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: block;
}

/* Cuerpo de Trayectoria (p) - Oculto en reposo, visible en hover */
.team-card-body {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.4s ease 0.15s, transform 0.4s ease 0.15s;
  overflow-y: auto;
  /* Scroll interno en caso de perfiles muy largos */
}

.team-card:hover .team-card-body {
  opacity: 1;
  transform: translateY(0);
}

/* Texto de la Trayectoria (p) */
.team-card-body p,
.team-card-body .firm-body {
  color: var(--firm-charcoal);
  /* Gris carbón (#2C3E50) */
  font-size: 0.875em;
  /* Ligeramente más pequeño para encajar en el contenedor 3:4 */
  line-height: 1.6;
  margin: 0;
}

/* ==========================================
   6. LISTA DE NUMERALES ROMANOS GIGANTES
   ========================================== */

/*
  Aplica la clase '.roman-list' al contenedor (ol/ul) en la sección "Nuestra Diferencia".
*/
.roman-list {
  list-style: none;
  padding: 0;
  margin: 2em 0;
  width: 100%;
}

/* Elemento de lista (li) - Fila con separador inferior */
.roman-list-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--firm-offwhite);
  /* Gris claro (#E2E8F0) */
  padding: 1.5em 0;
}

.roman-list-item:last-child {
  border-bottom: none;
}

/* El numeral romano gigante (span) */
.roman-numeral {
  font-family: var(--font-primary);
  font-size: 3.5em;
  /* Numeral gigante (3.5em) */
  font-weight: 300;
  color: var(--firm-gold);
  /* Dorado (#DFA944) */
  min-width: 2.0em;
  /* Espacio fijo para alineación horizontal */
  line-height: 1;
  margin: 0;
}

@media (max-width: 767px) {
  .roman-numeral {
    font-size: 2.5em;
    /* Ajuste para móvil */
    min-width: 1.8em;
  }
}

/* El texto del principio (p / span) */
.roman-text {
  font-family: var(--font-primary);
  font-size: 1.25em;
  /* Texto destacado (1.25em) */
  font-weight: 400;
  color: var(--firm-navy);
  /* Azul marino profundo (#041C34) */
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 767px) {
  .roman-text {
    font-size: 1.1em;
  }
}

/* ==========================================
   7. BLOQUE DESTACADO DE INTRODUCCIÓN (PÁGINA QUIÉNES SOMOS)
   ========================================== */

/* 
  Aplica la clase '.firm-intro-quote' a la cita o bloque de texto destacado 
  de la columna izquierda en la sección de Introducción.
*/
.firm-intro-quote {
  font-family: var(--font-primary);
  font-size: 1.6em;
  /* Serif de gran formato (1.6em) */
  font-weight: 500;
  line-height: 1.5;
  color: var(--firm-navy);
  /* Azul marino profundo (#041C34) */
  margin: 0;
}

@media (max-width: 767px) {
  .firm-intro-quote {
    font-size: 1.3em;
    /* Escala para dispositivos móviles */
  }
}

/* ==========================================
   8. ESTILOS PARA FORMULARIOS Y PÁGINA CONTACTO
   ========================================== */

/* Labels de los Campos (e-form-label-base) */
.e-form-label-base {
  font-family: var(--font-secondary);
  font-size: 0.85em;
  /* 13.6px base */
  font-weight: 600;
  color: var(--firm-navy);
  /* Azul marino profundo (#041C34) */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 1.2em;
  margin-bottom: 0.4em;
  display: block;
}

/* Inputs y Textareas Planos de Elementor Atomic (.e-form-input-base, .e-form-textarea-base) */
.e-form-input-base,
.e-form-textarea-base {
  font-family: var(--font-secondary);
  font-size: 1.0em;
  color: var(--firm-charcoal);
  /* Gris carbón (#2C3E50) */
  background-color: transparent;
  border-width: 0 0 1px 0;
  /* Solo borde inferior */
  border-style: solid;
  border-color: var(--firm-offwhite);
  /* Gris claro (#E2E8F0) */
  border-radius: 0;
  padding: 10px 0;
  width: 100%;
  box-shadow: none;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

/* Estado Focus (Activo) */
.e-form-input-base:focus,
.e-form-textarea-base:focus {
  border-color: var(--firm-gold);
  /* Cambia a dorado (#DFA944) */
  outline: none;
  background-color: rgba(244, 246, 248, 0.2);
  /* Sutil fondo gris glacial (#F4F6F8) */
}

/* Estado de Error en Inputs */
.e-form-input-base.has-error,
.e-form-textarea-base.has-error {
  border-color: #e74c3c;
  /* Borde rojo de error */
}

/* Mensajes de Error de Validación Flotantes (JS) */
.custom-field-error {
  font-family: var(--font-secondary);
  animation: fadeInField 0.3s ease-out;
}

@keyframes fadeInField {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Contenedor de Error Global de Elementor (.message-error) */
.message-error {
  background-color: rgba(231, 76, 60, 0.05);
  /* Fondo rojo ultra suave */
  border-left: 3px solid #e74c3c;
  /* Línea de acento roja */
  padding: 15px;
  margin-top: 20px;
  border-radius: 4px;
}

.message-error p,
.message-error .e-paragraph-base {
  color: #e74c3c;
  font-family: var(--font-secondary);
  font-size: 0.9em;
  font-weight: 500;
  margin: 0;
}

/* Contenedor de Éxito de Elementor (.message-success) */
.message-success {
  background-color: rgba(46, 204, 113, 0.05);
  /* Fondo verde suave */
  border-left: 3px solid #2ecc71;
  /* Línea de acento verde */
  padding: 15px;
  margin-top: 20px;
  border-radius: 4px;
}

.message-success p,
.message-success .e-paragraph-base {
  color: #27ae60;
  font-family: var(--font-secondary);
  font-size: 0.9em;
  font-weight: 500;
  margin: 0;
}

/* ==========================================
   9. MAPA DE UBICACIÓN INTERACTIVO (GRAYSCALE)
   ========================================== */

/* 
  Asigna la clase '.grayscale-map' a la caja/columna contenedora del Mapa en Elementor.
*/
.grayscale-map {
  filter: grayscale(100%) contrast(1.15) brightness(0.9);
  /* Escala de grises artística */
  transition: filter 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.grayscale-map:hover {
  filter: grayscale(0%) contrast(1) brightness(1);
  /* Retorna a color en hover */
}

/* Modificaiones adicionales*/
.firm-body.featured {
  font-size: 1.15em;
}

.main-container {
  margin-top: 170px;
  padding: 0;
}

.no-vetical-padding {
  padding-bottom: 0;
  padding-top: 0;
}

#hero-slider .elementor-slides__slide-title {
  font-family: var(--font-primary);
  font-size: 3.0em;
  /* 48px base */
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

@media (max-width: 767px) {
  #hero-slider .elementor-slides__slide-title {
    font-size: 2.25em;
    /* 36px base */
  }
}

#hero-slider .elementor-slides__slide-description {
  font-family: var(--font-secondary);
  font-size: 1.0em;
  /* 16px base */
  font-weight: 400;
  line-height: 1.7;
}

@media (max-width: 767px) {
  #hero-slider .elementor-slides__slide-description {
    font-size: 0.9375em;
    /* 15px base */
  }
}

#hero-slider .elementor-button {
  background-color: transparent;
  border: 1px solid var(--firm-gold);
  /* Dorado (#DFA944) */
  color: var(--firm-gold);
  font-family: var(--font-secondary);
  font-size: 0.875em;
  font-weight: 600;
  letter-spacing: 0.05em;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  padding: 0.8em 2.0em;
  border-radius: 4px;
  display: inline-block;
}

#hero-slider .elementor-button:hover {
  background-color: var(--firm-gold);
  /* Dorado (#DFA944) */
  color: var(--firm-navy);
  /* Azul marino profundo (#041C34) */
}