/*
Theme Name: Atena Frozen Yogurt
Author: Atena Frozen Yogurt
Description: Tema a medida para Atena Frozen Yogurt: portada animada con escena griega, concepto, historia, productos (tinas, barquillas y paletas), galería en movimiento, mapa de sedes de la Gran Caracas (Leaflet + CARTO), contacto por Instagram, WhatsApp y correo, y planilla de empleo con CV que llega al correo. Textos e imágenes en Apariencia → Personalizar → Atena; sedes, productos y postulaciones en el menú del escritorio.
Version: 1.4.1
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: atena
*/

/* ==========================================================================
   ÍNDICE
   1. Fuentes            9.  Productos
   2. Colores y medidas  10. Galería
   3. Base               11. Sedes y mapa
   4. Piezas comunes     12. Contacto
      (cintas y sello)   13. Trabaja con nosotros
   5. Encabezado         14. Pie de página
   6. Escena (portada)   15. Páginas y entradas
   7. Concepto           16. Movimiento
   8. Historia

   Para cambiar colores, letras o medidas en todo el sitio, cambia las variables
   de la sección 2 (:root). El resto del archivo las usa.
   ========================================================================== */

/* 1. Fuentes ---------------------------------------------------------------
   Liquidior Pro (títulos) y Open Sans (texto), según el Manual de Marca. */
@font-face {
	font-family: "Liquidior Pro";
	src: url("assets/fonts/liquidior-pro.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Open Sans";
	src: url("assets/fonts/open-sans-400.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Open Sans";
	src: url("assets/fonts/open-sans-400-italic.woff") format("woff");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Open Sans";
	src: url("assets/fonts/open-sans-600.woff") format("woff");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Open Sans";
	src: url("assets/fonts/open-sans-700.woff") format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* 2. Colores y medidas ------------------------------------------------------ */
:root {
	/* Paleta oficial (Manual de Marca Atena, junio 2024) */
	--oliva: #667202;          /* Verde esmeralda (principal) */
	--ocre: #b97727;           /* Ocre dorado */
	--crema: #f4dcb1;          /* Beige crema */
	--negro: #000;
	--blanco: #fff;
	/* Tonos derivados (para texto pequeño legible y estados) */
	--oliva-oscuro: #4b5401;
	--oliva-tinte: #eef1d8;
	--ocre-oscuro: #7a4a10;
	--ocre-tinte: #f8ead4;
	--crema-claro: #fbf1df;
	--linea: rgba(102, 114, 2, 0.22);
	--texto: #000;
	--texto-suave: rgba(0, 0, 0, 0.68);

	/* Letras */
	--f-titulo: "Liquidior Pro", "Liquidior", Georgia, serif;
	--f-texto: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--t-texto: 1.0625rem;
	--t-intro: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
	--t-h3: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
	--t-h2: clamp(2.6rem, 1.7rem + 3.4vw, 4.6rem);
	--t-portada: clamp(3.2rem, 1.2rem + 6.2vw, 7.6rem);

	/* Medidas */
	--ancho: 1240px;
	--ancho-texto: 760px;
	--margen: clamp(16px, 4vw, 40px);
	--seccion: clamp(4.5rem, 2.8rem + 6vw, 8.5rem);
	--radio: 20px;
	--cabecera: 76px;
	--sombra: 0 1px 2px rgba(60, 45, 10, 0.06), 0 10px 30px rgba(60, 45, 10, 0.1);

	/* Azules del encabezado y del pie */
	--azul: #5887da;
	--celeste: #a5c5ed;
	--marino: #10264d;
	--marino-suave: #24406f;

	/* Movimiento */
	--suave: cubic-bezier(0.2, 0.8, 0.2, 1);
	--rebote: cubic-bezier(0.3, 1.5, 0.5, 1);
}

/* 3. Base ------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--cabecera) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}
body {
	margin: 0;
	background: var(--blanco);
	color: var(--texto);
	font: 400 var(--t-texto) / 1.65 var(--f-texto);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img,
video,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}
a {
	color: var(--oliva-oscuro);
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}
a:hover {
	color: var(--oliva);
}
h1,
h2,
h3,
h4 {
	margin: 0;
	font-weight: 400;
	line-height: 1.05;
}
p {
	margin: 0 0 1em;
}
figure {
	margin: 0;
}
button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}
:focus-visible {
	outline: 3px solid var(--ocre);
	outline-offset: 3px;
}
.contenido:focus {
	outline: none;
}
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.saltar {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 100;
	padding: 0.75rem 1rem;
	background: var(--oliva);
	color: var(--blanco);
	border-radius: 0 0 12px 12px;
	font-weight: 600;
}
.saltar:focus {
	top: 0;
	color: var(--blanco);
}

/* 4. Piezas comunes --------------------------------------------------------- */
.contenedor {
	width: 100%;
	max-width: calc(var(--ancho) + 2 * var(--margen));
	margin-inline: auto;
	padding-inline: var(--margen);
}
.seccion {
	position: relative;
	padding-block: var(--seccion);
}
.titulo-seccion {
	font-family: var(--f-titulo);
	font-size: var(--t-h2);
	line-height: 0.95;
	color: var(--oliva);
	letter-spacing: 0.005em;
	text-wrap: balance;
	margin-bottom: 0.45em;
}
.intro {
	font-size: var(--t-intro);
	line-height: 1.55;
	max-width: 38ch;
	color: var(--texto);
}
.prosa {
	max-width: 60ch;
}
.prosa p:last-child {
	margin-bottom: 0;
}
.cabeza-seccion {
	position: relative;
	margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}

/* Botones */
.boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-height: 48px;
	padding: 0.75rem 1.5rem;
	border: 2px solid var(--oliva);
	border-radius: 999px;
	background: var(--oliva);
	color: var(--blanco);
	font: 600 1rem/1.2 var(--f-texto);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s, border-color 0.18s, color 0.18s;
}
.boton:hover {
	background: var(--oliva-oscuro);
	border-color: var(--oliva-oscuro);
	color: var(--blanco);
}
.boton .icono {
	width: 20px;
	height: 20px;
}
.boton--borde {
	background: transparent;
	color: var(--oliva-oscuro);
}
.boton--borde:hover {
	background: var(--oliva);
	color: var(--blanco);
}
.boton--crema {
	background: var(--crema);
	border-color: var(--crema);
	color: var(--oliva-oscuro);
}
.boton--crema:hover {
	background: var(--blanco);
	border-color: var(--blanco);
	color: var(--oliva-oscuro);
}
.boton--chico {
	min-height: 40px;
	padding: 0.5rem 1rem;
	font-size: 0.9375rem;
}
.boton--chico .icono {
	width: 18px;
	height: 18px;
}
.boton--grande {
	min-height: 56px;
	padding-inline: 2rem;
	font-size: 1.0625rem;
}
.boton__icono-marca {
	width: 26px;
	height: auto;
}
.enlace-icono {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	color: var(--oliva-oscuro);
	text-decoration: underline;
	text-decoration-color: rgba(102, 114, 2, 0.4);
	text-underline-offset: 0.3em;
}
.enlace-icono .icono {
	width: 22px;
	height: 22px;
	flex: none;
}
.enlace-icono--chico {
	font-size: 0.9375rem;
}
.enlace-icono--chico .icono {
	width: 18px;
	height: 18px;
}

/* Friso de ramas de olivo (como el de las fachadas) */
.friso {
	height: 46px;
	background: var(--crema) url("assets/img/marca/friso-olivo.svg") repeat-x center / 200px 44px;
	border-block: 1px solid rgba(102, 114, 2, 0.18);
}

/* Cintas de texto en movimiento (Personalizar → Atena → Movimiento y cintas).
   Van inclinadas y montadas sobre el borde entre dos secciones: la caja es transparente
   y se mete debajo de la sección de arriba y de la de abajo. */
.cinta-caja {
	--c-fs: clamp(1.9rem, 1.3rem + 2.4vw, 3.6rem);
	--c-pad: clamp(0.85rem, 1.5vw, 1.35rem);
	--c-hueco: clamp(1.25rem, 2.6vw, 2.5rem);
	position: relative;
	z-index: 4;
	overflow: hidden;
	padding-block: var(--c-hueco);
	margin-block: calc(-1 * (var(--c-hueco) + var(--c-pad) + var(--c-fs) / 2));
	pointer-events: none;
}
.cinta {
	--tinta: var(--crema);
	overflow: hidden;
	width: 104%;
	margin-left: -2%;
	padding: var(--c-pad) 0;
	background: var(--oliva);
	color: var(--tinta);
	box-shadow: 0 12px 28px rgba(40, 30, 0, 0.16);
	transform: rotate(1.3deg);
}
.cinta__pista {
	display: flex;
	align-items: center;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cinta__item {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 2rem);
	padding-right: clamp(1rem, 2vw, 2rem);
	white-space: nowrap;
}
.cinta__texto {
	display: block;
	font-family: var(--f-titulo);
	font-size: var(--c-fs);
	line-height: 1;
}
.cinta__item:nth-child(even) .cinta__texto {
	color: transparent;
	-webkit-text-stroke: 1.4px var(--tinta);
}
.ramita {
	flex: none;
	width: clamp(40px, 4vw, 56px);
	height: auto;
}
.ramita__fruto {
	fill: var(--ocre);
}
.cinta--ocre {
	--tinta: var(--blanco);
	background: var(--ocre);
	transform: rotate(-1.6deg);
}
.cinta--ocre .ramita__fruto {
	fill: var(--oliva);
}

/* Sello redondo que gira */
.sello {
	position: absolute;
	display: grid;
	place-items: center;
	width: clamp(104px, 9.5vw, 156px);
	aspect-ratio: 1;
}
.sello::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--crema);
	box-shadow: 0 10px 30px rgba(80, 55, 10, 0.18);
}
.sello__giro {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	overflow: visible;
}
.sello__texto {
	font: 700 17px/1 var(--f-texto);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	fill: var(--oliva-oscuro);
}
.sello__centro {
	position: relative;
	width: 42%;
	height: auto;
}

