@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;800&family=Raleway:wght@400;600&display=swap");

/* Paleta de colores */
:root {
	--color-primary: #4f6d7a;
	--color-cream: #f7ebdd;
	--color-text: #24323a;
	--font-body: "Work Sans", "Segoe UI", sans-serif;
	--font-title: "Nunito Sans", "Segoe UI", sans-serif;
	--header-height: 96px;
}

/* Reset básico para evitar márgenes del navegador que encajonan todo el sitio */
html, body {
	margin: 0;
	padding: 0;
	overflow-x: hidden; /* previene scroll horizontal por pequeños desbordes */
}

/* Header */
.site-header { 
	background: var(--color-primary);
	color: var(--color-cream);
	position: sticky;
	top: 0;
	z-index: 1000;
}

.header-inner {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	max-width: 1120px;
	margin: 0 auto;
	padding: 0.75rem 1rem;
	position: relative; /* probando codigo actual */
}

.logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}
/* Logo real como imagen */
.logo-img {
	width: 130px; /* ancho solicitado */
	height: 130px; /* mantener formato cuadrado visual */
	border-radius: 8px;
	object-fit: cover; /* rellena sin deformarse */
	display: block;
}

/* Botón hamburguesa */
.menu-toggle {
	appearance: none;
	background: transparent;
	border: none; /* sin línea alrededor de las 3 rayas */
	color: var(--color-cream);
	border-radius: 8px;
	padding: 0.4rem 0.6rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: auto; /* push hamburger to right on mobile */
}
.menu-toggle:focus-visible { outline: 3px solid rgba(247, 235, 221, 0.7); }
.menu-icon {
	position: relative;
	width: 22px;
	height: 2px;
	background: var(--color-cream);
	transition: background-color 150ms ease, transform 150ms ease;
}
.menu-icon::before,
.menu-icon::after {
	content: "";
	position: absolute;
	left: 0;
	width: 22px;
	height: 2px;
	background: var(--color-cream);
	transition: transform 150ms ease, top 150ms ease, background-color 150ms ease;
	transform-origin: center;
}
.menu-icon::before { top: -6px; }
.menu-icon::after  { top: 6px; }

/* Cuando el menú está abierto, convertir hamburguesa en X */
.menu-toggle[aria-expanded="true"] .menu-icon {
	background: transparent;
}
.menu-toggle[aria-expanded="true"] .menu-icon::before {
	top: 0;
	transform: rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-icon::after  {
	top: 0;
	transform: rotate(-45deg);
}

/* Nav */
.nav {
	position: absolute;
	right: 0;
	left: auto;
	top: 100%;
	margin-top: 0.35rem;
	padding: 0.85rem;
	width: min(88vw, 360px);
	background: var(--color-primary);
	border: 1px solid rgba(247, 235, 221, 0.28);
	border-radius: 18px;
	box-shadow: 0 14px 34px rgba(36, 50, 58, 0.28);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(18px);
	transition: opacity 220ms ease, transform 220ms ease;
	z-index: 950;
}
.nav.nav--open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(0);
}

body.has-nav-open { overflow: hidden; }

.nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
	background: transparent;
	border: 0;
}

.nav-item { position: relative; }
.nav-link {
	width: 92%;
	text-align: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.6rem 0.9rem;
	border-radius: 999px; /* pill en mobile también */
	background: rgba(247, 235, 221, 0.12);
	color: var(--color-cream);
	border: 1px solid rgba(247, 235, 221, 0.4);
	text-decoration: none;
}
.nav-link:hover { background: rgba(247, 235, 221, 0.2); }
.nav-link:focus-visible { outline: 3px solid rgba(247, 235, 221, 0.7); }

/* Dropdown */
.dropdown-toggle { cursor: pointer; }
.dropdown-toggle::after {
	content: "";
	display: inline-block;
	margin-left: 0.35em;
	width: 0.7em;   /* proporcional a la fuente */
	height: 0.7em;
	border-right: 0.12em solid var(--color-cream);
	border-bottom: 0.12em solid var(--color-cream);
	transform: rotate(45deg); /* chevron apunta hacia abajo */
	transition: transform 200ms ease;
	vertical-align: middle;
}
.dropdown-toggle[aria-expanded="true"]::after {
	transform: rotate(-135deg); /* ahora apunta hacia arriba */
}

.submenu {
	list-style: none;
	margin: 0.25rem 0 0;
	padding: 0.25rem 0;
	background: rgba(247, 235, 221, 0.12);
	border: 1px solid rgba(247, 235, 221, 0.4);
	border-radius: 8px;
	/* Animated collapse defaults */
	visibility: hidden;
	pointer-events: none;
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transform: translateY(-4px);
	transition: opacity 200ms ease, transform 200ms ease, max-height 250ms ease;
}
.submenu.submenu--open {
	visibility: visible;
	pointer-events: auto;
	opacity: 1;
	max-height: 480px; /* enough to show all items */
	transform: translateY(0);
}
.submenu-link {
	display: block;
	padding: 0.5rem 0.75rem;
	color: var(--color-cream);
	text-decoration: none;
	text-align: center; /* centrar texto del submenu */
}
.submenu-link:hover { background: rgba(247, 235, 221, 0.2); }
.submenu-link:focus-visible { outline: 3px solid rgba(247, 235, 221, 0.7); }

