/* ==========================================================================
   Directorio Metabólico — CSS base
   Paleta:
     --azul-oscuro   header/hero, texto blanco encima
     --azul-medio    botones/acentos
     --azul-claro    fondos suaves/badges, texto --azul-claro-texto
     --blanco        #FFFFFF  tarjetas
     gris neutro     texto secundario y bordes

   --azul-oscuro, --azul-medio y --azul-claro YA NO se definen aquí: vienen
   de /assets/css/colores.php (enlazado después de este archivo en
   header.php), que lee data/settings.json con fallback a config/config.php.
   Editar el color desde admin/configuracion.php ya no requiere tocar este
   CSS.
   ========================================================================== */

:root {
  --azul-oscuro-hover: #0a3a6b;
  --azul-medio-hover: #2c75bf;
  --azul-claro-texto: #042C53;
  --blanco: #FFFFFF;

  --color-primario: var(--azul-oscuro, #0C447C);
  --color-secundario: var(--azul-medio, #378ADD);
  --color-fondo: var(--azul-claro, #E6F1FB);

  --gris-texto: #5B6B79;
  --gris-borde: #D8E0E7;
  --gris-fondo: #F7F9FB;
  --texto-principal: #1B2733;

  --radio: 8px;
  --radio-pill: 999px;
  --sombra: 0 2px 6px rgba(12, 68, 124, 0.08);
  --ancho-maximo: 1180px;
}

/* ---------- Reset básico ---------- */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--texto-principal);
  background: var(--gris-fondo);
  line-height: 1.5;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--azul-medio);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

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

h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  line-height: 1.25;
}

p {
  margin: 0 0 1em;
}

/* ---------- Layout ---------- */

.contenedor {
  width: 100%;
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: 0 20px;
}

main {
  display: block;
}

.grid {
  display: grid;
  gap: 20px;
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-5 {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 900px) {
  .grid-3,
  .grid-4,
  .grid-5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5 {
    grid-template-columns: 1fr;
  }
}

/* ---------- Botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--radio);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn:hover {
  text-decoration: none;
}

.btn-primario {
  background: var(--azul-medio);
  color: var(--blanco);
}

.btn-primario:hover {
  background: var(--azul-medio-hover);
}

.btn-secundario {
  background: var(--blanco);
  color: var(--azul-oscuro);
  border-color: var(--gris-borde);
}

.btn-secundario:hover {
  background: var(--azul-claro);
  border-color: var(--azul-medio);
}

.btn-oscuro {
  background: var(--azul-oscuro);
  color: var(--blanco);
}

.btn-oscuro:hover {
  background: var(--azul-oscuro-hover);
}

.btn-whatsapp {
  background: #25D366;
  color: #FFFFFF;
}

.btn-whatsapp:hover {
  background: #128C7E;
  color: #FFFFFF;
}

/* ---------- Botón volver arriba ---------- */
#btn-arriba {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--azul-medio);
  color: var(--blanco);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(12, 68, 124, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, background-color 0.15s ease, transform 0.15s ease;
  z-index: 900;
}

#btn-arriba.visible {
  opacity: 1;
  pointer-events: auto;
}

#btn-arriba:hover {
  background: var(--azul-medio-hover);
  transform: translateY(-2px);
}

@media (max-width: 480px) {
  #btn-arriba {
    bottom: 16px;
    right: 16px;
  }
}

/* ---------- Badges ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: var(--radio-pill);
  background: var(--azul-claro);
  color: var(--azul-claro-texto);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- Tarjetas (base, se amplía con las plantillas de listado) ---------- */

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

/* ==========================================================================
   Header del sitio
   ========================================================================== */

.sitio-header {
  background: var(--azul-oscuro);
  color: var(--blanco);
}

.sitio-header a {
  color: var(--blanco);
}

.sitio-header__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  flex-wrap: wrap;
}

