/* ==========================================================================
   SOLUCIÓN DEFINITIVA: ALTA ESPECIFICIDAD Y SOBRESCRITURA DE BOOTSTRAP
   ========================================================================== */

/* 1. BARRA SUPERIOR OBLIGATORIAMENTE ROSA MAGENTA CON TEXTO BLANCO/DORADO */
header.site-header-tepalcatepec .top-bar-tepalcatepec,
div.top-bar-tepalcatepec,
.top-bar-tepalcatepec {
    background: #d81b60 !important;
    background: linear-gradient(135deg, #d81b60 0%, #ad1457 50%, #8c221e 100%) !important;
    border-bottom: 3px solid #ffc107 !important;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4) !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    width: 100% !important;
    display: block !important;
    position: relative !important;
    z-index: 9999 !important;
}

/* Forzar el color de texto blanco en la barra superior */
header.site-header-tepalcatepec .top-bar-tepalcatepec *,
.top-bar-tepalcatepec *,
.top-bar-tepalcatepec span,
.top-bar-tepalcatepec a,
.top-bar-tepalcatepec small,
.top-bar-tepalcatepec div {
    color: #ffffff !important;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9) !important;
}

.top-bar-tepalcatepec .text-warning,
.top-bar-tepalcatepec i.fa-phone,
.top-bar-tepalcatepec i.fa-envelope,
.top-bar-tepalcatepec i.text-warning {
    color: #ffc107 !important;
}


/* 2. BOTONES DEL MENÚ CON PROFUNDIDAD Y EFECTO SUMIDO (INSET NEUMÓRFICO) */
header.site-header-tepalcatepec .navbar-nav .nav-link.btn-neo-inset,
.navbar-nav .nav-link.btn-neo-inset,
a.btn-neo-inset,
.btn-neo-inset {
    background-color: #e8e3e7 !important;
    border-radius: 50px !important;
    padding: 8px 16px !important;
    margin: 3px 2px !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    color: #8c221e !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;

    /* PROFUNDIDAD Y SOMBRAS SUMIDAS (INSET) MARCADA */
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: inset 3px 3px 6px #b8b3b8,
        inset -3px -3px 6px #ffffff,
        2px 2px 4px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s ease-in-out !important;
}

/* EFECTO HOVER Y ESTADO ACTIVO (MÁS SUMIDO CON ACENTO ROSA) */
header.site-header-tepalcatepec .navbar-nav .nav-link.btn-neo-inset:hover,
header.site-header-tepalcatepec .navbar-nav .nav-link.btn-neo-inset.active,
.btn-neo-inset:hover,
.btn-neo-inset.active {
    background-color: #dfdadf !important;
    color: #d81b60 !important;
    box-shadow: inset 4px 4px 8px #a39ea3,
        inset -4px -4px 8px #ffffff !important;
    transform: translateY(1px) !important;
}


/* Soporte para submenús anidados (Dropend Neumórfico) */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: 4px;
    display: none;
}

/* Despliegue al pasar el cursor */
.dropdown-submenu:hover>.dropdown-menu {
    display: block;
    animation: fadeIn 0.2s ease-in-out;
}

/* CAMBIO DE ÍCONOS DE VERDE A GUINDA/ROSA */
header.site-header-tepalcatepec .btn-neo-inset i,
.btn-neo-inset i,
.navbar i {
    color: #8c221e !important;
}

