/*
 Theme Name:   Abascal Child
 Theme URI:    https://abascaladministracion.es/
 Description:  Tema hijo para Abascal Administración basado en Astra
 Author:       Tu Nombre
 Author URI:   https://abascaladministracion.es/
 Template:     astra
 Version:      1.0.1
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, responsive-layout, accessibility-ready
 Text Domain:  abascal-child
*/

/* === NUEVO: Cargar estilos base de Astra (iconos, etc.) === */
@import url("../astra/style.css");

/* --- Pega aquí TODO el CSS de tu archivo HTML --- */

/* CSS Reset y Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary-color: #2A5D8C;
  --secondary-color: #4EAD6E;
  --text-dark: #1c2d3f;
  --text-gray: #6b7280;
  --border-gray: #e5e7eb;
  --bg-light: #f9fafb;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--text-dark);
  line-height: 1.6;
  background: white;
}

/* Header */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  z-index: 1000;
}

header .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.25rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header img {
  height: 56px;
  width: auto;
}

nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

nav a {
  text-decoration: none;
  color: var(--text-gray);
  font-weight: 600;
  transition: color 0.3s;
}

nav a:hover {
  color: var(--primary-color);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  color: white;
  font-weight: 600;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s;
  box-shadow: 0 4px 14px rgba(42, 93, 140, 0.25);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(42, 93, 140, 0.35);
}

/* Hero Section */
#inicio {
  padding: 12rem 2rem 6rem;
  position: relative;
  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 50%, #e0f2fe 100%);
  overflow: hidden;
}

#inicio::before {
  content: '';
  position: absolute;
  top: 5rem;
  right: 2rem;
  width: 24rem;
  height: 24rem;
  background: var(--primary-color);
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.1;
}

.hero-content {
  max-width: 1024px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

h1 {
  font-size: 4rem;
  font-weight: 800;
  margin-bottom: 2rem;
  line-height: 1.2;
  color: var(--text-dark);
}
.gradient-text {
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 1.5rem;
  color: var(--text-gray);
  margin-bottom: 3rem;
  line-height: 1.6;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  background: white;
  color: var(--primary-color);
  font-weight: 600;
  border: 2px solid var(--primary-color);
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-secondary:hover {
  background: var(--bg-light);
  color: var(--primary-color);
  transform: translateY(-2px);
}

/* Services Section */
#servicios {
  padding: 6rem 2rem;
  background: linear-gradient(to bottom, white, var(--bg-light));
}

.section-title {
  text-align: center;
  margin-bottom: 5rem;
}

.section-title h2 {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  color: var(--text-dark);
}

.section-title p {
  font-size: 1.25rem;
  color: var(--text-gray);
  max-width: 768px;
  margin: 0 auto;
}

.services-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}
.service-card {
  background: white;
  padding: 2rem;
  border-radius: 16px;
  border: 1px solid var(--border-gray);
  transition: all 0.3s;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border-color: transparent;
}

.service-icon {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 12px rgba(42, 93, 140, 0.2);
  color: white;
}

.service-icon svg {
    color: white;
    width: 32px;
    height: 32px;
}

