/* ==========================================================================
   Tequila Mi Tierra — estilos
   Paleta: barrica, carbón, hueso, paja, oro. Tipografía: Cormorant Garamond + Jost.
   ========================================================================== */

@property --mx { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --my { syntax: '<percentage>'; inherits: false; initial-value: 46%; }
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
	--negro: #0E0C0A;
	--carbon: #14110E;
	--sombra: #0A0807;
	--tierra: #1E100A;
	--hueso: #EFE7DA;
	--arena: #D9CDB8;
	--paja: #B3A898;
	--oro: #C9A45C;
	--oro-claro: color-mix(in srgb, var(--oro) 55%, #fff);
	--oro-oscuro: color-mix(in srgb, var(--oro) 70%, #000);
	--ambar: #D98A3D;
	--agave: #86ADA2;
	--tinta: #14110D;
	--linea: rgba(239, 231, 218, .12);
	--serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
	--pad: clamp(20px, 5.5vw, 80px);
	--seccion: clamp(96px, 13vw, 160px);
	--suave: cubic-bezier(.22, .61, .36, 1);
	--cine: cubic-bezier(.77, 0, .18, 1);
	--encabezado: 88px;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	scroll-padding-top: 72px;
	-webkit-text-size-adjust: 100%;
	background: var(--negro);
}

body {
	margin: 0;
	background: var(--negro);
	color: var(--hueso);
	font-family: var(--sans);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 300; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
figure { margin: 0; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }

::selection { background: var(--oro); color: var(--tinta); }

.saltar {
	position: absolute;
	left: -9999px;
	top: 16px;
	z-index: 1000;
	padding: 12px 18px;
	background: var(--oro);
	color: var(--tinta);
	font-weight: 500;
}
.saltar:focus { left: 16px; }

/* Grano de película: una capa fija, casi imperceptible, que da textura de cine. */
body::after {
	content: "";
	position: fixed;
	inset: -50%;
	z-index: 950;
	pointer-events: none;
	opacity: .07;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
	animation: grano 1.2s steps(5) infinite;
}

@keyframes grano {
	0% { transform: translate(0, 0); }
	20% { transform: translate(-4%, 3%); }
	40% { transform: translate(3%, -2%); }
	60% { transform: translate(-2%, -4%); }
	80% { transform: translate(4%, 2%); }
	100% { transform: translate(0, 0); }
}

/* ---------- Tipografía y utilidades ---------- */

.eyebrow {
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .36em;
	text-transform: uppercase;
	color: var(--oro);
}

.display {
	font-family: var(--serif);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.005em;
}

.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 56px;
	padding: 0 32px;
	border: 1px solid transparent;
	overflow: hidden;
	font: 500 13px/1 var(--sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .4s var(--suave), color .4s var(--suave), border-color .4s var(--suave);
}
.btn svg { flex: none; }

.btn--oro {
	color: var(--tinta);
	background: linear-gradient(115deg, var(--oro-oscuro) 0%, var(--oro) 25%, var(--oro-claro) 50%, var(--oro) 75%, var(--oro-oscuro) 100%);
	background-size: 260% 100%;
	background-position: 0% 50%;
	box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--oro) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35);
	transition: background-position 1.2s var(--suave), box-shadow .6s var(--suave), transform .5s var(--suave), color .4s;
}
.btn--oro::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
	transform: translateX(-120%);
	animation: destello 5.5s var(--suave) 3s infinite;
}
.btn--oro:hover {
	background-position: 100% 50%;
	box-shadow: 0 20px 48px -12px color-mix(in srgb, var(--oro) 95%, transparent), inset 0 1px 0 rgba(255, 255, 255, .5);
}
@keyframes destello {
	0% { transform: translateX(-120%); }
	22%, 100% { transform: translateX(120%); }
}

.btn--linea {
	isolation: isolate;
	border-color: rgba(239, 231, 218, .45);
	color: var(--hueso);
	background: transparent;
	transition: color .5s var(--suave), border-color .5s var(--suave), transform .5s var(--suave);
}
.btn--linea::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(115deg, var(--oro-oscuro), var(--oro) 50%, var(--oro-claro));
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform .6s var(--cine);
}
.btn--linea:hover { color: var(--tinta); border-color: var(--oro); }
.btn--linea:hover::before { transform: scaleY(1); }

.btn--grande { min-height: 60px; padding: 0 44px; font-size: 14px; }
.btn__flecha { transition: transform .5s var(--suave); }
.btn:hover .btn__flecha { transform: translateX(5px); }
.btn > span, .btn > svg { position: relative; z-index: 1; }

.link-linea {
	align-self: flex-start;
	padding-bottom: 6px;
	font-size: 12px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--oro);
	background: linear-gradient(var(--oro), var(--oro)) left bottom / 100% 1px no-repeat;
	transition: background-size .6s var(--suave);
}
.link-linea:hover { background-size: 35% 1px; }

.cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px 48px;
	margin-bottom: clamp(40px, 5vw, 56px);
}
.cabecera__titulos { display: flex; flex-direction: column; gap: 16px; }
.cabecera .display { font-size: clamp(42px, 5vw, 64px); }
.cabecera__texto { max-width: 400px; font-size: 15px; color: var(--paja); }

