/* ==========================================================================
   BHFIRMA — hoja de estilos única
   --------------------------------------------------------------------------
   PALETA: verde #79a02d + plomo #58575f sobre fondo claro.
           Sin negro ni rojo en ninguna superficie.
   --------------------------------------------------------------------------
   ÍNDICE
     01. Variables (colores, tipografías, medidas)
     02. Reset y base
     03. Utilidades reutilizables
     04. Animaciones de entrada
     05. Cabecera y menú
     06. Hero con vídeo
     07. Reseñas (carrusel)
     08. Bloque con foto de fondo (Emergencia / Consulta)
     09. Especialidades (números grandes)
     10. Novedades verticales (formato 9:16)
     11. Blog (tarjetas de artículo)
     12. Cabecera de página interna
     13. Nuestra Firma (historia, equipo, valores)
     14. Detalle de especialidad
     15. Contacto (tarjetas, mapa, preguntas frecuentes)
     16. Artículo individual
     17. Llamada a la acción de WhatsApp
     18. Pie de página
     19. Botón flotante de WhatsApp
   ========================================================================== */

/* ==========================================================================
   01. VARIABLES
   Cambia aquí un color y cambia en todo el sitio.
   ========================================================================== */

:root {
  /* --- Colores de marca --- */
  --c-green: #79a02d;        /* verde corporativo: fondos, bordes y titulares */
  --c-green-dark: #628425;   /* verde oscuro: hover y submenú */
  --c-green-text: #5a7a22;   /* verde para TEXTO pequeño: el de marca no llega
                                al contraste mínimo por debajo de ~28px */
  --c-green-soft: #f2f7e9;   /* verde muy claro: fondos suaves */
  --c-slate: #58575f;        /* plomo: texto principal */
  --c-slate-deep: #46454c;   /* plomo oscuro: velo sobre fotos */
  --c-slate-soft: #6e6d76;   /* plomo claro: párrafos y fechas */

  /* --- Superficies --- */
  --c-bg: #ffffff;           /* fondo de página */
  --c-surface: #f6f6f7;      /* tarjetas y bloques destacados */
  --c-line: #e3e3e6;         /* líneas divisorias y bordes */
  --c-white: #ffffff;
  --c-numeral: #dcdce0;      /* números gigantes de especialidades */

  /* Velo que se superpone a las fotos para que el texto blanco se lea */
  --c-veil: rgba(70, 69, 76, .74);

  /* --- Tipografías --- */
  --f-display: "Poppins", system-ui, sans-serif;  /* títulos y antetítulos */
  --f-title: "Sora", system-ui, sans-serif;       /* títulos grandes y números */
  --f-ui: "Figtree", system-ui, sans-serif;       /* menú, pie, extractos */
  --f-body: "Inter", system-ui, sans-serif;       /* párrafos */

  /* --- Medidas --- */
  --header-h: 80px;
  --gutter: 50px;
  --gutter-mobile: 15px;
  --content-max: 1264px;
}

/* ==========================================================================
   02. RESET Y BASE
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  max-width: 100vw;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-slate);
  font-family: var(--f-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--c-green); outline-offset: 3px; }

/* ==========================================================================
   03. UTILIDADES REUTILIZABLES
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --------------------------------------------------------------------------
   ANCHO DE CABECERA Y PIE
   El fondo (verde arriba, gris abajo) ocupa todo el ancho de la pantalla; lo
   que se limita a la columna de contenido es lo de dentro, para que el
   logotipo y el menú queden alineados con el texto de las secciones.
   Se hace con .site-header__inner y .site-footer__inner, más abajo.
   -------------------------------------------------------------------------- */

/* Botón ovalado verde: el CTA sobre fondo claro */
.pill {
  display: inline-block;
  padding: 18px 35px;
  border: 1px solid var(--c-green);
  border-radius: 50px;
  color: var(--c-slate);
  font-family: var(--f-ui);
  font-size: 16px;
  line-height: 1;
  text-align: center;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.pill:hover { background: var(--c-green); color: var(--c-white); }

/* Variante para cuando el botón va sobre una foto o sobre el verde */
.pill--over { border-color: var(--c-white); color: var(--c-white); }
.pill--over:hover { background: var(--c-white); color: var(--c-slate); }

/* Título de sección en verde */
.section-title {
  font-family: var(--f-display);
  font-size: 42px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--c-green);
}

/* Antetítulo pequeño en mayúsculas */
.kicker {
  font-family: var(--f-ui);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-slate-soft);
  margin-bottom: 14px;
}

