/* Home por mundos (php/views/home-mundos.php). Simple, como el Nuxt: un fondo,
   cada mundo con su título, una fila de 3 y «Ver todas» abajo. */

.hmundos { background: var(--c-crema); padding: 8px 0 24px; font-family: Barlow, sans-serif; font-style: normal; color: var(--c-tinta); }
.hmundo { --m-acento: var(--c-naranja-txt); padding: 36px 0 8px; }
.hmundo + .hmundo > .container { border-top: 1px solid var(--c-borde); padding-top: 32px; }
.hmundo--avion { --m-acento: #1f5f8b; }
.hmundo--cruceros { --m-acento: #0f6e6a; }

.hmundo__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 18px; }
.hmundo__heading { min-width: 0; }
.hmundo__kicker { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--m-acento); }
.hmundo__titulo { margin: 2px 0 0; font-size: 28px; line-height: 1.1; font-weight: 800; font-style: normal; text-transform: none; color: var(--c-tinta); }
.hmundo__sub { margin: 4px 0 0; font-size: 15px; color: var(--c-texto); }

.hmundo__fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.hmundo__item { display: flex; min-width: 0; }
.hmundo__item .card.hcard { margin-bottom: 0; }
/* Con la pantalla más angosta (de 992 a 1200 px) el precio y «Ver viaje» no entran juntos: el botón baja. */
.hmundo__item .hcard__pie { flex-wrap: wrap; gap: 10px; }
.hmundo__item .hcard__pricing { min-width: 0; }
.hmundo__mas { display: none; }
.hmundo__pie { display: flex; justify-content: center; margin-top: 22px; }
.hmundo__todas { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px; border: 2px solid var(--m-acento); background: #fff; color: var(--m-acento); font-size: 16px; font-weight: 700; text-decoration: none; }
.hmundo__todas:hover { background: var(--m-acento); color: #fff; text-decoration: none; }
/* En la compu, la fila de 3 (Diego, 01/11: «queda mejor en 3»); las otras son para deslizar en el celular. */
.hmundo__fila > .hmundo__item:nth-child(n+4) { display: none; }
.hmundo--avion .hcard__tipo, .hcard--avion .hcard__tipo { color: #1f5f8b; }
.hmundo--cruceros .hcard__tipo, .hcard--cruceros .hcard__tipo { color: #0f6e6a; }

.hmundo__relleno { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; padding: 28px; border-radius: 16px; border: 2px dashed var(--c-borde-2); background: #fff; }
.hmundo__relleno strong { font-size: 22px; font-weight: 800; line-height: 1.2; }
.hmundo__relleno p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--c-texto); max-width: 420px; }
.hmundo__wa { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: #1b7a50; color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; }
.hmundo__wa:hover { background: #156440; color: #fff; text-decoration: none; }

/* Mundo sin ninguna salida: no se oculta, así se sabe que Ceará lo vende. */
.hmundo__vacio { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 20px 24px; border-radius: 14px; border: 2px dashed var(--c-borde-2); background: #fff; }
.hmundo__vacio p { flex: 1 1 260px; margin: 0; font-size: 15px; color: var(--c-texto); }

/* Celular y tablet: la fila se desliza con el dedo (hasta 6) y cierra con «Ver todas». */
@media (max-width: 991px) {
    .hmundo { padding-top: 28px; }
    .hmundo + .hmundo > .container { padding-top: 26px; }
    .hmundo__titulo { font-size: 24px; }
    .hmundo__pie { margin-top: 16px; }
    .hmundo__todas { width: 100%; justify-content: center; }
    .hmundo__fila { display: flex; gap: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; margin-right: -15px; padding-right: 15px; padding-bottom: 6px; scrollbar-width: none; }
    .hmundo__fila::-webkit-scrollbar { display: none; }
    .hmundo__item, .hmundo__fila > .hmundo__item:nth-child(n+4) { display: flex; flex: 0 0 84%; max-width: 340px; scroll-snap-align: start; }
    .hmundo__fila > .hmundo__item:nth-child(n+7) { display: none; }
    .hmundo__relleno { display: none; }
    .hmundo__mas { flex: 0 0 52%; max-width: 220px; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 20px; border-radius: 16px; border: 2px dashed var(--c-borde-2); background: #fff; color: var(--m-acento); text-decoration: none; font-size: 15px; }
    .hmundo__mas strong { font-size: 20px; font-weight: 800; }
    .hmundo__mas:hover { color: var(--m-acento); text-decoration: none; }
}

/* ---------- Tarjeta «clara» (Claude Design, «Tarjetas y menú, más claros»; home-card.php con $cardClara) ----------
   Primero qué viaje es, después cuándo sale, después cuánto cuesta. Un solo acento en el cuerpo: el botón. */
.hcard--clara .hcard__img { height: 220px; aspect-ratio: auto; overflow: hidden; }
.hcard--clara .hcard__img > .card__cover { height: 100%; object-fit: cover; }
.hcard--clara .hcard__body { flex: 1; display: flex; flex-direction: column; padding: 18px 20px 20px; }
.hcard--clara .hcard__title { font-size: 20px; line-height: 1.22; font-weight: 700; text-transform: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.hcard--clara .hcard__title a { color: var(--c-tinta); text-decoration: none; }
.hcard--clara .hcard__cuando { display: flex; align-items: center; gap: 7px; margin: 8px 0 0; font-size: 15px; font-weight: 600; color: var(--c-tinta); }
.hcard--clara .hcard__cuando svg { flex: none; color: #7b6f66; }
.hcard--clara .hcard__datos-txt { margin: 6px 0 0; font-size: 14px; line-height: 1.4; color: #6b625b; }
.hcard--clara .hcard__datos-txt .hcard__tipo { display: inline; font-weight: 400; color: inherit; }
.hcard--clara .hcard__resto { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 16px; min-width: 0; }
.hcard__disp { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--c-texto); }
.hcard__disp > span { flex: none; width: 8px; height: 8px; border-radius: 999px; background: #1b7a50; }
.hcard__disp--media > span, .hcard__disp--pocos > span { background: #b45309; }
.hcard__disp--no > span { background: #9a8a7b; }
.hcard__serv { font-size: 13px; line-height: 1.4; color: #6b625b; }
.hcard__hotel { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; color: #6b625b; }
.hcard__hotel svg { flex: none; color: #8a7a6a; }
.hcard__hotel > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hcard--clara .hcard__pie { margin-top: auto; padding-top: 14px; border-top: 1px solid #f0e8e0; align-items: flex-end; }
.hcard--clara .hcard__pricing { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: #6b625b; }
.hcard__desde { font-size: 12px; font-weight: 500; }
.hcard--clara .hcard__price { font-size: 26px; line-height: 1.05; font-weight: 800; letter-spacing: -.01em; color: var(--c-tinta); }
.hcard--clara .hcard__price small { font-size: 15px; font-weight: 700; margin-right: 3px; }
.hcard__total { font-size: 13px; }
.hcard__cuotas-txt { font-size: 13px; font-weight: 500; color: var(--c-texto); }
.hcard--clara .hcard__ver { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 2px solid #c94f10; border-radius: 10px; background: #c94f10; color: #fff; font-size: 15px; font-weight: 700; }
.hcard--clara .hcard__ver:hover, .hcard--clara .hcard__ver:focus { background: #a83f0b; border-color: #a83f0b; color: #fff; }
/* Agotada: el botón pasa a borde y el precio y la foto se apagan. */
.hcard--agotada .card__cover { filter: grayscale(.7); }
.hcard--agotada .hcard__price { color: #6b625b; }
.hcard--agotada .hcard__ver { background: #fff; color: #c4470c; }
@media (max-width: 991px) {
    .hcard--clara .hcard__img { height: 200px; }
}