.sitio-header__logo {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.sitio-header__logo:hover {
  text-decoration: none;
  opacity: 0.9;
}

.sitio-header__logo-img {
  display: block;
  height: 84px;
  max-height: 84px;
  width: auto;
  max-width: 420px;
  object-fit: contain;
}

.sitio-header__nav ul {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.sitio-header__nav a {
  font-size: 0.95rem;
  font-weight: 500;
}

.sitio-header__nav a:hover {
  text-decoration: underline;
}

/* Buscador de cabecera: categoría + ciudad + botón */

.buscador-header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.buscador-header select {
  padding: 9px 12px;
  border-radius: var(--radio);
  border: 1px solid transparent;
  background: var(--blanco);
  color: var(--texto-principal);
  font-size: 0.9rem;
  min-width: 160px;
}

.buscador-header button {
  border: none;
}

@media (max-width: 760px) {
  .sitio-header__barra {
    flex-direction: column;
    align-items: stretch;
  }

  .sitio-header__nav ul {
    justify-content: center;
  }

  .buscador-header {
    justify-content: center;
  }

  .buscador-header select {
    flex: 1 1 140px;
  }
}

/* En el home, el buscador del hero ya cubre lo mismo que esta barra */
.pagina-home .buscador-header {
  display: none;
}

/* ---------- Breadcrumbs ---------- */

.breadcrumbs {
  background: var(--azul-claro);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 0;
  margin: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--azul-claro-texto);
}

.breadcrumbs a {
  color: var(--azul-oscuro);
  font-weight: 600;
}

.breadcrumbs li:not(:last-child)::after {
  content: "/";
  margin-left: 6px;
  color: var(--azul-medio);
}

.breadcrumbs li[aria-current="page"] {
  color: var(--gris-texto);
  font-weight: 400;
}

/* ==========================================================================
   Home — hero
   ========================================================================== */

.hero {
  position: relative;
  background: var(--azul-oscuro);
  color: var(--blanco);
  padding: 56px 0 64px;
  text-align: center;
}

/* Imagen de fondo del hero (banner_hero en admin/banners.php): el color
   del overlay usa color-mix() sobre var(--azul-oscuro) en vez de un rgba()
   fijo calculado al generar el HTML — así cambia instantáneo junto con el
   tema (igual que el header y los botones), sin depender de regenerar el
   home cada vez que cambia el color primario. */
.hero--con-imagen {
  background-size: cover;
  background-position: center;
}

.hero--con-imagen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--azul-oscuro) 55%, transparent);
}

.hero > .contenedor {
  position: relative;
  z-index: 1;
}

.hero h1 {
  font-size: 2rem;
  margin-bottom: 10px;
}

.hero__subtitulo {
  color: rgba(255, 255, 255, 0.85);
  max-width: 560px;
  margin: 0 auto 28px;
}

/* Buscador por nombre de negocio/especialista: independiente de los
   combos de categoría/ciudad de .hero__buscador, con su propio dropdown
   de resultados tipo autocomplete. */
.buscador-negocio {
  max-width: 480px;
  margin: 0 auto 20px;
  text-align: left;
  position: relative;
}

.buscador-negocio__label {
  display: block;
  color: var(--blanco);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.buscador-negocio__campo {
  position: relative;
}

.buscador-negocio__input {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radio);
  border: 1px solid var(--gris-borde);
  background: var(--blanco);
  color: var(--texto-principal);
  font-size: 0.95rem;
  box-shadow: var(--sombra);
  box-sizing: border-box;
}

.buscador-negocio__input:focus {
  outline: none;
  border-color: var(--azul-medio);
  box-shadow: 0 0 0 3px rgba(55, 138, 221, 0.25);
}

.buscador-negocio__resultados {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  max-height: 360px;
  overflow-y: auto;
  z-index: 20;
}

.buscador-negocio__resultados--visible {
  display: block;
}

.buscador-negocio__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  text-decoration: none;
  border-bottom: 1px solid var(--gris-borde);
}

.buscador-negocio__item:last-child {
  border-bottom: none;
}

.buscador-negocio__item:hover,
.buscador-negocio__item:focus {
  background: var(--azul-claro);
}

.buscador-negocio__item-nombre {
  color: var(--azul-oscuro);
  font-weight: 600;
  font-size: 0.95rem;
}

.buscador-negocio__item-meta {
  color: var(--gris-texto);
  font-size: 0.85rem;
}

.buscador-negocio__vacio {
  margin: 0;
  padding: 14px;
  color: var(--gris-texto);
  font-size: 0.9rem;
  text-align: center;
}