/* Título grande blanco sobre foto */
.display-title {
  font-family: var(--f-title);
  font-weight: 600;
  line-height: 1.1;
  color: var(--c-white);
}

.lead {
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  color: var(--c-slate-soft);
}

/* Párrafo claro para cuando va sobre una foto */
.lead--over { color: rgba(255, 255, 255, .92); }

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

@media (max-width: 767px) {
  .container { padding-inline: var(--gutter-mobile); }
  .section-title { font-size: 28px; text-align: center; }
  .lead { font-size: 14px; line-height: 21px; }
}

/* ==========================================================================
   04. ANIMACIONES DE ENTRADA
   El archivo main.js añade .is-visible cuando el elemento entra en pantalla.
   Para desactivarlas en todo el sitio, borra el atributo data-anim del HTML.
   ========================================================================== */

[data-anim] { opacity: 0; will-change: transform, opacity; }

[data-anim].is-visible {
  animation-duration: 1.1s;
  animation-fill-mode: both;
  animation-timing-function: ease-out;
}

[data-anim="fadeIn"].is-visible      { animation-name: bhFadeIn; }
[data-anim="fadeInUp"].is-visible    { animation-name: bhFadeInUp; }
[data-anim="fadeInRight"].is-visible { animation-name: bhFadeInRight; }
[data-anim="slideInDown"].is-visible { animation-name: bhSlideInDown; }

