/* ============================================================
   METADIGITAL THEME — ESTILOS PRINCIPALES
   ============================================================
   Orden:
   1. Google Fonts import
   2. Reset y base
   3. Tipografía global
   4. Layout (contenedor, grillas)
   5. Componentes reutilizables (botones, badges, cards)
   6. Header
   7. Footer
   8. Secciones del home
   9. Páginas internas
   10. Utilidades
   ============================================================ */


/* ------------------------------------------------------------
   1. GOOGLE FONTS — EDITAR POR PROYECTO
   Reemplazar según fuentes elegidas en variables.css
------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:wght@400;500;600&display=swap');


/* ------------------------------------------------------------
   2. RESET Y BASE
------------------------------------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-base);
  font-weight: var(--peso-normal);
  line-height: var(--leading-normal);
  color: var(--color-texto);
  background-color: var(--color-fondo);
  -webkit-font-smoothing: antialiased;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-primario);
  text-decoration: none;
  transition: color var(--transicion-rapida);
}

a:hover { color: var(--color-primario-claro); }

ul, ol { list-style: none; }

button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}


/* ------------------------------------------------------------
   3. TIPOGRAFÍA GLOBAL
------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--fuente-titulos);
  font-weight: var(--peso-bold);
  line-height: var(--leading-apretado);
  color: var(--color-texto);
}

h1 { font-size: var(--texto-3xl); }
h2 { font-size: var(--texto-2xl); }
h3 { font-size: var(--texto-xl); }
h4 { font-size: var(--texto-lg); }
h5 { font-size: var(--texto-md); }
h6 { font-size: var(--texto-base); }

p { margin-bottom: var(--espacio-4); }
p:last-child { margin-bottom: 0; }

@media (min-width: 1024px) {
  h1 { font-size: var(--texto-5xl); }
  h2 { font-size: var(--texto-3xl); }
  h3 { font-size: var(--texto-2xl); }
  h4 { font-size: var(--texto-xl); }
}


/* ------------------------------------------------------------
   4. LAYOUT
------------------------------------------------------------ */
.md-contenedor {
  width: 100%;
  max-width: var(--contenedor-max);
  margin-inline: auto;
  padding-inline: var(--contenedor-padding);
}

.md-contenedor--angosto {
  max-width: var(--contenedor-angosto);
}

.md-seccion {
  padding-block: var(--seccion-padding-v-sm);
}

@media (min-width: 1024px) {
  .md-contenedor { padding-inline: var(--espacio-8); }
  .md-seccion    { padding-block: var(--seccion-padding-v); }
}

/* Fondos alternos para secciones */
.md-seccion--fondo-suave { background-color: var(--color-fondo-suave); }
.md-seccion--fondo-primario {
  background-color: var(--color-primario);
  color: var(--color-texto-invertido);
}
.md-seccion--fondo-primario h2,
.md-seccion--fondo-primario h3 { color: var(--color-texto-invertido); }


/* ------------------------------------------------------------
   5. COMPONENTES REUTILIZABLES
------------------------------------------------------------ */

/* --- Encabezado de sección --- */
.md-seccion-header {
  text-align: center;
  margin-bottom: var(--espacio-12);
}

.md-seccion-header__eyebrow {
  display: inline-block;
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  color: var(--color-secundario);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--espacio-3);
}

.md-seccion-header__titulo {
  margin-bottom: var(--espacio-4);
}

.md-seccion-header__subtitulo {
  font-size: var(--texto-md);
  color: var(--color-texto-suave);
  max-width: 600px;
  margin-inline: auto;
}

/* --- Botones --- */
.md-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  padding: var(--btn-padding);
  font-size: var(--btn-fuente-size);
  font-weight: var(--btn-fuente-peso);
  font-family: var(--fuente-cuerpo);
  border-radius: var(--btn-radio);
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--btn-transicion),
    color var(--btn-transicion),
    border-color var(--btn-transicion),
    transform var(--btn-transicion),
    box-shadow var(--btn-transicion);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}

.md-btn:hover { transform: translateY(-1px); }
.md-btn:active { transform: translateY(0); }