.hero__buscador {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--blanco);
  padding: 14px;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  max-width: 720px;
  margin: 0 auto;
}

.hero__buscador select {
  flex: 1 1 220px;
  padding: 12px 14px;
  border-radius: var(--radio);
  border: 1px solid var(--gris-borde);
  background: var(--blanco);
  color: var(--texto-principal);
  font-size: 0.95rem;
}

.hero__buscador button {
  flex: 0 0 auto;
}

@media (max-width: 560px) {
  .hero {
    padding: 40px 0 48px;
  }

  .hero__buscador {
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  /* flex-basis (220px) se hereda del layout de escritorio y, al pasar a
     flex-direction: column en móvil, se interpreta como alto en vez de
     ancho — inflando cada select a ~220px de alto. Se anula aquí. */
  .hero__buscador select {
    flex: 1 1 auto;
    min-height: unset;
    width: 100%;
    font-size: 16px;
    padding: 10px 12px;
    box-sizing: border-box;
  }

  .hero__buscador .btn,
  .hero__buscador button[type="submit"] {
    width: 100%;
    padding: 12px;
    font-size: 16px;
  }
}

/* ==========================================================================
   Secciones genéricas del home
   ========================================================================== */

.seccion {
  padding: 48px 0;
}

.seccion__cabecera {
  text-align: center;
  margin-bottom: 28px;
}

.seccion__cabecera h2 {
  font-size: 1.5rem;
}

.seccion__cabecera p {
  color: var(--gris-texto);
  margin: 0;
}

.seccion--alterna {
  background: var(--blanco);
}

.seccion--banner-secundario {
  padding-top: 24px;
  padding-bottom: 24px;
}

/* Navegación anterior/siguiente entre páginas de un combo categoría×ciudad
   paginado (build/templates/categoria.php). Solo aparece cuando el combo
   tiene 2+ páginas. */
.paginacion-combo {
  padding: 8px 0 32px;
}

.paginacion-combo__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.paginacion-combo__hueco {
  min-width: 1px;
}

.paginacion-combo__indicador {
  color: var(--gris-texto);
  font-size: 0.9rem;
  font-weight: 600;
}

/* .ciudades-cercanas es una sola línea de enlaces — con refuerzo-seo (texto
   SEO del módulo de generación batch) apilado justo detrás, el padding de
   48px de .seccion en ambos bloques deja un hueco muerto desproporcionado.
   Se reduce solo en esta vecindad puntual, sin tocar .seccion en general.
   El padding-top de .ciudades-cercanas (24px) es la transición desde el
   listado de fichas de arriba y no se toca; el bottom + el padding-top de
   refuerzo-seo se consolidan a 36px combinados, para que ambos bloques se
   sientan como una sola zona compacta en vez de dos secciones con aire
   independiente. */
.ciudades-cercanas {
  padding: 24px 0 16px;
}

.ciudades-cercanas + .refuerzo-seo {
  padding-top: 20px;
}

@media (max-width: 560px) {
  .seccion--banner-secundario {
    padding-top: 16px;
    padding-bottom: 16px;
  }
}

/* ---------- Grid de categorías ---------- */

.tarjeta-categoria {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 16px;
  text-align: center;
  color: var(--texto-principal);
}

.tarjeta-categoria:hover {
  text-decoration: none;
  border-color: var(--azul-medio);
  box-shadow: 0 4px 14px rgba(12, 68, 124, 0.12);
}

.tarjeta-categoria__icono {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--azul-claro);
  color: var(--azul-oscuro);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tarjeta-categoria__icono svg {
  width: 28px;
  height: 28px;
}

.tarjeta-categoria__nombre {
  font-weight: 600;
  font-size: 0.95rem;
}

.tarjeta-categoria__conteo {
  color: var(--gris-texto);
  font-size: 0.82rem;
}

/* ---------- Grid de ciudades ---------- */

.tarjeta-ciudad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 20px;
  color: var(--texto-principal);
}

.tarjeta-ciudad:hover {
  text-decoration: none;
  border-color: var(--azul-medio);
  box-shadow: 0 4px 14px rgba(12, 68, 124, 0.12);
}

.tarjeta-ciudad__nombre {
  font-weight: 600;
}