@keyframes bhFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bhFadeInUp {
  from { opacity: 0; transform: translate3d(0, 40px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes bhFadeInRight {
  from { opacity: 0; transform: translate3d(60px, 0, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes bhSlideInDown {
  from { opacity: 0; transform: translate3d(0, -60px, 0); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-anim], [data-anim].is-visible {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* ==========================================================================
   05. CABECERA Y MENÚ
   Fondo verde. Usa el logotipo en blanco (imagenes/logo-bazan-fondo.webp).
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--c-green);
}

/* Mismo ancho máximo y mismo relleno que las secciones, para que el logotipo
   quede alineado con el texto de la página. */
.site-header__inner {
  height: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-inline: var(--gutter);
}

/* --- Logotipo --------------------------------------------------------- */

.logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.logo img { height: 44px; width: auto; }
.logo--footer img { height: 52px; }

/* --- Menú de escritorio ----------------------------------------------- */

.nav { height: 100%; }
.nav__list { display: flex; align-items: stretch; height: 100%; gap: 8px; }
.nav__item { position: relative; display: flex; }

/* Los enlaces ocupan todo el alto de la cabecera para que el desplegable se
   abra justo debajo de ella y no quede un hueco que lo cierre al pasar. */
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  font-family: var(--f-ui);
  font-size: 16px;
  line-height: 1;
  color: var(--c-white);
  transition: opacity .25s ease;
}
.nav__link:hover { opacity: .8; }
.nav__link { font-weight: 500; }
.nav__link[aria-current="page"] { font-weight: 600; }

.nav__caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform .25s ease;
}
.nav__item:hover .nav__caret { transform: rotate(180deg); }

/* Panel desplegable en plomo, con separadores entre opciones */
.nav__submenu {
  position: absolute;
  top: 100%;
  left: 4px;
  min-width: 232px;
  padding: 6px 0;
  background: var(--c-slate);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 12px 28px rgba(58, 57, 63, .28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.nav__item:hover .nav__submenu,
.nav__item:focus-within .nav__submenu { opacity: 1; visibility: visible; transform: none; }

.nav__submenu li + li a { border-top: 1px solid rgba(255, 255, 255, .16); }

.nav__submenu a {
  display: block;
  padding: 14px 22px;
  font-family: var(--f-ui);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--c-white);
  transition: background-color .2s ease, color .2s ease;
}
.nav__submenu a:hover { background: rgba(255, 255, 255, .1); color: #d9e8bd; }

/* --- Selector de idioma con banderas ---------------------------------- */

.bandera {
  width: 21px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}

/* La bandera del idioma activo, junto a "Idioma" en la barra */
.nav__link .bandera { margin-left: 2px; }

.nav__submenu .idioma {
  display: flex;
  align-items: center;
  gap: 11px;
}
/* Marca del idioma que se está viendo */
.nav__submenu .idioma[aria-current="true"] {
  background: rgba(255, 255, 255, .12);
  font-weight: 600;
}
.nav__submenu .idioma[aria-current="true"]::after {
  content: "✓";
  margin-left: auto;
  color: #d9e8bd;
}

.mobile-menu .idioma { display: flex; align-items: center; gap: 11px; }
.mobile-menu .idioma[aria-current="true"] { font-weight: 600; }

/* --- Hamburguesa y panel móvil ---------------------------------------- */

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  display: block;
  width: 26px; height: 2px;
  background: var(--c-white);
  transition: transform .3s ease, background-color .2s ease;
}
.nav-toggle__bar { position: relative; }
.nav-toggle__bar::before,
.nav-toggle__bar::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bar::before { top: -8px; }
.nav-toggle__bar::after  { top: 8px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after  { transform: translateY(-8px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: var(--c-green);
  padding: 8px 24px 40px;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease;
}
.mobile-menu.is-open { opacity: 1; transform: none; }
.mobile-menu a {
  display: block;
  padding: 18px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  font-family: var(--f-ui);
  font-size: 18px;
  color: var(--c-white);
}

/* Las especialidades van indentadas bajo su apartado */
.mobile-menu__sub {
  padding-left: 22px !important;
  font-size: 16px !important;
  opacity: .88;
}

@media (max-width: 1024px) {
  .site-header__inner { padding-inline: 24px; }
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (min-width: 1025px) {
  .mobile-menu { display: none; }
}

/* ==========================================================================
   06. HERO CON VÍDEO
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  min-height: calc(100vh - var(--header-h));
  overflow: hidden;
  background: var(--c-slate-deep);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: 50% 50%;
}
.hero__video { width: 100%; height: 100%; object-fit: cover; }

/* Velo plomo sobre el vídeo. Sube la opacidad para oscurecer más. */
.hero__veil { position: absolute; inset: 0; z-index: -1; background: var(--c-veil); }

.hero__content {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 170px 480px 70px var(--gutter);
}
.hero__kicker {
  display: inline-block;
  margin-bottom: 20px;
  padding: 9px 18px;
  border-radius: 40px;
  background: var(--c-green);
  font-family: var(--f-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-white);
}
.hero__title {
  font-family: var(--f-display);
  font-size: 68px;
  font-weight: 600;
  line-height: 1.08;
  color: var(--c-white);
}
.hero__text {
  max-width: 560px;
  margin-top: 22px;
  font-family: var(--f-body);
  font-size: 17px;
  font-weight: 300;
  line-height: 28px;
  color: rgba(255, 255, 255, .92);
}
.hero__text strong { font-weight: 600; color: var(--c-white); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }

/* El corte a tamaños de tablet ocurre en 1024px. Por encima se mantienen
   las medidas grandes. */
@media (max-width: 1200px) {
  .hero__content { padding-right: 300px; }
}
@media (max-width: 1024px) {
  .hero__content { padding: 150px 40px 60px; }
  .hero__title { font-size: 48px; }
}
@media (max-width: 767px) {
  .hero { min-height: 100svh; align-items: center; }
  .hero__content { padding: 100px var(--gutter-mobile) 60px; text-align: center; }
  .hero__kicker { font-size: 11px; padding: 8px 14px; margin-bottom: 16px; }
  .hero__title { font-size: 32px; line-height: 1.12; }
  .hero__text { font-size: 15px; line-height: 24px; margin-top: 16px; }
  .hero__actions { justify-content: center; gap: 14px; margin-top: 28px; }
}

/* ==========================================================================
   07. RESEÑAS (CARRUSEL)
   ========================================================================== */

.reviews {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 34px var(--gutter) 30px;
  text-align: center;
}
.reviews__divider { height: 1px; background: var(--c-line); margin-bottom: 26px; }
.reviews__widget { position: relative; display: flex; align-items: center; gap: 8px; margin-top: 22px; }
.reviews__viewport { flex: 1 1 auto; overflow: hidden; }
.reviews__track { display: flex; transition: transform .55s cubic-bezier(.4, 0, .2, 1); }
.reviews__slide { flex: 0 0 100%; min-width: 0; padding: 0 8px; }

.review__head { display: flex; align-items: center; justify-content: center; gap: 12px; }
.review__avatar {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--c-green);
  color: var(--c-white);
  font-family: var(--f-ui);
  font-size: 17px;
  font-weight: 600;
}
.review__name { font-family: var(--f-ui); font-size: 15px; font-weight: 600; color: var(--c-slate); }
.review__time { font-family: var(--f-ui); font-size: 13px; color: var(--c-slate-soft); }
.review__stars { display: flex; justify-content: center; gap: 2px; margin: 10px 0 8px; }
.review__stars svg { width: 17px; height: 17px; color: var(--c-green); }
.review__text {
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 23px;
  color: var(--c-slate-soft);
  max-width: 720px;
  margin-inline: auto;
}

.reviews__btn {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  color: var(--c-slate-soft);
  transition: border-color .25s ease, color .25s ease;
}
.reviews__btn:hover { border-color: var(--c-green); color: var(--c-green-text); }
.reviews__btn svg { width: 16px; height: 16px; }
.reviews__btn--prev svg { transform: rotate(180deg); }

.reviews__dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.reviews__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-line);
  transition: background-color .25s ease, transform .25s ease;
}
.reviews__dot.is-active { background: var(--c-green); transform: scale(1.25); }

@media (max-width: 767px) {
  .reviews { padding: 26px var(--gutter-mobile) 24px; }
  .review__text { font-size: 14px; line-height: 21px; }
}

/* ==========================================================================
   08. BLOQUE CON FOTO DE FONDO (Emergencia / Consulta)
   La foto se define en el HTML con style="background-image:url(...)".
   ========================================================================== */

.photo-block {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 480px;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

/* Velo plomo en dos capas: una base uniforme que asegura el contraste en toda
   la foto, y un degradado que refuerza el lado donde va el texto. */
.photo-block__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg,
      rgba(58, 57, 63, .95) 0%,
      rgba(58, 57, 63, .86) 42%,
      rgba(58, 57, 63, .45) 100%),
    linear-gradient(rgba(58, 57, 63, .35), rgba(58, 57, 63, .35));
}

.photo-block__content {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 64px 560px 64px var(--gutter);
}

.photo-block__title { font-size: 44px; line-height: 1.15; margin-bottom: 18px; }
.photo-block__text { max-width: 560px; }
.photo-block__cta { display: inline-block; margin-top: 28px; }

@media (max-width: 1024px) {
  .photo-block { min-height: 440px; }
  .photo-block__content { padding: 56px 40px; }
  .photo-block__title { font-size: 38px; }
}
@media (max-width: 767px) {
  .photo-block { min-height: 360px; text-align: center; }
  .photo-block__scrim { background: rgba(58, 57, 63, .86); }
  .photo-block__content { padding: 52px var(--gutter-mobile); }
  .photo-block__title { font-size: 30px; margin-bottom: 14px; }
  .photo-block__text { max-width: none; }
  .photo-block__cta { margin-top: 24px; }
}

/* ==========================================================================
   09. ESPECIALIDADES (NÚMEROS GRANDES)
   ========================================================================== */

.specialties {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 96px var(--gutter) 100px;
}
.specialties__heading { margin-bottom: 55px; }

.specialties__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 54px;
  row-gap: 64px;
}

.specialty { display: flex; align-items: flex-start; gap: 12px; }
.specialty__number {
  font-family: var(--f-title);
  font-size: 100px;
  font-weight: 100;
  line-height: .86;
  color: var(--c-numeral);
  flex: 0 0 auto;
  user-select: none;
}
.specialty__body { min-width: 0; padding-top: 6px; }

/* 22px en todos los anchos; solo cambia el interlineado (33.6px / 26.4px). */
.specialty__title {
  font-family: var(--f-title);
  font-size: 22px;
  font-weight: 400;
  line-height: 33.6px;
  color: var(--c-slate);
  margin-bottom: 14px;
}
.specialty__title a { transition: color .25s ease; }
.specialty__title a:hover { color: var(--c-green-text); }
.specialty__text {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--c-slate-soft);
}
.specialty__text strong,
.specialty__text b { font-weight: 500; color: var(--c-slate); }

@media (max-width: 1024px) {
  .specialties { padding: 72px 40px 80px; }
  .specialties__grid { grid-template-columns: repeat(2, 1fr); column-gap: 36px; row-gap: 48px; }
  .specialty__number { font-size: 82px; }
}
@media (max-width: 767px) {
  .specialties { padding: 56px var(--gutter-mobile) 64px; }
  .specialties__heading { margin-bottom: 30px; }
  .specialties__grid { grid-template-columns: 1fr; row-gap: 44px; }
  .specialty { flex-direction: column; align-items: center; text-align: center; gap: 0; }
  .specialty__number { font-size: 100px; line-height: 1; }
  .specialty__body { padding-top: 0; }
  .specialty__title { line-height: 26.4px; margin-bottom: 10px; }
  .specialty__text { font-size: 14px; line-height: 21px; }
}

/* ==========================================================================
   10. NOVEDADES · VÍDEOS DE TIKTOK
   Se usa el iframe directo (tiktok.com/embed/v2/ID) en lugar del <blockquote>
   con embed.js. Ese script es el que devolvía "overload-protect triggered"
   cuando había que montar tres reproductores a la vez; los iframes sueltos
   cargan de forma independiente y no tienen ese límite.
   ========================================================================== */

.reels {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 20px var(--gutter) 90px;
}
.reels__heading { margin-bottom: 46px; }

/* El reproductor de TikTok necesita 325px de ancho como mínimo; con auto-fit
   la rejilla pasa sola de 3 a 2 y a 1 columna en lugar de desbordarse. */
.reels__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(325px, 1fr));
  gap: 28px;
  justify-items: center;
}