.md-btn--primario {
  background-color: var(--btn-primario-bg);
  color: var(--btn-primario-texto);
}
.md-btn--primario:hover {
  background-color: var(--btn-primario-hover-bg);
  color: var(--btn-primario-texto);
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}

.md-btn--outline {
  background-color: transparent;
  color: var(--btn-outline-texto);
  border-color: var(--btn-outline-borde);
}
.md-btn--outline:hover {
  background-color: var(--btn-outline-hover-bg);
  color: var(--btn-outline-hover-texto);
}

.md-btn--outline-blanco {
  background-color: transparent;
  color: #ffffff;
  border-color: #ffffff;
}
.md-btn--outline-blanco:hover {
  background-color: #ffffff;
  color: var(--color-primario);
}

.md-btn--lg { padding: var(--btn-padding-lg); font-size: var(--texto-md); }
.md-btn--sm { padding: 0.5rem 1.25rem; font-size: var(--texto-sm); }

/* Flecha inline en botones */
.md-btn__flecha {
  display: inline-block;
  transition: transform var(--transicion-rapida);
}
.md-btn:hover .md-btn__flecha { transform: translateX(4px); }


/* ------------------------------------------------------------
   6. HEADER
------------------------------------------------------------ */
.md-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-altura);
  background-color: var(--header-bg);
  box-shadow: var(--header-sombra);
  display: flex;
  align-items: center;
  transition: background-color var(--transicion-normal), box-shadow var(--transicion-normal);
}

.md-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.md-header__logo img {
  height: 40px;
  width: auto;
  object-fit: contain;
}

/* Navegación */
.md-nav {
  display: none; /* Mobile: oculto por defecto */
}

.md-nav__lista {
  display: flex;
  align-items: center;
  gap: var(--espacio-8);
}

.md-nav__enlace {
  font-size: var(--texto-base);
  font-weight: var(--peso-medio);
  color: var(--header-texto);
  transition: color var(--transicion-rapida);
  position: relative;
}

.md-nav__enlace::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-secundario);
  transition: width var(--transicion-normal);
}

.md-nav__enlace:hover,
.md-nav__enlace.activo { color: var(--color-primario); }

.md-nav__enlace:hover::after,
.md-nav__enlace.activo::after { width: 100%; }

/* Botón hamburguesa mobile */
.md-header__hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: var(--espacio-2);
}

.md-header__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-texto);
  transition: transform var(--transicion-normal), opacity var(--transicion-normal);
}

/* Menú mobile abierto */
.md-header.menu-abierto .md-header__hamburger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.md-header.menu-abierto .md-header__hamburger span:nth-child(2) {
  opacity: 0;
}
.md-header.menu-abierto .md-header__hamburger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Menú mobile desplegado */
.md-nav--mobile-abierto {
  display: block;
  position: absolute;
  top: var(--header-altura);
  left: 0;
  right: 0;
  background: var(--header-bg);
  box-shadow: var(--header-sombra);
  padding: var(--espacio-6) var(--contenedor-padding);
}

.md-nav--mobile-abierto .md-nav__lista {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espacio-5);
}

@media (min-width: 1024px) {
  .md-nav { display: block; }
  .md-header__hamburger { display: none; }
}

.md-header__cta { display: none; }
@media (min-width: 768px) { .md-header__cta { display: inline-flex; } }


/* ------------------------------------------------------------
   7. FOOTER
------------------------------------------------------------ */
.md-footer {
  background-color: var(--color-primario-oscuro);
  color: rgba(255,255,255,0.75);
  padding-block: var(--espacio-16) var(--espacio-8);
}

.md-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espacio-10);
  margin-bottom: var(--espacio-12);
}

@media (min-width: 768px) {
  .md-footer__grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.md-footer__logo { height: 36px; width: auto; margin-bottom: var(--espacio-4); }

.md-footer__tagline {
  font-size: var(--texto-sm);
  line-height: var(--leading-suelto);
  margin-bottom: var(--espacio-6);
}

.md-footer__redes {
  display: flex;
  gap: var(--espacio-3);
}

.md-footer__red {
  width: 36px;
  height: 36px;
  border-radius: var(--radio-pill);
  border: 1px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.75);
  transition: background-color var(--transicion-rapida), color var(--transicion-rapida);
}

