/* globo.css — v2 (2026-10d). Página «Centro más cercano»: globo satelital 3D, pantalla previa de ubicación, fichas de
   distribuidores y selector. Estilo limpio de marca: tarjetas blancas, verde de marca con letra blanca, nada de negros.
   Diseño base en Claude Design (lienzo «Centro Proher Natura más cercano»). Solo se carga en esa página. */

.btn--grande { min-height: 54px; font-size: 1rem; }

.loc {
  position: relative; min-height: min(86vh, 54rem); overflow: hidden; color: #fff; isolation: isolate;
  background: radial-gradient(1200px 700px at 62% 48%, #05070d 0%, #020306 58%, #000 100%);
}
/* Cielo de fondo: negro profundo con vía láctea tenue y estrellas. Es una imagen (25 KB, hecha a partir del cielo que antes se dibujaba con decenas de
   degradados y animaciones): dibujar esos degradados costaba más de un segundo de tarjeta gráfica al abrir la página y la dejaba trabada. */
.loc__fondo { position: absolute; inset: 0; z-index: -3; background: #000 url('/img/2026/globo/cielo.webp') center / cover no-repeat; }
.loc::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(900px 600px at 70% 50%, transparent, rgb(0 0 0 / 70%) 85%); }

.loc__globo { position: absolute; inset: 0; z-index: -1; display: grid; place-items: center; cursor: grab; }
.loc__globo:active { cursor: grabbing; }
.loc__globo canvas { outline: none; }
.loc__globo--fijo { cursor: default; background: url('/img/2026/globo/satelite-poster.webp') 62% 50%/cover no-repeat; opacity: .85; }

/* Panel blanco, limpio, como las tarjetas del resto del sitio */
.loc__panel {
  position: relative; z-index: 4; width: min(100% - 2 * var(--canal), 31rem); margin: clamp(2rem, 8vw, 6rem) 0 3rem max(var(--canal), calc((100vw - 88rem) / 2 + 2rem));
  padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 20px; background: #fff; color: var(--tinta); box-shadow: var(--sombra-panel);
}
.loc__sobre { display: inline-block; font: 700 .75rem var(--f-titulo); letter-spacing: .18em; text-transform: uppercase; color: var(--tinta); border-bottom: 3px solid var(--verde); padding-bottom: .35rem; }
.loc__panel h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin: 1rem 0 .75rem; color: var(--tinta); }
.loc__panel p { color: var(--tinta-suave); font-size: 1.0625rem; }
.loc__estado { padding: .85rem 1rem; border-radius: 12px; background: var(--verde-suave); border: 1px solid rgb(78 139 13 / 35%); color: var(--tinta) !important; font-size: .9375rem !important; }
.loc__acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.loc__panel .btn--borde-claro { border-color: var(--verde-boton); color: var(--verde-boton); }
.loc__panel .btn--borde-claro:hover { background: var(--verde-boton); color: #fff; }

.loc__leyenda { position: absolute; left: max(var(--canal), calc((100vw - 88rem) / 2 + 2rem)); bottom: 2.6rem; z-index: 6; display: flex; flex-wrap: wrap; gap: 1.25rem; font: 600 .8125rem var(--f-titulo); color: #fff; }
.loc__leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .5rem; }
.loc__ayuda { position: absolute; right: max(var(--canal), calc((100vw - 88rem) / 2 + 2rem)); bottom: 2.6rem; z-index: 2; display: flex; gap: .5rem; }
.loc__ayuda span { padding: .55rem 1rem; border-radius: 999px; background: rgb(255 255 255 / 14%); border: 1px solid rgb(255 255 255 / 30%); font: 600 .8125rem var(--f-titulo); }
.loc__credito { position: absolute; left: 0; right: 0; bottom: .5rem; z-index: 6; margin: 0; text-align: center; font-size: .6875rem; color: rgb(255 255 255 / 75%); padding-inline: 1rem; }
@media (max-width: 900px) {
  .loc__ayuda { display: none; }
  .loc__leyenda { gap: .4rem .9rem; font-size: .75rem; }
  .loc__credito { font-size: .625rem; line-height: 1.3; }
}

/* Pantalla previa de ubicación */
.loc__gate { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 1rem; background: rgb(20 28 14 / 72%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); overflow-y: auto; }
.loc__gate[hidden] { display: none; }
.loc__tarjeta { width: min(100%, 35rem); padding: clamp(1.5rem, 4vw, 2.75rem); text-align: center; border-radius: 24px; background: #fff; color: var(--tinta); box-shadow: 0 40px 90px -30px rgb(0 0 0 / 70%); }
.loc__icono { width: 76px; height: 76px; margin: 0 auto 1.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--verde); color: #fff; }
.loc__icono svg { width: 38px; height: 38px; }
.loc__tarjeta h2 { font-size: clamp(1.4rem, 3.4vw, 2rem); margin-bottom: .75rem; color: var(--tinta); }
.loc__tarjeta p { color: var(--tinta-suave); font-size: 1.0625rem; }
.loc__gate-acciones { display: grid; gap: .75rem; margin-top: 1.5rem; }
.loc__tarjeta .btn--borde-claro { border-color: var(--verde-boton); color: var(--verde-boton); }
.loc__tarjeta .btn--borde-claro:hover { background: var(--verde-boton); color: #fff; }
.loc__nota { font-size: .8125rem !important; margin: 1.25rem 0 0; }

/* Fichas de distribuidores: foto completa arriba, banda verde con «Nombre · Ciudad» y «Ver más» en blanco */
.fichas { background: var(--papel); }
.fichas .lead { max-width: 44rem; }
.fichas-rejilla { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); margin-top: 1.5rem; }
.ficha-card { position: relative; display: flex; flex-direction: column; padding: 0; border: 0; background: var(--verde-foto-vacia); border-radius: var(--radio); overflow: hidden; cursor: pointer; text-align: left; font: inherit; color: inherit; box-shadow: var(--sombra); transition: transform 200ms, box-shadow 200ms; }
.ficha-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgb(0 0 0 / 35%); }
.ficha-card > img { width: 100%; height: auto; aspect-ratio: 400 / 470; object-fit: cover; object-position: top; background: var(--verde-suave); }
.ficha-card__vacia { display: grid; place-items: center; width: 100%; aspect-ratio: 400 / 470; background: var(--verde-suave); }
.ficha-card__vacia img { width: 62%; height: auto; }
/* El nombre va sobre la foto, con degradado y sombra de texto (sin banda verde) */
.ficha-card__pie { position: absolute; inset: auto 0 0 0; align-content: start; display: grid; gap: .15rem; padding: 3.2rem 1rem .9rem; background: linear-gradient(180deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 34%) 55%, rgb(0 0 0 / 52%)); color: #fff; text-shadow: 0 2px 8px rgb(0 0 0 / 75%), 0 1px 2px rgb(0 0 0 / 70%); }
.ficha-card__pie strong { font: 800 1.05rem/1.25 var(--f-titulo); }
.ficha-card__mas { font: 600 .8125rem var(--f-titulo); text-decoration: underline; text-underline-offset: 3px; color: #fff; }

.ficha { border: 0; padding: 0; width: min(94vw, 46rem); max-height: 90vh; overflow: auto; border-radius: var(--radio); background: #fff; color: var(--tinta); box-shadow: var(--sombra-dialogo); }
.ficha::backdrop { background: rgb(20 28 14 / 70%); }

/* Selector y resultados */
.loc-selector { background: var(--papel-suave); }
.sel-rejilla { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-bottom: 2rem; }
.sel-rejilla label { display: grid; gap: .4rem; font: 700 .8125rem var(--f-titulo); }


/* ====== v6 (2026-10-19): vistas del mapa, tarjeta tipo Maps, fichas sin banda verde y panel premium ====== */

/* Controles del mapa: vistas (satélite / calles / relieve) y zoom */
.mapa-controles { position: absolute; top: 1rem; right: max(var(--canal), calc((100vw - 88rem) / 2 + 2rem)); z-index: 6; display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.mapa-vistas { display: flex; padding: 4px; gap: 2px; background: #fff; border-radius: 999px; box-shadow: var(--sombra-flotante); }
.mapa-vistas button { border: 0; background: transparent; color: var(--tinta); font: 700 .75rem var(--f-titulo); letter-spacing: .03em; padding: .5rem .85rem; border-radius: 999px; cursor: pointer; min-height: 36px; }
.mapa-vistas button[aria-pressed="true"] { background: var(--verde-boton); color: #fff; }
.mapa-zoom { display: grid; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--sombra-flotante); }
.mapa-zoom button { width: 44px; height: 44px; border: 0; background: #fff; color: var(--tinta); font: 500 1.5rem/1 var(--f-cuerpo); cursor: pointer; }
.mapa-zoom button + button { border-top: 1px solid var(--linea); }
.mapa-zoom button:hover { background: var(--verde-suave); }

/* Tarjeta tipo Maps */
.mapa-tarjeta { position: relative; z-index: 5; width: min(100% - 2 * var(--canal), 24rem); margin: clamp(2rem, 6vw, 4.5rem) 0 3rem max(var(--canal), calc((100vw - 88rem) / 2 + 2rem)); background: #fff; color: var(--tinta); border-radius: 20px; overflow: hidden; box-shadow: var(--sombra-panel); }
.mapa-tarjeta[hidden] { display: none; }
.loc--con-tarjeta .loc__panel { display: none; }
.mt__pin { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; transform: translate(-50%, -92%); color: var(--verde-boton); filter: drop-shadow(0 6px 6px rgb(0 0 0 / 35%)); }
.mt__pin svg { width: 100%; height: 100%; fill: currentColor; stroke: #fff; stroke-width: 1.4; }
.mt__cerrar { position: absolute; top: .6rem; right: .6rem; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #fff; color: var(--tinta); cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 14px -4px rgb(0 0 0 / 45%); }
.mt__cerrar svg { width: 20px; height: 20px; }
.mt__avatar { position: absolute; left: 1.1rem; bottom: -2rem; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: top; border: 4px solid #fff; background: var(--verde-suave); box-shadow: 0 8px 18px -8px rgb(0 0 0 / 45%); }
.mt__cuerpo { padding: 1.1rem 1.25rem 1.25rem; display: grid; gap: .35rem; }
.mt__cuerpo h2 { margin: 0; font-size: 1.4rem; }
.mt__sub { margin: 0; color: var(--tinta-suave); font-size: .9375rem; }
.mt__acciones { display: flex; gap: .4rem; margin: .8rem 0 .4rem; padding-bottom: .9rem; border-bottom: 1px solid var(--linea); overflow-x: auto; scrollbar-width: none; }
.mt__accion { flex: 1 1 0; min-width: 0; display: grid; justify-items: center; gap: .35rem; background: none; border: 0; padding: .25rem; text-decoration: none; cursor: pointer; color: var(--verde-boton); font: inherit; }
.mt__accion span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--verde-boton); transition: background 200ms, color 200ms; }
.mt__accion svg { width: 22px; height: 22px; }
.mt__accion b { font: 700 .6875rem var(--f-titulo); color: var(--verde-boton); }
.mt__accion:hover span { background: var(--verde-suave); }
.mt__accion--principal span { background: var(--verde-boton); color: #fff; }
.mt__accion--principal:hover span { background: var(--verde-boton-osc); }
.mt__datos { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.mt__datos li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .8rem; align-items: start; padding: .65rem 0; border-bottom: 1px solid var(--linea); font-size: .9375rem; word-break: break-word; }
.mt__datos svg { width: 20px; height: 20px; color: var(--verde-boton); margin-top: .1rem; }
.mt__datos a { color: var(--tinta); text-decoration: none; }
.mt__datos a:hover { text-decoration: underline; }
.mt__maps { display: inline-flex; align-items: center; gap: .5rem; margin-top: .6rem; color: var(--verde-boton); font: 700 .9375rem var(--f-titulo); text-decoration: none; }
.mt__maps svg { width: 18px; height: 18px; }
.mt__maps:hover { text-decoration: underline; }
.mt__nota { margin: .4rem 0 0; font-size: .8125rem; color: var(--tinta-suave); }

/* Celular: primero el mundo y abajo el texto / la tarjeta */
@media (max-width: 900px) {
  .loc { display: flex; flex-direction: column; min-height: 0; padding-bottom: 0; }
  .loc__globo { position: relative; inset: auto; order: -1; width: 100%; height: min(66svh, 30rem); z-index: 0; }
  .loc__globo canvas { touch-action: pan-y !important; }
  .loc__panel, .mapa-tarjeta { order: 1; width: min(100% - 2 * var(--canal), 33rem); margin: 1.25rem auto 1.25rem; }
  .loc__leyenda { position: static; order: 2; justify-content: center; padding: 0 1rem .6rem; }
  .loc__credito { position: static; order: 3; padding: 0 1rem 1rem; }
  .mapa-controles { top: .7rem; right: .7rem; }
  .mapa-vistas button { padding: .45rem .7rem; }
}

/* Panel «Ver más» premium */
.ficha { border-radius: 24px; box-shadow: 0 40px 100px -30px rgb(0 0 0 / 65%); }

/* ====== v7 (2026-10-19): marcadores dinámicos, galería de fotos en la tarjeta tipo Maps y ficha como tarjeta digital ====== */

/* Marcadores HTML del mapa (el pin se apoya en el punto exacto) */
.mk { width: 0; height: 0; position: relative; }
.mk__cuerpo { position: absolute; left: 0; bottom: 0; transform: translateX(-50%); display: grid; justify-items: center; cursor: pointer; transition: transform 200ms; }
.mk__cuerpo > svg { width: 34px; height: 34px; fill: var(--verde-boton); stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 5px 5px rgb(0 0 0 / 40%)); transform-origin: 50% 100%; transition: transform 200ms; }
.mk__cuerpo:hover > svg { transform: scale(1.18); }
.mk__pulso { position: absolute; left: 50%; bottom: -5px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: rgb(78 139 13 / 45%); animation: mk-pulso 2.4s ease-out infinite; }
.mk--cercano .mk__cuerpo > svg { fill: var(--ambar); width: 42px; height: 42px; }
.mk--cercano .mk__pulso { background: rgb(217 154 20 / 55%); animation-duration: 1.6s; }
.mk--sel .mk__cuerpo { animation: mk-salto 1.1s ease-in-out infinite; z-index: 2; }
.mk__chip { position: absolute; left: 100%; top: 0; margin-left: 4px; display: none; white-space: nowrap; background: #fff; color: var(--tinta); border-radius: 999px; padding: .28rem .7rem; box-shadow: 0 8px 20px -8px rgb(0 0 0 / 55%); font: 600 .75rem/1.2 var(--f-cuerpo); }
.mk__chip b { display: block; font-family: var(--f-titulo); font-size: .75rem; }
.mk__chip small { display: block; color: var(--verde-boton-osc); font-weight: 700; font-size: .6875rem; }
.loc__globo--cerca .mk--centro .mk__chip, .mk--cercano .mk__chip, .mk--sel .mk__chip { display: block; }
.mk__punto { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--verde-claro); border: 2px solid #fff; cursor: pointer; box-shadow: 0 2px 6px rgb(0 0 0 / 40%); transition: transform 200ms; }
.mk--region:hover .mk__punto { transform: scale(1.7); }
.mk__tu { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: #2f8cff; border: 3px solid #fff; box-shadow: 0 2px 8px rgb(0 0 0 / 45%); }
.mk__tu i { position: absolute; inset: -3px; border-radius: 50%; border: 2px solid rgb(47 140 255 / 70%); animation: mk-pulso-tu 2s ease-out infinite; }
@keyframes mk-pulso { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes mk-pulso-tu { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(3.4); opacity: 0; } }
@keyframes mk-salto { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { .mk__pulso, .mk__tu i, .mk--sel .mk__cuerpo { animation: none; } }

/* Herramientas del mapa: mi ubicación, más cercano, pantalla completa */
.mapa-herramientas { display: grid; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--sombra-flotante); }
.mapa-herramientas button { width: 44px; height: 44px; border: 0; background: #fff; color: var(--verde-boton); cursor: pointer; display: grid; place-items: center; }
.mapa-herramientas button + button { border-top: 1px solid var(--linea); }
.mapa-herramientas button:hover { background: var(--verde-suave); }
.mapa-herramientas button[hidden] { display: none; }
.mapa-herramientas svg { width: 22px; height: 22px; }

/* Tarjeta tipo Maps: galería (fotos del centro + mapa de calles) */
.mt__galeria { position: relative; height: 11.5rem; background: var(--verde-hoja-fondo); }
.mt__pista { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.mt__pista::-webkit-scrollbar { display: none; }
.mt__slide { flex: 0 0 100%; scroll-snap-align: start; height: 100%; background: var(--verde-hoja-fondo) center / cover no-repeat; position: relative; }
.mt__slide--foto img { width: 100%; height: 100%; object-fit: cover; }
.mt__puntos { position: absolute; bottom: .55rem; left: 50%; transform: translateX(-50%); display: flex; gap: .35rem; }
.mt__puntos i { width: 7px; height: 7px; border-radius: 99px; background: rgb(255 255 255 / 70%); box-shadow: 0 1px 3px rgb(0 0 0 / 40%); transition: width 200ms; }
.mt__puntos i.activo { width: 18px; background: #fff; }
.mt__galeria:has(.mt__avatar) + .mt__cuerpo { padding-top: 2.6rem; }
.mt__etiquetas { display: flex; flex-wrap: wrap; gap: .4rem; }
.mt__etiquetas:empty { display: none; }
.mt__etiquetas span { display: inline-flex; align-items: center; gap: .3rem; font: 700 .6875rem var(--f-titulo); letter-spacing: .03em; padding: .2rem .65rem; border-radius: 999px; }
.mt__etiquetas svg { width: 12px; height: 12px; }
.mt__cercano { background: var(--ambar); color: #fff; }
.mt__dist { background: var(--verde-suave); color: var(--verde-boton-osc); }
.mt__datos li { grid-template-columns: 1.4rem 1fr auto; }
.mt__copiar { border: 0; background: transparent; color: var(--verde-boton); cursor: pointer; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.mt__copiar:hover { background: var(--verde-suave); }
.mt__copiar svg { width: 18px; height: 18px; color: inherit; margin: 0; }
.mt__nav { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--linea); font: 700 .8125rem var(--f-titulo); color: var(--tinta-suave); }
.mt__nav button { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--verde-boton); background: #fff; color: var(--verde-boton); cursor: pointer; display: grid; place-items: center; }
.mt__nav button:hover { background: var(--verde-boton); color: #fff; }
.mt__nav svg { width: 20px; height: 20px; }

/* Ficha del distribuidor como tarjeta digital: encabezado verde, foto redonda, filas con icono y «Agregar a contactos» */
.ficha[open] { display: block; width: min(94vw, 26rem); max-height: 92dvh; overflow: auto; border-radius: 28px; background: #fff; }
.ficha .vc__filas { list-style: none; margin: 0; padding: 1.5rem 1.6rem .5rem; display: grid; gap: 1.05rem; }
.vc__filas a, .vc__filas button { display: flex; align-items: center; gap: 1rem; width: 100%; background: none; border: 0; padding: 0; text-align: left; text-decoration: none; color: inherit; cursor: pointer; font: inherit; }
.vc__ico { flex: none; width: 3.1rem; height: 3.1rem; border-radius: 50%; background: var(--verde-inicio-texto); color: #fff; display: grid; place-items: center; transition: background 200ms, transform 200ms; }
.vc__ico svg { width: 22px; height: 22px; }
.vc__filas a:hover .vc__ico, .vc__filas button:hover .vc__ico { background: var(--verde-inicio-osc); transform: scale(1.06); }
.vc__txt { min-width: 0; }
.vc__txt b { display: block; font: 500 1rem/1.25 var(--f-cuerpo); color: #1d3a0d; overflow-wrap: anywhere; }
.vc__txt small { color: #7b8b72; font-size: .9rem; }
/* ====== v8 (2026-10-19): fondo con foto del centro en la ficha y página «Ficha completa» ====== */

/* Encabezado de la ficha: foto de su centro con un pequeño blur y velo verde para leer el texto */

/* Página «Ficha completa» */
.fc-hero { position: relative; isolation: isolate; color: #fff; padding: clamp(2rem, 6vw, 4rem) 0 clamp(5rem, 9vw, 7rem); background: linear-gradient(160deg, #3f7f0c, var(--verde-profundo)); }
.fc-hero[style*="--fc-fondo"]::before { content: ""; position: absolute; inset: -10px; z-index: -2; background: var(--fc-fondo) center / cover no-repeat; filter: blur(4px) saturate(1.08); clip-path: inset(10px); }
.fc-hero[style*="--fc-fondo"]::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(165deg, rgb(30 66 8 / 55%), rgb(14 38 4 / 82%)); }
.fc-hero__fila { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 820px) { .fc-hero__fila { grid-template-columns: minmax(0, 1fr) auto; } }
.fc-logo { width: 150px; height: auto; margin-bottom: 1.5rem; }
.fc-hero h1 { color: #fff; font-size: clamp(2rem, 6vw, 3.4rem); margin: 0 0 .5rem; }
.fc-rol { margin: 0; font: 600 1.15rem var(--f-cuerpo); }
.fc-lugar { margin: .2rem 0 0; font-style: italic; opacity: .85; font-size: 1.05rem; }
.fc-acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
.fc-aviso { min-height: 1.4rem; margin: .6rem 0 0; font-size: .875rem; }
.fc-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 48px; padding: .6rem 1.2rem; border-radius: 999px; border: 1.5px solid rgb(255 255 255 / 75%); background: rgb(255 255 255 / 12%); color: #fff; font: 700 .9375rem var(--f-titulo); text-decoration: none; cursor: pointer; transition: transform 200ms, background 200ms, color 200ms; }
.fc-btn svg { width: 20px; height: 20px; }
.fc-btn:hover { transform: translateY(-2px); background: #fff; color: var(--verde-boton-osc); }
.fc-btn--principal { background: #fff; color: var(--verde-boton-osc); border-color: #fff; }
.fc-btn--principal:hover { background: var(--verde-suave); }
.fc-cuerpo .fc-btn { border-color: var(--verde-boton); background: #fff; color: var(--verde-boton); }
.fc-cuerpo .fc-btn:hover { background: var(--verde-boton); color: #fff; }
.fc-cuerpo .fc-btn--principal { background: var(--verde-boton); color: #fff; }
.fc-cuerpo .fc-btn--principal:hover { background: var(--verde-boton-osc); }
.fc-foto { width: clamp(11rem, 26vw, 17rem); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #fff; border: 6px solid #fff; box-shadow: 0 24px 50px -18px rgb(0 0 0 / 55%); justify-self: center; }
.fc-foto img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.fc-foto .fc-foto__logo { object-fit: contain; padding: 2.4rem; }
.fc-cuerpo { margin-top: -3.2rem; position: relative; z-index: 2; padding-bottom: var(--seccion); }
.fc-rejilla { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .fc-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fc-bloque--mapa, .fc-bloque--otras, .fc-bloque--comprar { grid-column: 1 / -1; } }
.fc-bloque { background: #fff; border-radius: 24px; padding: 1.6rem 1.6rem 1.8rem; box-shadow: var(--sombra); }
.fc-bloque h2 { font-size: 1.35rem; margin: 0 0 1rem; padding-bottom: .6rem; border-bottom: 3px solid var(--verde); display: inline-block; }
.fc-filas { padding: 0; }
.fc-mapa { position: relative; border-radius: 16px; overflow: hidden; background: var(--verde-hoja-fondo); aspect-ratio: 900 / 480; }
.fc-mapa img { width: 100%; height: 100%; object-fit: cover; }
.fc-mapa__pin { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; transform: translate(-50%, -92%); color: var(--verde-boton); filter: drop-shadow(0 6px 6px rgb(0 0 0 / 35%)); }
.fc-mapa__pin svg { width: 100%; height: 100%; fill: currentColor; stroke: #fff; stroke-width: 1.4; }
.fc-direccion { display: flex; gap: .7rem; align-items: flex-start; margin: 1rem 0 .4rem; font-weight: 500; }
.fc-direccion svg { width: 22px; height: 22px; flex: none; color: var(--verde-boton); margin-top: .1rem; }
.fc-acciones-mapa { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.fc-nota { margin: .8rem 0 0; font-size: .875rem; color: var(--tinta-suave); }
.fc-bloque--comprar p { color: var(--tinta-suave); max-width: 46rem; }
.fc-otras { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }
.fc-otra { display: grid; gap: .25rem; text-decoration: none; color: var(--tinta); }
.fc-otra img, .fc-otra__vacia { width: 100%; aspect-ratio: 400 / 410; object-fit: cover; object-position: top; border-radius: 16px; background: var(--verde-suave); }
.fc-otra strong { font: 800 .95rem/1.25 var(--f-titulo); }
.fc-otra span:last-child { color: var(--verde-boton); font: 700 .8125rem var(--f-titulo); text-decoration: underline; text-underline-offset: 3px; }
.fc-otra:hover img { filter: brightness(1.05); }
.fc-vacia { background: #fff; border-radius: 24px; padding: 2rem; box-shadow: var(--sombra); display: grid; gap: 1.2rem; justify-items: start; }
.fc-btn--oscuro { color: #fff; }
@media (max-width: 600px) { .fc-hero { padding-bottom: 5.5rem; } .fc-bloque { padding: 1.3rem 1.2rem 1.5rem; border-radius: 20px; } .fc-btn { flex: 1 1 auto; } }
.fc-hero { overflow: hidden; }
.ficha[open] { overflow-x: hidden; }

/* ====== v9 (2026-10-19): horario, calificación y enlaces a Google Maps ====== */
.gm { display: grid; gap: .45rem; margin: .5rem 0 .2rem; }
.gm__rating { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: .9375rem; }
.gm__rating b { font: 800 1rem var(--f-titulo); }
.gm__estrellas { color: #e5a50a; letter-spacing: .08em; font-size: 1rem; }
.gm__rating a { color: var(--tinta-suave); text-decoration: none; }
.gm__rating a:hover { text-decoration: underline; }
.gm__horario { font-size: .9375rem; }
.gm__horario summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .35rem; padding: .25rem 0; }
.gm__horario summary::-webkit-details-marker { display: none; }
.gm__horario summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--tinta-suave); border-bottom: 2px solid var(--tinta-suave); transform: rotate(45deg); transition: transform 200ms; }
.gm__horario[open] summary::after { transform: rotate(-135deg); }
.gm__estado { font-weight: 800; }
.gm__estado--abierto { color: #1e7d32; }
.gm__estado--cerrado { color: var(--error); }
.horario__tabla { width: 100%; border-collapse: collapse; margin: .3rem 0 .2rem; font-size: .875rem; }
.horario__tabla th, .horario__tabla td { text-align: left; padding: .28rem 0; font-weight: 500; text-transform: capitalize; }
.horario__tabla td { text-transform: none; color: var(--tinta-suave); }
.horario__tabla tr.hoy th, .horario__tabla tr.hoy td { font-weight: 800; color: var(--tinta); }
.gm__enlaces { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin: 0; font-size: .875rem; }
.gm__enlaces a { color: var(--verde-boton); font-weight: 700; text-decoration: none; }
.gm__enlaces a:hover { text-decoration: underline; }
.gm__fuente { margin: 0; font-size: .75rem; color: var(--tinta-suave); }

/* ====== v10 (2026-10-19): galería de fotos de cada centro ====== */
.mt__slide--galeria { border: 0; padding: 0; cursor: zoom-in; display: block; background: var(--verde-hoja-fondo); }
.mt__slide--galeria img { width: 100%; height: 100%; object-fit: cover; }
.fc-fotos { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.fc-foto-mini { padding: 0; border: 0; background: var(--verde-hoja-fondo); border-radius: 12px; overflow: hidden; cursor: zoom-in; aspect-ratio: 4 / 3; transition: transform 200ms, box-shadow 200ms; }
.fc-foto-mini[hidden] { display: none; }
.fc-foto-mini:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -14px rgb(0 0 0 / 45%); }
.fc-foto-mini img { width: 100%; height: 100%; object-fit: cover; }
.fc-bloque--fotos { grid-column: 1 / -1; }

/* ====== v11 (2026-10-19): mapa plano de ciudad (Leaflet), marcadores clavados y tarjeta sobre el mapa ====== */
.loc__mapa2d { position: absolute; inset: 0; z-index: 3; background: #e9e6dc; cursor: grab; touch-action: pan-y; transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.loc__mapa2d--entrando { opacity: 0; transform: scale(.84); pointer-events: none; }
.loc__intro--empuja { transform: scale(1.22); transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.loc__mapa2d[hidden] { display: none; }
.loc__mapa2d.leaflet-container { font-family: var(--f-cuerpo); }
.mk-leaflet { background: none; border: 0; }
.mk-leaflet .mk { pointer-events: none; }
.mk-leaflet .mk__cuerpo, .mk-leaflet .mk__punto { pointer-events: auto; }
.mk-leaflet .mk__cuerpo { transform: translateX(-50%); }
.loc__mapa2d .mk--centro .mk__chip { display: none; }
.loc__mapa2d--chips .mk--centro .mk__chip, .loc__mapa2d .mk--cercano .mk__chip, .loc__mapa2d .mk--sel .mk__chip { display: block; }
.loc--mapa .loc__fondo, .loc--mapa::before { opacity: 0; }
.loc--mapa .loc__ayuda { display: none; }
.loc__globo canvas { will-change: transform; }

/* Panel y tarjeta flotan sobre el mapa sin velo: el mapa se ve completo alrededor (sombra: --sombra-panel) */
@media (max-width: 900px) { .loc__mapa2d { touch-action: pan-y pinch-zoom; } }

/* Celular: sin bloque verde detrás de la tarjeta; fondo claro, tarjeta compacta montada sobre el borde del mapa */
@media (max-width: 900px) {
  .loc--mapa, .loc--con-tarjeta { background: var(--papel-suave); color: var(--tinta); }
  .loc--mapa .loc__leyenda, .loc--con-tarjeta .loc__leyenda { color: var(--tinta); }
  .loc--mapa .loc__credito, .loc--con-tarjeta .loc__credito { color: var(--tinta-suave); }
  .loc--con-tarjeta .loc__globo { height: min(62svh, 27rem); }
  .loc--con-tarjeta .mapa-tarjeta { margin: -3.25rem auto .9rem; width: min(100% - 1.5rem, 33rem); border-radius: 22px; box-shadow: 0 -6px 30px -10px rgb(0 0 0 / 35%), 0 14px 34px -16px rgb(0 0 0 / 40%); }
  .loc--con-tarjeta .mt__galeria { height: 9rem; }
  .loc--con-tarjeta .mt__cuerpo { padding: .9rem 1.1rem 1.05rem; }
  .loc--con-tarjeta .mt__cuerpo h2 { font-size: 1.2rem; }
  .loc--con-tarjeta .mt__accion span { width: 42px; height: 42px; }
  .loc--con-tarjeta .mt__nota { display: none; }
}

/* Teléfonos en una sola fila (panel de la ficha, ficha completa y tarjeta del mapa) */
.vc__tels { display: flex; align-items: flex-start; gap: 1rem; }
.vc__tels .vc__txt { flex: 1; }
.vc__tels small { display: block; margin-bottom: .35rem; }
.vc__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.vc__filas .vc__chips a.vc__tel { display: inline-flex; width: auto; min-height: 2.4rem; padding: .35rem .85rem; border-radius: 999px; background: var(--verde-papel); border: 1.5px solid var(--verde-inicio-texto); color: var(--verde-inicio-texto); font: 700 .95rem var(--f-titulo); white-space: nowrap; transition: background 200ms, color 200ms; }
.vc__filas .vc__chips a.vc__tel:hover { background: var(--verde-inicio-texto); color: #fff; }
.mt__tels { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.mt__datos li:has(.mt__tels) a { white-space: nowrap; font-weight: 600; }

/* Ficha completa: imágenes del centro cuando no hay fotos de la fachada (vista satelital cercana y de la zona) */
.fc-vista { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.fc-vista__img { position: relative; margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 900 / 560; background: var(--verde-suave); }
.fc-vista__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fc-vista__img figcaption { position: absolute; left: .6rem; bottom: .6rem; padding: .25rem .7rem; border-radius: 999px; background: rgb(0 0 0 / 58%); color: #fff; font: 600 .8125rem var(--f-titulo); }

/* Ficha completa en escritorio: contacto y horario lado a lado, luego mapa, imágenes y el resto (sin huecos) */
@media (min-width: 900px) {
  .fc-bloque--contacto { order: 1; } .fc-bloque--horario { order: 2; } .fc-bloque--mapa { order: 3; } .fc-bloque--fotos { order: 4; } .fc-bloque--comprar { order: 5; } .fc-bloque--otras { order: 6; }
}

/* Panel de la distribuidora más compacto: cabe en pantallas bajas sin tanto desplazamiento */
.vc__filas { padding-top: 1.1rem; gap: .8rem; }
.vc__ico { width: 2.7rem; height: 2.7rem; }

.fc-sedes { margin: 0 0 .9rem; color: var(--tinta-suave); }
.fc-sedes a, .fc-sedes b { margin-inline: .15rem; font-weight: 700; color: var(--verde-inicio-texto); }

/* Ficha de la persona: la tarjeta del centro dentro del diálogo; ocho acciones caben en dos filas */
.mapa-tarjeta--dialogo .mt__acciones { flex-wrap: wrap; row-gap: .8rem; }
.mapa-tarjeta--dialogo .mt__accion { flex: 0 0 calc(25% - .3rem); }
.mt__slide--logo { display: grid; place-items: center; background: linear-gradient(160deg, var(--verde-inicio) 0%, var(--verde-inicio-osc) 100%); }
.mt__slide--logo img { width: 9rem; height: auto; }

/* Zoom del mapa: botón sin más acercamiento posible */
.mapa-zoom button:disabled { color: #b8b8b8; cursor: default; }
.mapa-zoom button:disabled:hover { background: #fff; }

/* Celular: sin filtros ni animaciones continuas mientras se hace zoom o se arrastra (cada fotograma extra se nota como tirón) */
@media (hover: none), (max-width: 900px) {
  .loc__fondo::before, .loc__fondo::after { animation: none; filter: none; }
  .loc--mapa .mk__pulso, .loc--mapa .mk__tu i, .loc--mapa .mk--sel .mk__cuerpo { animation: none; }
}
/* Entrada: el mundo girando y acercándose a México (video grabado del propio globo); mientras tanto carga el globo real y el video se desvanece al terminar. */
.loc__intro { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; pointer-events: none; animation: loc-intro-salir .6s 14s forwards; }
.loc__intro--fuera { animation: loc-intro-salir .6s forwards; }
@keyframes loc-intro-salir { to { opacity: 0; visibility: hidden; } }
@media (max-width: 900px) { .loc__intro { height: min(66svh, 30rem); z-index: 0; } }
@media (prefers-reduced-motion: reduce) { .loc__intro { display: none; } }

/* La tarjeta del centro y el panel de la portada entran con un deslizamiento suave en vez de aparecer de golpe. */
@media (prefers-reduced-motion: no-preference) {
  .mapa-tarjeta:not([hidden]) { animation: tarjeta-entra .55s cubic-bezier(.2, .7, .2, 1) both; }
  .loc__panel { animation: tarjeta-entra .8s .2s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes tarjeta-entra { from { opacity: 0; transform: translateY(20px); } }
}
/* Video personalizado hasta el centro: termina en la misma vista del mapa, así que se funde sin acercar ni agrandar nada. */
.loc--intro-personal .loc__mapa2d--entrando { transform: none; }
.loc--intro-personal .loc__intro--empuja { transform: none; }
.loc__intro-saltar { position: absolute; right: max(var(--canal), calc((100vw - 88rem) / 2 + 2rem)); bottom: 5.2rem; z-index: 6; padding: .5rem 1.1rem; border: 1px solid rgb(255 255 255 / 45%); border-radius: 999px; background: rgb(0 0 0 / 40%); color: #fff; font: 700 .875rem var(--f-titulo); cursor: pointer; backdrop-filter: blur(6px); transition: background .2s; }
.loc__intro-saltar:hover { background: rgb(0 0 0 / 65%); }
.loc__intro-saltar[hidden] { display: none; }
@media (max-width: 900px) { .loc__intro-saltar { right: auto; left: .8rem; bottom: auto; top: 5.6rem; } }
@media (prefers-reduced-motion: reduce) { .loc__intro-saltar { display: none; } }

/* Aviso de carga sobre el mapa: punto que late + texto que cambia con cada paso (activando ubicación, buscando, viajando). */
.loc__carga { position: absolute; left: 62%; top: 6rem; z-index: 6; display: flex; align-items: center; gap: .7rem; max-width: calc(100% - 2rem); padding: .65rem 1.2rem .65rem 1rem; border: 1px solid rgb(255 255 255 / 22%); border-radius: 999px; background: rgb(8 14 22 / 62%); color: #fff; font: 600 .9375rem/1.2 var(--f-titulo); transform: translateX(-50%); backdrop-filter: blur(8px); pointer-events: none; }
.loc__carga[hidden] { display: none; }
.loc__carga-punto { flex: none; width: .7rem; height: .7rem; border-radius: 50%; background: #8fd14f; box-shadow: 0 0 0 0 rgb(143 209 79 / 70%); animation: carga-late 1.4s ease-out infinite; }
.loc__carga--cambia .loc__carga-texto { animation: carga-texto .45s ease-out; }
@keyframes carga-late { to { box-shadow: 0 0 0 .7rem rgb(143 209 79 / 0%); } }
@keyframes carga-texto { from { opacity: 0; transform: translateY(5px); } }
@media (max-width: 900px) { .loc__carga { left: .8rem; top: .8rem; max-width: calc(100% - 12.5rem); font-size: .8125rem; border-radius: 1.1rem; padding: .5rem .9rem .5rem .8rem; transform: none; } }
@media (prefers-reduced-motion: reduce) { .loc__carga-punto, .loc__carga--cambia .loc__carga-texto { animation: none; } }

/* Pantalla de carga: fondo blanco con el logo que se va llenando de color. Desde el primer pintado tapa el localizador entero (panel, mapa,
   controles) hasta que empieza la animación de entrada, así nunca se ve la pantalla «normal» quieta mientras se obtiene la ubicación. Un
   respaldo por CSS la quita a los 12 s por si falla el JavaScript. */
.loc__splash { position: absolute; inset: 0; z-index: 8; display: grid; align-content: center; justify-items: center; gap: .85rem; padding: 2rem 1.25rem; text-align: center; background: #fff; color: var(--tinta); transition: opacity .6s ease; animation: loc-splash-seguro .5s 12s forwards; }
.loc__splash--fuera { opacity: 0; pointer-events: none; }
@keyframes loc-splash-seguro { to { opacity: 0; visibility: hidden; } }
.loc__splash-logo { position: relative; width: 9rem; aspect-ratio: 144 / 167; margin-bottom: .8rem; }
.loc__splash-logo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.loc__splash-logo-base { filter: grayscale(1); opacity: .16; }
.loc__splash-logo-lleno { clip-path: inset(100% 0 0 0); animation: splash-llena 2.2s cubic-bezier(.45, 0, .25, 1) infinite; }
@keyframes splash-llena { 0% { clip-path: inset(100% 0 0 0); opacity: 1; } 70% { clip-path: inset(0 0 0 0); opacity: 1; } 88% { clip-path: inset(0 0 0 0); opacity: 1; } 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.loc__splash-titulo { margin: 0; font: 800 clamp(1.4rem, 3.2vw, 2rem) / 1.15 var(--f-titulo); }
.loc__splash-sub { max-width: 26rem; margin: 0; color: var(--tinta-suave); }
.loc__splash-texto--cambia { animation: carga-texto .45s ease-out; }
.loc__splash-barra { position: relative; width: min(14rem, 60%); height: 3px; margin-top: .6rem; overflow: hidden; border-radius: 3px; background: rgb(0 0 0 / 8%); }
.loc__splash-barra::after { content: ""; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--verde-boton), transparent); animation: splash-barra 1.3s ease-in-out infinite; }
@keyframes splash-barra { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@media (max-width: 900px) { .loc__splash { align-content: start; padding-top: clamp(4.5rem, 20svh, 11rem); } .loc__splash-logo { width: 7.5rem; } }
@media (prefers-reduced-motion: reduce) { .loc__splash-logo-lleno { animation: none; clip-path: inset(0 0 0 0); } .loc__splash-barra::after, .loc__splash-texto--cambia { animation: none; } }