/* Contenido principal */
.content {
	--page-pad: 1rem;
	max-width: 1120px;
	margin: 0 auto;
	padding: var(--page-pad);
}
/* En inicio, pegar el video al header */
.page-home .content { padding: 0 0 0rem; }
/* En Inicio, devolver el padding lateral sólo a las secciones estándar */
.page-home .section-hero { padding-left: 1rem; padding-right: 1rem; }
/* Switcher de secciones (fijo) */
.section-switcher {
	position: sticky;
	top: var(--header-height);
	z-index: 900;
	background: var(--color-primary);
	border-bottom: 1px solid rgba(247, 235, 221, 0.3);
}
.switcher-inner {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0.4rem 0.5rem;
	display: flex;
	justify-content: center;
	overflow: visible;
}
.switcher-list {
	display: flex;
	justify-content: center; /* mantenerlos en una sola fila compacta */
	align-items: center;
	gap: 0.35rem;
	flex-wrap: nowrap; /* evitar salto a dos líneas */
	overflow: hidden;
	padding: 0 0.15rem 0.15rem;
	list-style: none;
	margin: 0;
	/* width: 100%; */
}
.pill-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.48rem 0.5rem;
	border-radius: 999px;
	background: rgba(247, 235, 221, 0.12);
	border: 1px solid rgba(247, 235, 221, 0.5);
	color: var(--color-cream);
	text-decoration: none;
	white-space: nowrap;
	min-width: 68px; /* reducido para que entren 4 sin scroll */
	max-width: 120px;
	flex: 1 1 0; /* repartir ancho disponible en una sola fila */
	font-size: 0.95rem;
	font-family: var(--font-title);
	font-weight: 700;
}
.pill-link:hover { background: rgba(247, 235, 221, 0.2); }
.pill-link:focus-visible { outline: 3px solid rgba(247, 235, 221, 0.7); }
.pill-link.active, .pill-link[aria-current="page"] {
	background: var(--color-cream);
	color: var(--color-primary);
	border-color: var(--color-cream);
}

@media (min-width: 768px) {
	.switcher-inner {
		justify-content: center;
		overflow: visible;
	}
	.switcher-list {
		gap: 0.75rem;
		flex-wrap: nowrap;
		overflow: visible;
		width: min(820px, 100%);
		padding: 0;
	}
	.pill-link {
		padding: 0.55rem 1.2rem;
		flex: 0 0 auto;
		min-width: 132px;
		font-size: 1rem;
	}
}
.hero h1 { margin: 1rem 0 0.25rem; font-family: var(--font-title); }
.hero p { margin: 0; font-family: "Raleway", "Segoe UI", sans-serif; }

/* Inicio: Video Hero */
.video-hero { position: relative; padding: 0 0 1rem; }
.video-heading {
	position: absolute;
	z-index: 2;
	bottom: 36px; /* un poco más arriba desde el borde inferior */
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	color: var(--color-cream);
	font-family: var(--font-title);
	font-weight: 800;
	letter-spacing: 0.02em;
	margin: 0;
	padding: 0 1rem;
	font-size: clamp(1.6rem, 5vw, 2.4rem); /* letra ajustada para caber en una línea */
	white-space: nowrap; /* evita salto de línea en el heading del hero */
	text-shadow: 0 2px 6px rgba(0,0,0,0.35); /* mejora legibilidad sobre el video */
	pointer-events: none;
}
.video-container {
	position: relative;
	width: 100%; /* evitar desbordes horizontales en mobile */
	max-width: none;
	aspect-ratio: 16 / 9;   /* relación estándar de video */
	margin: 0;
	background: #000;
	overflow: hidden;
}
.hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;      /* llena sin barras, recorte agradable */
}