.md-footer__red:hover {
  background-color: var(--color-secundario);
  color: #ffffff;
  border-color: var(--color-secundario);
}

.md-footer__col-titulo {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--espacio-5);
}

.md-footer__lista li { margin-bottom: var(--espacio-3); }

.md-footer__enlace {
  font-size: var(--texto-sm);
  color: rgba(255,255,255,0.65);
  transition: color var(--transicion-rapida);
}
.md-footer__enlace:hover { color: #ffffff; }

.md-footer__contacto-item {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  margin-bottom: var(--espacio-3);
  font-size: var(--texto-sm);
  color: rgba(255,255,255,0.65);
}

.md-footer__base {
  padding-top: var(--espacio-6);
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  align-items: center;
  text-align: center;
  font-size: var(--texto-sm);
  color: rgba(255,255,255,0.4);
}

@media (min-width: 768px) {
  .md-footer__base {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.md-footer__credito a { color: rgba(255,255,255,0.4); }
.md-footer__credito a:hover { color: var(--color-secundario); }


/* ------------------------------------------------------------
   8. SECCIONES DEL HOME
------------------------------------------------------------ */

/* --- 8.1 HERO --- */
.md-hero {
  position: relative;
  min-height: var(--hero-min-height);
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--color-primario-oscuro);
}

.md-hero__bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.md-hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
  z-index: 1;
}

.md-hero__contenido {
  position: relative;
  z-index: 2;
  color: var(--hero-texto-color);
  max-width: 720px;
  padding-block: var(--espacio-20);
}

.md-hero__eyebrow {
  display: inline-block;
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  color: var(--color-secundario);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--espacio-4);
}

.md-hero__titulo {
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.1;
  color: #ffffff;
  margin-bottom: var(--espacio-6);
}

.md-hero__titulo span { color: var(--color-secundario); }

.md-hero__subtitulo {
  font-size: var(--texto-md);
  color: rgba(255,255,255,0.85);
  line-height: var(--leading-suelto);
  margin-bottom: var(--espacio-8);
  max-width: 580px;
}

.md-hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-4);
}

/* --- 8.2 LOGOS DE CLIENTES --- */
.md-logos {
  padding-block: var(--espacio-10);
  border-bottom: 1px solid var(--color-borde-suave);
}

.md-logos__intro {
  text-align: center;
  font-size: var(--texto-sm);
  color: var(--color-texto-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--espacio-8);
}

.md-logos__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-8) var(--espacio-12);
}

.md-logos__item img {
  height: 36px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.5;
  transition: filter var(--transicion-normal), opacity var(--transicion-normal);
}

.md-logos__item img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* --- 8.3 SERVICIOS EN CARDS (vitrina) --- */
.sc-header-split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.md-servicios-cards__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espacio-6);
}

@media (min-width: 768px) {
  .md-servicios-cards__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .md-servicios-cards__grid { grid-template-columns: repeat(3, 1fr); }
}

.md-servicio-card {
  background: var(--color-fondo);
  border: var(--card-borde);
  border-radius: var(--card-radio);
  padding: var(--card-padding);
  box-shadow: var(--card-sombra);
  transition: box-shadow var(--transicion-normal), transform var(--transicion-normal);
  display: flex;
  flex-direction: column;
}

.md-servicio-card:hover {
  box-shadow: var(--card-sombra-hover);
  transform: translateY(-4px);
}

.md-servicio-card__icono {
  width: 52px;
  height: 52px;
  background-color: var(--color-primario-suave);
  border-radius: var(--radio-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--espacio-5);
  color: var(--color-primario);
  font-size: 1.5rem;
}

.md-servicio-card__titulo {
  font-size: var(--texto-lg);
  margin-bottom: var(--espacio-3);
}

.md-servicio-card__desc {
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
  line-height: var(--leading-suelto);
  flex: 1;
  margin-bottom: var(--espacio-5);
}

.md-servicio-card__link {
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  color: var(--color-secundario);
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  transition: gap var(--transicion-rapida);
}

.md-servicio-card__link:hover { gap: var(--espacio-3); color: var(--color-secundario-oscuro); }

/* --- 8.4 SERVICIOS ALTERNADOS (texto + imagen 1/3 | 2/3) --- */
.md-servicios-alternados {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-20);
}