/* Avisos */
.aviso {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	padding: 1.1rem 1.25rem;
	border-radius: 14px;
	margin-bottom: 1.5rem;
}
.aviso p {
	margin: 0;
}
.aviso .icono {
	flex: none;
	width: 24px;
	height: 24px;
}
.aviso--ok {
	background: var(--oliva-tinte);
	color: #2f3500;
	border-left: 5px solid var(--oliva);
	font-size: var(--t-intro);
}
.aviso--error {
	background: var(--ocre-tinte);
	color: var(--ocre-oscuro);
	border-left: 5px solid var(--ocre);
}
.aviso-admin {
	padding: 0.75rem 1rem;
	border: 2px dashed var(--ocre);
	border-radius: 12px;
	background: var(--blanco);
	font-size: 0.9rem;
	color: var(--ocre-oscuro);
}

/* 5. Encabezado ------------------------------------------------------------
   Verde esmeralda (#667202) con letras beige crema (#f4dcb1). */
.cabecera {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--oliva);
	border-bottom: 3px solid var(--oliva-oscuro);
	transition: box-shadow 0.2s;
}
@supports (backdrop-filter: blur(8px)) {
	.cabecera {
		background: rgba(102, 114, 2, 0.95);
		backdrop-filter: saturate(1.2) blur(10px);
	}
}
.cabecera.is-bajando {
	box-shadow: 0 6px 24px rgba(30, 34, 0, 0.25);
}
/* Barra de avance de lectura (sobre la línea de abajo) */
.cabecera__progreso {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 3px;
	background: var(--crema);
	transform: scaleX(0);
	transform-origin: 0 50%;
	pointer-events: none;
}
html:not(.mov) .cabecera__progreso {
	display: none;
}
.admin-bar .cabecera {
	top: 32px;
}
.cabecera__in {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: var(--cabecera);
}
.logo,
.custom-logo-link {
	display: block;
	flex: none;
	margin-right: auto;
}
.logo img,
.custom-logo-link img {
	width: auto;
	height: 44px;
}
.nav {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.4vw, 2.25rem);
}
.nav .menu {
	display: flex;
	gap: clamp(1rem, 2.4vw, 2.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.nav .menu a {
	display: block;
	padding: 0.5rem 0;
	font-family: var(--f-texto);
	font-weight: 600;
	font-size: 1rem;
	color: var(--crema);
	text-decoration: none;
	background: linear-gradient(var(--crema), var(--crema)) no-repeat 0 100% / 0 2px;
	transition: background-size 0.2s;
}
/* Con la letra Portico (assets/fonts/portico.*), el menú la usa */
.con-portico .nav .menu a {
	font-family: "Portico", var(--f-texto);
	font-weight: 400;
	letter-spacing: 0.04em;
}
.nav .menu a:hover,
.nav .menu a.is-actual,
.nav .menu .current-menu-item > a {
	color: var(--crema);
	background-size: 100% 2px;
}
.nav__cta,
.nav__cta.boton--borde {
	min-height: 44px;
	padding: 0.55rem 1.2rem;
	font-size: 0.95rem;
	background: var(--crema);
	border-color: var(--crema);
	color: var(--oliva-oscuro);
}
.nav__cta:hover,
.nav__cta.boton--borde:hover {
	background: var(--blanco);
	border-color: var(--blanco);
	color: var(--oliva-oscuro);
}
.cabecera__boton {
	display: none;
	width: 48px;
	height: 48px;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--crema);
	color: var(--oliva-oscuro);
	cursor: pointer;
}
.cabecera__boton .icono {
	width: 24px;
	height: 24px;
}
.cabecera__cerrar {
	display: none;
}
.cabecera__boton[aria-expanded="true"] .cabecera__abrir {
	display: none;
}
.cabecera__boton[aria-expanded="true"] .cabecera__cerrar {
	display: block;
}

@media (max-width: 900px) {
	:root {
		--cabecera: 68px;
	}
	.logo img,
	.custom-logo-link img {
		height: 38px;
	}
	.cabecera__boton {
		display: grid;
	}
	.nav {
		position: fixed;
		inset: var(--cabecera) 0 auto 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0.5rem var(--margen) 1.75rem;
		background: var(--oliva);
		border-bottom: 3px solid var(--oliva-oscuro);
		box-shadow: 0 24px 40px rgba(30, 34, 0, 0.25);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s;
	}
	.admin-bar .nav {
		top: calc(var(--cabecera) + 46px);
	}
	.nav.is-abierto {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity 0.2s, transform 0.2s;
	}
	.nav .menu {
		flex-direction: column;
		gap: 0;
	}
	.nav .menu a {
		padding: 0.85rem 0;
		font: 400 2rem/1.1 var(--f-titulo);
		color: var(--crema);
		border-bottom: 1px solid rgba(244, 220, 177, 0.25);
		background: none;
	}
	.nav__cta {
		margin-top: 1.25rem;
		min-height: 52px;
	}
}
@media (max-width: 782px) {
	.admin-bar .cabecera {
		top: 46px;
	}
}
@media (max-width: 600px) {
	.admin-bar .cabecera {
		top: 0;
	}
}

/* 6. Escena (portada) -------------------------------------------------------
   Paisaje de fondo, plantas colgantes arriba y la escultura de Atena a la derecha. */
.escena {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	min-height: clamp(600px, calc(100svh - var(--cabecera)), 900px);
	background: var(--crema-claro);
}
.escena__fondo {
	position: absolute;
	inset: 0;
	z-index: -3;
}
.escena__paisaje {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% 70%;
}
.escena__fondo::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(251, 241, 223, 0.94) 0%, rgba(251, 241, 223, 0.82) 34%, rgba(251, 241, 223, 0.1) 62%, rgba(251, 241, 223, 0) 100%),
		linear-gradient(0deg, rgba(251, 241, 223, 0.35), rgba(251, 241, 223, 0) 30%);
}
.escena__colgantes {
	position: absolute;
	top: -2px;
	right: -6%;
	z-index: -1;
	width: min(62%, 940px);
	pointer-events: none;
}
.escena__colgantes img {
	width: 100%;
}
.escena__in {
	position: relative;
	display: flex;
	align-items: center;
}
.escena__texto {
	position: relative;
	z-index: 2;
	max-width: min(50rem, 60%);
	padding-block: clamp(4rem, 10vh, 7rem);
}
.escena__titulo {
	font-family: var(--f-titulo);
	font-size: var(--t-portada);
	line-height: 0.84;
	color: var(--oliva);
	letter-spacing: 0.005em;
	margin-bottom: 0.32em;
}
.escena__bajada {
	max-width: 31ch;
	font-size: var(--t-intro);
	line-height: 1.55;
	margin-bottom: 2rem;
}
.escena__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.75rem;
}
.escena__figura {
	position: absolute;
	right: max(0px, calc((100vw - var(--ancho)) / 2 - var(--margen)));
	bottom: 0;
	z-index: 1;
	height: 94%;
	pointer-events: none;
}
.escena__estatua {
	height: 100%;
	width: auto;
	max-width: none;
	filter: drop-shadow(0 18px 30px rgba(80, 55, 10, 0.18));
}

