/*
  Estilos principales para el sitio web de Blanes Gestión Privada, S.L.
  Se utilizan variables CSS para facilitar la personalización de colores y se implementa
  una maquetación flexible y responsive que se adapta a dispositivos móviles.
*/

:root {
  /*
    Ajustamos el tono corporativo principal a un azul más sobrio (24324b)
    para unificar la paleta cromática y proporcionar mejor contraste
    con el resto de elementos. Esta variable se aplica en múltiples
    lugares como títulos, fondos oscuros y botones.
  */
  --primary-color: #24324b;       /* Azul corporativo actualizado */
  --secondary-color: #b19b54;     /* Oro corporativo */
  --light-background: #f5f5f5;    /* Fondo claro para secciones alternas */
  --dark-text: #333333;           /* Color de texto oscuro */
  --card-decor-color: #f2f2f2;   /* Color suave para decoraciones */
}

/* Reset básico */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  color: var(--dark-text);
  background-color: white;
}

/*
  Añadimos un relleno superior al desplazamiento de ancla para que cuando
  el usuario haga clic en un enlace del menú, el encabezado fijo no
  tape el comienzo de la sección. También habilitamos el desplazamiento
  suave entre secciones.
*/
html {
  /* Mantenemos un espacio suficiente al anclar los enlaces para que el contenido
     no quede oculto por el encabezado fijo. Aumentamos a 7rem para dejar un
     margen adicional y asegurar que los títulos queden visibles. */
  scroll-padding-top: 7rem;
  scroll-behavior: smooth;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Cabecera y navegación */
header {
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3rem 0;
}

.logo {
  height: 50px;
  width: auto;
  margin-bottom: -0.6rem;
}

.nav-list {
  list-style: none;
  display: flex;
  gap: 1rem;
}

.nav-list a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

.nav-list a:hover {
  color: var(--secondary-color);
}

/* Sección hero con imagen de fondo */
.hero {
  background-image: url('ae4c8d42-3339-4fef-ace0-56ff9553525a.jpg');
  background-size: cover;
  /* Alineamos la imagen hacia la derecha para dar más protagonismo al texto */
  background-position: right;
  color: #ffffff;
  height: 60vh;
  display: flex;
  align-items: center;
  position: relative;
}

/* Capa oscura para mejorar la legibilidad del texto sobre la imagen */
/*
  Capa oscura para mejorar la legibilidad del texto sobre la imagen
  Utilizamos un tono azulado en lugar de negro para alinearnos con la
  identidad visual de Blanes Gestión Privada. El color se deriva del
  azul corporativo con una opacidad media.
*/
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Capa con tono azul oscuro (casi negro) para mejorar la legibilidad del texto
     pero alineado con el color corporativo; utilizamos un valor medio de opacidad */
  background: rgba(0, 0, 35, 0.5);
}

.hero-text {
  position: relative;
  z-index: 1;
  text-align: left;
}

.hero h1 {
  font-size: 2.2rem;
  line-height: 2.8rem;
  margin-bottom: 0.5rem;
  color: #ffffff;
}

.hero p {
  font-size: 1.25rem;
  line-height: 1.2rem;
  margin-bottom: 1.2rem;
  color: #f2f2f2;
}

.btn {
  display: inline-block;
  background-color: var(--secondary-color);
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: #9f8a4b; /* tono ligeramente más oscuro para el hover */
}

/* Sección sobre nosotros */
.about {
  /* Se amplía el bloque de sobre nosotros a lo ancho de la pantalla y se
     establece un color de fondo claro. */
  padding: 4rem 0;
  width: 100%;
  background-color: var(--light-background);
}

/* Contenedor interno de la sección sobre nosotros.
   Se usa para restringir el ancho del contenido y añadir
   relleno interno y estilo de tarjeta. */