.tarjeta-ciudad__conteo {
  flex-shrink: 0;
}

/* ---------- Negocios destacados ---------- */

.tarjeta-negocio {
  overflow: hidden;
  color: var(--texto-principal);
  display: flex;
  flex-direction: column;
}

.tarjeta-negocio__media {
  aspect-ratio: 4 / 3;
  background: var(--azul-claro);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.tarjeta-negocio__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tarjeta-negocio__media span {
  font-size: 2rem;
  font-weight: 700;
  color: var(--azul-oscuro);
}

.tarjeta-negocio__cuerpo {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.tarjeta-negocio__nombre {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}

.tarjeta-negocio__meta {
  color: var(--gris-texto);
  font-size: 0.85rem;
}

.tarjeta-negocio__pie {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* ---------- Banner Vitalidad Metabólica (CSS puro, sin imágenes) ---------- */

.banner-vitalidad {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: linear-gradient(to right, #0C447C, #378ADD);
  color: var(--blanco);
  text-align: center;
  border-radius: 12px;
  text-decoration: none;
}

.banner-vitalidad:hover {
  text-decoration: none;
  opacity: 0.96;
}

.banner-vitalidad__titulo {
  color: var(--blanco);
  font-weight: 700;
}

.banner-vitalidad__subtitulo {
  color: rgba(255, 255, 255, 0.85);
  display: block;
}

.banner-vitalidad__cta {
  flex-shrink: 0;
  background: var(--blanco);
  color: #0C447C;
  font-weight: 700;
  border-radius: var(--radio-pill);
  white-space: nowrap;
}

.banner-vitalidad--principal {
  width: 100%;
  min-height: 220px;
  flex-direction: column;
  padding: 32px;
}

.banner-vitalidad--principal .banner-vitalidad__titulo {
  font-size: 1.5rem;
}

.banner-vitalidad--principal .banner-vitalidad__subtitulo {
  font-size: 1rem;
  margin-top: 6px;
  margin-bottom: 20px;
}

.banner-vitalidad--principal .banner-vitalidad__cta {
  padding: 12px 24px;
  font-size: 0.95rem;
}

.banner-vitalidad--secundario {
  min-height: 90px;
  padding: 20px 28px;
}

.banner-vitalidad--secundario .banner-vitalidad__texto {
  text-align: left;
}

.banner-vitalidad__titulo--chico {
  font-size: 1.05rem;
}

.banner-vitalidad--secundario .banner-vitalidad__subtitulo {
  font-size: 0.85rem;
}

.banner-vitalidad__cta--compacto {
  padding: 8px 16px;
  font-size: 0.85rem;
}

@media (max-width: 560px) {
  .banner-vitalidad--principal {
    min-height: 160px;
    padding: 24px;
  }

  .banner-vitalidad--principal .banner-vitalidad__titulo {
    font-size: 1.2rem;
  }

  .banner-vitalidad--secundario {
    flex-direction: column;
    text-align: center;
  }

  .banner-vitalidad--secundario .banner-vitalidad__texto {
    text-align: center;
  }
}

/* ==========================================================================
   Página de categoría
   ========================================================================== */

.pagina-categoria__intro {
  padding: 28px 0 8px;
}

.pagina-categoria__intro h1 {
  font-size: 1.7rem;
}

.texto-seo-generico {
  color: var(--texto-principal);
}

.texto-seo-generico img,
.texto-seo-generico h2 img,
.texto-seo-generico h3 img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 8px;
  margin: 16px 0;
  display: block;
}

.texto-seo-generico h2:has(img),
.texto-seo-generico h3:has(img) {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

.texto-seo-generico h2,
.texto-seo-generico h3 {
  margin: 20px 0 10px;
  color: #0C447C;
}

.texto-seo-generico p {
  margin-bottom: 12px;
  line-height: 1.7;
}

.texto-seo-generico p:empty,
.texto-seo-generico p:has(> br:only-child) {
  display: none;
}

.texto-seo-generico ul,
.texto-seo-generico ol {
  margin: 0 0 1.2em 1.4em;
  padding-left: 0.6em;
}

.texto-seo-generico li {
  margin-bottom: 0.5em;
  line-height: 1.7;
}

.texto-seo-generico strong {
  font-weight: 700;
}

.categoria-layout {
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  gap: 28px;
  align-items: start;
  padding: 16px 0 48px;
}

@media (max-width: 860px) {
  .categoria-layout {
    grid-template-columns: 1fr;
  }
}

.categoria-layout__listado {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.categoria-layout__sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 20px;
}

.categoria-layout__sidebar h4 {
  font-size: 0.95rem;
  margin-bottom: 10px;
}

.categoria-layout__sidebar ul li {
  margin-bottom: 6px;
  font-size: 0.9rem;
}

.categoria-layout__banner-externo {
  display: block;
  width: 100%;
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
}

.categoria-layout__banner-externo:hover {
  opacity: 0.96;
}

.categoria-layout__banner-externo img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Tarjeta de negocio en listado (horizontal) ---------- */

.tarjeta-negocio-fila {
  display: flex;
  gap: 16px;
  padding: 16px;
  color: var(--texto-principal);
}

.tarjeta-negocio-fila:hover {
  border-color: var(--azul-medio);
  box-shadow: 0 4px 14px rgba(12, 68, 124, 0.1);
}

.tarjeta-negocio-fila__media {
  flex: 0 0 140px;
  height: 105px;
  border-radius: var(--radio);
  background: var(--azul-claro);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.tarjeta-negocio-fila__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tarjeta-negocio-fila__media span {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--azul-oscuro);
}

.tarjeta-negocio-fila__cuerpo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tarjeta-negocio-fila__nombre {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
}

.tarjeta-negocio-fila__direccion {
  color: var(--gris-texto);
  font-size: 0.85rem;
  margin: 0;
}

.tarjeta-negocio-fila__pie {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 560px) {
  .tarjeta-negocio-fila {
    flex-direction: column;
  }

  .tarjeta-negocio-fila__media {
    flex: 0 0 auto;
    width: 100%;
    height: 160px;
  }
}

/* ==========================================================================
   Footer del sitio
   ========================================================================== */

.sitio-footer {
  background: var(--azul-oscuro);
  color: var(--blanco);
  margin-top: 48px;
}

.sitio-footer a {
  color: var(--azul-claro);
}

.sitio-footer__columnas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  padding: 40px 0 24px;
}

@media (max-width: 900px) {
  .sitio-footer__columnas {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .sitio-footer__columnas {
    grid-template-columns: 1fr;
  }
}

.sitio-footer__columna h4 {
  color: var(--blanco);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}

.sitio-footer__columna ul li {
  margin-bottom: 8px;
  font-size: 0.88rem;
}

.sitio-footer__seo {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 20px 0;
}

.sitio-footer__seo-acordeon summary {
  cursor: pointer;
  list-style: none;
  color: var(--blanco);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.sitio-footer__seo-acordeon summary::-webkit-details-marker {
  display: none;
}

.sitio-footer__seo-acordeon summary::after {
  content: "▾";
  font-size: 0.95rem;
  line-height: 1;
  transition: transform 0.18s ease;
}

.sitio-footer__seo-acordeon[open] summary::after {
  transform: rotate(180deg);
}

.sitio-footer__seo-acordeon summary:hover {
  color: var(--azul-claro);
}

.sitio-footer__seo-enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 0.8rem;
  margin-top: 14px;
}

.sitio-footer__seo-enlaces a {
  color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   Ficha de negocio individual
   ========================================================================== */

.ficha-negocio__foto {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 340px;
  margin-top: 20px;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--azul-claro);
}

.ficha-negocio__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ficha-negocio__foto-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--azul-oscuro);
}

.ficha-negocio__foto-fallback svg {
  width: 64px;
  height: 64px;
}

.ficha-negocio__foto-fallback::after {
  content: "Imagen no disponible";
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--azul-claro-texto);
}

.ficha-negocio__cabecera {
  background: var(--azul-claro);
  padding: 24px 0;
  margin-top: 20px;
  border-radius: var(--radio);
}

.ficha-negocio__cabecera-interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.ficha-negocio__cabecera h1 {
  font-size: 1.5rem;
  color: var(--azul-oscuro);
  margin-bottom: 2px;
}

.ficha-negocio__categoria {
  color: var(--gris-texto);
  margin: 0;
  font-size: 0.95rem;
}

.ficha-negocio__layout {
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  gap: 28px;
  align-items: start;
  padding: 28px 0 48px;
}

@media (max-width: 860px) {
  .ficha-negocio__layout {
    grid-template-columns: 1fr;
  }
}

.ficha-negocio__principal,
.ficha-negocio__sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ficha-negocio__sidebar {
  position: sticky;
  top: 20px;
}

.ficha-negocio__seccion {
  padding: 24px;
  border-left: 4px solid var(--azul-medio);
}

.ficha-negocio__seccion h2 {
  font-size: 1.1rem;
  color: var(--azul-oscuro);
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--gris-borde);
}