.md-servicio-alt {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espacio-8);
  align-items: center;
}

@media (min-width: 1024px) {
  /* Normal: texto 1/3 | imagen 2/3 */
  .md-servicio-alt {
    grid-template-columns: 1fr 2fr;
    gap: var(--espacio-16);
  }

  /* Invertido: imagen 2/3 | texto 1/3 */
  .md-servicio-alt--invertido {
    grid-template-columns: 2fr 1fr;
  }

  .md-servicio-alt--invertido .md-servicio-alt__texto {
    order: 2;
  }

  .md-servicio-alt--invertido .md-servicio-alt__imagen {
    order: 1;
  }
}

.md-servicio-alt__eyebrow {
  display: inline-block;
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  color: var(--color-secundario);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--espacio-3);
}

.md-servicio-alt__titulo {
  font-size: var(--texto-2xl);
  margin-bottom: var(--espacio-4);
  line-height: var(--leading-apretado);
}

@media (min-width: 1024px) {
  .md-servicio-alt__titulo { font-size: var(--texto-3xl); }
}

.md-servicio-alt__desc {
  font-size: var(--texto-md);
  color: var(--color-texto-suave);
  line-height: var(--leading-suelto);
  margin-bottom: var(--espacio-8);
}

.md-servicio-alt__imagen {
  position: relative;
  border-radius: var(--radio-xl);
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: var(--sombra-xl);
}

.md-servicio-alt__imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.md-servicio-alt__imagen:hover img {
  transform: scale(1.03);
}

/* Decoración geométrica en imagen alternada */
.md-servicio-alt__imagen::before {
  content: '';
  position: absolute;
  inset: -8px;
  border: 2px solid var(--color-secundario);
  border-radius: calc(var(--radio-xl) + 8px);
  opacity: 0.25;
  z-index: -1;
}

/* --- 8.5 DIFERENCIADORES / ¿POR QUÉ ELEGIRNOS? --- */
.md-diferenciadores__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espacio-12);
  align-items: center;
}

@media (min-width: 1024px) {
  .md-diferenciadores__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--espacio-16);
  }
}

.md-diferenciadores__imagen {
  border-radius: var(--radio-xl);
  overflow: hidden;
  aspect-ratio: 1;
  box-shadow: var(--sombra-xl);
}

.md-diferenciadores__imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.md-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espacio-6);
  margin-bottom: var(--espacio-8);
}

.md-stat {
  padding: var(--espacio-5);
  background: var(--color-primario-suave);
  border-radius: var(--radio-lg);
  text-align: center;
}

.md-stat__numero {
  display: block;
  font-family: var(--fuente-titulos);
  font-size: var(--texto-3xl);
  font-weight: var(--peso-bold);
  color: var(--color-primario);
  line-height: 1;
  margin-bottom: var(--espacio-2);
}

.md-stat__etiqueta {
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}

.md-diferenciadores__lista {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
}

.md-diferenciador-item {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-4);
}

.md-diferenciador-item__icono {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background-color: var(--color-secundario);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: var(--texto-sm);
  margin-top: 2px;
}

.md-diferenciador-item__texto {
  font-size: var(--texto-base);
  color: var(--color-texto-suave);
  line-height: var(--leading-normal);
}

/* --- 8.6 TESTIMONIOS --- */
.md-testimonios__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espacio-6);
}

@media (min-width: 768px) {
  .md-testimonios__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .md-testimonios__grid { grid-template-columns: repeat(3, 1fr); }
}

.md-testimonio {
  background: var(--color-fondo);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--card-radio);
  padding: var(--card-padding);
  box-shadow: var(--card-sombra);
  display: flex;
  flex-direction: column;
}

.md-testimonio__comillas {
  font-family: var(--fuente-titulos);
  font-size: 4rem;
  line-height: 1;
  color: var(--color-secundario);
  opacity: 0.3;
  margin-bottom: var(--espacio-3);
}

.md-testimonio__texto {
  font-size: var(--texto-base);
  color: var(--color-texto-suave);
  line-height: var(--leading-suelto);
  font-style: italic;
  flex: 1;
  margin-bottom: var(--espacio-6);
}