/* --- NUEVOS ESTILOS PARA ICONOS DE SERVICIOS --- */
.service-card-1 .service-icon { background: linear-gradient(to right, #3b82f6, #06b6d4); }
.service-card-2 .service-icon { background: linear-gradient(to right, #10b981, #14b8a6); }
.service-card-3 .service-icon { background: linear-gradient(to right, #8b5cf6, #a855f7); }
.service-card-4 .service-icon { background: linear-gradient(to right, #f59e0b, #f97316); }
.service-card-5 .service-icon { background: linear-gradient(to right, #f43f5e, #ec4899); }
.service-card-6 .service-icon { background: linear-gradient(to right, #4f46e5, #3b82f6); }
/* --- FIN NUEVOS ESTILOS --- */

.service-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text-dark);
}

.service-card p {
  color: var(--text-gray);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.service-features {
  list-style: none;
}

.service-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: var(--text-gray);
}

.service-features li::before {
  content: '•';
  color: var(--secondary-color);
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 1;
}

/* Why Choose Us Section */
#nosotros {
  padding: 6rem 2rem;
  background: white;
}

.features-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.feature-card {
  background: linear-gradient(to bottom, white, var(--bg-light));
  padding: 2rem;
  border-radius: 16px;
  border: 1px solid var(--border-gray);
  position: relative;
  transition: all 0.3s;
}

.feature-card .service-icon {
    margin-bottom: 1rem;
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border-color: var(--primary-color);
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 128px;
  height: 128px;
  background: linear-gradient(135deg, rgba(42, 93, 140, 0.05), rgba(78, 173, 110, 0.05));
  border-radius: 0 16px 0 100%;
}

.feature-stat {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}
.feature-stat-label {
  font-size: 0.75rem;
  color: var(--text-gray);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
}

.feature-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text-dark);
}

.feature-card p {
  font-size: 0.875rem;
  color: var(--text-gray);
  line-height: 1.6;
}

/* --- NUEVOS ESTILOS PARA SECCIÓN FAQ --- */
#faq {
    padding: 6rem 2rem;
    background: white;
}

.faq-icon-header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    border-radius: 16px;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 14px rgba(42, 93, 140, 0.39);
}

.faq-icon-header svg {
    color: white;
}

.faq-container {
    max-width: 896px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item {
    background: white;
    border-radius: 16px;
    border: 1px solid var(--border-gray);
    overflow: hidden;
    transition: all 0.3s;
}

.faq-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.faq-question {
    width: 100%;
    text-align: left;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    background: none;
    border: none;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-dark);
}

.faq-question span {
    padding-right: 1.5rem;
}

.faq-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-icon svg {
    color: white;
    transition: transform 0.3s;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
}

.faq-answer-content {
    padding: 0 1.5rem 1.5rem 1.5rem;
    color: var(--text-gray);
    line-height: 1.7;
    border-top: 1px solid var(--border-gray);
    padding-top: 1.5rem;
}
/* --- FIN NUEVOS ESTILOS FAQ --- */


/* Contact Section */
#contacto {
  padding: 6rem 2rem;
  background: linear-gradient(to bottom, var(--bg-light), white);
}

.contact-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 3rem;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-item {
  background: white;
  padding: 1.5rem;
  border-radius: 16px;
  border: 1px solid var(--border-gray);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: all 0.3s;
}

.contact-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border-color: var(--primary-color);
}

.schedule-box {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  padding: 2rem;
  border-radius: 16px;
  color: white;
  box-shadow: 0 10px 30px rgba(42, 93, 140, 0.3);
}

/* --- CAMBIO DE COLOR HORARIO --- */
.schedule-box h3 {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  color: white;
}

.schedule-box p {
  margin-bottom: 0.75rem;
  opacity: 0.9;
}

.schedule-box strong {
  font-weight: 600;
}

/* Footer */
footer {
  background: linear-gradient(135deg, var(--primary-color), #1e4a6f);
  color: white;
  padding: 4rem 2rem 2rem;
}

.footer-grid {
  max-width: 1280px;
  margin: 0 auto 3rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 3rem;
}

/* --- CAMBIO DE COLOR TÍTULOS FOOTER --- */
.footer-section h3,
.footer-section h4 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: white;
}

.footer-section p,
.footer-section a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  line-height: 1.8;
}

.footer-section a:hover {
  color: white;
}

.footer-section ul {
  list-style: none;
}

.footer-section ul li {
  margin-bottom: 0.5rem;
}

.footer-bottom {
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
}

/* Responsive */
@media (max-width: 768px) {
  h1 {
    font-size: 2.5rem;
  }
  .section-title h2 {
    font-size: 2rem;
  }
  #faq, #servicios, #nosotros, #contacto {
    padding: 4rem 1rem;
  }
}
/* Utility Classes y otros estilos que no cambian... */
.container { max-width: 1280px; margin: 0 auto; padding: 0 2rem; }
.text-center { text-align: center; }
.mt-4 { margin-top: 4rem; }
.contact-item-icon { width: 56px; height: 56px; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: white; box-shadow: 0 4px 12px rgba(42, 93, 140, 0.2); }
.contact-item h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text-dark); }
.contact-item a { color: var(--text-gray); text-decoration: none; transition: color 0.3s; }
.contact-item a:hover { color: var(--primary-color); }
.contact-form { background: white; padding: 2.5rem; border-radius: 16px; border: 1px solid var(--border-gray); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); }
.contact-form h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--text-dark); }
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--text-gray); margin-bottom: 0.5rem; }
.form-group input, .form-group textarea { width: 100%; padding: 0.75rem 1rem; border: 2px solid var(--border-gray); border-radius: 12px; font-size: 1rem; transition: all 0.3s; font-family: inherit; }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(42, 93, 140, 0.1); }
.form-group textarea { resize: vertical; min-height: 120px; }
.btn-submit { width: 100%; padding: 1rem; background: linear-gradient(to right, var(--primary-color), var(--secondary-color)); color: white; font-weight: 700; font-size: 1.125rem; border: none; border-radius: 12px; cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 14px rgba(42, 93, 140, 0.39); }
.btn-submit:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(42, 93, 140, 0.5); }
.footer-contact { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }
.footer-contact-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.social-links { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.social-link { width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; text-decoration: none; transition: all 0.3s; }
.social-link:hover { background: var(--secondary-color); transform: translateY(-4px); }
/* --- ESTILO PARA EL BOTÓN CTA DE FAQ --- */
.faq-contact-cta {
    text-align: center;
    margin-top: 4rem;
}

.faq-contact-cta p {
    font-size: 1.125rem;
    color: var(--text-gray);
    margin-bottom: 1.5rem;
}


/* --- ESTILOS PARA HEADER RESPONSIVE --- */

/* Por defecto, el menú móvil está oculto */
.mobile-menu-toggle { display: none; }
.mobile-menu { display: none; }

/* Media Query para dispositivos móviles (hasta 992px) */
@media (max-width: 992px) {
  header .container {
    justify-content: space-between;
  }

  .desktop-nav {
    display: none;
  }

  .mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
  }

  .mobile-menu-toggle .bar {
    display: block;
    width: 30px;
    height: 3px;
    background-color: var(--primary-color);
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
  }

  .mobile-menu-toggle.is-active .bar:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
  }
  .mobile-menu-toggle.is-active .bar:nth-child(2) {
    opacity: 0;
  }
  .mobile-menu-toggle.is-active .bar:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
  }