.ficha-negocio__lista-contacto li {
  margin-bottom: 10px;
  font-size: 0.95rem;
}

.ficha-negocio__lista-contacto li:last-child {
  margin-bottom: 0;
}

.ficha-negocio__acciones {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ficha-negocio__acciones .btn {
  width: 100%;
}

.ficha-negocio__tabla-horarios {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.ficha-negocio__tabla-horarios td {
  padding: 8px 4px;
  border-bottom: 1px solid var(--gris-borde);
}

.ficha-negocio__tabla-horarios tr:last-child td {
  border-bottom: none;
}

.ficha-negocio__tabla-horarios .ficha-negocio__dia {
  font-weight: 700;
  white-space: nowrap;
  padding-right: 16px;
}

.ficha-negocio__tabla-horarios tr.ficha-negocio__dia-actual {
  background: var(--azul-claro);
}

.ficha-negocio__tabla-horarios tr.ficha-negocio__dia-actual td {
  border-radius: var(--radio);
}

.ficha-negocio__tabla-horarios .badge + .badge {
  margin-left: 4px;
}

.ficha-negocio__horarios-vacio {
  color: var(--gris-texto);
  font-size: 0.92rem;
  margin: 0;
}

.badge--abierto {
  background: #DFF3E6;
  color: #1A7A43;
}

.badge--cerrado {
  background: var(--gris-fondo);
  color: var(--gris-texto);
}

.ficha-negocio__mapa-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  min-height: 400px;
  border-radius: var(--radio);
  overflow: hidden;
}

.ficha-negocio__mapa-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Banner Fichas (imagen subida en admin/banners.php, tamaño recomendado
   1140x200). Usa la misma .blog-banner-imagen que blog/categorías, pero
   acotada aquí para que una imagen que no respete esa proporción no
   infle la altura de la página. No afecta Banner Principal/Secundario
   (modo CSS, otras páginas) por el scope del wrapper. */
.ficha-negocio__banner-wrap .blog-banner-imagen {
  display: block;
  width: 100%;
  aspect-ratio: 1140 / 200;
  max-height: 200px;
  margin: 0 0 24px;
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
}

.ficha-negocio__banner-wrap .blog-banner-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.sitio-footer__barra-inferior {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
}

/* ==========================================================================
   Fixes responsive — ficha de negocio individual (móvil)
   ========================================================================== */

@media (max-width: 767px) {
  /* 1. Botones "Llamar"/"Visitar sitio web" cortados por la derecha */
  .ficha-negocio__acciones .btn {
    width: 100%;
    box-sizing: border-box;
  }

  /* 2. Horarios truncados: .badge fuerza white-space:nowrap por defecto,
        sin espacio suficiente en la columna se corta visualmente. */
  .ficha-negocio__tabla-horarios .badge {
    white-space: normal;
    word-break: break-word;
  }

  /* 3. URL larga del sitio web desbordando su contenedor */
  .ficha-negocio__lista-contacto a {
    word-break: break-all;
  }

  /* 4. Espacio vacío excesivo entre el mapa y el footer. El sidebar ya no
        es sticky (innecesario en una sola columna). La causa principal
        del hueco grande era .sitio-footer { margin-top: 48px }, una
        regla global (no específica de fichas) — se reduce aquí junto
        con el padding-bottom del layout para sumar ~16px en total. */
  .ficha-negocio__layout {
    padding-bottom: 8px;
  }

  .ficha-negocio__sidebar {
    position: static;
  }

  .sitio-footer {
    margin-top: 8px;
  }

  /* 5. Banner Fichas (imagen dinámica): en pantallas angostas el
        aspect-ratio 1140x200 lo deja demasiado bajo/desproporcionado,
        así que se fija una altura menor y se abandona el aspect-ratio. */
  .ficha-negocio__banner-wrap .blog-banner-imagen {
    aspect-ratio: auto;
    height: 140px;
    max-height: 140px;
  }
}

/* ==========================================================================
   Artículo de blog
   ========================================================================== */

.blog-articulo {
  max-width: 760px;
  padding: 28px 20px 48px;
}

.blog-articulo h1 {
  font-size: 1.8rem;
  color: var(--azul-oscuro);
  margin-bottom: 6px;
}

.blog-articulo__meta {
  color: var(--gris-texto);
  font-size: 0.9rem;
  margin-bottom: 24px;
}

.blog-articulo__galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}