header.site-header-tepalcatepec .btn-neo-inset:hover i,
header.site-header-tepalcatepec .btn-neo-inset.active i,
.btn-neo-inset:hover i,
.btn-neo-inset.active i {
    color: #d81b60 !important;
}

  /* ANIMACIONES Y EFECTOS PERSONALIZADOS */
  .hero-pulse {
      animation: pulseHero 3s infinite alternate ease-in-out;
  }

  @keyframes pulseHero {
      0% {
          transform: scale(1);
          filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
      }

      100% {
          transform: scale(1.04);
          filter: drop-shadow(0 8px 20px rgba(216, 27, 96, 0.6));
      }
  }

  .hover-float {
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  }

  .hover-float:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 10px 10px 20px #bebebe, -10px -10px 20px #ffffff !important;
  }

  .glow-rosa {
      box-shadow: 0 0 15px rgba(216, 27, 96, 0.4);
  }


  /* BOTÓN CON TEXTURA NEUMÓRFICA DE CÁPSULA Y EFECTO LIFT AL HOVER */
  .btn-neo-lift {
      background: #e8e3e7 !important;
      color: #8c221e !important;
      border-radius: 50px !important;
      padding: 10px 20px !important;
      font-weight: 700 !important;
      border: 1px solid rgba(255, 255, 255, 0.8) !important;
      /* Textura neumórfica con relieve suave constante */
      box-shadow: 4px 4px 8px #bebebe,
          -4px -4px 8px #ffffff,
          inset 1px 1px 2px rgba(255, 255, 255, 0.9) !important;
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      text-decoration: none !important;
  }

  /* EFECTO LIFT (ELEVACIÓN) AL HACER HOVER */
  .btn-neo-lift:hover,
  .btn-neo-lift:focus {
      color: #d81b60 !important;
      background: #f0ebf0 !important;
      /* Eleva el botón y proyecta una sombra más pronunciada */
      transform: translateY(-4px) !important;
      box-shadow: 7px 7px 14px #b8b3b8,
          -7px -7px 14px #ffffff,
          0px 8px 15px rgba(216, 27, 96, 0.2) !important;
  }

  /* EFECTO AL PRESIONAR (CLICK) */
  .btn-neo-lift:active {
      transform: translateY(-1px) !important;
      box-shadow: inset 3px 3px 6px #b8b3b8,
          inset -3px -3px 6px #ffffff !important;
  }


  /* ==========================================================================
   ESTILOS SECCIÓN HISTORIA Y ACCORDION NEUMÓRFICO (ANCHO 80%)
   ========================================================================== */

  /* Botón del desplegable estilo neumórfico */
  .accordion-neo .btn-neo-toggle {
      background-color: #e8e3e7 !important;
      color: #8c221e !important;
      border: none !important;
      box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.8),
          3px 3px 8px rgba(0, 0, 0, 0.1) !important;
      transition: all 0.3s ease !important;
  }

  .accordion-neo .btn-neo-toggle:not(.collapsed) {
      background-color: #ffffff !important;
      color: #d81b60 !important;
      box-shadow: inset 3px 3px 6px #bebebe,
          inset -3px -3px 6px #ffffff !important;
  }

  .accordion-neo .btn-neo-toggle::after {
      filter: invert(15%) sepia(80%) saturate(5000%) hue-rotate(330deg);
  }

  .backdrop-blur {
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
  }


  /* ==========================================================================
   ESTILOS NEUMÓRFICOS Y EFECTOS PARA EL FOOTER
   ========================================================================== */

  /* Botones de Acción del Footer */
  .btn-footer-action {
      background: rgba(255, 255, 255, 0.1) !important;
      border: 1px solid rgba(255, 255, 255, 0.2) !important;
      box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4),
          inset 1px 1px 2px rgba(255, 255, 255, 0.2) !important;
      transition: all 0.3s ease !important;
  }

  .btn-footer-action:hover {
      background: #d81b60 !important;
      border-color: #d81b60 !important;
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(216, 27, 96, 0.4) !important;
  }

  /* Redes Sociales Neumórficas */
  .btn-social-neo {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.15);
      box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.2), 2px 2px 5px rgba(0, 0, 0, 0.3);
      transition: all 0.3s ease;
      text-decoration: none;
  }

  .btn-social-neo:hover {
      background: #d81b60;
      color: #ffffff !important;
      transform: scale(1.1);
  }

  /* Enlaces del Footer */
  .footer-link-neo {
      text-decoration: none;
      transition: all 0.2s ease;
  }

  .footer-link-neo:hover {
      color: #ffffff !important;
      padding-left: 4px;
  }

  /* Etiqueta Neumórfica VAL-CORP */
  .neo-credit-tag {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 193, 7, 0.3);
      transition: all 0.3s ease;
  }

  .neo-credit-tag:hover {
      background: #ffc107;
      color: #000000 !important;
      box-shadow: 0 0 12px rgba(255, 193, 7, 0.5);
  }


  /* ==========================================================================
   ESTILOS DEL ASISTENTE VISUAL Y ACCESIBILIDAD
   ========================================================================== */

  /* Animación de entrada del panel */
  @keyframes fadeInUp {
      from {
          opacity: 0;
          transform: translateY(20px);
      }

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

  /* Modo Alto Contraste */
  body.alto-contraste {
      background-color: #000000 !important;
      color: #ffffff !important;
  }

  body.alto-contraste .card-neo,
  body.alto-contraste .bg-white,
  body.alto-contraste .bg-light {
      background-color: #1a1a1a !important;
      color: #ffffff !important;
      border: 1px solid #ffc107 !important;
  }

  body.alto-contraste a,
  body.alto-contraste .text-dark,
  body.alto-contraste .text-secondary {
      color: #ffc107 !important;
  }

  /* Ajustes dinámicos de tamaño de texto */
  body.texto-lg {
      font-size: 1.15rem !important;
  }

  body.texto-xl {
      font-size: 1.3rem !important;
  }