/* =====================================================================
   METAMBA MAIGO - Hoja de estilos principal
   Identidad: selva de Bioko (verde profundo), ceiba (dorado),
   golfo de Guinea (azul), arena clara de fondo.
   ===================================================================== */

:root {
  --mm-selva:    #0B3D2E;   /* verde bosque profundo */
  --mm-selva-2:  #145C43;
  --mm-dorado:   #E8A13D;   /* ceiba / atardecer */
  --mm-golfo:    #1273A8;   /* azul del golfo */
  --mm-fondo:    #FAF7F0;   /* arena clara */
  --mm-tinta:    #1E2A26;
  --mm-borde:    #E4DED2;

  --mm-display:  "Bricolage Grotesque", system-ui, sans-serif;
  --mm-cuerpo:   "Inter", system-ui, sans-serif;
  --mm-radio:    14px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--mm-cuerpo);
  background: var(--mm-fondo);
  color: var(--mm-tinta);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: var(--mm-golfo); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Navegación ---------- */
.mm-navbar {
  background: var(--mm-fondo);
  border-bottom: 1px solid var(--mm-borde);
}
.mm-marca {
  font-family: var(--mm-display);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--mm-selva) !important;
  letter-spacing: -0.02em;
}
.mm-marca-acento { color: var(--mm-dorado); }
.mm-marca-lema {
  font-family: var(--mm-cuerpo); font-weight: 500;
  font-size: .68rem; letter-spacing: 0; color: #7a8a80; margin-top: 1px;
}
.mm-marca-icono {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; margin-right: .4rem;
  background: var(--mm-selva); color: #fff;
  border-radius: 10px; font-size: 1rem;
  transform: rotate(-8deg);
}
.mm-navbar .nav-link { color: var(--mm-tinta); font-weight: 500; }
.mm-navbar .nav-link:hover { color: var(--mm-selva); }

/* ---------- Botones ---------- */
.mm-btn-primario {
  background: var(--mm-selva); color: #fff; border: none;
  font-weight: 600; border-radius: 10px;
}
.mm-btn-primario:hover { background: var(--mm-selva-2); color: #fff; }
.mm-btn-dorado {
  background: var(--mm-dorado); color: var(--mm-selva);
  font-weight: 700; border: none; border-radius: 10px;
}
.mm-btn-dorado:hover { filter: brightness(1.06); color: var(--mm-selva); }

/* ---------- Hero ---------- */
.mm-hero {
  position: relative;
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(232,161,61,.25), transparent 60%),
    linear-gradient(160deg, var(--mm-selva) 0%, var(--mm-selva-2) 70%, #0F4A64 100%);
  color: #fff;
  padding: 5rem 0 6.5rem;
}
.mm-hero-eyebrow {
  font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--mm-dorado); font-weight: 600; margin-bottom: .75rem;
}
.mm-hero-titulo {
  font-family: var(--mm-display);
  font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.6rem);
  letter-spacing: -0.03em; margin-bottom: .75rem;
}
.mm-hero-titulo em { font-style: normal; color: var(--mm-dorado); }
.mm-hero-sub { font-size: 1.1rem; opacity: .85; max-width: 46rem; margin-inline: auto; }
.mm-ola { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 70px; }

/* Buscador principal */
.mm-buscador {
  display: flex; align-items: center; gap: .25rem;
  background: #fff; border-radius: 999px;
  padding: .4rem .4rem .4rem 1.1rem;
  margin-top: 1.75rem;
}
.mm-buscador-icono { color: var(--mm-selva); font-size: 1.1rem; }
.mm-buscador-input {
  flex: 1; border: none; outline: none; padding: .6rem .5rem;
  font-size: 1rem; color: var(--mm-tinta); background: transparent; min-width: 0;
}
.mm-buscador-select {
  border: none; background: #F1EDE3; border-radius: 999px;
  padding: .55rem .9rem; font-size: .9rem; color: var(--mm-tinta);
  max-width: 11rem;
}
.mm-buscador-btn { border-radius: 999px; padding: .6rem 1.5rem; }
@media (max-width: 575px) {
  .mm-buscador { flex-wrap: wrap; border-radius: var(--mm-radio); }
  .mm-buscador-select, .mm-buscador-btn { width: 100%; max-width: none; }
}

