/* =========================================================================
   Utihotel — responsive.css
   Media queries (mobile-first overrides para tablet/mobile).
   ========================================================================= */

/* Laptop */
@media (max-width: 1600px) {
	.hero-slide .hero__inner { padding-top: 227px; }
}

/* Tablet */
@media (max-width: 992px) {
	:root { --container-pad: 1rem; }
	.section { padding-block: var(--space-xl); }
	/* Reducir el padding lateral del header (Figma usa 100px en desktop) */
	.site-header__inner { padding: 16px 40px; }
	/* WhatsApp alineado con el botón Contacto */
	.whatsapp-float { right: 40px; }
	/* Hero alineado con el header */
	.hero__inner { padding: 0 40px; }
	.hero.hero-slider { --hero-h: 78vh; }
	.hero-slide .hero__inner { padding-top: 180px; }
	.hero-swiper .swiper-pagination { left: 40px !important; }
	.container--wide { padding-inline: 40px; }
}

/* Mobile: menú colapsable */
@media (max-width: 768px) {
	.site-header__toggle { display: block; }
	/* Logo a la izquierda, ícono a la derecha (de esquina a esquina) */
	.site-header__inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; }
	/* Logo en móvil */
	.site-header__brand .custom-logo { width: 160px; }
	/* El ícono pegado al borde derecho */
	.site-header__actions { gap: 0; justify-self: auto; }
	.site-header__cta { display: none; } /* el CTA va dentro del panel */
	.whatsapp-float { right: 20px; }
	.container--wide { padding-inline: 20px; }

	/* Al abrir el menú, el header de la página se oculta (el panel trae su propio logo + cerrar) */
	body.is-menu-open .site-header { z-index: 210; background: transparent; border-bottom-color: transparent; box-shadow: none; }
	body.is-menu-open .site-header__brand,
	body.is-menu-open .site-header__actions { visibility: hidden; }

	/* Panel lateral que se desliza desde la derecha */
	.site-header__nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		width: 86%;
		max-width: 340px;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background-color: var(--color-bg);
		box-shadow: -8px 0 28px rgba(0, 0, 0, 0.18);
		padding: 0 24px 28px;
		overflow-y: auto;
		z-index: 120;
		transform: translateX(100%);
		transition: transform 0.3s ease;
	}
	.site-header__nav.is-open { transform: translateX(0); }

	/* Cabecera del panel: logo (izq) + cerrar (der) */
	.site-header__drawer-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding: 18px 0;
		margin-bottom: 8px;
		border-bottom: 1px solid var(--color-border);
		position: sticky;
		top: 0;
		background: var(--color-bg);
	}
	.site-header__drawer-head .custom-logo { width: 150px; height: auto; }
	.site-header__drawer-close {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		border: 0;
		border-radius: 50%;
		background: #f0f0f0;
		color: #111;
		cursor: pointer;
	}
	.site-header__drawer-close:hover { background: #e4e4e4; }

	/* CTA "Contáctanos" dentro del panel, abajo */
	.site-header__drawer-cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-top: auto;
		padding: 14px 20px;
	}

	.nav-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}
	.nav-menu li { border-bottom: 1px solid var(--color-border); }
	.nav-menu a { display: block; padding: 0.85rem 0; }

	/* Hamburger -> X cuando abierto */
	.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar { background-color: transparent; }
	.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar::before { top: 0; transform: rotate(45deg); }
	.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar::after { top: 0; transform: rotate(-45deg); }

	#quienes-somos { padding-block: 64px; }
	.quienes__top { grid-template-columns: 1fr; gap: var(--space-lg); }
	.quienes__media { height: 300px; }
	.quienes__valores { grid-template-columns: 1fr; gap: var(--space-md); }
	.quienes__valor { padding: 24px; }
	.quienes__quote { font-size: 22px; margin-top: 48px; }
	/* Hero carousel: contenido arriba con espacio + imagen visible */
	.hero { min-height: 60vh; }
	.hero.hero-slider { --hero-h: 62vh; }
	.hero-slide { align-items: flex-start; }
	/* Degradado solo en la parte superior (detrás del texto); el resto deja ver la imagen */
	.hero-slide .hero__overlay {
		opacity: 1 !important;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0) 75%);
	}
	.hero__inner { padding: 0 20px; }
	.hero-slide .hero__inner { padding-top: 200px; padding-bottom: 0; }
	.hero__content { max-width: 100%; }
	.hero__title { font-size: 28px; line-height: 1.15; max-width: none; margin-bottom: 12px; }
	.hero__subtitle,
	.hero__text { font-size: 14px; }
	.hero__text img { max-width: 150px; margin-bottom: 10px; }
	.hero-swiper .swiper-pagination { left: 20px !important; bottom: 24px !important; }
	.site-footer__inner { flex-direction: column; }
}

