/* ==========================================================================
   Carta digital — Amanay Sky Bar
   --------------------------------------------------------------------------
   Se carga solo en /menu/ (ver inc/carta.php). Depende de los tokens de
   main.css: --color-teal, --color-ivory, --color-cream-bg, --font-display,
   --font-body, --container-pad.

   Los tonos intermedios van como hex explícito y no como opacity: con
   opacity: .55 sobre el crema el texto pequeño se queda en 3,5:1 y no llega al
   mínimo legible. Los valores de abajo están medidos sobre --color-cream-bg.
   ========================================================================== */

.carta {
	--carta-ink: var(--color-teal);
	--carta-ink-mid: #3d6f7f;   /* 5,0:1 sobre el crema — vale para texto pequeño */
	--carta-ink-soft: #5c8896;  /* 3,5:1 — SOLO decorativo (guías de puntos) */
	--carta-ivory-mid: rgba(243, 249, 255, 0.72);
	--carta-max: 960px;
}

/* ==========================================================================
   Cabecera de la carta
   ========================================================================== */

.carta-hero {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	/* Funde directo al crema del cuerpo, sin pasar por --color-hero-fade.
	   Con el azul claro de por medio quedaba una franja luminosa con borde
	   duro entre el teal y el crema (el azul es más claro que el crema, así
	   que se leía como un destello, no como una transición). El hero de la
	   home sí lo usa, pero allí desemboca en una sección clara. */
	background: linear-gradient(
		to bottom,
		var(--color-teal-deep) 0%,
		var(--color-teal) 68%,
		var(--color-cream-bg) 100%
	);
	color: var(--color-ivory);
	/* Despeja el header, que es fijo. */
	padding: clamp(8rem, 6.5rem + 5vw, 12rem) var(--container-pad) clamp(4rem, 3rem + 4vw, 6.5rem);
}

.carta-hero__kicker {
	font-family: var(--font-body);
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--carta-ivory-mid);
	margin-bottom: clamp(1rem, 0.8rem + 1vw, 1.6rem);
}

/* El claim va pegado al título, como en la carta impresa. Antes había un
   filete vertical entre los dos (el recurso del tema) y separaba tanto que
   parecían dos bloques distintos; el filete se queda solo en la coda. */
.carta-hero__claim {
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
	letter-spacing: 0.02em;
	margin-top: clamp(0.85rem, 0.7rem + 0.6vw, 1.25rem);
}

.carta-hero__claim--sec {
	font-family: var(--font-body);
	font-style: italic;
	font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.125rem);
	color: var(--carta-ivory-mid);
	margin-top: 0.35rem;
}

/* ==========================================================================
   Cuerpo
   ========================================================================== */

/* Crema plano: el degradado entero vive en el hero, que ya aterriza en este
   mismo color, así que la unión entre los dos bloques es invisible. */
.carta-body {
	background: var(--color-cream-bg);
	color: var(--carta-ink);
	padding-block: clamp(3rem, 2.5rem + 3vw, 5.5rem) clamp(3.5rem, 3rem + 3vw, 6rem);
}

