/* Rejilla de tours + carrito/checkout tematizados como "billete de viaje".
   Misma paleta real del sitio que el calendario (ver frontend.css). */

.ttb-tours-grid,
.ttb-cart-header,
.ttb-reassurance,
.ttb-boarding-pass-wrap,
.ttb-checkout-trust,
.ttb-thankyou-recap {
	--tg-indigo-ink: var(--indigo-ink, #171B45);
	--tg-terracota: var(--terracota, #E0643B);
	--tg-terracota-deep: var(--terracota-deep, #C24E29);
	--tg-oro: var(--oro, #F7CD47);
	--tg-papel: var(--papel, #FBF6EC);
	--tg-tinta-suave: var(--tinta-suave, #4A4C68);
	font-family: var(--sans, "Hanken Grotesk", system-ui, sans-serif);
}

/* ---------- Rejilla de tours ([ttb_tours_grid]) ---------- */

.ttb-tours-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.5rem;
	margin: 2rem 0;
}

.ttb-tour-card {
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(23,27,69,.06);
	display: flex;
	flex-direction: column;
	transition: transform .18s ease, box-shadow .18s ease;
}
.ttb-tour-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(23,27,69,.14);
}

.ttb-card-media { position: relative; aspect-ratio: 4/3; overflow: hidden; }
/* !important porque WordPress mete un style="width:...;height:...%" inline
   en la imagen (calculado a partir de sus dimensiones originales), que si no
   se pisa deja la foto aplastada dentro de la tarjeta 4:3. */
.ttb-card-media img.ttb-card-img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
	margin: 0;
}
.ttb-card-badge {
	position: absolute;
	top: .7rem;
	left: .7rem;
	background: var(--tg-indigo-ink);
	color: #fff;
	font-size: .72rem;
	font-weight: 600;
	padding: .3em .7em;
	border-radius: 999px;
}

.ttb-card-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.ttb-card-title {
	font-family: var(--display, "Bricolage Grotesque", sans-serif);
	font-size: 1.15rem;
	margin: 0;
	color: var(--tg-indigo-ink);
}
.ttb-card-excerpt { font-size: .88rem; color: var(--tg-tinta-suave); margin: 0; line-height: 1.45; flex: 1; }

.ttb-card-meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	font-size: .82rem;
	color: var(--tg-tinta-suave);
	padding-top: .4rem;
	border-top: 1px dashed rgba(23,27,69,.12);
}
.ttb-card-price { font-family: var(--display, "Bricolage Grotesque", sans-serif); font-weight: 700; font-size: 1.05rem; color: var(--tg-indigo-ink); }
.ttb-card-price small { font-weight: 400; font-size: .7rem; color: var(--tg-tinta-suave); }

.ttb-card-cta,
a.ttb-card-cta.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4em;
	background: var(--tg-terracota) !important;
	color: #fff !important;
	text-decoration: none;
	border-radius: 999px;
	padding: .75em 1.1em;
	font-weight: 600;
	font-size: .92rem;
	margin-top: .3rem;
	transition: background-color .15s ease, transform .1s ease;
}
.ttb-card-cta:hover { background: var(--tg-terracota-deep) !important; }
.ttb-card-cta:active { transform: scale(.97); }
.ttb-card-cta span { transition: transform .15s ease; }
.ttb-card-cta:hover span { transform: translateX(3px); }

/* ---------- Carrito ---------- */

.ttb-cart-header { margin-bottom: 1.5rem; }
.ttb-cart-header h2 {
	font-family: var(--display, "Bricolage Grotesque", sans-serif);
	color: var(--tg-indigo-ink);
	margin: 0 0 .3rem;
}
.ttb-cart-header p { color: var(--tg-tinta-suave); margin: 0; }

.ttb-boarding-pill {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	margin-left: .6em;
	background: var(--tg-papel);
	color: var(--tg-indigo-ink);
	border: 1px dashed var(--tg-terracota);
	border-radius: 999px;
	padding: .2em .7em;
	font-size: .78rem;
	font-weight: 600;
	vertical-align: middle;
}

.ttb-reassurance {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.4rem;
	align-items: center;
	background: var(--tg-papel);
	border-radius: 12px;
	padding: 1rem 1.2rem;
	margin: 1.2rem 0;
	font-size: .86rem;
	color: var(--tg-indigo-ink);
}
.ttb-reassurance a { color: #178a44; font-weight: 600; text-decoration: none; margin-left: auto; }
.ttb-reassurance a:hover { text-decoration: underline; }

/* ---------- Billete de viaje (checkout) ---------- */

.ttb-boarding-pass-wrap { margin: 0 0 1.8rem; display: flex; flex-direction: column; gap: 1rem; }

.ttb-boarding-pass {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: stretch;
	background: var(--tg-indigo-ink);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(23,27,69,.18);
	color: #fff;
}

.ttb-bp-stub {
	padding: 1.1rem 1.3rem;
	display: flex;
	flex-direction: column;
	gap: .3rem;
	justify-content: center;
	min-width: 0;
}
.ttb-bp-eyebrow { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tg-oro); font-weight: 700; }
.ttb-bp-title { font-family: var(--display, "Bricolage Grotesque", sans-serif); font-size: 1.05rem; line-height: 1.25; }
.ttb-bp-duration { font-size: .8rem; opacity: .75; }

.ttb-bp-perforation {
	width: 0;
	border-left: 2px dashed rgba(255,255,255,.35);
	position: relative;
}
.ttb-bp-perforation::before, .ttb-bp-perforation::after {
	content: "";
	position: absolute;
	left: -9px;
	width: 18px;
	height: 18px;
	background: var(--tg-papel);
	border-radius: 50%;
}
.ttb-bp-perforation::before { top: -9px; }
.ttb-bp-perforation::after { bottom: -9px; }

.ttb-bp-ticket {
	padding: 1.1rem 1.4rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .15rem;
	background: rgba(255,255,255,.06);
	min-width: 140px;
}
.ttb-bp-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tg-oro); }
.ttb-bp-date { font-family: var(--display, "Bricolage Grotesque", sans-serif); font-size: 1.15rem; }
.ttb-bp-weekday { font-size: .78rem; opacity: .75; text-transform: capitalize; }
.ttb-bp-pax { font-size: .8rem; margin-top: .3rem; }