.blog-articulo__galeria img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radio);
}

.blog-articulo__contenido {
  font-size: 1.02rem;
  line-height: 1.7;
}

.blog-articulo__contenido p {
  margin-bottom: 1.2em;
}

.blog-articulo__contenido img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radio);
  margin: 16px 0;
}

.blog-articulo__contenido h2 {
  margin-top: 2em;
  margin-bottom: 0.5em;
  font-size: 1.35rem;
  color: var(--azul-oscuro);
}

.blog-articulo__contenido h3 {
  margin-top: 1.6em;
  margin-bottom: 0.4em;
  font-size: 1.1rem;
  color: var(--texto-principal);
}

.blog-articulo__contenido p:empty,
.blog-articulo__contenido p:has(> br:only-child) {
  display: none;
}


.blog-articulo__contenido ul,
.blog-articulo__contenido ol {
  margin: 0 0 1.2em 1.4em;
  padding-left: 0.6em;
}

.blog-articulo__contenido li {
  margin-bottom: 0.5em;
  line-height: 1.7;
}

.blog-articulo__contenido strong {
  font-weight: 700;
  color: var(--texto-principal);
}

/* ---------- Blog — índice ---------- */

.blog-indice {
  padding: 48px 0 64px;
}

.blog-indice h1 {
  font-size: 2rem;
  margin-bottom: 8px;
}

