/* =============================================================
   SALÓN VICTORIA 37 · Salón Boutique · Córdoba
   Paleta: blanco de fondo · marrón #3B2C16 en detalles notorios
   (botones, bloques) · dorado #E4C17E como texto sobre el marrón.
   Tipografías: Marcellus (títulos) + Mulish (cuerpo) + Charlotte (script).
   Identidad: marcos dorados finos, esquinas biseladas, numeración
   romana y acentos caligráficos del logo del tulipán.
   ============================================================= */

@font-face {
	font-family: 'Charlotte';
	src: url('../fonts/charlotte-webfont.woff2') format('woff2'),
	     url('../fonts/charlotte-webfont.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--blanco: #FFFFFF;
	--marfil: #F8F3E9;
	--marfil-2: #F2EADA;
	--marron: #3B2C16;
	--marron-2: #52401F;
	--tinta: #33270F;
	--tinta-suave: rgba(51, 39, 15, .68);
	--oro: #E4C17E;
	--oro-suave: rgba(228, 193, 126, .45);
	--oro-tenue: rgba(228, 193, 126, .22);
	--linea: rgba(59, 44, 22, .14);
	--display: 'Marcellus', 'Times New Roman', serif;
	--cuerpo: 'Mulish', 'Helvetica Neue', Arial, sans-serif;
	--script: 'Charlotte', 'Brush Script MT', cursive;
	--suave: cubic-bezier(.25, .8, .25, 1);
	--chaflan: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
	--header-h: 148px;
}

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--blanco);
	color: var(--tinta);
	font-family: var(--cuerpo);
	font-size: 1.02rem;
	font-weight: 300;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--marron); text-decoration: none; transition: color .3s var(--suave); }
a:hover { color: var(--marron-2); }

h1, h2, h3, h4 {
	font-family: var(--display);
	font-weight: 400;
	line-height: 1.15;
	margin: 0 0 .5em;
	color: var(--marron);
	letter-spacing: .02em;
}

h1 { font-size: clamp(2.6rem, 5.6vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); }

p { margin: 0 0 1em; }
.lead { font-size: 1.16rem; line-height: 1.7; }

/* Palabra caligráfica que acompaña a los títulos */
.script {
	font-family: var(--script);
	font-weight: 400;
	color: var(--marron);
	display: block;
	font-size: clamp(1.9rem, 3.4vw, 2.9rem);
	line-height: 1;
	transform: rotate(-2deg);
	margin-bottom: .2em;
}
.script--oro { color: #C9A159; }

/* Cejilla con numeración romana / etiqueta */
.cejilla {
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .38em;
	text-transform: uppercase;
	color: #B08A45;
	margin: 0 0 1.2rem;
	display: flex;
	align-items: center;
	gap: 1rem;
}
.cejilla::after { content: ''; height: 1px; width: 56px; background: var(--oro); }
.cejilla--centro { justify-content: center; }
.cejilla--centro::before { content: ''; height: 1px; width: 56px; background: var(--oro); }

.wrap { width: min(1200px, 92vw); margin-inline: auto; }
.wrap--estrecho { width: min(800px, 92vw); }

.seccion { padding: clamp(4.2rem, 8.5vw, 7rem) 0; }
.seccion--marfil { background: var(--marfil); }

.cabecera-seccion { max-width: 740px; margin-bottom: clamp(2.2rem, 4.5vw, 3.6rem); }
.cabecera-seccion--centro { margin-inline: auto; text-align: center; }

/* ---------- Botones biselados (chaflán) ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	font-family: var(--cuerpo);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .26em;
	text-transform: uppercase;
	padding: 1.05rem 2.4rem;
	border: 0;
	cursor: pointer;
	clip-path: var(--chaflan);
	transition: background .4s var(--suave), color .4s var(--suave), transform .35s var(--suave);
}
.btn:hover { transform: translateY(-2px); }

.btn--marron { background: var(--marron); color: var(--oro); }
.btn--marron:hover { background: var(--oro); color: var(--marron); }
.btn--oro { background: var(--oro); color: var(--marron); }
.btn--oro:hover { background: var(--blanco); color: var(--marron); }

/* Contorno biselado: se dibuja con capa interior */
.btn--linea {
	position: relative;
	background: var(--marron);
	color: var(--marron);
	padding: 1.05rem 2.4rem;
}
.btn--linea::before {
	content: '';
	position: absolute;
	inset: 1.5px;
	background: var(--blanco);
	clip-path: var(--chaflan);
	z-index: 0;
}
.btn--linea span { position: relative; z-index: 1; }
.btn--linea:hover { color: var(--oro); }
.btn--linea:hover::before { background: var(--marron); }

.enlace-linea {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--marron);
	border-bottom: 1px solid var(--oro);
	padding-bottom: .35rem;
}
.enlace-linea i { transition: transform .35s var(--suave); font-size: .9em; }
.enlace-linea:hover i { transform: translateX(6px); }

