/* ==========================================================
   ESTUDIO CONTABLE YL - HOJA DE ESTILOS PRINCIPAL
   Las reglas están agrupadas por secciones:
   1. Variables de color  2. Reset universal  3. Body
   4. Navbar + menú móvil  5. Secciones del inicio
   6. Tarjetas de servicios  7. Página de contacto
   8. Página nosotros  9. Página servicios
   10. Footer  11. Formulario de contacto
   ========================================================== */

/* ----------------------------------------------------------
   1) VARIABLES GLOBALES (paleta de colores)
   Se definen en :root para reutilizarlas en todo el CSS.
   Cambiar acá un color actualiza toda la página automáticamente.
   ---------------------------------------------------------- */
:root{
  --principal: #441F3D;        /* color principal ContaLeg: ciruela/berenjena elegante */
  --acento: #C98D98;           /* color de acento ContaLeg: rosa empolvado */
  --fondo-claro: #FCF8F9;      /* fondo general del sitio limpio y luminoso */
  --fondo-rosa: #F8EDF0;       /* fondo suave de tarjetas y secciones destacadas */
  --texto: #3F2B36;            /* color del texto principal */
  --blanco: #ffffff;           /* blanco puro */
  --whatsapp: #25D366;         /* color oficial de WhatsApp para máxima familiaridad */
  --whatsapp-hover: #1EBE5D;   /* hover whatsapp */
}

/* ----------------------------------------------------------
   2) RESET UNIVERSAL
   Elimina márgenes y paddings por defecto del navegador y
   ajusta el box-sizing para que todas las cajas midan igual.
   ---------------------------------------------------------- */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html{
  scroll-behavior: smooth;
}

section[id]{
  scroll-margin-top: calc(var(--nav-height, 80px) + 20px);
}

/* ----------------------------------------------------------
   3) ESTILOS BASE DEL BODY
   ---------------------------------------------------------- */
body{
  font-family: 'Open Sans', sans-serif;   /* tipografía base del sitio */
  color: var(--texto);
  line-height: 1.7;                        /* interlineado cómodo de lectura */
  background-color: var(--fondo-claro);
  /* Padding superior para que el contenido no quede debajo de la navbar fija.
     Usa la variable --nav-height, que main.js calcula con el alto real de la
     navbar. Esto evita saltos de contenido (por ejemplo al abrir el menú móvil). */
  padding-top: var(--nav-height, 80px);
}

/* ==========================================================
   4) BARRA DE NAVEGACIÓN (navbar)
   ========================================================== */

/* Navbar fija: permanece pegada arriba al hacer scroll. */
.navbar{
  position: fixed;                       /* se mantiene fija en la parte superior */
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.94); /* fondo blanco semi-transparente */
  backdrop-filter: blur(16px);           /* efecto "vidrio esmerilado" de fondo */
  -webkit-backdrop-filter: blur(16px);   /* prefijo para navegadores WebKit */
  border-bottom: 1px solid rgba(68, 31, 61, 0.08); /* borde sutil de definición */
  box-shadow: 0 4px 25px rgba(68, 31, 61, 0.04); /* sombra suave */
  z-index: 1000;                         /* queda por encima del resto */
  /* Transición: se oculta/muestra deslizando + desvaneciendo */
  transition: transform 0.4s ease, opacity 0.4s ease;
  display: flex;                         /* marca a la izquierda, enlaces a la derecha */
  justify-content: space-between;
  align-items: center;
  padding: 12px 8%;
  opacity: 1;
}

/* Estado oculta: lo activa main.js cuando el footer entra en pantalla.
   La navbar se desliza y desvanece hacia arriba. */
.navbar.escondida{
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;   /* al estar oculta no bloquea clics en esa zona */
}

/* Marca / logo del estudio */
.navbar-brand-link{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  gap: 10px;
}

.navbar-logo{
  height: 60px;
  max-height: 60px;
  width: auto;
  display: block;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.navbar-brand-link:hover .navbar-logo{
  transform: scale(1.04);
}

.navbar-brand{
  font-family: 'Montserrat', sans-serif;
  color: var(--principal);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  margin: 0;
}

/* Contenedor de enlaces de navegación */
.nav-links{
  display: flex;
  align-items: center;
}

/* Enlaces de navegación */
.nav-links a{
  position: relative;
  margin-left: 32px;                      /* separación entre enlaces */
  text-decoration: none;
  color: var(--texto);
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.94rem;
  letter-spacing: 0.3px;
  padding: 6px 0;
  transition: color 0.3s ease;
}

/* Subrayado animado al pasar el cursor */
.nav-links a::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2.5px;
  background: var(--acento);
  border-radius: 4px;
  transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.nav-links a:hover{
  color: var(--principal);
}

.nav-links a:hover::after{
  width: 100%;
}

/* Enlace de la página activa */
.nav-links a.active{
  color: var(--principal) !important;
  font-weight: 700;
}

.nav-links a.active::after{
  width: 100%;
  background: var(--principal);
}

/* Botón hamburguesa: oculto en desktop, solo se ve en celulares (media query) */
.menu-toggle{
  display: none;
  background: none;
  border: none;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--principal);
  cursor: pointer;
  padding: 4px;
}

/* ==========================================================
   5) SECCIONES DE LA PÁGINA DE INICIO
   ========================================================== */



/* Botón principal de WhatsApp (estilo elegante, color de la marca) */
.btn-whatsapp{
  display: inline-block;
  background-color: var(--principal);
  color: var(--blanco);
  padding: 15px 32px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}
/* Hover del botón: cambia de color y se eleva levemente */
.btn-whatsapp:hover{
  background-color: var(--acento);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(109, 33, 79, 0.2);
}

/* Reglas responsive para la navbar:
   - Pantallas ≤768px: la marca y el botón hamburguesa quedan arriba,
     los enlaces se ocultan y se despliegan en columna solo si la navbar
     tiene la clase .menu-abierto (la agrega main.js). */