/* El alto del reproductor no es proporcional: es el vídeo (16/9 del ancho)
   más una ficha inferior de unos 130px con el usuario, el texto y la música.
   Por eso el alto se calcula con padding-bottom en vez de aspect-ratio. */
.reel {
  position: relative;
  width: 100%;
  max-width: 605px;
  height: 0;
  padding-bottom: calc(177.78% + 130px);
  margin-inline: auto;
  overflow: hidden;
  border-radius: 12px;
  background: var(--c-surface);
}
.reel iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.reels__footer { display: flex; justify-content: center; margin-top: 48px; }

@media (max-width: 1024px) {
  .reels { padding: 16px 40px 72px; }
  .reels__grid { gap: 20px; }
}
@media (max-width: 767px) {
  .reels { padding: 10px var(--gutter-mobile) 56px; }
  .reels__heading { margin-bottom: 28px; }
  .reels__grid { grid-template-columns: 1fr; gap: 24px; }
  .reels__footer { margin-top: 34px; }
}

/* ==========================================================================
   11. BLOG (TARJETAS DE ARTÍCULO)
   ========================================================================== */

.posts {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 40px var(--gutter) 76px;
}
.posts__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }

/* Aviso de la versión en inglés: los artículos se publican en español */
.posts__nota { margin-bottom: 22px; font-style: italic; }