/* --- CAMBIOS AQUÍ: Posición desde la derecha y más pequeño --- */
  .mobile-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: -100%; /* Empieza fuera, a la derecha */
    width: 75%; /* Más estrecho que antes */
    max-width: 280px; /* Límite de anchura */
    height: 100vh;
    background-color: #ffffff;
    padding-top: 100px;
    box-shadow: -2px 0 10px rgba(0,0,0,0.1); /* Sombra a la izquierda */
    z-index: 1000;
    transition: right 0.35s ease-in-out; /* Animación sobre 'right' */
  }

  .mobile-menu.is-active {
    right: 0; /* Se desliza a la vista desde la derecha */
  }

  .mobile-menu a {
    color: var(--primary-color);
    font-size: 1.2rem;
    font-weight: 600;
    padding: 1rem 2.5rem; /* Ajuste de padding */
    text-decoration: none;
    text-align: left; /* Alineación a la izquierda como en la captura */
  }
  
  /* --- CAMBIO AQUÍ: Se quita el color azul al pulsar --- */
  .mobile-menu a:active,
  .mobile-menu a:focus {
      color: var(--primary-color); /* Mantiene el color original */
  }

  .mobile-menu a:hover {
    background-color: #f7f7f7;
  }

  .btn-primary-mobile {
    margin: 2rem 2.5rem;
    padding: 1rem;
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    color: white !important;
    border-radius: 12px;
    font-weight: 700;
    text-align: center;
  }
}


/* --- ESTILOS PARA LA PLANTILLA DE BLOG --- */

.main-content {
    padding: 6rem 0;
    background-color: #f9fafb; /* Un fondo suave */
}

.blog-container {
    max-width: 1200px;
}

.page-header {
    text-align: center;
    margin-bottom: 4rem;
}

.page-title {
    font-size: 3rem;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.page-subtitle {
    font-size: 1.25rem;
    color: var(--text-gray);
}

.blog-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
}

.blog-post-item {
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.blog-post-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.post-thumbnail img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.post-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.entry-title a {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    text-decoration: none;
    line-height: 1.3;
}

.entry-title a:hover {
    color: var(--primary-color);
}

.entry-meta {
    font-size: 0.875rem;
    color: var(--text-gray);
    margin: 0.5rem 0 1rem;
}

.entry-summary {
    color: var(--text-gray);
    flex-grow: 1;
    margin-bottom: 1.5rem;
}

.read-more-link {
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    align-self: flex-start;
}

/* Paginación */
.pagination {
    margin-top: 4rem;
    text-align: center;
}
.pagination .page-numbers {
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    border: 2px solid var(--border-gray);
    border-radius: 8px;
    color: var(--text-dark);
    text-decoration: none;
    transition: all 0.3s;
}
.pagination .page-numbers:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.pagination .page-numbers.current {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}
/* --- AJUSTES FINALES Y CORRECCIONES --- */

/* 1. Corrección de anclaje para el formulario de contacto */
/* Crea un espacio superior para que el header fijo no tape el título */
#contacto {
  scroll-margin-top: 100px; 
}

/* 2. Evita que el texto de los botones se ponga azul al hacer clic */
.btn-primary:active, .btn-primary:focus,
.btn-secondary:active, .btn-secondary:focus {
  color: white; /* Mantiene el texto blanco en los botones principales */
}

/* =================================================================== */
/* --- AJUSTES FINALES PARA MÓVIL Y BOTONES (Versión 2) --- */
/* =================================================================== */

/* 1. SOLUCIÓN SCROLL Y BOTONES */

/* Aumentamos el margen para asegurar que el scroll baje hasta el formulario */
#contacto {
  scroll-margin-top: 120px; 
}

