/* =========================================================
   Proyecto Raíces — PAGES · Catálogo (experiencias + tours + travesías + paquetes)
   ---------------------------------------------------------
   Catálogo completo (experiencias.html, body[data-page="experiencias"])
   y las tres páginas de tipo fijo (body[data-tipo-fijo]): filtros,
   fundido de la grilla al filtrar y variantes de .exp-card.
   ========================================================= */

#prop-grid{transition:opacity .18s ease;}
#prop-grid.prop-grid-fading{opacity:0;}
/* Catálogo completo de Experiencias (PRO-62): chips de tipo en su
   propia fila; el bloque de destino ("Destino" + selector, apilados)
   sigue inmediatamente después de los chips, en la misma fila — no
   pegado al extremo derecho del contenedor (sin justify-content:
   space-between). Alineado por abajo para que el selector quede a la
   misma altura que la fila de chips. */
.exp-catalogo-filtros{display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px 40px; margin-bottom:44px;}
.exp-catalogo-filtros .filtros{margin-bottom:0;}
.exp-catalogo-filtros .filtro-destino-group{display:flex; flex-direction:column; align-items:flex-start; gap:6px;}
@media (max-width:640px){
  .exp-catalogo-filtros{align-items:flex-start;}
}
/* Ajuste visual de filtros (Experiencias): sin caja blanca, integrados
   al fondo verde de la sección — texto crema con contraste, activo en
   amarillo Raíces, hover sutil (nunca todo el chip en amarillo), radio
   moderado en vez de pill. Lógica sin cambios. */
.exp-catalogo-filtros .filtro-btn{background:transparent; border-color:rgba(var(--crema-rgb),0.35); border-radius:var(--radius-md); color:var(--text-primary);}
.exp-catalogo-filtros .filtro-btn:hover{background:rgba(var(--amarillo-rgb),0.12); border-color:var(--color-accent-2);}
.exp-catalogo-filtros .filtro-btn.active{background:var(--color-accent-2); border-color:var(--color-accent-2); color:var(--color-tinta);}
.exp-catalogo-filtros .filtro-destino-label{font-size:var(--text-xs); text-transform:uppercase; letter-spacing:0.06em; color:var(--text-secondary);}
.exp-catalogo-filtros .filtro-destino-select{background-color:rgba(var(--crema-rgb),0.08); border-color:rgba(var(--crema-rgb),0.35); border-radius:var(--radius-md); color:var(--text-primary); accent-color:var(--color-accent-2); color-scheme:dark; background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23ECE7D8' d='M5.5 7.5l4.5 4.5 4.5-4.5z'/%3E%3C/svg%3E");}
.exp-catalogo-filtros .filtro-destino-select:hover{background-color:rgba(var(--crema-rgb),0.14); border-color:var(--color-accent-2);}
/* Menú desplegable nativo: sin esto hereda fondo blanco del SO con el
   texto crema del select por encima (ilegible). Soporte de color en
   <option>/<optgroup> varía por navegador, pero degrada a lo nativo sin
   romper nada — no toca agrupación por país ni comportamiento.
   color-scheme:dark es lo que saca la barra blanca residual (scrollbar/
   chrome nativo del popup, que si no se declara usa la paleta clara del
   SO por defecto aunque las opciones ya estén coloreadas). */
.exp-catalogo-filtros .filtro-destino-select option{background-color:var(--color-verde-complementario); color:var(--text-primary);}
.exp-catalogo-filtros .filtro-destino-select option:checked{background-color:var(--color-accent-2); color:var(--color-tinta);}
.exp-catalogo-filtros .filtro-destino-select optgroup{background-color:var(--color-verde-complementario); color:var(--text-secondary);}
/* Catálogo (destino): título y resumen reservan un piso de alto (2
   líneas) para que la card mezcla Tours/Travesías/Paquetes quede
   pareja con texto corto — pero SIN recortar el nombre con "…" (PRO-10:
   un título más largo que el piso simplemente crece la card, nunca se
   corta). min-height es sólo un mínimo, no un máximo. */
body[data-page="experiencias"] .exp-card h3{min-height:46px;}
body[data-page="experiencias"] .exp-card .resumen{min-height:63px;}
/* Experiencias (PRO-62): catálogo completo en una única grilla uniforme
   de cards — mismo componente .exp-grid/.exp-card que Catálogo (sin
   composición alternada por tipo; esa variante editorial se descartó
   al convertir esta página en el catálogo principal con filtros). */
/* Tours / Travesías / Paquetes — mismo componente .exp-card/.exp-grid
   que Catálogo, pero acá la foto gana protagonismo real: de 3 columnas
   chicas con marco a 2 columnas grandes sin caja, con el mismo chip
   discreto que ya usa Experiencias (misma familia visual, sin clonar
   su composición de filas alternadas). data-tipo-fijo sólo está
   presente en tours.html/travesias.html/paquetes.html. */
body[data-tipo-fijo] .exp-grid{grid-template-columns:repeat(2,1fr); gap:var(--space-7);}
body[data-tipo-fijo] .exp-card{background:transparent; border:none; border-radius:0; box-shadow:none; transition:none;}
body[data-tipo-fijo] .exp-card:hover{transform:none; box-shadow:none;}
body[data-tipo-fijo] .exp-card .img-wrap{border-radius:var(--radius-lg);}
/* La página ya está filtrada a un único tipo (Tours/Travesías/Paquetes):
   repetir esa misma etiqueta en cada card es redundante, así que se oculta acá. */
body[data-tipo-fijo] .exp-card .cat-badge{display:none;}
body[data-tipo-fijo] .exp-card .body{padding:var(--space-4) 0 0; gap:10px;}
body[data-tipo-fijo] .exp-card .dest-tag{font-size:12.5px; letter-spacing:var(--tracking-wide);}
/* Mismo piso de alto que el resto de las variantes (PRO-10), acá en em
   porque el font-size es fijo (24px) en vez de clamp(). */
body[data-tipo-fijo] .exp-card h3{font-size:var(--text-4xl); line-height:1.22; min-height:2.44em;}
body[data-tipo-fijo] .exp-card .resumen{font-size:14.5px; line-height:1.5;}
@media (max-width: 640px){
  body[data-tipo-fijo] .exp-grid{grid-template-columns:1fr; gap:var(--space-6);}
}
/* ---------- Experiencias — catálogo principal (PRO-62) ----------
   Experiencias es exclusivamente el catálogo completo: encabezado
   editorial compacto (.page-intro.tight, sin foto) seguido de chips
   de tipo + selector de destino (.exp-catalogo-filtros, ver arriba) y
   la grilla de resultados, sin secciones secundarias intermedias. El
   lienzo de fondo ya está resuelto arriba (body[data-page="experiencias"]
   main + section transparent). */
body[data-page="experiencias"] .exp-explorer{padding:var(--space-7) 0 var(--space-8);}