/* Small mobile */
@media (max-width: 480px) {
	.section { padding-block: var(--space-lg); }
	.section__placeholder { padding: var(--space-lg); }
	.btn { width: 100%; }
	/* El CTA del header se mantiene compacto, no a todo el ancho */
	.site-header__cta { width: auto; padding: 0.45rem 0.85rem; }
	.catalogo__cta-text { font-size: 18px; }
	.hero.hero-slider { --hero-h: 58vh; }
	.hero__title { font-size: 26px; }
	.hero-slide .hero__inner { padding-top: 200px; }
	.hero-swiper .swiper-pagination { bottom: 22px !important; }
}

/* Productos */
@media (max-width: 992px) {
	#catalogo { padding-block: 64px; }
	.productos-grid { grid-template-columns: repeat(2, 1fr); justify-content: stretch; }
	.product-modal__tab { font-size: 18px; }
	.product-modal__body { padding: 18px 22px 24px; }
	.product-carousel__prev { left: -30px; }
	.product-carousel__next { right: -30px; }
}
@media (max-width: 992px) {
	#browne.browne { padding-block: 64px; }
	.browne__inner { flex-direction: column; gap: 32px; }
	.browne__content { gap: 24px; }
	.browne__media { width: 100%; height: 360px; }
	.representantes { padding-block: 56px 64px; }
	.representantes > .container { gap: 40px; }
	.representantes__logos { gap: 32px; }
	.representantes__logo { height: 46px; }
	.transporte { padding-block: 64px; }
	.transporte__card { flex-direction: column; min-height: 0; }
	.transporte__media { width: 100%; }
	.transporte__img { min-height: 240px; height: 240px; }
	.transporte__content { padding: 40px; gap: 24px; }
	.contacto__grid { flex-direction: column; }
	.contacto__form-card { padding: 28px; }
}
@media (max-width: 768px) {
	.contacto__cards { flex-direction: column; gap: 16px; }
	.contacto__info { gap: 18px; }
	.contacto__title { font-size: 32px; }
	.contacto__head { margin-bottom: 28px; }
	.contacto__card { padding: 18px; }
	.contacto__card-label { font-size: 20px; }
	.contacto__card-value { font-size: 16px; }
	.contacto__map { min-height: 220px; }
	.contacto__form-card { padding: 22px; }
	.contacto__form { margin-top: 14px; gap: 16px; }
	.contacto__input { font-size: 16px; padding: 11px 14px; }
	.contacto__textarea { min-height: 150px; }
}
@media (max-width: 768px) {
	.productos-grid { grid-template-columns: 1fr; }
	/* Flechas debajo del carousel para no tapar las cards */
	.product-carousel-wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
	.product-carousel { order: -1; flex: 0 0 100%; width: 100%; }
	.product-carousel__nav { position: static; top: auto; transform: none; margin: 16px 8px 0; }
	.product-carousel__nav:hover { transform: scale(1.12); }
	.browne__title { font-size: 32px; }
	.browne__media { height: 260px; }
	/* Banner Transporte: título y descripción en móvil */
	.transporte__content { padding: 28px 24px; gap: 16px; }
	.transporte__title { font-size: 22px; }
	.transporte__text { font-size: 16px; max-width: none; line-height: 1.4; }
	.product-modal__top { grid-template-columns: 1fr; height: auto; }
	.product-modal__thumbs { flex-direction: row; height: auto; }
	.product-modal__thumb { flex: 0 0 110px; height: 130px; }
	.product-modal__main { aspect-ratio: 4 / 3; height: auto; }
	.product-modal__body { padding: 20px; }
	.product-modal__tab { font-size: 18px; }
	.product-modal__panel { font-size: 15px; }
	.product-modal__panel[data-panel="info"] { font-size: 15px; }
	.product-modal__panel[data-panel="detalles"] { column-count: 1; }
}

/* =========================================================================
   HM-24 — Pasada responsive final (títulos, espaciados, sin desborde)
   ========================================================================= */
@media (max-width: 992px) {
	#equipos-calientes,
	#ofertas { padding-block: 64px; }
	.contacto { padding-block: 0 64px; }
}
@media (max-width: 768px) {
	.section__title { font-size: 32px; }
	.representantes__title { font-size: 32px; }
	.contacto__form-card { padding: 24px; }
	/* El footer apila y centra sus filas */
	.site-footer__inner { padding-block: 48px 32px; gap: 24px; align-items: center; text-align: center; }
	.site-footer__top { flex-direction: column; align-items: center; gap: 20px; width: 100%; }
	.site-footer__logo,
	.site-footer .custom-logo { width: 140px; height: auto; }
	.footer-menu { flex-direction: column; align-items: center; gap: 14px; }
	.footer-menu a { font-size: 15px; }
	.site-footer__social { justify-content: center; gap: 10px; }
	.site-footer__bottom { flex-direction: column; align-items: center; gap: 14px; padding-top: 24px; }
	.site-footer__copy { font-size: 13px; text-align: center; }
}
@media (max-width: 480px) {
	.section__title,
	.contacto__title,
	.browne__title,
	.representantes__title { font-size: 26px; }
	.section__eyebrow { font-size: 0.75rem; }
	/* Carrusel de equipos: flechas dentro para no desbordar en pantallas chicas */
	.product-carousel__prev { left: 0; }
	.product-carousel__next { right: 0; }
}