/* Efecto para TODOS los botones de la web */
.btn-primary, .btn-secondary, .btn-primary-mobile {
  /* Transición suave para el efecto de crecimiento */
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* 
  Al pasar el ratón o pulsar (hover, active, focus):
  - Hacemos el botón un poco más grande (transform: scale).
  - FORZAMOS que el color del texto NO cambie a azul.
  - Añadimos una sombra sutil para dar feedback.
*/
.btn-primary:hover, .btn-primary:active, .btn-primary:focus,
.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus,
.btn-primary-mobile:hover, .btn-primary-mobile:active, .btn-primary-mobile:focus {
  color: white !important; /* Importante para forzar que el texto sea siempre blanco */
  transform: scale(1.05);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

/* 2. SOLUCIÓN MENÚ MÓVIL MÁS CORTO */

/* Hacemos los cambios dentro de la media query para que solo afecten a móviles */
@media (max-width: 992px) {
  
  .mobile-menu {
    /* CAMBIO: Posición para que aparezca justo debajo del header */
    top: 85px; 
    
    /* CAMBIO: Altura automática para que se ajuste al contenido */
    height: auto; 
    
    /* CAMBIO: Quitamos el padding superior que ya no es necesario */
    padding-top: 1rem;
    
    /* Añadimos padding inferior y un borde redondeado para que se vea bien */
    padding-bottom: 2rem;
    border-bottom-left-radius: 16px;
  }
  
  /* Evitamos que los enlaces del menú móvil cambien de color al pulsarlos */
  .mobile-menu a:active,
  .mobile-menu a:focus {
      color: var(--primary-color);
      background-color: transparent; /* Evita cualquier fondo al pulsar */
  }

}

/* --- AJUSTES DEL HEADER PARA PÁGINAS INTERNAS Y CONTENIDO (ACTUALIZADO) --- */

/* 1. Asegura que el header tenga fondo blanco en páginas que NO son la de inicio */
body:not(.home) .main-header {
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: sticky; /* Nos aseguramos que sea pegajoso */
    top: 0;
    z-index: 1000;
}
/* 2. Añade un espacio superior al contenido principal para que no lo tape el header */
.main-content, /* Selector para tu Plantilla Blog */
#primary /* Selector para las páginas de entradas y otras páginas por defecto de WordPress */
{
    padding-top: 120px; /* Ajusta este valor si la altura de tu header es diferente */
}


/* ==========================================================================
   SOLUCIONES BLOG ABASCAL
   ========================================================================== */

/* 1. Hace que los títulos de las entradas en la cuadrícula sean siempre visibles */
.blog-posts-grid .blog-post-item .entry-title a {
    opacity: 1 !important; /* Forza la visibilidad */
    color: #222222; /* Elige un color oscuro para el título */
    text-decoration: none;
    font-size: 1.2rem; /* Ajusta el tamaño si lo necesitas */
}

/* 2. Opcional: Cambia el color del título al pasar el ratón por encima */
.blog-posts-grid .blog-post-item .entry-title a:hover {
    color: #0056b3; /* Elige tu color de acento o enlace */
}


/* ===========================================================
   AÑADIDOS NUEVOS (NO TOCAN LO ANTERIOR)
   =========================================================== */

/* Más espacio debajo de la sección de contacto para separar del footer */
#contacto {
  padding-bottom: 8rem;
}

/* Botón de envío de formularios (WPForms y Contact Form 7)
   con el mismo estilo que tus botones principales */
div.wpforms-container-full .wpforms-form input[type=submit],
div.wpforms-container-full .wpforms-form button[type=submit],
.wpcf7-form input[type=submit],
.wpcf7-form button[type=submit],
.wpcf7-submit {
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color)) !important;
  color: #ffffff !important;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  padding: 1rem 2rem;
  font-size: 1.05rem;
  cursor: pointer;
  width: 100%;
  box-shadow: 0 4px 14px rgba(42, 93, 140, 0.39);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

div.wpforms-container-full .wpforms-form input[type=submit]:hover,
div.wpforms-container-full .wpforms-form button[type=submit]:hover,
.wpcf7-form input[type=submit]:hover,
.wpcf7-form button[type=submit]:hover,
.wpcf7-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(42, 93, 140, 0.5);
}


/* =========================================
   AJUSTE ALTURA FORMULARIO DE CONTACTO
   ========================================= */

/* 1. Que la sección de contacto sea más baja
      (menos espacio arriba y abajo) */
#contacto {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;  /* antes tenías hasta 8rem */
}

/* 2. Que la tarjeta del formulario sea un poco más compacta */
.contact-form,
div.wpforms-container-full .wpforms-form {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

/* 3. Menos espacio entre campos del formulario */
div.wpforms-container-full .wpforms-field,
.wpcf7-form .form-group {
    margin-bottom: 0.75rem !important;
}

/* 4. Hacer el campo de mensaje más bajito */
div.wpforms-container-full .wpforms-field-textarea textarea,
.wpcf7-form textarea,
.form-group textarea {
    min-height: 100px !important;
    height: 100px !important;
}

/* 5. Un poco menos de espacio bajo el título del formulario */
.contact-form h3 {
    margin-bottom: 1rem !important;
}


/* =========================================
   FORMULARIO DE CONTACTO MÁS CORTO
   (solo cuando #contacto es la tarjeta del form)
   ========================================= */

/* Hace la tarjeta del formulario más compacta */
#contacto.contact-form {
    padding: 1.75rem 2rem !important;   /* menos relleno arriba/abajo */
    scroll-margin-top: 120px;           /* que el ancla siga funcionando bien */
}

/* Menos espacio debajo del título del formulario */
#contacto.contact-form h3 {
    margin-bottom: 1rem !important;
}

/* Menos espacio entre campos del formulario */
#contacto.contact-form .wpcf7-form p,
#contacto.contact-form .wpcf7-form .form-group,
#contacto.contact-form div.wpforms-container-full .wpforms-field {
    margin-bottom: 0.75rem !important;
}

/* Campo de mensaje más bajito */
#contacto.contact-form .wpcf7-form textarea,
#contacto.contact-form div.wpforms-container-full .wpforms-field-textarea textarea {
    min-height: 100px !important;
    height: 100px !important;
}