.acciones { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.acciones--centro { justify-content: center; }

/* ---------- Marco dorado interior para imágenes ---------- */

.marco { position: relative; overflow: hidden; }
.marco img { width: 100%; height: 100%; object-fit: cover; }
.marco::after {
	content: '';
	position: absolute;
	inset: 14px;
	border: 1px solid var(--oro);
	pointer-events: none;
	z-index: 2;
	transition: inset .5s var(--suave);
}
.marco:hover::after { inset: 8px; }

/* ---------- Animaciones de aparición ---------- */

.reveal {
	opacity: 0;
	transform: translateY(34px);
	transition: opacity 1s var(--suave), transform 1s var(--suave);
	transition-delay: var(--d, 0s);
}
.reveal.is-in { opacity: 1; transform: none; }

.crece { overflow: hidden; }
.crece img { transform: scale(1.14); transition: transform 1.6s var(--suave); transition-delay: var(--d, 0s); }
.crece.is-in img { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.reveal, .crece img, .masthead__in { transition: none !important; animation: none !important; }
	.reveal, .masthead__in { opacity: 1 !important; transform: none !important; }
	.crece img { transform: none; }
}

/* ---------- Header en dos niveles ---------- */

.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 60;
	background: var(--blanco);
	box-shadow: 0 1px 0 var(--linea);
	transition: box-shadow .4s var(--suave);
}
.site-header.is-scrolled { box-shadow: 0 8px 30px rgba(59, 44, 22, .12); }

.site-header__banda {
	background: var(--marron);
	color: var(--oro);
	overflow: hidden;
	max-height: 44px;
	transition: max-height .45s var(--suave);
}
.site-header.is-scrolled .site-header__banda { max-height: 0; }
.site-header__banda-inner {
	width: min(1320px, 94vw);
	margin-inline: auto;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	font-size: .78rem;
	letter-spacing: .12em;
}
.site-header__banda-item { margin: 0; white-space: nowrap; }
.site-header__banda-item i { margin-right: .4rem; font-size: .85em; }
.site-header__banda-social { display: flex; align-items: center; gap: 1.1rem; }
.site-header__banda-social a { color: var(--oro); font-size: .85rem; }
.site-header__banda-social a:hover { color: var(--blanco); }

.site-header__barra { background: var(--blanco); }
.site-header__inner {
	width: min(1320px, 94vw);
	margin-inline: auto;
	height: 104px;
	display: flex;
	align-items: center;
	gap: clamp(1.2rem, 3vw, 2.8rem);
	transition: height .4s var(--suave);
}
.site-header.is-scrolled .site-header__inner { height: 80px; }

.site-header__logo { display: flex; align-items: center; gap: .9rem; margin-right: auto; }
.site-header__logo img {
	height: 72px;
	width: 72px;
	border-radius: 50%;
	border: 1px solid var(--oro);
	padding: 2px;
	box-sizing: border-box;
	transition: height .4s var(--suave), width .4s var(--suave);
}
.site-header.is-scrolled .site-header__logo img { height: 56px; width: 56px; }
.site-header__nombre {
	font-family: var(--display);
	font-size: 1.45rem;
	color: var(--marron);
	line-height: 1.05;
}
.site-header__nombre em { font-style: normal; color: #B08A45; }
.site-header__nombre small {
	display: block;
	font-family: var(--cuerpo);
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--tinta-suave);
	margin-top: .3rem;
}