.wave-divider {
	position: relative;
	/* Fondo invertido para que la animación resalte */
	background: var(--color-primary);
	min-height: clamp(240px, 40vw, 360px);
	padding-top: clamp(1.5rem, 5vw, 3rem);
	margin: -1rem 0 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	isolation: isolate;
	overflow: hidden;
}
.wave-divider::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: clamp(80px, 14vw, 140px);
	/* Transición hacia la sección clara siguiente */
	background: linear-gradient(180deg, rgba(247, 235, 221, 0) 0%, rgba(247, 235, 221, 0.6) 45%, rgba(247, 235, 221, 1) 100%);
	z-index: -1;
}
.wave-divider__canvas {
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	overflow: hidden;
}
.wave-divider__svg {
	display: block;
	width: 100%;
	height: 100%;
}
.wave-divider__background { fill: transparent; }
.wave-divider__base { fill: #3f5964; opacity: 1; }
.wave-divider__line {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0.95;
}
.wave-divider__line--dark { stroke: rgba(0, 0, 0, 0.26); stroke-width: 28; opacity: 0.35; }
.wave-divider__line--primary { stroke: rgba(247, 235, 221, 0.18); stroke-width: 24; opacity: 0.5; }
.wave-divider__line--cream { stroke: rgba(247, 235, 221, 0.32); stroke-width: 18; opacity: 0.85; }
.wave-divider__line--light { stroke: rgba(247, 235, 221, 0.55); stroke-width: 14; opacity: 0.9; }

.section-hero--about {
	position: relative;
	z-index: 1;
	margin-top: clamp(-6rem, -10vw, -4rem);
	padding: clamp(4.25rem, 8vw, 5.75rem) 1rem 1.5rem;
	background: linear-gradient(180deg, rgba(247, 235, 221, 0.95) 0%, rgba(247, 235, 221, 1) 55%);
	border-radius: 32px 32px 0 0;
	box-shadow: 0 -20px 48px rgba(79, 109, 122, 0.16);
}
.section-hero--about .title-banner { padding-top: 0; }
.photo-gallery {
	padding: clamp(2rem, 6vw, 3rem) 1rem;
	background: var(--color-primary);
}
.gallery-frame {
	position: relative;
	max-width: min(92vw, 960px);
	margin: 0 auto;
}
.gallery-viewport {
	overflow: hidden;
	border-radius: 28px;
	box-shadow: 0 24px 48px rgba(79, 109, 122, 0.2);
	/* colchón lateral para que el marco se vea completo sin comer las fotos vecinas */
	padding: clamp(1rem, 4vw, 2rem) clamp(0.75rem, 3vw, 1.5rem);
	background: transparent;
}
.gallery-track {
	--slide-gap: clamp(0.5rem, 2.5vw, 1.5rem);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
	gap: var(--slide-gap);
}
.gallery-slide {
	position: relative;
	flex: 0 0 clamp(220px, 34vw, 380px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1), opacity 260ms ease, filter 320ms ease, box-shadow 320ms ease;
	opacity: 0.45;
	transform: translateY(18px) scale(0.92);
	filter: saturate(0.8);
}
.gallery-figure {
	margin: 0;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(220px, 32vw, 360px);
	height: clamp(260px, 44vw, 420px);
	border-radius: 22px;
	background: rgba(247, 235, 221, 0.92);
	box-shadow: 0 16px 34px rgba(79, 109, 122, 0.18);
	padding: clamp(0.5rem, 2vw, 1.25rem);
}
.gallery-figure img {
	display: block;
	max-height: 100%;
	max-width: 100%;
	height: auto;
	width: auto;
	object-fit: contain;
}
.gallery-slide.is-active {
	transform: translateY(-10px) scale(1.06);
	opacity: 1;
	filter: saturate(1.05);
}
.gallery-slide.is-active .gallery-figure {
	width: clamp(260px, 40vw, 440px);
	height: clamp(300px, 52vw, 500px);
}
.gallery-slide.is-prev,
.gallery-slide.is-next {
	transform: translateY(-6px) scale(0.95);
	opacity: 0.85;
	filter: saturate(0.95);
}

.gallery-control {
	position: absolute;
	top: 50%;
	width: clamp(44px, 8vw, 60px);
	height: clamp(60px, 11vw, 80px);
	border-radius: 16px;
	border: 2px solid rgba(247, 235, 221, 0.55);
	background: rgba(247, 235, 221, 0.88);
	color: var(--color-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transform: translateY(-50%);
	box-shadow: 0 12px 28px rgba(79, 109, 122, 0.2);
	cursor: pointer;
	transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.gallery-control:hover {
	transform: translateY(-50%) scale(1.06);
	box-shadow: 0 18px 32px rgba(79, 109, 122, 0.24);
}
.gallery-control:focus-visible {
	outline: 3px solid rgba(79, 109, 122, 0.35);
	outline-offset: 3px;
}
.gallery-control span {
	font-size: clamp(1.35rem, 5vw, 1.75rem);
	line-height: 1;
	color: var(--color-primary); /* flechas en celeste para mejor contraste sobre el botón claro */
}
.gallery-control--prev { left: clamp(-1.25rem, -3vw, -0.5rem); }
.gallery-control--next { right: clamp(-1.25rem, -3vw, -0.5rem); }

.section-hero--about .section-lead-card { margin-top: 0.75rem; }

@media (min-width: 768px) {
	.section-hero--about { padding: clamp(5rem, 8vw, 6.5rem) 2rem 2rem; }
}



.wave-divider__cup {
	position: absolute;
	left: 50%;
	top: clamp(3.25rem, 10vw, 6.75rem);
	transform: translateX(-50%);
	z-index: 2;
	pointer-events: none;
}

.wave-divider__cup-animation {
	width: clamp(320px, 58vw, 500px);
	height: auto;
	filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.22));
}

.about-beans {
	margin: -1rem auto 0;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 1;
}

.about-beans__animation {
	width: clamp(200px, 42vw, 320px);
	height: auto;
	filter: drop-shadow(0 12px 22px rgba(79, 109, 122, 0.16));
}


/* Inicio: Hero con granos y galería */
.coffee-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(1rem, 3vw, 2rem) 0 3rem;
	border-radius: 16px;
	background: linear-gradient(180deg, rgba(79,109,122,0.08), rgba(79,109,122,0.18));
}
.coffee-hero .hero-backdrop {
	position: absolute;
	inset: 0;
	background-image: url("Fotos/cafes.jpg"); /* reemplazar por 'Granos de cafe' cuando lo agregues */
	background-size: cover;
	background-position: center 30%;
	filter: saturate(0.9) brightness(0.55) blur(2px);
	transform: scale(1.04);
}
/* ondas superiores tipo aroma */
.coffee-hero::before {
	content: "";
	position: absolute; inset: 0 0 auto 0; height: 120px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'><g fill='none' stroke='%23f7ebdd' stroke-width='6' opacity='0.75'><path d='M0 120 C 150 60, 300 180, 450 120 S 750 60, 900 120 1050 180, 1200 120'/><path d='M0 160 C 180 100, 320 220, 500 160 S 740 100, 960 160 1080 220, 1200 160'/></g></svg>") repeat-x center bottom / 1200px 120px;
	opacity: 0.55;
}

