/* ============================================================
   principal.css — Estilos EXCLUSIVOS de la página principal.
   Independiente de custom.css (que usa /innovaciones/), a propósito,
   para no arriesgar romper nada de lo que ya funciona.
   ============================================================ */

:root{
  --ppal-azul: #006999;
  --ppal-antracita: #2b2f33;
  --ppal-gris-claro: #f5f6f8;
  --ppal-gris-medio: #8a8f98;
  --ppal-azul-claro: #0013FF;
  --ppal-hover-rojo: #F50002;

}

body{
  font-family: 'Montserrat', 'Segoe UI', Roboto, Arial, sans-serif;
  color: #333;
}

/* --- Barra superior de contacto --- */
.ppal-barra-contacto{
  background-color: #fff;
  border-bottom: 1px solid #eef0f3;
  color: var(--ppal-gris-medio);
  font-size: 0.85rem;
}
.ppal-barra-contacto a{ color: var(--ppal-gris-medio); }
.ppal-barra-contacto a:hover{ color: var(--ppal-azul); }

.ppal-btn-primario{
  background-color: #0013FF;
  font-family: "Montserrat", Sans-serif;
  color: #fff;
  border-radius: 50rem;
  padding: 0.35rem 1.2rem;
  font-size: 16px;
  font-weight: 800;
}
.ppal-btn-primario:hover{ background-color: #00507a; color: #fff; }

.ppal-selector-idioma{
  width: auto;
  border-radius: 50rem;
  border-color: #dee2e6;
}

@media (max-width: 768px) {
  /* Mantiene tu diseño de la barra superior intacto */
  .ppal-barra-contacto .container {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .ppal-barra-contacto .d-flex.gap-3 {
    flex-wrap: wrap;
    gap: 0.5rem !important;
  }
  .ppal-btn-primario {
    font-size: 0.75rem;
    padding: 0.3rem 0.8rem;
    white-space: nowrap;
  }

  /* Altura perfecta para el Hero (foto de fondo) */
  .ppal-hero {
    height: auto !important;
    min-height: 220px !important; 
    position: relative !important;
  }

  /* Logo blanco grande del fondo centrado en la foto */
  img.ppal-hero-logo-gigante,
  .ppal-hero > img,
  .ppal-hero > div > img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 180px !important;
    width: 50% !important;
    height: auto !important;
    z-index: 1 !important;
  }

  /* SOLUCIÓN RADICAL POR TOP: Forzamos la bajada manual de las tarjetas */
  /* Como no quieren dejar de ser absolutas, las movemos al hueco blanco manualmente */
  .ppal-contenedor-tarjetas {
    position: absolute !important;
    top: 240px !important;         /* Empuja las tarjetas justo donde acaba el hero negro */
    bottom: auto !important;       /* Destruye el anclaje inferior que las ata arriba */
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    display: block !important;
    z-index: 10 !important;
  }

  /* Control de filas de Bootstrap */
  .ppal-contenedor-tarjetas .row,
  .ppal-contenedor-tarjetas .container {
    display: flex !important;
    flex-wrap: wrap !important;
    position: relative !important;
    transform: none !important;
    width: 100% !important;
  }

  /* Columnas de Bootstrap al 50% (2 por fila) */
  .ppal-contenedor-tarjetas .col-6 {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
    display: block !important;
  }

  /* Reseteo de animaciones y efectos ópticos */
  .ppal-flip-card, 
  .ppal-flip-card-inner,
  .ppal-flip-card-link {
    position: relative !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* Ajustamos el margen del texto para encajar perfectamente con la bajada de las tarjetas */
  .ppal-quienes-somos {
    position: relative !important;
    margin-top: 450px !important;  /* Mantiene el espacio blanco ideal donde encajarán las tarjetas */
    padding-top: 30px !important;
    clear: both !important;
    display: block !important;
    z-index: 5 !important;
  }
}


/* --- Navbar principal --- */
.ppal-navbar{
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.ppal-nav-link {
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #0013FF !important;
  padding: 0.5rem 0.75rem !important;
  font-family: "Montserrat", Sans-serif;
  font-size: 18px;
}

.enlace-contacto{
  font-family: "Montserrat", Sans-serif;
  font-size: 16px;
  font-weight: 400;
}

.ppal-nav-link:hover {
  color: var(--ppal-hover-rojo) !important;
  text-decoration: underline;
}

/* --- Botones tipo píldora (reutilizables en todas las secciones) --- */
.ppal-btn-solido{
  background-color: var(--ppal-azul);
  color: #fff;
  border: none;
  border-radius: 50rem;
  padding: 0.65rem 2rem;
  font-weight: 600;
  transition: all 0.25s ease;
}
.ppal-btn-solido:hover{ background-color: #00507a; color: #fff; }

.ppal-btn-outline{
  background-color: #fff;
  color: var(--ppal-azul);
  border: 2px solid var(--ppal-azul);
  border-radius: 50rem;
  padding: 0.6rem 2rem;
  font-weight: 600;
  transition: all 0.25s ease;
}
.ppal-btn-outline:hover{ background-color: var(--ppal-azul); color: #fff; }

/* ============================================================
   ESTILOS ORIGINALES CLONADOS PARA EL PIE DE PÁGINA (FOOTER)
   ============================================================ */
.ppal-footer {
    background-color: #2b2f33;
    color: #b0b5bd;
    font-family: 'Montserrat', sans-serif;
}

.ppal-footer-logo {
    max-height: 42px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

.ppal-footer-subtitulo {
    color: #ffffff !important;
    opacity: 0.75;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.5px;
}

.ppal-footer-direccion {
    opacity: 0.5;
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.8;
}

.ppal-footer-link-icono {
    color: #ffffff !important;
    opacity: 0.5;
    text-decoration: none;
    transition: opacity 0.25s ease;
}

.ppal-footer-link-icono:hover {
    opacity: 0.9;
}

.ppal-footer-menu-legal {
    font-size: 0.85rem;
    font-weight: 300;
    letter-spacing: 0.3px;
    line-height: 1.8;
}

.ppal-footer-link {
    color: #ffffff !important;
    opacity: 0.5;
    text-decoration: none;
    transition: opacity 0.25s ease;
}

.ppal-footer-link:hover {
    opacity: 0.9;
    text-decoration: underline !important;
}

/* --- Widgets flotantes --- */
.ppal-widget-flotante{
  position: fixed;
  bottom: 1.5rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.25);
  z-index: 1050;
  font-size: 1.5rem;
  transition: transform 0.2s ease;
}
.ppal-widget-flotante:hover{ transform: scale(1.08); }

.ppal-widget-whatsapp{
  left: 1.5rem;
  background-color: #25D366;
  color: #fff;
  text-decoration: none;
}
.ppal-widget-whatsapp:hover{ color: #fff; }

.ppal-widget-arriba{
  right: 1.5rem;
  background-color: var(--ppal-azul);
  color: #fff;
  border: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
}
.ppal-widget-arriba.visible{ opacity: 1; visibility: visible; }

@media (max-width: 576px){
  .ppal-widget-flotante{ width: 48px; height: 48px; }
  .ppal-widget-whatsapp{ left: 1rem; }
  .ppal-widget-arriba{ right: 1rem; }
}

/* ---------- Sistema de animación al hacer scroll ---------- */
.reveal {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal[data-anim="fadeIn"]       { transform: none; }
.reveal[data-anim="fadeInDown"]   { transform: translateY(-30px); }
.reveal[data-anim="fadeInUp"]     { transform: translateY(30px); }
.reveal[data-anim="fadeInLeft"]   { transform: translateX(-30px); }
.reveal[data-anim="fadeInRight"]  { transform: translateX(30px); }

.reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* --- Sección Hero General --- */
.ppal-hero {
  height: 75vh;
  min-height: 500px;
  background-image: url("../img/inicio/2cd0413d8aff7d01da97634177c309a3467dfb7f.cd00d8dc8767.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-bottom: 80px;
  /* REGLA DE SEGURIDAD: Evita que cualquier elemento de abajo (como el footer) 
     se meta debajo de las tarjetas flotantes */
  margin-bottom: 60px; 
}

/* Filtro oscuro sobre la imagen de fondo */
.ppal-hero-overlay {
  background-color: rgba(0, 0, 0, 0.45);
}

.ppal-hero-logo-gigante {
  max-width: 550px;
  width: 100%;
  height: auto;
}

/* --- Contenedor de Tarjetas Flotantes --- */
.ppal-contenedor-tarjetas {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%); /* Hace que muerdan exactamente la mitad hacia abajo */
  z-index: 10;
}

@media (max-width: 767px){
  .ppal-hero{
    height: auto;
    min-height: 45vh;
    padding-bottom: 2rem;
  }
  .ppal-contenedor-tarjetas{
    position: static;
    transform: none;
    margin-top: 2rem;
  }
  .ppal-hero-logo-gigante{
    max-width: 320px;
  }
}

/* Nota: el sistema antiguo de tarjetas (.ppal-tarjeta-valor y las versiones
   sin !important de .ppal-tarjeta-icono/.ppal-tarjeta-titulo) se eliminó de
   aquí porque el HTML actual usa las tarjetas flip 3D (.ppal-flip-card),
   definidas más abajo en este mismo archivo. */

/* ============================================================
   ANIMACIONES NATIVAS (Efectos de carga al entrar a la web)
   ============================================================ */

/* 1. Desvanecimiento para el Logo Grande */
.animacion-fade-in {
  animation: ppalFadeIn 1.2s ease-out forwards;
}

/* 2. Aparición de abajo hacia arriba escalonada para las tarjetas */
.animacion-fade-up-1 { animation: ppalFadeUp 0.8s ease-out 0.2s forwards; opacity: 0; }
.animacion-fade-up-2 { animation: ppalFadeUp 0.8s ease-out 0.4s forwards; opacity: 0; }
.animacion-fade-up-3 { animation: ppalFadeUp 0.8s ease-out 0.6s forwards; opacity: 0; }
.animacion-fade-up-4 { animation: ppalFadeUp 0.8s ease-out 0.8s forwards; opacity: 0; }

@keyframes ppalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ppalFadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Ajustes Responsivos para las Tarjetas en móviles */
@media (max-width: 768px) {
  .ppal-contenedor-tarjetas {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding: 0 1rem;
  }
  .ppal-hero {
    height: auto;
    padding: 5rem 0;
  }
}


/* --- Sección ¿Quiénes somos? --- */
.ppal-seccion-titulo {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--ppal-antracita);
  text-transform: none;
}

.ppal-seccion-subtitulo {
  font-size: 1.1rem;
  color: var(--ppal-gris-medio);
  font-weight: 500;
}

.ppal-quienes-somos-texto {
  font-size: 1rem;
  line-height: 1.8;
  color: #555;
  font-weight: 400;
}

/* Espacio obligatorio para que las tarjetas flotantes respiren y no pisen el texto */
.ppal-quienes-somos {
  padding-top: 120px !important; 
}
.ppal-tarjeta-producto {
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.06);
  height: 280px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ppal-tarjeta-producto:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

.ppal-producto-imagen-box {
  flex-grow: 1;
  background-color: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  overflow: hidden;   /* ← clave: esto permite "recortar" lo que sobresalga */
}
.ppal-producto-imagen-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform: scale(4.0);   /* ← esto hace zoom, empujando el margen blanco fuera de la vista */
  transition: transform 0.3s ease;
}
.ppal-tarjeta-producto:hover .ppal-producto-imagen-box img {
  transform: scale(3.0);   /* un pelín más de zoom al pasar el ratón, ya que tenías ese efecto */
}

.ppal-producto-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.ppal-producto-placeholder i {
  font-size: 3rem;
  color: var(--ppal-gris-medio);
  opacity: 0.4;
}

.ppal-producto-info {
  background-color: var(--ppal-antracita);
  padding: 1rem;
  text-align: center;
}
.ppal-producto-info {
  background-color: var(--ppal-antracita);
  padding: 1rem;
  text-align: center;
}
.ppal-producto-info h6 {
  color: #ffffff !important;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin: 0;
}

/* --- Banner B2B --- */
.ppal-banner-b2b {
  background-image: url("../img/empresa/Acceso-al-b2b-1.106625cb181b.png");
  
  /* 100vw de ancho para cubrir la pantalla, 130vh de alto para tener colchón arriba y abajo */
  background-size: 100vw 130vh;
  
  background-repeat: no-repeat;
  background-attachment: scroll;
  will-change: background-position;
  overflow: hidden; 
}

@media (max-width: 1024px) {
  .ppal-banner-b2b {
    background-attachment: fixed !important;
    background-size: cover !important;
    background-position: center center !important;
    height: auto !important;
    min-height: 400px !important;
    padding: 5rem 1.5rem !important;
  }
}


/* --- Tarjetas de Noticias --- */
.ppal-noticias .row {
  display: flex !important;
  flex-wrap: wrap !important;
}
.ppal-noticias .col-md-4 {
  display: flex !important;
}

/* 2. Tu tarjeta base (Añadida dirección vertical) */
.ppal-tarjeta-noticia {
  display: flex !important;
  flex-direction: column !important; /* Apila los elementos en vertical */
  height: 100% !important;           /* Obliga a la tarjeta a estirarse al alto máximo */
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  border: 1px solid #eef0f3;
  transition: transform 0.25s ease;
}
.ppal-tarjeta-noticia:hover {
  transform: translateY(-5px);
}

/* 3. Tus cajas de imagen e imágenes intactas (Sin fondos, sin recortes, 100% naturales) */
.ppal-noticia-img-box {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  background: transparent !important;
  overflow: hidden;
  display: block !important;
}
.ppal-noticia-img-box img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block;
}

/* 4. EL TRUCO: Volvemos el contenedor del texto elástico */
.ppal-tarjeta-noticia .p-3 {
  display: flex !important;
  flex-direction: column !important; /* Apila título, extracto y botón */
  flex-grow: 1 !important;           /* Hace que esta zona rellene el espacio vacío inferior */
}

.ppal-noticia-titulo {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ppal-antracita);
}

/* 5. El extracto actúa como un muelle elástico */
.ppal-noticia-extracto {
  flex-grow: 1 !important;           /* Se estira de forma invisible para empujar el botón */
  font-size: 0.9rem;
  color: #666;
  line-height: 1.6;
  margin-bottom: 1rem !important;
}


/* --- Sección Contacto & Formulario --- */
.ppal-contacto{
  position: relative;
  background: url("../img/base_principal/Rectangle-1111.74f8047f3fbb.png") center center / cover no-repeat;
}

.ppal-form-group {
  position: relative;
  width: 100%;
}

.ppal-input-linea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding: 0.6rem 0;
  color: #ffffff;
  font-size: 0.95rem;
  transition: border-color 0.3s ease;
}

.ppal-input-linea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.ppal-input-linea:focus {
  outline: none;
  border-bottom-color: var(--ppal-azul);
}

textarea.ppal-input-linea {
  resize: none;
}

.ppal-btn-outline-blanco {
  background-color: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 50rem;
  padding: 0.6rem 2.5rem;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.25s ease;
}

.ppal-btn-outline-blanco:hover {
  background-color: #ffffff;
  color: var(--ppal-antracita);
}

/* --- Sección Proyectos Financiados --- */
.ppal-proyectos-financiados {
  border-top: 1px solid #eef0f3;
}

.ppal-contenedor-certificado {
  padding: 1rem;
  background-color: #ffffff;
  transition: transform 0.25s ease;
}

.ppal-contenedor-certificado:hover {
  transform: scale(1.03);
}

.ppal-img-certificado {
  max-height: 220px;
  width: auto;
  object-fit: contain;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04); 
  border: 1px solid #f0f2f5;
}

/* --- Comportamiento Hover para el Desplegable de Empresa --- */
@media (min-width: 992px) {
  .ppal-dropdown-hover:hover .ppal-dropdown-menu {
    display: block;
    margin-top: 0; 
  }
}

/* Estilos visuales del submenú desplegable general (Empresa) */
.ppal-dropdown-menu {
  background-color: #ffffff;
  border-radius: 8px !important;
  padding: 0.5rem 0;
  min-width: 160px;
}

.ppal-dropdown-item {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ppal-azul-claro);
  padding: 0.6rem 1.2rem;
  transition: all 0.2s ease;
}