.carta-body__inner {
	max-width: var(--carta-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

/* ==========================================================================
   Sección
   ========================================================================== */

.carta-section + .carta-section,
.carta-section + .carta-combos,
.carta-combos + .carta-coda,
.carta-section + .carta-coda {
	margin-top: clamp(3rem, 2.5rem + 3vw, 5rem);
}

.carta-section__head {
	text-align: center;
	margin-bottom: clamp(2rem, 1.6rem + 2vw, 3rem);
}

.carta-section__head h2 {
	letter-spacing: 0.06em;
}

.carta-section__head-sec {
	font-family: var(--font-body);
	font-style: italic;
	font-size: 1rem;
	color: var(--carta-ink-mid);
	margin-top: 0.5rem;
}

.carta-section__list {
	display: grid;
	gap: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
}

/* ==========================================================================
   Plato
   ========================================================================== */

.carta-dish {
	display: flex;
	align-items: flex-start;
	gap: clamp(0.9rem, 0.7rem + 1vw, 1.5rem);
}

.carta-dish__photo {
	flex: 0 0 auto;
	width: clamp(72px, 56px + 6vw, 112px);
	height: clamp(72px, 56px + 6vw, 112px);
	border-radius: 14px;
	object-fit: cover;
	cursor: zoom-in;
	box-shadow: 0 6px 18px rgba(0, 53, 71, 0.12);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.carta-dish__photo:hover {
	transform: translateY(-2px) scale(1.02);
	box-shadow: 0 10px 26px rgba(0, 53, 71, 0.18);
}

.carta-dish__body {
	flex: 1 1 auto;
	min-width: 0;
}

/* La guía de puntos es un elemento elástico entre nombre y precio: así el
   precio queda siempre pegado al margen derecho, como en la carta impresa,
   sin depender de que el nombre ocupe una línea o dos. */
.carta-dish__row {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
}

.carta-dish__name {
	font-family: var(--font-display);
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.25;
}

.carta-dish__leader {
	flex: 1 1 auto;
	min-width: 1.5rem;
	border-bottom: 1px dotted var(--carta-ink-soft);
	transform: translateY(-0.3em);
}

.carta-dish__price {
	flex: 0 0 auto;
	font-family: var(--font-display);
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem);
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.carta-dish__name-sec {
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--carta-ink-mid);
	margin-top: 0.3rem;
}

.carta-dish__desc {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--carta-ink);
	margin-top: 0.45rem;
	max-width: 62ch;
}

.carta-dish__desc--sec {
	font-style: italic;
	font-size: 0.875rem;
	color: var(--carta-ink-mid);
	margin-top: 0.2rem;
}

/* ==========================================================================
   Combos
   ========================================================================== */

.carta-combos {
	background: var(--color-teal);
	color: var(--color-ivory);
	border-radius: 22px;
	padding: clamp(2rem, 1.6rem + 2.5vw, 3.5rem) clamp(1.25rem, 1rem + 2vw, 3rem);
	text-align: center;
}

.carta-combos__title {
	letter-spacing: 0.08em;
	margin-bottom: clamp(1.75rem, 1.4rem + 1.8vw, 2.75rem);
}

.carta-combos__grid {
	display: grid;
	gap: clamp(2rem, 1.5rem + 2vw, 3rem);
}

@media (min-width: 720px) {
	.carta-combos__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Separador entre los dos combos, como el filete de la carta impresa. */
	.carta-combos__grid > .carta-combo + .carta-combo {
		border-left: 1px solid rgba(243, 249, 255, 0.25);
		padding-left: clamp(1.5rem, 1rem + 2vw, 3rem);
	}
}

.carta-combo__photo {
	width: clamp(120px, 90px + 8vw, 180px);
	height: clamp(120px, 90px + 8vw, 180px);
	margin: 0 auto clamp(1rem, 0.8rem + 1vw, 1.5rem);
	border-radius: 50%;
	object-fit: cover;
	cursor: zoom-in;
	box-shadow: 0 10px 28px rgba(0, 26, 36, 0.28);
}

.carta-combo__name {
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.carta-combo__price {
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.6rem + 2vw, 3rem);
	line-height: 1.1;
	margin-top: 0.35rem;
}

.carta-combo__list {
	display: grid;
	gap: 0.75rem;
	margin-top: clamp(1rem, 0.8rem + 1vw, 1.5rem);
}

.carta-combo__item {
	display: block;
	font-size: 0.9375rem;
}

.carta-combo__item-sec {
	display: block;
	font-style: italic;
	font-size: 0.8125rem;
	color: var(--carta-ivory-mid);
	margin-top: 0.1rem;
}

/* ==========================================================================
   Coda
   ========================================================================== */

.carta-coda {
	text-align: center;
}

.carta-coda__kicker {
	font-size: 0.8125rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--carta-ink-mid);
}

.carta-coda__firma {
	font-family: var(--font-display);
	font-size: clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
	line-height: 1.35;
	margin-top: 0.75rem;
	max-width: 34ch;
	margin-inline: auto;
}

.carta-coda__firma--sec {
	font-family: var(--font-body);
	font-style: italic;
	font-size: clamp(0.9375rem, 0.9rem + 0.3vw, 1.0625rem);
	color: var(--carta-ink-mid);
	margin-top: 0.4rem;
}

.carta-coda__divider {
	width: 1px;
	height: clamp(2rem, 1.6rem + 2vw, 3.5rem);
	background: var(--carta-ink-soft);
	margin: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem) auto;
}

.carta-coda__sugerencias {
	font-size: 1rem;
}

.carta-coda__sugerencias--sec {
	font-style: italic;
	font-size: 0.9375rem;
	color: var(--carta-ink-mid);
	margin-top: 0.2rem;
}

.carta-coda__cta {
	margin-top: clamp(1.25rem, 1rem + 1vw, 2rem);
}

.carta-coda__alergenos {
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--carta-ink-mid);
	max-width: 56ch;
	margin: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem) auto 0;
}

.carta-coda__alergenos--sec {
	font-style: italic;
	margin-top: 0.4rem;
}

/* ==========================================================================
   Movil
   ========================================================================== */

@media (max-width: 520px) {
	/* En pantalla estrecha el precio no cabe en la misma línea que un nombre
	   largo: se pasa debajo y la guía de puntos ocupa el hueco restante. */
	.carta-dish__row {
		flex-wrap: wrap;
	}

	.carta-dish__name {
		flex: 1 1 100%;
	}

	.carta-dish__leader {
		transform: translateY(-0.35em);
	}
}

@media (prefers-reduced-motion: reduce) {
	.carta-dish__photo {
		transition: none;
	}

	.carta-dish__photo:hover {
		transform: none;
	}
}