.escena__sello {
	left: -36%;
	bottom: 7%;
}

@media (max-width: 1080px) {
	.escena__figura {
		height: 78%;
		right: -2%;
	}
	.escena__fondo::after {
		background: linear-gradient(90deg, rgba(251, 241, 223, 0.95) 0%, rgba(251, 241, 223, 0.85) 45%, rgba(251, 241, 223, 0.2) 75%, rgba(251, 241, 223, 0) 100%);
	}
}
@media (max-width: 760px) {
	.escena {
		flex-direction: column;
		min-height: 0;
	}
	.escena__in {
		display: block;
	}
	.escena__texto {
		max-width: none;
		padding-block: clamp(5.5rem, 26vw, 8rem) 0;
	}
	.escena__fondo::after {
		background: linear-gradient(180deg, rgba(251, 241, 223, 0.96) 0%, rgba(251, 241, 223, 0.85) 52%, rgba(251, 241, 223, 0.15) 78%, rgba(251, 241, 223, 0) 100%);
	}
	.escena__colgantes {
		width: 92%;
		right: -34%;
	}
	.escena__figura {
		position: relative;
		right: auto;
		height: auto;
		margin: -0.5rem 0 0 auto;
		width: 58%;
		max-width: 300px;
	}
	.escena__estatua {
		width: 100%;
		height: auto;
		max-width: 100%;
	}
	.escena__sello {
		left: -52%;
		bottom: 10%;
		width: 96px;
	}
}

/* 7. Concepto -------------------------------------------------------------- */
.concepto__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(2.5rem, 2rem + 4vw, 6rem);
	align-items: center;
}
/* Mismo marco que las fotos de «Nuestra historia»: esquinas redondeadas */
.concepto__foto {
	position: relative;
	margin: 0;
}
.concepto__recorte {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border-radius: var(--radio);
}
.concepto__parallax {
	position: absolute;
	inset: 0;
}
.concepto__parallax img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.concepto__cita {
	margin: 2rem 0 0;
	padding: 0;
	font-family: var(--f-titulo);
	font-size: clamp(1.7rem, 1.25rem + 1.6vw, 2.5rem);
	line-height: 1.08;
	color: var(--ocre);
	text-wrap: balance;
}
.concepto__cita p {
	margin: 0;
}
.pilares {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem clamp(1.5rem, 3vw, 3rem);
	margin-top: clamp(3.5rem, 3rem + 3vw, 6rem);
	margin-bottom: 0;
	list-style: none;
}
.pilar {
	padding-top: 1.25rem;
	border-top: 2px solid var(--oliva);
}
.pilar__titulo {
	font-family: var(--f-titulo);
	font-size: var(--t-h3);
	color: var(--oliva);
	margin-bottom: 0.5rem;
}
.pilar p {
	margin: 0;
	color: var(--texto-suave);
}
@media (max-width: 900px) {
	.concepto__grid {
		grid-template-columns: 1fr;
	}
	.concepto__foto {
		max-width: 480px;
	}
	.pilares {
		grid-template-columns: 1fr;
	}
}

/* 8. Historia --------------------------------------------------------------- */
.historia {
	background: var(--crema-claro);
}
.historia__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(2.5rem, 2rem + 4vw, 6rem);
	align-items: start;
}
.historia__texto {
	position: sticky;
	top: calc(var(--cabecera) + 2rem);
}
.historia__fotos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}
.historia__marco {
	overflow: hidden;
	border-radius: var(--radio);
}
.historia__foto img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radio);
}
.historia__foto:nth-child(2) {
	margin-top: clamp(3rem, 8vw, 7rem);
}
.historia__foto:nth-child(2) img {
	object-position: 8% 50%;
}
.historia__foto figcaption {
	margin-top: 0.75rem;
	font-family: var(--f-titulo);
	font-size: 1.35rem;
	line-height: 1.1;
	color: var(--oliva);
}
.historia .aviso-admin {
	margin-bottom: 1.5rem;
}
.hitos {
	position: relative;
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
}
.hitos::before {
	content: "";
	position: absolute;
	left: 0.45rem;
	top: 0.6rem;
	bottom: 0.6rem;
	width: 2px;
	background: var(--linea);
}
.hitos__item {
	position: relative;
	display: grid;
	grid-template-columns: 5rem 1fr;
	gap: 0.75rem;
	padding: 0 0 1.1rem 2rem;
}
.hitos__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45rem;
	width: 0.95rem;
	height: 0.95rem;
	border-radius: 50%;
	background: var(--crema-claro);
	border: 3px solid var(--ocre);
}
.hitos__anio {
	font-family: var(--f-titulo);
	font-size: 1.5rem;
	line-height: 1.1;
	color: var(--ocre-oscuro);
}
@media (max-width: 900px) {
	.historia__grid {
		grid-template-columns: 1fr;
	}
	.historia__texto {
		position: static;
	}
}

/* 9. Productos ---------------------------------------------------------------
   Vitrina de Tinas, Barquillas y Paletas. En computadora, cada tarjeta se queda fija arriba
   y la siguiente se le monta encima al bajar; en el teléfono, se deslizan de lado. */