/* =========================================
   ICONOS SECCIÓN "¿POR QUÉ MÁS DE 150
   COMUNIDADES CONFÍAN EN NOSOTROS?"
   ========================================= */

#nosotros .feature-card .service-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 14px rgba(42, 93, 140, 0.28);
    color: #ffffff; /* hace que el trazo del SVG sea blanco */
}

/* Icono 1: Ahorro */
#nosotros .features-grid .feature-card:nth-child(1) .service-icon {
    background: linear-gradient(to right, #3b82f6, #06b6d4);
}

/* Icono 2: Transparencia */
#nosotros .features-grid .feature-card:nth-child(2) .service-icon {
    background: linear-gradient(to right, #10b981, #14b8a6);
}

/* Icono 3: Disponibilidad 24/7 */
#nosotros .features-grid .feature-card:nth-child(3) .service-icon {
    background: linear-gradient(to right, #f59e0b, #f97316);
}

/* Aseguramos tamaño y color del SVG */
#nosotros .feature-card .service-icon svg {
    width: 32px;
    height: 32px;
    color: #ffffff;
}


/* =========================================
   ICONOS SECCIÓN "¿POR QUÉ MÁS DE 150
   COMUNIDADES CONFÍAN EN NOSOTROS?"
   ========================================= */

#nosotros .feature-card .service-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 14px rgba(42, 93, 140, 0.28);
    color: #ffffff; /* hace que el trazo del SVG sea blanco */
}

/* Icono 1: Ahorro */
#nosotros .features-grid .feature-card:nth-child(1) .service-icon {
    background: linear-gradient(to right, #3b82f6, #06b6d4);
}

/* Icono 2: Transparencia */
#nosotros .features-grid .feature-card:nth-child(2) .service-icon {
    background: linear-gradient(to right, #10b981, #14b8a6);
}

/* Icono 3: Disponibilidad 24/7 */
#nosotros .features-grid .feature-card:nth-child(3) .service-icon {
    background: linear-gradient(to right, #f59e0b, #f97316);
}

/* Aseguramos tamaño y color del SVG */
#nosotros .feature-card .service-icon svg {
    width: 32px;
    height: 32px;
    color: #ffffff;
}

/* ===========================
   HEADER RESPONSIVE
   =========================== */

/* Por defecto (escritorio) */
.mobile-menu-toggle { display: none; }
.mobile-menu { display: none; }

/* Hasta 992px: mostramos hamburguesa y adaptamos header */
@media (max-width: 992px) {

  header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: #ffffff;
  }

  header .container {
    justify-content: space-between;
    padding-inline: 1rem;   /* espacio a los lados en móvil */
  }

  /* Ocultamos menú de escritorio */
  .desktop-nav {
    display: none;
  }

  /* Mostramos botón hamburguesa */
  .mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(42, 93, 140, 0.12);
    background: #ffffff;
    color: #2A5D8C;
    cursor: pointer;
  }

  /* Menú desplegable móvil (se abre con la clase .open desde JS) */
  .mobile-menu {
    position: absolute;
    top: 72px; /* justo debajo del header */
    left: 0;
    right: 0;
    background: #ffffff;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
    padding: 1rem 1.25rem 1.5rem;
    display: none; /* por defecto oculto */
  }

  .mobile-menu.open {
    display: block;
  }

  .mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mobile-menu li + li {
    margin-top: 0.75rem;
  }
}


/* ===========================
   CONTACTO – ESPACIO LATERAL EN MÓVIL
   =========================== */

@media (max-width: 768px) {

  /* Separar tarjetas y formulario de los bordes */
  .contact-card,
  .schedule-box,
  #contacto.contact-form {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  /* Un poco más de separación entre bloques */
  .contact-grid {
    row-gap: 1.5rem;
  }
}

/* =====================================================
   1. HEADER ASTRA VISIBLE Y ÚTIL EN MÓVIL
   ===================================================== */

/* Fondo blanco en todas las páginas que no sean la home */
body:not(.home) .main-header {
    position: relative;
    background-color: #ffffff;
}

/* Ajustes específicos para móvil */
@media (max-width: 920px) {

    /* Barra superior fija, visible y con sombra suave */
    .main-header-bar {
        position: sticky;
        top: 0;
        z-index: 999;
        background: #ffffff;
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
    }

    .main-header-bar .main-header-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Botón hamburguesa siempre visible */
    .main-header-bar .main-header-menu-toggle {
        display: flex !important;
        margin-left: auto;
        color: #2A5D8C !important;
        align-items: center;
        justify-content: center;
    }

    /* Menú móvil de Astra: que no tape toda la pantalla */
    .ast-mobile-popup-drawer.active {
        top: 64px;                           /* debajo del header */
        bottom: auto;
        max-height: calc(100vh - 64px);      /* no ocupa todo el alto */
        overflow-y: auto;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
        background: #ffffff;
    }
}

/* =====================================================
   2. FORMULARIO COMPACTO + ESPACIO CON EL FOOTER
   ===================================================== */

