/* Estilos del footer XTravel (complementarios a Tailwind) */
html, body { margin:0; padding:0; overflow-x:hidden; }
img, svg, video, canvas { max-width:100%; height:auto; }
:root { --safe-vw: calc(100vw - (100vw - 100%)); }

.footer-bleed {
	position: relative;
	width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	background: #000;
	color: #fff;
	box-sizing: border-box;
	overflow-x: hidden;
}
.footer-bleed, .footer-bleed * { box-sizing: border-box; }

/* Grid base helpers */
.footer-grid { display: grid; }
.sec-company { grid-area: company; }
.sec-about { grid-area: about; }
.sec-tours { grid-area: tours; }
.sec-contact { grid-area: contact; }
.sec-booking { grid-area: booking; }

.input-contrast {
	background: #fff;
	color: #0f172a; /* slate-900 */
	border: 1px solid rgba(148,163,184,.45); /* slate-400 */
}
.input-contrast::placeholder { color:#64748b; /* slate-500 */ }
.input-contrast:focus {
	outline: none;
	border-color: #60a5fa; /* blue-400 */
	box-shadow: 0 0 0 3px rgba(59,130,246,.35); /* blue-500 */
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem .75rem;
	border-radius: .5rem;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.12);
	font-size: .875rem; /* text-sm */
}

/* Variante compacta para móviles */
.chip-sm {
	padding: .375rem .6rem; /* ligeramente más pequeño */
	font-size: .8125rem; /* ~ text-sm reducido */
}
@media (min-width: 768px) {
	.chip-sm {
		padding: .5rem .75rem; /* normal en md+ */
		font-size: .875rem;
	}
}

.soft-divider {
	height: 1px;
	width: 100%;
	background: linear-gradient(90deg,
							rgba(255,255,255,0) 0%,
							rgba(255,255,255,.18) 50%,
							rgba(255,255,255,0) 100%);
}

/* Icono TripAdvisor */
.tripadvisor-icon {
	filter: invert(44%) sepia(92%) saturate(508%) hue-rotate(92deg) brightness(95%) contrast(94%);
	transition: filter .2s, opacity .2s;
}
.group:hover .tripadvisor-icon {
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(110%) contrast(100%);
}

/* Garantías verticales */
.guarantee-grid { align-items: stretch; }
.guarantee { min-height: 64px; }
.guarantee i { line-height: 1; }
.guarantee-label { font-weight: 700; letter-spacing: .01em; }

/* Badge "Nuevo" */
.badge-new { line-height: 1; }

/* --- Footer Tablet (<= 768px) --- */
@media (max-width: 768px) {
	.footer-bleed { font-size: 15px; }
	.footer-grid { grid-template-columns: 1fr 1fr; grid-template-areas:
		"company company"
		"about tours"
		"contact booking";
		gap: 1.25rem; padding-left: 1rem; padding-right: 1rem; }

	/* Tipografías e íconos algo más pequeños que desktop */
	.footer-bleed h4 { font-size: 1rem; }
	.footer-bleed p, .footer-bleed li, .footer-bleed a { font-size: .9rem; }
	.brand-name { font-size: 1.05rem; }
	.brand-logo { width: 2.5rem; height: 2.5rem; }
	.social-btn { width: 2.25rem; height: 2.25rem; }
	.social-icon { font-size: 1.05rem !important; }
	/* Menús y badges */
	.sec-about ul li a, .sec-tours ul li a { font-size: .92rem; }
	.sec-about i, .sec-tours i { font-size: 1rem; }
	.badge-new { font-size: .625rem; padding: .15rem .35rem; }
	/* Form WhatsApp en una fila */
	.contact-form { flex-direction: row !important; align-items: center; gap: .5rem; }
	.contact-form input { flex: 1 1 auto; min-width: 0; }
	.contact-form button { flex: 0 0 auto; white-space: nowrap; }
}

/* --- Footer Mobile Minimal (<= 640px) --- */
@media (max-width: 640px) {
		.footer-bleed { font-size: 13.5px; }
		.footer-grid { grid-template-columns: 1fr 1fr; grid-template-areas:
			"company company"
			"about tours"
			"contact contact"
			"booking booking";
			gap: 1rem; padding-left: .75rem; padding-right: .75rem; }

	/* Títulos y textos más compactos */
	.footer-bleed h4 { font-size: .9rem; letter-spacing: .02em; }
	.footer-bleed p, .footer-bleed li, .footer-bleed a { font-size: .78rem; }
	.footer-bleed .text-sm { font-size: .75rem; }
	.footer-bleed .text-xs { font-size: .68rem; }

	/* Logo y marca */
	.brand-logo { width: 2.1rem; height: 2.1rem; border-radius: .5rem; }
	.brand-logo-img { padding: .2rem; }
	.brand-name { font-size: .95rem; }

	/* Chips más pequeñas */
	.chip { gap: .3rem; padding: .28rem .42rem; border-radius: .45rem; font-size: .7rem; }
	.chip i { font-size: .875rem; }
	.chip-sm { padding: .28rem .42rem; font-size: .68rem; }

		/* Garantías */
		.guarantee { min-height: 56px; padding-top: .5rem; padding-bottom: .5rem; }
		.guarantee i { font-size: 1rem !important; }
		.guarantee-label { font-size: .75rem; margin-top: .25rem; }

	/* Social buttons e íconos */
	.social-row { gap: .45rem; }
	.social-btn { width: 2rem; height: 2rem; }
	.social-icon { font-size: .95rem !important; }
	.tripadvisor-icon { width: 17px; height: 17px; }

	/* Formularios */
	.contact-form input { padding: .4rem .65rem; font-size: .76rem; }
	.contact-form button { padding: .4rem .6rem; font-size: .76rem; }

	/* Paddings verticales más contenidos */
	.footer-bleed > div.relative { padding-top: 1.5rem; padding-bottom: 1.5rem; }
	.soft-divider { margin: 1rem 0; }

	/* Zona legal */
	.legal { gap: .6rem; }
	.legal a, .legal p { font-size: .78rem; }
	/* Menús y badges */
	.sec-about ul { gap: .4rem; }
	.sec-tours ul { gap: .4rem; }
	.sec-about ul li a, .sec-tours ul li a { font-size: .75rem; }
	.sec-about i, .sec-tours i { font-size: .9rem; }
	.badge-new { font-size: .6rem; padding: .12rem .3rem; }
}