@media (max-width: 560px) {
	.ttb-boarding-pass { grid-template-columns: 1fr; }
	.ttb-bp-perforation { display: none; }
	.ttb-bp-ticket { border-top: 1px dashed rgba(255,255,255,.25); }
}

.ttb-checkout-trust {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem 1.4rem;
	margin: 1rem 0;
	padding: .9rem 1rem;
	background: var(--tg-papel);
	border-radius: 12px;
	font-size: .84rem;
	color: var(--tg-indigo-ink);
}

/* ---------- Gracias por tu pedido ---------- */

.ttb-thankyou-recap {
	background: var(--tg-papel);
	border-radius: 16px;
	padding: 1.4rem 1.5rem;
	margin: 1.5rem 0;
}
.ttb-thankyou-recap h2 {
	font-family: var(--display, "Bricolage Grotesque", sans-serif);
	color: var(--tg-indigo-ink);
	margin: 0 0 1rem;
}
.ttb-thankyou-item {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .6rem 0;
	border-top: 1px dashed rgba(23,27,69,.15);
	color: var(--tg-indigo-ink);
	font-size: .92rem;
}
.ttb-thankyou-recap .ttb-whatsapp-fallback {
	display: inline-block;
	margin-top: 1rem;
	color: #178a44;
	font-weight: 600;
	text-decoration: none;
}
.ttb-thankyou-recap .ttb-whatsapp-fallback:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
	.ttb-tour-card, .ttb-card-cta, .ttb-card-cta span { transition: none !important; }
}