/* =============================================================================
 * mini-home.css — las mini homes de salida (BLOQUE 8.2, parts/mini-home.php).
 *
 * LA PIEL ES LA DE LA PORTADA (style.css): aquí no se redibuja vidrio, fondo ni botón. Solo el acomodo de lo que la
 * portada no tiene: el subtítulo y las cifras del héroe en globos, las tarjetas de destino con traslado y recogida, y
 * en el teléfono las rejillas vueltas carrusel horizontal (un tema = un carrusel; ORDEN 8.2 §4). Todo con tokens.
 * ========================================================================== */

/* --- 1 · el héroe: subtítulo y cuatro cifras debajo del buscador ------------------------------------------------ */
.mini-sub { margin: var(--sp4) auto 0; max-width: 56ch; color: var(--mu); font-size: var(--fs-sm); text-align: center; }
.mini-cifras {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem;
  list-style: none; margin: var(--sp4) auto 0; padding: 0; width: 100%; max-width: 760px;
}
.mini-cifra {
  display: flex; flex-direction: column; gap: .15rem; min-width: 0;
  border-radius: var(--r-lg); padding: .6rem .8rem; text-align: left;
}
.mini-cifra b { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.02em; color: var(--tx); overflow-wrap: anywhere; }
.mini-cifra span { color: var(--mu); font-size: var(--fs-xs); display: flex; align-items: center; gap: .3rem; }
@media (min-width: 760px) { .mini-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --- 7 · destinos desde la zona ---------------------------------------------------------------------------------- */
.mini-dest { display: grid; gap: var(--sp4); list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1040px) { .mini-dest { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mini-dest__c {
  display: flex; flex-direction: column; gap: .5rem; height: 100%; min-width: 0;
  border-radius: var(--r-lg); padding: var(--sp5); color: var(--tx);
  transition: transform 160ms var(--ez), border-color 160ms var(--ez);
}
a.mini-dest__c:hover { transform: translateY(-2px); border-color: var(--gIn); }
a.mini-dest__c:hover h3 { color: var(--ai); }
.mini-dest__c h3 { font-size: var(--fs-xl); letter-spacing: -.03em; margin: 0; }
.mini-dest__c dl { display: grid; gap: .3rem; margin: 0; }
.mini-dest__c dl > div { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; }
.mini-dest__c dt { color: var(--dim); font-size: var(--fs-xs); }
.mini-dest__c dd { margin: 0; font-size: var(--fs-sm); text-align: right; }
.mini-nota { margin-top: var(--sp4); }
.mini-mapa { margin-top: var(--sp5); }

/* --- 12 · cierre ----------------------------------------------------------------------------------------------- */
.mini-cierre .shead { text-align: center; }
.mini-cierre__b { display: flex; justify-content: center; margin: 0 0 var(--sp5); }
.mini-otras { margin-top: var(--sp4); }

/* --- el teléfono: cada tema es un carrusel horizontal (scroll-snap, sin JS) -------------------------------------- */
@media (max-width: 759px) {
  .mini-carril .rej, .mini-dest, .mini-otras {
    display: flex; gap: .75rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--sp4) * -1); padding: 4px var(--sp4) 12px;
  }
  .mini-carril .rej::-webkit-scrollbar, .mini-dest::-webkit-scrollbar, .mini-otras::-webkit-scrollbar { display: none; }
  .mini-carril .rej > li, .mini-dest > li, .mini-otras > li { flex: 0 0 min(78vw, 300px); scroll-snap-align: start; }
}

/* =============================================================================
 * La portada 2.0 de prueba (BLOQUE 10.1, parts/portada-2.php): lo nuevo del embudo, con la misma receta.
 * ========================================================================== */
@media (min-width: 760px) { .mini-cifras--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 960px; } }

/* 4 · sellos y garantías en globos */
.mini-sellos { display: grid; gap: .6rem; list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1040px) { .mini-sellos { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.mini-sello { display: flex; align-items: center; justify-content: space-between; gap: .4rem; border-radius: var(--r-lg); padding: .75rem .9rem; font-size: var(--fs-sm); min-width: 0; }
.mini-sello a, .mini-sello b { color: var(--tx); font-weight: 700; overflow-wrap: anywhere; }
.mini-sello a:hover { color: var(--ai); }
.mini-sellos--mini { margin-top: var(--sp4); }
.mini-sellos--mini .mini-sello { justify-content: center; text-align: center; padding: .5rem .7rem; font-size: var(--fs-xs); }

/* 8 · la franja de la costa, de norte a sur: una línea con el degradado de la casa une las cuatro zonas */
.mini-costa { position: relative; display: grid; gap: var(--sp4); list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1040px) {
  .mini-costa { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 18px; }
  .mini-costa::before { content: ""; position: absolute; top: 6px; left: 6%; right: 6%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--gA), var(--gB)); opacity: .8; }
  .mini-costa > li { position: relative; }
  .mini-costa > li::before { content: ""; position: absolute; top: -18px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--ai); box-shadow: 0 0 0 4px var(--vidrio-fondo); }
}
.mini-costa__c { display: flex; flex-direction: column; gap: .4rem; height: 100%; border-radius: var(--r-lg); padding: var(--sp5); color: var(--tx); transition: transform 160ms var(--ez), border-color 160ms var(--ez); }
.mini-costa__c:hover { transform: translateY(-2px); border-color: var(--gIn); }
.mini-costa__c:hover h3 { color: var(--ai); }
.mini-costa__c > .mo { color: var(--dim); font-size: var(--fs-xs); }
.mini-costa__c h3 { font-size: var(--fs-xl); letter-spacing: -.03em; margin: 0; }
.mini-costa__c p { color: var(--mu); font-size: var(--fs-sm); margin: 0; }