/* Chips */
.mm-chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.mm-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.12); color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  padding: .35rem .9rem; border-radius: 999px;
  font-size: .875rem; transition: background .15s;
}
.mm-chip:hover { background: rgba(255,255,255,.22); color: #fff; text-decoration: none; }
.mm-chip-quieto {
  background: #F1EDE3; color: var(--mm-tinta); border-color: var(--mm-borde);
}
.mm-chip-quieto:hover { background: #F1EDE3; color: var(--mm-tinta); }

/* Slider de imágenes turísticas del hero */
.mm-hero-slider {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;               /* recorta el zoom (Ken Burns) sin afectar a la ola */
}
.mm-hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  animation: mm-hero-fade 35s infinite;
  will-change: opacity, transform;
}
.mm-hero-slide:nth-child(1) { animation-delay: 0s; }
.mm-hero-slide:nth-child(2) { animation-delay: 7s; }
.mm-hero-slide:nth-child(3) { animation-delay: 14s; }
.mm-hero-slide:nth-child(4) { animation-delay: 21s; }
.mm-hero-slide:nth-child(5) { animation-delay: 28s; }

@keyframes mm-hero-fade {
  0%   { opacity: 0; transform: scale(1.06); }
  3%   { opacity: 1; }
  20%  { opacity: 1; transform: scale(1.14); }
  23%  { opacity: 0; }
  100% { opacity: 0; transform: scale(1.14); }
}

/* Velo tipo "reveal": verde sólido a la izquierda que descubre la foto a la derecha */
.mm-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(95deg,
    rgba(11,61,46,.97) 0%,
    rgba(11,61,46,.93) 32%,
    rgba(12,66,52,.82) 46%,
    rgba(14,72,92,.40) 62%,
    rgba(15,74,100,0) 82%);
}
.mm-hero-contenido { position: relative; z-index: 2; }

/* ----- Hero dividido (contenido a la izquierda, foto a la derecha) ----- */
.mm-hero-split .mm-hero-titulo,
.mm-hero-split .mm-hero-sub { text-shadow: 0 2px 14px rgba(8,30,22,.35); }
.mm-hero-split .mm-hero-sub { margin-inline: 0; }
.mm-hero-split .mm-hero-eyebrow .bi { font-size: .9em; }
.mm-hero-split .mm-chips { justify-content: flex-start; }

/* Chips sólidos (blancos) con icono a color, como en el diseño */
.mm-hero-split .mm-chip {
  background: #fff; color: var(--mm-tinta);
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(8,30,22,.18);
  font-weight: 600;
}
.mm-hero-split .mm-chip:hover {
  background: #fff; color: var(--mm-tinta);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(8,30,22,.24);
}
.mm-hero-split .mm-chip i { font-size: 1rem; }

/* Tarjeta flotante "¿Tienes un negocio?" */
.mm-hero-cta-flotante {
  position: absolute; z-index: 3;
  right: 12px; top: 57%; transform: translateY(-50%);
  width: 250px; max-width: 40vw;
  padding: 2.4rem 1.35rem 1.4rem;
  text-align: center; color: #fff;
  background: rgba(11,61,46,.90);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px;
  box-shadow: 0 22px 55px rgba(0,0,0,.38);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.mm-hero-cta-badge {
  position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--mm-selva-2); color: #fff; font-size: 1.4rem;
  border: 2px solid var(--mm-dorado);
  box-shadow: 0 10px 22px rgba(0,0,0,.32);
}
.mm-hero-cta-titulo {
  font-family: var(--mm-display); font-weight: 800;
  font-size: 1.15rem; margin: .4rem 0 .35rem;
}
.mm-hero-cta-texto { font-size: .85rem; line-height: 1.4; opacity: .82; margin-bottom: 1.1rem; }
.mm-hero-cta-flotante .btn { width: 100%; }

/* En móvil/tablet: se oculta la tarjeta y el velo cubre toda la foto para legibilidad */
@media (max-width: 991px) {
  .mm-hero-cta-flotante { display: none; }
  .mm-hero-split .mm-hero-overlay {
    background: linear-gradient(160deg, rgba(11,61,46,.93) 0%, rgba(15,74,100,.88) 100%);
  }
}

/* Cuando el JS controla el slider, se desactiva la animación CSS */
.mm-hero.js-slider .mm-hero-slide {
  animation: none; opacity: 0; transform: scale(1.06);
  transition: opacity 1.1s ease, transform 7s ease;
}
.mm-hero.js-slider .mm-hero-slide.activa { opacity: 1; transform: scale(1.12); }

@media (prefers-reduced-motion: reduce) {
  .mm-hero-slide { animation: none; transition: opacity .4s ease; }
  .mm-hero-slide:not(.activa) { opacity: 0; }
  .mm-hero-slide.activa { opacity: 1; transform: none; }
}

