/*!
 * Nana Nails Lugo - correcciones y utilidades v7.1.0
 *
 * Se carga SIEMPRE despues de styles-DcV4IXf0.css.
 *
 * Contiene:
 *  1. Utilidades que el marcado usaba pero que no existian en el bundle
 *     (bg-wash, pulse-ring, font-logo, animate-fade-in, gradiente animado...).
 *  2. El comportamiento del menu movil, las pestanas y el acordeon.
 *  3. Los arreglos de responsive (rejillas con estilos en linea, desbordes
 *     horizontales, tamanos de tipografia y de logo en pantallas pequenas).
 *
 * No cambia la paleta ni el diseno: solo hace que se vea como estaba pensado.
 */

/* =======================================================================
 * 0. Base
 *
 * IMPORTANTE: el bundle de Tailwind usa @layer. Cualquier regla escrita
 * fuera de una capa gana a TODAS las utilidades, por muy poca
 * especificidad que tenga. Por eso los reajustes genericos van dentro de
 * @layer base (por debajo de utilities) y solo se dejan sin capa las
 * reglas que deben imponerse a proposito.
 * ==================================================================== */

@layer base {

	/* Evita el scroll lateral sin crear un segundo contenedor de scroll.
	   Solo se toca el elemento raiz: ponerlo tambien en body, o usar
	   overflow-x:clip aqui, deja la pagina sin desplazamiento vertical
	   en algunos motores. */
	html {
		overflow-x: hidden;
	}

	body {
		max-width: 100%;
	}

	body {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	img,
	svg,
	video,
	iframe {
		max-width: 100%;
	}

	img {
		height: auto;
	}

	/* Ancla por debajo de la cabecera fija al llegar con #enlace. */
	:target {
		scroll-margin-top: 6.5rem;
	}
}

/* El atributo hidden tiene que ganar a cualquier display de utilidad. */
[hidden] {
	display: none !important;
}

/* Bloquea el scroll del fondo con el menu movil abierto. */
.nana-menu-open,
.nana-menu-open body {
	overflow: hidden;
}

/* =======================================================================
 * 1. Utilidades que faltaban en el bundle
 * ==================================================================== */

/* Fondo suave de seccion: el marcado lo usa en 5 sitios y no existia,
   por lo que esas secciones salian transparentes. */
.bg-wash {
	background-color: #fff6f8;
}

.bg-wash\/80 {
	background-color: rgba(255, 246, 248, .8);
}

.border-rose-light\/50 {
	border-color: rgba(255, 217, 229, .5);
}

.bg-salmon-light {
	background-color: #ffab8a;
}

.hover\:bg-salmon-light:hover {
	background-color: #ffab8a;
}

.font-logo {
	font-family: Fraunces, Georgia, "Times New Roman", serif;
	font-style: italic;
}

/* Presentes en el marcado original pero ausentes del bundle purgado. */
.text-rose-light {
	color: #ffd9e5;
}

.hover\:bg-rose-light:hover {
	background-color: #ffeef3;
}

.nana-main {
	min-height: 60vh;
}

.h-0\.75 {
	height: .1875rem;
}

.animate-fade-in {
	animation: nana-fade-in .45s ease both;
}

@keyframes nana-fade-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Aro que late alrededor del boton de cita. */
.pulse-ring {
	position: relative;
}

.pulse-ring::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 9999px;
	border: 2px solid #ff6b9d;
	opacity: 0;
	pointer-events: none;
	animation: nana-pulse-ring 2.4s cubic-bezier(.4, 0, .6, 1) infinite;
}

@keyframes nana-pulse-ring {
	0% {
		opacity: .55;
		transform: scale(1);
	}

	70%,
	100% {
		opacity: 0;
		transform: scale(1.18);
	}
}

.bg-gradient-pink-animated {
	background: linear-gradient(120deg, #ff6b9d, #ff8a65, #ffb3c6, #ff6b9d);
	background-size: 300% 300%;
	animation: nana-gradient 14s ease infinite;
}

@keyframes nana-gradient {
	0%,
	100% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}
}

.shadow-pink-glow,
.hover\:shadow-pink-glow:hover {
	box-shadow: 0 12px 32px rgba(255, 107, 157, .38);
}

@media (prefers-reduced-motion: reduce) {

	.pulse-ring::after,
	.bg-gradient-pink-animated,
	.animate-fade-in {
		animation: none;
	}
}

/* =======================================================================
 * 2. Cabecera y menu movil
 * ==================================================================== */

#nana-header {
	background-color: transparent;
	transition: background-color .3s ease, box-shadow .3s ease, padding .3s ease;
}

