/* Marco compartido de las paginas de servicio: barra de contacto, navbar, pie y botones flotantes.
   Copia fiel de las reglas de la portada (index.html) para que se vean igual. No lo usa index.html. */

/* Barra de contacto y navbar */
    .contact-bar-horizontal {
      padding: 10px;
    }

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

    .contact-group-h,
    .social-group-h {
      display: flex;
      align-items: center;
    }

    .contact-item-h,
    .social-link-h {
      margin: 5px;
    }

    .contact-link-h,
    .social-link-h {
      font-size: 14px;
    }

    .contact-icon-h,
    .social-icon-h {
      font-size: 16px;
      margin-right: 5px;
    }

    @media (max-width: 767px) {

      .contact-group-h,
      .social-group-h {
        flex-direction: column;
        align-items: flex-start;
      }

      .contact-item-h,
      .social-link-h {
        margin: 10px 0;
      }

      .contact-link-h,
      .social-link-h {
        font-size: 12px;
      }

      .contact-icon-h,
      .social-icon-h {
        font-size: 14px;
      }
    }

    .contact-bar-horizontal {
      background: linear-gradient(135deg, #1a365d 0%, #15325a 100%);
      padding: 1rem 0;
      font-family: 'Inter', sans-serif;
    }

    .contact-container-h {
      max-width: 1280px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 2rem;
      padding: 0 2rem;
    }

    .contact-group-h {
      display: flex;
      align-items: center;
      gap: 2rem;
    }

    .contact-item-h {
      position: relative;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .contact-link-h {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      color: #e2e8f0;
      text-decoration: none;
      padding: 0.5rem 1rem;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.05);
      transition: background 0.3s ease;
    }

    .contact-link-h:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    .contact-icon-h {
      font-size: 1.1rem;
      color: #63b3ed;
      width: 24px;
      text-align: center;
    }

    /* Estilos para la navbar */
    .navbar {
      background: linear-gradient(to right, rgba(255, 255, 255, 0.98), rgba(0, 86, 179, 0.95));
      transition: all 0.3s ease;
      padding: 0.5rem 0;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .navbar:hover {
      background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(0, 86, 179, 1));
    }

    .navbar-brand {
      color: #003d80;
      font-size: 1.2rem;
      text-decoration: none;
      display: flex;
      align-items: center;
      padding: 0.5rem 1rem;
      transition: all 0.3s ease;
      background: transparent;
      border-radius: 0;
      box-shadow: none;
      max-width: 200px;
    }

    .navbar-brand:hover {
      transform: none;
      box-shadow: none;
      color: #ffcc00;
    }

    .navbar-brand img {
      height: 60px;
      width: auto;
      margin-right: 10px;
      transition: transform 0.3s ease;
      filter: brightness(1.2) contrast(1.3) drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2));
      max-width: 100%;
      object-fit: contain;
      display: block;
      min-width: 40px;
      background-color: transparent;
    }

    .navbar-brand:hover img {
      transform: scale(1.05);
    }

    .navbar-nav .nav-link {
      color: #003d80 !important;
      font-weight: 500;
      transition: all 0.3s ease;
      padding: 0.5rem 1rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .navbar-nav .nav-link:hover {
      color: #ffcc00 !important;
      background: transparent;
      border-radius: 6px;
    }

    .navbar-nav .nav-link i {
      font-size: 1.1rem;
      color: #003d80;
    }

    .navbar-nav .nav-link:hover i {
      color: #ffcc00;
    }

    /* Estilos responsivos */
    @media (max-width: 768px) {
      .contact-container-h {
        flex-direction: column;
        gap: 1rem;
        padding: 0 1rem;
      }

      .contact-group-h {
        flex-direction: column;
        gap: 1rem;
        width: 100%;
      }

      .contact-link-h {
        width: 100%;
        justify-content: center;
      }

      .navbar {
        background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(0, 86, 179, 1));
        padding: 0.3rem 0;
      }

      .navbar-brand {
        font-size: 1.1rem;
        max-width: 150px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
        padding: 0.3rem;
      }

      .navbar-brand img {
        height: 45px;
        width: auto;
        filter: brightness(1.3) contrast(1.4) drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
        object-fit: contain;
        min-width: 35px;
      }

      .navbar-toggler {
        border-color: rgba(0, 61, 128, 0.5);
      }

      .navbar-collapse {
        background: rgba(255, 255, 255, 0.95);
        padding: 1rem;
        border-radius: 8px;
        margin-top: 1rem;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }
    }

    /* Estilos para el logo en la navbar */
    .navbar-brand img {
      height: 40px;
      width: auto;
      margin-right: 10px;
    }

    @media (max-width: 768px) {
      .navbar-brand img {
        height: 35px;
        width: auto;
      }

      .navbar-brand {
        font-size: 1.1rem;
      }
    }

    /* Estilos existentes */
    .contact-bar-horizontal {
        background-color: #007bff;
        padding: 10px 0;
        color: white;
    }
    
    .contact-container-h {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px;
    }
    
    .contact-group-h {
        display: flex;
        gap: 20px;
    }
    
    .social-group-h {
        display: flex;
        gap: 15px;
        align-items: center;
    }
    
    .contact-link-h, .social-link-h {
        color: white;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: opacity 0.3s;
    }
    
    .contact-link-h:hover, .social-link-h:hover {
        opacity: 0.8;
        color: white;
    }

    /* Estilo responsivo */
    @media (max-width: 768px) {
        .contact-container-h {
            flex-direction: column;
            gap: 10px;
        }
        
        .contact-group-h {
            flex-direction: column;
            align-items: center;
        }
        
        .social-group-h {
            margin-top: 10px;
        }
    }