.md-testimonio__autor {
  display: flex;
  align-items: center;
  gap: var(--espacio-4);
  padding-top: var(--espacio-4);
  border-top: 1px solid var(--color-borde-suave);
}

.md-testimonio__foto {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-borde);
}

.md-testimonio__nombre {
  font-weight: var(--peso-semi);
  font-size: var(--texto-sm);
  color: var(--color-texto);
}

.md-testimonio__cargo {
  font-size: var(--texto-xs);
  color: var(--color-texto-muted);
}

/* --- 8.7 CTA BAND --- */
.md-cta-band {
  background-color: var(--color-primario);
  padding-block: var(--espacio-16);
  text-align: center;
}

.md-cta-band__titulo {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: #ffffff;
  margin-bottom: var(--espacio-4);
}

.md-cta-band__subtitulo {
  font-size: var(--texto-md);
  color: rgba(255,255,255,0.78);
  margin-bottom: var(--espacio-8);
}

.md-cta-band__acciones {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--espacio-4);
}

/* --- 8.8 PROCESO DE TRABAJO --- */
.md-proceso__pasos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espacio-6);
  counter-reset: paso;
}

@media (min-width: 768px) {
  .md-proceso__pasos { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .md-proceso__pasos { grid-template-columns: repeat(4, 1fr); }
}

.md-paso {
  position: relative;
  padding: var(--espacio-6);
  background: var(--color-fondo);
  border-radius: var(--card-radio);
  border: 1px solid var(--color-borde-suave);
}

.md-paso__numero {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-primario);
  color: #ffffff;
  font-family: var(--fuente-titulos);
  font-size: var(--texto-lg);
  font-weight: var(--peso-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--espacio-5);
}

.md-paso__titulo {
  font-size: var(--texto-lg);
  margin-bottom: var(--espacio-3);
}

.md-paso__desc {
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
  line-height: var(--leading-suelto);
}

/* --- 8.9 FAQ (acordeón) --- */
.md-faq__lista {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  max-width: 800px;
  margin-inline: auto;
}

.md-faq-item {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
}

.md-faq-item__pregunta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-4);
  padding: var(--espacio-5) var(--espacio-6);
  background: var(--color-fondo);
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-base);
  font-weight: var(--peso-semi);
  color: var(--color-texto);
  transition: background-color var(--transicion-rapida);
}

.md-faq-item__pregunta:hover { background-color: var(--color-fondo-suave); }

.md-faq-item__icono {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 50%;
  background-color: var(--color-primario-suave);
  color: var(--color-primario);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: transform var(--transicion-normal);
}

.md-faq-item.activo .md-faq-item__icono { transform: rotate(45deg); }

.md-faq-item__respuesta {
  display: none;
  padding: var(--espacio-5) var(--espacio-6);
  border-top: 1px solid var(--color-borde-suave);
  font-size: var(--texto-base);
  color: var(--color-texto-suave);
  line-height: var(--leading-suelto);
}

.md-faq-item.activo .md-faq-item__respuesta { display: block; }

.md-faq__cta {
  text-align: center;
  margin-top: var(--espacio-8);
}

/* --- 8.10 FORMULARIO DE CONTACTO --- */
.md-contacto__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espacio-12);
}

@media (min-width: 1024px) {
  .md-contacto__grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

.md-contacto__info-titulo {
  font-size: var(--texto-2xl);
  margin-bottom: var(--espacio-4);
}

.md-contacto__info-desc {
  font-size: var(--texto-md);
  color: var(--color-texto-suave);
  margin-bottom: var(--espacio-8);
}

.md-contacto__datos {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-5);
}

.md-contacto__dato {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-4);
}

.md-contacto__dato-icono {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: var(--radio-lg);
  background-color: var(--color-primario-suave);
  color: var(--color-primario);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.md-contacto__dato-label {
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-texto-muted);
  margin-bottom: var(--espacio-1);
}

.md-contacto__dato-valor {
  font-weight: var(--peso-medio);
  color: var(--color-texto);
}