.post-card__thumb {
  display: block;
  overflow: hidden;
  border-radius: 42px;
  margin-bottom: 20px;
}
.post-card__thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .6s ease;
}
.post-card__thumb:hover img { transform: scale(1.06); }

/* 22px en todos los anchos; el interlineado pasa de 30px a 26.4px en móvil. */
.post-card__title {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 30px;
  color: var(--c-slate);
  margin-bottom: 8px;
}
.post-card__title a { transition: color .25s ease; }
.post-card__title a:hover { color: var(--c-green-text); }
.post-card__meta { font-family: var(--f-ui); font-size: 14px; color: var(--c-slate-soft); margin-bottom: 12px; }
.post-card__excerpt { font-family: var(--f-ui); font-size: 16px; line-height: 24px; color: var(--c-slate-soft); }
.post-card__more {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--f-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--c-green-text);
}
.post-card__more:hover { text-decoration: underline; }
.posts__footer { display: flex; justify-content: center; margin-top: 52px; }

@media (max-width: 1024px) {
  .posts { padding: 32px 40px 64px; }
  .posts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .post-card__thumb { border-radius: 32px; }
}
@media (max-width: 767px) {
  .posts { padding: 24px var(--gutter-mobile) 56px; }
  .posts__grid { grid-template-columns: 1fr; gap: 36px; }
  .post-card__title { line-height: 26.4px; }
  .post-card__thumb { border-radius: 28px; }
  .post-card__excerpt { font-size: 15px; line-height: 22px; }
  .posts__footer { margin-top: 36px; }
}

/* ==========================================================================
   12. CABECERA DE PÁGINA INTERNA
   ========================================================================== */

.page-head {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  padding: 110px var(--gutter) 90px;
}
.page-head__inner { max-width: var(--content-max); margin-inline: auto; }
.page-head__title {
  font-family: var(--f-display);
  font-size: 56px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--c-green);
  margin-bottom: 24px;
}
.page-head__text { max-width: 780px; }
.page-head__text p + p { margin-top: 18px; }

@media (max-width: 1024px) { .page-head { padding: 90px 40px 70px; } .page-head__title { font-size: 42px; } }
@media (max-width: 767px) {
  .page-head { padding: 60px var(--gutter-mobile) 50px; text-align: center; }
  .page-head__title { font-size: 30px; }
}

/* ==========================================================================
   13. NUESTRA FIRMA (historia, equipo, valores)
   ========================================================================== */

