/* Ficha con la información del viaje en pestañas y las cuotas en filas
   (interruptor ficha_pestanas; ver salida-pestanas.php). Mismos colores que
   departure.php: tinta #1f1a17, sub #5e5249, rótulo #7a5a3c, borde #eee3d9,
   crema #f9f5f0, naranja #c4470c. */

/* --- Conocé el viaje --- */
.fx-info { gap:16px; }
.fx-info__tit { margin:0; font-size:24px; font-weight:800; line-height:1.15; color:#1f1a17; text-wrap:balance; }
.fx-info__intro { margin-top:-4px; }
.fx-info__intro p:last-child { margin-bottom:0; }

.fx-tabs { display:flex; gap:6px; padding:5px; border-radius:14px; background:#f3ece4; }
.fx-tabs[hidden] { display:none; }
.fx-tab { flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; gap:6px; padding:10px 8px; border:0; border-radius:10px; background:none; color:#5e5249; font:inherit; font-size:15px; font-weight:600; white-space:nowrap; cursor:pointer; }
.fx-tab svg { flex:none; }
.fx-tab em { font-style:normal; font-size:12px; font-weight:700; padding:0 6px; border-radius:999px; background:#e7ddd2; }
.fx-tab:hover { color:#1f1a17; }
.fx-tab[aria-selected="true"] { background:#fff; color:#c4470c; box-shadow:0 1px 3px rgba(60,40,20,.15); }
.fx-tab[aria-selected="true"] em { background:#fdeee4; color:#c4470c; }
.fx-tab:focus-visible { outline:3px solid #1f3a68; outline-offset:1px; }
/* En el celular, una fila que se desliza de costado (Diego, 30/10): la que
   sigue asoma cortada y con fundido, como las tarjetas de tarifas. El fundido
   lo prende el JS (fx-tabs--mas) mientras quede algo a la derecha. */
@media (max-width: 600px) {
  .fx-tabs { overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain; }
  .fx-tabs::-webkit-scrollbar { display:none; }
  .fx-tabs--mas { -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent); }
  .fx-tab { flex:none; padding:9px 12px; font-size:14px; }
}

.fx-panel { background:#fff; border:1px solid #eee3d9; border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:12px; min-width:0; }
.fx-panel[hidden] { display:none; }
.fx-panel:focus-visible { outline:3px solid #1f3a68; outline-offset:2px; }
.fx-panel__tit { margin:0; font-size:18px; font-weight:700; color:#1f1a17; }
.fx-panel__nota { margin:0; font-size:14px; color:#5e5249; }
/* El título del panel y, a la derecha, su dato: «5 días · 3 noches de hotel». */
.fx-panel__cab { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:4px 10px; }
.fx-panel__cab small { font-size:13px; color:#5e5249; }
/* Documentos: documentación y condiciones, cada una plegable (artifact «Ficha Carlos Paz compacta»). */
.fx-docs { display:flex; flex-direction:column; gap:8px; }
.fx-doc { border:1px solid #eee3d9; border-radius:12px; padding:0 14px; }
.fx-doc > summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:10px; padding:12px 0; font-weight:700; color:#1f1a17; }
.fx-doc > summary::-webkit-details-marker { display:none; }
.fx-doc > summary small { font-weight:500; color:#5e5249; }
.fx-doc > summary:focus-visible { outline:3px solid #1f3a68; outline-offset:2px; border-radius:6px; }
.fx-doc[open] > summary { border-bottom:1px solid #eee3d9; }
.fx-doc > .fx-viaje { padding:10px 0 14px; font-size:14px; }
/* Sin JS se ven todos los paneles, uno debajo del otro. */
.fx-info:not(.fx-info--js) .fx-panel + .fx-panel { margin-top:4px; }
/* Las listas de Incluye ya van dentro del panel: sin otra caja. */
.fx-panel .fx-lista { border-radius:12px; padding:16px; }
/* El verde es solo para «Disponible» (Diego, 28/10): el tilde va en naranja. */
.fx-panel .fx-si i { color:#c4470c; }
@media (max-width: 600px) { .fx-panel { padding:14px; border-radius:14px; } }

/* Incluida rellena y Opcional con borde: se distinguen sin verde ni naranja. */
.fx-chip { display:inline-block; font-size:12px; font-weight:600; line-height:1.5; padding:0 8px; border-radius:999px; white-space:nowrap; }
.fx-chip.op { background:#fff; color:#5e5249; box-shadow:inset 0 0 0 1px #e0c9b3; }
.fx-chip.si { background:#f3ece4; color:#1f1a17; }
.fx-link { border:0; padding:0; background:none; font:inherit; font-size:14px; font-weight:600; color:#c4470c; text-decoration:underline; text-underline-offset:2px; cursor:pointer; text-align:left; }

/* --- Itinerario: la secuencia entera a la vista; el día se abre. --- */
.fx-itds { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.fx-itds > li + li { border-top:1px solid #eee3d9; }
.fx-itd > summary { list-style:none; display:grid; grid-template-columns:30px minmax(0,1fr) 14px; gap:10px; align-items:center; padding:10px 2px; cursor:pointer; }
.fx-itd > summary::-webkit-details-marker { display:none; }
.fx-itd > summary::after { content:''; width:8px; height:8px; border:solid #5e5249; border-width:0 2px 2px 0; transform:rotate(45deg); margin-top:-4px; transition:transform .15s; }
.fx-itd[open] > summary::after { transform:rotate(-135deg); margin-top:4px; }
.fx-itd > summary:focus-visible { outline:3px solid #1f3a68; outline-offset:-2px; border-radius:8px; }
.fx-itd__num { width:28px; height:28px; border-radius:999px; background:#fdeee4; color:#c4470c; font-weight:800; font-size:14px; display:grid; place-items:center; font-variant-numeric:tabular-nums; }
.fx-itd__tit { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; min-width:0; font-weight:700; color:#1f1a17; }
.fx-itd__cuerpo { padding:0 2px 14px 40px; display:flex; flex-direction:column; gap:10px; }
.fx-itd__cuerpo p { margin:0; font-size:16px; line-height:1.55; color:#5e5249; white-space:pre-line; }
.fx-itd__exc { display:flex; flex-wrap:wrap; gap:6px; }
.fx-ref { display:inline-flex; flex-direction:column; align-items:flex-start; gap:1px; padding:7px 11px; border:1px solid #eee3d9; border-radius:10px; background:#f9f5f0; font:inherit; font-size:14px; color:#1f1a17; text-align:left; cursor:pointer; }
.fx-ref span { font-size:13px; color:#5e5249; }
.fx-ref:hover { border-color:#e0c9b3; }
@media (max-width: 600px) { .fx-itd__cuerpo { padding-left:2px; } }

/* --- Excursiones: el detalle único. --- */
.fx-excs { display:flex; flex-direction:column; gap:8px; }
.fx-exc { border:1px solid #eee3d9; border-radius:12px; background:#fff; scroll-margin-top:90px; }
.fx-exc[open] { border-color:#e0c9b3; box-shadow:0 2px 10px -6px rgba(60,40,20,.3); }
.fx-exc > summary { list-style:none; display:grid; grid-template-columns:88px minmax(0,1fr) auto 14px; gap:12px; align-items:center; padding:10px 14px 10px 10px; cursor:pointer; }
/* La miniatura de la excursión; el número es cuántas fotos tiene (se ven todas al abrirla). */
.fx-exc__foto { position:relative; width:88px; height:64px; border-radius:8px; overflow:hidden; background:#f3ece4; color:#b9a48f; display:grid; place-items:center; }
.fx-exc__foto img { width:100%; height:100%; object-fit:cover; display:block; }
.fx-exc__foto em { position:absolute; right:4px; bottom:4px; padding:0 6px; border-radius:999px; background:rgba(20,14,10,.72); color:#fff; font-size:11px; font-style:normal; font-weight:700; line-height:1.6; }
@media (max-width: 600px) {
  .fx-exc > summary { grid-template-columns:72px minmax(0,1fr) auto 14px; gap:10px; }
  .fx-exc__foto { width:72px; height:56px; }
}
.fx-exc > summary::-webkit-details-marker { display:none; }
.fx-exc > summary::after { content:''; width:8px; height:8px; border:solid #5e5249; border-width:0 2px 2px 0; transform:rotate(45deg); margin-top:-4px; transition:transform .15s; }
.fx-exc[open] > summary::after { transform:rotate(-135deg); margin-top:4px; }
.fx-exc > summary:focus-visible { outline:3px solid #1f3a68; outline-offset:-2px; border-radius:12px; }
.fx-exc__nom { display:flex; flex-direction:column; gap:3px; min-width:0; color:#1f1a17; }
.fx-exc__nom small { font-size:13px; color:#5e5249; }
.fx-exc__precio { font-size:15px; font-weight:700; color:#1f1a17; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.fx-exc__precio small { display:block; font-size:11px; font-weight:500; color:#5e5249; }
.fx-exc__cuerpo { padding:0 14px 14px; display:flex; flex-direction:column; gap:8px; font-size:15px; color:#5e5249; }
.fx-exc__cuerpo p { margin:0; white-space:pre-line; }
.fx-exc__cuerpo strong { color:#1f1a17; }
.fx-exc__ref { font-size:14px; }
.fx-itd { scroll-margin-top:90px; }

/* --- Hoteles: abre la ventana de siempre. --- */
.fx-hots { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:10px; }
.fx-hotc { display:grid; grid-template-columns:88px minmax(0,1fr); gap:12px; align-items:center; padding:10px; border:1px solid #eee3d9; border-radius:12px; }
.fx-hotc__foto { aspect-ratio:1; max-width:100%; padding:0; border:0; border-radius:9px; overflow:hidden; background:#f3ece6; cursor:pointer; }
.fx-hotc__foto img { display:block; width:100%; height:100%; object-fit:cover; }
.fx-hotc__txt { display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0; }
.fx-hotc__txt b { font-size:16px; color:#1f1a17; }
.fx-hotc__txt > span { font-size:14px; color:#5e5249; }
.fx-hotc__est { color:#d99a1e; font-size:13px; letter-spacing:1px; }

/* Cuotas después de «Conocé el viaje», cerradas como acordeón (30/10): el título
   y la línea de arriba son el renglón que abre. */
.fx-cuotas__plegar > summary { list-style:none; display:flex; align-items:center; gap:12px; cursor:pointer; }
.fx-cuotas__plegar > summary::-webkit-details-marker { display:none; }
.fx-cuotas__plegar > summary .fx-cuotas__cab { flex:1 1 auto; min-width:0; }
.fx-cuotas__plegar > summary::after { content:''; flex:none; width:9px; height:9px; border:solid #1f1a17; border-width:0 2.4px 2.4px 0; transform:rotate(45deg); margin:-4px 4px 0 0; transition:transform .15s; }
.fx-cuotas__plegar[open] > summary::after { transform:rotate(-135deg); margin-top:4px; }
.fx-cuotas__plegar > summary:focus-visible { outline:3px solid #1f3a68; outline-offset:4px; border-radius:6px; }
.fx-cuotas__plegar > :not(summary) { margin-top:12px; }
.fx-cuotas__plegar > [hidden] { display:none; }

/* --- Cuotas: las tarjetas de la ficha de siempre, con todo a la vista (Diego, 30/10: sin abrir
   y cerrar cada banco). Entran las que quepan, de al menos 210 px: de a 3 en la computadora,
   de a 2 si la columna es más angosta y una en el celular. --- */
.fx-cuotas__plegar .fx-cuotas__planes { grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); }
@media (prefers-reduced-motion: reduce) { .fx-tab, .fx-itd > summary::after, .fx-exc > summary::after { transition:none; } }

/* --- El enlace del tucán a «Conocé el viaje» (cuando va abajo) --- */
/* Su propio renglón dentro de los datos, que son flex o grilla según la tarjeta. */
.fx-ir-viaje { grid-column:1 / -1; flex:1 0 100%; display:flex; align-items:center; gap:6px; font-size:15px; font-weight:700; color:#c4470c; text-decoration:none; }
.fx-ir-viaje[hidden] { display:none; }
.fx-ir-viaje span { text-decoration:underline; text-underline-offset:3px; }
.fx-ir-viaje:hover { color:#9a3608; }
.fx-info--arriba { margin-bottom:4px; }

/* --- Los pasos en acordeón (ficha-acordeon.js; Diego, 30/10) --- */
/* Uno abierto por vez. Cerrado queda el título con lo elegido y «Cambiar»; el
   que todavía no se hizo, en gris. Sin JS no hay clase y se ven todos. */
.fx-pasos--acordeon > .fx-pc { scroll-margin-top:90px; }
.fx-pasos--acordeon > .fx-pc--cerrado { cursor:pointer; padding-top:14px; padding-bottom:14px; }
.fx-pasos--acordeon > .fx-pc--cerrado:hover { border-color:#e0c9b3; }
/* !important: algunos hijos traen display por id (#fx-emb, #fx-lista). */
.fx-pasos--acordeon > .fx-pc--cerrado > :not(.fx-pc__riel):not(.fx-pc__cuerpo):not(.fx-pc__head),
.fx-pasos--acordeon > .fx-pc--cerrado .fx-pc__cuerpo > :not(.fx-pc__cab) { display:none !important; }
.fx-pasos--acordeon > .fx-pc--cerrado .fx-pc__cab > p { display:none; }
.fx-pasos--acordeon > .fx-pc--cerrado .fx-pc__cab:focus-visible { outline:3px solid #1f3a68; outline-offset:4px; border-radius:6px; }
.fx-pasos--acordeon > .fx-pc--falta .fx-pc__cab h2 { color:#a8998b; }
.fx-pasos--acordeon > .fx-pc--falta .fx-pc__ico { background:#efe6dc; color:#a8998b; }
.fx-pc__res { display:none; }
.fx-pasos--acordeon > .fx-pc--listo .fx-pc__res { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; font-size:15px; color:#1f1a17; }
.fx-pc__res u { font-weight:600; color:#c4470c; text-underline-offset:2px; }
.fx-pc__pie--solo { justify-content:flex-end; }

/* --- La portada con miniaturas (departure.php, $fotosPortada; Diego, 30/10) --- */
/* La foto grande a todo el ancho y debajo, en fila, hasta 4 que abren el visor (Diego, 30/10:
   «probá todo el ancho la imagen»; antes iban en una columna al costado). */
.fx-portada { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.fx-portada__minis { display:grid; grid-template-columns:repeat(var(--n,4),minmax(0,1fr)); gap:10px; }
.fx-portada__mini { position:relative; min-height:0; aspect-ratio:16 / 9; padding:0; border:0; border-radius:14px; overflow:hidden; background:#f3ece6; cursor:pointer; }
.fx-portada__mini[hidden] { display:none; }
.fx-portada__mini img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .25s; }
.fx-portada__mini:hover img { transform:scale(1.05); }
.fx-portada__mini:focus-visible { outline:3px solid #1f3a68; outline-offset:2px; }
.fx-portada__mas { position:absolute; inset:0; display:grid; place-items:center; background:rgba(20,14,10,.55); color:#fff; font-size:20px; font-weight:800; }
@media (max-width: 767px) {
  .fx-portada { gap:8px; }
  .fx-portada__minis { gap:8px; }
  .fx-portada__mini { aspect-ratio:4 / 3; border-radius:10px; }
}
@media (prefers-reduced-motion: reduce) { .fx-portada__mini img { transition:none; } }