.solo-lectores {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- Apertura: franjas de cine ---------- */

.franjas span {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 300;
	height: 14vh;
	background: #000;
	transition: transform 1.7s var(--cine);
}
.franjas span:first-child { top: 0; }
.franjas span:last-child { bottom: 0; }
html:not(.js) .franjas { display: none; }
html.is-ready .franjas span:first-child { transform: translateY(-100%); }
html.is-ready .franjas span:last-child { transform: translateY(100%); }

.progreso {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 120;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, var(--agave), var(--oro) 50%, var(--ambar));
	transform: scaleX(0);
	transform-origin: left;
}

/* ---------- Encabezado ---------- */

.encabezado {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 110;
	display: flex;
	align-items: center;
	gap: 32px;
	height: var(--encabezado);
	padding: 0 var(--pad);
	border-bottom: 1px solid var(--linea);
	transition: transform .7s var(--suave), background-color .5s var(--suave), height .5s var(--suave), opacity 1.2s var(--suave) 1.1s;
}
.encabezado.is-solido {
	--encabezado: 72px;
	background: rgba(14, 12, 10, .82);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}
.encabezado.is-oculto { transform: translateY(-100%); }
html.js .es-portada .encabezado { opacity: 0; }
html.js.is-ready .es-portada .encabezado { opacity: 1; }

.logo { display: inline-flex; flex-direction: column; gap: 3px; line-height: 1; margin-right: auto; }
.logo small { font-size: 10px; letter-spacing: .46em; text-transform: uppercase; color: var(--oro); }
.logo span { font-family: var(--serif); font-size: 28px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; }
.logo img { width: auto; max-height: 52px; }

.nav { display: flex; gap: clamp(24px, 3vw, 44px); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.nav a { position: relative; padding: 8px 0; }
.nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--oro);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .6s var(--suave);
}
.nav a:hover::after, .nav a.is-activo::after { transform: scaleX(1); transform-origin: left; }

.encabezado__cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 22px;
	border: 1px solid var(--oro);
	color: var(--oro);
	font-size: 12px;
	letter-spacing: .2em;
	text-transform: uppercase;
	transition: color .5s var(--suave), transform .5s var(--suave);
}
.encabezado__cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--oro);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .6s var(--cine);
}
.encabezado__cta:hover { color: var(--tinta); }
.encabezado__cta:hover::before { transform: scaleX(1); transform-origin: left; }