/* Decoración de granos: columnas laterales con leve flotado */
.beans { position: absolute; top: 0; bottom: 0; width: min(32vw, 420px); pointer-events: none; }
.beans--left  { left: -4vw; }
.beans--right { right: -4vw; transform: scaleX(-1); }
.beans .bean {
	position: absolute;
	width: 80px; height: 56px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 84'><defs><linearGradient id='g' x1='0' x2='1'><stop offset='0' stop-color='%232a2a2a'/><stop offset='1' stop-color='%235f3b2a'/></linearGradient></defs><ellipse cx='60' cy='42' rx='52' ry='36' fill='url(%23g)'/><path d='M60 6 C52 24 52 60 60 78' stroke='%23caa37a' stroke-width='5' stroke-linecap='round' fill='none' opacity='0.8'/></svg>") no-repeat center / contain;
	filter: drop-shadow(0 8px 14px rgba(0,0,0,0.35));
	animation: beanFloat 10s ease-in-out infinite;
	opacity: 0.9;
}
.beans--left  .bean:nth-child(1){ top:8%;  left:8%;  animation-delay: -1s;  }
.beans--left  .bean:nth-child(2){ top:26%; left:24%; animation-delay: -3s;  }
.beans--left  .bean:nth-child(3){ top:44%; left:6%;  animation-delay: -5s;  }
.beans--left  .bean:nth-child(4){ top:62%; left:22%; animation-delay: -7s;  }
.beans--left  .bean:nth-child(5){ top:78%; left:10%; animation-delay: -9s;  }
.beans--left  .bean:nth-child(6){ top:14%; left:32%; animation-delay: -11s; }
.beans--left  .bean:nth-child(7){ top:54%; left:34%; animation-delay: -13s; }
.beans--left  .bean:nth-child(8){ top:86%; left:30%; animation-delay: -15s; }

.beans--right .bean:nth-child(1){ top:10%; right:8%; animation-delay: -2s;  }
.beans--right .bean:nth-child(2){ top:30%; right:24%; animation-delay: -4s; }
.beans--right .bean:nth-child(3){ top:48%; right:6%;  animation-delay: -6s; }
.beans--right .bean:nth-child(4){ top:66%; right:22%; animation-delay: -8s; }
.beans--right .bean:nth-child(5){ top:82%; right:10%; animation-delay: -10s;}
.beans--right .bean:nth-child(6){ top:18%; right:32%; animation-delay: -12s;}
.beans--right .bean:nth-child(7){ top:58%; right:34%; animation-delay: -14s;}
.beans--right .bean:nth-child(8){ top:90%; right:30%; animation-delay: -16s;}

@keyframes beanFloat {
	0%,100% { transform: translateY(0) rotate(0.001deg); }
	50%     { transform: translateY(-12px) rotate(-3deg); }
}

.coffee-hero .gallery {
	position: relative;
	z-index: 1;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 82%;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 2.5rem 1rem 1.25rem;
}
.photo-card { 
	scroll-snap-align: center;
	border-radius: 18px; 
	box-shadow: 0 10px 24px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.25);
	overflow: hidden; 
	background: rgba(0,0,0,0.35);
}
.photo-card img{ display:block; width:100%; aspect-ratio: 4/3; object-fit: cover; }
.photo-card:hover{ transform: translateY(-3px); transition: transform 160ms ease; }

.hero-tag {
	position: relative; z-index: 1; color: var(--color-cream);
	font-family: var(--font-title); font-size: clamp(1.25rem, 3vw, 1.8rem);
	margin: 0 0 0 0.75rem;
}

