/*
 * Puente CSS para la reconstrucción 100% nativa (bloques de Gutenberg) del
 * home aprobado. Traduce el sistema .btn / .faq-* original, pensado para
 * HTML de mano, al marcado que generan los bloques core de WordPress
 * (wp-block-button, wp-block-details, wp-block-image…), sin tocar el
 * resto de reglas de home-approved.css.
 * Se carga al final para poder sobreescribir con seguridad.
 */

/* ---------- Footer: acordeón en móvil ----------
   El footer en móvil apilaba las 3 columnas de enlaces (Servicios 9 ítems,
   Agencia 7, Contacto 5) completamente abiertas, una debajo de otra —
   pasaba de 1700px de alto solo el footer (reportado por el propietario
   del sitio, 2026-08-20). El <h4> de cada columna se reemplazó en
   parts/footer.html por un <button class="site-footer__col-toggle"> con el
   mismo texto + una flecha, que colapsa/expande su <ul> — solo en móvil;
   en escritorio (≥768px) el botón se ve y actúa exactamente igual que el
   <h4> original (sin flecha, lista siempre visible), sin cambiar nada del
   layout de escritorio ya aprobado. */
.site-footer__col-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: none; padding: 0; margin: 0 0 16px;
  color: #fff; font-weight: 700; font-size: 15px; letter-spacing: 0.02em;
  font-family: inherit; text-align: left; cursor: default;
}
.site-footer__col-toggle .ic { display: none; }

@media (max-width: 767px) {
  .site-footer__col { border-bottom: 1px solid rgba(255,255,255,0.12); padding-bottom: 4px; }
  .site-footer__col:last-child { border-bottom: none; }
  .site-footer__col-toggle { cursor: pointer; padding: 14px 0; margin: 0; min-height: 44px; }
  .site-footer__col-toggle .ic {
    display: block; flex-shrink: 0; color: rgba(255,255,255,0.55);
    transition: transform 0.2s ease;
  }
  .site-footer__col.open .site-footer__col-toggle .ic { transform: rotate(180deg); }
  .site-footer__col-list {
    max-height: 0; overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .site-footer__col.open .site-footer__col-list { max-height: 640px; }
  .site-footer__col-list li:last-child a,
  .site-footer__col-list li:last-child { padding-bottom: 14px; }
}

/* ---------- Anclas + header fijo ----------
   .site-header es position:fixed y no reserva espacio en el flujo; sin esto
   los saltos a #mensaje, #servicios, #metodologia, etc. dejan el título
   tapado bajo el header.

   scroll-behavior:smooth global (home-approved.css / theme.css) anima
   TODO desplazamiento, incluido el scroll normal con rueda/trackpad: cada
   "tick" de la rueda intenta animarse y los ticks sucesivos se
   interrumpen entre sí, lo que se percibe como que la página "se traba" o
   "se queda fija" al hacer scroll. Se desactiva aquí y el desplazamiento
   suave se aplica solo a los saltos de ancla explícitos (ver
   js-home-approved.js), que sí respetan scroll-padding-top. */
html {
  scroll-padding-top: 88px;
  scroll-behavior: auto !important;
}

/* ---------- Hero: espacio vacío excesivo arriba en móvil ----------
   home-approved.css hace .hero { min-height: 100svh; display: flex;
   justify-content: center; } a propósito, para un hero de pantalla
   completa con el contenido centrado verticalmente — se ve bien en
   escritorio, donde el contenido suele llenar buena parte del alto. En
   móvil el contenido (eyebrow + título + subtítulo) es mucho más corto que
   el viewport, así que ese centrado empuja todo hacia abajo y deja un
   hueco enorme entre el header y el texto (reportado por el propietario
   del sitio, 2026-08-19). Se desactiva el alto forzado y el centrado solo
   en móvil; el padding-top de .hero__inner (96px, ya pensado para
   despejar el header fijo de 64px) sigue intacto, así que el contenido
   arranca justo después del header con un margen razonable. */
@media (max-width: 767px) {
  .hero { min-height: 0; justify-content: flex-start; }
  /* .hero__scroll usa position:absolute;bottom:24px respecto a .hero — con
     el alto ya no forzado a 100svh, el hero mide lo que su contenido
     necesita y ese "24px desde abajo" cae encima del subtítulo en vez de
     al fondo de la pantalla. La pista de "sigue bajando" además pierde
     sentido cuando el hero ya no ocupa toda la pantalla. */
  .hero__scroll { display: none; }
}

/* ---------- Botón "Llamar" de la barra flotante móvil: texto invisible ----------
   .mcta vive dentro de <footer class="site-footer">, y
   .site-footer a { color: rgba(255,255,255,0.72) } (pensado para los
   enlaces del footer oscuro) tiene más especificidad que
   .mcta__call { color: var(--navy-700) } (0,1,1 contra 0,1,0) y gana la
   cascada — texto casi blanco sobre el fondo blanco del botón, invisible
   (reportado por el propietario del sitio, 2026-08-19). */
.site-footer .mcta__call { color: var(--navy-700); }
.site-footer .mcta__call:hover,
.site-footer .mcta__call:active { color: var(--navy-700); }
.hero,
.message,
.clients,
.intro,
.results,
.method,
.why,
.adv,
.services,
.reviews,
.faq,
.final {
  scroll-margin-top: 88px;
}

/* ---------- Header fijo + backdrop-filter: glitch de repintado durante scroll ----------
   .site-header combina position:fixed con backdrop-filter:blur() sobre
   contenido que se desplaza detrás — una combinación con bugs de
   compositing/repintado documentados en Chrome, Firefox y Safari donde el
   contenido cercano al header (aquí, la sección .message justo debajo)
   puede verse momentáneamente "congelado" durante el scroll real, aunque su
   posición en el DOM sea siempre correcta (no reproducible con
   getBoundingClientRect ni con capturas de pantalla, que fuerzan un
   repintado limpio). Aislar el header en su propia capa de composición
   evita que ese repintado se filtre al contenido vecino. */
.site-header {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
  isolation: isolate;
}

/* ---------- Imágenes nativas que reemplazan a <image-slot> ----------
   Editables y reemplazables desde Apariencia → Editor / la Biblioteca de
   medios; ver recognition__photo (foto de evento) y rmq-photo (capturas
   de reseñas). */
.recognition__photo,
.recognition__photo img {
  width: 100%;
  height: 260px;
  border-radius: 12px;
  object-fit: cover;
}
.recognition__photo {
  margin: 0;
  overflow: hidden;
}