.ppal-dropdown-item:hover {
  color: var(--ppal-hover-rojo) !important;
  text-decoration: underline;
}


/* Solución estructural definitiva contra el parpadeo por contenedor */
@media (min-width: 992px) {
  /* 1. Estado inicial del menú: oculto pero posicionado */
  .btn-group.dropdown .ppal-dropdown-menu {
    display: block !important;
    visibility: hidden;
    opacity: 0;
    top: 100% !important;
    transform: none !important;
    margin-top: 0 !important;
    transition: opacity 0.1s linear;
  }

  /* 2. EL TRUCO DEFINITIVO: Activación al pasar el ratón por CUALQUIER parte del grupo */
  /* Esto incluye el texto, la flecha o el propio menú desplegable */
  .btn-group.dropdown:hover .ppal-dropdown-menu {
    visibility: visible;
    opacity: 1;
  }
}


/* Estilos visuales del submenú desplegable general (Empresa) */
.ppal-dropdown-menu {
  background-color: #ffffff;
  border-radius: 8px !important;
  padding: 0.5rem 0;
  min-width: 160px;
}

.ppal-dropdown-item {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ppal-azul-claro);
  padding: 0.6rem 1.2rem;
  transition: all 0.2s ease;
}

.ppal-dropdown-item:hover {
  color: var(--ppal-hover-rojo) !important;
  text-decoration: underline;
}