.menu-btn {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.menu-btn span {
	position: absolute;
	right: 8px;
	height: 1px;
	background: var(--hueso);
	transition: transform .5s var(--suave), width .5s var(--suave), top .5s var(--suave);
}
.menu-btn span:first-child { top: 18px; width: 26px; }
.menu-btn span:last-child { top: 26px; width: 18px; }
.menu-abierto .menu-btn span:first-child { top: 22px; width: 26px; transform: rotate(45deg); }
.menu-abierto .menu-btn span:last-child { top: 22px; width: 26px; transform: rotate(-45deg); }

/* Menú de celular: se abre como un telón. */
.menu {
	position: fixed;
	inset: 0;
	z-index: 105;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 40px;
	padding: 96px var(--pad) 48px;
	background: rgba(10, 8, 7, .97);
	clip-path: inset(0 0 100% 0);
	visibility: hidden;
	transition: clip-path .8s var(--cine), visibility 0s linear .8s;
}
.menu.is-abierto { clip-path: inset(0); visibility: visible; transition: clip-path .8s var(--cine), visibility 0s; }
.menu nav { display: flex; flex-direction: column; gap: 6px; }
.menu nav a {
	font-family: var(--serif);
	font-size: clamp(40px, 11vw, 64px);
	font-weight: 300;
	line-height: 1.15;
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .6s var(--suave), transform .7s var(--suave);
}
.menu.is-abierto nav a { opacity: 1; transform: none; transition-delay: calc(var(--i) * 70ms + 250ms); }
.menu__pie { font-size: 14px; color: var(--paja); }
.menu-abierto body { overflow: hidden; }

/* ---------- Verificación de edad ---------- */

.edad {
	position: fixed;
	inset: 0;
	z-index: 400;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 32px 24px;
	overflow-y: auto;
	background: var(--sombra);
	text-align: center;
	transition: opacity 1s var(--suave) .45s, visibility 0s linear 1.5s;
}
html:not(.js) .edad, html.mt-edad-ok .edad { display: none; }
.edad-abierta body { overflow: hidden; }

/* Fondo animado: campo que respira, rayos de sol que se mecen, brillo en el horizonte y brasas doradas. */
.edad__fondo { position: fixed; inset: 0; overflow: hidden; transition: transform 1.6s var(--cine), filter 1.6s var(--cine); }
.edad__fondo picture, .edad__fondo img { width: 100%; height: 100%; }
.edad__fondo img {
	object-fit: cover;
	opacity: .5;
	filter: saturate(.75) brightness(.8);
	animation: deriva 38s ease-in-out infinite alternate;
}
@keyframes deriva {
	0% { transform: scale(1.06) translate3d(0, 0, 0); }
	100% { transform: scale(1.2) translate3d(-2.5%, -1.5%, 0); }
}
.edad__rayos {
	position: absolute;
	left: -50%;
	right: -50%;
	top: -30%;
	height: 150%;
	background: repeating-conic-gradient(from 180deg at 50% 0%, rgba(241, 215, 152, 0) 0deg, rgba(241, 215, 152, .09) 3deg, rgba(241, 215, 152, 0) 7deg, rgba(241, 215, 152, 0) 13deg);
	-webkit-mask-image: radial-gradient(ellipse 50% 70% at 50% 0%, #000 10%, transparent 75%);
	mask-image: radial-gradient(ellipse 50% 70% at 50% 0%, #000 10%, transparent 75%);
	mix-blend-mode: screen;
	transform-origin: 50% 0%;
	animation: mecer 16s ease-in-out infinite alternate;
}
@keyframes mecer {
	0% { transform: rotate(-7deg); opacity: .7; }
	50% { opacity: 1; }
	100% { transform: rotate(7deg); opacity: .75; }
}
.edad__horizonte {
	position: absolute;
	left: -10%;
	right: -10%;
	bottom: -30%;
	height: 70%;
	background: radial-gradient(ellipse 50% 50% at 50% 60%, rgba(217, 138, 61, .5), rgba(201, 164, 92, .15) 45%, transparent 72%);
	mix-blend-mode: screen;
	animation: respirar 7s ease-in-out infinite alternate;
}
@keyframes respirar {
	from { opacity: .55; transform: scale(1); }
	to { opacity: 1; transform: scale(1.08); }
}
.edad__fondo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 65% 60% at 50% 48%, rgba(10, 8, 7, .35), rgba(10, 8, 7, .93));
}
.brasas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

.edad__caja { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 28px; max-width: 680px; transition: opacity .6s var(--suave), transform .8s var(--suave), filter .8s var(--suave); }
.logo--centro { align-items: center; margin: 0; }
.logo--centro span { font-size: 38px; letter-spacing: .3em; }
.edad__linea { width: 1px; height: 56px; background: linear-gradient(var(--oro), transparent); transform-origin: top; animation: trazo 1.4s var(--cine) .5s both; }
@keyframes trazo { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.edad__paso { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.edad__titulo { font-family: var(--serif); font-size: clamp(38px, 6vw, 64px); line-height: 1.05; max-width: 14em; }
.edad__texto { max-width: 34em; color: var(--arena); }
.edad__acciones { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.edad__legal { position: relative; z-index: 2; margin-top: 44px; font-size: 12px; line-height: 1.8; color: var(--paja); }
.edad__legal a { text-decoration: underline; text-underline-offset: 3px; }
.edad__error { min-height: 1.6em; margin-top: -10px; font-size: 14px; color: #F3B9A9; }

.edad__entra { animation: entrar 1.3s var(--suave) both; animation-delay: calc(var(--i, 0) * 130ms + 350ms); }
@keyframes entrar {
	from { opacity: 0; transform: translateY(24px); filter: blur(8px); }
	to { opacity: 1; transform: none; filter: none; }
}

/* Al entrar: la cámara avanza hacia el campo y la pantalla se disuelve. */
.edad.is-saliendo { opacity: 0; visibility: hidden; pointer-events: none; }
.edad.is-saliendo .edad__fondo { transform: scale(1.35); filter: blur(4px); }
.edad.is-saliendo .edad__caja, .edad.is-saliendo .edad__legal { opacity: 0; transform: translateY(-24px) scale(.97); filter: blur(6px); }

.fecha { display: flex; align-items: flex-end; justify-content: center; gap: clamp(8px, 2vw, 16px); margin: 0; padding: 0; border: 0; }
.fecha__campo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fecha__campo label { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--paja); }
.fecha__campo input {
	width: 2.3em;
	padding: 4px 0 10px;
	border: 0;
	border-bottom: 1px solid rgba(239, 231, 218, .35);
	border-radius: 0;
	background: transparent;
	color: var(--hueso);
	font: 300 clamp(40px, 7vw, 56px)/1 var(--serif);
	text-align: center;
	caret-color: var(--oro);
	font-variant-numeric: lining-nums tabular-nums;
}
.fecha__campo--anio input { width: 4.4em; letter-spacing: .06em; }
.edad__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.fecha__campo input::placeholder { color: rgba(239, 231, 218, .25); }
.fecha__campo::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--oro-oscuro), var(--oro-claro), var(--oro-oscuro));
	transform: scaleX(0);
	transition: transform .6s var(--cine);
}
.fecha__campo:focus-within::after { transform: scaleX(1); }
.fecha__campo input:focus { outline: none; }
.fecha__sep { padding-bottom: 12px; font: 300 clamp(36px, 6vw, 48px)/1 var(--serif); color: rgba(239, 231, 218, .3); }
.fecha.is-error { animation: sacudir .55s var(--suave); }
.fecha.is-error .fecha__campo input { border-bottom-color: #E0826C; }
@keyframes sacudir {
	15%, 85% { transform: translateX(-3px); }
	30%, 70% { transform: translateX(7px); }
	45% { transform: translateX(-9px); }
	60% { transform: translateX(9px); }
}

.casilla { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; color: var(--arena); cursor: pointer; }
.casilla input { width: 20px; height: 20px; margin: 0; accent-color: var(--oro); flex: none; }
.casilla a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Portada ---------- */

.hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	height: 100vh;
	height: 100svh;
	min-height: 640px;
	overflow: hidden;
	background: var(--sombra);
}

.hero__media { position: absolute; top: -8%; left: 0; right: 0; bottom: -8%; will-change: transform; }
.hero__zoom { position: absolute; inset: 0; transform: scale(1.2); transition: transform 3.4s var(--cine); }
html:not(.js) .hero__zoom, html.is-ready .hero__zoom { transform: scale(1); }
.hero__zoom picture, .hero__zoom img { display: block; width: 100%; height: 100%; }
.hero__zoom img { object-fit: cover; object-position: center 62%; animation: acercar 26s var(--suave) 3.4s infinite alternate; }

@keyframes acercar {
	from { transform: scale(1); }
	to { transform: scale(1.08); }
}

.hero__velo {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(10, 8, 7, .9) 0%, rgba(10, 8, 7, .6) 40%, rgba(10, 8, 7, .08) 78%),
		linear-gradient(0deg, var(--negro) 0%, rgba(14, 12, 10, 0) 30%),
		linear-gradient(180deg, rgba(10, 8, 7, .75) 0%, rgba(10, 8, 7, 0) 24%);
}
.hero__velo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(201, 130, 60, 0) 40%, rgba(201, 130, 60, .22) 100%);
	mix-blend-mode: overlay;
}