.productos__cabeza {
	max-width: 46rem;
}
.productos__opa {
	position: absolute;
	right: calc(-1 * min(28vw, 330px));
	top: 0.5rem;
	display: block;
	width: clamp(150px, 16vw, 230px);
	transform: rotate(-7deg);
	pointer-events: none;
}
.productos__opa img {
	width: 100%;
}
.vitrina {
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.vitrina__item {
	transform-origin: 50% 0;
}
.producto {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	align-items: center;
	gap: clamp(1.5rem, 4vw, 5rem);
	min-height: clamp(440px, 68vh, 620px);
	padding: clamp(1.25rem, 3vw, 3rem) clamp(1.25rem, 5vw, 5rem) clamp(1.25rem, 3vw, 3rem) clamp(1.25rem, 3vw, 3rem);
	border-radius: 36px;
	--tinta: var(--oliva);
	background: var(--crema);
	color: var(--texto);
}
/* textura de búhos de la marca */
.producto::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: currentColor;
	-webkit-mask: url("assets/img/marca/patron-mascara.webp") 0 0 / 420px repeat;
	mask: url("assets/img/marca/patron-mascara.webp") 0 0 / 420px repeat;
	opacity: 0.05;
	pointer-events: none;
}
/* sombra cuando la tarjeta de adelante la tapa */
.producto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #1d1a0a;
	opacity: calc(var(--apilado, 0) * 0.28);
	pointer-events: none;
}
.producto--2 {
	--tinta: var(--crema);
	background: var(--oliva);
	color: var(--blanco);
}
.producto--3 {
	--tinta: var(--blanco);
	background: var(--ocre);
	color: var(--negro);
}
.producto__escenario {
	perspective: 1000px;
}
.producto__marco {
	position: relative;
	overflow: hidden;
	/* siempre 4:5, como las fotos: así se ve la foto completa */
	width: min(100%, 440px, calc(min(56vh, 540px) * 0.8));
	aspect-ratio: 4 / 5;
	margin-inline: auto;
	/* mismo marco que las fotos de «Nuestra historia» y «Así se vive Atena» */
	border-radius: var(--radio);
	background: var(--crema-claro);
	box-shadow: 0 18px 36px rgba(40, 30, 0, 0.2);
	transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transition: transform 0.6s var(--suave);
}
.producto__escenario.is-inclinado .producto__marco {
	transition-duration: 0.12s;
}
.producto__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--suave);
}
.producto:hover .producto__media {
	transform: scale(1.06);
}
.producto__media--vacia {
	background: var(--crema);
}
.producto__texto {
	position: relative;
}
.producto__num {
	display: block;
	font-family: var(--f-titulo);
	font-size: clamp(4.5rem, 3rem + 6vw, 10rem);
	line-height: 0.8;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--tinta);
	opacity: 0.7;
	margin-bottom: 0.15em;
}
.producto__nombre {
	font-family: var(--f-titulo);
	font-size: clamp(3rem, 2rem + 4.4vw, 6.4rem);
	line-height: 0.88;
	color: var(--tinta);
	margin: 0 0 0.3em;
}
.producto__desc {
	max-width: 30ch;
	margin: 0;
	font-size: var(--t-intro);
	line-height: 1.5;
}
.producto__detalle {
	display: inline-block;
	margin: 1.25rem 0 0;
	padding: 0.4rem 1rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.55);
	font-weight: 700;
	color: var(--ocre-oscuro);
}
.producto--2 .producto__detalle {
	background: var(--crema);
	color: var(--oliva-oscuro);
}
/* Tarjeta final: todas las delicias se combinan con toppings y siropes */
.producto--combinar {
	--tinta: var(--crema);
	background: var(--negro);
	color: var(--blanco);
}
.producto--combinar::before {
	opacity: 0.08;
}
.producto__num--mas {
	opacity: 0.9;
}
.producto--combinar .producto__desc {
	max-width: 32ch;
}
.producto__boton {
	margin-top: 1.75rem;
	background: var(--crema);
	border-color: var(--crema);
	color: var(--oliva-oscuro);
}
.producto__boton:hover {
	background: var(--blanco);
	border-color: var(--blanco);
	color: var(--oliva-oscuro);
}

/* Apilado (pantallas anchas y con altura suficiente) */
@media (min-width: 901px) and (min-height: 620px) {
	.vitrina {
		gap: 0;
	}
	.vitrina__item {
		position: sticky;
		top: calc(var(--cabecera) + 1.25rem + var(--i, 0) * 1.1rem);
		padding-bottom: clamp(1.5rem, 5vh, 3rem);
		transform: scale(calc(1 - var(--apilado, 0) * 0.06));
	}
	.vitrina__item:last-child {
		padding-bottom: 0;
	}
	.producto {
		height: min(calc(100svh - var(--cabecera) - 6rem), 640px);
		min-height: 440px;
	}
}

@media (max-width: 1280px) {
	.productos__opa {
		right: 0;
		top: -1.5rem;
		width: clamp(120px, 15vw, 190px);
	}
	.productos__cabeza {
		max-width: none;
		padding-right: clamp(130px, 18vw, 220px);
	}
}
/* Teléfono y tableta: las tarjetas se deslizan de lado */
@media (max-width: 900px) {
	.vitrina {
		display: flex;
		gap: 1rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin-inline: calc(-1 * var(--margen));
		padding: 0.5rem var(--margen) 1rem;
		scroll-padding-inline: var(--margen);
		scrollbar-width: none;
	}
	.vitrina::-webkit-scrollbar {
		display: none;
	}
	.vitrina__item {
		flex: 0 0 min(82vw, 400px);
		scroll-snap-align: start;
	}
	.producto {
		grid-template-columns: minmax(0, 1fr);
		align-content: start;
		gap: 1.25rem;
		height: 100%;
		min-height: 0;
		padding: 1rem 1rem 1.75rem;
		border-radius: 28px;
	}
	.producto__marco {
		max-height: none;
	}
	.producto__num {
		position: absolute;
		right: 0.25rem;
		top: -0.2em;
		font-size: 4.5rem;
	}
	.producto__nombre {
		font-size: clamp(2.6rem, 2rem + 3vw, 3.4rem);
		padding-right: 4.5rem;
	}
	.producto__desc {
		font-size: 1rem;
	}
}
@media (max-width: 560px) {
	.productos__cabeza {
		padding-right: 0;
	}
	.productos__opa {
		position: static;
		width: 130px;
		margin-top: 0.5rem;
	}
}

/* 9b. Sabores ------------------------------------------------------------------
   Yogurt griego, yogurt light, mantecado, chocolate… y los que vienen. */
.sabores {
	background: var(--crema-claro);
}
.sabores__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(2.5rem, 2rem + 4vw, 6rem);
	align-items: center;
}
.sabores__foto {
	position: relative;
	max-width: 480px;
	overflow: hidden;
	border-radius: var(--radio);
}
.sabores__foto img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radio);
}
.sabores {
	isolation: isolate;
}
.sabores__lista {
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
	border-top: 2px solid var(--oliva);
}
.sabor {
	display: grid;
	grid-template-columns: 2.6rem minmax(0, 1fr);
	column-gap: 1.1rem;
	align-items: center;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--linea);
}
.sabor__gota {
	grid-row: span 2;
	width: 2.1rem;
	height: 2.1rem;
	margin-left: 0.2rem;
	border-radius: 50% 50% 50% 0;
	background: var(--sabor, var(--ocre));
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(60, 35, 10, 0.15);
	transform: rotate(-45deg);
	transition: transform 0.35s var(--rebote);
}
.sabor:hover .sabor__gota {
	transform: rotate(-45deg) scale(1.2);
}
.sabor__nombre {
	font-family: var(--f-titulo);
	font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem);
	line-height: 1;
	color: var(--oliva);
}
.sabor__texto {
	margin-top: 0.3rem;
	color: var(--texto-suave);
	font-size: 0.98rem;
	line-height: 1.45;
}
.sabor--pronto .sabor__gota {
	background: transparent;
	box-shadow: none;
	border: 2px dashed var(--ocre);
}
.sabor--pronto .sabor__nombre {
	color: var(--ocre-oscuro);
}
.sabor__etiqueta {
	justify-self: start;
	margin-top: 0.45rem;
	padding: 0.2rem 0.75rem;
	border-radius: 999px;
	background: var(--ocre);
	color: var(--blanco);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
@media (max-width: 900px) {
	.sabores__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.sabores__foto {
		max-width: 420px;
	}
}

/* 10. Galería ------------------------------------------------------------------
   Las fotos desfilan de lado (se detienen al pasar el mouse). Sin animaciones, se deslizan con el dedo. */
.galeria {
	isolation: isolate;
	overflow: hidden;
	background: var(--oliva);
	color: var(--blanco);
}
/* textura con el patrón de búhos de la marca */
.galeria::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--crema);
	-webkit-mask: url("assets/img/marca/patron-mascara.webp") 0 0 / 460px repeat;
	mask: url("assets/img/marca/patron-mascara.webp") 0 0 / 460px repeat;
	opacity: 0.06;
	pointer-events: none;
}
.galeria .titulo-seccion {
	color: var(--crema);
}
.galeria .intro {
	color: var(--blanco);
}
.galeria__cabeza {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 1.5rem 3rem;
	margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}
