/* ════════════════════════════════════════════════════
   COMMON
   ──────────────────────────────────────────────────
   Reset, base de documento, navegación, dots,
   barra de progreso, audio toggle y footer.
   Estos estilos aplican globalmente en toda la página.
════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────
   1. RESET & BASE
───────────────────────────────────────────────────── */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	font-size: 16px;
	scroll-snap-type: y mandatory;
}

body {
	font-family: var(--font-body);
	background-color: var(--color-paper);
	color: var(--color-ink);
	overflow-x: hidden;
	height: 100svh;
	overflow-y: scroll;
	scroll-snap-type: y mandatory;
	cursor: default;
}

/* Textura de papel */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
	pointer-events: none;
	z-index: 1000;
	opacity: .5;
}

a   { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul  { list-style: none; }


/* ─────────────────────────────────────────────────────
   2. NAVEGACIÓN DESKTOP
───────────────────────────────────────────────────── */
#nav {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 900;
	background: linear-gradient(to bottom, rgba(245,239,230,.97) 80%, rgba(245,239,230,0));
	border-bottom: 1px solid rgba(176,141,87,.25);
	padding: .6rem 2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: box-shadow .3s;
}

#nav.scrolled {
	box-shadow: 0 2px 16px rgba(58,45,34,.12);
}

.nav-brand {
	font-family: var(--font-display);
	font-size: 1.3rem;
	font-style: italic;
	color: var(--color-rose);
	letter-spacing: .04em;
	white-space: nowrap;
}

.nav-links {
	display: flex;
	gap: 1.6rem;
	align-items: center;
}

.nav-links a {
	font-family: var(--font-body);
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--color-ink-soft);
	position: relative;
	padding-bottom: 2px;
	transition: color .25s;
}

.nav-links a::after {
	content: '';
	position: absolute;
	bottom: 0; left: 0;
	width: 0; height: 1px;
	background: var(--color-rose);
	transition: width .3s;
}

.nav-links a:hover         { color: var(--color-rose); }
.nav-links a:hover::after  { width: 100%; }

/* Botón hamburguesa */
#hamburger {
	display: none;
	flex-direction: column;
	gap: 5px;
	cursor: pointer;
	padding: 6px;
	background: none;
	border: none;
}

#hamburger span {
	display: block;
	width: 24px; height: 2px;
	background: var(--color-ink-soft);
	border-radius: 2px;
	transition: transform .3s, opacity .3s;
}

#hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#hamburger.open span:nth-child(2) { opacity: 0; }
#hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ─────────────────────────────────────────────────────
   3. MENÚ MÓVIL
───────────────────────────────────────────────────── */
#mobile-menu {
	display: none;
	flex-direction: column;
	gap: 0;
	position: fixed;
	top: 52px; left: 0; right: 0;
	background: rgba(245,239,230,.98);
	border-bottom: 1px solid rgba(176,141,87,.3);
	z-index: 890;
	transform: translateY(-110%);
	transition: transform .35s cubic-bezier(.4,0,.2,1);
	box-shadow: 0 8px 24px rgba(58,45,34,.1);
}

#mobile-menu.open { transform: translateY(0); }

#mobile-menu a {
	display: block;
	padding: .9rem 1.8rem;
	font-family: var(--font-body);
	font-size: .9rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--color-ink-soft);
	border-bottom: 1px solid rgba(176,141,87,.15);
	transition: background .2s, color .2s;
}

#mobile-menu a:hover {
	background: var(--color-rose-pale);
	color: var(--color-rose);
}


/* ─────────────────────────────────────────────────────
   4. BARRA DE PROGRESO DE SCROLL
───────────────────────────────────────────────────── */
#scroll-progress {
	position: fixed;
	top: 0; left: 0;
	height: 2px;
	background: linear-gradient(to right, var(--color-rose), var(--color-gold));
	z-index: 999;
	width: 0%;
	transition: width .1s linear;
}


/* ─────────────────────────────────────────────────────
   5. DOTS DE NAVEGACIÓN LATERAL (solo desktop)
───────────────────────────────────────────────────── */
#section-dots {
	position: fixed;
	right: 1.2rem;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: .6rem;
	z-index: 800;
}

.section-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: rgba(176,141,87,.35);
	cursor: pointer;
	transition: background .25s, transform .25s;
	border: none;
	padding: 0;
}

.section-dot.active {
	background: var(--color-rose);
	transform: scale(1.35);
}


/* ─────────────────────────────────────────────────────
   6. BOTÓN DE AUDIO
───────────────────────────────────────────────────── */
#audio-toggle {
	position: fixed;
	bottom: 1.2rem;
	right: 1.2rem;
	z-index: 800;
	width: 42px; height: 42px;
	border-radius: 50%;
	background: rgba(245,239,230,.9);
	border: 1.5px solid var(--color-gold-light);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 1.1rem;
	color: var(--color-ink-soft);
	box-shadow: 0 2px 12px rgba(58,45,34,.12);
	transition: transform .2s, box-shadow .2s;
}

#audio-toggle:hover {
	transform: scale(1.08);
	box-shadow: 0 4px 16px rgba(58,45,34,.18);
}


/* ─────────────────────────────────────────────────────
   7. FOOTER
───────────────────────────────────────────────────── */
#footer {
	background: var(--color-ink);
	color: var(--color-paper-dark);
	padding: 2.5rem var(--section-padding);
	text-align: center;
}

.footer-names {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.6rem;
	color: var(--color-rose-light);
	margin-bottom: .6rem;
}

.footer-contacts {
	display: flex;
	justify-content: center;
	gap: 1.6rem;
	flex-wrap: wrap;
	margin: 1rem 0;
}

.footer-contact {
	font-family: var(--font-body);
	font-size: .8rem;
	letter-spacing: .1em;
	color: rgba(245,239,230,.6);
	display: flex;
	align-items: center;
	gap: .4rem;
}

.footer-made {
	font-family: var(--font-accent);
	font-style: italic;
	font-size: .83rem;
	color: rgba(245,239,230,.4);
	margin-top: 1.2rem;
}

.footer-made .heart { color: var(--color-rose); }


/* ─────────────────────────────────────────────────────
   8. RESPONSIVE
───────────────────────────────────────────────────── */
@media (max-width: 640px) {
	.nav-links  { display: none; }
	#hamburger  { display: flex; }
	#mobile-menu { display: flex; }
	#section-dots { display: none; }

	/* Textos más grandes y legibles en móvil */
	#mobile-menu a  { font-size: 1rem; }
	.footer-contact { font-size: .88rem; }
	.footer-made    { font-size: .9rem; }
}

@media (min-width: 641px) {
	#hamburger    { display: none; }
	#mobile-menu  { display: none !important; }
}