.hero__contenido {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: 1100px;
	padding: 0 var(--pad) clamp(96px, 17vh, 200px);
}

.hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 12px;
	letter-spacing: .36em;
	text-transform: uppercase;
	color: var(--arena);
}
.hero__eyebrow::before { content: ""; width: 48px; height: 1px; background: var(--oro); flex: none; }

.hero__titulo {
	font-family: var(--serif);
	font-weight: 300;
	font-size: clamp(60px, 10vw, 152px);
	line-height: .92;
	letter-spacing: -.01em;
}
.linea { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.linea > span { display: block; }
.linea--acento > span { font-style: italic; color: var(--oro); padding-right: .06em; }
@supports (-webkit-background-clip: text) or (background-clip: text) {
	.linea--acento > span {
		background: linear-gradient(100deg, var(--oro) 0%, var(--oro) 38%, #F7E6B8 50%, var(--oro) 62%, var(--ambar) 100%);
		background-size: 260% 100%;
		background-position: 100% 0;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		animation: brillo 8s var(--suave) 4s infinite;
	}
}
@keyframes brillo {
	0% { background-position: 100% 0; }
	35%, 100% { background-position: 0% 0; }
}

.hero__texto { max-width: 520px; font-size: 18px; color: var(--arena); }
.hero__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

.btn-video {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	min-height: 56px;
	padding: 0 4px;
	border: 0;
	background: transparent;
	color: var(--hueso);
	font-size: 13px;
	letter-spacing: .2em;
	text-transform: uppercase;
	cursor: pointer;
}
.btn-video__circulo {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid rgba(239, 231, 218, .55);
	border-radius: 50%;
	transition: border-color .4s, background-color .4s;
}
.btn-video__circulo::after {
	content: "";
	position: absolute;
	inset: -1px;
	border: 1px solid var(--oro);
	border-radius: 50%;
	animation: pulso 2.4s var(--suave) infinite;
}
.btn-video:hover .btn-video__circulo { background: var(--oro); border-color: var(--oro); color: var(--tinta); }

@keyframes pulso {
	0% { transform: scale(1); opacity: .8; }
	100% { transform: scale(1.7); opacity: 0; }
}

.hero__cue {
	position: absolute;
	right: var(--pad);
	bottom: 44px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 11px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--arena);
}
.hero__cue-linea { position: relative; width: 64px; height: 1px; overflow: hidden; background: rgba(239, 231, 218, .25); }
.hero__cue-linea::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--oro);
	transform: translateX(-100%);
	animation: recorrer 2.6s var(--cine) infinite;
}
@keyframes recorrer {
	0% { transform: translateX(-100%); }
	55% { transform: translateX(0); }
	100% { transform: translateX(101%); }
}

/* Coreografía de apertura. */
html.js .linea > span { transform: translateY(110%); transition: transform 1.4s var(--cine); }
html.js .linea--acento > span { transition-delay: .15s; }
html.js.is-ready .linea > span { transform: none; transition-delay: .7s; }
html.js.is-ready .linea--acento > span { transition-delay: .85s; }

html.js [data-intro] { opacity: 0; transform: translateY(18px); transition: opacity 1.1s var(--suave), transform 1.1s var(--suave); }
html.js.is-ready [data-intro] { opacity: 1; transform: none; transition-delay: var(--d, 0s); }

/* ---------- Filosofía ---------- */

.manifiesto {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 36px;
	padding: calc(var(--seccion) * 1.1) var(--pad);
	text-align: center;
}
.manifiesto__texto {
	max-width: 1000px;
	font-family: var(--serif);
	font-size: clamp(32px, 4.2vw, 58px);
	font-weight: 300;
	line-height: 1.2;
}
.palabra { transition: opacity .5s var(--suave), color .5s var(--suave); }
html.js .palabra { opacity: .16; }
html.js .palabra.is-on { opacity: 1; }

/* ---------- Nuestro tequila ---------- */

.tequila {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	min-height: 820px;
	border-top: 1px solid var(--linea);
}