.ppal-dropdown-item-languages {
font-family: 'Montserrat', sans-serif;
font-size: 0.85rem;
font-weight: 600;
color: var(--ppal-antracita);
padding: 0.6rem 1.2rem;
transition: all 0.2s ease;
}

/* --- Flecha independiente del desplegable "Empresa" (clic en móvil/pantalla estrecha) --- */
.ppal-dropdown-caret {
  background: none;
  border: none;
  padding: 0.25rem 0.5rem;
  color: var(--ppal-antracita);
}
.ppal-dropdown-caret::after {
  margin-left: 0;
}

/* --- Corrección Estricta del Menú de Idiomas --- */
.ppal-barra-contacto .ppal-dropdown-menu {
  top: 100% !important;   
  left: auto !important;   
  right: 0 !important;     
  transform: none !important; 
  min-width: 80px !important; /* Ajustamos el tamaño para la caja de idiomas */
}

/* Evita que los textos de los idiomas se oculten o colapsen */
.ppal-barra-contacto .ppal-dropdown-item {
  display: block !important;
  width: 100% !important;
  clear: both !important;
  padding: 0.4rem 1rem !important;
}
/* ============================================================
   SOLUCIÓN DEFINITIVA: Selector de Idiomas Inmune a Colapsos
   ============================================================ */

