/*
Theme Name: La Nonna Lina
Theme URI: https://lanonnalina.com
Author: La Nonna Lina
Description: Landing page "Una Dulce Tradición" — tortas y postres artesanales en Miami, FL. Implementación del diseño de Figma.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lanonnalina
*/

:root {
	--pink: #fa72a0;
	--cream: #fbe2db;
	--mauve: #965d6c;
	--gray: #646464;
	--paper: #ffffff;
	--font-display: "Fredoka", sans-serif;
	--font-round: "Fredoka One", "Fredoka", sans-serif;
	--font-body: "Montserrat", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
	background: var(--paper);
	font-family: var(--font-body);
	overflow-x: hidden;
}

img { display: block; }
a { text-decoration: none; color: inherit; }

.lnl { width: 100%; }

/* Cada sección es un lienzo proporcional al diseño (1366 px de referencia).
   Las posiciones son porcentajes del lienzo y las fuentes usan cqw. */
.sec {
	position: relative;
	width: 100%;
	container-type: inline-size;
}
.abs { position: absolute; }

/* ============================= Hero ============================= */

.hero { aspect-ratio: 1366 / 908.5; z-index: 2; }

.hero__bg { inset: 0; width: 100%; height: 100%; }

.hero__logo { left: 4.166%; top: 7.802%; width: 10.957%; z-index: 6; }
.hero__logo img { width: 100%; height: auto; aspect-ratio: 149.669 / 108.964; }

.hero__swash { left: 24.67%; top: 10.038%; width: 50.88%; z-index: 4; }
.hero__medallion { left: 43.74%; top: 4.645%; width: 12.738%; z-index: 5; }

.pill {
	display: flex;
	align-items: center;
	justify-content: center;
	top: 11.107%;
	width: 16.276%;
	height: 6.274%;
	background: url("assets/img/btn-outline.svg") no-repeat center / 100% 100%;
	font-family: var(--font-round);
	color: var(--cream);
	z-index: 6;
}
.pill--contacto { left: 25.76%; font-size: clamp(10px, 2.196cqw, 30px); letter-spacing: -0.043em; }
.pill--ordenar { left: 58.2%; font-size: clamp(10px, 2.05cqw, 28px); letter-spacing: -0.02em; }

.hero__fb { left: 86.26%; top: 11.602%; width: 1.881%; z-index: 6; }
.hero__ig { left: 92.56%; top: 11.789%; width: 3.294%; z-index: 6; }
.hero__fb img, .hero__ig img { width: 100%; height: auto; }

.hero__title {
	left: 0;
	top: 28.817%;
	width: 100%;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 8.784cqw;
	line-height: 0.983;
	text-align: center;
	color: var(--cream);
	z-index: 2;
}

.hero__cake { left: 20.685%; top: 56%; width: 58.622%; height: 27%; z-index: 1; }

.carousel__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	transition: opacity 0.5s ease;
}
.carousel__slide--active { opacity: 1; }

.arrow {
	top: 83.61%;
	width: 4.349%;
	aspect-ratio: 1;
	z-index: 4;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}
.arrow--l { left: 26.18%; }
.arrow--r { left: 69.47%; }
.arrow__circle { width: 100%; height: 100%; }
.arrow__chevron {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 36.5%;
	transform: translate(-50%, -50%);
}

/* Botones CTA */
.cta {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(12px, 2.782cqw, 38px);
	letter-spacing: -0.023em;
	color: var(--cream);
	border-radius: 2.343cqw;
	white-space: nowrap;
	z-index: 7;
	transition: filter 0.2s ease;
}
.cta:hover { filter: brightness(1.06); }
.cta--pink { left: 28.551%; top: 95.432%; width: 42.899%; height: 10.127%; background: var(--pink); }
.cta--mauve { left: 30.6%; top: 48.957%; width: 40.191%; height: 6.783%; background: var(--mauve); letter-spacing: 0.02em; }

/* ============================= Nosotros ============================= */

.about { aspect-ratio: 1366 / 779.5; z-index: 1; }

.about__photo {
	left: 6.823%;
	top: 24.503%;
	width: 32.782%;
	height: 60.346%;
	border-radius: 3.96cqw;
	overflow: hidden;
}
.about__photo img { width: 100%; height: 100%; object-fit: cover; }

