/* 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; }
}

/* ========================================
   FOOTER ATV - Estilos minimalistas
   ======================================== */

/* Paleta de colores:
   Rojo vino: #AA535E
   Verde oscuro: #486D4B
   Amarillo mostaza: #EAB05F
   Negro: #0A0505
   Naranja tierra: #D38856
   Gris piedra: #797C72
*/

.footer-atv {
    background: linear-gradient(135deg, #f9fafb 0%, #e5e7eb 100%);
    color: #0A0505;
    padding: 3rem 0 1.5rem;
    border-top: 3px solid #486D4B;
}

.footer-atv-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Grid responsive */
.footer-atv-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Mobile: 2 columnas para Tours y Sobre Nosotros */
@media (min-width: 480px) {
    .footer-atv-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
    
    .footer-atv-intro {
        grid-column: 1 / -1;
    }
    
    .footer-atv-connect {
        grid-column: 1 / -1;
    }
}

@media (min-width: 768px) {
    .footer-atv-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2.5rem;
    }
    
    .footer-atv-intro,
    .footer-atv-connect {
        grid-column: auto;
    }
}

/* Tamaños reducidos en móvil */
@media (max-width: 767px) {
    .footer-atv {
        padding: 2rem 0 1rem;
    }
    
    .footer-atv-container {
        padding: 0 1rem;
    }
    
    .footer-atv-grid {
        gap: 1.25rem;
    }
    
    .footer-atv-section {
        gap: 0.625rem;
    }
    
    .footer-atv-section p {
        font-size: 0.8125rem;
        line-height: 1.5;
    }
    
    .footer-atv-title {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
        padding-bottom: 0.375rem;
    }
    
    .footer-atv-icon {
        width: 16px;
        height: 16px;
    }
    
    .footer-atv-list {
        gap: 0.5rem;
    }
    
    .footer-atv-list li {
        font-size: 0.8125rem;
    }
    
    .footer-atv-badge {
        font-size: 0.5625rem;
        padding: 0.1rem 0.375rem;
    }
    
    .footer-atv-whatsapp-label {
        font-size: 0.8125rem;
        margin-bottom: 0.5rem;
    }
    
    .footer-atv-whatsapp-label img {
        width: 16px;
        height: 16px;
    }
    
    .footer-atv-input {
        padding: 0.5rem 0.625rem;
        font-size: 0.8125rem;
    }
    
    .footer-atv-btn {
        padding: 0.5rem 0.625rem;
    }
    
    .footer-atv-btn img {
        width: 20px;
        height: 20px;
    }
    
    .footer-atv-social {
        gap: 0.625rem;
    }
    
    .footer-atv-social a {
        width: 32px;
        height: 32px;
    }
    
    .footer-atv-social img {
        width: 18px;
        height: 18px;
    }
    
    .footer-atv-bottom {
        margin-top: 1.5rem;
        padding-top: 1rem;
        font-size: 0.6875rem;
    }
    
    .footer-atv-bottom-links {
        gap: 0.875rem;
        flex-wrap: wrap;
    }
}

/* Ajustes adicionales para pantallas muy pequeñas */
@media (max-width: 479px) {
    .footer-atv {
        padding: 1.5rem 0 0.75rem;
    }
    
    .footer-atv-grid {
        gap: 1rem;
    }
    
    .footer-atv-section p {
        font-size: 0.75rem;
    }
    
    .footer-atv-title {
        font-size: 0.85rem;
    }
    
    .footer-atv-list li {
        font-size: 0.75rem;
    }
}

/* Sección */
.footer-atv-section {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.footer-atv-section p {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #0A0505;
}

/* Títulos minimalistas */
.footer-atv-title {
    font-size: 1rem;
    font-weight: 700;
    color: #486D4B;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #EAB05F;
}

.footer-atv-icon {
    width: 20px;
    height: 20px;
    filter: brightness(0) saturate(100%) invert(39%) sepia(12%) saturate(952%) hue-rotate(63deg) brightness(95%) contrast(88%);
}

/* Enlaces */
.footer-atv-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.footer-atv-list li {
    font-size: 0.875rem;
}

.footer-atv-list a {
    color: #0A0505;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0;
}

.footer-atv-list a:hover {
    color: #AA535E;
    transform: translateX(4px);
}

/* Badges minimalistas */
.footer-atv-badge {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 3px;
    margin-left: 0.375rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.footer-atv-badge-red {
    background: #fef2f2;
    color: #AA535E;
    border: 1px solid #AA535E;
}

.footer-atv-badge-green {
    background: #f0fdf4;
    color: #486D4B;
    border: 1px solid #486D4B;
}

.footer-atv-badge-indigo {
    background: #eef2ff;
    color: #6366f1;
    border: 1px solid #6366f1;
}

/* Formulario WhatsApp minimalista */
.footer-atv-whatsapp-label {
    font-size: 0.875rem;
    margin-bottom: 0.625rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #0A0505;
    font-weight: 500;
}

.footer-atv-whatsapp-label img {
    width: 18px;
    height: 18px;
}

.footer-atv-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.footer-atv-input {
    flex: 1;
    padding: 0.625rem 0.875rem;
    border: 1.5px solid #797C72;
    border-radius: 6px;
    color: #0A0505;
    font-size: 0.875rem;
    background: white;
    transition: all 0.2s ease;
}

.footer-atv-input::placeholder {
    color: #797C72;
}

.footer-atv-input:focus {
    outline: none;
    border-color: #486D4B;
    box-shadow: 0 0 0 3px rgba(72, 109, 75, 0.1);
}

.footer-atv-btn {
    background: linear-gradient(135deg, #486D4B 0%, #3a5a3d 100%);
    padding: 0.625rem 0.875rem;
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(72, 109, 75, 0.2);
}

.footer-atv-btn:hover {
    background: linear-gradient(135deg, #3a5a3d 0%, #2d4730 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(72, 109, 75, 0.3);
}

.footer-atv-btn:active {
    transform: translateY(0);
}

.footer-atv-btn img {
    width: 22px;
    height: 22px;
}

/* Redes sociales minimalistas */
.footer-atv-social {
    display: flex;
    gap: 0.75rem;
}

.footer-atv-social a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: white;
    border: 1.5px solid #797C72;
    transition: all 0.2s ease;
}

.footer-atv-social a:hover {
    border-color: #486D4B;
    background: #f0fdf4;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(72, 109, 75, 0.15);
}

.footer-atv-social img {
    width: 20px;
    height: 20px;
}

/* Footer bottom minimalista */
.footer-atv-bottom {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #d1d5db;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 0.75rem;
    color: #797C72;
    align-items: center;
    text-align: center;
}

@media (min-width: 768px) {
    .footer-atv-bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }
}

.footer-atv-bottom-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: center;
}

@media (min-width: 768px) {
    .footer-atv-bottom-links {
        justify-content: flex-start;
    }
}

.footer-atv-bottom-links a {
    color: #0A0505;
    text-decoration: none;
    transition: color 0.2s ease;
    font-weight: 500;
}

.footer-atv-bottom-links a:hover {
    color: #AA535E;
}

.footer-atv-copyright {
    color: #797C72;
}

.footer-atv-copyright a {
    color: #AA535E;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.footer-atv-copyright a:hover {
    color: #486D4B;
}

/* Animaciones suaves */
@media (prefers-reduced-motion: no-preference) {
    .footer-atv-list a,
    .footer-atv-social a,
    .footer-atv-btn {
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
}