.about-content {
  background-color: #ffffff;
  padding: 2rem;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  /*
    Ajustamos el ancho del bloque de sobre nosotros al 90 % de la sección con un límite
    máximo de 1200 px y lo centramos horizontalmente. Esto proporciona márgenes a ambos
    lados y un aspecto más equilibrado en pantallas anchas.
  */
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.about-content h2 {
  color: var(--primary-color);
  margin-bottom: 1rem;
  font-size: 2rem;
}

/*
  Estructura de dos columnas para la sección de sobre nosotros. Utilizamos flexbox para
  distribuir el contenido en dos columnas en pantallas grandes y una columna en
  dispositivos móviles. Cada columna se adapta al ancho disponible gracias a la
  propiedad flex-basis. El gap proporciona espacio entre ambas columnas.
*/
.about-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.about-col {
  flex: 1 1 calc(50% - 1rem);
  display: flex;
  flex-direction: column;
}
@media (max-width: 768px) {
  .about-col {
    flex: 1 1 100%;
  }
}

.about-content p {
  /* Eliminamos el límite de anchura para permitir que el texto se extienda
     por todo el ancho del contenedor. Alineamos el texto con line-height
     adecuado y separamos con margen inferior. */
  max-width: none;
  line-height: 1.6;
  color: var(--dark-text);
  margin-bottom: 1rem;
}

/* Sección servicios */
.services {
  padding: 4rem 0;
  background-color: var(--light-background);
}

.services h2 {
  color: var(--primary-color);
  margin-bottom: 2rem;
  font-size: 2rem;
  text-align: center;
}

.service-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

.service {
  background-color: #ffffff;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  flex: 1 1 calc(33.333% - 2rem);
  display: flex;
  flex-direction: column;

  /* Preparamos el contenedor para elementos decorativos */
  position: relative;
}

.service img {
  width: 100%;
  height: 180px;
  object-fit: contain;
  padding: 1rem;

  /* Aseguramos que el contenido se sitúe por encima de los elementos decorativos */
  position: relative;
  z-index: 1;
}

.service h3 {
  padding: 1rem;
  margin: 0;
  color: var(--primary-color);
  font-size: 1.3rem;

  /* Aseguramos que el texto esté por encima de la decoración */
  position: relative;
  z-index: 1;
}

.service p {
  padding: 0 1rem 1rem 1rem;
  flex-grow: 1;
  color: var(--dark-text);

  /* Aseguramos que el texto esté por encima de la decoración */
  position: relative;
  z-index: 1;
}

/* Elementos decorativos para las tarjetas de servicio */
.service::before {
  content: "B";
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 6rem;
  font-weight: 700;
  color: var(--card-decor-color);
  line-height: 1;
  z-index: 0;
  pointer-events: none;
}
/*
  Elemento decorativo en la esquina inferior derecha de cada tarjeta de servicio.
  Mostramos el texto “GESTION PRIVADA” en un bloque rotado que actúa como
  marca de agua. El diseño se mantiene sutil gracias a un fondo azul claro
  y el texto blanco, y está situado parcialmente fuera de la tarjeta para
  no interferir con el contenido principal. La propiedad pointer-events
  asegura que el elemento no interfiere en la interacción del usuario.
*/
.service::after {
  content: "GESTION PRIVADA";
  position: absolute;
  bottom: -1rem;
  right: -7rem;
  width: 6rem;
  height: 6rem;
  background-color: #e6f1fd;
  color: #ffffff;
  padding: 0rem 5rem;
  transform: rotate(-46deg);
  z-index: 0;
  pointer-events: none;
}

/* Sección contacto */
.contact {
  padding: 4rem 0;
  background-color: var(--primary-color);
  color: #ffffff;
}

.contact h2 {
  color: #ffffff;
  margin-bottom: 1rem;
  font-size: 2rem;
}

.contact p {
  margin-bottom: 1.5rem;
  max-width: 600px;
}

.contact-info {
  list-style: none;
  padding: 0;
}

.contact-info li {
  margin-bottom: 0.5rem;
}

.contact-info a {
  color: var(--secondary-color);
  text-decoration: none;
}

.contact-info a:hover {
  text-decoration: underline;
}

/* Tarjetas de contacto: agrupamos la información y el formulario en cuadros claros
   con bordes redondeados, sombra suave y un fondo blanco para destacar sobre
   el fondo oscuro de la sección de contacto. Aplicamos relleno interno para
   separar el contenido de los bordes y dejamos que el texto herede el color
   oscuro global. */
.contact-card {
  background-color: #ffffff;
  color: var(--dark-text);
  border-radius: 6px;
  padding: 2rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Ajustamos la disposición de la lista de contacto para que los iconos y
   textos se alineen horizontalmente con un pequeño espacio entre ellos. */
.contact-info {
  list-style: none;
  padding-left: 0;
}
.contact-info li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  color: var(--dark-text);
}
/* Configuración de iconos dentro de la lista de contacto */
.contact-info .icon {
  /* Iconos más pequeños y alineados con el texto */
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
  color: var(--primary-color);
  /* Alineamos verticalmente con el texto para evitar que sobresalgan */
  display: inline-block;
}

/* Aseguramos que los enlaces dentro de la tarjeta de contacto utilicen
   el color corporativo secundario y muestren subrayado al pasar el ratón. */
.contact-card a {
  color: var(--secondary-color);
  text-decoration: none;
}
.contact-card a:hover {
  text-decoration: underline;
}

/* Modificamos el botón de envío dentro del formulario para que use las
   mismas propiedades que las demás llamadas a la acción (btn). Eliminamos
   la alineación específica y permitimos que se centre con el contenedor
   flex. */
.contact-form .btn {
  margin-top: 0.5rem;
}

/* Pie de página */
footer {
  /* Cambiamos el fondo del pie de página a un azul menos saturado según
     lo solicitado para mejorar la armonía visual del sitio. */
  background-color: #283a5a;
  color: #ffffff;
  padding: 1rem 0;
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

footer p {
  margin: 0.5rem 0;
}

.footer-links {
  list-style: none;
  display: flex;
  gap: 1rem;
}

.footer-links a {
  color: var(--secondary-color);
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

/* Responsividad */
@media (max-width: 768px) {
  .nav-list {
    flex-direction: column;
    gap: 0.5rem;
    background-color: #ffffff;
    padding: 0.5rem;
    border-radius: 4px;
  }

  .service-cards {
    flex-direction: column;
  }
  .service {
    flex: 1 1 100%;
  }
}

/*----------------------------------------------*/
/*  Sección FAQ                                 */
/*----------------------------------------------*/
.faq {
  padding: 4rem 0;
  background-color: #ffffff;
}

.faq h2 {
  color: var(--primary-color);
  margin-bottom: 1.5rem;
  text-align: center;
  font-size: 2rem;
}

.faq details {
  margin-bottom: 1rem;
  border-left: 4px solid var(--secondary-color);
  border-radius: 4px;
  padding: 1rem;
  background-color: #f9f9f9;
  transition: background-color 0.3s ease;
}

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  cursor: pointer;
  color: var(--primary-color);
  outline: none;
}

/* Cambiamos color y espaciado de las respuestas */
.faq p {
  margin-top: 0.75rem;
  color: var(--dark-text);
  line-height: 1.6;
}

/* Ocultamos la flecha por defecto */
.faq summary::-webkit-details-marker {
  display: none;
}

/* Añadimos un símbolo + al final de cada resumen */
.faq summary::after {
  content: '+';
  font-size: 1.2rem;
  color: var(--secondary-color);
  transition: transform 0.2s ease;
}

/* Cuando el elemento está abierto, el fondo es ligeramente más oscuro y el símbolo cambia a – */
.faq details[open] {
  background-color: #f0f0f0;
}

.faq details[open] summary::after {
  content: '–';
}

/*----------------------------------------------*/
/*  Formulario de contacto                      */
/*----------------------------------------------*/
.contact-form {
 margin-top: 2rem;
 /* Utilizamos grid para alinear el formulario en dos columnas en escritorio. */
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 1rem;
}

.contact-form > div {
 /* Cada contenedor de campo se comporta como una columna flexible dentro de la celda de grid. */
 display: flex;
 flex-direction: column;
}

.contact-form label {
  margin-bottom: 0.5rem;
  /* Utilizamos un color oscuro para las etiquetas del formulario
     ya que el fondo de las tarjetas de contacto es claro. */
  color: var(--primary-color);
  font-weight: bold;
}

/*
 * Ajustamos los elementos de entrada del formulario de contacto. Eliminamos
 * la propiedad width: 100% para permitir que los campos se adapten al ancho
 * de la celda de la cuadrícula. El ancho será gestionado por la disposición
 * de flexbox o grid definida en .contact-form > div. Los demás estilos se
 * mantienen igual para coherencia visual.
 */
.contact-form input,
 .contact-form textarea,
 .contact-form select {
  padding: 0.5rem;
  border: 1px solid #cccccc;
  border-radius: 4px;
  /* El ancho se hereda del contenedor, no se define aquí. */
  margin-bottom: 0.5rem;
  resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #666666;
}

.contact-form button {
  background-color: var(--secondary-color);
  color: #ffffff;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s ease;
  /* Alineamos el botón al inicio del formulario para evitar que flote en el centro */
  align-self: flex-start;
}

.contact-form button:hover {
  background-color: #9f8a4b;
}

/*
  Estructura de columnas para la sección de contacto. La información de contacto se
  coloca a la izquierda y el formulario a la derecha en pantallas grandes. En
  dispositivos pequeños, las columnas se apilan verticalmente. Ajustamos los
  porcentajes para dar más espacio al formulario, ya que suele requerir más área.
*/
/*
  Estructura de columnas para la sección de contacto mediante CSS Grid. En pantallas
  grandes utilizamos dos columnas (40 % para la información y 60 % para el formulario).
  En dispositivos pequeños, las columnas se apilan verticalmente ocupando toda la fila.
*/
.contact-grid {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 2rem;
}
.contact-info-col {
  /* No es necesario especificar el ancho aquí, ya que lo define el grid */
}
.contact-form-col {
  /* Hereda el ancho de su celda de grid */
}
@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* Estilos para el texto de aceptación de la política de privacidad en el formulario */
.privacy-label {
  /* El texto de la casilla de privacidad debe ser visible sobre el fondo claro del
     formulario. Ajustamos el color a oscuro para que contraste con el
     fondo blanco de la tarjeta. Utilizamos !important para que este color
     tenga prioridad frente a la regla .contact-form label que asigna
     color blanco a todas las etiquetas dentro del formulario. */
  color: var(--dark-text) !important;
  font-size: 0.9rem;
  /* Mostramos la casilla y el texto en una sola línea con un pequeño espacio
     entre ellos. Permitimos que el texto se ajuste a la línea siguiente en
     pantallas estrechas gracias a flex-wrap. */
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.privacy-label a {
  color: var(--secondary-color);
  text-decoration: underline;
}
.privacy-label a:hover {
  text-decoration: none;
}

/* Fila de aceptación de la política de privacidad y aviso legal.
   Mostramos el checkbox y el texto en una sola línea, con un pequeño espacio.
   El texto hereda un color oscuro para un buen contraste sobre el fondo claro
   y los enlaces se colorean con el tono secundario de la marca. */
.accept-row {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 /* No envolvemos el texto para mantener la casilla y la frase en una sola línea. */
 font-size: 0.9rem;
 color: var(--dark-text);
}
.accept-row input[type="checkbox"] {
  margin-right: 0.25rem;
}
.accept-row a {
  color: var(--secondary-color);
  text-decoration: underline;
}
.accept-row a:hover {
  text-decoration: none;
}

/* Estilo visual del botón deshabilitado en el formulario de contacto */
.contact-form button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Sección de situación integrada dentro del bloque de necesidades.
   El iframe ocupa todo el ancho del contenedor y una altura fija para
   mostrar el contenido del mapa de situaciones (situacion.html). Ajusta
   la altura para pantallas grandes y pequeñas según convenga. */
.situacion-section {
  margin-top: 2rem;
}
/* Ajustamos el iframe de la sección de situación para ocupar todo el ancho y
   dejar la altura flexible. La altura se ajustará dinámicamente mediante
   JavaScript en función del contenido para evitar barras de desplazamiento internas. */
.situacion-iframe {
  width: 100%;
  height: auto;
  border: none;
  display: block;
}

/* Contenedor de acciones (casilla de aceptación y botón de envío) en el formulario de contacto.
   Sitúa el checkbox y su texto en una misma línea y coloca el botón justo debajo,
   manteniendo una separación pequeña entre ambos elementos. */
/* Contenedor de acciones (casilla de aceptación y botón de envío) en el formulario de contacto).
   Ajustamos su ancho al 100% y separamos ligeramente del campo anterior. */
.accept-block {
  width: 100%;
  margin-top: 0.5rem;
}

/* La fila de aceptación (checkbox + texto) se muestra en una línea.
   Añadimos un pequeño margen inferior para separar del botón. */
.accept-block .accept-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}

/* Eliminamos el margen superior del botón para que quede cerca del texto de aceptación. */
.accept-block .btn {
  margin: 0;
}

/* Aseguramos que ciertos bloques del formulario ocupen toda la fila. Se utiliza
   en los campos de texto largos, la casilla de aceptación de privacidad y el
   contenedor del botón enviar. */
.form-full {
  flex: 1 1 100%;
}

/* Damos prioridad a las filas completas dentro del formulario para que
   ocupen todo el ancho disponible, incluso sobre la regla general
   '.contact-form > div'. Este selector tiene mayor especificidad al
   incluir tanto el contenedor como la clase .form-full. */
.contact-form > .form-full {
 /* En el diseño de grid, los bloques marcados como .form-full ocupan toda la fila. */
 grid-column: 1 / -1;
}

@media (max-width: 768px) {
 /* En pantallas pequeñas disponemos el formulario en una sola columna. */
 .contact-form {
 grid-template-columns: 1fr;
 }
 /* En pantallas pequeñas el botón ocupa todo el ancho */
 .contact-form button {
 width: 100%;
 text-align: center;
 }
}

/*----------------------------------------------*/
/*  Modal de cálculo de riesgo                  */
/*----------------------------------------------*/
.modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.6);
  align-items: center;
  justify-content: center;
}