@media (max-width: 768px){
  .navbar{
    padding: 12px 6%;
    flex-wrap: nowrap;
  }
  .menu-toggle{ 
    display: block; /* aparece el botón ☰ */
  }
  .nav-links{
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(68, 31, 61, 0.08);
    box-shadow: 0 16px 35px rgba(68, 31, 61, 0.12);
    padding: 14px 6% 22px 6%;
    flex-direction: column;
    display: flex;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
  }
  .navbar.menu-abierto .nav-links{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
  .nav-links a{
    margin-left: 0;
    padding: 13px 8px;
    border-top: 1px solid rgba(68, 31, 61, 0.06);
    font-size: 1rem;
    display: block;
    width: 100%;
  }
  .nav-links a::after{
    display: none; /* en mobile no usamos la línea horizontal inferior */
  }
  .nav-links a.active{
    padding-left: 14px;
    border-left: 3px solid var(--principal);
    background: var(--fondo-rosa);
    border-radius: 0 10px 10px 0;
  }
}

/* ==========================================================
   6) TARJETAS DE SERVICIOS (página de inicio)
   ========================================================== */

/* Contenedor en grilla de 3 columnas */
.cards-container{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 50px auto;
  max-width: 1150px;
  text-align: left;
}

/* Tarjeta individual de servicio */
.card{
  background: var(--blanco);
  padding: 40px 32px;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(109, 33, 79, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.9);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

/* Línea superior con gradiente sutil al pasar el mouse */
.card::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--principal), var(--acento));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card:hover{
  transform: translateY(-8px);
  box-shadow: 0 22px 45px rgba(109, 33, 79, 0.12);
  border-color: rgba(195, 141, 158, 0.3);
}

.card:hover::before{
  opacity: 1;
}

/* Contenedor del ícono en la tarjeta */
.card-icon{
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: var(--fondo-rosa);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  transition: all 0.3s ease;
}

.card-icon i{
  font-size: 26px;
  color: var(--principal);
  display: flex;
  transition: transform 0.3s ease, color 0.3s ease;
}

.card:hover .card-icon{
  background: var(--principal);
  transform: scale(1.06);
}

.card:hover .card-icon i{
  color: var(--blanco);
  transform: scale(1.06);
}

/* Título de la tarjeta */
.card h3{
  font-family: 'Montserrat', sans-serif;
  color: var(--principal);
  margin-bottom: 12px;
  font-size: 1.25rem;
  font-weight: 700;
}

/* Texto de la tarjeta */
.card p{
  font-size: 0.96rem;
  color: #6e5a61;
  line-height: 1.6;
}