/* Forzar que el contenedor del botón retenga la posición */
.ppal-barra-contacto .dropdown {
  position: relative !important;
}

/* Forzar el comportamiento de la caja flotante de idiomas */
.ppal-dropdown-idiomas-caja {
  display: none;
  position: absolute !important;
  top: 100% !important;        /* Nace justo debajo de la palabra FR */
  right: 0 !important;          /* Se alinea al borde derecho de la pantalla */
  left: auto !important;        /* Cancela empujones automáticos a la izquierda */
  min-width: 90px !important;   /* Ancho mínimo obligatorio para que quepan ES, EN y FR */
  width: 90px !important;       /* Forzamos el ancho rígido */
  background-color: #ffffff !important;
  padding: 0.5rem 0 !important;
  margin-top: 5px !important;   /* Separación elegante del botón superior */
  transform: none !important;   /* Desactiva los cálculos automáticos de Bootstrap */
  z-index: 2000 !important;     /* Asegura que flote por encima de cualquier menú */
}

/* Obligar a los tres enlaces de idiomas a mostrarse en filas independientes */
.ppal-dropdown-idiomas-caja .ppal-dropdown-item {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  padding: 0.5rem 1rem !important;
  color: var(--ppal-antracita) !important;
  clear: both !important;
}

/* Mostrar la caja al pasar el ratón (Hover) */
@media (min-width: 992px) {
  .ppal-barra-contacto .ppal-dropdown-hover:hover .ppal-dropdown-idiomas-caja {
    display: block !important;
  }
}
/* ============================================================
   SOLUCIÓN AL COLPASO: Tarjetas Flotantes con Efecto Flip 3D
   ============================================================ */