.modal-content {
  background-color: #ffffff;
  width: 90%;
  max-width: 800px;
  height: 80vh;
  overflow-y: auto;
  border-radius: 6px;
  position: relative;
  padding: 1rem;
}

.modal-content iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 4px;
}

.modal-close {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  font-size: 2rem;
  cursor: pointer;
  color: var(--primary-color);
}

/*----------------------------------------------*/
/*  Botón secundario                            */
/*----------------------------------------------*/
.btn-secondary {
  display: inline-block;
  background-color: transparent;
  color: var(--secondary-color);
  border: 2px solid var(--secondary-color);
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-secondary:hover {
  background-color: var(--secondary-color);
  color: #ffffff;
}

/*----------------------------------------------*/
/*  Sección CTA                                 */
/*----------------------------------------------*/
.cta-section {
  text-align: center;
  margin-top: 3rem;
}

.cta-section h3 {
  color: var(--primary-color);
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}

.cta-section p {
  color: var(--dark-text);
  margin-bottom: 1rem;
}

/*----------------------------------------------*/
/*  Enlace de WhatsApp                           */
/*----------------------------------------------*/
.whatsapp-link {
  margin: 1rem 0;
}

.whatsapp-link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--secondary-color);
  color: var(--secondary-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.whatsapp-link a:hover {
  background-color: var(--secondary-color);
  color: #ffffff;
}

/*----------------------------------------------*/
/*  Menú hamburguesa y navegación responsive    */
/*----------------------------------------------*/

.menu-toggle {
  display: none;
  font-size: 3rem;
  background: none;
  border: none;
  color: var(--primary-color);
  cursor: pointer;
}

@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }
  /* La lista de navegación está oculta por defecto en móvil */
  .nav-list {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 70px;
    right: 5%;
    background-color: #ffffff;
    width: 200px;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    z-index: 999;
  }
  .nav-list.open {
    display: flex;
  }
  .nav-list li {
    margin-bottom: 0.5rem;
  }
}