.about__text {
	left: 45.93%;
	top: 23.907%;
	width: 48.024%;
	font-weight: 500;
	font-size: clamp(11px, 2.196cqw, 30px);
	line-height: 1.55;
	letter-spacing: 0.012em;
	color: var(--gray);
}
.about__text p + p { margin-top: 3.88cqw; }

/* ===================== Marca + plato + sello ===================== */

.art { aspect-ratio: 1366 / 1079; overflow: hidden; }

.art__wave { left: -1.55%; top: 77.53%; width: 103.11%; height: auto; z-index: 0; }
.art__swirl { left: 27.196%; top: 22%; width: 45.608%; z-index: 1; }
.art__wavescript { left: 30.571%; top: 81%; width: 38.844%; z-index: 2; }
.art__stamp { left: 35.42%; top: 63.06%; width: 29.157%; z-index: 3; }
.art__plate { left: 9.297%; top: 5.19%; width: 79.215%; z-index: 4; }
.art__script { left: 30.088%; top: 0; width: 39.81%; z-index: 5; }

/* ============================= Postres ============================= */

.products { aspect-ratio: 1366 / 1150; }

.products__text {
	left: 20.205%;
	top: 4.696%;
	width: 59.59%;
	font-weight: 600;
	font-size: clamp(11px, 2.196cqw, 30px);
	line-height: 1.233;
	letter-spacing: 0.008em;
	color: var(--mauve);
}
.products__text p + p { margin-top: 3.953cqw; }

.card { top: 61.087%; width: 25.798%; height: 38.913%; }
.card--1 { left: 7.247%; }
.card--2 { left: 37.101%; }
.card--3 { left: 66.947%; }

.card__photo {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 83.84%;
	border-radius: 3.07cqw;
	overflow: hidden;
}
.card__photo img { width: 100%; height: 100%; object-fit: cover; }

/* La foto tapa la parte superior de la banda: solo asoma el faldón inferior, como en el diseño. */
.card__ribbon {
	position: absolute;
	left: 0;
	top: 28.94%;
	width: 100%;
	height: 71.06%;
	z-index: 1;
}

.card__label {
	z-index: 3;
	position: absolute;
	left: 0;
	top: 87.93%;
	width: 100%;
	text-align: center;
	font-family: var(--font-round);
	font-weight: 400;
	font-size: clamp(10px, 2.45cqw, 34px);
	letter-spacing: -0.02em;
	color: var(--cream);
}

/* ============================ Testimonios ============================ */

.reviews { aspect-ratio: 1366 / 933; }

.reviews__title {
	left: 0;
	top: 12.218%;
	width: 100%;
	text-align: center;
	font-family: var(--font-round);
	font-weight: 400;
	font-size: 8.199cqw;
	line-height: 1.027;
	letter-spacing: -0.022em;
	color: var(--pink);
}

.review {
	display: flex;
	align-items: center;
	width: 41.582%;
	height: 17.61%;
	padding-left: 5.6%;
	padding-right: 3%;
	background: url("assets/img/bubble.svg") no-repeat center / 100% 100%;
	font-weight: 500;
	font-size: clamp(10px, 2.343cqw, 32px);
	line-height: 1.21;
	letter-spacing: 0.017em;
	color: var(--mauve);
}
.review--1 { left: 7.35%; top: 62.904%; }
.review--2 { left: 50.908%; top: 62.904%; }
.review--3 { left: 7.35%; top: 83.74%; }
.review--4 { left: 51%; top: 83.74%; }

/* ============================= Footer ============================= */

.footer { aspect-ratio: 1366 / 848.76; overflow: hidden; }

.footer__wave { left: -50.8%; top: 0; width: 183.16%; height: auto; z-index: 0; }
.footer > .abs:not(.footer__wave), .footer__social > .abs { z-index: 1; }

.footer__logo { left: 35.08%; top: 13.116%; width: 29.842%; height: auto; aspect-ratio: 407.641 / 296.776; }

.footer__fb-icon { left: 14.43%; top: 60.74%; width: 2.571%; }
.footer__ig-icon { left: 40.29%; top: 61.01%; width: 4.466%; }
.footer__pin-icon { left: 66.8%; top: 61.01%; width: 3.667%; }
.footer__fb-icon img, .footer__ig-icon img, .footer__pin-icon img { width: 100%; height: auto; }