@media (min-width: 768px){
	.coffee-hero { padding: 2rem 0 3.5rem; }
	.coffee-hero .gallery{ grid-auto-flow: initial; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: unset; gap: 1.25rem; overflow: visible; padding: 3rem 2rem 1.5rem; }
	.photo-card img{ aspect-ratio: 1 / 1; }
	.hero-tag{ margin-left: 2rem; }
}

/* Secciones de carta */
.section-hero { display: grid; gap: 0.75rem; margin: 0rem 0 0rem; }
.section-title {
	text-align: center;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: var(--color-cream);
	background: var(--color-primary);
	border-radius: 10px;
	padding: 0.75rem 1rem;
	font-family: var(--font-title);
}
.title-banner {
	display: grid;
	gap: 0.75rem;
	justify-items: center;
	/* Quitar encuadre: fondo y borde */
	background: transparent;
	border-radius: 0;
	padding: 0.75rem 0; /* mantener algo de aire vertical */
}
.title-banner .title {
	margin: 0;
	/* Texto en color principal al quitar el fondo */
	color: var(--color-primary);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: clamp(1.8rem, 4.5vw, 3rem);
	font-family: var(--font-title);
}
.title-banner .line {
	width: min(72%, 880px); /* líneas más largas bajo el título */
	display: flex;
	align-items: center;
	gap: 0; /* sin separación entre elementos */
}
.title-banner .line .dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	/* Dots en color principal para contraste sobre fondo crema */
	background: var(--color-primary);
	flex: 0 0 auto;
}
.title-banner .line .rule {
	height: 2px; /* más angosto */
	/* Líneas en color principal para contraste */
	background: var(--color-primary);
	border-radius: 2px;
	margin: 0; /* pegar la línea a los círculos */
	flex: 1 1 auto;
}
.section-lead-card {
	display: grid;
	grid-template-columns: 1fr; /* imagen arriba, texto abajo en todas las vistas */
	gap: 0; /* sin separación entre imagen y texto */
	background: transparent; /* sin fondo: imagen full-bleed */
	border: 0;
	border-radius: 0;
	padding: 0;
	overflow: visible; /* permitir que el texto se superponga a la imagen */
}
.lead-media {
	display: block;
	width: 100%; /* valor base */
	height: var(--lead-media-h, 220px);
	margin: 0;
	transform: none;
	background: rgba(247, 235, 221, 0.2);
	object-fit: cover; /* recorte agradable para la imagen */
}
.lead-media--full-bleed {
	width: calc(100% + var(--page-pad) * 2);
	max-width: none;
	margin-left: calc(-1 * var(--page-pad));
	margin-right: calc(-1 * var(--page-pad));
	transform: none;
}
.page-lunch .lead-media--full-bleed {
	/* Mostrar más alto el hero de Lunch para que la foto se comporte como en el resto */
	--lead-media-h: clamp(240px, 60vw, 360px);
	object-position: 52% 71%; /* centra mejor el plato y lo baja un poco más */
	transform: scale(1.06); /* leve zoom para recentrar el foco en el plato */
}
.page-infusiones .lead-media--full-bleed,
.page-brunch .lead-media--full-bleed,
.page-tortas .lead-media--full-bleed {
	/* Igualar altura de hero a Lunch */
	--lead-media-h: clamp(240px, 66vw, 360px);
}
.lead-media.placeholder { background-image: linear-gradient(135deg, rgba(247,235,221,0.25), rgba(247,235,221,0.1)); }
.lead-body {
	padding: 0.75rem; 
	text-align: center;
	background: var(--color-primary);
	border: 1px solid rgba(247, 235, 221, 0.4);
	border-radius: 12px;
	width: 100%; /* mismo ancho que las cajas azules inferiores */
	box-sizing: border-box;
	position: relative;
	z-index: 1; /* por encima de la imagen */
	margin: calc(-1 * (var(--lead-media-h, 220px) * 0.12)) auto 0; /* menor superposición sobre la foto */
}
.page-lunch .lead-body,
.page-infusiones .lead-body,
.page-cafes .lead-body,
.page-brunch .lead-body,
.page-tortas .lead-body {
	padding: 1.35rem 1.1rem;
	min-height: 126px;
	display: grid;
	gap: 0.75rem;
	justify-items: center;
	align-content: center;
	margin-bottom: 25px;
}
.page-lunch .lead-body h2,
.page-infusiones .lead-body h2,
.page-cafes .lead-body h2,
.page-brunch .lead-body h2,
.page-tortas .lead-body h2 {
	margin: 0;
	font-size: clamp(1.24rem, calc(3vw + 0.13rem), 1.55rem);
}