/*----------------------------------------------*/
/*  Sección de necesidades                      */
/*----------------------------------------------*/

.needs {
  padding: 4rem 0;
  /* Sección con imagen de fondo y superposición para mejorar la lectura */
  background: var(--light-background) url('2946728a-c0ec-488b-9368-05efc35e424f.jpg') no-repeat center/cover;
  position: relative;
  text-align: center;
  z-index: 0;
}

/* Capa translúcida para atenuar la imagen de fondo en la sección de necesidades */
.needs::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: -1;
}

.needs h2 {
  color: var(--primary-color);
  margin-bottom: 1rem;
  font-size: 2rem;
}

.needs p {
  margin-bottom: 2rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.needs-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

.need {
  background-color: #ffffff;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  flex: 1 1 calc(33.333% - 2rem);
  
  /* Preparamos el contenedor para elementos decorativos y
     ocultamos las partes de la decoración que sobresalen del cuadro.
     Esto asegura que el sello rotado “GESTION PRIVADA” no tape
     el contenido del interior de la tarjeta. */
  position: relative;
  overflow: hidden;
}

.need h3 {
  color: var(--primary-color);
  margin-bottom: 0.5rem;
  font-size: 1.25rem;

  /* Aseguramos que el texto esté por encima de la decoración */
  position: relative;
  z-index: 1;
}

.need p {
  color: var(--dark-text);
  line-height: 1.5;

  /* Aseguramos que el texto esté por encima de la decoración */
  position: relative;
  z-index: 1;
}

/* Elementos decorativos para las tarjetas de necesidades */
.need::before {
  content: "B";
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 5rem;
  font-weight: 700;
  color: var(--card-decor-color);
  line-height: 1;
  z-index: 0;
  pointer-events: none;
}
/*
  Marca de agua para tarjetas de necesidades. Utilizamos el mismo estilo
  que en los servicios para mantener la coherencia visual. El texto se
  muestra en blanco sobre un fondo azul claro y está rotado.
*/
.need::after {
  content: "GESTION PRIVADA";
  position: absolute;
  bottom: -1rem;
  right: -7rem;
  width: 6rem;
  height: 6rem;
  background-color: #e6f1fd;
  color: #ffffff;
  padding: 0rem 5rem;
  transform: rotate(-46deg);
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 768px) {
  .needs-cards {
    flex-direction: column;
  }
  .need {
    flex: 1 1 100%;
  }
}

/*----------------------------------------------*/
/*  Sección Test de Salud Financiera           */
/*----------------------------------------------*/

.test-callout {
  padding: 4rem 0;
  background-color: var(--primary-color);
  color: #ffffff;
  text-align: center;
}

.test-callout h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: #ffffff;
}