.nav-barra { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(1.1rem, 2vw, 2.1rem); }
.nav-barra a {
	position: relative;
	display: inline-block;
	padding: .5rem 0;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--tinta);
	white-space: nowrap;
}
.nav-barra a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--oro);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .45s var(--suave);
}
.nav-barra a:hover::after,
.nav-barra li.current-menu-item a::after { transform: scaleX(1); transform-origin: left; }
.nav-barra li.current-menu-item a { color: #B08A45; }

.site-header__cta { padding: .9rem 1.9rem; }

/* ---------- Botón menú (móvil) ---------- */

.menu-toggle {
	display: none;
	align-items: center;
	gap: .7rem;
	background: none;
	border: 0;
	padding: .4rem 0;
	cursor: pointer;
	color: var(--marron);
	font-family: var(--cuerpo);
}
.menu-toggle__caja { position: relative; width: 30px; height: 10px; display: block; }
.menu-toggle__linea {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1.5px;
	background: var(--marron);
	transition: transform .4s var(--suave), top .4s var(--suave);
}
.menu-toggle__linea:first-child { top: 0; }
.menu-toggle__linea:last-child { top: 8px; }
.menu-toggle__texto { font-size: .78rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; }

body.nav-is-open .menu-toggle__linea:first-child { top: 4px; transform: rotate(45deg); }
body.nav-is-open .menu-toggle__linea:last-child { top: 4px; transform: rotate(-45deg); }
body.nav-is-open { overflow: hidden; }

/* ---------- Velo de menú (pantalla completa, en claro) ---------- */

.site-velo {
	position: fixed;
	inset: 0;
	z-index: 55;
	background: var(--blanco);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s var(--suave), visibility .5s var(--suave);
}
body.nav-is-open .site-velo { opacity: 1; visibility: visible; }
.site-velo__inner { width: min(680px, 90vw); padding-top: var(--header-h); }

.site-velo__script {
	font-family: var(--script);
	font-size: clamp(2.4rem, 7vw, 3.6rem);
	color: #C9A159;
	transform: rotate(-2deg);
	margin: 0 0 1.6rem;
}

.velo-links { list-style: none; margin: 0 0 2.2rem; padding: 0; }
.velo-links li {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .55s var(--suave), transform .55s var(--suave);
}
body.nav-is-open .velo-links li { opacity: 1; transform: none; }
body.nav-is-open .velo-links li:nth-child(1) { transition-delay: .12s; }
body.nav-is-open .velo-links li:nth-child(2) { transition-delay: .18s; }
body.nav-is-open .velo-links li:nth-child(3) { transition-delay: .24s; }
body.nav-is-open .velo-links li:nth-child(4) { transition-delay: .30s; }
body.nav-is-open .velo-links li:nth-child(5) { transition-delay: .36s; }
body.nav-is-open .velo-links li:nth-child(6) { transition-delay: .42s; }

.velo-links a {
	display: inline-block;
	font-family: var(--display);
	font-size: clamp(1.8rem, 5.4vw, 2.6rem);
	color: var(--marron);
	padding: .35rem 0;
	transition: letter-spacing .4s var(--suave), color .3s var(--suave);
}
.velo-links a:hover { color: #B08A45; letter-spacing: .06em; }
.velo-links li.current-menu-item a { color: #B08A45; }

.site-velo__pie { border-top: 1px solid var(--oro-suave); padding-top: 1.6rem; font-size: .92rem; color: var(--tinta-suave); }
.site-velo__pie p { margin: 0 0 .4rem; }
.site-velo__social { display: flex; justify-content: center; gap: 1.2rem; margin-top: 1rem; }
.site-velo__social a {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--marron);
	color: var(--oro);
	clip-path: var(--chaflan);
	transition: background .35s var(--suave), color .35s var(--suave);
}
.site-velo__social a:hover { background: var(--oro); color: var(--marron); }

/* ---------- Masthead editorial (portada) ---------- */

.masthead {
	padding: calc(var(--header-h) + clamp(2.4rem, 5vw, 4.2rem)) 0 0;
	text-align: center;
	background: var(--blanco);
}
.masthead__script {
	font-family: var(--script);
	font-size: clamp(2.2rem, 4.6vw, 3.4rem);
	color: #C9A159;
	transform: rotate(-2deg);
	display: block;
	margin-bottom: .4rem;
}
.masthead__titulo { margin: 0 auto .9rem; max-width: 900px; }
.masthead__sub { max-width: 620px; margin: 0 auto 2rem; color: var(--tinta-suave); font-size: 1.14rem; }

.masthead__claves {
	list-style: none;
	display: flex;
	justify-content: center;
	gap: clamp(1.2rem, 3vw, 2.6rem);
	flex-wrap: wrap;
	margin: 2.6rem auto 0;
	padding: 1.1rem 0;
	border-block: 1px solid var(--oro-suave);
	width: min(880px, 92vw);
}
.masthead__claves li {
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--tinta-suave);
	display: flex;
	align-items: center;
	gap: .7rem;
}
.masthead__claves li::before { content: '✦'; color: var(--oro); font-size: .8em; }

.masthead__imagen {
	position: relative;
	margin-top: clamp(2.4rem, 5vw, 4rem);
	height: clamp(340px, 56vh, 560px);
	overflow: hidden;
}
.masthead__imagen-fondo {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 60%;
	animation: mastheadZoom 14s var(--suave) forwards;
}
@keyframes mastheadZoom { from { transform: scale(1.1); } to { transform: scale(1); } }
.masthead__imagen::after {
	content: '';
	position: absolute;
	inset: 18px;
	border: 1px solid rgba(228, 193, 126, .75);
	pointer-events: none;
}
.masthead__placa {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	background: var(--marron);
	color: var(--oro);
	padding: 1rem 2.6rem;
	clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 100%, 0 100%);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .3em;
	text-transform: uppercase;
	z-index: 2;
	white-space: nowrap;
}