/* --- Extra compact (<= 480px) --- */
@media (max-width: 480px) {
		.footer-bleed { font-size: 12.5px; }
		.footer-grid { grid-template-columns: 1fr 1fr; grid-template-areas:
			"company company"
			"about tours"
			"contact contact"
			"booking booking"; gap: .85rem; }
		.brand-logo { width: 1.9rem; height: 1.9rem; }
		.brand-name { font-size: .9rem; }
		.chip { font-size: .64rem; padding: .26rem .38rem; }
		.chip-sm { font-size: .6rem; padding: .22rem .34rem; }
		.social-btn { width: 1.9rem; height: 1.9rem; }
		.social-icon { font-size: .9rem !important; }
		.tripadvisor-icon { width: 16px; height: 16px; }
		.footer-bleed h4 { font-size: .85rem; }

	/* Garantías compactas */
	.guarantee { min-height: 48px; }
	.guarantee i { font-size: .95rem !important; }
	.guarantee-label { font-size: .7rem; }
	/* Menús y badges más compactos */
	.sec-about ul li a, .sec-tours ul li a { font-size: .7rem; }
	.sec-about i, .sec-tours i { font-size: .85rem; }
	.badge-new { font-size: .55rem; padding: .1rem .28rem; }
	/* WhatsApp ultra compacto */
	.contact-form { gap: .45rem; }
	.contact-form input { padding: .36rem .55rem; font-size: .72rem; }
	.contact-form button { padding: .36rem .5rem; font-size: .72rem; }
}

/* --- Layout intermedio (769px–1023px) --- */
@media (min-width: 769px) and (max-width: 1023.98px) {
	/* Estructura en 3 columnas y áreas para mantener orden sin depender de utilidades externas */
	.footer-grid {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-areas:
			"company company company"
			"about   tours    contact"
			"booking booking  booking";
		gap: 1.5rem;
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	/* Tamaños ligeramente mayores que tablet */
	.footer-bleed h4 { font-size: 1.05rem; }
	.footer-bleed p, .footer-bleed li, .footer-bleed a { font-size: .95rem; }
	.brand-name { font-size: 1.15rem; }
	.brand-logo { width: 2.75rem; height: 2.75rem; }
	.social-btn { width: 2.5rem; height: 2.5rem; }
	.social-icon { font-size: 1.1rem !important; }
}

/* --- Desktop defaults (>= 1024px) --- */
@media (min-width: 1024px) {
	/* Forzamos layout de 5 columnas en desktop de forma explícita y anulamos áreas */
	.footer-grid {
		gap: 3rem;
		grid-template-columns: 1.4fr 1.1fr 1.1fr 1fr 1fr; /* company más ancha */
		grid-template-areas: none; /* evitar arrastre de áreas móviles */
	}
	/* Anular cualquier grid-area nombrada en desktop */
	.sec-company, .sec-about, .sec-tours, .sec-contact, .sec-booking { grid-area: auto; }

	/* Tipografías normales en desktop */
	.footer-bleed h4 { font-size: 1.125rem; }
	.footer-bleed p, .footer-bleed li, .footer-bleed a { font-size: .9375rem; }
	.brand-name { font-size: 1.35rem; }
	.brand-logo { width: 3rem; height: 3rem; }

	/* Chips en tamaño cómodo */
	.chip { font-size: .875rem; padding: .5rem .75rem; }
	.chip-sm { font-size: .8125rem; padding: .45rem .65rem; }
	.guarantee { min-height: 68px; }
	.guarantee i { font-size: 1.125rem; }
	.guarantee-label { font-size: .875rem; }

	/* Botones sociales e íconos */
	.social-btn { width: 2.75rem; height: 2.75rem; }
	.social-icon { font-size: 1.25rem !important; }
	.tripadvisor-icon { width: 22px; height: 22px; }

	/* Formulario WhatsApp */
	.contact-form { gap: .75rem; }
	.contact-form input { font-size: .9rem; padding: .6rem .85rem; }
	.contact-form button { font-size: .9rem; padding: .6rem .9rem; }

	/* Zona legal */
	.legal { gap: 1rem; }
}