.tequila__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 80px 40px;
	overflow: hidden;
	background:
		radial-gradient(ellipse 48% 55% at var(--mx) var(--my), rgba(222, 170, 95, .42) 0%, rgba(120, 70, 30, .15) 45%, rgba(18, 14, 11, 0) 75%),
		#120E0B;
	transition: --mx 1.2s var(--suave), --my 1.2s var(--suave);
}
.tequila__botellas { position: relative; z-index: 1; width: min(660px, 100%); will-change: transform; }
.tequila__botellas img { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); }
.tequila__piso {
	position: absolute;
	left: 12%;
	right: 12%;
	bottom: 16%;
	height: 48px;
	border-radius: 50%;
	background: radial-gradient(ellipse, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0) 70%);
}

.tequila__texto {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 28px;
	max-width: 680px;
	padding: clamp(64px, 8vw, 120px) var(--pad);
}
.tequila__titulo { font-size: clamp(56px, 6.5vw, 92px); line-height: .95; }
.tequila__desc { font-size: 17px; color: var(--paja); }

.lista-exp li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 4px 16px;
	padding: 16px 0;
	border-top: 1px solid rgba(239, 231, 218, .14);
}
.lista-exp li:last-child { border-bottom: 1px solid rgba(239, 231, 218, .14); }
.lista-exp__nombre { font-family: var(--serif); font-size: 28px; line-height: 1.2; }
.lista-exp__detalle { font-size: 13px; color: var(--paja); }

/* ---------- Expresiones ---------- */

.expresiones { padding: var(--seccion) var(--pad); }

.exp-grid { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 24px; }

.exp {
	display: flex;
	flex-direction: column;
	border: 1px solid transparent;
	background:
		linear-gradient(var(--carbon), var(--carbon)) padding-box,
		conic-gradient(from var(--ang), rgba(239, 231, 218, .08) 0deg, rgba(239, 231, 218, .08) 230deg, var(--oro) 290deg, var(--ambar) 320deg, rgba(239, 231, 218, .08) 360deg) border-box;
}
.exp:hover { animation: girar-borde 3.2s linear infinite; }
@keyframes girar-borde { to { --ang: 360deg; } }

.exp__escena {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 440px;
	padding: 0 16px 28px;
	overflow: hidden;
	perspective: 900px;
}
.exp__escena::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 60% 70% at 50% 45%, var(--luz), rgba(20, 17, 14, 0) 72%);
	opacity: .8;
	transition: opacity .8s var(--suave), transform 1s var(--suave);
}
.exp:hover .exp__escena::before { opacity: 1; transform: scale(1.15); }
.exp__escena::after {
	content: "";
	position: absolute;
	top: -20%;
	bottom: -20%;
	left: -70%;
	z-index: 2;
	width: 40%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16) 45%, rgba(255, 255, 255, .28) 50%, transparent);
	transform: skewX(-18deg);
	transition: left 1.2s var(--suave);
	pointer-events: none;
}
.exp:hover .exp__escena::after { left: 140%; }

.exp__escena img {
	position: relative;
	width: 100%;
	height: 360px;
	object-fit: contain;
	filter: drop-shadow(0 24px 24px rgba(0, 0, 0, .55));
	transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--sube, 0px)) scale(var(--escala, 1));
	transition: transform .7s var(--suave);
}
.exp:hover .exp__escena img { --sube: -10px; --escala: 1.03; }

.exp__num { position: absolute; left: 24px; top: 18px; z-index: 1; font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--paja); }

.exp__info {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 10px;
	padding: 28px 24px 32px;
	border-top: 1px solid rgba(239, 231, 218, .08);
}
.exp__nombre { font-family: var(--serif); font-size: 38px; line-height: 1; }
.exp__detalle { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--oro); font-variant-numeric: tabular-nums; }
.exp__notas { font-size: 14px; line-height: 1.6; color: var(--paja); }

/* ---------- Cinta ---------- */

.cinta {
	overflow: hidden;
	padding: 28px 0;
	border-top: 1px solid var(--linea);
	border-bottom: 1px solid var(--linea);
	white-space: nowrap;
}
.cinta__pista { display: inline-flex; align-items: center; gap: 56px; animation: cinta 48s linear infinite; will-change: transform; }
.cinta-js .cinta__pista { animation: none; }
.cinta__item {
	font-family: var(--serif);
	font-size: clamp(48px, 7vw, 104px);
	font-weight: 300;
	font-style: italic;
	line-height: 1.1;
	color: transparent;
	-webkit-text-stroke: 1px rgba(239, 231, 218, .38);
}
.cinta__sep { width: 10px; height: 10px; flex: none; transform: rotate(45deg); background: var(--oro); }
@keyframes cinta {
	to { transform: translateX(calc(-50% - 28px)); }
}

/* ---------- Proceso ---------- */

.proceso { padding: var(--seccion) var(--pad); background: var(--sombra); }
.proc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.proc { display: flex; flex-direction: column; gap: 20px; }
.proc__marco { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #140F0B; }
.proc__marco img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.6s var(--cine);
}
.proc__marco::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(10, 8, 7, .7) 0%, rgba(10, 8, 7, 0) 45%);
}
.proc:hover .proc__marco img { transform: scale(1.05); }
.proc__num { position: absolute; left: 24px; top: 12px; z-index: 1; font-family: var(--serif); font-style: italic; font-size: 64px; line-height: 1.2; color: rgba(239, 231, 218, .92); }
.proc__titulo { font-family: var(--serif); font-size: 32px; line-height: 1.1; margin-bottom: 8px; }
.proc__texto { font-size: 15px; color: var(--paja); }

