@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fuentes/CormorantGaramond600.woff2') format('woff2'),
       url('fuentes/CormorantGaramond600.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fuentes/CormorantGaramond600.woff2') format('woff2'),
       url('fuentes/CormorantGaramond600.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}

/* =============================
   🎨 HOJA DE ESTILOS PRINCIPAL
   Trámites y Consultoría M&M
   ============================= */



h1, h2, h3, h4 {
    /* Tipografías, colores, sombras */
}


nav {
    /* Estilo del menú */
}
nav a:hover::after {
    /* Línea decorativa bajo menú */
}




section:hover {
    /* Sombras al pasar mouse */
}

/* === 5. TARJETAS (CARD) === */




.whatsapp-btn:hover {
    /* Hover especial */
}





/* === 9. RESPONSIVE === */
@media (max-width: 768px) {
    /* Ajustes móviles */
}



        body {
            font-family: 'Cormorant Garamond', serif;
            margin: 0;
            padding: 0;
            background-color: #ffffff;
            color: #1F2A55;
        }
        header {
            background-color: #1F2A55;
            color: white;
            padding: 1rem;
            text-align: center;
        }
        header img {
            max-width: 200px;
            height: auto;
        }
        nav {
            background-color: #2c3e70;
            padding: 0.5rem;
            text-align: center;
        }
        nav a {
            color: white;
            margin: 0 1rem;
            text-decoration: none;
            font-weight: bold;
        }
        .hero {
            background-color: #f2f4fa;
            padding: 2rem;
            text-align: center;
        }
        .hero h2 {
            color: #1F2A55;
        }
        section {
            padding: 2rem;
        }
        h3 {
            color: #1F2A55;
        }
        footer {
            background-color: #1F2A55;
            color: white;
            text-align: center;
            padding: 1rem;
        }
        .servicios {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 1.2rem;
  max-width: 1200px;
  margin: 0 auto;
  align-items: stretch;
}
@media (max-width: 992px) {
  .servicios { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 600px) {
  .servicios { grid-template-columns: 1fr; }
}
@media (max-width: 992px) {
  .servicios {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .servicios {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .servicios {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}
        
        
        .card i {
            font-size: 30px;
            color: #1F2A55;
            margin-bottom: 10px;
        }
        .card h4 {
            margin-bottom: 0.5rem;
            color: #1F2A55;
        }
        .whatsapp-btn {
            display: inline-block;
            background-color: #25D366;
            color: white;
            padding: 10px 20px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: bold;
            font-size: 18px;
            margin-top: 1rem;
        }
        .whatsapp-btn:hover {
            background-color: #1ebe5d;
        }
        .contacto-container {
            text-align: center;
        }
        .qr-section {
            display: flex;
            justify-content: center;
            gap: 3rem;
            flex-wrap: wrap;
            margin-top: 2rem;
        }
        .qr-item {
            text-align: center;
        }
        .qr-item img {
            width: 130px;
            height: auto;
        }
    
    body {
        background: linear-gradient(to bottom, #ffffff 0%, #f2f4fa 100%);
    }
    header, nav, footer {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    .hero {
        background: #f2f4fa;
        box-shadow: inset 0 0 25px rgba(0,0,0,0.05);
        border-radius: 0 0 20px 20px;
    }
    .hero h2 {
        text-shadow: 1px 1px 2px rgba(0,0,0,0.15);
    }
    section {
        box-shadow: 0 2px 12px rgba(0,0,0,0.05);
        border-radius: 12px;
        background-color: #ffffff;
        margin-bottom: 2rem;
    }
    
    
    img {
        transition: transform 0.3s ease;
    }
    img:hover {
        transform: scale(1.02);
    }
    .whatsapp-btn {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }
    
    nav {
        position: sticky;
        top: 0;
        z-index: 100;
        transition: box-shadow 0.3s ease;
    }
    nav.scrolled {
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    }
    .hero h2 {
        animation: fadeInUp 1s ease-in-out;
    }
    .card i, .card h4, .whatsapp-btn {
        transition: all 0.3s ease;
    }
    .card i:hover {
        color: #0d1f5e;
        transform: rotate(10deg);
    }
    .card h4:hover {
        color: #0d1f5e;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
    }
    .whatsapp-btn:hover {
        transform: scale(1.05);
    }
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* 5. Pulse effect for WhatsApp button */
    .whatsapp-btn {
        animation: pulse 2s infinite;
    }
    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); }
    }

    /* 6. Hover light effect on cards */
    
    .card::before {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(120deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.1) 100%);
        transform: rotate(25deg);
        transition: all 0.5s ease;
        opacity: 0;
    }
    .card:hover::before {
        left: 100%;
        opacity: 1;
    }

    /* 7. Zoom-in/flip animation on scroll */
    [data-aos] {
        will-change: transform, opacity;
    }
    [data-aos="zoom-in"] {
        transform: scale(0.8);
        opacity: 0;
        transition: all 0.6s ease-out;
    }
    [data-aos="zoom-in"].aos-animate {
        transform: scale(1);
        opacity: 1;
    }

    /* 8. Background transition on "Quiénes somos" section */
    
    
/* Efecto de rotación para todos los íconos de la página */
i {
    transition: transform 0.6s ease;
}
i:hover {
    transform: rotate(360deg);
}


/* Línea decorativa animada en títulos */

/* Línea animada bajo títulos h3 - versión centrada completa */
h3::after {
  content: '';
  display: block;
  height: 2px;
  background: #1F2A55;
  width: 0;
  transition: width 0.4s ease;
  margin: 6px auto 0;
}
h3:hover::after {
  width: 100%;
}


/* Separadores decorativos suaves */
hr.sutil {
  border: none;
  height: 1px;
  background-color: #d6d8f0;
  margin: 2rem 0;
}

/* Animación de entrada más visible en cards */
.card[data-aos="fade-up"] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.card.aos-animate[data-aos="fade-up"] {
  opacity: 1;
  transform: translateY(0);
}

/* Estilo de sección más definida */
section:hover {
  box-shadow: 0 6px 20px rgba(31, 42, 85, 0.08);
  transition: box-shadow 0.3s ease;
}

/* Fondo animado suave en la cabecera */
.hero {
  background: linear-gradient(135deg, #f2f4fa, #e9ecf8);
  background-size: 400% 400%;
  animation: fondoHero 12s ease infinite;
}
@keyframes fondoHero {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Brillo suave al pasar el mouse sobre imágenes */
img:hover {
  filter: brightness(1.05);
}

/* Suavidad extra en transiciones de títulos */
h2, h3 {
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
h2:hover, h3:hover {
  text-shadow: 1px 1px 4px rgba(0,0,0,0.15);
}

/* Transición sutil de fondo al hacer scroll */
body {
  transition: background-color 0.4s ease;
}
nav.scrolled {
  background-color: #25335f;
}

/* Realce sutil en enlaces activos del menú */
nav a.active {
  border-bottom: 2px solid white;
}

/* Aparición animada de cada sección con más claridad */
[data-aos] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
[data-aos].aos-animate {
  opacity: 1;
  transform: translateY(0);
}

/* Fondo levemente más claro al pasar por encima de tarjetas */


/* Aparición lateral en tarjetas alternadas */
.servicios .card:nth-child(odd) {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.servicios .card:nth-child(even) {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.servicios .card.aos-animate {
  opacity: 1;
  transform: translateX(0);
}

/* Bordes animados finos al pasar el mouse */
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  border: 2px solid transparent;
  transition: border-color 0.4s ease;
  z-index: -1;
}
.card:hover::after {
  border-color: #d1d5e8;
}

/* Botones con halo y realce sobrio */
button:hover, .whatsapp-btn:hover {
  box-shadow: 0 0 8px rgba(31, 42, 85, 0.25);
  transform: scale(1.03);
}

/* Indicador de scroll animado */
#scroll-indicator {
  text-align: center;
  margin-top: 20px;
  animation: bounce 2s infinite;
  font-size: 24px;
  color: #1F2A55;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

@media (max-width: 768px) {
  header h1 {
    font-size: 1.4rem;
  }
  .hero h2 {
    font-size: 1.2rem;
    padding: 0 1rem;
  }
  h3 {
    font-size: 1.4rem;
  }
  section {
    padding: 2rem 1rem;
  }
  .servicios, 
}

/* Mejora visual general */
.card, .formacion .card, .servicios 


/* Botones glow sutil */
.whatsapp-btn, button {
  transition: all 0.3s ease-in-out;
}
.whatsapp-btn:hover, button:hover {
  box-shadow: 0 0 12px rgba(31, 42, 85, 0.2);
  transform: scale(1.03);
}

/* Logo circular con sombra sutil */
.logo img {
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Secciones con divisores suaves */
section {
  border-bottom: 1px solid #e6e9f0;
  padding-bottom: 3rem;
  margin-bottom: 3rem;
}

/* Mejoras responsive móviles */
@media (max-width: 768px) {
  header h1 {
    font-size: 1.5rem;
  }
  .hero h2 {
    font-size: 1.2rem;
    padding: 0 1rem;
  }
  h3 {
    font-size: 1.3rem;
  }
  .card, .servicios, .formacion {
    flex-direction: column !important;
    align-items: center;
  }
  .whatsapp-btn, button {
    font-size: 1rem;
    padding: 0.6rem 1.4rem;
  }
  img.qr {
    width: 90% !important;
    max-width: 250px;
  }
}


/* Estilos de marcas de agua sutiles en secciones clave */
section.decorada {
  position: relative;
  z-index: 1;
}

section.decorada::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 100px;
  color: rgba(31, 42, 85, 0.08);
  position: absolute;
  top: 20px;
  right: 30px;
  z-index: 0;
  pointer-events: none;
}




/* Ajuste específico para que los logos queden más juntos */
.logos-acreditaciones img {
  margin-left: 0;
}
.logo-primero {
  margin-right: 4px;
  height: 70px;
}

/* Estilo de presentación para logos de acreditaciones */
.logos-acreditaciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.2rem;
  margin-top: 2rem;
}
.logos-acreditaciones img {
  height: 80px;
  width: auto;
  transition: transform 0.3s ease;
}
.logos-acreditaciones img:hover {
  transform: scale(1.05);
}

/* Iconos personalizados por sección */
#acreditaciones.decorada::before {
  content: "559"; /* fas fa-award */
}
#quienes.decorada::before {
  content: "500"; /* fas fa-user-friends */
}
#servicios.decorada::before {
  content: "085"; /* fas fa-cogs */
}
#formacion.decorada::before {
  content: "19d"; /* fas fa-graduation-cap */
}
#porque.decorada::before {
  content: "0eb"; /* fas fa-lightbulb */
}


html { scroll-behavior: smooth; }
/* Mejoras visuales adicionales */

  .whatsapp-float {
    font-size: 22px;
    padding: 10px 12px;
  }
  
}