/* Pie: formulario */
            .form-group {
              margin-bottom: 1rem;
            }

            .form-input {
              width: 100%;
              padding: 0.75rem;
              border: 1px solid #e0e0e0;
              border-radius: 8px;
              font-size: 1rem;
              transition: all 0.3s ease;
            }

            .form-input:focus {
              border-color: #003d80;
              box-shadow: 0 0 0 2px rgba(0, 61, 128, 0.1);
              outline: none;
            }

            .form-button {
              width: 100%;
              padding: 0.75rem 1.5rem;
              background: #003d80;
              color: white;
              border: none;
              border-radius: 8px;
              font-size: 1rem;
              cursor: pointer;
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 0.5rem;
              transition: all 0.3s ease;
            }

            .form-button:hover:not(:disabled) {
              background: #0056b3;
              transform: translateY(-2px);
            }

            .form-button:disabled {
              opacity: 0.7;
              cursor: not-allowed;
            }

            .notification {
              position: fixed;
              bottom: 20px;
              right: 20px;
              padding: 1rem 1.5rem;
              border-radius: 8px;
              background: white;
              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
              display: flex;
              align-items: center;
              gap: 0.75rem;
              transform: translateX(100%);
              opacity: 0;
              transition: all 0.3s ease;
              z-index: 9999;
            }

            .notification.success {
              background: linear-gradient(135deg, #28a745, #218838);
              color: white;
            }

            .notification.error {
              background: linear-gradient(135deg, #dc3545, #c82333);
              color: white;
            }

            .notification.show {
              transform: translateX(0);
              opacity: 1;
            }

            .notification.hide {
              transform: translateX(100%);
              opacity: 0;
            }

            @keyframes spin {
              from {
                transform: rotate(0deg);
              }

              to {
                transform: rotate(360deg);
              }
            }

            .notification {
              position: fixed;
              bottom: 20px;
              right: 20px;
              padding: 15px 25px;
              border-radius: 8px;
              display: flex;
              align-items: center;
              gap: 10px;
              color: white;
              font-weight: 500;
              transform: translateX(100%);
              transition: all 0.3s ease;
              z-index: 9999;
              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
              opacity: 0;
              min-width: 300px;
              max-width: 90%;
            }

            .notification.show {
              transform: translateX(0);
              opacity: 1;
            }

            .notification.success {
              background: linear-gradient(135deg, #28a745, #218838);
            }

            .notification.error {
              background: linear-gradient(135deg, #dc3545, #c82333);
            }

            .notification.hide {
              transform: translateX(100%);
              opacity: 0;
            }

            .notification i {
              font-size: 1.2rem;
              flex-shrink: 0;
            }

            .form-input {
              border: 1px solid #e0e0e0;
              border-radius: 8px;
              padding: 0.75rem 1rem;
              width: 100%;
              transition: all 0.3s ease;
            }

            .form-input:focus {
              border-color: #003d80;
              box-shadow: 0 0 0 2px rgba(0, 61, 128, 0.1);
              outline: none;
            }

            .form-button {
              background: #003d80;
              color: white;
              border: none;
              border-radius: 8px;
              padding: 0.75rem 1.5rem;
              cursor: pointer;
              transition: all 0.3s ease;
              display: flex;
              align-items: center;
              gap: 8px;
              white-space: nowrap;
            }

            .form-button:hover:not(:disabled) {
              background: #0056b3;
              transform: translateY(-2px);
            }

            .form-button:disabled {
              opacity: 0.7;
              cursor: not-allowed;
              transform: none;
            }

            .form-group {
              display: flex;
              gap: 10px;
              margin-top: 10px;
            }

            @keyframes spin {
              from {
                transform: rotate(0deg);
              }

              to {
                transform: rotate(360deg);
              }
            }

/* Pie */
    /* Estilos del Footer */
    .footer-main {
      background: linear-gradient(135deg, #1a365d 0%, #15325a 100%);
      color: white;
      padding: 4rem 0 2rem;
    }

    .footer-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1.5rem;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2rem;
      margin-bottom: 3rem;
    }

    .footer-column {
      background: rgba(255, 255, 255, 0.05);
      padding: 1.5rem;
      border-radius: 12px;
      transition: transform 0.3s ease;
    }

    .footer-column:hover {
      transform: translateY(-5px);
    }

    .column-title {
      display: flex;
      align-items: center;
      gap: 1rem;
      color: #ffcc00;
      font-size: 1.25rem;
      margin-bottom: 1.5rem;
    }

    .icon-box {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      background: rgba(255, 204, 0, 0.2);
      color: #ffcc00;
    }

    /* Estilos de las tarjetas */
    .link-card,
    .contact-card,
    .social-card {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 0.75rem 1rem;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      transition: all 0.3s ease;
      text-decoration: none;
      color: white;
      margin-bottom: 0.5rem;
    }

    .link-card:hover,
    .contact-card:hover,
    .social-card:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: translateX(5px);
    }

    /* Estilos del formulario */
    .form-group {
      display: flex;
      gap: 0.5rem;
      margin-top: 1rem;
    }

    .form-input {
      flex: 1;
      padding: 0.75rem;
      border: none;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.1);
      color: white;
    }

    .form-input::placeholder {
      color: rgba(255, 255, 255, 0.6);
    }

    .form-button {
      padding: 0.75rem 1.5rem;
      border: none;
      border-radius: 6px;
      background: #ffcc00;
      color: #1a365d;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .form-button:hover {
      background: white;
    }

    /* Estilos del mapa */
    .location-section {
      margin-top: 3rem;
    }

    .map-container {
      border-radius: 12px;
      overflow: hidden;
      height: 300px;
    }

    .custom-map {
      width: 100%;
      height: 100%;
      border: none;
    }

    /* Estilos del copyright */
    .footer-bottom {
      text-align: center;
      margin-top: 2rem;
      padding-top: 2rem;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Estilos del footer-bottom actualizados */
    .footer-bottom {
      margin-top: 3rem;
      padding-top: 2rem;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .legal-grid {
      display: grid;
      gap: 1.5rem;
      text-align: center;
    }

    .legal-section {
      color: rgba(255, 255, 255, 0.7);
      font-size: 0.9rem;
    }

    .legal-section.copyright p {
      font-weight: 500;
      margin-bottom: 0.5rem;
    }

    .legal-section.links {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 1.5rem;
    }

    .legal-link {
      color: rgba(255, 255, 255, 0.7);
      text-decoration: none;
      transition: color 0.3s ease;
    }

    .legal-link:hover {
      color: #ffcc00;
    }

    .legal-section.rights {
      font-size: 0.8rem;
      opacity: 0.8;
    }

    .legal-section.rights p {
      margin: 0.25rem 0;
    }


    @media (max-width: 768px) {
      /* ... tus otros estilos responsivos ... */

      .legal-grid {
        gap: 1rem;
      }

      .legal-section.links {
        flex-direction: column;
        gap: 0.75rem;
      }

      .legal-link {
        padding: 0.5rem;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 4px;
      }

      .legal-section {
        font-size: 0.85rem;
      }

      .legal-section.rights {
        font-size: 0.75rem;
      }
    }

    @media (max-width: 480px) {
      /* ... tus otros estilos responsivos ... */

      .legal-section {
        font-size: 0.8rem;
      }

      .legal-section.rights {
        font-size: 0.7rem;
      }
    }



    /* Estilos responsivos */
    @media (max-width: 1200px) {
      .footer-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 768px) {
      .footer-grid {
        grid-template-columns: 1fr;
      }

      .footer-column {
        padding: 1rem;
      }

      .link-card,
      .contact-card,
      .social-card {
        padding: 0.75rem;
        justify-content: center;
        text-align: center;
      }

      .form-group {
        flex-direction: column;
      }

      .form-button {
        width: 100%;
        justify-content: center;
      }

      .map-container {
        height: 200px;
      }
    }

    @media (max-width: 480px) {
      .footer-main {
        padding: 2rem 0 1rem;
      }

      .column-title {
        font-size: 1.1rem;
      }

      .icon-box {
        width: 35px;
        height: 35px;
        font-size: 1rem;
      }
    }

/* WhatsApp flotante y volver arriba */
    /* Estilos para WhatsApp flotante */
    .whatsapp-float {
      position: fixed;
      bottom: 20px;
      left: 20px;
      z-index: 1000;
    }

    .whatsapp-float a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 60px;
      background-color: #25d366;
      color: white;
      border-radius: 50%;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      text-decoration: none;
      font-size: 30px;
      transition: all 0.3s ease;
    }

    .whatsapp-float a:hover {
      transform: scale(1.1);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    }

    /* Estilos para botón Scroll Up */
    .scroll-up-btn {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }

    .scroll-up-btn.show {
      opacity: 1;
      visibility: visible;
    }

    .scroll-up-btn button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 50px;
      background-color: #003d80;
      color: white;
      border: none;
      border-radius: 50%;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      cursor: pointer;
      font-size: 20px;
      transition: all 0.3s ease;
    }

    .scroll-up-btn button:hover {
      background-color: #ffcc00;
      color: #003d80;
      transform: translateY(-3px);
    }

    /* Estilos responsivos */
    @media (max-width: 768px) {
      .whatsapp-float {
        bottom: 15px;
        left: 15px;
      }

      .whatsapp-float a {
        width: 50px;
        height: 50px;
        font-size: 25px;
      }

      .scroll-up-btn {
        bottom: 15px;
        right: 15px;
      }

      .scroll-up-btn button {
        width: 45px;
        height: 45px;
        font-size: 18px;
      }
    }