/* ==========================================================================
   Diseño «WEB MMC 2026» para todas las páginas públicas

   La portada se maqueta al píxel sobre el lienzo de 1920 px (mmc-inicio.css).
   Este archivo lleva ese mismo diseño al resto del sitio sin rehacer cada
   página: cambia la paleta (los tokens de site.css), las tipografías, la barra
   de navegación, las cabeceras, las tarjetas, las tablas y los botones. Todo
   va acotado a .mmc-sitio, el contenedor que publica.html.twig pone alrededor
   de la página pública, de modo que el panel de administración no se toca.

   Paleta de la maqueta:
     azul #09356e · celeste #69c8f3 · cian #29abe2 · amarillo #ffd500
     marino #041b3a · texto #3c4759
   Tipografías: Oswald Bold inclinada (títulos), Anton (rótulos de tarjeta),
   Roboto Condensed Light y Bold (texto).
   ========================================================================== */

.mmc-sitio {
  --u: calc(100vw / 1920);
  --azul: #09356e;
  --azul-fondo: #08356d;
  --marino: #041b3a;
  --celeste: #69c8f3;
  --cian: #29abe2;
  --amarillo: #ffd500;
  --gris-texto: #3c4759;

  /* Los tokens de site.css, con los colores de la maqueta. */
  --crema: #fff;
  --crema-2: #f1f1f1;
  --superficie: #fff;
  --tinta: #09356e;
  --tinta-2: #3c4759;
  --tinta-3: #5b6b83;
  --linea: #dde3ec;
  --linea-2: #b8c2d2;
  --noche: #08356d;
  --noche-2: #09356e;
  --verde: #09356e;
  --verde-vivo: #09356e;
  --verde-claro: #ffd500;
  --lima: #ffd500;
  --sol: #ffd500;
  --sol-texto: #8a6d00;
  --brasa: #ffd500;
  --brasa-texto: #09356e;
  --sobre-brasa: #3c4759;
  --sobre-sol: #3c4759;
  --boton-azul: #ffd500;
  --sobre-boton-azul: #3c4759;
  --azul-primario: #0b4f9c;
  --azul-claro: #e8f1fb;
  --azul-profundo: #09356e;
  --foco: #09356e;
  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --texto: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --mono: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;

  font-family: var(--texto);
  font-weight: 300;
  font-size: 19px;
  color: var(--tinta-2);
  background: #fff;
  overflow-x: clip;
}
body { background: #fff; }

/* ==========================================================================
   Barra de navegación (la de la portada, en todas las páginas)
   ========================================================================== */
.mmc-sitio .nav.nav-mmc {
  background: #fff;
  box-shadow: 0 calc(3 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, .12);
  border: 0;
  position: sticky;
  top: 0;
  z-index: 30;
}
.nav-mmc .nav-in {
  width: 100%;
  max-width: none;
  height: calc(100 * var(--u));
  padding: calc(8 * var(--u)) calc(2 * var(--u)) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* La marca del menú sigue ahí para lectores de pantalla y teclado, sin ocupar sitio. */
.nav-mmc .marca {
  display: flex; align-items: center; flex: none;
  margin: 0 calc(12 * var(--u)) 0 0;
  text-decoration: none;
}
.nav-mmc .marca-logo {
  display: block;
  height: calc(84 * var(--u)); width: auto;
  margin-top: calc(-8 * var(--u));
}
.nav-mmc .nav-links {
  display: flex;
  align-items: center;
  margin: 0;
  gap: 0;
  font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
}
.nav-mmc .nav-menu { position: relative; display: flex; align-items: center; }
.nav-mmc .nav-menu + .nav-menu::before {
  content: "";
  width: calc(2 * var(--u));
  height: calc(36 * var(--u));
  background: var(--cian);
  opacity: .75;
  margin: 0 calc(18 * var(--u));
}
.nav-mmc .nav-menu-btn {
  font-family: inherit;
  font-weight: 300;
  font-size: calc(38.4 * var(--u));
  line-height: 1;
  color: var(--gris-texto);
  background: none;
  border: 0;
  padding: calc(6 * var(--u)) 0;
  border-bottom: calc(3 * var(--u)) solid transparent;
  letter-spacing: -.063em;
}
.nav-mmc .nav-menu-btn:hover, .nav-mmc .nav-menu-btn[aria-expanded="true"] { border-bottom-color: var(--amarillo); color: var(--azul); }
/* La sección activa no se marca: la barra es la del PDF, idéntica en todas las páginas. */
.nav-mmc .nav-menu-flecha { display: none; }

.nav-mmc .nav-acciones { display: flex; align-items: center; margin: 0 0 0 calc(10 * var(--u)); gap: calc(20 * var(--u)); position: static; }
.nav-mmc .btn-nav {
  font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  font-weight: 300;
  font-size: calc(38.4 * var(--u));
  line-height: 1;
  color: var(--gris-texto);
  background: var(--amarillo);
  border: 0;
  border-radius: calc(14 * var(--u));
  height: calc(65 * var(--u));
  display: inline-flex; align-items: center;
  padding: 0 calc(45 * var(--u));
  margin-top: calc(-5 * var(--u));
  text-decoration: none;
  letter-spacing: -.063em;
  box-shadow: none;
}
.nav-mmc .btn-nav:hover { filter: brightness(.96); }
.nav-mmc .btn-tema { display: none; }
.nav-mmc .btn-entrar { display: none !important; }
.nav-mmc .nav-sesion { position: absolute !important; right: calc(36 * var(--u)); left: auto !important; top: 50%; transform: translateY(-50%); }
.nav-mmc .btn-entrar { font-size: calc(22 * var(--u)); color: var(--gris-texto); background: none; border: 0; padding: 0; letter-spacing: 0; text-decoration: underline; text-underline-offset: .18em; }
.nav-mmc .nav-sesion a, .nav-mmc .nav-sesion .ns-hola { font-size: calc(22 * var(--u)); color: var(--gris-texto); }


/* La barra en móvil y tableta: la marca y el menú de hamburguesa. */
@media (max-width: 1080.98px) {
  .nav.nav-mmc { box-shadow: none; border-bottom: 1px solid #e6e9ee; }
  .nav-mmc .nav-in { height: auto; min-height: 56px; padding: 6px 14px; justify-content: space-between; width: 100%; }
  .nav-mmc .marca { margin: 0; }
  .nav-mmc .marca-logo { height: 44px; margin-top: 0; }
  .nav-mmc .nav-links { display: none; }
  .nav-mmc .nav-acciones { margin: 0; gap: 8px; }
  .nav-mmc .btn-nav { display: none; }
  .nav-mmc .nav-sesion { display: none !important; }
}

/* Los desplegables de la barra, con el estilo del resto. */
.mmc-sitio .nav-menu-panel {
  border: 1.5px solid #cfd6e2; border-radius: 16px; padding: 8px;
  box-shadow: 0 10px 28px rgba(9, 53, 110, .18);
}
.mmc-sitio .nav-menu-item strong { font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: -.02em; color: var(--azul); }
.mmc-sitio .nav-menu-item span { font-size: 15px; color: var(--gris-texto); }

/* ==========================================================================
   Cabecera de cada página interior: banda azul con el arte de la maqueta
   ========================================================================== */
.mmc-sitio .guia-portada {
  background: var(--azul-fondo) url("/assets/img/mmc/azul-1920.webp") right bottom / cover no-repeat;
  color: #fff;
  padding: clamp(40px, 5.2vw, 96px) 0 clamp(52px, 6vw, 108px);
  text-align: center;
  position: relative;
}
.mmc-sitio .guia-portada .sec-cab { max-width: 1120px; margin: 0 auto; }
.mmc-sitio .guia-portada .sec-num {
  justify-content: center; color: var(--amarillo);
  font-size: clamp(13px, 1.45vw, 26px);
}
.mmc-sitio .guia-portada .tit { color: #fff; margin: .1em 0 .2em; }
.mmc-sitio .guia-portada .tit em { color: var(--celeste); }
.mmc-sitio .guia-portada .sec-cab p,
.mmc-sitio .guia-portada .sec-cab { color: #fff; }
.mmc-sitio .guia-portada .sec-cab p {
  font-size: clamp(18px, 1.9vw, 27px); line-height: 1.32; max-width: 980px; margin: 0 auto .6em;
}
.mmc-sitio .guia-portada a { color: #fff; text-decoration: underline; text-underline-offset: .16em; }

/* ==========================================================================
   Títulos y rótulos
   ========================================================================== */
.mmc-sitio .sec-cab { margin-left: auto; margin-right: auto; text-align: center; }
.mmc-sitio .sec-num {
  display: inline-flex; justify-content: center; gap: 0;
  font-family: var(--texto); font-weight: 700; font-size: clamp(12px, 1.2vw, 20px);
  letter-spacing: .5em; text-indent: .5em; text-transform: uppercase; color: var(--azul);
}
.mmc-sitio .sec-num::before { display: none; }
.mmc-sitio .tit {
  font-family: "Oswald", "Anton", Impact, sans-serif; font-weight: 700; text-transform: none;
  font-size: clamp(38px, 5.6vw, 104px); line-height: 1.02; letter-spacing: -.055em;
  color: var(--azul); margin: .16em 0 .28em;
  transform: skewX(-5.58deg); transform-origin: 50% 80%;
}
.mmc-sitio .tit em { font-style: normal; color: var(--celeste); }
.mmc-sitio .sec-cab p { color: var(--gris-texto); font-size: clamp(18px, 1.5vw, 26px); }
.mmc-sitio h3, .mmc-sitio h4 { text-wrap: balance; }

/* El cuerpo de texto, en condensada ligera, un punto más grande que en Archivo. */
.mmc-sitio p { letter-spacing: -.01em; }
.mmc-sitio .tarjeta p, .mmc-sitio .tarjeta ul, .mmc-sitio .tarjeta li,
.mmc-sitio .legal-item p, .mmc-sitio .kit-dia p, .mmc-sitio .kit-dia li,
.mmc-sitio .panel-cuerpo .nota, .mmc-sitio .tarjeta-foto p { font-size: 18px; color: var(--gris-texto); }
.mmc-sitio .perfil-nota, .mmc-sitio .panel-nota { font-size: 15.5px; color: var(--tinta-3); }
.mmc-sitio .alerta p { font-size: 18px; }
.mmc-sitio a { text-underline-offset: .16em; }

/* ==========================================================================
   Tarjetas
   ========================================================================== */
.mmc-sitio .tarjeta, .mmc-sitio .tarjeta-foto, .mmc-sitio .kit-dia, .mmc-sitio .tarifa,
.mmc-sitio .panel, .mmc-sitio .legal-item, .mmc-sitio .recorrido-caja, .mmc-sitio .form-caja {
  background: #fff; border: 1.5px solid #cfd6e2; border-radius: 22px;
  box-shadow: 0 2px 8px rgba(9, 53, 110, .10);
}
.mmc-sitio .tarjeta h3, .mmc-sitio .tarjeta h4, .mmc-sitio .legal-item h3, .mmc-sitio .kit-dia h3,
.mmc-sitio .kit-dia h2, .mmc-sitio .panel-cuerpo h3, .mmc-sitio .tarjeta-foto h3 {
  font-family: var(--display); font-weight: 400; text-transform: none; letter-spacing: -.02em;
  color: var(--azul); font-size: 28px; line-height: 1.1;
}
.mmc-sitio .tarjeta .icono { background: var(--azul); color: #fff; border-radius: 14px; }
.mmc-sitio .tarjeta.acento { border-left: 8px solid var(--amarillo); }
.mmc-sitio .kit-dia .cuando, .mmc-sitio .panel-cuerpo .sub, .mmc-sitio .tarifa .fase {
  font-family: var(--texto); font-weight: 700; letter-spacing: .12em; color: var(--cian);
}
.mmc-sitio .tarifa .valor, .mmc-sitio .tarifa strong { font-family: var(--display); font-weight: 400; color: var(--azul); }
.mmc-sitio .tarifa.viva { border-color: var(--amarillo); border-width: 3px; }
.mmc-sitio .pendiente {
  background: #fff3b0; color: #6b5600; border-radius: 6px; padding: 1px 8px; font-size: .78em;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

/* Las tarjetas de «a dónde ir después»: las azules de «Todo lo que necesitas saber». */
.mmc-sitio .guia-accesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.mmc-sitio a.guia-tarjeta {
  background: var(--azul); color: #fff; border: 0; border-radius: 24px;
  padding: 26px 22px; text-align: center; text-decoration: none; box-shadow: none;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: transform .18s ease;
}
.mmc-sitio a.guia-tarjeta:hover { transform: translateY(-5px); }
.mmc-sitio a.guia-tarjeta strong { font-family: var(--display); font-weight: 400; font-size: 30px; letter-spacing: -.02em; line-height: 1.1; color: #fff; }
.mmc-sitio a.guia-tarjeta span { font-size: 18px; color: #fff; line-height: 1.25; }
.mmc-sitio a.guia-tarjeta::after { content: "Ver más >"; color: var(--amarillo); text-decoration: underline; font-size: 16px; margin-top: auto; }

/* ==========================================================================
   Tablas
   ========================================================================== */
.mmc-sitio table.datos { font-family: var(--texto); font-size: 18px; font-weight: 300; }
.mmc-sitio table.datos caption {
  font-family: var(--texto); font-weight: 700; font-size: 15px; letter-spacing: .12em; color: var(--azul);
  padding: 0 0 10px;
}
.mmc-sitio table.datos th {
  background: var(--azul); color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .08em;
  padding: 11px 14px; border: 0;
}
.mmc-sitio table.datos th:first-child { border-radius: 14px 0 0 0; }
.mmc-sitio table.datos th:last-child { border-radius: 0 14px 0 0; }
.mmc-sitio table.datos td { padding: 11px 14px; color: var(--gris-texto); }
.mmc-sitio table.datos tbody tr:nth-child(even) td { background: #f4f6fa; }
.mmc-sitio table.datos strong { color: var(--azul); font-weight: 700; }

/* ==========================================================================
   Botones
   ========================================================================== */
.mmc-sitio .btn {
  font-family: var(--texto); font-weight: 400; font-size: 20px; letter-spacing: -.02em;
  border-radius: 14px; padding: 13px 30px; border-width: 0; box-shadow: none;
}
.mmc-sitio .btn-primario, .mmc-sitio .btn-nav { background: var(--amarillo); color: var(--gris-texto); box-shadow: none; }
.mmc-sitio .btn-primario:hover { background: #f2c900; transform: none; box-shadow: none; }
.mmc-sitio .btn-solido { background: var(--azul); color: #fff; }
.mmc-sitio .btn-solido:hover { background: #0a4590; transform: none; box-shadow: none; }
.mmc-sitio .btn-fantasma { background: transparent; color: var(--azul); border: 2px solid var(--azul); padding: 11px 28px; }
.mmc-sitio .btn-fantasma:hover { background: var(--azul); color: #fff; transform: none; box-shadow: none; }
.mmc-sitio .btn-mini, .mmc-sitio .btn-mini * { font-family: var(--texto); }

/* ==========================================================================
   Avisos, formularios y otros
   ========================================================================== */
.mmc-sitio .alerta { background: #fff8d6; border: 0; border-left: 8px solid var(--amarillo); border-radius: 14px; }
.mmc-sitio .alerta strong { color: var(--azul); }
.mmc-sitio .pagina-aviso .envoltura { max-width: 1240px; }
/* .pagina-aviso trae 120px de relleno arriba (site.css), pensados para una
   página sin cabecera propia. Aquí siempre va detrás de la banda azul
   (.guia-portada), que ya separa el contenido del menú; con los dos rellenos
   sumados quedaba una franja gris vacía entre la banda y el aviso. */
.mmc-sitio .pagina-aviso { padding-top: clamp(28px, 3vw, 48px); min-height: 0; }
.mmc-sitio .barra { background: #fff; border-top: 3px solid var(--amarillo); }
.mmc-sitio .barra .txt, .mmc-sitio .barra .txt b { font-family: var(--texto); color: var(--azul); }
.mmc-sitio .barra .btn { padding: 10px 22px; font-size: 18px; }
.mmc-sitio .form-control, .mmc-sitio .form-select { font-family: var(--texto); font-weight: 400; border-radius: 12px; }
.mmc-sitio label { font-weight: 700; color: var(--azul); }
.mmc-sitio .form-text { font-size: 15px; }

/* Secciones alternas en gris, como la de «Todo lo que necesitas saber». */
.mmc-sitio section[id]:nth-of-type(even):not(.registro) { background: #f1f1f1; }
.mmc-sitio section[id] { border-bottom: 0; }

/* Fotos y bandas con esquinas de la maqueta. */
.mmc-sitio .dupla-foto img, .mmc-sitio .tarjeta-foto img { border-radius: 22px; }
.mmc-sitio .banda { border-radius: 0; }

/* Horario de salidas y otros textos que eran monoespaciados y diminutos. */
.mmc-sitio .horario { border-top: 3px solid var(--azul); }
.mmc-sitio .h-hora { font-weight: 700; font-size: 22px; color: var(--azul); letter-spacing: -.02em; }
.mmc-sitio .h-dist { font-size: 32px; color: var(--azul); text-transform: none; letter-spacing: -.02em; }
.mmc-sitio .h-desc { font-size: 18px; color: var(--gris-texto); }
.mmc-sitio .h-etiq { font-size: 13px; font-weight: 700; border-color: var(--cian); color: var(--cian); border-radius: 999px; }
.mmc-sitio .dia-cab { font-family: "Oswald", "Anton", Impact, sans-serif; font-weight: 700; text-transform: none; font-size: 34px; letter-spacing: -.04em; color: var(--azul); }
.mmc-sitio .horario-fila { padding: 18px 0; border-bottom-color: #dde3ec; }
.mmc-sitio dt { font-weight: 700; color: var(--azul); }
.mmc-sitio .ficha-datos dt, .mmc-sitio .ficha-datos dd { font-size: 18px; }

/* «Cómo llegar» de la entrega de kits: a todo lo ancho, con las dos sedes lado a lado. */
.mmc-sitio .kits .kit-qr {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 34px; align-items: start;
}
.mmc-sitio .kits .kit-qr h2 { grid-column: 1 / -1; }
.mmc-sitio .kits .kit-qr p { margin: 0 0 8px; }
@media (max-width: 700px) { .mmc-sitio .kits .kit-qr { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Entidades que apoyan (encima del pie, en todas las páginas)
   ========================================================================== */
.mmc-sitio section.mmc-apoyan[id] {
  background: #fff !important; color: var(--azul) !important;
  padding: clamp(40px, 5vw, 84px) 0 clamp(36px, 4.4vw, 72px); border: 0;
}
.mmc-apoyan .sec-cab { margin-bottom: clamp(22px, 2.6vw, 44px); }
.mmc-apoyan .apoyan-lista {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1260px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(14px, 1.8vw, 28px);
  font-size: clamp(10px, 1.12vw, 17px);
}
.mmc-apoyan .apoyan-lista li {
  flex: 0 1 auto; width: calc(var(--w) + 4em);
  background: #fff; border: 1.5px solid #cfd6e2; border-radius: 22px;
  box-shadow: 0 2px 8px rgba(9, 53, 110, .10);
  transition: transform .18s ease, box-shadow .18s ease;
}
.mmc-apoyan .apoyan-lista li:hover, .mmc-apoyan .apoyan-lista li:focus-within {
  transform: translateY(-4px); box-shadow: 0 8px 20px rgba(9, 53, 110, .16);
}
.mmc-apoyan .apoyan-lista a, .mmc-apoyan .apoyan-lista .apoyan-sin-enlace {
  display: flex; align-items: center; justify-content: center;
  min-height: 8.6em; padding: 1.6em 2em; border-radius: 22px;
}
.mmc-apoyan .apoyan-lista li.con-ficha a, .mmc-apoyan .apoyan-lista li.con-ficha .apoyan-sin-enlace { padding: .6em 1.4em; }
.mmc-apoyan .apoyan-lista img.ficha { border-radius: .9em; }
.mmc-apoyan .apoyan-lista img { display: block; width: var(--w); max-width: 100%; height: auto; }
.mmc-apoyan .apoyan-nota { text-align: center; margin: clamp(18px, 2vw, 30px) 0 0; font-size: 17px; color: var(--gris-texto); }
@media (max-width: 700px) {
  .mmc-apoyan .apoyan-lista { flex-direction: column; font-size: 15px; }
  .mmc-apoyan .apoyan-lista li { width: min(92%, 20em); }
}
.mmc-apoyan .envoltura { max-width: 1360px; }

/* Banner de publicidad de la Gobernación, bajo los logos. */
.mmc-apoyan .apoyan-banner { max-width: 1240px; margin: clamp(26px, 3.2vw, 52px) auto 0; }
.mmc-apoyan .apoyan-banner-rotulo {
  margin: 0 0 8px; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .3em;
  text-transform: uppercase; color: var(--tinta-3);
}
.mmc-apoyan .apoyan-banner a {
  display: block; border-radius: 22px; overflow: hidden;
  border: 1.5px solid #cfd6e2; box-shadow: 0 2px 8px rgba(9, 53, 110, .10);
  transition: transform .18s ease, box-shadow .18s ease;
}
.mmc-apoyan .apoyan-banner a:hover, .mmc-apoyan .apoyan-banner a:focus-visible {
  transform: translateY(-4px); box-shadow: 0 10px 24px rgba(9, 53, 110, .18);
}
.mmc-apoyan .apoyan-banner .escena { display: block; position: relative; }
.mmc-apoyan .apoyan-banner img { display: block; width: 100%; height: auto; }
/* El personaje (rejilla del banner original: 2560 x 800) camina en su sitio y rebota suave;
   el botón lleva un brillo que pasa de vez en cuando. Todo en transform/opacity. */
.mmc-apoyan .apoyan-banner .escena-personaje {
  position: absolute; left: 50%; top: 6.875%; width: 13.52%; height: 86.25%;
  pointer-events: none;
}
.mmc-apoyan .apoyan-banner .escena-camina { animation: escena-rebote 1.2s ease-in-out infinite; transform-origin: 50% 100%; }
.mmc-apoyan .apoyan-banner .escena-fijo { display: none; }
.mmc-apoyan .apoyan-banner .escena-brillo {
  position: absolute; left: 73.8%; top: 74.5%; width: 24%; height: 11%;
  border-radius: 999px; overflow: hidden; pointer-events: none;
}
.mmc-apoyan .apoyan-banner .escena-brillo::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: skewX(-18deg); animation: escena-brillo 3.6s ease-in-out infinite;
}
@keyframes escena-rebote { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.2%); } }
@keyframes escena-brillo { 0%, 55% { left: -40%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) {
  .mmc-apoyan .apoyan-banner .escena-camina, .mmc-apoyan .apoyan-banner .escena-brillo { display: none; }
  .mmc-apoyan .apoyan-banner .escena-fijo { display: block; }
}

/* Las tarjetas legales llevan margen interior: el texto no debe tocar el borde. */
.mmc-sitio .legal-item { padding: 22px 26px 24px; }

/* Mapa oficial del recorrido (sustituye al esquema cuando existe el archivo). */
.mmc-sitio .mapa-oficial { margin: 0; }
.mmc-sitio .mapa-oficial[hidden] { display: none; }
.mmc-sitio .mapa-oficial img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid #cfd6e2; background: #fff; }
.mmc-sitio .mapa-oficial figcaption { margin-top: 8px; font-size: 14px; color: var(--gris-texto, #55617a); }
/* Cuando el mapa es una página interactiva (no una imagen), el enlace lleva su
   vista previa (una captura suya) con la etiqueta de abrirla superpuesta abajo,
   como la miniatura de un video. Sin vista previa (mientras no se suba una),
   queda un recuadro punteado con la etiqueta centrada: .sin-vista lo dice. */
.mmc-sitio .mapa-oficial-interactivo {
  position: relative; display: block; width: 100%; min-height: 220px;
  border-radius: 12px; overflow: hidden; border: 1px solid #cfd6e2; background: #f4f6f9;
}
.mmc-sitio .mapa-oficial-interactivo img { display: block; width: 100%; height: auto; }
.mmc-sitio .mapa-oficial-etiqueta {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px;
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(to top, rgba(9, 53, 110, .88), rgba(9, 53, 110, 0));
  color: #fff; font-weight: 700; font-size: 16px;
}
.mmc-sitio .mapa-oficial-etiqueta::before { content: "🗺️"; font-size: 20px; }
.mmc-sitio .mapa-oficial-interactivo.sin-vista {
  display: flex; align-items: center; justify-content: center; min-height: 220px;
  border-style: dashed; border-color: #9aa5b8; padding: 24px;
}
.mmc-sitio .mapa-oficial-interactivo.sin-vista .mapa-oficial-etiqueta {
  position: static; background: none; color: var(--azul); font-size: 17px; text-align: center;
}
.mmc-sitio .mapa-oficial a:hover .mapa-oficial-interactivo, .mmc-sitio .mapa-oficial a:focus-visible .mapa-oficial-interactivo {
  border-color: var(--azul);
}
.mmc-sitio .mapa-oficial a:hover .mapa-oficial-interactivo.sin-vista, .mmc-sitio .mapa-oficial a:focus-visible .mapa-oficial-interactivo.sin-vista {
  background: #eaf0fb;
}

/* Con una sola tarifa, la tarjeta va centrada y no estirada a un tercio de la fila. */
.mmc-sitio .tarifas:has(> .tarifa:only-child) { grid-template-columns: minmax(0, 420px); justify-content: center; }
.mmc-sitio .tarifas:has(> .tarifa:only-child) + .perfil-nota { text-align: center; }

/* Promoción de la app El Dorado Radio Cundinamarca, bajo el banner de destacados. */
.mmc-apoyan .apoyan-app {
  max-width: 1240px; margin: clamp(22px, 2.6vw, 40px) auto 0;
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); flex-wrap: wrap;
  padding: clamp(16px, 2vw, 26px) clamp(18px, 2.6vw, 34px);
  background: #fff; border: 1.5px solid #cfd6e2; border-radius: 22px;
  box-shadow: 0 2px 8px rgba(9, 53, 110, .10);
}
.mmc-apoyan .apoyan-app > img { width: 88px; height: 88px; border-radius: 20px; flex: none; box-shadow: 0 2px 8px rgba(9, 53, 110, .18); }
.mmc-apoyan .apoyan-app-texto { flex: 1 1 320px; min-width: 0; }
.mmc-apoyan .apoyan-app-rotulo { margin: 0 0 2px; font-size: 13px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--tinta-3); }
.mmc-apoyan .apoyan-app h3 { margin: 0 0 6px; font-family: var(--display); font-weight: 400; font-size: clamp(26px, 2.6vw, 36px); color: var(--azul); letter-spacing: -.01em; }
.mmc-apoyan .apoyan-app-texto > p:last-child { margin: 0; font-size: 17px; line-height: 1.45; color: var(--gris-texto); }
.mmc-apoyan .apoyan-app-botones { display: flex; gap: 12px; flex-wrap: wrap; }
.mmc-apoyan .btn-tienda {
  display: inline-flex; flex-direction: column; justify-content: center; min-width: 168px; padding: 10px 22px;
  border-radius: 12px; background: #0b1a33; color: #fff; text-decoration: none; line-height: 1.15;
  border: 1.5px solid #0b1a33; transition: transform .15s ease, box-shadow .15s ease;
}
.mmc-apoyan .btn-tienda small { font-size: 12px; letter-spacing: .04em; opacity: .85; }
.mmc-apoyan .btn-tienda strong { font-size: 22px; font-weight: 700; }
.mmc-apoyan .btn-tienda:hover, .mmc-apoyan .btn-tienda:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(9, 53, 110, .28); }
@media (max-width: 700px) {
  .mmc-apoyan .apoyan-app { text-align: center; justify-content: center; }
  .mmc-apoyan .apoyan-app-botones { justify-content: center; width: 100%; }
}

/* Botón destacado en el aviso del formulario embebido: quien viene a comprobar
   su inscripción, no a llenar el formulario, no debería leer todo el párrafo. */
.mmc-sitio .pagina-aviso .pie-aviso-boton { margin: 18px 0 0; text-align: center; }