.blog-indice__subtitulo {
  color: var(--gris-texto);
  margin-bottom: 40px;
}

.blog-indice__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.blog-indice__tarjeta {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.blog-indice__tarjeta:hover {
  box-shadow: 0 4px 16px rgba(12, 68, 124, 0.14);
  transform: translateY(-2px);
}

.blog-indice__tarjeta-cuerpo {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.blog-indice__categoria {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--azul-medio);
}

.blog-indice__titulo {
  font-size: 1.1rem;
  margin: 0;
  color: var(--texto-principal);
  line-height: 1.35;
}

.blog-indice__extracto {
  font-size: 0.88rem;
  color: var(--gris-texto);
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-indice__fecha {
  font-size: 0.78rem;
  color: var(--gris-texto);
  margin-top: auto;
  padding-top: 8px;
}

.blog-indice__vacio {
  color: var(--gris-texto);
  font-size: 1rem;
}

.blog-banner-imagen {
  display: block;
  margin-top: 32px;
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
}

.blog-banner-imagen img {
  width: 100%;
  height: auto;
  display: block;
}

.blog-articulo .banner-vitalidad--principal {
  margin-top: 32px;
}

/* ---------- Blog home — últimos artículos ---------- */
.seccion--blog-home {
  background: #fff;
}

.blog-home-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}

@media (max-width: 900px) {
  .blog-home-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .blog-home-grid {
    grid-template-columns: 1fr;
  }
}

.tarjeta-blog {
  background: #fff;
  border: 1px solid #dde6f0;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.tarjeta-blog:hover {
  box-shadow: 0 6px 20px rgba(12, 68, 124, 0.12);
  transform: translateY(-2px);
}

.tarjeta-blog__media-link {
  display: block;
  text-decoration: none;
}

.tarjeta-blog__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #e6f1fb;
}

.tarjeta-blog__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.tarjeta-blog:hover .tarjeta-blog__media img {
  transform: scale(1.04);
}