.test-callout p {
  margin-bottom: 1rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.test-callout ul {
  list-style: none;
  padding: 0;
  margin: 0 auto 2rem auto;
  max-width: 700px;
  text-align: left;
}

.test-callout li {
  margin-bottom: 0.5rem;
  position: relative;
  padding-left: 1.5rem;
}

.test-callout li::before {
  content: '✔';
  position: absolute;
  left: 0;
  color: var(--secondary-color);
}

.test-callout .btn-secondary {
  color: var(--secondary-color);
  border-color: var(--secondary-color);
}

.test-callout .btn-secondary:hover {
  background-color: var(--secondary-color);
  color: #ffffff;
}

/*----------------------------------------------*/
/*  Botón flotante de WhatsApp                 */
/*----------------------------------------------*/

.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #25D366;
  color: #ffffff;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1);
}

.whatsapp-float svg {
  width: 30px;
  height: 30px;
  fill: #ffffff;
}

/*----------------------------------------------*/
/*  Sección de ventajas                         */
/*----------------------------------------------*/
.benefits {
  padding: 4rem 0;
  background-color: var(--light-background);
}

.benefits h2 {
  color: var(--primary-color);
  margin-bottom: 2rem;
  font-size: 2rem;
  text-align: center;
}

.benefit-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