/* Fondo blur en nav cuando se hace scroll */
nav.scrolled {
  backdrop-filter: blur(4px);
  background-color: rgba(37, 51, 95, 0.95);
}



nav a {
    position: relative;
}
nav a::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: white;
    bottom: -4px;
    left: 0;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}
nav a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Mejoras visuales adicionales */

  .whatsapp-float {
    font-size: 22px;
    padding: 10px 12px;
  }
  
}

/* Fondo blur en nav cuando se hace scroll */
nav.scrolled {
  backdrop-filter: blur(4px);
  background-color: rgba(37, 51, 95, 0.95);
}



h3 {
    text-shadow: 1px 1px 3px rgba(0,0,0,0.08);
}

/* Mejoras visuales adicionales */

  .whatsapp-float {
    font-size: 22px;
    padding: 10px 12px;
  }
  
}

/* Fondo blur en nav cuando se hace scroll */
nav.scrolled {
  backdrop-filter: blur(4px);
  background-color: rgba(37, 51, 95, 0.95);
}






/* Mejoras visuales adicionales */

  .whatsapp-float {
    font-size: 22px;
    padding: 10px 12px;
  }
  
}

/* Fondo blur en nav cuando se hace scroll */
nav.scrolled {
  backdrop-filter: blur(4px);
  background-color: rgba(37, 51, 95, 0.95);
}



