/*
 * Versión de escritorio (se carga con media="(min-width: 900px)").
 * Disposición de la web actual de enaranda.es (cabecera rosa a todo el ancho con menú de iconos,
 * franja de herramientas bajo la cabecera, columna centrada y eventos a dos columnas) con los
 * elementos del diseño nuevo de la demo. En móvil no se aplica nada de esto.
 */
:root {
	--desk: 1040px;
	--gutter: max(24px, calc((100vw - var(--desk)) / 2));
	--toolbar-h: 76px;
}
.desk-nav { display: flex; }

/* La app ocupa toda la pantalla; el contenido va en una columna centrada. */
.app { max-width: none; }
main { padding: 0; scrollbar-gutter: stable; }
#content { width: calc(100% - 48px); max-width: var(--desk); margin: 0 auto; padding: 22px 0 56px; }
.bottom { display: none; }

/* Cabecera: logo a la izquierda y menú de secciones (icono encima del texto) a la derecha. */
header { position: relative; padding: 0 var(--gutter); }
.brand { height: 82px; gap: 24px; }
header .logo { width: auto; max-width: 210px; height: 50px; margin-right: auto; }
.brand > .menu { display: none; }
.desk-nav { align-self: stretch; align-items: stretch; gap: 2px; }
.desk-nav a,
.desk-nav button {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
	padding: 4px 14px 0; color: #fff; text-decoration: none; font-size: 13px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .3px; opacity: .88; border-bottom: 4px solid transparent;
}
.desk-nav .icon { width: 27px; height: 27px; }
.desk-nav a:hover,
.desk-nav button:hover { opacity: 1; background: rgba(255, 255, 255, .08); }
.desk-nav .active,
.desk-nav [aria-expanded="true"] { opacity: 1; border-bottom-color: #fff; }

/* Franja de herramientas de la agenda: Hoy, Próximos días y buscar a la izquierda;
   Filtros y zona a la derecha (están dentro de la cabecera y se colocan sobre la franja). */
.toolbar {
	display: flex; align-items: center; gap: 12px; height: var(--toolbar-h);
	padding: 0 var(--gutter); background: #fff; border-bottom: 1px solid var(--line);
}
.date-tools { flex: 0 0 auto; }
.date-tools button { min-height: 48px; font-size: 17px; padding: 8px 16px; }
.date-tools .today { margin-right: 0; min-width: 96px; }
#search-box { flex: 0 1 300px; margin: 0; }
#search-box input { min-width: 0; flex: 1; border: 0; padding: 0 12px; font-size: 16px; }
header .header-tools {
	position: absolute; top: 100%; right: var(--gutter); height: var(--toolbar-h);
	margin: 0; gap: 22px; z-index: 3;
}
header.compact .header-tools { margin: 0; }
.header-tools button,
.region,
.region select,
.region-value { color: #405167; }
.header-tools button { font-size: 17px; }
.header-tools .icon { color: var(--pink); }
.region select { font-size: 17px; }

/* Agenda: títulos de día a todo el ancho y tarjetas en dos columnas. */
.agenda-day { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; align-items: start; }
.agenda-day > .day-title,
.agenda-day > .empty { grid-column: 1 / -1; }
.agenda-day .card { margin-bottom: 22px; }
.day-title { margin: 6px 0 18px; }
.day-title h1 { font-size: 30px; }
.day-title h2 { font-size: 26px; }
.upcoming-day { margin-top: 36px; }

/* Cartelera y «Además hoy» como franjas a todo el ancho de la columna. */
.also-card.cinema-banner { height: 200px; max-width: none; margin: 8px 0 34px; }
.also-section { margin: 0 0 34px; }
.also-heading h2 { font-size: 28px; }
.also-track { gap: 14px; }
.also-track .also-card { flex: 0 0 206px; height: 330px; aspect-ratio: auto; max-width: none; border-radius: 14px; }
.also-copy { left: 12px; right: 12px; bottom: 18px; }
.also-copy strong { font-size: 21px; }
.also-copy small { display: block; }

/* Paneles superpuestos: alineados a la derecha de la columna, bajo el menú. */
#panel { padding: 0 var(--gutter); }
#panel .panel { max-width: 560px; margin-left: auto; }
#panel:has([data-cal-title]) .panel, #panel .panel:has([data-cal-title]) { max-width: 440px; }

/* Pantallas anchas: tres columnas. */
@media (min-width: 1400px) {
	:root { --desk: 1280px; }
	.agenda-day { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Ficha de evento: columna de lectura centrada e imagen más grande. */
.event-page { max-width: 820px; margin: 0 auto; }
.event-page .event-hero { margin: 0; }
.event-page .event-hero > img,
.event-page .event-hero > .cover-empty { height: 420px !important; border-radius: 18px; }
.event-page .event-intro h1 { font-size: 36px; }
.search-summary { font-size: 18px; }

/* Cabecera de las páginas interiores (fichas): misma altura que en la portada. */
.app.event-open .brand,
.app.inner-page .brand { height: 82px; }
.app.event-open .brand .logo { width: auto; max-width: 210px; }

/* Hoja de compartir centrada en escritorio. */
.share-sheet { align-items: center; }
.share-sheet-panel { max-width: 440px; border-radius: 18px; }
.place-event { flex-basis: 230px; }

/* Comer en escritorio: barra alineada con el contenido y tarjetas en rejilla. */
#food-controls { padding-left: var(--gutter); padding-right: var(--gutter); }
#food-controls .food-search-field { padding-left: var(--gutter); padding-right: var(--gutter); }
#food-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
#food-list > .empty { grid-column: 1 / -1; }
#food-list .food-card { margin: 0; }
#food-list .is-premium .food-cover { height: 210px; }
.venue-detail { max-width: 820px; margin: 0 auto; }
.venue-detail .venue-hero { height: 420px; border-radius: 18px; }
@media (min-width: 1400px) { #food-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Publicidad: en el escritorio no va de borde a borde; entre las tarjetas ocupa una casilla de la rejilla. */
.ea-caja { margin-left: 0; margin-right: 0; }
.ea-caja img, .ea-caja video { border-radius: 12px; }
.agenda-day .ea-caja.en-lista, .res-grid .ea-caja { grid-column: auto; margin: 0 0 22px; }
#food-list .food-caja { grid-column: 1 / -1; max-width: 560px; margin: 0 auto; width: 100%; }

/* Cartelera: dos películas por fila (cartel de 170 px y horarios al lado); la publicidad, que va tras
   cada dos, ocupa la fila entera y centrada. */
.movie-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.movie-grid .movie { margin: 0; display: flex; flex-direction: column; }
.movie-grid .movie-intro { grid-template-columns: 170px minmax(0, 1fr); gap: 20px; padding: 18px; flex: 1; }
.movie-grid .movie-intro h2 { font-size: 20px; }
.movie-grid .buy-tickets { margin-top: auto; }
.movie-grid .ea-caja { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 560px; margin: 0; }
.cinema-page > .info-button { margin-top: 26px; }
.ea-caja.ea-pendiente::after { border-radius: 12px; }