.galeria__cabeza .titulo-seccion {
	grid-column: 1;
}
.galeria__cabeza .intro {
	grid-column: 1;
	margin: 0;
}
.galeria__cabeza .boton {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: end;
}
.galeria__cinta {
	overflow: hidden;
	padding: 1.25rem 0 3.5rem;
}
.galeria__pista {
	display: flex;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
}
.galeria__item {
	flex: none;
	width: clamp(220px, 24vw, 420px);
	margin-right: clamp(0.9rem, 1.6vw, 1.5rem);
	transform: rotate(-2deg);
	transition: transform 0.5s var(--suave);
}
.galeria__item:nth-child(even) {
	transform: rotate(1.8deg) translateY(1.4rem);
}
.galeria__item img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 18px;
	box-shadow: 0 18px 36px rgba(20, 22, 0, 0.25);
}
@media (hover: hover) {
	.galeria__item:hover {
		position: relative;
		z-index: 1;
		transform: rotate(0) scale(1.05);
	}
}
/* Sin animaciones: fila que se desliza con el dedo, sin la copia. */
html:not(.mov) .galeria__cinta {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--margen);
}
html:not(.mov) .galeria__pista {
	padding-inline: var(--margen);
}
html:not(.mov) .galeria__item {
	scroll-snap-align: start;
}
html:not(.mov) .galeria__item--copia {
	display: none;
}
@media (max-width: 900px) {
	.galeria__cabeza {
		grid-template-columns: 1fr;
	}
	.galeria__cabeza .boton {
		grid-column: 1;
		grid-row: auto;
		justify-self: start;
	}
	.galeria__item {
		width: min(64vw, 260px);
	}
}

/* 11. Sedes y mapa ------------------------------------------------------------- */
.sedes__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: start;
}
.sedes__mapa {
	position: sticky;
	top: calc(var(--cabecera) + 1.5rem);
}
.mapa {
	height: clamp(420px, 68vh, 640px);
	border-radius: 26px;
	overflow: hidden;
	background: var(--crema-claro);
	border: 1px solid var(--linea);
	z-index: 0;
}
/* tono cálido sobre el mapa base, para que combine con la marca */
.mapa .leaflet-tile-pane {
	filter: sepia(0.3) saturate(0.85) hue-rotate(-6deg) brightness(1.02);
}
.mapa__vista {
	position: absolute;
	left: 14px;
	bottom: 14px;
	z-index: 500;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.6rem 1rem;
	border: 0;
	border-radius: 999px;
	background: var(--blanco);
	color: var(--oliva-oscuro);
	font-weight: 600;
	font-size: 0.9rem;
	box-shadow: var(--sombra);
	cursor: pointer;
}
.mapa__vista .icono {
	width: 18px;
	height: 18px;
}
.mapa__vista[hidden] {
	display: none;
}
.mapa__sin-js {
	padding: 1rem;
}
.mapa--sin {
	display: grid;
	place-items: center;
	padding: 2rem;
	text-align: center;
	color: var(--texto-suave);
}
.leaflet-container {
	font-family: var(--f-texto);
}
.leaflet-container a {
	color: var(--oliva-oscuro);
}
.leaflet-bar a {
	width: 36px;
	height: 36px;
	line-height: 36px;
	color: var(--oliva-oscuro);
}
.mapa.leaflet-container {
	background: var(--crema-claro);
}
.leaflet-control-attribution {
	font-size: 11px;
}
.mapa .leaflet-bottom.leaflet-right .leaflet-control-attribution {
	margin: 0 16px 8px 0;
	padding: 1px 8px;
	border-radius: 8px;
}
.pin-sede {
	transform-origin: 50% 100%;
	filter: drop-shadow(0 4px 4px rgba(60, 40, 0, 0.3));
}
.pin-sede img {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform 0.25s var(--rebote);
}
.pin-sede:hover img {
	transform: translateY(-4px);
}
/* Los pines caen sobre el mapa cuando se ve en pantalla */
.pin-sede--espera img {
	opacity: 0;
}
.pin-sede--cae img {
	animation: atena-caer 0.85s calc(0.1s + var(--i, 0) * 0.2s) var(--rebote) backwards;
}
/* Halo que late debajo del pin de las sedes abiertas ahora */
.pin-sede__halo {
	position: absolute;
	left: 50%;
	bottom: -2px;
	width: 26px;
	height: 10px;
	margin-left: -13px;
	border-radius: 50%;
	background: rgba(102, 114, 2, 0.45);
	opacity: 0;
	pointer-events: none;
}
.pin-sede.is-abierta .pin-sede__halo {
	animation: atena-latir 2.4s ease-out infinite;
}
.pin-sede.is-activo {
	z-index: 1000 !important;
}
.pin-sede.is-activo img {
	transform: scale(1.18);
	transform-origin: 50% 100%;
}
.leaflet-popup-content-wrapper {
	border-radius: 16px;
	box-shadow: var(--sombra);
}
.leaflet-popup-content {
	margin: 14px 18px 16px;
	font-size: 0.9rem;
	line-height: 1.45;
}
.popup__nombre {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--f-titulo);
	font-size: 1.35rem;
	line-height: 1.05;
	color: var(--oliva);
}
.popup__dir {
	margin: 0 0 0.6rem;
	color: var(--texto-suave);
}
.leaflet-container .popup__ir {
	font-weight: 600;
}

.sedes__lista {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sede {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	gap: 1.1rem;
	padding: 1rem;
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	background: var(--blanco);
	transition: border-color 0.2s, box-shadow 0.2s;
}
.sede:not(:has(.sede__foto)) {
	grid-template-columns: 1fr;
}
.sede.is-activa {
	border-color: var(--oliva);
	box-shadow: 0 0 0 3px rgba(102, 114, 2, 0.16);
}
.sede__foto img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 14px;
}
.sede__cabeza {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.75rem;
	margin-bottom: 0.4rem;
}
.sede__nombre {
	font-family: var(--f-titulo);
	font-size: clamp(1.45rem, 1.3rem + 0.5vw, 1.75rem);
	color: var(--oliva);
}
.estado {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.2rem 0.65rem 0.2rem 0.55rem;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	white-space: nowrap;
}
.estado::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}
.estado--abierto {
	background: var(--oliva-tinte);
	color: #3a4100;
}
.estado--cerrado {
	background: var(--ocre-tinte);
	color: var(--ocre-oscuro);
}
.estado--sin {
	background: #f1ede4;
	color: #5a5240;
}
.sede__dato {
	display: flex;
	gap: 0.5rem;
	margin: 0 0 0.35rem;
	font-size: 0.95rem;
	line-height: 1.45;
}
.sede__dato .icono {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 0.12rem;
	color: var(--ocre);
}
.sede__detalle,
.sede__nota {
	margin: 0 0 0.35rem 1.6rem;
	font-size: 0.875rem;
	color: var(--texto-suave);
}
.sede__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1rem;
	margin-top: 0.9rem;
}
.sede__acciones [hidden] {
	display: none;
}
@media (max-width: 960px) {
	.sedes__grid {
		grid-template-columns: 1fr;
	}
	.sedes__mapa {
		position: relative;
		top: auto;
	}
	.mapa {
		height: clamp(340px, 60vh, 480px);
	}
}
@media (max-width: 480px) {
	.sede {
		grid-template-columns: 84px minmax(0, 1fr);
		gap: 0.85rem;
		padding: 0.85rem;
	}
}