/* Entrada del masthead */
.masthead__in { opacity: 0; transform: translateY(28px); animation: mastheadIn .9s var(--suave) forwards; }
.masthead__in--1 { animation-delay: .1s; }
.masthead__in--2 { animation-delay: .25s; }
.masthead__in--3 { animation-delay: .4s; }
.masthead__in--4 { animation-delay: .55s; }
@keyframes mastheadIn { to { opacity: 1; transform: none; } }

/* ---------- El salón (collage boutique) ---------- */

.salon__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.4rem, 6vw, 5rem); align-items: center; }
.salon__collage { position: relative; min-height: 540px; }
.salon__foto { margin: 0; position: absolute; }
.salon__foto--a { width: 74%; aspect-ratio: 4 / 5; top: 0; left: 0; }
.salon__foto--b { width: 46%; aspect-ratio: 1; bottom: 0; right: 0; box-shadow: 0 26px 60px rgba(59, 44, 22, .25); border: 8px solid var(--blanco); }
.salon__firma {
	position: absolute;
	top: -1.2rem;
	right: 6%;
	font-family: var(--script);
	font-size: clamp(2.2rem, 4vw, 3.2rem);
	color: #C9A159;
	transform: rotate(-4deg);
	z-index: 3;
}

/* ---------- Índice de servicios (filas con imagen al vuelo) ---------- */

.indice { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.indice__lista { list-style: none; margin: 0; padding: 0; }
.indice__lista a {
	display: flex;
	align-items: baseline;
	gap: 1.4rem;
	padding: 1.5rem .4rem;
	border-bottom: 1px solid var(--linea);
	transition: background .4s var(--suave), padding-left .4s var(--suave);
}
.indice__lista li:first-child a { border-top: 1px solid var(--linea); }
.indice__lista a:hover { background: var(--marfil); padding-left: 1.2rem; }
.indice__num {
	font-family: var(--display);
	font-size: .95rem;
	color: #B08A45;
	min-width: 2.4rem;
	letter-spacing: .1em;
}
.indice__nombre {
	font-family: var(--display);
	font-size: clamp(1.4rem, 2.6vw, 2rem);
	color: var(--marron);
	flex: 1;
	transition: color .3s var(--suave);
}
.indice__lista a:hover .indice__nombre { color: #8A6A2C; }
.indice__meta { font-size: .78rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--tinta-suave); white-space: nowrap; }
.indice__lista a:hover .indice__meta { color: #B08A45; }

.indice__visor {
	position: sticky;
	top: calc(var(--header-h) + 1.5rem);
	aspect-ratio: 3 / 4;
	overflow: hidden;
}
.indice__visor img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.06);
	transition: opacity .6s var(--suave), transform 1.2s var(--suave);
}
.indice__visor img.is-activa { opacity: 1; transform: scale(1); }
.indice__visor::after {
	content: '';
	position: absolute;
	inset: 14px;
	border: 1px solid var(--oro);
	pointer-events: none;
	z-index: 2;
}

