/* Planazo Home — filas por ciudad. v0.4.3
   La sección sale del contenedor del tema y ocupa todo el ancho de la pantalla, con el mismo margen a ambos lados. */
.phf {
	--phf-accent: #1433d6;
	--phf-yellow: #ffce00; /* mismo amarillo que las líneas del tema */
	--phf-ink: #121833;
	--phf-muted: #5a6178;
	--phf-line: #dfe2ec;
	--phf-bg: #f6f7fb;
	--phf-card: 250px;
	--phf-gap: 22px;
	--phf-side: clamp(16px, 5vw, 80px);
	--phf-ease: cubic-bezier(.22, .61, .36, 1);
	position: relative;
	/* --phf-vw es el ancho real visible (sin la barra de scroll); lo calcula el JS. */
	width: var(--phf-vw, 100vw);
	max-width: var(--phf-vw, 100vw);
	left: 50%;
	right: 50%;
	margin: 56px calc(var(--phf-vw, 100vw) / -2) 0 calc(var(--phf-vw, 100vw) / -2) !important;
	padding: 48px 0 56px !important;
	background: var(--phf-bg);
	color: var(--phf-ink);
	box-sizing: border-box;
	overflow: hidden;
}
.phf *, .phf *::before, .phf *::after { box-sizing: border-box; }

/* Blindaje contra estilos genéricos del tema */
.phf .phf__card > span, .phf .phf__more > span, .phf .phf__rowtitle > span { position: static !important; float: none !important; }
.phf .phf__card > .phf__img { position: relative !important; float: none !important; }

/* ---------- Encabezados ---------- */
.phf .phf__head,
.phf .phf__rowhead,
.phf .phf__progress {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding: 0 var(--phf-side);
}
.phf .phf__head { margin-bottom: 40px; }
/* Título de sección: un escalón debajo del título principal del tema (42px / 500).
   Peso 600 para que no compita con el principal; tamaño y peso deciden la jerarquía. */
.phf .phf__title {
	position: relative; display: inline-block;
	margin: 0 !important; padding: 0 0 17px !important; /* 12px de aire + 5px de línea */
	font-size: 26px !important; font-weight: 600 !important; line-height: 1.25 !important;
	color: var(--phf-ink) !important; letter-spacing: -0.2px; text-align: left;
}
/* Misma línea que usa el tema en sus títulos: 50×5px, puntas redondas, amarillo con leve degradé */
.phf .phf__underline {
	position: absolute !important; left: 0; bottom: 0; height: 5px; width: 50px; border-radius: 9999px;
	background-color: var(--phf-yellow);
	background-image: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.2));
	transform-origin: left center;
}
.phf .phf__sub { margin: 12px 0 0 !important; padding: 0; font-size: 15px; line-height: 1.5; color: var(--phf-muted); }
.phf .phf__total { font-weight: 700; color: var(--phf-ink); font-variant-numeric: tabular-nums; }

.phf .phf__row { margin: 0 0 40px; }
.phf .phf__row:last-child { margin-bottom: 0; }
.phf .phf__rowhead { display: flex !important; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.phf .phf__rowtitle { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex: 1 1 auto; }
.phf .phf__rowtitle h3 {
	margin: 0 !important; padding: 0 !important; white-space: nowrap;
	font-size: 20px !important; font-weight: 600 !important; line-height: 1.3 !important; color: var(--phf-ink) !important;
}
.phf .phf__count { display: inline !important; font-size: 14px; line-height: 1.3; color: var(--phf-muted); white-space: nowrap; }
.phf .phf__rowactions { display: flex !important; align-items: center; gap: 10px; flex: 0 0 auto; }
.phf .phf__all {
	display: inline-flex !important; align-items: center; gap: 4px; margin-right: 6px; white-space: nowrap;
	font-size: 14px; font-weight: 600; line-height: 1; color: var(--phf-accent) !important; text-decoration: none !important;
}
.phf .phf__all svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--phf-ease); }
.phf .phf__all:hover svg { transform: translateX(4px); }