/* Tarjeta del formulario en todas las resoluciones */
#contacto.contact-form {
    padding: 1.75rem 2rem !important;  /* compacta pero cómoda */
    scroll-margin-top: 120px;          /* que el ancla no quede tapada por el header */
}

/* Más espacio con el footer en escritorio */
@media (min-width: 769px) {
    #contacto.contact-form {
        margin-bottom: 4rem;
    }
}

/* Menos espacio debajo del título del formulario */
#contacto.contact-form h3 {
    margin-bottom: 1rem !important;
}

/* Menos separación entre campos del formulario */
#contacto.contact-form .wpcf7-form p,
#contacto.contact-form .wpcf7-form .form-group,
#contacto.contact-form div.wpforms-container-full .wpforms-field {
    margin-bottom: 0.75rem !important;
}

/* Textarea más baja */
#contacto.contact-form .wpcf7-form textarea,
#contacto.contact-form div.wpforms-container-full .wpforms-field-textarea textarea {
    min-height: 100px !important;
    height: 100px !important;
}

/* =====================================================
   3. SECCIÓN DE CONTACTO AJUSTADA EN MÓVIL
      (Dirección / Teléfono / Email / Horario / Formulario)
   ===================================================== */

@media (max-width: 768px) {

    /* Margen lateral común para todas las cajas de contacto */
    .contact-grid {
        padding-left: 1rem;
        padding-right: 1rem;
        row-gap: 1.5rem;
        margin-bottom: 2.5rem;  /* aire antes del footer en móvil */
    }

    /* Aseguramos que cada bloque ocupe todo el ancho del contenedor */
    .contact-grid > * {
        width: 100%;
    }
}

/* =====================================================
   1. HEADER ASTRA VISIBLE Y COMPACTO EN MÓVIL
   ===================================================== */

/* Fondo blanco en todas las páginas que no sean la home */
body:not(.home) .main-header {
    position: relative;
    background-color: #ffffff;
}

/* Ajustes específicos para móvil */
@media (max-width: 921px) {

    /* Barra superior fija, visible y con sombra suave */
    .site-header,
    .main-header-bar {
        position: sticky;
        top: 0;
        z-index: 999;
        background: #ffffff;
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
    }

    /* Altura y padding contenidos: barra no muy grande */
    .main-header-bar,
    .ast-mobile-header-wrap .ast-primary-header-bar {
        min-height: 56px;
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
    }

    /* Alinear logo + hamburguesa en la misma línea */
    .main-header-bar .main-header-container,
    .ast-mobile-header-wrap .ast-builder-grid-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Botón hamburguesa siempre visible y de color azul */
    .main-header-bar .main-header-menu-toggle,
    .ast-mobile-header-wrap .main-header-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        color: #2A5D8C !important;
        font-size: 20px;
    }

    /* Menú móvil de Astra: que no tape toda la pantalla */
    .ast-mobile-popup-drawer.active {
        top: 56px;                           /* justo debajo del header */
        bottom: auto;
        max-height: calc(100vh - 56px);      /* no ocupa todo el alto */
        overflow-y: auto;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
        background: #ffffff;
    }
}

/* =====================================================
   2. FORMULARIO MÁS COMPACTO + ESPACIO CON EL FOOTER
   ===================================================== */

/* Tarjeta del formulario en todas las resoluciones */
#contacto.contact-form {
    padding: 1.75rem 2rem !important;
    scroll-margin-top: 120px;          /* que el ancla no quede tapada por el header */
}

/* Más espacio con el footer en escritorio */
@media (min-width: 769px) {
    #contacto.contact-form {
        margin-bottom: 4rem;
    }
}

/* Menos espacio bajo el título del formulario */
#contacto.contact-form h3 {
    margin-bottom: 1rem !important;
}

/* Menos separación entre campos del formulario */
#contacto.contact-form .wpcf7-form p,
#contacto.contact-form .wpcf7-form .form-group,
#contacto.contact-form div.wpforms-container-full .wpforms-field {
    margin-bottom: 0.75rem !important;
}

/* Textarea algo más baja */
#contacto.contact-form .wpcf7-form textarea,
#contacto.contact-form div.wpforms-container-full .wpforms-field-textarea textarea {
    min-height: 100px !important;
    height: 100px !important;
}

/* =====================================================
   3. SECCIÓN DE CONTACTO EN MÓVIL
      (Dirección / Teléfono / Email / Horario / Formulario)
   ===================================================== */

@media (max-width: 768px) {

    /* Contenedor general de la zona de contacto */
    .contact-grid {
        padding-left: 1rem;
        padding-right: 1rem;
        row-gap: 1.5rem;
        margin-bottom: 2.5rem;  /* aire antes del footer en móvil */
    }

    /* Cada bloque ocupa ancho completo del contenedor */
    .contact-grid > * {
        width: 100%;
    }

    /* Formularios y tarjetas centrados y con el mismo margen a ambos lados */
    .contact-card,
    .schedule-box,
    #contacto.contact-form {
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Un pelín menos de padding lateral dentro del formulario en móvil,
       para que visualmente parezca más centrado */
    #contacto.contact-form {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
}