/* ---------- Banda INDIBA / bandas marrones ---------- */

.banda-marron {
	background: var(--marron);
	color: var(--oro);
}
.banda-marron .cejilla { color: var(--oro); }
.banda-marron .cejilla::after, .banda-marron .cejilla--centro::before { background: var(--oro-suave); }
.banda-marron h2, .banda-marron h3 { color: var(--oro); }
.banda-marron p { color: rgba(228, 193, 126, .85); }
.banda-marron .script { color: var(--oro); }
.banda-marron a { color: var(--oro); }

.indiba__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2.4rem, 6vw, 5rem); align-items: center; }
.indiba__figura { margin: 0; }
.indiba__lista { list-style: none; margin: 1.4rem 0 2rem; padding: 0; }
.indiba__lista li {
	display: flex;
	gap: .9rem;
	align-items: baseline;
	padding: .65rem 0;
	border-bottom: 1px solid rgba(228, 193, 126, .2);
	font-size: .98rem;
}
.indiba__lista li::before { content: '✦'; color: var(--oro); font-size: .7em; flex: none; }
.indiba__badge {
	display: inline-block;
	background: var(--oro);
	color: var(--marron);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .26em;
	text-transform: uppercase;
	padding: .5rem 1.2rem;
	clip-path: var(--chaflan);
	margin-bottom: 1.2rem;
}

/* ---------- Tarjetas de servicio / bioterapias ---------- */

.tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.3rem, 2.8vw, 2.2rem); }
.tarjeta {
	background: var(--blanco);
	border: 1px solid var(--linea);
	clip-path: var(--chaflan);
	padding: 2.1rem 1.9rem 1.9rem;
	transition: transform .45s var(--suave), box-shadow .45s var(--suave), border-color .45s var(--suave);
	display: flex;
	flex-direction: column;
	gap: .4rem;
}
.tarjeta:hover { transform: translateY(-7px); border-color: var(--oro); box-shadow: 0 22px 44px rgba(59, 44, 22, .1); }
.tarjeta__num { font-family: var(--display); color: #B08A45; font-size: .9rem; letter-spacing: .12em; }
.tarjeta h3 { margin-bottom: .2rem; }
.tarjeta p { color: var(--tinta-suave); font-size: .96rem; margin: 0; flex: 1; }
.tarjeta__pie {
	margin-top: 1.1rem;
	padding-top: .9rem;
	border-top: 1px solid var(--oro-suave);
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #B08A45;
}

/* ---------- Filas de tratamiento (páginas de servicios) ---------- */

.trat-seccion { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2.2rem, 5vw, 4.2rem); align-items: start; }
.trat-seccion--invertida { grid-template-columns: 1.15fr .85fr; }
.trat-seccion__aside { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.trat-seccion__aside figure { margin: 0 0 1.5rem; }
.trat-seccion__aside .cejilla { margin-bottom: .7rem; }

.fila-trat { list-style: none; margin: 0; padding: 0; }
.fila-trat > li { padding: 1.3rem .2rem; border-bottom: 1px solid var(--linea); }
.fila-trat > li:first-child { border-top: 1px solid var(--linea); }
.fila-trat__cabeza { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.fila-trat__nombre { font-family: var(--display); font-size: 1.28rem; color: var(--marron); }
.fila-trat__duracion {
	margin-left: auto;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--marron);
	background: var(--oro-tenue);
	border: 1px solid var(--oro-suave);
	padding: .28rem .8rem;
	white-space: nowrap;
}
.fila-trat__desc { margin: .45rem 0 0; color: var(--tinta-suave); font-size: .97rem; max-width: 620px; }

.nota-precios {
	font-size: .88rem;
	color: var(--tinta-suave);
	font-style: italic;
	margin-top: 1.2rem;
}

/* ---------- FAQ ---------- */

.faq { border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.2rem .2rem;
	font-family: var(--display);
	font-size: 1.15rem;
	color: var(--marron);
	transition: color .3s var(--suave);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; margin-left: auto; color: #B08A45; font-size: 1.3rem; transition: transform .35s var(--suave); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: #8A6A2C; }
.faq details p { margin: 0 0 1.2rem; padding: 0 .2rem; color: var(--tinta-suave); max-width: 680px; }

/* ---------- Cabecera editorial de páginas interiores ---------- */

.pagina-cabecera {
	padding: calc(var(--header-h) + clamp(2.2rem, 4.5vw, 3.6rem)) 0 0;
	text-align: center;
}
.pagina-cabecera__miga {
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--tinta-suave);
	margin-bottom: 1.2rem;
}
.pagina-cabecera__miga a { color: #B08A45; }
.pagina-cabecera__script {
	font-family: var(--script);
	font-size: clamp(2rem, 4.2vw, 3rem);
	color: #C9A159;
	transform: rotate(-2deg);
	display: block;
	margin-bottom: .3rem;
}
.pagina-cabecera__titulo { max-width: 860px; margin: 0 auto .8rem; }
.pagina-cabecera__sub { max-width: 620px; margin: 0 auto; color: var(--tinta-suave); font-size: 1.1rem; }
.pagina-cabecera__imagen {
	position: relative;
	margin-top: clamp(2.2rem, 4.5vw, 3.6rem);
	height: clamp(280px, 44vh, 440px);
	overflow: hidden;
}
.pagina-cabecera__imagen-fondo {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	animation: mastheadZoom 14s var(--suave) forwards;
}
.pagina-cabecera__imagen::after {
	content: '';
	position: absolute;
	inset: 16px;
	border: 1px solid rgba(228, 193, 126, .75);
	pointer-events: none;
}

/* ---------- Secretos del Agua ---------- */

.sda__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.4rem, 6vw, 5rem); align-items: center; }
.sda__logo { max-width: 180px; margin-bottom: 1.4rem; }
.sda__logo svg { width: 100%; height: auto; }