/* En pantallas ≤900px las tarjetas pasan a una sola columna */
@media (max-width: 900px){
  .cards-container{
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   7) PÁGINA DE CONTACTO
   ========================================================== */

/* .active: marca el enlace de la página actual en la navbar */
.active{ color: var(--acento) !important; }

/* Contenedor general de la página de contacto */
.contact-page{ padding: 60px 8%; background: var(--fondo-claro); }

/* Encabezados de sección (reutilizado en servicios y contacto) */
.contact-header{ text-align: center; margin-bottom: 50px; }
.contact-header .badge{ margin-bottom: 14px; }
.contact-header h1,
.contact-header h2{
  font-family: 'Montserrat', sans-serif;
  color: var(--principal);
  font-size: 2.3rem;
  font-weight: 800;
  line-height: 1.25;
}
.contact-header p{ color: #6e5a61; margin-top: 10px; font-size: 1.05rem; }

/* Contenedores de secciones en formato Landing Page */
.services-section{
  padding: 90px 8%;
  background: var(--fondo-rosa);
  position: relative;
  overflow: hidden;
}

.nosotros-section{
  padding: 90px 8% 40px 8%;
  background: var(--fondo-claro);
  position: relative;
  overflow: hidden;
}
.nosotros-section .about-hero{
  padding: 0 0 60px 0;
}
.nosotros-section .valores{
  padding: 0 0 40px 0;
}

.contacto-section{
  padding: 95px 8% 90px 8%;
  background: var(--fondo-rosa);
  position: relative;
  overflow: hidden;
}

/* Garantizar que el contenido interactivo quede por encima de la capa de fondo */
.services-section > *:not(.section-financial-bg),
.nosotros-section > *:not(.section-financial-bg),
.clientes-section > *:not(.section-financial-bg),
.contacto-section > *:not(.section-financial-bg){
  position: relative;
  z-index: 2;
}

/* Grilla de 2 columnas: formulario (1.5fr) + datos de contacto (1fr) */
.contact-wrapper{
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: start;
}

/* Tarjeta blanca que contiene el formulario */
.form-contacto{
  background: var(--blanco);
  padding: 42px 40px;
  border-radius: 26px;
  box-shadow: 0 14px 40px rgba(109, 33, 79, 0.07);
  border: 1px solid rgba(109, 33, 79, 0.05);
}

/* Fila que agrupa campos lado a lado (Ej: Nombre + Email) */
.form-fila{
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.form-fila .form-grupo{ flex: 1; min-width: 250px; }

/* Grupo de formulario: contenedor de una etiqueta + un campo */
.form-grupo{
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}
/* Etiqueta del campo */
.form-grupo label{
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--principal);
  font-family: 'Montserrat', sans-serif;
}
/* Inputs, select y textarea del formulario */
.form-grupo input, .form-grupo select, .form-grupo textarea{
  width: 100%;
  padding: 14px 18px;
  border: 1.5px solid rgba(195, 141, 158, 0.45);
  border-radius: 14px;
  background: #FFFBFB;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.95rem;
  color: var(--texto);
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.form-grupo input::placeholder,
.form-grupo textarea::placeholder{
  color: #b09aa1;
}
.form-grupo input:hover, .form-grupo select:hover, .form-grupo textarea:hover{
  border-color: var(--acento);
}
/* Al enfocar un campo, resplandor elegante con la paleta de la marca */
.form-grupo input:focus, .form-grupo select:focus, .form-grupo textarea:focus{
  border-color: var(--principal);
  background: #ffffff;
  box-shadow:
    0 0 0 4px rgba(195, 141, 158, 0.28),
    0 8px 22px rgba(109, 33, 79, 0.08);
}
.form-grupo input[type="file"]{
  padding: 12px 14px;
  background: var(--fondo-rosa);
  cursor: pointer;
  font-size: 0.88rem;
}
.form-grupo input[type="file"]::file-selector-button{
  background: var(--principal);
  color: var(--blanco);
  border: none;
  border-radius: 50px;
  padding: 8px 16px;
  margin-right: 12px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
}
/* Texto de ayuda (Ej: "Máx 10MB") */
.form-grupo small{ font-size: 0.8rem; opacity: 0.6; margin-top: 5px; }

/* Columna derecha con los datos de contacto en columna */
.contact-info{ display: flex; flex-direction: column; gap: 20px; }

/* Tarjeta individual de información (ubicación, horarios, etc.) */
.info-box{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--blanco);
  padding: 22px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(109, 33, 79, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.9);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.info-box::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--principal), var(--acento));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.info-box:hover{
  transform: translateY(-5px);
  box-shadow: 0 18px 38px rgba(109, 33, 79, 0.10);
  border-color: rgba(195, 141, 158, 0.3);
}
.info-box:hover::before{ opacity: 1; }
.info-box i{
  color: var(--principal);
  font-size: 20px;
  background: var(--fondo-rosa);
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.info-box:hover i{
  background: var(--principal);
  color: var(--blanco);
}
.info-box h4{ color: var(--principal); font-family: 'Montserrat', sans-serif; font-size: 1.05rem; margin-bottom: 4px; }
.info-box p{ font-size: 0.92rem; color: #6e5a61; line-height: 1.5; }

/* Botón secundario (contorno) para ir a WhatsApp */
.btn-secundario{
  text-align: center;
  padding: 14px 24px;
  border-radius: 50px;
  border: 1.5px solid var(--principal);
  color: var(--principal);
  text-decoration: none;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  margin-top: 6px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-secundario:hover{
  background: var(--principal);
  color: var(--blanco);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(109, 33, 79, 0.2);
}

/* Tarjeta con el email para envío de documentación */
.contacto-card{
  background: var(--fondo-rosa);
  border: 1px dashed var(--acento);
  border-radius: 20px;
  padding: 24px;
  text-align: center;
  margin-top: 5px;
}
.contacto-card i{
  font-size: 28px;
  color: var(--principal);
  margin-bottom: 10px;
  display: inline-block;
}
.contacto-card h4{
  color: var(--principal);
  font-family: 'Montserrat', sans-serif;
  font-size: 1.05rem;
  margin-bottom: 6px;
}
.contacto-card p{
  font-size: 0.88rem;
  color: #6e5a61;
  margin-bottom: 10px;
}
.contacto-card a{
  color: var(--principal);
  font-weight: 700;
  text-decoration: none;
  font-size: 0.92rem;
  transition: color 0.2s ease;
}
.contacto-card a:hover{
  color: var(--acento);
  text-decoration: underline;
}

/* Responsive: en ≤900px las dos columnas pasan a una sola */
@media (max-width: 900px){
  .contact-wrapper{ grid-template-columns: 1fr; }
}

/* ==========================================================
   8) PÁGINA NOSOTROS
   ========================================================== */

/* Hero de la página: texto (1.2fr) e imagen (0.8fr) lado a lado */
.about-hero{
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 50px;
  padding: 70px 8%;
  max-width: 1150px;
  margin: 0 auto;
  align-items: center;
}

/* Etiqueta tipo "pill" pequeña de color rosado con puntito pulsante */
.badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--fondo-rosa);
  color: var(--principal);
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.5px;
  border: 1px solid rgba(195, 141, 158, 0.35);
}

.badge-dot{
  width: 7px;
  height: 7px;
  background-color: var(--principal);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(109, 33, 79, 0.6);
  animation: pulseDot 2s infinite;
}

@keyframes pulseDot{
  0% { box-shadow: 0 0 0 0 rgba(109, 33, 79, 0.6); }
  70% { box-shadow: 0 0 0 6px rgba(109, 33, 79, 0); }
  100% { box-shadow: 0 0 0 0 rgba(109, 33, 79, 0); }
}

/* Título del bloque de texto */
.about-text h1{
  font-family: 'Montserrat', sans-serif;
  color: var(--principal);
  font-size: 2.5rem;
  line-height: 1.2;
  margin: 20px 0;
}
/* Párrafos del bloque de texto */
.about-text p{
  color: #6e5a61;
  margin-bottom: 15px;
  font-size: 1.05rem;
}

/* Contenedor e imagen profesional en Nosotros con logo overlay */
.about-img{
  position: relative;
  display: flex;
  justify-content: center;
}

.about-img-wrapper{
  position: relative;
  display: inline-block;
  max-width: 440px;
  width: 100%;
}

.about-foto-profesional{
  width: 100%;
  max-width: 440px;
  height: 480px;
  object-fit: cover;
  object-position: center top;
  border-radius: 30px;
  box-shadow: 0 16px 40px rgba(68, 31, 61, 0.12);
  border: 4px solid var(--blanco);
  display: block;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.about-img-wrapper:hover .about-foto-profesional{
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(68, 31, 61, 0.18);
}

/* Badge con logo oficial ContaLeg en el margen superior derecho */
.about-logo-badge{
  position: absolute;
  top: 18px;
  right: 18px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 8px 14px;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(68, 31, 61, 0.16);
  border: 1.5px solid rgba(201, 141, 152, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-logo-badge:hover{
  transform: scale(1.05);
  box-shadow: 0 14px 32px rgba(68, 31, 61, 0.22);
}

.about-badge-logo{
  height: 38px;
  width: auto;
  display: block;
}

@media (max-width: 480px){
  .about-logo-badge{
    top: 14px;
    right: 14px;
    padding: 6px 10px;
    border-radius: 14px;
  }
  .about-badge-logo{
    height: 30px;
  }
}

/* ==========================================================
   8.1) SECCIÓN MISIÓN, VISIÓN Y VALORES
   ========================================================== */
.mvv-section-block{
  padding: 10px 0 70px 0;
  max-width: 1150px;
  margin: 0 auto;
}

.mvv-header{
  text-align: center;
  max-width: 820px;
  margin: 0 auto 45px auto;
}

.mvv-header .badge{
  margin-bottom: 14px;
}

.mvv-header h2{
  font-family: 'Montserrat', sans-serif;
  font-size: 2.2rem;
  color: var(--principal);
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 12px;
}

.mvv-header p{
  font-size: 1.05rem;
  color: #634f57;
  line-height: 1.6;
}

/* Grilla de 3 tarjetas: Misión, Visión, Valores */
.mvv-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.mvv-card{
  background: var(--blanco);
  padding: 38px 30px;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(68, 31, 61, 0.05);
  border: 1px solid rgba(201, 141, 152, 0.22);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.mvv-card::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--principal), var(--acento));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mvv-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 22px 45px rgba(68, 31, 61, 0.12);
  border-color: rgba(201, 141, 152, 0.4);
}

.mvv-card:hover::before{
  opacity: 1;
}

.mvv-card-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.mvv-card .card-icon{
  margin-bottom: 0;
}

.mvv-card:hover .card-icon{
  background: var(--principal);
  transform: scale(1.06);
}

.mvv-card:hover .card-icon i{
  color: var(--blanco);
}

.mvv-card-tag{
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--principal);
  background: var(--fondo-rosa);
  padding: 5px 12px;
  border-radius: 50px;
  border: 1px solid rgba(201, 141, 152, 0.3);
}

.mvv-card h3{
  color: var(--principal);
  font-family: 'Montserrat', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 12px;
}

.mvv-card p{
  font-size: 0.98rem;
  color: #634f57;
  line-height: 1.65;
  flex-grow: 1;
}

.mvv-card .valores-intro{
  margin-bottom: 14px;
  flex-grow: 0;
}

/* Chips / Etiquetas interactivas de Valores */
.valores-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.valor-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  background: var(--fondo-rosa);
  border: 1px solid rgba(201, 141, 152, 0.35);
  border-radius: 50px;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--principal);
  transition: all 0.25s ease;
  user-select: none;
}