/* 12. Contacto ---------------------------------------------------------------- */
.contacto {
	isolation: isolate;
	overflow: hidden;
	background: var(--crema);
}
.contacto::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--oliva);
	-webkit-mask: url("assets/img/marca/patron-mascara.webp") 0 0 / 460px repeat;
	mask: url("assets/img/marca/patron-mascara.webp") 0 0 / 460px repeat;
	opacity: 0.055;
	pointer-events: none;
}
.contacto__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 2rem clamp(2rem, 5vw, 6rem);
	align-items: center;
}
.contacto__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 2px solid var(--oliva);
}
.contacto__enlace {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 1.25rem;
	align-items: center;
	padding: 1.25rem 0;
	border-bottom: 1px solid rgba(102, 114, 2, 0.35);
	text-decoration: none;
	color: var(--texto);
}
.contacto__icono {
	grid-row: span 2;
	width: 58px;
	height: auto;
	transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.contacto__red {
	font-family: var(--f-titulo);
	font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem);
	line-height: 1;
	color: var(--oliva);
}
.contacto__valor {
	font-weight: 600;
	color: var(--oliva-oscuro);
	overflow-wrap: anywhere;
}
.contacto__enlace:hover .contacto__icono {
	transform: translateY(-4px) rotate(-6deg);
}
.contacto__red {
	background: linear-gradient(var(--ocre), var(--ocre)) no-repeat 0 92% / 0 3px;
	transition: background-size 0.35s var(--suave);
}
.contacto__enlace:hover .contacto__red {
	background-size: 100% 3px;
}
.contacto__enlace:hover .contacto__valor {
	text-decoration: underline;
}
@media (max-width: 900px) {
	.contacto__grid {
		grid-template-columns: 1fr;
	}
}

/* 13. Trabaja con nosotros ------------------------------------------------------ */
.trabaja__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2.5rem, 5vw, 5.5rem);
	align-items: start;
}
.beneficios {
	display: grid;
	gap: 0.75rem;
	margin: 1.75rem 0 2.5rem;
	padding: 0;
	list-style: none;
}
.beneficios li {
	display: flex;
	gap: 0.65rem;
	align-items: flex-start;
}
.beneficios .icono {
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 0.15rem;
	padding: 3px;
	border-radius: 50%;
	background: var(--oliva);
	color: var(--blanco);
	stroke-width: 2.6;
}
/* Mismo marco que las fotos de «Nuestra historia» y «Así se vive Atena» */
.trabaja__foto {
	max-width: 360px;
	overflow: hidden;
	border-radius: var(--radio);
}
.trabaja__foto img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radio);
}
.trabaja__form {
	padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
	border-radius: 28px;
	background: var(--crema-claro);
	border: 1px solid rgba(185, 119, 39, 0.25);
}
.trabaja-suelto {
	max-width: 760px;
	margin: 2rem auto;
}
.planilla {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 1.25rem;
}
.campo {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.campo--ancho {
	grid-column: 1 / -1;
}
.campo label,
.campo__etiqueta {
	margin-bottom: 0.4rem;
	font-weight: 600;
	font-size: 0.95rem;
}
.req {
	color: var(--ocre-oscuro);
}
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo select,
.campo textarea {
	width: 100%;
	min-height: 50px;
	padding: 0.75rem 1rem;
	border: 1.5px solid rgba(0, 0, 0, 0.2);
	border-radius: 12px;
	background: var(--blanco);
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.campo select {
	appearance: none;
	padding-right: 2.5rem;
	background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667202' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.9rem center / 18px;
}
.campo textarea {
	resize: vertical;
	min-height: 120px;
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
	outline: none;
	border-color: var(--oliva);
	box-shadow: 0 0 0 3px rgba(102, 114, 2, 0.2);
}
.campo [aria-invalid="true"] {
	border-color: var(--ocre-oscuro);
	box-shadow: 0 0 0 3px rgba(185, 119, 39, 0.18);
}
.archivo__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.archivo {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 0.75rem;
	align-items: center;
	padding: 1rem 1.15rem;
	border: 2px dashed rgba(102, 114, 2, 0.45);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.55);
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s;
}
.campo .archivo {
	margin: 0;
	font-weight: 400;
}
.archivo .icono {
	grid-row: span 2;
	width: 28px;
	height: 28px;
	color: var(--oliva);
}
.archivo__texto {
	font-weight: 600;
	color: var(--oliva-oscuro);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.archivo__ayuda {
	font-size: 0.85rem;
	color: var(--texto-suave);
}
.archivo:hover {
	background: var(--blanco);
	border-color: var(--oliva);
}
.archivo__input:focus-visible + .archivo {
	outline: 3px solid var(--ocre);
	outline-offset: 3px;
}
.archivo.tiene-archivo {
	border-style: solid;
	border-color: var(--oliva);
	background: var(--blanco);
}
.archivo.con-error {
	border-color: var(--ocre-oscuro);
}
.campo--check {
	flex-direction: row;
	align-items: flex-start;
	gap: 0.65rem;
}
.campo--check input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0.2rem 0 0;
	accent-color: var(--oliva);
}
.campo--check label {
	margin: 0;
	font-weight: 400;
	font-size: 0.95rem;
}
.planilla__error {
	grid-column: 1 / -1;
	margin: 0;
	padding: 0.85rem 1rem;
	border-radius: 12px;
	background: var(--ocre-tinte);
	color: var(--ocre-oscuro);
	font-weight: 600;
}
.planilla__error[hidden] {
	display: none;
}
.planilla__trampa {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.planilla [data-enviar][disabled] {
	opacity: 0.7;
	cursor: progress;
}
@media (max-width: 900px) {
	.trabaja__grid {
		grid-template-columns: 1fr;
	}
	.trabaja__foto {
		display: none;
	}
}
@media (max-width: 560px) {
	.planilla {
		grid-template-columns: 1fr;
	}
	.planilla .boton--grande {
		width: 100%;
	}
}

/* 14. Pie de página -------------------------------------------------------------- */
.friso--pie {
	border-bottom: 0;
}
/* Pie en dos tonos de azul: #5887da (banda con el logo) y #a5c5ed (columnas), con el patrón de búhos */
.pie {
	background: var(--celeste);
	color: var(--marino);
	font-size: 0.95rem;
}
.pie__banda,
.pie__cuerpo {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
.pie__banda::before,
.pie__cuerpo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	-webkit-mask: url("assets/img/marca/patron-mascara.webp") 0 0 / 420px repeat;
	mask: url("assets/img/marca/patron-mascara.webp") 0 0 / 420px repeat;
	pointer-events: none;
}
.pie__banda {
	padding: clamp(2.25rem, 4vw, 3.5rem) 0;
	background: var(--azul);
	color: var(--blanco);
}
.pie__banda::before {
	background: var(--celeste);
	opacity: 0.28;
}
.pie__banda-in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem clamp(1.5rem, 4vw, 3rem);
}
.pie__logo img {
	width: clamp(92px, 9vw, 124px);
	height: auto;
}
.pie__lema {
	max-width: 24ch;
	margin: 0;
	font-family: var(--f-titulo);
	font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.9rem);
	line-height: 1;
	color: var(--blanco);
	text-wrap: balance;
}
.pie__cuerpo {
	padding: clamp(2.75rem, 2rem + 3vw, 4.5rem) 0 2rem;
}
.pie__cuerpo::before {
	background: var(--azul);
	opacity: 0.12;
}
.pie__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.5rem clamp(1.5rem, 3vw, 3rem);
}
.pie__titulo {
	margin-bottom: 1rem;
	padding-bottom: 0.6rem;
	border-bottom: 2px solid var(--azul);
	font-family: var(--f-titulo);
	font-size: 1.6rem;
	color: var(--marino);
}
.pie__lista {
	display: grid;
	gap: 0.85rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pie__lista a {
	color: var(--marino);
	font-weight: 700;
	text-decoration: none;
}
.pie__lista a:hover {
	color: var(--marino);
	text-decoration: underline;
	text-decoration-color: var(--azul);
	text-decoration-thickness: 2px;
}
.pie__lista span {
	display: block;
	font-weight: 400;
	font-size: 0.875rem;
	color: var(--marino-suave);
}
.pie__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	margin-top: clamp(2.5rem, 4vw, 3.5rem);
	padding-top: 1.5rem;
	background: linear-gradient(rgba(16, 38, 77, 0.25), rgba(16, 38, 77, 0.25)) center top / calc(100% - 2 * var(--margen)) 1px no-repeat;
	font-size: 0.85rem;
	color: var(--marino-suave);
}
.pie__legal p {
	margin: 0;
}
.pie__legal a {
	color: inherit;
}
@media (max-width: 900px) {
	.pie__grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 560px) {
	.pie__grid {
		grid-template-columns: 1fr;
	}
}