.benefit {
  background-color: #ffffff;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  flex: 1 1 calc(50% - 2rem);
  /* Para que la decoración rotada se mantenga dentro de la tarjeta,
     establecemos overflow oculto, así el sello no cubre el contenido. */
  position: relative;
  overflow: hidden;
}

.benefit h3 {
  color: var(--primary-color);
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
  position: relative;
  z-index: 1;
}

.benefit p {
  color: var(--dark-text);
  line-height: 1.5;
  position: relative;
  z-index: 1;
}

/* Decoración sutil para beneficios usando la letra B */
.benefit::before {
  content: "B";
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 5rem;
  font-weight: 700;
  color: var(--card-decor-color);
  line-height: 1;
  z-index: 0;
  pointer-events: none;
}
/*
  Marca de agua para tarjetas de ventajas. Reutilizamos el diseño usado en
  los servicios y necesidades para unificar el estilo. El texto puede
  reforzar la identidad de marca y resulta discreto gracias a su color
  claro.
*/
.benefit::after {
  content: "GESTION PRIVADA";
  position: absolute;
  bottom: -1rem;
  right: -7rem;
  width: 6rem;
  height: 6rem;
  background-color: #e6f1fd;
  color: #ffffff;
  padding: 0rem 5rem;
  transform: rotate(-46deg);
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 768px) {
  .benefit {
    flex: 1 1 100%;
  }
}

