/* =====================================================================
   SECCIONES DE LA PORTADA (compartidas)
   Destacados, "elegí tu mesa", ubicación y el aviso para el dueño.
   La portada grande de arriba (el titular y la foto) la dibuja el
   tema.css de cada restaurante, porque cada uno tiene la suya.
   ===================================================================== */

/* La carta: adelanto con los destacados */
.adelanto { background: var(--fondo-2); }
.adelanto__top { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
.cortes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--linea); border: 2px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.corte { background: var(--fondo-2); text-decoration: none; display: grid; grid-template-rows: auto 1fr; transition: background-color .3s; }
.corte:hover { background: var(--fondo-3); }
.corte__foto { overflow: hidden; aspect-ratio: 4 / 3; }
.corte__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.corte:hover .corte__foto img { transform: scale(1.06); }
.corte__txt { padding: 18px 20px 22px; display: grid; gap: 6px; }
.corte__txt h3 { font-size: 30px; }
.corte__txt p { color: var(--texto-2); font-size: 15px; }
.corte__precio { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; color: var(--texto-2); font-size: 14px; }
.corte__precio b { font: 800 28px/1 var(--f-titulo); color: var(--acento); }
@media (max-width: 860px) { .cortes { grid-template-columns: 1fr; } .corte { grid-template-columns: 128px 1fr; grid-template-rows: none; } .corte__foto { aspect-ratio: auto; } .corte__txt h3 { font-size: 24px; } .corte__txt { padding: 14px 16px; } }

/* Reservar: el plano como gancho */
.gancho { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.gancho__plano { background: var(--fondo-2); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px; max-width: 460px; justify-self: center; width: 100%; }
.gancho ol { list-style: none; padding: 0; display: grid; gap: 14px; margin: 26px 0 30px; counter-reset: p; }
.gancho li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; color: var(--texto); font-size: 17px; counter-increment: p; }
.gancho li::before { content: counter(p); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--linea-2); font: 800 20px/1 var(--f-titulo); color: var(--acento); }
@media (max-width: 860px) { .gancho { grid-template-columns: 1fr; } .gancho__plano { order: 2; } }

/* Dónde estamos */
.lugar { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(24px, 4vw, 56px); align-items: stretch; }
.lugar__mapa { position: relative; border-radius: var(--radio); overflow: hidden; min-height: 340px; border: 1px solid var(--linea); background: var(--fondo-2); }
.lugar__abrir { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 99px; background: var(--fondo-2); color: var(--titulo); font-weight: 600; font-size: 14px; text-decoration: none; box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .45); }
.lugar__abrir .ico { width: 18px; height: 18px; color: var(--acento); }
.lugar__mapa iframe { width: 100%; height: 100%; min-height: 340px; border: 0; filter: grayscale(.4) contrast(1.05); }
.horarios { display: grid; gap: 0; margin: 22px 0 28px; border-top: 1px solid var(--linea); }
.horarios div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.horarios dt { color: var(--titulo); font-weight: 600; }
.horarios dd { color: var(--texto-2); text-align: right; }
@media (max-width: 860px) { .lugar { grid-template-columns: 1fr; } }

/* Aviso al dueño: probá el panel */
.dueno { background: var(--acento); color: var(--sobre-acento); border-radius: var(--radio); padding: clamp(24px, 4vw, 44px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; }
.dueno h2 { color: var(--sobre-acento); font-size: clamp(34px, 4.4vw, 54px); }
.dueno p { max-width: 46ch; margin-top: 8px; font-size: 17px; }
.dueno .btn { background: var(--sobre-acento); color: var(--titulo); }
.dueno .btn:hover { filter: brightness(1.2); }