/* Botón flotante de WhatsApp */
.wa-flotante {
	position: fixed;
	right: clamp(14px, 2vw, 24px);
	bottom: clamp(14px, 2vw, 24px);
	z-index: 60;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 54px;
	padding: 0.75rem 1.2rem 0.75rem 1rem;
	border-radius: 999px;
	background: var(--oliva);
	color: var(--blanco);
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 10px 26px rgba(40, 30, 0, 0.25);
	transition: background-color 0.18s, transform 0.18s;
}
.wa-flotante .icono {
	width: 26px;
	height: 26px;
}
.wa-flotante:hover {
	background: var(--oliva-oscuro);
	color: var(--blanco);
	transform: translateY(-2px);
}
.wa-flotante::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 0 rgba(102, 114, 2, 0.5);
	pointer-events: none;
}
@media (max-width: 600px) {
	.wa-flotante {
		width: 56px;
		height: 56px;
		padding: 0;
		justify-content: center;
	}
	.wa-flotante span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}
}

/* 15. Páginas y entradas ------------------------------------------------------------ */
.pagina__cabeza {
	padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0 clamp(2rem, 1.5rem + 2vw, 3.5rem);
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
	background: var(--crema-claro);
	border-bottom: 1px solid var(--linea);
}
.pagina__titulo {
	font-family: var(--f-titulo);
	font-size: var(--t-h2);
	line-height: 0.95;
	color: var(--oliva);
	text-wrap: balance;
}
.pagina__cabeza .intro {
	margin-top: 1rem;
}
.pagina__fecha {
	margin-bottom: 0.75rem;
	font-weight: 600;
	color: var(--ocre-oscuro);
}
.pagina__portada {
	margin-bottom: 2.5rem;
}
.pagina__portada img {
	width: 100%;
	border-radius: var(--radio);
}
.contenido-editor {
	padding-bottom: var(--seccion);
}
.contenido-editor > * {
	width: min(var(--ancho-texto), 100% - 2 * var(--margen));
	margin-inline: auto;
}
.contenido-editor > .alignwide {
	width: min(var(--ancho), 100% - 2 * var(--margen));
}
.contenido-editor > .alignfull {
	width: 100%;
}
.atena-bloque {
	margin-block: 2rem;
}
.contenido-editor > h2,
.contenido-editor > h3,
.contenido-editor :is(.wp-block-group, .wp-block-column, .wp-block-cover__inner-container) > :is(h2, h3) {
	margin-top: 2em;
	margin-bottom: 0.5em;
	font-family: var(--f-titulo);
	color: var(--oliva);
}
.contenido-editor > h2,
.contenido-editor :is(.wp-block-group, .wp-block-column) > h2 {
	font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem);
}
.contenido-editor > h3,
.contenido-editor :is(.wp-block-group, .wp-block-column) > h3 {
	font-size: var(--t-h3);
}
.contenido-editor > h4 {
	margin-top: 1.5em;
	margin-bottom: 0.5em;
	font-weight: 700;
	font-size: 1.15rem;
}
.contenido-editor > ul,
.contenido-editor > ol {
	padding-left: 1.25em;
}
.contenido-editor :is(.wp-block-image, .wp-block-gallery) img {
	border-radius: 14px;
}
.contenido-editor > blockquote {
	margin-block: 2rem;
	padding-left: 1.25rem;
	border-left: 3px solid var(--ocre);
	font-family: var(--f-titulo);
	font-size: 1.6rem;
	line-height: 1.15;
	color: var(--ocre-oscuro);
}
.wp-block-button__link {
	border-radius: 999px;
	background: var(--oliva);
	color: var(--blanco);
	font-weight: 600;
	padding: 0.8rem 1.5rem;
}
.wp-block-button__link:hover {
	background: var(--oliva-oscuro);
	color: var(--blanco);
}
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--oliva-oscuro);
	border: 2px solid var(--oliva);
}
.wp-caption-text,
figcaption {
	font-size: 0.875rem;
	color: var(--texto-suave);
}
.alignleft {
	float: left;
	margin: 0 1.5rem 1rem 0;
}
.alignright {
	float: right;
	margin: 0 0 1rem 1.5rem;
}
.aligncenter {
	margin-inline: auto;
}

.entradas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 2.5rem 2rem;
	margin: 0 0 3rem;
	padding: 0;
	list-style: none;
}
.entrada__enlace {
	display: block;
	color: var(--texto);
	text-decoration: none;
}
.entrada__foto {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radio);
	margin-bottom: 1rem;
}
.entrada__fecha {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ocre-oscuro);
}
.entrada__titulo {
	margin: 0.25rem 0 0.5rem;
	font-family: var(--f-titulo);
	font-size: var(--t-h3);
	color: var(--oliva);
}
.entrada__enlace:hover .entrada__titulo {
	text-decoration: underline;
}
.nav-links {
	display: flex;
	gap: 0.5rem;
	margin-bottom: var(--seccion);
}
.page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 0.75rem;
	border: 1px solid var(--linea);
	border-radius: 999px;
	text-decoration: none;
}
.page-numbers.current {
	background: var(--oliva);
	color: var(--blanco);
}

.perdido {
	padding-block: var(--seccion);
	background: var(--crema-claro);
}
.perdido__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
	gap: 2rem;
	align-items: center;
}
.perdido__busto {
	width: 100%;
	max-width: 360px;
}
@media (max-width: 760px) {
	.perdido__grid {
		grid-template-columns: 1fr;
	}
	.perdido__busto {
		max-width: 240px;
	}
}

/* 16. Movimiento -------------------------------------------------------------------
   Lo maneja assets/js/movimiento.js, que pone la clase .mov en <html>. Sin esa clase
   (sin JavaScript, o con «reducir movimiento» activado en el teléfono o la computadora)
   todo se ve completo y quieto. Se desactiva en Personalizar → Atena → Movimiento y cintas. */