/* 11 · ¿cuánto cuesta? */
.mini-tabla-marco { border-radius: var(--r-lg); padding: .3rem var(--sp4); overflow-x: auto; }
.mini-tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.mini-tabla th, .mini-tabla td { text-align: left; padding: .7rem .5rem; border-bottom: 1px solid var(--vidrio-borde); vertical-align: top; }
.mini-tabla thead th { color: var(--dim); font-weight: 600; font-size: var(--fs-xs); }
.mini-tabla tbody tr:last-child > * { border-bottom: 0; }
.mini-tabla td:last-child { text-align: right; white-space: nowrap; }
.mini-tabla a { color: var(--tx); text-decoration: underline; text-underline-offset: 3px; }

/* 12 · tres pasos y grupos */
.mini-pasos { display: grid; gap: var(--sp4); list-style: none; margin: 0; padding: 0; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .mini-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mini-paso { display: flex; flex-direction: column; gap: .4rem; border-radius: var(--r-lg); padding: var(--sp5); }
.mini-paso > .mo { font-size: var(--fs-xl); font-weight: 800; color: var(--ai); }
.mini-paso h3 { font-size: var(--fs-lg); margin: 0; }
.mini-paso p { color: var(--mu); font-size: var(--fs-sm); margin: 0; }
.mini-grupos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp4); margin-top: var(--sp4); border-radius: var(--r-lg); padding: var(--sp5); }
.mini-grupos p { margin: 0; color: var(--tx); max-width: 60ch; }

/* el teléfono: sellos, costa y pasos también son carrusel horizontal */
@media (max-width: 759px) {
  .mini-sellos:not(.mini-sellos--mini), .mini-costa, .mini-pasos {
    display: flex; gap: .75rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--sp4) * -1); padding: 4px var(--sp4) 12px;
  }
  .mini-sellos::-webkit-scrollbar, .mini-costa::-webkit-scrollbar, .mini-pasos::-webkit-scrollbar { display: none; }
  .mini-sellos:not(.mini-sellos--mini) > li { flex: 0 0 min(62vw, 240px); scroll-snap-align: start; }
  .mini-costa > li, .mini-pasos > li { flex: 0 0 min(78vw, 300px); scroll-snap-align: start; }
  .mini-sellos--mini { display: flex; flex-wrap: wrap; gap: .4rem; }
}

/* =============================================================================
 * Las páginas de lista (BLOQUE 10.5, parts/mega-lista.php): /tours-de-noche/ y la mega /cenotes/. La tarjeta es la de
 * la tienda; aquí solo la rejilla (escritorio) y el carrusel (teléfono).
 * ========================================================================== */
.mega-lista__cab { padding-top: var(--sp6, 3rem); }
.mega-lista__rej { display: grid; gap: var(--sp4); list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1040px) { .mega-lista__rej { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .mega-lista__rej { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mega-lista__rej > li { min-width: 0; }
@media (max-width: 759px) {
  .mega-lista__rej {
    display: flex; gap: .75rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--sp4) * -1); padding: 4px var(--sp4) 12px;
  }
  .mega-lista__rej::-webkit-scrollbar { display: none; }
  .mega-lista__rej > li { flex: 0 0 min(80vw, 320px); scroll-snap-align: start; }
}
/* BLOQUE 10.7: el texto del chat en las páginas de lista: los botones de la cabecera, los bloques de texto («¿Qué es un
   cenote?», «Antes de ir»), el cierre y las piezas de pilar (tabla, preguntas) dentro de la sección de la casa. */
.mega-lista__acc { display: flex; flex-wrap: wrap; gap: .75rem; margin: var(--sp4) 0 0; }
/* .mega-lista__acc .btn: el alto de todos (BOTONES 3D) */
.mega-lista__caja { max-width: 760px; }
.mega-lista__caja.glass { padding: var(--sp5); border-radius: var(--r-lg, 18px); }
.mega-lista__puntos { margin: var(--sp4) 0 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.mega-lista__puntos li { position: relative; padding-left: 1.6rem; line-height: 1.55; color: var(--tx); }
.mega-lista__puntos li::before { content: ""; position: absolute; left: .2rem; top: .55em; width: .55rem; height: .55rem; border-radius: 50%; background: var(--ai); }
.mega-lista__texto--cierre .mega-lista__caja { margin-inline: auto; text-align: center; }
.mega-lista__texto--cierre .mega-lista__acc { justify-content: center; }
.mega-lista__pieza .pilar__sec { padding-block: 0; }