/* =====================================================
   HEADER MÓVIL ASTRA – QUE SE VEA Y NO SEA ENORME
   ===================================================== */

/* Astra añade la clase .ast-header-break-point cuando entra en modo móvil/tablet */
body.ast-header-break-point .site-header,
body.ast-header-break-point .main-header-bar {
    position: sticky;
    top: 0;
    z-index: 999;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}

/* Contenedor logo + hamburguesa compacto */
body.ast-header-break-point .main-header-bar .ast-builder-grid-row,
body.ast-header-break-point .ast-mobile-header-wrap .ast-builder-grid-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 1rem;
    min-height: 56px;
}

/* Ocultamos el menú de escritorio en móvil */
body.ast-header-break-point .main-header-bar .main-header-bar-navigation {
    display: none;
}

/* Mostramos SIEMPRE el botón de menú móvil (hamburguesa) */
body.ast-header-break-point .main-header-menu-toggle,
body.ast-header-break-point .ast-mobile-menu-trigger,
body.ast-header-break-point .ast-mobile-menu-trigger-minimal,
body.ast-header-break-point .ast-button-wrap .menu-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    color: #2A5D8C !important;                 /* azul visible */
    background: #ffffff;
    border-radius: 999px;
    border: 1px solid rgba(42, 93, 140, 0.16);
}

/* Tamaño del icono dentro del botón */
body.ast-header-break-point .main-header-menu-toggle:before,
body.ast-header-break-point .ast-mobile-menu-trigger-minimal:before {
    font-size: 20px;
}

/* Cajón del menú desplegable: debajo del header y sin ocupar toda la pantalla */
body.ast-header-break-point .ast-mobile-popup-drawer.active {
    top: 56px;
    bottom: auto;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
    background: #ffffff;
}

/* =========================================
   HEADER (ESCRITORIO + MÓVIL HAMBURGUESA)
   ========================================= */