.productos { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.2rem, 2.4vw, 1.9rem); }
.producto {
	background: var(--marfil);
	clip-path: var(--chaflan);
	padding: 1.8rem 1.4rem 1.6rem;
	text-align: center;
	transition: transform .45s var(--suave);
}
.producto:hover { transform: translateY(-7px); }
.producto figure { margin: 0 0 1.1rem; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.producto img { max-height: 100%; width: auto; mix-blend-mode: multiply; transition: transform .55s var(--suave); }
.producto:hover img { transform: scale(1.06); }
.producto h3 { font-size: 1.08rem; margin-bottom: .25rem; }
.producto p { font-size: .87rem; color: var(--tinta-suave); margin: 0; }

.lineas { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.3rem, 2.8vw, 2.2rem); }
.linea-card { position: relative; overflow: hidden; aspect-ratio: 3 / 4; display: flex; align-items: flex-end; }
.linea-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--suave); }
.linea-card:hover img { transform: scale(1.07); }
.linea-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(185deg, rgba(59, 44, 22, 0) 40%, rgba(59, 44, 22, .82));
	z-index: 1;
}
.linea-card::after {
	content: '';
	position: absolute;
	inset: 14px;
	border: 1px solid rgba(228, 193, 126, .55);
	z-index: 2;
	pointer-events: none;
}
.linea-card__body { position: relative; z-index: 3; padding: 1.8rem; color: var(--oro); }
.linea-card__body h3 { color: var(--oro); margin-bottom: .3rem; }
.linea-card__body p { color: rgba(228, 193, 126, .85); font-size: .93rem; margin: 0; }

/* ---------- Cita / banda con imagen ---------- */

.cita-banda {
	position: relative;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	text-align: center;
}
@media (hover: none) { .cita-banda { background-attachment: scroll; } }
.cita-banda__velo { position: absolute; inset: 0; background: rgba(59, 44, 22, .72); }
.cita-banda__inner { position: relative; z-index: 2; padding: clamp(4.2rem, 8vw, 6.5rem) 0; }
.cita-banda .script { color: var(--oro); }
.cita-banda h2 { color: #F8F3E9; }
.cita-banda p { color: rgba(248, 243, 233, .85); max-width: 560px; margin-inline: auto; }
.cita-banda::after {
	content: '';
	position: absolute;
	inset: 16px;
	border: 1px solid rgba(228, 193, 126, .4);
	pointer-events: none;
	z-index: 1;
}

/* ---------- Novias ---------- */

.novias__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.4rem, 6vw, 5rem); align-items: center; }