/* Las fotos del proceso entran como un corte de película. */
html.js .proc__marco { clip-path: inset(0 100% 0 0); transition: clip-path 1.5s var(--cine); transition-delay: var(--d, 0s); }
html.js .proc__marco img { transform: scale(1.18); }
html.js .proc.is-in .proc__marco { clip-path: inset(0 0 0 0); }
html.js .proc.is-in .proc__marco img { transform: scale(1); }
html.js .proc.is-in:hover .proc__marco img { transform: scale(1.05); }

/* ---------- Coctelería ---------- */

.cocteles { padding: var(--seccion) var(--pad); }
.coctel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.coctel { display: flex; flex-direction: column; gap: 12px; }
.coctel__escena {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 5;
	margin-bottom: 8px;
	overflow: hidden;
	background: radial-gradient(ellipse 55% 55% at 50% 55%, var(--luz), rgba(20, 17, 14, 0) 72%), #15100E;
}
.coctel__escena img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--suave); }
.coctel:hover .coctel__escena img { transform: scale(1.05); }
.coctel__nombre { font-family: var(--serif); font-size: 36px; line-height: 1.1; }
.coctel__base { font-size: 14px; color: var(--paja); }

/* ---------- Instagram ---------- */

.insta {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: var(--seccion) var(--pad);
	background: radial-gradient(ellipse 60% 80% at 50% 100%, rgba(200, 120, 60, .22) 0%, rgba(30, 16, 10, 0) 70%), var(--tierra);
}
.insta .display { font-size: clamp(36px, 5vw, 64px); overflow-wrap: anywhere; }
.insta-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.insta__item { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--carbon); }
.insta__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--suave), filter .6s; }
.insta__item--producto { background: radial-gradient(ellipse 60% 60% at 50% 55%, rgba(170, 84, 34, .45), rgba(0, 0, 0, 0) 70%), #160D08; }
.insta__item--producto img { object-fit: contain; padding: 18px; }
.insta__velo {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(10, 8, 7, .45);
	color: var(--hueso);
	opacity: 0;
	transition: opacity .5s var(--suave);
}
.insta__velo svg { width: 28px; height: 28px; transform: scale(.8); transition: transform .5s var(--suave); }
.insta__item:hover img, .insta__item:focus-visible img { transform: scale(1.08); }
.insta__item:hover .insta__velo, .insta__item:focus-visible .insta__velo { opacity: 1; }
.insta__item:hover .insta__velo svg { transform: none; }

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

.contacto {
	display: grid;
	grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
	align-items: center;
	gap: clamp(48px, 7vw, 96px);
	padding: var(--seccion) var(--pad);
	background: var(--sombra);
	border-top: 1px solid var(--linea);
}
.contacto__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.contacto__titulo { font-size: clamp(56px, 6vw, 80px); }
.contacto__desc { font-size: 16px; color: var(--paja); }
.contacto__datos { display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: 15px; color: var(--arena); }
.contacto__datos a { border-bottom: 1px solid rgba(239, 231, 218, .25); transition: color .3s, border-color .3s; }
.contacto__datos a:hover { color: var(--oro); border-color: var(--oro); }

.formulario {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: clamp(24px, 3.5vw, 40px);
	background: var(--carbon);
	border: 1px solid rgba(239, 231, 218, .1);
}
.formulario__fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo label { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--arena); }
.campo input, .campo textarea {
	width: 100%;
	min-height: 52px;
	padding: 14px 16px;
	border: 1px solid rgba(239, 231, 218, .3);
	border-radius: 0;
	background: transparent;
	color: var(--hueso);
	font: 300 16px/1.5 var(--sans);
	transition: border-color .3s, background-color .3s;
}
.campo textarea { resize: vertical; min-height: 140px; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--oro); background: rgba(201, 164, 92, .05); }
.formulario__enviar { align-self: flex-start; border-color: var(--oro); color: var(--oro); }
.formulario__aviso { padding: 14px 16px; font-size: 15px; border: 1px solid; }
.formulario__aviso--ok { border-color: rgba(201, 164, 92, .6); color: var(--oro); background: rgba(201, 164, 92, .08); }
.formulario__aviso--error { border-color: rgba(230, 120, 100, .6); color: #F0B4A6; background: rgba(230, 120, 100, .08); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Pie de página ---------- */

.pie {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 64px;
	padding: 96px var(--pad) 48px;
	overflow: hidden;
	border-top: 1px solid var(--linea);
}
.pie__marca {
	position: absolute;
	left: 50%;
	bottom: -.28em;
	transform: translateX(-50%);
	font-family: var(--serif);
	font-size: clamp(120px, 21vw, 320px);
	font-weight: 300;
	letter-spacing: .1em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgba(239, 231, 218, .04);
	pointer-events: none;
}
.pie__arriba {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-bottom: 56px;
	border-bottom: 1px solid var(--linea);
}
.pie__frase { max-width: 620px; font-family: var(--serif); font-size: clamp(30px, 3.4vw, 44px); line-height: 1.15; }
.pie__cols { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.pie__col { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 14px; line-height: 2; color: var(--paja); }
.pie__col a { transition: color .3s; }
.pie__col a:hover { color: var(--oro); }
.pie__titulo { margin-bottom: 10px; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--oro); }
.pie__redes { display: flex; gap: 12px; }
.red {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(239, 231, 218, .25);
	border-radius: 50%;
	color: var(--hueso);
	transition: border-color .3s, color .3s, background-color .3s;
}
.red:hover { border-color: var(--oro); background: var(--oro); color: var(--tinta); }
.pie__base {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px 32px;
	padding-top: 28px;
	border-top: 1px solid var(--linea);
	font-size: 12px;
	letter-spacing: .06em;
	color: #A69C8E;
}
.pie__legales { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.pie__legales a:hover { color: var(--oro); }
.pie__leyenda { letter-spacing: .18em; text-transform: uppercase; }

.wa-flotante {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--oro);
	color: var(--tinta);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
	transform: translateY(120px);
	transition: transform .7s var(--suave), background-color .3s;
}
.wa-flotante.is-visible { transform: none; }
.wa-flotante:hover { background: var(--hueso); }
html:not(.js) .wa-flotante { transform: none; }

/* ---------- Video ---------- */

.video {
	width: min(1100px, 92vw);
	max-width: none;
	padding: 0;
	border: 0;
	background: #000;
	color: var(--hueso);
}
.video::backdrop { background: rgba(0, 0, 0, .9); }
.video__marco { aspect-ratio: 16 / 9; }
.video__marco iframe { width: 100%; height: 100%; border: 0; display: block; }
.video__cerrar {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .6);
	cursor: pointer;
}
.video[open] { animation: abrir-video .6s var(--suave); }
@keyframes abrir-video {
	from { opacity: 0; transform: scale(.96); }
	to { opacity: 1; transform: none; }
}