/* ---------- Secciones ---------- */
.mm-eyebrow {
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mm-dorado); font-weight: 700; margin-bottom: .25rem;
}
.mm-titulo-seccion {
  font-family: var(--mm-display); font-weight: 800;
  letter-spacing: -0.02em; font-size: clamp(1.5rem, 3vw, 2rem);
}
.mm-seccion-alterna { background: #F3EFE6; }
.mm-enlace { font-weight: 600; }

/* ---------- Tarjetas de categoría ---------- */
.mm-cat-card {
  display: flex; align-items: center; gap: .75rem;
  background: #fff; border: 1px solid var(--mm-borde);
  border-radius: var(--mm-radio); padding: .9rem 1rem;
  color: var(--mm-tinta); font-weight: 600;
  transition: transform .15s, box-shadow .15s;
}
.mm-cat-card:hover {
  transform: translateY(-2px); text-decoration: none; color: var(--mm-tinta);
  box-shadow: 0 8px 20px rgba(11,61,46,.10);
}
.mm-cat-icono {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 12px; font-size: 1.2rem;
  background: color-mix(in srgb, var(--cat-color) 12%, #fff);
  color: var(--cat-color);
}
.mm-cat-nombre { font-size: .95rem; }

/* ---------- Tarjeta de establecimiento ---------- */
.mm-tarjeta {
  background: #fff; border: 1px solid var(--mm-borde);
  border-radius: var(--mm-radio); overflow: hidden; height: 100%;
  display: flex; flex-direction: column;
  transition: transform .15s, box-shadow .15s;
}
.mm-tarjeta:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(11,61,46,.12); }
.mm-tarjeta-img { position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; }
.mm-tarjeta-img img { width: 100%; height: 100%; object-fit: cover; }
.mm-tarjeta-cat {
  position: absolute; top: .6rem; left: .6rem;
  background: rgba(11,61,46,.85); color: #fff;
  font-size: .72rem; font-weight: 600;
  padding: .25rem .6rem; border-radius: 999px;
}
.mm-tarjeta-cuerpo { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.mm-tarjeta-titulo { font-size: 1.02rem; font-weight: 700; margin: 0; }
.mm-tarjeta-titulo a { color: var(--mm-tinta); }
.mm-tarjeta-titulo a:hover { color: var(--mm-selva); text-decoration: none; }
.mm-tarjeta-lugar { font-size: .84rem; color: #6B7570; margin: 0; }
.mm-precio { color: var(--mm-selva); font-weight: 700; letter-spacing: .05em; }
.mm-verificado { color: var(--mm-golfo); font-size: .95rem; }
.estrellas { color: var(--mm-dorado); }

/* ---------- Ciudades ---------- */
.mm-ciudad-card {
  position: relative; display: block; border-radius: var(--mm-radio);
  overflow: hidden; aspect-ratio: 16/9;
}
.mm-ciudad-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.mm-ciudad-card:hover img { transform: scale(1.04); }
.mm-ciudad-info {
  position: absolute; inset: auto 0 0 0; padding: .8rem 1rem;
  background: linear-gradient(transparent, rgba(11,61,46,.85));
  color: #fff; display: flex; flex-direction: column;
}
.mm-ciudad-card:hover { text-decoration: none; }

/* ---------- CTA ---------- */
.mm-cta {
  background: linear-gradient(120deg, var(--mm-selva), var(--mm-selva-2));
  border-radius: calc(var(--mm-radio) * 1.4);
  color: #fff; padding: 2.25rem 2.5rem;
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  align-items: center; justify-content: space-between;
}

/* ---------- Paneles y utilidades ---------- */
.mm-panel {
  background: #fff; border: 1px solid var(--mm-borde);
  border-radius: var(--mm-radio); padding: 1.4rem;
}
.mm-panel-titulo {
  font-family: var(--mm-display); font-weight: 700;
  font-size: 1.15rem; margin-bottom: 1rem;
}
.mm-filtros {
  background: #fff; border: 1px solid var(--mm-borde);
  border-radius: var(--mm-radio); padding: 1.25rem;
  position: sticky; top: 84px;
}
.mm-vacio {
  text-align: center; color: #6B7570;
  background: #fff; border: 1px dashed var(--mm-borde);
  border-radius: var(--mm-radio); padding: 2.5rem 1.5rem;
}
.mm-vacio i { color: var(--mm-dorado); }

/* ---------- Ficha ---------- */
.mm-ficha-titulo {
  font-family: var(--mm-display); font-weight: 800;
  font-size: clamp(1.6rem, 3.5vw, 2.3rem); letter-spacing: -0.02em;
}
.mm-galeria {
  display: grid; gap: .5rem;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 180px 180px;
}
.mm-galeria-principal {
  grid-column: 1 / 3; grid-row: 1 / 3;
  width: 100%; height: 100%; object-fit: cover; border-radius: var(--mm-radio);
}
.mm-galeria-mini { width: 100%; height: 100%; object-fit: cover; border-radius: var(--mm-radio); }
@media (max-width: 767px) {
  .mm-galeria { grid-template-columns: 1fr; grid-template-rows: 240px; }
  .mm-galeria-mini { display: none; }
}
.mm-lista-info { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.mm-lista-info i { color: var(--mm-selva); width: 1.4rem; }
.mm-opinion { border-top: 1px solid var(--mm-borde); padding: 1rem 0; }
.mm-opinion:first-of-type { border-top: none; }
.mm-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #eee; }
.mm-respuesta {
  background: #F3EFE6; border-left: 3px solid var(--mm-dorado);
  border-radius: 0 10px 10px 0; padding: .6rem .9rem; margin-top: .5rem;
}
.mm-mapa { height: 220px; border-radius: 10px; background: #E8E4DA; }

/* ---------- Footer ---------- */
.mm-footer { background: var(--mm-selva); color: rgba(255,255,255,.85); }
.mm-footer h6 { color: var(--mm-dorado); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.mm-footer a { color: rgba(255,255,255,.85); }
.mm-footer a:hover { color: #fff; }
.mm-footer .mm-marca { color: #fff !important; }
.mm-footer ul li { margin-bottom: .35rem; }

/* Accesibilidad: foco visible */
:focus-visible { outline: 3px solid var(--mm-dorado); outline-offset: 2px; border-radius: 4px; }

/* ============ Paneles de usuario/propietario (Fase 2) ============ */
.mm-nav-panel .nav-link {
  color: var(--mm-tinta);
  border-radius: 10px;
  padding: .55rem .85rem;
}
.mm-nav-panel .nav-link:hover { background: color-mix(in srgb, var(--mm-selva) 7%, transparent); }
.mm-nav-panel .nav-link.activo {
  background: var(--mm-selva);
  color: #fff;
}

.mm-notif-nueva { background: color-mix(in srgb, var(--mm-dorado) 10%, #fff); }

.mm-respuesta {
  background: color-mix(in srgb, var(--mm-selva) 6%, #fff);
  border-left: 3px solid var(--mm-selva);
  border-radius: 0 10px 10px 0;
  padding: .65rem .9rem;
}

/* Selector de estrellas (radio invertido: hover ilumina hacia la izquierda) */
.mm-selector-estrellas {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: .15rem;
}
.mm-selector-estrellas input { position: absolute; opacity: 0; pointer-events: none; }
.mm-selector-estrellas label {
  font-size: 2rem;
  color: #D8D3C8;
  cursor: pointer;
  transition: color .12s ease, transform .12s ease;
}
.mm-selector-estrellas label:hover { transform: scale(1.12); }
.mm-selector-estrellas label:hover,
.mm-selector-estrellas label:hover ~ label,
.mm-selector-estrellas input:checked ~ label { color: var(--mm-dorado); }
.mm-selector-estrellas input:focus-visible + label { outline: 3px solid var(--mm-azul); outline-offset: 2px; border-radius: 6px; }

/* ============ Secciones públicas (Fase 2.5) ============ */

/* Cabecera de página interior */
.mm-cabecera-pagina {
  background: linear-gradient(135deg, var(--mm-selva) 0%, #0e5240 100%);
  color: #fff;
  padding: 3rem 0 2.5rem;
}
.mm-cabecera-pagina .mm-titulo-seccion { color: #fff; }
.mm-cabecera-pagina .mm-eyebrow { color: var(--mm-dorado); }

/* Hero compacto (landing anuncia) */
.mm-hero-compacto { padding-top: 4rem; padding-bottom: 5rem; }

/* Dropdown de categorías del nav */
.mm-menu-categorias {
  min-width: 260px;
  max-height: 70vh;
  overflow-y: auto;
  border: none;
  border-radius: 0.75rem;
}
.mm-menu-categorias .dropdown-item { padding: 0.5rem 1rem; border-radius: 0.5rem; }
.mm-menu-categorias .dropdown-item:hover { background: rgba(11, 61, 46, 0.08); }

/* Tarjetas de estadísticas */
.mm-stat-card {
  background: #fff;
  border: 1px solid rgba(11, 61, 46, 0.08);
  border-radius: 1rem;
  padding: 1.25rem 1rem;
  text-align: center;
  height: 100%;
  box-shadow: 0 2px 10px rgba(11, 61, 46, 0.05);
}
.mm-stat-card strong {
  display: block;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.9rem;
  color: var(--mm-selva);
  line-height: 1.1;
}
.mm-stat-card span { font-size: 0.82rem; color: #6c757d; }
.mm-stat-dorado strong { color: var(--mm-dorado); }

/* Pasos "cómo funciona" */
.mm-paso {
  background: #fff;
  border-radius: 1rem;
  padding: 1.5rem;
  height: 100%;
  border: 1px solid rgba(11, 61, 46, 0.08);
}
.mm-paso-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: var(--mm-selva);
  color: var(--mm-dorado);
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  margin-bottom: 0.75rem;
}

/* Planes */
.mm-plan-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(11, 61, 46, 0.12);
  border-radius: 1.25rem;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
}
.mm-plan-popular {
  border: 2px solid var(--mm-dorado);
  box-shadow: 0 12px 35px rgba(232, 161, 61, 0.18);
}
.mm-plan-etiqueta {
  position: absolute;
  top: -0.8rem; left: 50%;
  transform: translateX(-50%);
  background: var(--mm-dorado);
  color: #3d2a08;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.9rem;
  border-radius: 2rem;
}
.mm-plan-precio strong {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 2.4rem;
  color: var(--mm-selva);
}
.mm-plan-precio span { color: #6c757d; font-size: 0.9rem; }
.mm-plan-lista {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  flex-grow: 1;
}
.mm-plan-lista li { padding: 0.35rem 0; font-size: 0.92rem; }
.mm-plan-lista li i { color: var(--mm-selva); margin-right: 0.5rem; }
.mm-plan-no { color: #adb5bd; }
.mm-plan-no i { color: #adb5bd !important; }

/* Eventos */
.mm-evento-card {
  display: flex;
  gap: 1rem;
  background: #fff;
  border: 1px solid rgba(11, 61, 46, 0.1);
  border-radius: 1rem;
  padding: 1.25rem;
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mm-evento-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(11, 61, 46, 0.12);
  color: inherit;
}
.mm-evento-fecha {
  flex-shrink: 0;
  width: 4.2rem;
  text-align: center;
  background: rgba(11, 61, 46, 0.06);
  border-radius: 0.75rem;
  padding: 0.6rem 0.25rem;
  align-self: flex-start;
}
.mm-evento-fecha strong {
  display: block;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.6rem;
  color: var(--mm-selva);
  line-height: 1;
}
.mm-evento-fecha span { font-size: 0.7rem; color: #6c757d; }
.mm-evento-cuerpo h2 { font-family: 'Bricolage Grotesque', sans-serif; }
.mm-badge-verde { background: rgba(11, 61, 46, 0.1); color: var(--mm-selva); }
.mm-evento-mini {
  display: block;
  background: #fff;
  border: 1px solid rgba(11, 61, 46, 0.1);
  border-radius: 0.75rem;
  padding: 0.9rem 1rem;
  color: inherit;
  text-decoration: none;
}
.mm-evento-mini:hover { border-color: var(--mm-selva); color: inherit; }

/* ============ Logo ============ */
.mm-logo-nav {
  height: 44px;
  width: auto;
  transition: transform 0.25s ease;
}
.navbar-brand:hover .mm-logo-nav { transform: rotate(8deg) scale(1.05); }
.mm-logo-pie { height: 46px; width: auto; }
.mm-logo-admin { height: 40px; width: auto; }

/* ============ Loader de página ============ */
.mm-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  background:
    radial-gradient(circle at 50% 42%, rgba(232, 161, 61, 0.07), transparent 55%),
    var(--mm-fondo, #FAF7F0);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
.mm-loader-oculto {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.mm-loader-nucleo {
  position: relative;
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
}
.mm-loader-logo {
  width: 84px;
  height: auto;
  animation: mmLatido 1.8s ease-in-out infinite;
  filter: drop-shadow(0 6px 18px rgba(11, 61, 46, 0.18));
}
/* Anillo giratorio con los colores del logo (naranja → verde → azul) */
.mm-loader-anillo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #E8701A 0deg,
    #2E9E3F 130deg,
    #1273A8 250deg,
    rgba(232, 112, 26, 0) 320deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  animation: mmGiro 1.15s linear infinite;
}
.mm-loader-texto {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--mm-selva, #0B3D2E);
  animation: mmAparece 0.9s ease both 0.15s;
}
.mm-loader-texto em {
  font-style: normal;
  color: var(--mm-dorado, #E8A13D);
}
@keyframes mmGiro { to { transform: rotate(360deg); } }
@keyframes mmLatido {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@keyframes mmAparece {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-loader-anillo, .mm-loader-logo, .mm-loader-texto { animation: none; }
}

/* =====================================================================
   BANNER DE COOKIES (primera visita)
   ===================================================================== */
.mm-cookies {
  position: fixed; inset: auto 0 0 0; z-index: 1080;
  padding: 1rem;
  display: flex; justify-content: center;
  transform: translateY(110%);
  transition: transform .35s cubic-bezier(.22,.9,.3,1);
  pointer-events: none;
}
.mm-cookies-visible { transform: translateY(0); }
.mm-cookies-caja {
  pointer-events: auto;
  width: 100%; max-width: 760px;
  background: #fff; border: 1px solid var(--mm-borde);
  border-radius: var(--mm-radio);
  padding: 1.25rem 1.4rem;
  box-shadow: 0 18px 48px rgba(11,61,46,.22);
  border-top: 4px solid var(--mm-dorado);
}
.mm-cookies-cabecera { display: flex; gap: .9rem; align-items: flex-start; }
.mm-cookies-icono {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: color-mix(in srgb, var(--mm-selva) 10%, #fff);
  color: var(--mm-selva); font-size: 1.35rem;
}
.mm-cookies-titulo {
  font-family: var(--mm-display); font-weight: 800;
  font-size: 1.08rem; letter-spacing: -0.01em;
  color: var(--mm-selva); margin-bottom: .3rem;
}
.mm-cookies-texto { font-size: .9rem; color: #4A544F; line-height: 1.5; }
.mm-cookies-texto a { font-weight: 600; }

.mm-cookies-panel {
  margin-top: 1rem; padding-top: .9rem;
  border-top: 1px dashed var(--mm-borde);
  display: grid; gap: .55rem;
}
.mm-cookies-opcion {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: #FAF7F0; border: 1px solid var(--mm-borde);
  border-radius: 10px; padding: .6rem .85rem;
  cursor: pointer; margin: 0;
}
.mm-cookies-opcion strong { display: block; font-size: .9rem; color: var(--mm-tinta); }
.mm-cookies-opcion small { display: block; font-size: .78rem; color: #6B7570; }
.mm-cookies-opcion .form-check-input { flex: 0 0 auto; width: 2.4em; height: 1.3em; }
.mm-cookies-opcion .form-check-input:checked { background-color: var(--mm-selva); border-color: var(--mm-selva); }

.mm-cookies-acciones {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: 1rem; align-items: center;
}
.mm-cookies-btn-sec {
  background: #F1EDE3; color: var(--mm-tinta);
  border: 1px solid var(--mm-borde); border-radius: 10px; font-weight: 600;
}
.mm-cookies-btn-sec:hover { background: #E9E3D5; color: var(--mm-tinta); }
.mm-cookies-btn-link {
  color: var(--mm-golfo); font-weight: 600; text-decoration: none;
  border: none; background: transparent;
}
.mm-cookies-btn-link:hover { text-decoration: underline; color: var(--mm-golfo); }
@media (max-width: 575px) {
  .mm-cookies { padding: .6rem; }
  .mm-cookies-acciones .btn { flex: 1 1 auto; }
}

/* =====================================================================
   ASISTENTE VIRTUAL "MAIGO"
   ===================================================================== */
/* Botón flotante */
.mm-asis-fab {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1070;
  width: 62px; height: 62px; border-radius: 50%;
  border: none; background: var(--mm-selva);
  display: grid; place-items: center;
  box-shadow: 0 12px 30px rgba(11,61,46,.35);
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.mm-asis-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 16px 36px rgba(11,61,46,.4); }
.mm-asis-fab-logo {
  width: 40px; height: 40px; object-fit: contain;
  background: #fff; border-radius: 50%; padding: 3px;
  transition: opacity .2s, transform .2s;
}
.mm-asis-fab-cerrar {
  position: absolute; color: #fff; font-size: 1.3rem;
  opacity: 0; transform: rotate(-90deg) scale(.6);
  transition: opacity .2s, transform .2s;
}
.mm-asis-fab-activo .mm-asis-fab-logo { opacity: 0; transform: scale(.6); }
.mm-asis-fab-activo .mm-asis-fab-cerrar { opacity: 1; transform: none; }
/* Anillo con los colores del logo (naranja → verde → azul) */
.mm-asis-fab-anillo {
  position: absolute; inset: -4px; border-radius: 50%;
  background: conic-gradient(from 0deg, #E8701A, #2E9E3F 130deg, #1273A8 250deg, #E8701A 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation: mmGiro 6s linear infinite;
}

/* Panel */
.mm-asis-panel {
  position: fixed; right: 1.25rem; bottom: 6.25rem; z-index: 1075;
  width: min(380px, calc(100vw - 2rem));
  height: min(560px, calc(100dvh - 8rem));
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--mm-borde);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(11,61,46,.28);
  opacity: 0; transform: translateY(14px) scale(.97);
  transform-origin: bottom right;
  transition: opacity .25s, transform .25s;
}
.mm-asis-abierto { opacity: 1; transform: none; }

/* Cabecera */
.mm-asis-cabecera {
  display: flex; align-items: center; gap: .75rem;
  padding: .9rem 1rem;
  background:
    radial-gradient(420px 160px at 110% -30%, rgba(232,161,61,.35), transparent 65%),
    linear-gradient(135deg, var(--mm-selva) 0%, var(--mm-selva-2) 60%, #0F4A64 100%);
  color: #fff;
}
.mm-asis-avatar { position: relative; flex: 0 0 auto; }
.mm-asis-avatar img {
  width: 42px; height: 42px; object-fit: contain;
  background: #fff; border-radius: 50%; padding: 4px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.35);
}
.mm-asis-estado {
  position: absolute; right: 0; bottom: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: #34D058; border: 2px solid var(--mm-selva);
}
.mm-asis-cabecera-texto { line-height: 1.2; min-width: 0; }
.mm-asis-cabecera-texto strong { font-family: var(--mm-display); font-size: 1rem; display: block; }
.mm-asis-cabecera-texto small { opacity: .8; font-size: .76rem; }
.mm-asis-cabecera-texto small span { color: var(--mm-dorado); font-weight: 600; }
.mm-asis-cerrar {
  margin-left: auto; border: none; background: rgba(255,255,255,.14);
  color: #fff; width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center; transition: background .15s;
}
.mm-asis-cerrar:hover { background: rgba(255,255,255,.26); }

/* Mensajes */
.mm-asis-mensajes {
  flex: 1; overflow-y: auto;
  padding: 1rem; display: flex; flex-direction: column; gap: .55rem;
  background: var(--mm-fondo);
}
.mm-asis-msj {
  max-width: 85%; padding: .6rem .8rem;
  border-radius: 14px; font-size: .9rem; line-height: 1.45;
  animation: mmAparece .25s ease both;
}
.mm-asis-msj p { margin: 0; }
.mm-asis-msj-bot {
  align-self: flex-start;
  background: #fff; border: 1px solid var(--mm-borde);
  border-bottom-left-radius: 4px; color: var(--mm-tinta);
}
.mm-asis-msj-usuario {
  align-self: flex-end;
  background: var(--mm-selva); color: #fff;
  border-bottom-right-radius: 4px;
}
.mm-asis-enlaces { display: flex; flex-direction: column; gap: .35rem; margin-top: .55rem; }
.mm-asis-enlaces a {
  display: flex; align-items: center; gap: .5rem;
  background: color-mix(in srgb, var(--mm-selva) 6%, #fff);
  border: 1px solid var(--mm-borde); border-radius: 10px;
  padding: .45rem .65rem; font-size: .85rem; font-weight: 600;
  color: var(--mm-selva); transition: background .15s, transform .15s;
}
.mm-asis-enlaces a:hover {
  background: color-mix(in srgb, var(--mm-selva) 12%, #fff);
  text-decoration: none; transform: translateX(2px);
}
.mm-asis-enlaces a i { color: var(--mm-dorado); }

/* Indicador "escribiendo…" */
.mm-asis-escribiendo { display: inline-flex; gap: 4px; padding: .15rem .1rem; }
.mm-asis-escribiendo span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--mm-selva); opacity: .35;
  animation: mmPunto 1.1s ease-in-out infinite;
}
.mm-asis-escribiendo span:nth-child(2) { animation-delay: .18s; }
.mm-asis-escribiendo span:nth-child(3) { animation-delay: .36s; }
@keyframes mmPunto {
  0%, 100% { opacity: .35; transform: translateY(0); }
  40%      { opacity: 1;   transform: translateY(-4px); }
}

/* Sugerencias */
.mm-asis-sugerencias {
  display: flex; flex-wrap: wrap; gap: .4rem;
  padding: 0 1rem .6rem; background: var(--mm-fondo);
}
.mm-asis-sugerencias:empty { padding: 0; }
.mm-asis-chip {
  border: 1px solid var(--mm-borde); background: #fff;
  color: var(--mm-selva); font-size: .8rem; font-weight: 600;
  border-radius: 999px; padding: .3rem .75rem;
  transition: background .15s, border-color .15s;
}
.mm-asis-chip:hover { background: color-mix(in srgb, var(--mm-dorado) 18%, #fff); border-color: var(--mm-dorado); }

/* Entrada */
.mm-asis-entrada {
  display: flex; gap: .5rem; align-items: center;
  padding: .7rem .8rem; background: #fff;
  border-top: 1px solid var(--mm-borde);
}
.mm-asis-entrada input {
  flex: 1; border: 1px solid var(--mm-borde); border-radius: 999px;
  padding: .55rem 1rem; font-size: .9rem; outline: none;
  background: var(--mm-fondo); color: var(--mm-tinta); min-width: 0;
}
.mm-asis-entrada input:focus { border-color: var(--mm-selva); box-shadow: 0 0 0 3px rgba(11,61,46,.12); }
.mm-asis-entrada button {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  border: none; background: var(--mm-dorado); color: var(--mm-selva);
  display: grid; place-items: center; font-size: 1.05rem;
  transition: filter .15s, transform .15s;
}
.mm-asis-entrada button:hover { filter: brightness(1.07); transform: scale(1.05); }

@media (max-width: 575px) {
  .mm-asis-panel {
    right: .6rem; left: .6rem; width: auto;
    bottom: 5.6rem; height: min(70dvh, 560px);
  }
  .mm-asis-fab { right: .9rem; bottom: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-asis-fab-anillo, .mm-asis-escribiendo span { animation: none; }
}

/* =====================================================================
   BOTÓN FLOTANTE DE WHATSAPP
   ===================================================================== */
.mm-wa-fab {
  position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 1070;
  display: flex; align-items: center; gap: .55rem;
  height: 56px; padding: 0 1.1rem 0 0;
  border-radius: 999px;
  background: #25D366; color: #fff;
  box-shadow: 0 12px 30px rgba(18,140,72,.38);
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.mm-wa-fab:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 16px 36px rgba(18,140,72,.45);
  color: #fff; text-decoration: none;
}
.mm-wa-fab i {
  display: grid; place-items: center;
  width: 56px; height: 56px; font-size: 1.65rem;
}
.mm-wa-etiqueta {
  font-weight: 700; font-size: .9rem; white-space: nowrap;
  font-family: var(--mm-cuerpo);
}
.mm-wa-pulso {
  position: absolute; inset: 0; border-radius: 999px;
  background: rgba(37,211,102,.45);
  animation: mmPulsoWa 2.4s ease-out infinite;
  z-index: -1;
}
@keyframes mmPulsoWa {
  0%   { transform: scale(1);    opacity: .7; }
  70%  { transform: scale(1.28); opacity: 0; }
  100% { transform: scale(1.28); opacity: 0; }
}
@media (max-width: 575px) {
  .mm-wa-fab { left: .9rem; bottom: .9rem; height: 52px; padding-right: .95rem; }
  .mm-wa-fab i { width: 52px; height: 52px; font-size: 1.5rem; }
  .mm-wa-etiqueta { display: none; }
  .mm-wa-fab { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .mm-wa-pulso { animation: none; } }

/* =====================================================================
   BURBUJA DE SALUDO DEL ASISTENTE (al entrar)
   ===================================================================== */
.mm-asis-saludo {
  position: fixed; right: 1.25rem; bottom: 6.4rem; z-index: 1069;
  max-width: 270px;
  background: #fff; border: 1px solid var(--mm-borde);
  border-radius: 16px; border-bottom-right-radius: 5px;
  padding: .85rem 1rem .85rem 1rem;
  box-shadow: 0 16px 40px rgba(11,61,46,.22);
  border-left: 4px solid var(--mm-dorado);
  font-size: .9rem; line-height: 1.45; color: var(--mm-tinta);
  cursor: pointer;
  opacity: 0; transform: translateY(10px) scale(.96);
  transform-origin: bottom right;
  transition: opacity .3s, transform .3s;
}
.mm-asis-saludo-visible { opacity: 1; transform: none; }
.mm-asis-saludo strong { color: var(--mm-selva); }
.mm-asis-saludo::after {
  content: ''; position: absolute; right: 18px; bottom: -7px;
  width: 14px; height: 14px; background: #fff;
  border-right: 1px solid var(--mm-borde);
  border-bottom: 1px solid var(--mm-borde);
  transform: rotate(45deg);
}
.mm-asis-saludo-cerrar {
  position: absolute; top: -9px; left: -9px;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--mm-borde); background: #fff;
  color: #6B7570; font-size: .95rem;
  display: grid; place-items: center; line-height: 1;
  transition: background .15s, color .15s;
}
.mm-asis-saludo-cerrar:hover { background: #F1EDE3; color: var(--mm-tinta); }
@media (max-width: 575px) {
  .mm-asis-saludo { right: .9rem; bottom: 5.6rem; max-width: min(270px, calc(100vw - 5rem)); }
}

/* =====================================================================
   CHAT DE SOPORTE (usuario ↔ administración)
   ===================================================================== */
.mm-chat { display: flex; flex-direction: column; }
.mm-chat-mensajes {
  height: 420px; overflow-y: auto;
  padding: 1.1rem; display: flex; flex-direction: column; gap: .55rem;
  background: var(--mm-fondo);
}
.mm-chat-msj { display: flex; }
.mm-chat-mio  { justify-content: flex-end; }
.mm-chat-otro { justify-content: flex-start; }
.mm-chat-burbuja {
  max-width: 78%; padding: .6rem .85rem;
  border-radius: 14px; font-size: .92rem; line-height: 1.45;
  animation: mmAparece .25s ease both;
}
.mm-chat-mio .mm-chat-burbuja {
  background: var(--mm-selva); color: #fff;
  border-bottom-right-radius: 4px;
}
.mm-chat-otro .mm-chat-burbuja {
  background: #fff; border: 1px solid var(--mm-borde);
  color: var(--mm-tinta); border-bottom-left-radius: 4px;
}
.mm-chat-autor {
  font-size: .74rem; font-weight: 700; color: var(--mm-golfo);
  margin-bottom: .15rem;
}
.mm-chat-fecha {
  font-size: .68rem; opacity: .65; margin-top: .25rem; text-align: right;
}
.mm-chat-cerrada {
  background: #FDF6E7; border-top: 1px solid var(--mm-borde);
  color: #8a6d1f; padding: .5rem 1rem;
}
.mm-chat-entrada {
  display: flex; gap: .5rem; padding: .7rem .8rem;
  background: #fff; border-top: 1px solid var(--mm-borde);
}
.mm-chat-entrada input { border-radius: 999px; background: var(--mm-fondo); }
.mm-chat-entrada input:focus { border-color: var(--mm-selva); box-shadow: 0 0 0 3px rgba(11,61,46,.12); }
.mm-chat-entrada .btn { border-radius: 50%; width: 42px; height: 42px; padding: 0; flex-shrink: 0; }
@media (max-width: 575px) { .mm-chat-mensajes { height: 55vh; } }