.footer__fb-text, .footer__ig-text, .footer__pin-text {
	top: 62.07%;
	font-weight: 700;
	font-size: clamp(11px, 2.782cqw, 38px);
	letter-spacing: 0.033em;
	color: var(--cream);
}
.footer__fb-text { left: 18.75%; }
.footer__ig-text { left: 46.42%; }
.footer__pin-text { left: 72.01%; }

.footer__wa {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.95cqw;
	left: 35.07%;
	top: 75.88%;
	width: 29.502%;
	height: 10.132%;
	background: var(--mauve);
	border-radius: 2.343cqw;
	font-weight: 700;
	font-size: clamp(12px, 2.738cqw, 38px);
	letter-spacing: 0.047em;
	color: var(--cream);
	transition: filter 0.2s ease;
}
.footer__wa:hover { filter: brightness(1.1); }
.footer__wa-icon { width: 4.46cqw; height: auto; }

.footer__line {
	left: 25.82%;
	top: 93.2%;
	width: 58.39%;
	border-top: 3px solid var(--cream);
}
.footer__left, .footer__right {
	top: 91.01%;
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: clamp(10px, 2.489cqw, 34px);
	letter-spacing: 0.047em;
	color: var(--cream);
}
.footer__left { left: 3.83%; }
.footer__right { right: 2.44%; }

/* ============================= Móvil ============================= */

@media (max-width: 768px) {

	/* Logo header: más grande y sin deformación */
	.hero__logo { width: 22%; top: 5%; left: 3%; height: auto; }
	.hero__logo img { display: block; width: 100%; height: auto; max-height: none; }

	/* Nosotros: flujo apilado */
	.about { aspect-ratio: auto; padding: 10vw 6vw 6vw; }
	.about__photo {
		position: static;
		width: 100%;
		aspect-ratio: 448 / 470;
		height: auto;
		border-radius: 24px;
	}
	.about__text {
		position: static;
		width: auto;
		margin-top: 24px;
		font-size: 15px;
	}
	.about__text p + p { margin-top: 16px; }

	/* Postres: flujo apilado */
	.products { aspect-ratio: auto; padding: 4vw 6vw 12vw; }
	.products__text { position: static; width: auto; font-size: 15px; }
	.products__text p + p { margin-top: 16px; }
	.cta--mauve {
		position: static;
		width: fit-content;
		height: auto;
		margin: 28px auto;
		padding: 12px 26px;
		font-size: 16px;
		border-radius: 22px;
	}
	.card {
		position: relative;
		left: auto !important;
		top: auto;
		width: 100%;
		max-width: 340px;
		height: auto;
		aspect-ratio: 352.4 / 447.5;
		margin: 0 auto 28px;
	}
	.card__photo { border-radius: 28px; }
	.card__label { font-size: clamp(16px, 6.5vw, 26px); }

	/* Testimonios: flujo apilado */
	.reviews { aspect-ratio: auto; padding: 8vw 6vw 10vw; }
	.reviews__title {
		position: static;
		font-size: clamp(30px, 9vw, 44px);
		margin-bottom: 28px;
	}
	.review {
		position: static;
		width: 100%;
		height: auto;
		margin: 0 0 16px;
		padding: 18px 20px;
		background: #dfdfdf;
		border-radius: 18px;
		font-size: 14px;
	}

	/* Footer: flujo apilado sobre fondo rosa con ola */
	.footer {
		aspect-ratio: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 18vw 6vw 6vw;
		background: url("assets/img/wave-footer.svg") no-repeat top center / 250% auto, var(--pink);
	}
	.footer__wave { display: none; }
	.footer__logo { position: static; width: 62%; margin-bottom: 30px; }
	.footer__social {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 14px;
		margin-bottom: 26px;
	}
	.footer__social .abs { position: static; }
	.footer__fb-icon, .footer__ig-icon, .footer__pin-icon { display: none; }
	.footer__fb-text, .footer__ig-text, .footer__pin-text { font-size: 17px; }
	.footer__wa {
		position: static;
		width: fit-content;
		height: auto;
		gap: 10px;
		padding: 12px 28px;
		font-size: 17px;
		border-radius: 22px;
		margin-bottom: 34px;
	}
	.footer__wa-icon { width: 24px; }
	.footer__line { position: static; width: 100%; margin-bottom: 12px; }
	.footer__left, .footer__right { position: static; font-size: 13px; }
	.footer__left { margin-bottom: 4px; }
	.footer__left::after { content: ""; }
}