.main-header {
    width: 100%;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.main-header .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.6rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo */
.main-header .logo-link img {
    height: 40px;
    width: auto;
}

/* NAV ESCRITORIO */
.main-header .desktop-nav {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.main-header .desktop-nav a {
    font-size: 0.95rem;
    text-decoration: none;
}

/* Botón de teléfono */
.main-header .desktop-nav .btn-primary {
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
}

/* BOTÓN HAMBURGUESA: SOLO SE VERÁ EN MÓVIL */
.mobile-menu-toggle {
    display: none; /* oculto en escritorio */
    border: 1px solid rgba(15, 23, 42, 0.14);
    background: #ffffff;
    border-radius: 999px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

.mobile-menu-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background: #2A5D8C;
    border-radius: 999px;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.mobile-menu-toggle span:nth-child(2) {
    margin: 4px 0;
}

/* Estado "X" cuando está abierto */
.mobile-menu-toggle.is-open span:first-child {
    transform: translateY(6px) rotate(45deg);
}
.mobile-menu-toggle.is-open span:nth-child(2) {
    opacity: 0;
}
.mobile-menu-toggle.is-open span:last-child {
    transform: translateY(-6px) rotate(-45deg);
}

/* =========================
   MODO MÓVIL
   ========================= */
@media (max-width: 920px) {

    .main-header .container {
        padding: 0.45rem 1rem;
        /* Logo a la izquierda, hamburguesa a la derecha */
        flex-direction: row;
        align-items: center;
    }

    /* Mostrar botón hamburguesa en móvil */
    .mobile-menu-toggle {
        display: flex;
        margin-left: 1rem;
    }

    /* Menú oculto por defecto en móvil */
    .main-header .desktop-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;                 /* oculto hasta que se abre */
        flex-direction: column;
        align-items: flex-start;
        background: #ffffff;
        padding: 0.75rem 1.25rem 1rem;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
        border-radius: 0 0 18px 18px;
        row-gap: 0.25rem;
    }

    /* Cuando el botón activa el menú */
    .main-header .desktop-nav.is-open {
        display: flex;
    }

    .main-header .desktop-nav a {
        width: 100%;
        padding: 0.35rem 0;
        font-size: 0.95rem;
    }

    .main-header .desktop-nav .btn-primary {
        align-self: stretch;
        text-align: center;
        margin-top: 0.5rem;
    }

    /* Evitar que la página se desplace detrás del menú */
    body.mobile-menu-open {
        overflow: hidden;
    }
}
/* 1) El botón hamburguesa / X siempre blanco, sin fondo azul */
.mobile-menu-toggle,
.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus,
.mobile-menu-toggle.is-open {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

.mobile-menu-toggle span {
    background: #2A5D8C; /* líneas siempre azules */
}

/* 2) Menú desplegable con márgenes y sin tapar media pantalla */
@media (max-width: 920px) {
    .main-header .desktop-nav {
        left: 0.75rem;                  /* margen izquierdo */
        right: 0.75rem;                 /* margen derecho */
        top: calc(100% + 0.35rem);      /* pequeño espacio debajo del header */
        max-height: 50vh;               /* como mucho la mitad de la altura de la pantalla */
        overflow-y: auto;               /* si se llena, hace scroll dentro del menú */
        border-radius: 0 0 14px 14px;
        padding: 0.65rem 1rem 0.9rem;
    }
}


/* PANEL DEL MENÚ MÓVIL PEGADO A LA DERECHA */
@media (max-width: 920px) {
    .main-header .desktop-nav {
        left: auto !important;              /* anulamos el left anterior */
        right: 0.75rem !important;          /* margen a la derecha */
        width: min(280px, 78vw);            /* ancho máximo, pegado a la derecha */
        top: calc(100% + 0.4rem);           /* pequeño hueco bajo el header */
        max-height: 45vh;                   /* más bajito para no tapar media pantalla */
        overflow-y: auto;
        border-radius: 16px;
        padding: 0.7rem 1rem 0.9rem;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.20);
    }
}
/* HEADER MÁS ALTO EN ESCRITORIO */
@media (min-width: 921px) {
    .main-header {
        padding-top: 18px;   /* aumenta estos valores si lo quieres aún más alto */
        padding-bottom: 18px;
    }

    /* por si tu header lleva un contenedor interno */
    .main-header > .container,
    .main-header > .wrap,
    .main-header-inner {
        min-height: 86px;    /* altura mínima cómoda para escritorio */
        display: flex;
        align-items: center;
    }
}
/* HEADER MÁS ALTO EN ESCRITORIO */
@media (min-width: 921px) {
    .main-header {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .main-header > .container,
    .main-header > .wrap,
    .main-header-inner {
        min-height: 86px;
        display: flex;
        align-items: center;
    }
}
/* AJUSTE HEADER SOLO EN ESCRITORIO */
@media (min-width: 921px) {

    /* Barra del header: más baja */
    .main-header {
        padding-top: 8px;      /* menos altura arriba */
        padding-bottom: 8px;   /* menos altura abajo */
    }

    .main-header > .container,
    .main-header > .wrap,
    .main-header-inner {
        min-height: auto;      /* quitamos alturas mínimas grandes */
        display: flex;
        align-items: center;
    }

    /* LOGO más grande */
    .main-header img {
        max-height: 64px;      /* súbelo a 68–72px si lo quieres aún más grande */
    }

    /* TEXTO DEL MENÚ más grande */
    .main-header .desktop-nav ul li a {
        font-size: 16px;       /* puedes probar 17px si lo ves pequeño */
        font-weight: 500;
    }

    /* BOTÓN TELÉFONO más grande */
    .main-header .desktop-nav a[href^="tel:"] {
        font-size: 16px;
        padding: 0.65rem 1.9rem;
    }
}


/* ICONO DEL BOTÓN TELÉFONO MÁS GRANDE EN ESCRITORIO */
@media (min-width: 921px) {

    .main-header .desktop-nav a[href^="tel:"] i,
    .main-header .desktop-nav a[href^="tel:"] svg {
        width: 1.3em;      /* tamaño del icono */
        height: 1.3em;
        margin-right: 0.45rem;  /* separa un poco icono y texto */
    }
}
/* LOGO UN 15% MÁS PEQUEÑO EN ESCRITORIO, HEADER BAJITO */
@media (min-width: 921px) {

    .main-header {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .main-header .logo-link img {
        height: auto;
        max-height: 58px !important;  /* antes 68px */
        width: auto;
    }

    .main-header .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

/* En móvil también un 15% menos */
@media (max-width: 920px) {
    .main-header .logo-link img {
        height: auto;
        max-height: 39px !important;  /* antes 46px */
        width: auto;
    }
}
#inicio {
    position: relative;
    /* Aseguramos que la imagen ocupe todo el fondo */
    background-image: url('fondo_landing_page.png');
    background-size: cover;       /* Rellena todo el hueco sin deformar */
    background-position: center center; /* Centra lo importante de la foto */
    background-repeat: no-repeat;
    
    /* Filtro CSS directo a la imagen de fondo del div principal: */
    /* Esto pone la foto en blanco y negro forzosamente antes de ponerle nada encima */
    /* Nota: Este comando filter funciona en navegadores modernos */
    
    color: #ffffff;
    padding: 160px 20px 120px 20px;
    text-align: center;
    z-index: 1;
}

/* CAPA OSCURA ENCIMA (OVERLAY) 
   Esto es lo que hace que el texto se lea y la imagen se vea "de fondo" 
   sin necesidad de editar la foto original. */
#inicio::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* COLOR DEL FILTRO */
    /* Aquí controlas la oscuridad. 
       0.8 = Muy oscuro (la imagen se ve poco)
       0.6 = Medio
       0.4 = Claro (la imagen se ve mucho) 
       
       Al ponerlo Negro (0,0,0) con opacidad, la imagen de abajo 
       se oscurece y se ve elegante. */
    background-color: rgba(15, 23, 42, 0.85); /* Usando tu azul oscuro casi opaco */
    
    /* Aseguramos que esta capa esté DETRÁS del texto pero ENCIMA de la foto */
    z-index: -1; 
}

/* TEXTO */
#inicio h1, 
#inicio p {
    position: relative;
    z-index: 2;
    text-shadow: none; /* Limpio sin sombras */
}