#nana-header.is-solid {
	background-color: #fff;
	box-shadow: 0 6px 24px rgba(255, 107, 157, .12);
	padding-top: .5rem;
	padding-bottom: .5rem;
}

/* Tamano del logo. Se define aqui y no con utilidades de Tailwind porque
   el bundle esta purgado y las clases de altura nuevas no existirian. */
.nana-logo {
	height: 3rem;
	width: auto;
	transition: height .3s ease;
}

@media (min-width: 640px) {
	.nana-logo {
		height: 3.5rem;
	}
}

@media (min-width: 768px) {
	.nana-logo {
		height: 5rem;
	}
}

#nana-header.is-solid .nana-logo {
	height: 2.75rem;
}

@media (min-width: 768px) {
	#nana-header.is-solid .nana-logo {
		height: 3.75rem;
	}
}

/* Boton de cita: oculto en moviles estrechos, donde ya esta en el menu. */
.nana-cta-desktop {
	display: none;
}

@media (min-width: 640px) {
	.nana-cta-desktop {
		display: inline-flex;
	}
}

.nana-btn-lg {
	padding: 1rem 2rem;
}

.nana-footer-logo {
	height: 7rem;
}

@media (min-width: 640px) {
	.nana-footer-logo {
		height: 9rem;
	}
}

@media (min-width: 768px) {
	.nana-footer-logo {
		height: 13rem;
	}
}

/* El boton alterna entre el icono de hamburguesa y el de cerrar. */
#nana-menu-toggle .nana-icon-close,
#nana-menu-toggle[aria-expanded="true"] .nana-icon-open {
	display: none;
}

#nana-menu-toggle[aria-expanded="true"] .nana-icon-close {
	display: block;
}

#nana-menu-toggle[aria-expanded="true"] {
	background: linear-gradient(135deg, #ff6b9d, #ff8a65);
	color: #fff;
}

.nana-mobile-nav {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	max-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: rgba(255, 255, 255, .97);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	box-shadow: 0 18px 40px rgba(45, 27, 34, .16);
	border-top: 1px solid #ffd9e5;
	transition: max-height .3s ease;
}

.nana-mobile-nav.is-open {
	max-height: calc(100vh - 5rem);
}

.nana-mobile-link {
	display: block;
	padding: .875rem .25rem;
	font-size: 1rem;
	font-weight: 500;
	color: rgba(45, 27, 34, .82);
	border-bottom: 1px solid rgba(255, 217, 229, .7);
	transition: color .2s ease;
}

.nana-mobile-link:last-of-type {
	border-bottom: 0;
}

.nana-mobile-link:hover,
.nana-mobile-link:focus {
	color: #d94f7a;
}

.nana-mobile-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	margin: 1rem 0 .5rem;
	padding: .875rem 1.5rem;
	border-radius: 9999px;
	font-weight: 600;
	color: #fff;
	background: linear-gradient(135deg, #ff6b9d, #ff8a65);
	box-shadow: 0 8px 20px rgba(255, 107, 157, .3);
}

@media (min-width: 1024px) {
	.nana-mobile-nav {
		display: none !important;
	}
}

/* La cabecera es fija: el contenido de las paginas internas se separa. */
.nana-main-offset {
	padding-top: 7rem;
}

@media (max-width: 767px) {
	.nana-main-offset {
		padding-top: 5.5rem;
	}
}

/* =======================================================================
 * 3. Pestanas de servicios
 * ==================================================================== */

.nana-panel,
[data-panel] {
	display: none;
}

[data-panel].is-active {
	display: block;
	animation: nana-fade-in .35s ease both;
}

[data-tab] {
	cursor: pointer;
}

/* =======================================================================
 * 4. Acordeon de preguntas frecuentes
 *
 * El marcado usaba grid-rows-[0fr] / grid-rows-[1fr], clases que no
 * llegaron al bundle: las respuestas cerradas quedaban invisibles pero
 * seguian ocupando su altura y dejaban huecos enormes.
 * ==================================================================== */

.nana-faq-panel {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows .3s ease, opacity .25s ease;
}

.nana-faq-panel.is-open {
	grid-template-rows: 1fr;
	opacity: 1;
}

.nana-faq-panel > * {
	overflow: hidden;
	min-height: 0;
}

/* Sin soporte de grid animado, se usa altura maxima. */
@supports not (grid-template-rows: 1fr) {
	.nana-faq-panel {
		display: block;
		max-height: 0;
		overflow: hidden;
	}

	.nana-faq-panel.is-open {
		max-height: 60rem;
	}
}