/* ---------- Páginas interiores ---------- */

.pagina { max-width: 820px; margin: 0 auto; padding: 180px var(--pad) 120px; }
.pagina__titulo { font-family: var(--serif); font-size: clamp(44px, 6vw, 72px); line-height: 1.05; margin-bottom: 40px; }
.pagina__titulo--chico { font-size: 40px; margin-bottom: 16px; }
.pagina--404 { display: flex; flex-direction: column; gap: 24px; min-height: 70vh; justify-content: center; }
.pagina--404 .pagina__titulo { margin: 0; }
.entrada + .entrada { margin-top: 64px; }
.contenido-wp { font-size: 17px; color: var(--arena); }
.contenido-wp > * + * { margin-top: 1.2em; }
.contenido-wp h2, .contenido-wp h3 { font-family: var(--serif); color: var(--hueso); line-height: 1.2; margin-top: 1.8em; }
.contenido-wp h2 { font-size: 36px; }
.contenido-wp h3 { font-size: 28px; }
.contenido-wp a { color: var(--oro); text-decoration: underline; text-underline-offset: 3px; }
.contenido-wp ul, .contenido-wp ol { padding-left: 1.4em; }
.contenido-wp ul { list-style: disc; }

/* ---------- Entradas al hacer scroll (solo tarjetas) ---------- */

html.js .exp[data-reveal], html.js .coctel[data-reveal] {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 1.1s var(--suave), transform 1.1s var(--suave), border-color .6s var(--suave);
	transition-delay: var(--d, 0s), var(--d, 0s), 0s;
}
html.js .exp.is-in, html.js .coctel.is-in { opacity: 1; transform: none; }

/* ---------- Títulos que emergen de una máscara ---------- */

html.js .titulo-mascara { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
html.js .titulo-interior { display: block; transform: translateY(108%); transition: transform 1.3s var(--cine); }
html.js .is-in .titulo-interior { transform: none; }

/* ---------- Brasas sobre la portada ---------- */

.hero__brasas { z-index: 1; opacity: .85; }

/* ---------- Luz que sigue al cursor ---------- */

.luz-cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 3;
	width: 520px;
	height: 520px;
	margin: -260px 0 0 -260px;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--oro) 16%, transparent), transparent 65%);
	mix-blend-mode: screen;
	pointer-events: none;
	opacity: 0;
	transition: opacity .6s var(--suave);
	will-change: transform;
}
.luz-cursor.is-activa { opacity: 1; }
.edad-abierta .luz-cursor { display: none; }

/* ---------- Instagram: fondo con luces que se desplazan ---------- */

.insta::before, .insta::after {
	content: "";
	position: absolute;
	z-index: -1;
	width: 60vw;
	height: 60vw;
	border-radius: 50%;
	filter: blur(40px);
	opacity: .5;
	pointer-events: none;
}
.insta::before { left: -15vw; top: -20vw; background: radial-gradient(circle, rgba(217, 138, 61, .35), transparent 65%); animation: flotar 22s ease-in-out infinite alternate; }
.insta::after { right: -20vw; bottom: -30vw; background: radial-gradient(circle, rgba(134, 173, 162, .22), transparent 65%); animation: flotar 26s ease-in-out -8s infinite alternate-reverse; }
@keyframes flotar {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to { transform: translate3d(12vw, 8vw, 0) scale(1.15); }
}

/* ---------- Marca gigante del pie ---------- */