/* Al cargar la portada: las plantas bajan, Atena sube y aparece el texto. */
@media (prefers-reduced-motion: no-preference) {
	.escena__colgantes img {
		transform-origin: 50% 0;
		animation: atena-colgar 1.5s var(--suave) both;
	}
	.escena__estatua {
		animation: atena-subir 1.1s 0.2s var(--suave) both;
	}
	html:not(.mov) .escena__texto > * {
		animation: atena-aparecer 0.9s var(--suave) both;
	}
	html:not(.mov) .escena__texto > :nth-child(2) {
		animation-delay: 0.12s;
	}
	html:not(.mov) .escena__texto > :nth-child(3) {
		animation-delay: 0.24s;
	}
}

/* Aparecer al entrar en pantalla */
.mov [data-revelar] {
	transition:
		opacity 0.9s var(--suave),
		transform 1.1s var(--suave),
		clip-path 1.2s var(--suave);
	transition-delay: calc(var(--i, 0) * 90ms);
}
.mov [data-revelar]:not(.is-visible) {
	opacity: 0;
	transform: translate3d(0, 44px, 0);
}
.mov [data-revelar="escala"]:not(.is-visible) {
	transform: scale(0.94);
}
.mov [data-revelar="pop"] {
	transition:
		opacity 0.4s ease,
		transform 0.9s var(--rebote);
	transition-delay: 0.3s;
}
.mov [data-revelar="pop"]:not(.is-visible) {
	transform: scale(0.2) rotate(-40deg);
}
.mov [data-revelar="imagen"]:not(.is-visible) {
	opacity: 1;
	transform: none;
	clip-path: inset(100% 0 0 0);
}
.mov [data-revelar="imagen"].is-visible {
	clip-path: inset(0 0 0 0);
}
.mov :is([data-revelar="imagen"], [data-revelar="foto"]) img {
	transition: transform 1.6s var(--suave);
	transition-delay: calc(var(--i, 0) * 90ms);
}
.mov :is([data-revelar="imagen"], [data-revelar="foto"]):not(.is-visible) img {
	transform: scale(1.22);
}

/* Hijos uno tras otro */
.mov [data-revelar-hijos] > * {
	transition:
		opacity 0.8s var(--suave),
		transform 1s var(--suave),
		border-color 0.2s,
		box-shadow 0.2s;
	transition-delay: calc(var(--i, 0) * 110ms), calc(var(--i, 0) * 110ms), 0s, 0s;
}
.mov [data-revelar-hijos]:not(.is-visible) > * {
	opacity: 0;
	transform: translate3d(0, 36px, 0);
}

/* Títulos palabra por palabra */
.mov [data-palabras] .palabra {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding: 0.12em 0.05em 0.18em;
	margin: -0.12em -0.05em -0.18em;
}
.mov [data-palabras] .palabra__in {
	display: inline-block;
	transition: transform 1.05s var(--suave);
	transition-delay: calc(var(--i, 0) * 70ms + var(--retraso, 0ms));
}
.mov [data-palabras]:not(.is-visible) .palabra__in {
	transform: translate3d(0, 115%, 0) rotate(5deg);
}
.escena__titulo {
	--retraso: 150ms;
}

/* Frase que se enciende al leerla */
.mov [data-lectura] .palabra__in {
	opacity: clamp(0.16, calc(var(--p, 1) * (var(--n, 10) + 2) - var(--i, 0)), 1);
	transition: opacity 0.25s linear;
}

/* Profundidad (parallax) */
.mov [data-parallax] {
	transform: translate3d(0, var(--py, 0px), 0);
}

/* Portada: capas que se mueven a distinta velocidad al bajar y siguen un poco al mouse */
.mov .escena__paisaje {
	transform: translate3d(calc(var(--mx, 0) * -12px), calc(var(--s, 0) * 24%), 0) scale(1.08);
}
.mov .escena__colgantes {
	transform: translate3d(calc(var(--mx, 0) * -18px), calc(var(--s, 0) * -20% + var(--my, 0) * -6px), 0);
}
.mov .escena__colgantes img {
	transform-origin: 50% 0;
	animation:
		atena-colgar 1.5s var(--suave) both,
		atena-mecer 7s 1.5s ease-in-out infinite alternate;
}
.mov .escena__figura {
	transform: translate3d(calc(var(--mx, 0) * 14px), calc(var(--s, 0) * 14% + var(--my, 0) * 8px), 0);
}
.mov .escena__texto {
	opacity: calc(1 - var(--s, 0) * 1.5);
	transform: translate3d(0, calc(var(--s, 0) * -70px), 0);
}

/* Cintas, galería y sello: desfilan sin fin (el script las acelera con el scroll) */
.mov .cinta__pista {
	animation: atena-desfile 40s linear infinite;
}
.mov .cinta--inversa .cinta__pista {
	animation-direction: reverse;
}
.mov .galeria__pista {
	animation: atena-desfile 80s linear infinite;
}
@media (hover: hover) {
	.mov .galeria__cinta:hover .galeria__pista {
		animation-play-state: paused;
	}
}
.mov .sello__giro {
	animation: atena-girar 24s linear infinite;
}

/* Botones que siguen un poco al mouse */
.mov [data-iman] {
	translate: var(--ix, 0px) var(--iy, 0px);
	transition:
		translate 0.45s var(--suave),
		background-color 0.18s,
		border-color 0.18s,
		color 0.18s;
}

/* «Opa!» se balancea; los íconos de contacto flotan */
.mov .productos__opa.is-visible img {
	transform-origin: 50% 80%;
	animation: atena-bambolear 3.6s 1.2s ease-in-out infinite;
}
.mov .contacto__lista.is-visible .contacto__icono {
	animation: atena-flotar 4s calc(var(--i, 0) * -1.3s) ease-in-out infinite;
}

/* WhatsApp flotante: un pulso suave de vez en cuando */
.mov .wa-flotante::after {
	animation: atena-pulso 3.2s 2s ease-out infinite;
}

/* «Próximamente» late suavemente */
.mov .sabores__lista.is-visible .sabor__etiqueta {
	animation: atena-latido 2.4s 1s ease-in-out infinite;
}
@keyframes atena-latido {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.08);
	}
}

@keyframes atena-colgar {
	from {
		opacity: 0;
		transform: translateY(-40px) scaleY(0.9);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes atena-mecer {
	from {
		transform: skewX(-1.4deg);
	}
	to {
		transform: skewX(1.4deg);
	}
}
@keyframes atena-subir {
	from {
		opacity: 0;
		transform: translateY(48px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes atena-aparecer {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes atena-desfile {
	to {
		transform: translate3d(-50%, 0, 0);
	}
}
@keyframes atena-girar {
	to {
		transform: rotate(1turn);
	}
}
@keyframes atena-bambolear {
	0%,
	100% {
		transform: rotate(0);
	}
	50% {
		transform: rotate(-5deg) scale(1.03);
	}
}
@keyframes atena-flotar {
	0%,
	100% {
		translate: 0 0;
	}
	50% {
		translate: 0 -6px;
	}
}
@keyframes atena-caer {
	0% {
		opacity: 0;
		transform: translateY(-80px) scale(0.7);
	}
	55% {
		opacity: 1;
	}
	100% {
		transform: none;
	}
}
@keyframes atena-latir {
	0% {
		opacity: 0.9;
		transform: scale(0.6);
	}
	100% {
		opacity: 0;
		transform: scale(3.2);
	}
}
@keyframes atena-pulso {
	0% {
		box-shadow: 0 0 0 0 rgba(102, 114, 2, 0.5);
	}
	45%,
	100% {
		box-shadow: 0 0 0 18px rgba(102, 114, 2, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}