.phf .phf__arrow {
	width: 38px; height: 38px; min-width: 38px; padding: 0 !important; margin: 0;
	border-radius: 999px !important; border: 1px solid var(--phf-line) !important; background: #fff !important;
	display: inline-flex !important; align-items: center; justify-content: center; cursor: pointer; box-shadow: none;
	transition: background-color .2s ease, border-color .2s ease, transform .15s ease, opacity .2s ease, box-shadow .2s ease;
}
.phf .phf__arrow svg { width: 16px; height: 16px; fill: none; stroke: var(--phf-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s ease; }
.phf .phf__arrow:hover:not(:disabled) { background: var(--phf-accent) !important; border-color: var(--phf-accent) !important; box-shadow: 0 6px 14px -4px rgba(20,51,214,.5); }
.phf .phf__arrow:hover:not(:disabled) svg { stroke: #fff; }
.phf .phf__arrow:active:not(:disabled) { transform: scale(.92); }
.phf .phf__arrow:disabled { opacity: .35; cursor: default; }

.phf :focus-visible { outline: 2px solid var(--phf-accent) !important; outline-offset: 2px; }

/* ---------- Carrusel ---------- */
.phf .phf__track {
	--phf-inset: var(--phf-side);
	display: flex !important; flex-wrap: nowrap; gap: var(--phf-gap); overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scroll-padding-left: var(--phf-inset);
	padding: 4px var(--phf-inset) 8px; margin: 0;
	scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.phf .phf__track::-webkit-scrollbar { display: none; }
.phf .phf__track.fade-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 90px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 90px), transparent); }
.phf .phf__track.fade-left.fade-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 60px, #000 calc(100% - 90px), transparent); mask-image: linear-gradient(to right, transparent, #000 60px, #000 calc(100% - 90px), transparent); }
.phf .phf__track.fade-left:not(.fade-right) { -webkit-mask-image: linear-gradient(to right, transparent, #000 60px); mask-image: linear-gradient(to right, transparent, #000 60px); }

/* Arrastrar con el mouse */
.phf .phf__track.can-drag { cursor: grab; }
.phf .phf__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.phf .phf__track.is-dragging a, .phf .phf__track.is-dragging button { pointer-events: none; }
.phf .phf__track img { -webkit-user-drag: none; user-select: none; }

/* Barra de progreso de la fila */
.phf .phf__progress { height: 3px; margin-top: 10px; }
.phf .phf__progress i { display: block; height: 3px; width: 30%; border-radius: 3px; background: var(--phf-accent); opacity: .85; transform-origin: left; transition: transform .15s linear, width .2s ease; }
.phf .phf__progress { background-clip: content-box; background-color: var(--phf-line); border-radius: 3px; }
.phf .phf__progress.is-hidden { visibility: hidden; }

/* ---------- Tarjeta ---------- */
.phf .phf__card {
	position: relative; flex: 0 0 var(--phf-card); min-width: 0; scroll-snap-align: start;
	display: flex !important; flex-direction: column; gap: 2px; color: var(--phf-ink);
	transition: opacity .35s ease, filter .35s ease;
}
.phf .phf__img {
	display: block; height: 210px; border-radius: 14px; overflow: hidden; background: #e9ecf5; margin-bottom: 10px;
	isolation: isolate; box-shadow: 0 1px 2px rgba(18,24,51,.06);
}
.phf .phf__imglink { display: block; width: 100%; height: 100%; position: relative; z-index: 1; transition: transform .35s ease; }
.phf .phf__slides { display: flex !important; height: 100%; transition: transform .45s var(--phf-ease); }
.phf .phf__img img {
	flex: 0 0 100%; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; display: block; border-radius: 0;
	position: static !important;
	transition: opacity .5s ease;
}

/* Efecto al pasar el mouse: el marco queda quieto y la foto hace zoom adentro (como "Explorá las mejores opciones") */
@media (hover: hover) {
	.phf .phf__card:hover .phf__imglink { transform: scale(1.1); }
	.phf .phf__card:hover .phf__name { color: var(--phf-accent) !important; }
}

.phf .phf__name {
	display: block; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--phf-ink) !important; text-decoration: none !important;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .25s ease;
}
.phf .phf__meta { font-size: 13px; line-height: 1.45; color: var(--phf-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phf .phf__price { font-size: 15px; line-height: 1.45; margin-top: 3px; color: var(--phf-muted); }
.phf .phf__price strong { font-weight: 700; color: var(--phf-ink); }

/* Carga de fotos: brillo animado y fundido */
.phf .phf__img::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(100deg, #e9ecf5 30%, #f5f6fb 50%, #e9ecf5 70%);
	background-size: 250% 100%; animation: phf-shimmer 1.3s linear infinite;
}
.phf.phf--js .phf__img:not(.is-loaded) img:first-child { opacity: 0; }
.phf .phf__img.is-loaded::before, .phf .phf__img--empty::before { animation: none; opacity: 0; }
@keyframes phf-shimmer { from { background-position: 150% 0; } to { background-position: -100% 0; } }

.phf .phf__nophoto {
	width: 100%; height: 100%; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
	background: linear-gradient(135deg, #eef1fd, #e3e8fb); color: #6b74a8; font-size: 13px; font-weight: 600;
}
.phf .phf__nophoto svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Badge "Nuevo" */
.phf .phf__badge {
	position: absolute !important; top: 12px; left: 12px; z-index: 3; pointer-events: none;
	padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.92);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	font-size: 12px; font-weight: 700; line-height: 1.2; color: var(--phf-ink); box-shadow: 0 2px 8px rgba(18,24,51,.15);
}
.phf .phf__badge::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #16a34a; vertical-align: 1px; }

/* ---------- Favorito ---------- */
.phf .phf__heart {
	position: absolute !important; top: 6px; right: 6px; z-index: 4;
	width: 40px; height: 40px; padding: 0 !important; margin: 0; border: 0 !important; background: transparent !important; box-shadow: none !important;
	display: inline-flex !important; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%;
}
.phf .phf__heart svg { width: 25px; height: 25px; fill: rgba(18,24,51,.35); stroke: #fff; stroke-width: 2; stroke-linejoin: round; transition: fill .2s ease, transform .2s ease; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.phf .phf__heart:hover svg { transform: scale(1.12); }
.phf .phf__heart.is-on svg { fill: #ef3b5c; }
.phf .phf__heart.is-pop svg { animation: phf-pop .45s cubic-bezier(.3,1.6,.5,1); }
.phf .phf__heart.is-busy { cursor: progress; }
@keyframes phf-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
.phf .phf__spark { position: absolute !important; left: 17px; top: 17px; width: 6px; height: 6px; border-radius: 50%; pointer-events: none; animation: phf-spark .6s ease-out forwards; }
@keyframes phf-spark { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }

/* ---------- Solo computadoras (con mouse) ---------- */
.phf .phf__gnav, .phf .phf__dots { display: none !important; }
.phf .phf__glare { display: none; }

@media (hover: hover) and (pointer: fine) {
	/* Galería de fotos dentro de la tarjeta */
	.phf .phf__gnav {
		position: absolute !important; top: 50%; z-index: 4; width: 30px; height: 30px; margin-top: -15px; padding: 0 !important;
		border-radius: 50% !important; border: 0 !important; background: rgba(255,255,255,.94) !important; box-shadow: 0 2px 8px rgba(0,0,0,.2);
		display: inline-flex !important; align-items: center; justify-content: center; cursor: pointer;
		opacity: 0; transform: scale(.85); transition: opacity .2s ease, transform .2s ease;
	}
	.phf .phf__gnav svg { width: 13px; height: 13px; fill: none; stroke: var(--phf-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
	.phf .phf__gnav--prev { left: 9px; }
	.phf .phf__gnav--next { right: 9px; }
	.phf .phf__card:hover .phf__gnav, .phf .phf__gnav:focus-visible { opacity: 1; transform: none; }
	.phf .phf__gnav:active { transform: scale(.9); }
	.phf .phf__gnav[disabled] { opacity: 0 !important; pointer-events: none; }
	.phf .phf__dots { position: absolute !important; left: 0; right: 0; bottom: 10px; z-index: 4; display: flex !important; justify-content: center; gap: 5px; pointer-events: none; }
	.phf .phf__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.6); transition: width .25s ease, background-color .25s ease; }
	.phf .phf__dots i.on { width: 16px; border-radius: 4px; background: #fff; }

	/* Reflejo de luz que sigue al mouse */
	.phf .phf__glare {
		display: block; position: absolute !important; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .3s ease;
		background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.45), rgba(255,255,255,0) 55%);
		mix-blend-mode: soft-light;
	}
	.phf .phf__card:hover .phf__glare { opacity: 1; }

}

/* ---------- Tarjeta "Ver más" ---------- */
.phf .phf__more {
	flex: 0 0 200px; height: 210px; margin-top: 0; scroll-snap-align: start; border-radius: 14px; padding: 12px;
	border: 1.5px dashed #b9c1dc; background: #fff; display: flex !important; flex-direction: column;
	align-items: center; justify-content: center; gap: 12px; text-align: center;
	font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--phf-accent) !important; text-decoration: none !important;
	transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.phf .phf__moreicon { width: 48px; height: 48px; border-radius: 999px; background: var(--phf-accent); display: flex; align-items: center; justify-content: center; transition: transform .35s var(--phf-ease), background-color .3s ease; }
.phf .phf__moreicon svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s ease; }
@media (hover: hover) {
	.phf .phf__more:hover { background: var(--phf-accent); border-color: var(--phf-accent); border-style: solid; color: #fff !important; }
	.phf .phf__more:hover .phf__moreicon { background: #fff; transform: translateX(6px); }
	.phf .phf__more:hover .phf__moreicon svg { stroke: var(--phf-accent); }
}

/* ---------- Aparición al hacer scroll (solo si el JS cargó) ---------- */
.phf.phf--js .phf__underline { transform: scaleX(0); transition: transform .7s var(--phf-ease) .15s; }
.phf.phf--js.is-visible .phf__underline { transform: scaleX(1); }
.phf.phf--js .phf__rowhead { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--phf-ease), transform .6s var(--phf-ease); }
.phf.phf--js .phf__card,
.phf.phf--js .phf__more { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--phf-ease), transform .6s var(--phf-ease), filter .35s ease; transition-delay: calc(min(var(--i, 0), 6) * 70ms + 80ms); }
.phf.phf--js .phf__more { transition-delay: 500ms; }
.phf.phf--js .phf__row.is-visible .phf__rowhead,
.phf.phf--js .phf__row.is-visible .phf__card,
.phf.phf--js .phf__row.is-visible .phf__more { opacity: 1; transform: none; }
/* Después de entrar, las transiciones vuelven a ser inmediatas (para el foco de tarjeta) */
.phf.phf--js .phf__row.is-settled .phf__card { transition: opacity .35s ease, filter .35s ease; transition-delay: 0s; }

/* ---------- Celular ---------- */
@media (max-width: 767px) {
	.phf { --phf-card: 200px; --phf-gap: 12px; --phf-side: 16px; padding: 32px 0 40px !important; margin-top: 40px !important; }
	.phf .phf__head { margin-bottom: 28px; }
	.phf .phf__title { font-size: 21px !important; padding-bottom: 15px !important; } /* 10px de aire + 5px de línea */
	.phf .phf__sub { margin-top: 10px !important; font-size: 13px; }
	.phf .phf__row { margin-bottom: 30px; }
	.phf .phf__rowhead { margin-bottom: 12px; }
	.phf .phf__rowtitle { gap: 8px; }
	.phf .phf__rowtitle h3 { font-size: 17px !important; }
	.phf .phf__count { font-size: 12px; }
	.phf .phf__arrow { display: none !important; }
	.phf .phf__all { font-size: 13px; margin: 0; }
	.phf .phf__img { height: 170px; margin-bottom: 8px; }
	.phf .phf__name { font-size: 14px; }
	.phf .phf__meta { font-size: 12px; }
	.phf .phf__price { font-size: 14px; }
	.phf .phf__more { flex-basis: 150px; height: 170px; font-size: 13px; }
	.phf .phf__moreicon { width: 44px; height: 44px; }
	.phf .phf__badge { top: 10px; left: 10px; font-size: 11px; padding: 4px 9px; }
	.phf .phf__track.fade-right, .phf .phf__track.fade-left, .phf .phf__track.fade-left.fade-right { -webkit-mask-image: none; mask-image: none; }
	.phf .phf__progress { margin-top: 8px; }
}

/* Quien pidió menos movimiento en su sistema, no ve animaciones */
@media (prefers-reduced-motion: reduce) {
	.phf *, .phf *::before { animation: none !important; transition: none !important; }
	.phf.phf--js .phf__rowhead, .phf.phf--js .phf__card, .phf.phf--js .phf__more { opacity: 1 !important; transform: none !important; }
	.phf.phf--js .phf__underline { transform: scaleX(1) !important; }
}