/* Sobrescribir estilos del CF7 para que coincidan con el tema */
.md-form-wrapper .wpcf7-form input:not([type=submit]),
.md-form-wrapper .wpcf7-form textarea,
.md-form-wrapper .wpcf7-form select {
  width: 100%;
  padding: var(--espacio-4);
  border: 1.5px solid var(--color-borde);
  border-radius: var(--radio-md);
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-base);
  color: var(--color-texto);
  background: var(--color-fondo);
  transition: border-color var(--transicion-rapida), box-shadow var(--transicion-rapida);
  outline: none;
}

.md-form-wrapper .wpcf7-form input:focus:not([type=submit]),
.md-form-wrapper .wpcf7-form textarea:focus,
.md-form-wrapper .wpcf7-form select:focus {
  border-color: var(--color-primario);
  box-shadow: 0 0 0 3px var(--color-primario-suave);
}

.md-form-wrapper .wpcf7-form textarea { min-height: 160px; resize: vertical; }

.md-form-wrapper .wpcf7-form input[type=submit] {
  width: 100%;
  padding: var(--btn-padding-lg);
  background-color: var(--btn-primario-bg);
  color: var(--btn-primario-texto);
  border: none;
  border-radius: var(--btn-radio);
  font-weight: var(--btn-fuente-peso);
  font-size: var(--texto-md);
  cursor: pointer;
  transition: background-color var(--btn-transicion);
  margin-top: var(--espacio-4);
}

.md-form-wrapper .wpcf7-form input[type=submit]:hover {
  background-color: var(--btn-primario-hover-bg);
}


/* ------------------------------------------------------------
   9. PÁGINAS INTERNAS
------------------------------------------------------------ */

/* Banner superior de página interna */
.md-page-banner {
  background-color: var(--color-primario);
  padding-block: var(--espacio-16);
  text-align: center;
  color: #ffffff;
}

.md-page-banner__titulo {
  font-size: clamp(2rem, 4vw, 3rem);
  color: #ffffff;
  margin-bottom: var(--espacio-4);
}

.md-page-banner__breadcrumb {
  font-size: var(--texto-sm);
  color: rgba(255,255,255,0.6);
}

.md-page-banner__breadcrumb a { color: rgba(255,255,255,0.6); }
.md-page-banner__breadcrumb a:hover { color: #ffffff; }

/* Contenido genérico de página interna */
.md-page-content {
  padding-block: var(--espacio-16);
}

/* --- Nosotros --- */
.md-nosotros__intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espacio-12);
  margin-bottom: var(--espacio-16);
  align-items: center;
}

@media (min-width: 1024px) {
  .md-nosotros__intro { grid-template-columns: 1fr 1fr; }
}

.md-nosotros__imagen {
  border-radius: var(--radio-xl);
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: var(--sombra-xl);
}

.md-nosotros__imagen img { width: 100%; height: 100%; object-fit: cover; }

.md-equipo__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--espacio-8);
  margin-top: var(--espacio-12);
}

.md-miembro {
  text-align: center;
}

.md-miembro__foto {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto var(--espacio-4);
  border: 3px solid var(--color-borde);
}

.md-miembro__nombre {
  font-size: var(--texto-lg);
  margin-bottom: var(--espacio-1);
}

.md-miembro__cargo {
  font-size: var(--texto-sm);
  color: var(--color-secundario);
  font-weight: var(--peso-semi);
}

/* --- Página Servicios --- */
.md-pagina-servicios__lista {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-20);
}

/* Reutiliza los estilos de .md-servicio-alt definidos en home */

/* --- Página Contacto --- */
.md-pagina-contacto__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espacio-12);
}

@media (min-width: 1024px) {
  .md-pagina-contacto__grid {
    grid-template-columns: 1fr 2fr;
    gap: var(--espacio-16);
  }
}


/* ------------------------------------------------------------
   10. UTILIDADES
------------------------------------------------------------ */
.texto-centro  { text-align: center; }
.texto-derecha { text-align: right; }
.oculto        { display: none !important; }
.visible       { display: block !important; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Espaciados rápidos */
.mt-0 { margin-top: 0; }
.mb-8 { margin-bottom: var(--espacio-8); }
.mt-8 { margin-top: var(--espacio-8); }

/* Animación de entrada suave */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animar-entrada {
  animation: fadeInUp 0.5s ease forwards;
}