.page-lunch .lead-body p,
.page-infusiones .lead-body p,
.page-cafes .lead-body p,
.page-brunch .lead-body p {
	margin: 0;
	font-size: clamp(0.95rem, 3vw, 1.18rem);
	line-height: 1.55;
	max-width: 34ch;
	font-family: "Raleway", "Segoe UI", sans-serif;
}
.page-tortas .lead-body p {
	margin: 0;
	font-size: clamp(0.95rem, 3vw, 1.18rem);
	line-height: 1.55;
	white-space: nowrap;
	max-width: none;
	font-family: "Raleway", "Segoe UI", sans-serif;
}
.lead-card--text-only .lead-body { margin: 0 auto 0; }
.lead-body h2 { 
	margin: 0 0 0.5rem; /* más aire debajo del título */
	color: var(--color-cream);
	font-family: var(--font-title);
	font-weight: 700;
}
.lead-body p  { margin: 0.25rem 0 0; color: var(--color-cream); opacity: 0.9; }
.section-hero--about .lead-body p {
	position: relative;
	z-index: 2;
}
.section-hero--about .lead-body p:last-of-type {
	margin-top: clamp(-4rem, -13vw, -2.25rem);
	padding-top: clamp(1.5rem, 4vw, 2.25rem);
	margin-bottom: 0.5rem;
}

.dish-list { display: grid; gap: 0.75rem; }
.page-tortas .section-hero + .dish-list { margin-top: 1.25rem; }
.dish-card {
	display: grid;
	grid-template-columns: 1fr;
	background: var(--color-primary);
	border: 1px solid rgba(247, 235, 221, 0.4);
	border-radius: 12px;
	overflow: hidden;
	/* Controles por tarjeta para recortar/posicionar cada foto */
	--photo-fit: cover;
	--photo-position: center center;
	--photo-zoom: 1;
	--photo-shift-x: 0px;
	--photo-shift-y: 0px;
	--photo-radius: 12px;
	--photo-bg: rgba(247, 235, 221, 0.2);
	--photo-border: 0 solid transparent;
}
.dish-media { width: 100%; height: 200px; background: var(--photo-bg); }
.dish-media.placeholder { background-image: linear-gradient(135deg, rgba(247,235,221,0.25), rgba(247,235,221,0.1)); }
.dish-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--photo-fit);
	object-position: var(--photo-position);
	transform: translate(var(--photo-shift-x), var(--photo-shift-y)) scale(var(--photo-zoom));
	transform-origin: center;
	border: var(--photo-border);
}
.dish-card.has-inset {
	--media-pad: 12px;
	--media-size: 112px; /* altura/anchura interna de la foto */
	--photo-position: 35% 50%;
	grid-template-columns: calc(var(--media-size) + var(--media-pad) * 2) 1fr;
	align-items: center;
}
.dish-card.has-inset .dish-media {
	height: calc(var(--media-size) + var(--media-pad) * 2);
	padding: var(--media-pad);
	background: transparent;
}
.dish-card.has-inset .dish-media img {
	border-radius: var(--photo-radius);
}
.dish-body { padding: 1.75rem; color: var(--color-cream); }
.dish-name { 
	margin: 0 0 0.25rem; 
	font-family: var(--font-title);
	font-weight: 700;
}
.dish-desc { margin: 0 0 0.5rem; opacity: 0.95; font-family: "Raleway", "Segoe UI", sans-serif; }
.dish-price { font-weight: 700; font-family: "Raleway", "Segoe UI", sans-serif; }

.dish-card.has-image { grid-template-columns: 1fr; border-radius: 14px; overflow: hidden; }
.dish-card.has-image { --photo-radius: 14px; }
.dish-card.has-image .dish-media { display: block; width: 100%; height: var(--dish-media-height, 180px); background: var(--photo-bg); }
.dish-card.has-image .dish-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--photo-fit);
	object-position: var(--photo-position);
	transform: translate(var(--photo-shift-x), var(--photo-shift-y)) scale(var(--photo-zoom));
	transform-origin: center;
	border-radius: var(--photo-radius) var(--photo-radius) 0 0;
}
.dish-card.has-image .dish-body { padding: 1.5rem 1.5rem 1.75rem; }

.dish-card.no-image .dish-media { display: none; }
.dish-card.no-image { border-radius: 12px; }

/* Footer */
.site-footer {
	background: var(--color-text);
	color: var(--color-cream);
	padding: clamp(1.5rem, 4vw, 2.5rem) 1rem;
}
.footer-inner {
	max-width: 1120px;
	margin: 0 auto;
	display: grid;
	gap: 1rem;
	align-items: center;
	grid-template-columns: 1fr;
	text-align: center; /* centrar contenido en mobile */
}
.footer-brand { display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; }
.footer-logo {
	width: 68px;
	height: 68px;
	border-radius: 12px;
	object-fit: contain;
	background: var(--color-primary);
	padding: 8px;
	border: 1px solid rgba(247, 235, 221, 0.4);
	box-shadow: 0 6px 16px rgba(0,0,0,0.2);
	filter: invert(1) brightness(1.05) contrast(1.05); /* asegura contraste sobre fondo oscuro */
}
.footer-title { font-family: var(--font-title); font-weight: 800; letter-spacing: 0.04em; font-size: 1.25rem; }
.footer-heading { margin: 0 0 0.35rem; font-family: var(--font-title); font-size: 1.05rem; letter-spacing: 0.04em; }
.footer-hours p { margin: 0; line-height: 1.4; font-family: "Raleway", "Segoe UI", sans-serif; }
.footer-social { display: grid; gap: 0.45rem; justify-items: center; }
.footer-social-title { margin: 0; font-weight: 700; letter-spacing: 0.01em; font-family: "Raleway", "Segoe UI", sans-serif; }
.social-links { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; }
.social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 10px;
	background: rgba(247, 235, 221, 0.08);
	border: 1px solid rgba(247, 235, 221, 0.35);
	color: var(--color-cream);
	text-decoration: none;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
	transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