.card-efecto:hover, .btn:hover, .cta:hover {
  box-shadow: 0 0 10px rgba(31,42,85,0.3);
}

/* Mejoras visuales adicionales */

  .whatsapp-float {
    font-size: 22px;
    padding: 10px 12px;
  }
  
}

/* Fondo blur en nav cuando se hace scroll */
nav.scrolled {
  backdrop-filter: blur(4px);
  background-color: rgba(37, 51, 95, 0.95);
}



h2, h3 {
  position: relative;
  animation: fadeInTitle 1.2s ease both;
}
@keyframes fadeInTitle {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}



        .whatsapp-float {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #25D366;
            color: white;
            font-size: 28px;
            padding: 14px 16px;
            border-radius: 50%;
            text-align: center;
            z-index: 1000;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            transition: background-color 0.3s ease;
        }
        .whatsapp-float:hover {
            background-color: #1ebe5d;
        }
    


/* Indicador de progreso de scroll */
#progress-bar {
  height: 3px;
  background: #1F2A55;
  width: 0%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  transition: width 0.2s ease-out;
}




/* Botón volver arriba ultra minimalista */
#btn-top {
  bottom: 220px;
  position: fixed;
  bottom: 140px;
  right: 20px;
  background: transparent;
  color: #1F2A55;
  padding: 4px;
  border-radius: 4px;
  display: none;
  font-size: 20px;
  z-index: 998;
  transition: opacity 0.3s, transform 0.3s;
  opacity: 0.5;
}
#btn-top:hover {
  opacity: 1;
  transform: scale(1.1);
}

#btn-top:hover {
  background: #1F2A55;
  color: white;
  transform: scale(1.1);
}




/* === Unificación de sombras suaves === */
.card, .card-efecto, .formacion 
.card:hover, 

/* === Tipografía secundaria para lectura cómoda === */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

p, li, .card p {
  font-family: 'Open Sans', sans-serif;
}

/* === Íconos con desplazamiento sutil en hover === */
.card i:hover {
  transform: translateY(-3px);
  color: #0d1f5e;
}