.valor-chip i{
  font-size: 0.72rem;
  color: var(--principal);
  transition: color 0.25s ease, transform 0.25s ease;
}

.valor-chip:hover{
  background: var(--principal);
  color: var(--blanco);
  border-color: var(--principal);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(68, 31, 61, 0.18);
}

.valor-chip:hover i{
  color: var(--blanco);
  transform: scale(1.1);
}

/* ==========================================================
   8.2) PILARES DE ATENCIÓN (adaptación de las tarjetas previas)
   ========================================================== */
.pilares-section-block{
  padding: 50px 0 20px 0;
  max-width: 1150px;
  margin: 0 auto;
  border-top: 1px dashed rgba(201, 141, 152, 0.35);
}

.pilares-header{
  text-align: center;
  max-width: 820px;
  margin: 0 auto 38px auto;
}

.pilares-header .badge{
  margin-bottom: 14px;
}

.pilares-header h3{
  font-family: 'Montserrat', sans-serif;
  font-size: 1.85rem;
  color: var(--principal);
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 10px;
}

.pilares-header p{
  font-size: 1rem;
  color: #634f57;
  line-height: 1.6;
}

.pilares-section-block .valores{
  padding: 0;
}

/* Grilla de los 3 pilares de atención */
.valores{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding: 30px 8% 85px 8%;
  max-width: 1150px;
  margin: 0 auto;
}

/* Tarjeta de cada valor */
.valor{
  background: var(--blanco);
  padding: 40px 30px;
  border-radius: 24px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(109, 33, 79, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.9);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.valor::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--principal), var(--acento));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.valor:hover{
  transform: translateY(-8px);
  box-shadow: 0 22px 45px rgba(109, 33, 79, 0.12);
  border-color: rgba(195, 141, 158, 0.3);
}

.valor:hover::before{
  opacity: 1;
}

.valor .card-icon{
  margin: 0 auto 22px auto;
}
.valor:hover .card-icon{
  background: var(--principal);
  transform: scale(1.06);
}
.valor:hover .card-icon i{
  color: var(--blanco);
}

.valor h3{
  color: var(--principal);
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 12px;
  font-size: 1.25rem;
  font-weight: 700;
}
.valor p{
  font-size: 0.95rem;
  color: #6e5a61;
  line-height: 1.6;
}