.section { max-width: var(--content-max); margin-inline: auto; padding: 90px var(--gutter); }
.section__head { margin-bottom: 50px; }
.section__intro { max-width: 720px; margin-top: 16px; }

@media (max-width: 1024px) { .section { padding: 70px 40px; } }
@media (max-width: 767px) {
  .section { padding: 56px var(--gutter-mobile); }
  .section__head { margin-bottom: 32px; text-align: center; }
  .section__intro { margin-inline: auto; }
}

/* --- Retrato + texto de presentación ----------------------------------- */

/* Banda a todo el ancho: hace de cabecera de la página Nuestra Firma, con el
   mismo fondo gris claro que .page-head en el resto de páginas. */
.intro-block {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  padding: 100px var(--gutter);
}
.intro-block__grid {
  max-width: var(--content-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
/* Añade la clase intro-block--reverse a la sección para invertir el orden */
.intro-block--reverse .intro-block__photo { order: 2; }

.intro-block__photo {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: var(--c-surface);
}
/* height:auto es obligatorio junto a width:100% cuando el <img> lleva los
   atributos width/height; si no, el navegador usa la altura del atributo.
   Se respeta la proporción original del retrato para no recortar a la persona. */
.intro-block__photo img {
  width: 100%;
  height: auto;
  display: block;
}
/* Filete verde inferior que ancla la foto a la marca */
.intro-block__photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 6px;
  background: var(--c-green);
}

.intro-block__title { margin-bottom: 22px; }
.intro-block__text .lead + .lead { margin-top: 18px; }
.intro-block__cta { margin-top: 32px; }

@media (max-width: 1024px) {
  .intro-block { padding: 80px 40px; }
  .intro-block__grid { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 767px) {
  .intro-block { padding: 56px var(--gutter-mobile); }
  .intro-block__grid { grid-template-columns: 1fr; gap: 30px; }
  .intro-block--reverse .intro-block__photo { order: 0; }
  .intro-block__photo { max-width: 320px; margin-inline: auto; border-radius: 14px; }
  .intro-block__text { text-align: center; }
  .intro-block__title { margin-bottom: 16px; }
}

/* --- Rejilla del equipo ------------------------------------------------ */

.team__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 34px 28px;
}
.member__photo {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 16px;
  background: var(--c-surface);
  margin-bottom: 16px;
}
.member__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .4s ease, transform .6s ease; }
.member:hover .member__photo img { filter: grayscale(0); transform: scale(1.04); }
.member__name { font-family: var(--f-title); font-size: 19px; font-weight: 400; color: var(--c-slate); margin-bottom: 5px; }
.member__role { font-family: var(--f-ui); font-size: 14px; color: var(--c-slate-soft); line-height: 1.4; }

@media (max-width: 1024px) { .team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; }
  .member__name { font-size: 16px; }
  .member__role { font-size: 13px; }
}

/* --- Valores ----------------------------------------------------------- */

.values__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.value {
  padding: 34px 30px 30px;
  border: 1px solid var(--c-line);
  border-radius: 18px;
  background: var(--c-surface);
  transition: border-color .3s ease, transform .3s ease, background-color .3s ease;
}
.value:hover { border-color: var(--c-green); background: var(--c-green-soft); transform: translateY(-4px); }
.value__title {
  font-family: var(--f-title);
  font-size: 24px;
  font-weight: 400;
  color: var(--c-green-text);
  margin-bottom: 14px;
}
.value__text { font-family: var(--f-body); font-size: 15px; line-height: 23px; color: var(--c-slate-soft); }
.value__link {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--f-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--c-green-text);
  border-bottom: 1px solid var(--c-green-text);
  padding-bottom: 2px;
}
.value__link:hover { color: var(--c-green-dark); border-color: var(--c-green-dark); }

