@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

.font-playfair {
  font-family: 'Playfair Display', serif;
}

.font-montserrat {
  font-family: 'Montserrat', sans-serif;
}

* {
  scroll-behavior: smooth;
}

/* Color azul principal (el mismo que el nav) */
:root {
  --azul-principal: #003366;
}

/* Botón WhatsApp → azul con texto blanco */
header a[href*="wa.me"] {
  background-color: var(--azul-principal);
  color: white;
  font-weight: 600;
  border: none;
}

header a[href*="wa.me"]:hover {
  background-color: #00254d; /* un poco más oscuro al pasar el mouse */
}

/* Mail → azul con texto normal */
header p.text-lg.font-semibold {
  color: var(--azul-principal);
}


/* Animación nav mobile */
#mobile-nav .mobile-menu{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .25s ease, opacity .2s ease;
  opacity: 0;
}
#mobile-nav .mobile-menu > *{ overflow: hidden; }


#mobile-nav[data-open="true"] .mobile-menu{
  grid-template-rows: 1fr;
  opacity: 1;
}

#mobile-nav[data-open="true"] #menu-btn .bar-top{
  transform: translateY(8px) rotate(45deg);
}
#mobile-nav[data-open="true"] #menu-btn .bar-middle{
  opacity: 0;
}
#mobile-nav[data-open="true"] #menu-btn .bar-bottom{
  transform: translateY(-8px) rotate(-45deg);
}

/* Animación del FAQ */
.faq-answer{
  display:grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease, opacity .25s ease;
  opacity: 0;
}
.faq-answer > *{ overflow: hidden; }

.faq-btn[aria-expanded="true"] .faq-answer{
  grid-template-rows: 1fr;
  opacity: 1;
}

/* 🔹 Mismo azul del nav */
:root {
  --azul-principal: #003366;
}

/* 🔹 Título "¿Qué ofrecemos?" con misma fuente del header */
#servicios h2 {
  font-family: 'Roboto Slab', serif; /* misma que .font-header */
  letter-spacing: -1px;
  line-height: 1.1;
}

/* 🔹 h3 de cada tarjeta con la misma fuente que el título principal */
#servicios h3 {
  font-family: 'Roboto Slab', serif;
  font-weight: 700;
  letter-spacing: -0.5px;
}


/* 🔹 Títulos de la sección de servicios detallados */
section.max-w-\[950px\] h3 {
  font-family: 'Roboto Slab', serif;
  font-weight: 700;
  color: #003366; /* Azul oscuro igual que el nav */
  letter-spacing: -0.5px;
}

/* 🔹 Texto de párrafos en la sección de servicios */
section.max-w-\[950px\] p {
  color: #1a1a1a; /* Más oscuro que el gris anterior */
  font-weight: 500; /* Un poco más grueso para mejorar legibilidad */
  line-height: 1.7; /* Más espacio entre líneas */
  font-size: 1.05rem; /* Leve aumento de tamaño */
}

/* Logo Desktop */
nav.nav-azul a img {
  width: 100px; /* Ajusta el tamaño deseado */
  height: auto; /* Mantiene proporción */
}

/* Logo Mobile */
#mobile-nav a img {
  width: 100px; /* Ajusta también para mobile */
  height: auto;
}




@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

.font-playfair {
  font-family: 'Playfair Display', serif;
}

.font-montserrat {
  font-family: 'Montserrat', sans-serif;
}

* {
  scroll-behavior: smooth;
}

/* Animación nav mobile */
#mobile-nav .mobile-menu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .25s ease, opacity .2s ease;
  opacity: 0;
}
#mobile-nav .mobile-menu > * { overflow: hidden; }

#mobile-nav[data-open="true"] .mobile-menu {
  grid-template-rows: 1fr;
  opacity: 1;
}

/* === Estilos personalizados solicitados === */
.nav-azul {
  background-color: #003366 !important;
  color: white !important;
  font-weight: bold !important;
}

.nav-azul a {
  color: white !important;
  font-weight: bold;
}

.btn-whatsapp.azul, .btn-mail.azul {
  background-color: #003366 !important;
  color: white !important;
}

.btn-whatsapp.azul:hover, .btn-mail.azul:hover {
  background-color: #002244 !important;
}

/* Desktop */
.texto-llamanos {
  color: white;
  font-weight: bold;
  font-size: 1.5rem; /* tamaño grande */
  flex: 1; /* ocupa espacio entre logo y menú */
  text-align: center;
}

/* Mobile */
.texto-llamanos-mobile {
  color: #003366; /* opcional, cambiar según contraste */
  font-weight: bold;
  font-size: 1.25rem;
  text-align: center;
}

/* Ajuste nav azul (Desktop) */
.nav-azul {
  background-color: #003366 !important;
  color: white !important;
  font-weight: bold !important;
}

.nav-azul a {
  color: white !important;
  font-weight: bold;
}

/* Fuente personalizada para el título del header */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@700&display=swap');

/* Fuente y espaciado del título */
.font-header {
  font-family: 'Roboto Slab', serif;
  font-weight: bold;
  letter-spacing: -1px;
  line-height: 1.1;
  margin-top: 1.5rem; /* 🔹 espacio arriba del título */
}

/* Más espacio debajo del bloque de los botones */
header .flex.flex-col.lg\:flex-row.gap-4.justify-center.lg\:justify-start {
  margin-bottom: 2.5rem; /* 🔹 espacio debajo de WhatsApp y mail */
}