.pasos { list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.pasos > li {
	counter-increment: paso;
	position: relative;
	padding: 0 0 2rem 3.4rem;
	border-left: 1px solid var(--oro-suave);
	margin-left: 1.1rem;
}
.pasos > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.pasos > li::before {
	content: counter(paso, upper-roman);
	position: absolute;
	left: -1.15rem;
	top: 0;
	width: 2.3rem;
	height: 2.3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--marron);
	color: var(--oro);
	font-family: var(--display);
	font-size: .82rem;
	clip-path: var(--chaflan);
}
.pasos h3 { font-size: 1.25rem; margin-bottom: .3rem; }
.pasos p { color: var(--tinta-suave); font-size: .97rem; margin: 0; max-width: 560px; }

/* ---------- Contacto ---------- */

.contacto__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.4rem, 6vw, 4.5rem); align-items: start; }

.form-v37 { display: grid; gap: 1.1rem; }
.form-v37 label { display: block; font-size: .74rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; margin-bottom: .4rem; color: var(--tinta-suave); }
.form-v37 input[type="text"],
.form-v37 input[type="email"],
.form-v37 input[type="tel"],
.form-v37 select,
.form-v37 textarea {
	width: 100%;
	box-sizing: border-box;
	background: var(--marfil);
	border: 1px solid transparent;
	border-bottom: 1px solid var(--linea);
	padding: .95rem 1.1rem;
	font: inherit;
	color: var(--tinta);
	transition: border-color .3s var(--suave), background .3s var(--suave);
}
.form-v37 input:focus, .form-v37 select:focus, .form-v37 textarea:focus {
	outline: none;
	background: var(--blanco);
	border-color: var(--oro);
}
.form-v37 textarea { min-height: 150px; resize: vertical; }
.form-v37__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form-v37__check { display: flex; gap: .7rem; align-items: flex-start; font-size: .85rem; color: var(--tinta-suave); }
.form-v37__check input { margin-top: .3rem; accent-color: var(--marron); }
.form-v37__legal { font-size: .77rem; color: var(--tinta-suave); line-height: 1.55; }
.form-v37 .btn { justify-self: start; }
.form-v37__hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.aviso-envio {
	padding: 1rem 1.3rem;
	margin-bottom: 1.4rem;
	font-size: .95rem;
	border: 1px solid var(--oro);
	background: var(--oro-tenue);
	clip-path: var(--chaflan);
}
.aviso-envio--error { border-color: #8A4E3D; background: rgba(138, 78, 61, .08); }

.panel-datos {
	background: var(--marron);
	color: var(--oro);
	clip-path: var(--chaflan);
	padding: clamp(2rem, 4vw, 2.8rem);
}
.panel-datos h3 { color: var(--oro); font-size: 1.3rem; }
.panel-datos .dato { display: flex; gap: 1rem; align-items: baseline; padding: .8rem 0; border-bottom: 1px solid rgba(228, 193, 126, .2); font-size: .97rem; }
.panel-datos .dato:last-of-type { border-bottom: 0; }
.panel-datos .dato i { color: var(--oro); width: 1.3rem; flex: none; }
.panel-datos a { color: #F1DCB2; }
.panel-datos a:hover { color: var(--blanco); }
.panel-datos .horario { width: 100%; border-collapse: collapse; margin-top: .4rem; font-size: .93rem; }
.panel-datos .horario td { padding: .5rem 0; border-bottom: 1px solid rgba(228, 193, 126, .15); }
.panel-datos .horario td:last-child { text-align: right; color: #F1DCB2; }

.mapa { position: relative; overflow: hidden; line-height: 0; border: 1px solid var(--linea); }
.mapa::after { content: ''; position: absolute; inset: 12px; border: 1px solid var(--oro-suave); pointer-events: none; }
.mapa iframe { width: 100%; height: 480px; border: 0; filter: sepia(.28) saturate(.8); }

/* ---------- Galería breve ---------- */

.mosaico { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.9rem, 2vw, 1.4rem); }
.mosaico figure { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; }
.mosaico img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--suave); }
.mosaico figure:hover img { transform: scale(1.06); }

/* ---------- Footer tríptico marrón/oro ---------- */