/* Llamado a la acción final (fondo del color principal con degradé) */
.cta-final{
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--principal) 0%, #4a1334 100%);
  color: var(--blanco);
  text-align: center;
  padding: 80px 8%;
  border-radius: 40px 40px 0 0;
  box-shadow: 0 -10px 30px rgba(109, 33, 79, 0.1);
}
.cta-final::before,
.cta-final::after{
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.cta-final::before{
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(255,255,255,0.16) 0%, transparent 70%);
  top: -90px;
  right: -40px;
}
.cta-final::after{
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(195, 141, 158, 0.35) 0%, transparent 70%);
  bottom: -80px;
  left: -30px;
}
.cta-final-inner{
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
}
.cta-final--inset{
  margin-top: 50px;
  border-radius: 40px;
  box-shadow: 0 18px 40px rgba(109, 33, 79, 0.18);
}
.cta-final h2{
  font-family: 'Montserrat', sans-serif;
  font-size: 2.2rem;
  margin-bottom: 12px;
  letter-spacing: -0.3px;
}
.cta-final p{
  opacity: 0.88;
  margin-bottom: 28px;
  font-size: 1.05rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
/* Botón dentro del cta: invertido (fondo blanco, texto del color principal) */
.cta-final .btn-whatsapp{
  background: var(--blanco);
  color: var(--principal);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.cta-final .btn-whatsapp:hover{
  background: var(--fondo-rosa);
  color: var(--principal);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

/* Responsive: en ≤900px el hero, mvv y los valores pasan a 1 columna */
@media (max-width: 900px){
  .about-hero{ grid-template-columns: 1fr; }
  .mvv-grid{ grid-template-columns: 1fr; }
  .valores{ grid-template-columns: 1fr; }
}

@media (max-width: 600px){
  .mvv-card{ padding: 28px 20px; }
  .mvv-header h2{ font-size: 1.8rem; }
  .pilares-header h3{ font-size: 1.55rem; }
}

/* ==========================================================
   9) PÁGINA DE SERVICIOS (detalle)
   ========================================================== */

/* Contenedor general de la página de servicios */
.services-page{ padding: 60px 8%; background: var(--fondo-claro); }

/* Lista de servicios apilados en columna */
.services-detailed{
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Fila de un servicio: ícono + contenido */
.service-row{
  display: grid;
  grid-template-columns: 85px 1fr;
  gap: 35px;
  background: var(--blanco);
  padding: 45px 40px;
  border-radius: 28px;
  box-shadow: 0 10px 35px rgba(109, 33, 79, 0.05);
  border: 1px solid rgba(109, 33, 79, 0.04);
  align-items: start;
  position: relative;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-row::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(180deg, var(--principal), var(--acento));
  opacity: 0.55;
}
.service-row:hover{
  transform: translateY(-5px);
  box-shadow: 0 20px 45px rgba(109, 33, 79, 0.10);
}

/* Variante "reverse": la fila se invierte y usa fondo del color principal con degradé */
.service-row.reverse{
  background: linear-gradient(135deg, var(--principal) 0%, #54173c 100%);
  color: var(--blanco);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.service-row.reverse::before{
  background: linear-gradient(180deg, var(--acento), #ffffff);
  opacity: 0.85;
}
.service-row.reverse h3{ color: var(--blanco); }
.service-row.reverse p{ color: #fdf6f0; opacity: 0.92; }
.service-row.reverse .service-icon{
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.service-row.reverse .service-icon i{ color: var(--blanco); }

/* Cuadro contenedor del ícono del servicio */
.service-icon{
  width: 75px;
  height: 75px;
  background: var(--fondo-rosa);
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}
.service-row:hover .service-icon{
  transform: scale(1.05);
}
.service-icon i{ font-size: 30px; color: var(--principal); }

/* Título del servicio */
.service-content h3{
  font-family: 'Montserrat', sans-serif;
  font-size: 1.55rem;
  color: var(--principal);
  margin-bottom: 12px;
  font-weight: 700;
}
.service-content p{
  color: #6e5a61;
  margin-bottom: 20px;
  font-size: 1.02rem;
  line-height: 1.65;
}

/* Lista de prestaciones del servicio */
.service-content ul{
  list-style: none;
  margin-bottom: 24px;
}
.service-content ul li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 0.96rem;
  color: #4A3C40;
  line-height: 1.55;
}
.check-icon{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--fondo-rosa);
  color: var(--principal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  box-shadow: 0 2px 8px rgba(109, 33, 79, 0.08);
}
.check-icon i{
  font-size: 0.62rem;
}
.service-row.reverse .service-content ul li{
  color: #fdf6f0;
  opacity: 0.95;
}
.service-row.reverse .check-icon{
  background: rgba(255, 255, 255, 0.18);
  color: var(--blanco);
  box-shadow: none;
}

/* Enlace tipo botón "Consultar por este servicio" */
.link-servicio{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--principal);
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  padding: 11px 22px;
  background: var(--fondo-rosa);
  border-radius: 50px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(195, 141, 158, 0.3);
  margin-top: 5px;
}
.link-servicio i{
  font-size: 0.75rem;
  transition: transform 0.3s ease;
}
.link-servicio:hover{
  background: var(--principal);
  color: var(--blanco);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(109, 33, 79, 0.22);
}
.link-servicio:hover i{
  transform: translateX(4px);
}
.service-row.reverse .link-servicio{
  background: rgba(255, 255, 255, 0.15);
  color: var(--blanco);
  border-color: rgba(255, 255, 255, 0.3);
}
.service-row.reverse .link-servicio:hover{
  background: var(--blanco);
  color: var(--principal);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Responsive: en ≤768px la fila del servicio pasa a 1 columna */
@media (max-width: 768px){
  .service-row{ grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------
   SECCIÓN BIENVENIDA (hero de la página de inicio)
   ---------------------------------------------------------- */
.bienvenidos{
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 85px 8%;
}

/* Contenedor central del Hero */
.bienvenidos-container{
  max-width: 1250px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 2;
}

/* Capa de fondo animada: Atmósfera y símbolos financieros */
.hero-financial-bg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* Orbes de luz y profundidad (bokeh contable) */
.fin-glow{
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(50px);
}
.fin-glow-1{
  width: 480px;
  height: 480px;
  top: -120px;
  left: -80px;
  background: radial-gradient(circle, rgba(201, 141, 152, 0.22) 0%, rgba(201, 141, 152, 0) 70%);
  animation: pulseGlow 10s ease-in-out infinite alternate;
}
.fin-glow-2{
  width: 520px;
  height: 520px;
  bottom: -100px;
  right: -60px;
  background: radial-gradient(circle, rgba(68, 31, 61, 0.14) 0%, rgba(68, 31, 61, 0) 70%);
  animation: pulseGlow 13s ease-in-out infinite alternate-reverse;
}

/* Símbolos contables flotantes (watermark) */
.floating-symbol{
  position: absolute;
  user-select: none;
  pointer-events: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sym-percent{
  font-size: 3.4rem;
  color: rgba(68, 31, 61, 0.08);
}

.sym-currency{
  font-size: 4.2rem;
  color: rgba(201, 141, 152, 0.22);
}

.sym-plus{
  font-size: 2.8rem;
  color: rgba(68, 31, 61, 0.09);
}

.sym-calc{
  font-size: 2rem;
  color: rgba(201, 141, 152, 0.25);
}

.sym-balance{
  font-size: 2.2rem;
  color: rgba(68, 31, 61, 0.10);
}

.sym-chart{
  font-size: 2.5rem;
  color: rgba(201, 141, 152, 0.22);
}

.sym-trend{
  font-size: 1.9rem;
  color: rgba(68, 31, 61, 0.09);
}

.sym-coins{
  font-size: 2.1rem;
  color: rgba(68, 31, 61, 0.10);
}

/* Tarjetas y widgets flotantes de finanzas (Glassmorphism) */
.floating-fin-card{
  position: absolute;
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(201, 141, 152, 0.35);
  border-radius: 18px;
  padding: 9px 16px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 28px rgba(68, 31, 61, 0.09);
  z-index: 3;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.floating-fin-card:hover{
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 16px 36px rgba(68, 31, 61, 0.15);
}

.fin-card-metrics{
  top: 25px;
  right: 3.5%;
  animation: floatCard1 6s ease-in-out infinite;
}

.fin-card-icon{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--fondo-rosa);
  color: var(--principal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}

.fin-card-info{
  display: flex;
  flex-direction: column;
}

.fin-card-num{
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--principal);
  line-height: 1.15;
}

.fin-card-lbl{
  font-size: 0.74rem;
  color: #6e5a61;
  line-height: 1.2;
}

/* Capa de fondo animada reutilizable para todas las secciones */
.section-financial-bg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* Orbes de resplandor para secciones */
.fin-glow-top-right{
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(50px);
  width: 450px;
  height: 450px;
  top: -100px;
  right: -80px;
  background: radial-gradient(circle, rgba(201, 141, 152, 0.16) 0%, rgba(201, 141, 152, 0) 70%);
  animation: pulseGlow 11s ease-in-out infinite alternate;
}

.fin-glow-bot-left{
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(50px);
  width: 480px;
  height: 480px;
  bottom: -120px;
  left: -100px;
  background: radial-gradient(circle, rgba(68, 31, 61, 0.10) 0%, rgba(68, 31, 61, 0) 70%);
  animation: pulseGlow 14s ease-in-out infinite alternate-reverse;
}

/* Clases utilitarias de posición para símbolos flotantes en secciones */
.sym-pos-top-left{ top: 10%; left: 3.5%; }
.sym-pos-top-right{ top: 12%; right: 4%; }
.sym-pos-mid-left{ top: 48%; left: 2.5%; }
.sym-pos-mid-right{ top: 50%; right: 3%; }
.sym-pos-bot-left{ bottom: 10%; left: 3.5%; }
.sym-pos-bot-right{ bottom: 12%; right: 4%; }

/* Distribución en los bordes extremos del viewport (ancho completo 100vw) */
.sym-edge-left-1{ top: 14%; left: 2%; }
.sym-edge-left-2{ top: 48%; left: 2.4%; }
.sym-edge-left-3{ bottom: 12%; left: 2%; }

.sym-edge-right-1{ top: 16%; right: 2%; }
.sym-edge-right-2{ top: 50%; right: 2.2%; }
.sym-edge-right-3{ bottom: 14%; right: 2%; }

.sym-inner-left{ top: 22%; left: 16%; }
.sym-inner-mid{ bottom: 10%; left: 45%; }
.sym-inner-right{ top: 12%; right: 18%; }

/* Widget flotante de sección */
.fin-card-section-badge{
  position: absolute;
  top: 36px;
  right: 3.5%;
  z-index: 3;
  animation: floatCard1 6.5s ease-in-out infinite;
}

@media (max-width: 1200px){
  .fin-card-section-badge,
  .fin-card-metrics{
    transform: scale(0.88);
    transform-origin: right top;
  }
}

@media (max-width: 992px){
  .fin-card-section-badge,
  .fin-card-metrics,
  .floating-fin-card{
    display: none !important;
  }
}

/* Clases utilitarias de tamaño */
.sym-size-sm{ font-size: 1.85rem; }
.sym-size-md{ font-size: 2.5rem; }
.sym-size-lg{ font-size: 3.8rem; }

/* Clases utilitarias de color */
.sym-color-plum{ color: rgba(68, 31, 61, 0.08); }
.sym-color-accent{ color: rgba(201, 141, 152, 0.22); }

/* Clases utilitarias de animación */
.anim-float-slow{ animation: floatSlow 7.5s ease-in-out infinite; }
.anim-float-medium{ animation: floatMedium 8.5s ease-in-out infinite; }
.anim-float-drift{ animation: floatDrift 9.5s ease-in-out infinite; }

/* Keyframes para micro-animaciones flotantes */
@keyframes floatSlow{
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(4deg); }
}

@keyframes floatMedium{
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-22px) translateX(8px); }
}

@keyframes floatDrift{
  0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); }
  50% { transform: translateY(-12px) translateX(-10px) rotate(-5deg); }
}

@keyframes floatCard1{
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes floatCard2{
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes pulseGlow{
  0% { transform: scale(1); opacity: 0.75; }
  100% { transform: scale(1.18); opacity: 1; }
}

.bienvenidos-text,
.bienvenidos-img{
  position: relative;
  z-index: 2;
}

/* Título del texto de bienvenida */
.bienvenidos-text h1,
.bienvenidos-text h2{
  font-family: 'Montserrat', sans-serif;
  color: var(--principal);
  font-size: 2.7rem;
  line-height: 1.18;
  margin: 20px 0 20px 0;
  letter-spacing: -0.5px;
}
/* Párrafos del texto de bienvenida */
.bienvenidos-text p{
  color: #5d4a51;
  margin-bottom: 30px;
  font-size: 1.06rem;
  line-height: 1.75;
}

/* Contenedor de botones de acción en el Hero */
.hero-actions{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Botón principal del hero */
.btn-hero-primary{
  display: inline-block;
  background-color: var(--principal);
  color: var(--blanco);
  padding: 15px 30px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.4px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 22px rgba(109, 33, 79, 0.22);
}
.btn-hero-primary:hover{
  background-color: var(--acento);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(109, 33, 79, 0.28);
}

/* Botón secundario del hero */
.btn-hero-secondary{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--principal);
  text-decoration: none;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  padding: 15px 22px;
  border-radius: 50px;
  transition: all 0.3s ease;
}
.btn-hero-secondary i{
  transition: transform 0.3s ease;
}
.btn-hero-secondary:hover{
  color: var(--acento);
}
.btn-hero-secondary:hover i{
  transform: translateX(4px);
}

/* Contenedor de la imagen del hero */
.bienvenidos-img{
  position: relative;
}
.bienvenidos-img img{
  width: 100%;
  height: 440px;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: 0 20px 45px rgba(109, 33, 79, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.85);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
}
.bienvenidos-img:hover img{
  transform: translateY(-4px);
  box-shadow: 0 26px 55px rgba(109, 33, 79, 0.18);
}

/* Badge flotante sobre la imagen del hero */
.img-badge-floating{
  position: absolute;
  bottom: 24px;
  left: 20px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 12px 20px;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(109, 33, 79, 0.14);
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  animation: floatBadge 4s ease-in-out infinite;
}
.img-badge-floating i{
  font-size: 20px;
  color: var(--principal);
  background: var(--fondo-rosa);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}
.img-badge-floating strong{
  display: block;
  font-family: 'Montserrat', sans-serif;
  color: var(--principal);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.2;
}
.img-badge-floating p{
  margin: 0;
  font-size: 0.78rem;
  color: #6e5a61;
}

@keyframes floatBadge{
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Responsive: en ≤900px el hero queda en 1 columna */
@media (max-width: 900px){
  .bienvenidos{ padding: 60px 6%; }
  .bienvenidos-container{ grid-template-columns: 1fr; gap: 40px; }
  .bienvenidos-text h1,
  .bienvenidos-text h2{ font-size: 2.1rem; }
  .bienvenidos-img img{ height: 320px; }
  .img-badge-floating{ bottom: 16px; left: 16px; padding: 10px 16px; }
  .floating-fin-card{ display: none; }
}

/* ==========================================================
   10) PIE DE PÁGINA (footer)
   ========================================================== */

/* Pie de página con fondo del color principal */
footer{
  background: linear-gradient(180deg, var(--principal) 0%, #4a1334 100%);
  color: var(--fondo-claro);
  padding: 64px 8% 22px 8%;
  margin-top: 80px;
}

/* Distribuye marca, contacto y redes */
.footer-contenido{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 36px;
  max-width: 1250px;
  margin: 0 auto;
}

.footer-marca h3{
  font-family: 'Montserrat', sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
}
.footer-marca p{
  font-size: 0.95rem;
  opacity: 0.82;
  font-family: 'Open Sans', sans-serif;
  letter-spacing: 0.2px;
}

.footer-label{
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  margin-bottom: 14px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-size: 0.75rem;
  opacity: 0.72;
}

.footer-mail{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fondo-claro);
  text-decoration: none;
  font-size: 0.92rem;
  font-family: 'Open Sans', sans-serif;
  opacity: 0.92;
  transition: color 0.25s ease, opacity 0.25s ease;
}
.footer-mail i{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}
.footer-mail:hover{
  color: var(--acento);
  opacity: 1;
}

.redes-iconos{
  display: flex;
  gap: 12px;
}

.redes-iconos a{
  width: 42px;
  height: 42px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blanco);
  text-decoration: none;
  transition: all 0.3s ease;
}
.redes-iconos a:hover{
  background: var(--acento);
  border-color: var(--acento);
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.18);
}

.footer-copy{
  border-top: 1px solid rgba(255,255,255,0.14);
  margin-top: 44px;
  padding-top: 22px;
  font-size: 0.82rem;
  letter-spacing: 0.3px;
  font-family: 'Open Sans', sans-serif;
}

.footer-copy-inner{
  max-width: 1250px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-copy-legal{
  margin: 0;
  opacity: 0.72;
}

.footer-credito-dev{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  opacity: 0.85;
  transition: opacity 0.25s ease;
}

.footer-credito-dev:hover{
  opacity: 1;
}

.footer-credito-dev span{
  font-size: 0.80rem;
  opacity: 0.82;
  color: var(--fondo-claro);
}

.link-lgdigital{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.link-lgdigital:hover{
  transform: translateY(-2px) scale(1.04);
}

.logo-lgdigital{
  height: 25px;
  width: auto;
  display: block;
  transition: filter 0.25s ease;
}

.link-lgdigital:hover .logo-lgdigital{
  filter: drop-shadow(0 2px 10px rgba(201, 141, 152, 0.5));
}

@media (max-width: 768px){
  .footer-contenido{
    flex-direction: column;
    gap: 28px;
  }
  .footer-copy-inner{
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 14px;
  }
}

/* ==========================================================
   11) BOTÓN Y MENSAJE DEL FORMULARIO
   ========================================================== */

/* Botón "Enviar consulta" del formulario de contacto */
.btn-enviar{
  background: var(--principal);
  color: var(--blanco);
  border: none;
  padding: 16px 30px;
  border-radius: 50px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.3s;
  width: 100%;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 8px 20px rgba(109, 33, 79, 0.18);
}
.btn-enviar:hover{
  background: var(--acento);
  transform: translateY(-2px);
}
.btn-enviar:disabled{
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

/* Mensaje de confirmación que muestra main.js tras enviar el formulario */
.form-mensaje{
  margin-top: 15px;
  text-align: center;
  font-weight: 600;
}

/* Nota de privacidad y confidencialidad */
.form-privacidad{
  margin-top: 16px;
  font-size: 0.8rem;
  color: #7b656d;
  text-align: center;
  line-height: 1.45;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.form-privacidad i{
  color: var(--principal);
  font-size: 0.9rem;
  flex-shrink: 0;
}

/* ==========================================================
   12) SECCIÓN DE CLIENTES & CREDIBILIDAD
   Construye un concepto sólido de confianza, compromiso y trabajo.
   ========================================================== */

.clientes-section{
  padding: 95px 8% 85px 8%;
  background: linear-gradient(180deg, var(--fondo-claro) 0%, #FBF3F6 100%);
  position: relative;
  overflow: hidden;
}

.clientes-header{
  text-align: center;
  max-width: 820px;
  margin: 0 auto 50px auto;
}

.clientes-header .badge{
  margin-bottom: 16px;
}

.clientes-header h2{
  font-family: 'Montserrat', sans-serif;
  font-size: 2.3rem;
  color: var(--principal);
  line-height: 1.25;
  margin-bottom: 15px;
  font-weight: 800;
}

.clientes-header p{
  font-size: 1.05rem;
  color: #634f57;
  line-height: 1.6;
}

/* Barra de métricas de credibilidad y compromiso */
.credibilidad-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1150px;
  margin: 0 auto 55px auto;
}

.stat-box{
  background: var(--blanco);
  padding: 26px 22px;
  border-radius: 20px;
  text-align: center;
  border: 1px solid rgba(201, 141, 152, 0.25);
  box-shadow: 0 8px 25px rgba(68, 31, 61, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-box:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(68, 31, 61, 0.08);
}

.stat-icon{
  width: 52px;
  height: 52px;
  margin: 0 auto 12px auto;
  border-radius: 14px;
  background: var(--fondo-rosa);
  color: var(--principal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.stat-box h4{
  font-family: 'Montserrat', sans-serif;
  font-size: 1.35rem;
  color: var(--principal);
  font-weight: 800;
  margin-bottom: 4px;
}

.stat-box p{
  font-size: 0.9rem;
  color: #6e5a61;
  margin: 0;
  line-height: 1.4;
}

/* Grilla de tarjetas de clientes */
.clientes-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1150px;
  margin: 0 auto;
}

.cliente-card{
  background: var(--blanco);
  border-radius: 24px;
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 30px rgba(68, 31, 61, 0.05);
  position: relative;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.cliente-card::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--principal), var(--acento));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cliente-card:hover{
  transform: translateY(-7px);
  box-shadow: 0 20px 42px rgba(68, 31, 61, 0.11);
  border-color: rgba(201, 141, 152, 0.35);
}

.cliente-card:hover::before{
  opacity: 1;
}

.cliente-meta{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.cliente-tag{
  font-family: 'Montserrat', sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 4px 12px;
  border-radius: 50px;
  background: var(--fondo-rosa);
  color: var(--principal);
}

.cliente-rating{
  color: #f59e0b;
  font-size: 0.85rem;
  display: flex;
  gap: 2px;
}

.cliente-servicio-badge{
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--principal);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cliente-servicio-badge i{
  color: var(--acento);
  font-size: 0.95rem;
}

.cliente-quote{
  font-size: 0.96rem;
  line-height: 1.65;
  color: #554149;
  font-style: italic;
  margin-bottom: 24px;
  position: relative;
  flex-grow: 1;
}

.cliente-autor{
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(68, 31, 61, 0.08);
}

.cliente-avatar{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--principal), #6a2e5f);
  color: var(--blanco);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(68, 31, 61, 0.2);
}

.cliente-datos h5{
  font-family: 'Montserrat', sans-serif;
  font-size: 0.98rem;
  color: var(--principal);
  font-weight: 700;
  margin: 0;
}

.cliente-datos span{
  font-size: 0.82rem;
  color: #7b656d;
  display: block;
}

/* Responsivo para la sección de clientes */
@media (max-width: 980px){
  .credibilidad-stats{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .clientes-grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .clientes-header h2{
    font-size: 1.9rem;
  }
}

/* ==========================================================
   13) BOTÓN FLOTANTE DE WHATSAPP (PALETA CORPORATIVA)
   Diseñado en ciruela profundo y rosa empolvado para armonía visual.
   ========================================================== */
.whatsapp-fab-container{
  position: fixed;
  bottom: 26px;
  right: 26px;
  z-index: 990;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
}

.whatsapp-fab-container.escondido{
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  pointer-events: none;
}

.whatsapp-fab-btn{
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--principal) 0%, #5a204d 100%);
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 28px;
  box-shadow: 0 10px 28px rgba(68, 31, 61, 0.28);
  border: 2px solid rgba(255, 255, 255, 0.85);
  position: relative;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.whatsapp-fab-btn:hover{
  background: linear-gradient(135deg, #5a204d 0%, var(--principal) 100%);
  transform: scale(1.08) translateY(-3px);
  box-shadow: 0 14px 34px rgba(68, 31, 61, 0.35);
  border-color: var(--acento);
  color: var(--blanco);
}

/* Aura pulsante suave en color rosa empolvado (acento) */
.whatsapp-fab-pulse{
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  border: 2px solid var(--acento);
  opacity: 0;
  pointer-events: none;
  animation: pulseFabAura 2.8s infinite;
}

@keyframes pulseFabAura{
  0% { transform: scale(0.95); opacity: 0.85; }
  60% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* Tooltip / Mensaje contextual emergente */
.whatsapp-fab-tooltip{
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(201, 141, 152, 0.35);
  border-radius: 50px;
  padding: 10px 18px 10px 20px;
  color: var(--texto);
  font-size: 0.88rem;
  box-shadow: 0 8px 24px rgba(68, 31, 61, 0.12);
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  animation: floatTooltip 4s ease-in-out infinite;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.whatsapp-fab-tooltip strong{
  color: var(--principal);
}

.whatsapp-fab-tooltip .tooltip-close{
  background: none;
  border: none;
  color: #999;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.2s ease;
}

.whatsapp-fab-tooltip .tooltip-close:hover{
  color: var(--principal);
}

@keyframes floatTooltip{
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@media (max-width: 768px){
  .whatsapp-fab-container{
    bottom: 20px;
    right: 20px;
  }
  .whatsapp-fab-btn{
    width: 54px;
    height: 54px;
    font-size: 26px;
  }
  .whatsapp-fab-tooltip{
    display: none; /* En pantallas pequeñas mantenemos solo el botón limpio sin tapar texto */
  }
}