/* 1. Forzar que el contenedor flote exactamente muerdiendo el Hero */
.ppal-contenedor-tarjetas {
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translate(-50%, 50%) !important;
  z-index: 100 !important;
  width: 100% !important;
}

/* 2. Activar la perspectiva tridimensional en las columnas */
.ppal-contenedor-tarjetas .col-6 {
  perspective: 1000px !important;
}

/* 3. Forzar el tamaño rígido de la tarjeta interactiva */
.ppal-flip-card {
  background-color: transparent !important;
  height: 200px !important; 
  width: 100% !important;
}

.ppal-flip-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.nav-link-disabled {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #6c757d !important;
  cursor: default;
  pointer-events: none;
  padding: 0.5rem 0.75rem !important;
  font-family: "Montserrat", Sans-serif;
  font-size: 18px;
}

/* 4. Estructura interna encargada de la rotación */
.ppal-flip-card-inner {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  text-align: center !important;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform-style: preserve-3d !important;
}

/* Gatillo: Al pasar el ratón por encima, la tarjeta interna rota 180 grados */
.ppal-flip-card:hover .ppal-flip-card-inner {
  transform: rotateY(180deg) !important;
}

/* 5. RECUPERAR LAS CAJAS BLANCAS FLOTANTES ORIGINALES Y OCULTAR LA CARA OPUESTA */
.ppal-flip-card-front, .ppal-flip-card-back {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  backface-visibility: hidden !important; /* OBLIGATORIO: Oculta la otra cara al girar */
  border-radius: 8px !important;
  background-color: #ffffff !important; /* Recupera el fondo blanco sólido */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important; /* Recupera la sombra flotante */
  padding: 1.5rem !important;
}