.tarjeta-blog__media--placeholder {
  background: linear-gradient(135deg, #0C447C, #378ADD);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.tarjeta-blog__media--placeholder span {
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tarjeta-blog__cuerpo {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.tarjeta-blog__badge {
  display: inline-block;
  background: #e6f1fb;
  color: #0C447C;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 4px;
  align-self: flex-start;
}

.tarjeta-blog__titulo {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tarjeta-blog__titulo a {
  color: #1a2b3c;
  text-decoration: none;
}

.tarjeta-blog__titulo a:hover {
  color: #0C447C;
}

.tarjeta-blog__extracto {
  font-size: 0.88rem;
  color: #5a6a7a;
  line-height: 1.5;
  margin: 0;
}

.tarjeta-blog__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid #eef3f8;
}

.tarjeta-blog__fecha {
  font-size: 0.78rem;
  color: #8a9aaa;
}

.tarjeta-blog__leer-mas {
  font-size: 0.85rem;
  font-weight: 600;
  color: #378ADD;
  text-decoration: none;
}

.tarjeta-blog__leer-mas:hover {
  color: #0C447C;
}

.blog-home-cta {
  text-align: center;
  margin-top: 36px;
}

/* ---------------------------------------------------------------------
   Módulo de Páginas — bloques (build/templates/partials/pagina_bloques.php)
   --------------------------------------------------------------------- */

.bloque-hero {
  background: var(--color-fondo);
  background-size: cover;
  background-position: center;
  padding: 64px 0;
  text-align: center;
}

.bloque-hero--con-imagen {
  color: var(--blanco);
  position: relative;
}

.bloque-hero--con-imagen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--azul-oscuro) 55%, transparent);
}

.bloque-hero__interior {
  position: relative;
  z-index: 1;
}

.bloque-hero__subtitulo {
  font-size: 1.1rem;
  margin: 12px 0 20px;
}

.bloque-hero__botones {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.bloque-texto-imagen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.bloque-texto-imagen--invertido {
  direction: rtl;
}

.bloque-texto-imagen--invertido > * {
  direction: ltr;
}

.bloque-texto-imagen__media img {
  width: 100%;
  border-radius: var(--radio);
}

.bloque-dos-columnas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.bloque-dos-columnas__col {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 24px;
  border: 1px solid var(--gris-borde);
}

.bloque-dos-columnas__icono {
  color: var(--azul-medio);
  margin-bottom: 12px;
}

.bloque-dos-columnas__icono--imagen {
  margin: -24px -24px 20px;
}

.bloque-dos-columnas__icono--imagen img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radio) var(--radio) 0 0;
  display: block;
}

.bloque-dos-columnas__texto p {
  margin: 0 0 0.8em;
}

.bloque-dos-columnas__texto p:last-child {
  margin-bottom: 0;
}

.bloque-dos-columnas__boton {
  margin-top: 12px;
}

.bloque-cta {
  padding: 56px 0;
  text-align: center;
  color: var(--blanco);
}

.bloque-cta__texto p {
  margin: 0 0 0.5em;
}

.bloque-cta__texto p:last-child {
  margin-bottom: 0;
}

.bloque-cta__interior .btn {
  margin-top: 16px;
}

.bloque-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.bloque-galeria__item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: var(--radio);
}

.bloque-texto-libre {
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.7;
}

.bloque-faq__item {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  padding: 16px 20px;
  margin-bottom: 12px;
}

.bloque-faq__item summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--azul-oscuro);
}

.bloque-faq__respuesta {
  margin-top: 10px;
  color: var(--texto-principal);
}

.bloque-estadisticas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 24px;
  text-align: center;
}

.bloque-estadisticas__item {
  display: flex;
  flex-direction: column;
}

.bloque-estadisticas__cifra {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--azul-oscuro);
}

.bloque-estadisticas__etiqueta {
  font-size: 0.9rem;
  color: var(--texto-principal);
}

.bloque-video__wrapper {
  position: relative;
  padding-top: 56.25%;
}

.bloque-video__wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radio);
}

@media (max-width: 768px) {
  .bloque-texto-imagen,
  .bloque-dos-columnas {
    grid-template-columns: 1fr;
  }
  .bloque-texto-imagen--invertido {
    direction: ltr;
  }
}