.social-link:hover { background: rgba(247, 235, 221, 0.14); transform: translateY(-1px) scale(1.03); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2); }
.social-link:focus-visible { outline: 3px solid rgba(247, 235, 221, 0.7); outline-offset: 3px; }
.social-link svg { width: 20px; height: 20px; display: block; }
.footer-meta { font-size: 0.95rem; opacity: 0.9; font-family: "Raleway", "Segoe UI", sans-serif; }
.footer-credit { font-weight: 700; font-family: "Raleway", "Segoe UI", sans-serif; }

@media (min-width: 768px) {
	.site-footer { margin-top: 2.5rem; padding: 2.25rem 1.5rem; }
	.footer-inner { grid-template-columns: auto 1fr auto auto; gap: 1.5rem; text-align: left; }
	.footer-hours { justify-self: center; text-align: center; }
	.footer-social { justify-self: center; text-align: center; }
	.footer-meta { justify-self: end; text-align: right; }
}

/* Accordion de secciones dentro de cada carta */
.accordion { margin: 0.5rem 0 1rem; }
.accordion-toggle {
	appearance: none;
	position: relative; /* para posicionar la flecha a la derecha */
	background: var(--color-primary); /* volvemos a la paleta original */
	color: var(--color-cream);
	border: 1px solid rgba(247, 235, 221, 0.45); /* borde suave en crema */
	border-radius: 16px; /* look más pulido y amable */
	padding: 1rem 1.25rem; /* base equilibrada */
	padding-right: 4rem; /* espacio para el círculo con flecha */
	padding-left: 4rem;  /* simetría para centrar visualmente el texto */
	width: 100%; /* mismo ancho que los platos */
	display: flex; /* centra contenido en bloque */
	align-items: center;
	justify-content: center; /* texto centrado */
	text-align: center; /* asegura centrado en múltiples líneas */
	cursor: pointer;
	font-family: var(--font-title);
	font-weight: 700; /* menos pesado, más elegante */
	letter-spacing: 0.01em;
	font-size: clamp(1.12rem, 3vw, 1.42rem); /* letra más grande como pediste */
	line-height: 1.2;
	box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 6px 12px rgba(0,0,0,0.08); /* sombra más suave */
	transition: box-shadow 160ms ease, transform 120ms ease;
}
.accordion-toggle:focus-visible { outline: 3px solid rgba(247, 235, 221, 0.7); }
/* Círculo contenedor de la flecha */
.accordion-toggle::after {
	content: "";
	position: absolute;
	right: 1rem;
	top: 50%;
	width: 34px; /* círculo más proporcionado */
	height: 34px;
	border-radius: 50%;
	border: 2px solid var(--color-cream);
	transform: translateY(-50%);
	box-sizing: border-box;
}
.accordion-toggle::before {
	content: "";
	position: absolute;
	right: 1rem;
	top: 50%;
	width: 34px; /* mismo tamaño que el círculo para centrar fácil */
	height: 34px;
	transform: translateY(-50%) rotate(0deg);
	/* Chevron SVG fijo en blanco para contraste alto */
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / 62% 62%;
	transition: transform 200ms ease;
}
.accordion-toggle[aria-expanded="true"]::before { transform: translateY(-50%) rotate(180deg); }

/* Hover/active feedback sutil sin cambiar paleta */
.accordion-toggle:hover { box-shadow: 0 2px 0 rgba(0,0,0,0.06), 0 9px 16px rgba(0,0,0,0.1); }
.accordion-toggle:active { transform: translateY(1px); }

.accordion-panel {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0.25rem 0; /* leve padding para que se perciba el contenido */
	/* Animated collapse defaults */
	visibility: hidden;
	pointer-events: none;
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transform: translateY(-4px);
	transition: opacity 200ms ease, transform 200ms ease, max-height 250ms ease;
}
.accordion-panel.accordion--open {
	visibility: visible;
	pointer-events: auto;
	opacity: 1;
	max-height: 2000px;
	transform: translateY(0);
}

/* Variación para Cafés: sin caja, texto en color celeste */
/* (revertido) Cafés usa el estilo de tarjeta por defecto */

/* Tortas: centrar contenido de tarjetas y textos del lead */
.page-tortas .dish-body { text-align: center; }
.page-tortas .lead-body { text-align: center; }

/* Brunch y Lunch: texto alineado a la izquierda en todas las tarjetas */
.page-brunch .dish-body { text-align: left; }
.page-lunch .dish-body { text-align: left; }