/* Cara Delantera (Icono + Título) */
.ppal-flip-card-front {
  color: var(--ppal-antracita) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
  transform: rotateY(0deg) !important;
}

/* Iconos de las tarjetas en su color original */
.ppal-tarjeta-icono {
  font-size: 2.5rem !important;
  color: var(--ppal-azul) !important;
  line-height: 1 !important;
}

.ppal-tarjeta-icono img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

/* Títulos en su tipografía original */
.ppal-tarjeta-titulo {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--ppal-antracita) !important;
  letter-spacing: 0.5px !important;
}

/* Cara Trasera (Texto descriptivo) */
.ppal-flip-card-back {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: rotateY(180deg) !important; /* Nace girada */
}

/* Texto descriptivo estilizado e independiente */
.ppal-tarjeta-descripcion {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.88rem !important;
  line-height: 1.6 !important;
  color: #555555 !important;
  font-weight: 500 !important;
}
/* ============================================================
   SOLUCIÓN AL MAPA: Activación Rígida de Puntos Radar
   ============================================================ */

/* ============================================================
   RADARES MINIFICADOS: Evita Colisiones y añade Elegancia
   ============================================================ */

.ppal-mapa-contenedor {
  position: relative !important;
  display: inline-block !important;
  width: 100% !important;
}

.ppal-nodo-radar {
  width: 18px !important;
  height: 18px !important;
  transform: translate(-50%, -50%) !important;
  cursor: pointer !important;
  z-index: 1000 !important;
}

/* Punto central sólido intermedio y visible */
.ppal-radar-centro {
  position: absolute !important;
  width: 10px !important;
  height: 10px !important;
  background-color: #007bb2 !important;
  border-radius: 50% !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1002 !important;
}

/* Onda expansiva bien definida (borde de 2px) pero con expansión controlada */
.ppal-radar-pulso {
  position: absolute !important;
  width: 16px !important;
  height: 16px !important;
  border: 2px solid #007bb2 !important;
  border-radius: 50% !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  animation: ppalRadarPulseEquilibrado 2s infinite ease-out !important;
  z-index: 1001 !important;
}

/* El círculo nace del punto y crece controladamente hasta 32px para no invadir al vecino */
@keyframes ppalRadarPulseEquilibrado {
  0% {
    width: 15px;
    height: 15px;
    opacity: 1;
  }
  100% {
    width: 32px; 
    opacity: 0;
  }
}

/* --- Banner "Desarrollos industriales y tecnológicos" --- */
.ppal-banner-desarrollos{
  position: relative;
  background: url("../img/inicio/ROTHER-231-1.0d9348460414.png") center center / cover no-repeat;
}