.site-footer {
	background: var(--marron);
	color: var(--oro);
}
.site-footer__inner { width: min(1200px, 92vw); margin-inline: auto; padding: clamp(3.6rem, 7vw, 5.5rem) 0 1.8rem; }

.site-footer__triptico {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
	padding-bottom: clamp(2.4rem, 5vw, 3.6rem);
}
.site-footer__col--izq { text-align: right; }
.site-footer__col--der { text-align: left; }

.site-footer__titulo {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: #F1DCB2;
	margin-bottom: 1.2rem;
}
.site-footer__col p { font-size: .95rem; color: rgba(228, 193, 126, .8); margin-bottom: 1rem; }
.site-footer__col a { color: rgba(228, 193, 126, .9); }
.site-footer__col a:hover { color: var(--blanco); }

.site-footer__menu { list-style: none; margin: 0; padding: 0; }
.site-footer__menu li { margin-bottom: .55rem; }
.site-footer__menu a {
	font-size: .95rem;
	color: rgba(228, 193, 126, .9);
	position: relative;
}
.site-footer__menu a:hover { color: var(--blanco); }

.site-footer__centro { text-align: center; max-width: 320px; }
.site-footer__sello { display: inline-block; padding: 6px; border: 1px solid var(--oro-suave); border-radius: 50%; }
.site-footer__sello img { height: 128px; width: 128px; border-radius: 50%; }
.site-footer__script {
	font-family: var(--script);
	font-size: 2.1rem;
	color: var(--oro);
	transform: rotate(-2deg);
	margin: 1.1rem 0 .4rem;
}
.site-footer__claim { font-size: .92rem; color: rgba(228, 193, 126, .75); }
.site-footer__social { display: flex; justify-content: center; gap: 1rem; margin-top: 1.2rem; }
.site-footer__social a {
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(228, 193, 126, .12);
	border: 1px solid var(--oro-suave);
	color: var(--oro);
	clip-path: var(--chaflan);
	transition: background .35s var(--suave), color .35s var(--suave);
}
.site-footer__social a:hover { background: var(--oro); color: var(--marron); }

.site-footer__bottom {
	border-top: 1px solid rgba(228, 193, 126, .25);
	padding-top: 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	font-size: .8rem;
}
.site-footer__legal { list-style: none; display: flex; gap: 1.5rem; margin: 0; padding: 0; flex-wrap: wrap; }
.site-footer__legal a, .site-footer__credit a { color: rgba(228, 193, 126, .6); }
.site-footer__legal a:hover, .site-footer__credit a:hover { color: var(--blanco); }
.site-footer__credit { margin: 0; color: rgba(228, 193, 126, .45); }

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
	.nav-barra { gap: 1rem; }
	.nav-barra a { font-size: .72rem; letter-spacing: .14em; }
	.site-header__cta { display: none; }
}

@media (max-width: 1020px) {
	:root { --header-h: 84px; }
	.site-header__banda { display: none; }
	.site-header__nav { display: none; }
	.site-header__inner { height: 84px; }
	.menu-toggle { display: inline-flex; }
	.productos { grid-template-columns: 1fr 1fr; }
	.site-footer__triptico { grid-template-columns: 1fr; text-align: center; }
	.site-footer__col--izq, .site-footer__col--der { text-align: center; }
	.site-footer__centro { margin-inline: auto; }
}

@media (max-width: 860px) {
	.salon__grid, .sda__grid, .novias__grid, .contacto__grid,
	.indiba__grid, .trat-seccion, .trat-seccion--invertida { grid-template-columns: 1fr; }
	.trat-seccion__aside { position: static; }
	.indice { grid-template-columns: 1fr; }
	.indice__visor { display: none; }
	.tarjetas, .lineas, .mosaico { grid-template-columns: 1fr; }
	.salon__collage { min-height: 440px; }
	.form-v37__fila { grid-template-columns: 1fr; }
	.cita-banda { background-attachment: scroll; }
	.site-footer__bottom { justify-content: center; text-align: center; }
}

@media (max-width: 560px) {
	.productos { grid-template-columns: 1fr 1fr; }
	.acciones .btn { width: 100%; box-sizing: border-box; }
	.masthead__placa { width: 88%; white-space: normal; padding: .8rem 1.2rem; letter-spacing: .18em; }
	.site-header__nombre { display: none; }
}