.pie__marca span { display: inline-block; transition: transform 1.4s var(--cine), opacity 1.4s var(--suave); transition-delay: calc(var(--i, 0) * 60ms); }
html.js .pie__marca span { transform: translateY(45%); opacity: 0; }
html.js .pie.is-in .pie__marca span { transform: none; opacity: 1; }

/* ---------- Botón de música ---------- */

.sonido {
	position: fixed;
	left: 24px;
	bottom: 24px;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 48px;
	padding: 0 18px 0 16px;
	border: 1px solid rgba(239, 231, 218, .22);
	border-radius: 999px;
	background: rgba(14, 12, 10, .72);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: var(--hueso);
	cursor: pointer;
	transition: border-color .4s var(--suave), background-color .4s var(--suave), transform .5s var(--suave);
}
.sonido:hover { border-color: var(--oro); }
.sonido__texto { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--arena); }
.sonido__barras { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.sonido__barras i {
	display: block;
	width: 2px;
	height: 100%;
	border-radius: 1px;
	background: var(--oro);
	transform: scaleY(.22);
	transform-origin: bottom;
	transition: transform .5s var(--suave);
}
.sonido.is-sonando .sonido__barras i { animation: ecualizador 1.1s ease-in-out infinite alternate; }
.sonido.is-sonando .sonido__barras i:nth-child(2) { animation-duration: .8s; animation-delay: -.3s; }
.sonido.is-sonando .sonido__barras i:nth-child(3) { animation-duration: 1.3s; animation-delay: -.6s; }
.sonido.is-sonando .sonido__barras i:nth-child(4) { animation-duration: .95s; animation-delay: -.15s; }
@keyframes ecualizador {
	0% { transform: scaleY(.25); }
	50% { transform: scaleY(1); }
	100% { transform: scaleY(.45); }
}
.sonido.is-invitando { animation: invitar 2.4s var(--suave) 3; }
@keyframes invitar {
	0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--oro) 50%, transparent); }
	50% { box-shadow: 0 0 0 10px transparent; }
}
.edad-abierta .sonido { opacity: 0; pointer-events: none; }

/* ---------- Adaptable ---------- */

@media (max-width: 1180px) {
	.exp-grid { grid-template-columns: repeat(min(var(--n, 3), 2), minmax(0, 1fr)); }
	.insta-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.insta-grid .insta__item:nth-child(n+4) { display: none; }
}

@media (max-width: 1024px) {
	.nav, .encabezado__cta { display: none; }
	.menu-btn { display: block; }
	.encabezado { --encabezado: 72px; }
	.tequila { grid-template-columns: 1fr; min-height: 0; }
	.tequila__media { min-height: 520px; }
	.tequila__texto { max-width: none; }
	.contacto { grid-template-columns: 1fr; }
	.pie__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	body { font-size: 15px; }
	.logo span { font-size: 22px; letter-spacing: .24em; }
	.logo small { font-size: 8px; }
	.hero { min-height: 600px; }
	.hero__velo {
		background:
			linear-gradient(180deg, rgba(10, 8, 7, .85) 0%, rgba(10, 8, 7, .5) 40%, rgba(10, 8, 7, .45) 70%, var(--negro) 100%);
	}
	.hero__contenido { gap: 24px; padding-bottom: 104px; }
	.hero__eyebrow { font-size: 10px; letter-spacing: .28em; }
	.hero__eyebrow::before { width: 32px; }
	.hero__texto { font-size: 15px; }
	.hero__acciones { flex-direction: column; align-items: stretch; }
	.hero__acciones .btn, .btn-video { justify-content: center; }
	.hero__cue { left: var(--pad); right: auto; bottom: 36px; }
	.tequila__media { min-height: 380px; padding: 56px 20px; }
	.exp-grid, .proc-grid, .coctel-grid { grid-template-columns: 1fr; }
	.exp__escena { height: 380px; }
	.exp__escena img { height: 320px; }
	.insta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.insta-grid .insta__item:nth-child(n+4) { display: block; }
	.insta-grid .insta__item:nth-child(5) { display: none; }
	.formulario__fila { grid-template-columns: 1fr; }
	.pie__cols { grid-template-columns: 1fr; gap: 32px; }
	.pie__base { flex-direction: column; align-items: flex-start; }
	.wa-flotante { right: 16px; bottom: 16px; }
	.sonido { left: 16px; bottom: 16px; width: 48px; padding: 0; justify-content: center; }
	.sonido__texto { display: none; }
	.franjas span { height: 10vh; }
	.edad__acciones, .edad__acciones .btn { width: 100%; }
	.edad__botones { flex-direction: column; align-items: stretch; width: 100%; }
	.luz-cursor { display: none; }
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
	.franjas { display: none; }
	html.js .linea > span, html.js [data-intro], html.js .exp[data-reveal], html.js .coctel[data-reveal] { opacity: 1; transform: none; }
	html.js .proc__marco { clip-path: none; }
	html.js .proc__marco img, .hero__zoom { transform: none; }
	html.js .palabra { opacity: 1; }
	html.js .titulo-interior, .pie__marca span { transform: none !important; opacity: 1 !important; }
	.brasas, .luz-cursor, .edad__rayos { display: none; }
	.sonido.is-sonando .sonido__barras i { transform: scaleY(.7); }
	html.js .es-portada .encabezado { opacity: 1; }
}