/*----------------------------------------------*/
/*  Animaciones y efectos on-scroll              */
/*----------------------------------------------*/
/* Elementos animables iniciales */
.animate {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
}
/* Animación por defecto: deslizar hacia arriba */
.animate[data-animation="slide-up"] {
  transform: translateY(40px);
}
/* Animación deslizar desde la izquierda */
.animate[data-animation="slide-left"] {
  transform: translateX(-50px);
}
/* Animación deslizar desde la derecha */
.animate[data-animation="slide-right"] {
  transform: translateX(50px);
}
/* Animación desvanecer simple */
.animate[data-animation="fade"] {
  transform: scale(0.95);
}
/* Estado activo */
.animate.active {
  opacity: 1;
  transform: translateX(0) translateY(0) scale(1);
}

/* === Estilos para el mapa de situaciones integrado (situacion-map) === */
.situacion-map {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.situacion-map h2 {
  font-size: 1.75rem;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}
.situacion-map .situacion-sub {
  font-size: 1rem;
  color: var(--dark-text);
  margin-bottom: 1.5rem;
}
.situacion-map .chips {
  display: block;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.5rem 0;
  margin-bottom: 1rem;
}
.situacion-map .chip {
  flex: 0 0 auto;
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background-color: #f8fafc;
  color: var(--primary-color);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}
.situacion-map .chip:hover {
  background-color: #e5eff9;
}
.situacion-map .chip[aria-selected="true"] {
  background-color: #e0e7f3;
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 3px rgba(177, 155, 84, 0.25);
}
@media (max-width: 640px) {
  .situacion-map .chips {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    overflow-x: hidden;
  }
  .situacion-map .chip {
    width: 100%;
    white-space: normal;
    text-align: left;
  }
}
.situacion-map .panel {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}
.situacion-map .legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.situacion-map .badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background-color: #f8fafc;
  border: 1px solid #e5e7eb;
  color: #6b7280;
}
.situacion-map .levels {
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 900px) {
  .situacion-map .levels {
    grid-template-columns: repeat(2, 1fr);
  }
}
.situacion-map .card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 0.15s ease;
}
.situacion-map .card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.situacion-map .card_head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 0.875rem;
}
.situacion-map .ic {
  font-size: 1.2rem;
}
.situacion-map .title {
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--primary-color);
}
.situacion-map .pill {
  margin-left: auto;
  font-size: 0.7rem;
  padding: 0.3rem 0.5rem;
  border-radius: 999px;
  background-color: #f8fafc;
  border: 1px dashed #e5e7eb;
  color: #6b7280;
}
.situacion-map .summary {
  padding: 0 0.875rem 0.75rem;
  font-size: 0.85rem;
  color: #374151;
}
.situacion-map .accordion_btn {
  appearance: none;
  width: 100%;
  text-align: left;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}
.situacion-map .accordion_content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  border-top: 1px solid #e5e7eb;
}
.situacion-map .accordion_inner {
  padding: 0.75rem 0.875rem;
  color: #111827;
  font-size: 0.85rem;
}
.situacion-map .cta-wrapper {
  margin-top: 0.75rem;
/*--display: flex;--*/
  justify-content: flex-start;
}
.situacion-map .situacion-cta {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  font-weight: 600;
  cursor: pointer;
  background-color: var(--secondary-color);
  color: #fff;
  border: none;
  border-radius: 0.3rem;
  transition: background-color 0.2s ease-in-out;
  max-width: 220px;
  text-align: center;
}
.situacion-map .situacion-cta:hover {
  background-color: #d6b25d;
}
/* Tonos de bordes para cada situación */
.tone-crisis {
  border-left: 4px solid var(--danger);
}
.tone-superv {
  border-left: 4px solid var(--warn);
}
.tone-estab {
  border-left: 4px solid #2563eb;
}
.tone-crec {
  border-left: 4px solid var(--ok);
}
.tone-exp {
  border-left: 4px solid var(--pro);
}