@media (max-width: 1024px) { .values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (max-width: 767px) { .values__grid { grid-template-columns: 1fr; gap: 20px; } .value { padding: 26px 22px; } }

/* ==========================================================================
   14. DETALLE DE ESPECIALIDAD
   ========================================================================== */

.services__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
.service {
  padding: 30px 28px;
  border-left: 3px solid var(--c-green);
  background: var(--c-surface);
  border-radius: 0 14px 14px 0;
}
.service__title {
  font-family: var(--f-title);
  font-size: 20px;
  font-weight: 400;
  color: var(--c-slate);
  margin-bottom: 12px;
}
.service__text { font-family: var(--f-body); font-size: 15px; line-height: 23px; color: var(--c-slate-soft); }

@media (max-width: 767px) {
  .services__grid { grid-template-columns: 1fr; gap: 18px; }
  .service { padding: 24px 20px; }
}

/* --- Tarjetas de especialidad (página Especialidades) ------------------ */

.spec-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}
.spec-card {
  display: flex;
  flex-direction: column;
  padding: 38px 32px 34px;
  border: 1px solid var(--c-line);
  border-radius: 20px;
  background: var(--c-surface);
  transition: border-color .3s ease, transform .3s ease, background-color .3s ease;
}
.spec-card:hover { border-color: var(--c-green); background: var(--c-green-soft); transform: translateY(-5px); }
.spec-card__number {
  font-family: var(--f-title);
  font-size: 56px;
  font-weight: 100;
  line-height: 1;
  color: var(--c-numeral);
  margin-bottom: 18px;
}
.spec-card__title {
  font-family: var(--f-title);
  font-size: 24px;
  font-weight: 400;
  color: var(--c-green-text);
  margin-bottom: 14px;
}
.spec-card__text { font-family: var(--f-body); font-size: 15px; line-height: 23px; color: var(--c-slate-soft); flex: 1 1 auto; }
.spec-card__link {
  display: inline-block;
  margin-top: 22px;
  font-family: var(--f-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--c-green-text);
}
.spec-card__link:hover { color: var(--c-green-dark); text-decoration: underline; }

@media (max-width: 1024px) { .spec-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }
@media (max-width: 767px) { .spec-cards { grid-template-columns: 1fr; gap: 18px; } .spec-card { padding: 30px 24px; } }

/* ==========================================================================
   15. CONTACTO
   ========================================================================== */

.contact__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.contact-card {
  padding: 30px 28px;
  border: 1px solid var(--c-line);
  border-radius: 18px;
  background: var(--c-surface);
  transition: border-color .3s ease;
}
.contact-card:hover { border-color: var(--c-green); }
.contact-card__label {
  font-family: var(--f-title);
  font-size: 20px;
  font-weight: 400;
  color: var(--c-green-text);
  margin-bottom: 10px;
}
.contact-card__text { font-family: var(--f-body); font-size: 14px; line-height: 22px; color: var(--c-slate-soft); margin-bottom: 14px; }
.contact-card__value {
  font-family: var(--f-ui);
  font-size: 17px;
  font-weight: 600;
  color: var(--c-slate);
  word-break: break-word;
}
a.contact-card__value:hover { color: var(--c-green-text); }

.map { max-width: var(--content-max); margin-inline: auto; padding: 20px var(--gutter) 40px; }
.map__frame {
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--c-line);
}
.map__frame iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.4); }

@media (max-width: 1024px) { .contact__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .contact__grid { grid-template-columns: 1fr; gap: 16px; }
  .contact-card { padding: 24px 20px; }
  .map { padding: 10px var(--gutter-mobile) 30px; }
  .map__frame { aspect-ratio: 4 / 3; border-radius: 12px; }
}

/* --- Preguntas frecuentes (acordeón nativo) --------------------------- */

.faq { max-width: 900px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--f-title);
  font-size: 19px;
  font-weight: 400;
  color: var(--c-slate);
  transition: color .25s ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover,
.faq__item[open] summary { color: var(--c-green-text); }
.faq__icon { position: relative; width: 16px; height: 16px; flex: 0 0 auto; }
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: currentColor;
  transition: transform .3s ease;
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0); }
.faq__answer {
  padding: 0 4px 26px;
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 25px;
  color: var(--c-slate-soft);
  max-width: 760px;
}

@media (max-width: 767px) {
  .faq__item summary { font-size: 16px; padding: 20px 2px; text-align: left; }
  .faq__answer { font-size: 14px; line-height: 22px; padding-bottom: 20px; }
}

/* ==========================================================================
   16. ARTÍCULO INDIVIDUAL
   ========================================================================== */

.article { max-width: 820px; margin-inline: auto; padding: 60px var(--gutter) 80px; }
.article__meta { font-family: var(--f-ui); font-size: 14px; color: var(--c-slate-soft); margin-bottom: 14px; }
.article__title {
  font-family: var(--f-display);
  font-size: 44px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-green);
  margin-bottom: 30px;
}
.article__cover { border-radius: 24px; overflow: hidden; margin-bottom: 36px; }
.article__cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.article__body { font-family: var(--f-body); font-size: 17px; line-height: 30px; color: var(--c-slate-soft); }
.article__body p + p,
.article__body h2 + p { margin-top: 22px; }
.article__body h2 {
  font-family: var(--f-title);
  font-size: 26px;
  font-weight: 400;
  color: var(--c-slate);
  margin-top: 40px;
}
.article__body ul { margin-top: 18px; padding-left: 22px; list-style: disc; }
.article__body li { margin-bottom: 10px; }
.article__body strong { color: var(--c-slate); font-weight: 500; }
.article__back { display: inline-block; margin-top: 44px; }