/* === Enlace activo más sutil === */
nav a.active {
  border-bottom: 1px solid white;
}

/* === Botones responsivos y cómodos === */
.whatsapp-btn, button {
  font-size: 1rem;
  padding: 0.7rem 1.6rem;
}

/* === Ajustes móviles: padding y separación más compacta === */
@media (max-width: 768px) {
  section {
    padding: 1.5rem 1rem;
  }
  .card, .formacion 
  .whatsapp-btn, button {
    padding: 0.6rem 1.2rem;
  }
}



/* === Estilo minimalista del formulario flotante === */
#form-flotante {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: white;
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 1000;
  display: none;
  width: 280px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
}
#form-flotante input,
#form-flotante textarea {
  width: 100%;
  padding: 6px;
  margin-bottom: 0.5rem;
  font-size: 13px;
  border: 1px solid #ccc;
  border-radius: 6px;
}
#form-flotante button {
  font-size: 13px;
  padding: 8px;
  border-radius: 6px;
}
#form-flotante h4 {
  font-size: 16px;
  margin-bottom: 0.5rem;
  color: #1F2A55;
}

/* === Botón de ayuda más discreto === */
#btn-ayuda {
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 20px;
  background: #1F2A55;
  color: white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: background 0.3s ease;
}
#btn-ayuda:hover {
  background: #2c3e70;
}



/* Efecto glow y sombra a tarjetas interactivas */


.card-efecto::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(120deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.1) 100%);
  transform: rotate(25deg);
  transition: all 0.5s ease;
  opacity: 0;
  z-index: 0;
}
.card-efecto:hover::before {
  left: 100%;
  opacity: 1;
}
.card-efecto > * {
  position: relative;
  z-index: 1;
}



/* Efecto glow y sombra también en .card */


.card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(120deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.1) 100%);
  transform: rotate(25deg);
  transition: all 0.5s ease;
  opacity: 0;
  z-index: 0;
}
.card:hover::before {
  left: 100%;
  opacity: 1;
}
.card > * {
  position: relative;
  z-index: 1;
}

.card {
  position: relative;
  overflow: hidden;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 1.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
  margin-bottom: 1rem;
}

.card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(120deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.1) 100%);
  transform: rotate(25deg);
  transition: all 0.5s ease;
  opacity: 0;
  z-index: 0;
}
.card:hover::before {
  left: 100%;
  opacity: 1;
}
.card > * {
  position: relative;
  z-index: 1;
}




.card-efecto::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(120deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.1) 100%);
  transform: rotate(25deg);
  transition: all 0.5s ease;
  opacity: 0;
  z-index: 0;
}
.card-efecto:hover::before {
  left: 100%;
  opacity: 1;
}
.card-efecto > * {
  position: relative;
  z-index: 1;
}

.card, .card-efecto {
  position: relative;
  overflow: hidden;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 1.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
  margin-bottom: 1rem;
}
.card:hover, .card-efecto:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  filter: brightness(1.03);
}
.card::before, .card-efecto::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(120deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.1) 100%);
  transform: rotate(25deg);
  transition: all 0.5s ease;
  opacity: 0;
  z-index: 0;
}
.card:hover::before, .card-efecto:hover::before {
  left: 100%;
  opacity: 1;
}
.card > *, .card-efecto > * {
  position: relative;
  z-index: 1;
}

#btn-top {
  bottom: 220px;
  background: transparent;
  border: none;
  box-shadow: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#btn-top.show {
  opacity: 1;
}
#btn-top i {
  font-size: 16px !important;
}
#btn-top i:hover {
  transform: rotate(360deg);
}

#btn-top {
  background: transparent;
  border: none;
  box-shadow: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  outline: none;
  text-decoration: none;
}
#btn-top.show {
  opacity: 1;
}
#btn-top i {
  font-size: 16px !important;
}
#btn-top:focus {
  outline: none;
  box-shadow: none;
}
#btn-top i:hover {
  transform: rotate(360deg);
}

/* Alternancia automática de colores en secciones decoradas */
section.decorada:nth-of-type(odd) {
  background-color: #ffffff;
}

section.decorada:nth-of-type(even) {
  background-color: #f2f4fa;
}

/* Transición suave al alternar colores */
section.decorada {
  transition: background-color 0.4s ease;
}

/* Fondo fijo blanco para la primera sección visible */
section.decorada:first-of-type {
  background-color: #ffffff;
}

/* Alternancia desde la segunda sección decorada */
section.decorada:nth-of-type(n+2):nth-of-type(even) {
  background-color: #ffffff;
}

section.decorada:nth-of-type(n+2):nth-of-type(odd) {
  background-color: #f2f4fa;
}

/* Transición suave para todo */
section.decorada {
  transition: background-color 0.4s ease;
}