.nana-faq-panel + *,
[aria-controls^="nana-faq-panel"] {
	cursor: pointer;
}

/* =======================================================================
 * 5. Galeria
 * ==================================================================== */

.nana-gallery-item {
	animation: nana-fade-in .35s ease both;
}

[data-filter] {
	cursor: pointer;
}

/* =======================================================================
 * 6. Resenas de Google
 * ==================================================================== */

.nana-review-avatar {
	width: 3rem;
	height: 3rem;
	border-radius: 9999px;
	object-fit: cover;
	background: linear-gradient(135deg, #ff6b9d, #ff8a65);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	flex-shrink: 0;
}

.nana-review-dot {
	width: .5rem;
	height: .5rem;
	border-radius: 9999px;
	background: #ffd9e5;
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: width .25s ease, background .25s ease;
}

.nana-review-dot.is-active {
	width: 2rem;
	background: linear-gradient(90deg, #ff6b9d, #ff8a65);
}

.nana-review-text {
	display: -webkit-box;
	-webkit-line-clamp: 6;
	line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.nana-reviews-notice {
	border: 1px dashed #ffd9e5;
	background: #fff6f8;
	border-radius: 1rem;
	padding: 1rem 1.25rem;
	color: #a85c7a;
	font-size: .875rem;
}

/* =======================================================================
 * 7. Aparicion al hacer scroll
 * ==================================================================== */

.nana-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .6s ease, transform .6s ease;
}

.nana-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.nana-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Rejilla del pie. Antes iba como estilo en linea de tres columnas fijas,
   asi que en movil salian tres columnas aplastadas. */
.nana-footer-grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1.3fr;
	gap: 4rem;
}

@media (max-width: 1023px) {
	.nana-footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 2.5rem;
	}
}

@media (max-width: 767px) {
	.nana-footer-grid {
		grid-template-columns: 1fr;
		gap: 2.25rem;
	}
}

/* =======================================================================
 * 8. Responsive
 *
 * El pie y algunas rejillas traian grid-template-columns como estilo en
 * linea, asi que ninguna media query del bundle podia afectarlas: en movil
 * se veian tres columnas aplastadas. Aqui se corrigen con !important, que
 * es lo unico que gana a un atributo style.
 * ==================================================================== */

@media (max-width: 1023px) {

	footer#contacto [style*="grid-template-columns"] {
		grid-template-columns: 1fr 1fr !important;
		gap: 2.5rem !important;
	}
}

@media (max-width: 767px) {

	footer#contacto [style*="grid-template-columns"] {
		grid-template-columns: 1fr !important;
		gap: 2.25rem !important;
	}

	footer#contacto {
		padding-top: 3rem !important;
	}

	/* El logo del pie ocupaba media pantalla en movil. */
	footer#contacto img[alt*="Logo"],
	footer#contacto img[alt*="Nana Nails"] {
		height: 8rem !important;
	}

	footer#contacto .pt-12 {
		padding-top: 0 !important;
	}

	footer#contacto .pl-2,
	footer#contacto .pl-4 {
		padding-left: 0 !important;
	}

	/* Cualquier rejilla en linea de 2+ columnas pasa a una. */
	main [style*="grid-template-columns"] {
		grid-template-columns: 1fr !important;
	}
}

/* Tipografia y espaciado en pantallas pequenas. */
@media (max-width: 480px) {

	.section-padding {
		padding-top: 3.25rem !important;
		padding-bottom: 3.25rem !important;
	}

	#inicio {
		padding-top: 6.5rem !important;
		padding-bottom: 3rem !important;
		min-height: 0 !important;
	}

	h1 {
		font-size: clamp(2rem, 9vw, 2.75rem) !important;
		line-height: 1.12 !important;
	}

	h2 {
		font-size: clamp(1.65rem, 7vw, 2.25rem) !important;
		line-height: 1.18 !important;
	}

	/* Palabras largas ("semipermanente") desbordaban la caja. */
	h1, h2, h3, h4, p, a, li {
		overflow-wrap: break-word;
		word-break: break-word;
	}

	/* Los bloques decorativos difuminados provocaban scroll lateral. */
	.blur-3xl {
		max-width: 100vw;
	}
}

/* El mapa del pie necesita altura util en movil. */
@media (max-width: 767px) {
	footer#contacto iframe {
		height: 220px !important;
	}
}

/* Areas tactiles minimas. */
@media (pointer: coarse) {

	.nana-mobile-link,
	[data-tab],
	[data-filter],
	.nana-review-dot {
		min-height: 44px;
	}

	.nana-review-dot {
		min-height: 0;
		padding: .75rem 0;
		background-clip: content-box;
	}
}