/* Ubicación (home) */
.location-section { padding: clamp(1.75rem, 5vw, 2.75rem) 1rem; background: var(--color-cream); }
.location-card {
	max-width: 1120px;
	margin: 0 auto;
	background: var(--color-primary);
	color: var(--color-cream);
	border: 1px solid rgba(247, 235, 221, 0.4);
	border-radius: 16px;
	padding: clamp(1.4rem, 4vw, 2rem) clamp(1.1rem, 4vw, 2.25rem);
	display: grid;
	gap: 0.65rem;
	justify-items: center;
	text-align: center;
	box-shadow: 0 10px 26px rgba(36, 50, 58, 0.16);
}
.location-heading {
	margin: 0;
	font-family: var(--font-title);
	font-weight: 800;
	letter-spacing: 0.04em;
	font-size: clamp(1.4rem, 3.6vw, 1.8rem);
}
.location-text { margin: 0 0 0.35rem; opacity: 0.9; }
.location-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.65rem 1.2rem;
	border-radius: 999px;
	background: var(--color-cream);
	color: var(--color-primary);
	text-decoration: none;
	font-weight: 700;
	border: 1px solid rgba(36, 50, 58, 0.12);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
	transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.location-link:hover { transform: translateY(-1px); box-shadow: 0 9px 20px rgba(0, 0, 0, 0.16); }
.location-link:focus-visible { outline: 3px solid rgba(247, 235, 221, 0.7); outline-offset: 3px; }
.location-icon { display: inline-flex; align-items: center; justify-content: center; }
.location-icon svg { width: 18px; height: 18px; fill: currentColor; }

@media (min-width: 768px) {
	.content { --page-pad: 1.25rem; padding: var(--page-pad); }
	.section-lead-card { grid-template-columns: 1fr; }
	.lead-media { 
		--lead-media-h: 360px; 
		width: 100%;
		margin-left: 0;
	}
	.lead-media--full-bleed {
		--lead-media-h: 420px;
		width: 100vw;
		max-width: none;
		margin-left: calc(50% - 50vw);
		margin-right: 0;
	}
	.lead-body { width: 100%; padding: 1.5rem 1.25rem; }
	/* Aumentar altura del lead en Lunch (desktop) */
	.page-lunch .lead-body,
	.page-cafes .lead-body,
	.page-brunch .lead-body,
	.page-tortas .lead-body {
		padding: 2rem 1.75rem;
		min-height: 176px;
		gap: 1rem;
	}
	.page-lunch .lead-body p,
	.page-cafes .lead-body p,
	.page-brunch .lead-body p { font-size: 1.15rem; }
	.page-tortas .lead-body p {
		font-size: 1.12rem;
		white-space: nowrap;
	}
	.dish-card { grid-template-columns: 320px 1fr; }
	/* En tarjetas sin imagen, usar una sola columna para centrar correctamente */
	.dish-card.no-image { grid-template-columns: 1fr; }
	.dish-card.has-image { grid-template-columns: 1fr; }
	.dish-media { height: 220px; }
	.dish-card.has-image .dish-media { height: var(--dish-media-height-desktop, 220px); }
}

/* Desktop (>= 768px) */
@media (min-width: 768px) {
	.header-inner {
		padding: 0.75rem 1.25rem;
		display: grid; /* centro real: logo | nav | acciones */
		grid-template-columns: auto 1fr auto;
		align-items: center;
	}
	.menu-toggle { display: none; }
	.nav {
		display: block;
		position: static;
		padding: 0;
		justify-self: center;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		transition: none;
	}
	/* Ocultar el switcher pegajoso en desktop */
	.section-switcher { display: none; }
	.nav-list {
		display: flex;
		align-items: center;
		justify-content: center; /* centrar los 4 menús */
		gap: 0.5rem;
		padding: 0;
		background: transparent;
		border: 0;
	}
	/* Estilo "pill" para los links del header en desktop */
	.nav-link {
		width: auto;
		text-align: center;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0.6rem 1rem;
		border-radius: 999px;
		background: rgba(247, 235, 221, 0.12);
		border: 1px solid rgba(247, 235, 221, 0.5);
		color: var(--color-cream);
		text-decoration: none;
		min-width: 96px;
	}
	.nav-link:hover { background: rgba(247, 235, 221, 0.2); }
	.nav-link[aria-current="page"] {
		background: var(--color-cream);
		color: var(--color-primary);
		border-color: var(--color-cream);
	}
	.has-dropdown:hover > .submenu,
	.has-dropdown:focus-within > .submenu {
		visibility: visible;
		pointer-events: auto;
		opacity: 1;
		max-height: 480px;
		transform: translateY(0);
		position: absolute;
		left: 0;
		top: calc(100% + 4px);
		min-width: 220px;
		background: var(--color-primary);
	}
	@media (prefers-reduced-motion: reduce) {
		.dropdown-toggle::after { transition: none; }
		.submenu { transition: none; }
	}
}