@media (max-width: 767px) {
  .article { padding: 40px var(--gutter-mobile) 56px; }
  .article__title { font-size: 28px; }
  .article__cover { border-radius: 16px; margin-bottom: 26px; }
  .article__body { font-size: 16px; line-height: 27px; }
}

/* ==========================================================================
   17. LLAMADA A LA ACCIÓN DE WHATSAPP
   Banda verde a todo el ancho, con botón blanco.
   ========================================================================== */

.cta-wa {
  background: var(--c-green);
  padding: 80px var(--gutter);
  text-align: center;
}
.cta-wa__inner { max-width: 820px; margin-inline: auto; }
.cta-wa__title {
  font-family: var(--f-title);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-white);
  margin-bottom: 28px;
}

@media (max-width: 767px) {
  .cta-wa { padding: 56px var(--gutter-mobile); }
  .cta-wa__title { font-size: 26px; margin-bottom: 22px; }
}

/* ==========================================================================
   18. PIE DE PÁGINA
   Fondo claro con filete verde. Usa el logotipo a color
   (imagenes/logo-bazan.webp).
   ========================================================================== */

/* El relleno horizontal va en __inner, no aquí, para que el fondo llegue a los
   bordes de la pantalla y el contenido quede alineado con las secciones. */
.site-footer {
  background: var(--c-surface);
  border-top: 3px solid var(--c-green);
  padding-block: 48px 75px;
}
.site-footer__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
}
.site-footer__contact { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.site-footer__socials { display: flex; align-items: center; gap: 18px; }
.site-footer__socials a {
  display: grid; place-items: center;
  width: 20px; height: 20px;
  color: var(--c-slate);
  transition: color .25s ease, transform .25s ease;
}
.site-footer__socials a:hover { color: var(--c-green-text); transform: translateY(-2px); }
.site-footer__socials svg { width: 18px; height: 18px; }
.site-footer__phone { font-family: var(--f-ui); font-size: 14px; color: var(--c-slate); }
.site-footer__phone a:hover { color: var(--c-green-text); }
.site-footer__logo { display: flex; justify-content: center; }
.site-footer__legal {
  font-family: var(--f-ui);
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-slate-soft);
  text-align: right;
  justify-self: end;
  max-width: 360px;
}

@media (max-width: 900px) {
  .site-footer__inner { grid-template-columns: 1fr; justify-items: center; gap: 22px; }
  .site-footer__logo { order: -1; }
  .site-footer__legal { text-align: center; justify-self: center; }
}
@media (max-width: 767px) {
  .site-footer { padding-block: 48px 60px; }
  .site-footer__inner { padding-inline: var(--gutter-mobile); }
}

/* ==========================================================================
   19. BOTÓN FLOTANTE DE WHATSAPP
   ========================================================================== */

.wa-float {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 10px;
}
.wa-float__icon {
  position: relative;
  display: grid; place-items: center;
  width: 56px; height: 56px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #25d366;
  color: var(--c-white);
  box-shadow: 0 6px 18px rgba(70, 69, 76, .3);
  transition: transform .25s ease;
}
.wa-float:hover .wa-float__icon { transform: scale(1.06); }
.wa-float__icon svg { width: 30px; height: 30px; }
.wa-float__icon::after {
  content: "";
  position: absolute;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25d366;
  opacity: .45;
  animation: waPulse 2.4s ease-out infinite;
  z-index: -1;
}
.wa-float__label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  padding: 0;
  border-radius: 24px;
  background: var(--c-slate);
  color: var(--c-white);
  font-family: var(--f-ui);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  opacity: 0;
  transition: max-width .35s ease, opacity .25s ease, padding .35s ease;
}
.wa-float:hover .wa-float__label,
.wa-float:focus-visible .wa-float__label { max-width: 340px; padding: 12px 18px; opacity: 1; }

@keyframes waPulse {
  0%   { transform: scale(1); opacity: .45; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { opacity: 0; }
}

@media (max-width: 767px) {
  .wa-float { right: 16px; bottom: 16px; }
  .wa-float__label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-float__icon::after { animation: none; }
}