/* ==========================================================================
   PLANTILLA E · Crema y mostaza
   --------------------------------------------------------------------------
   Modo claro (sin data-theme): cabecera blanca, héroe crema con un "sol" amarillo detrás de la foto,
   tarjetas blancas con filo amarillo y pie de página crema. El marrón queda en textos y detalles.
   Modo oscuro y temas del perfil: conservan el marrón chocolate.
   Se carga al final para quedar por encima del resto de hojas de estilo.
   ========================================================================== */

/* ── Tipografía de títulos (ver la opción C al final) ───────────────────────── */
html .home-banner h1,
html .home-slide-combo h2,
html .home-page .section-title,
html .lnav-name,
html .gourmet-footer-logo {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.home-banner h1 { line-height: 1.02; font-size: clamp(2.2rem, 4.8vw, 3.6rem); }
html .home-banner h1 em, html .home-banner h1 i { font-style: normal !important; }
.home-page .section-title { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
html .gourmet-footer-title { font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; }

/* ── Cabecera blanca ─────────────────────────────────────────────────────────────────────────────── */
html:not([data-theme]) .lnav {
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 8px rgba(44, 27, 20, .06);
}
html:not([data-theme]) .lnav-name { color: var(--marron-oscuro); }
html:not([data-theme]) .lnav-icon { background: rgba(244, 168, 23, .16); color: #B9770E; border-color: rgba(244, 168, 23, .45); }
html:not([data-theme]) .lnav-menu-links a,
html:not([data-theme]) .lnav-item { color: var(--text) !important; }
html:not([data-theme]) .lnav-menu-links a:hover,
html:not([data-theme]) .lnav-item:hover { color: var(--marron) !important; background: rgba(244, 168, 23, .16) !important; }
html:not([data-theme]) .lnav-item svg { stroke: #B9770E !important; }
html:not([data-theme]) .lnav-menu-links a.lnav-item[aria-current="page"] {
  color: var(--marron-oscuro) !important; background: rgba(244, 168, 23, .24) !important; border: 1px solid rgba(244, 168, 23, .6) !important;
}
html:not([data-theme]) .lnav-menu-links a.lnav-item[aria-current="page"] svg { stroke: var(--marron-oscuro) !important; }
html:not([data-theme]) .lnav-btn-o { color: var(--marron-oscuro); border-color: #DDD0BC; background: #fff; }
html:not([data-theme]) .lnav-btn-o:hover { background: var(--marron-oscuro); color: #fff; border-color: var(--marron-oscuro); }
html:not([data-theme]) .lnav-cart-btn,
html:not([data-theme]) .theme-toggle-btn,
html:not([data-theme]) .lnav-search-btn { background: #fff; color: var(--marron-oscuro); border: 1px solid var(--line); }
html:not([data-theme]) .lnav-cart-btn:hover,
html:not([data-theme]) .theme-toggle-btn:hover,
html:not([data-theme]) .lnav-search-btn:hover { background: var(--amarillo); color: var(--marron-oscuro); border-color: var(--amarillo); }
html:not([data-theme]) .nav-cart-badge { border-color: #fff; }
html:not([data-theme]) .lnav-toggle { background: #fff; border: 1px solid var(--line); }
html:not([data-theme]) .lnav-toggle span { background: var(--marron-oscuro); }
html:not([data-theme]) .lnav-user-tag { color: var(--marron-oscuro); background: #fff; border: 1px solid var(--line); }
/* barra de búsqueda de la cabecera */
html:not([data-theme]) .lnav-buscar { background: #fff; }
html:not([data-theme]) .lnav-buscar-input { background: var(--bg); border: 2px solid var(--line); }
html:not([data-theme]) .lnav-buscar-cerrar { background: #fff; color: var(--marron-oscuro); border-color: #DDD0BC; }

/* ── Héroe crema ──────────────────────────────────────────────────────────────── */
html:not([data-theme]) .home-carousel { background: #FBE7B0; }
html:not([data-theme]) .home-carousel .home-banner,
html:not([data-theme]) .home-slide-combo {
  position: relative; overflow: hidden; color: var(--marron-oscuro);
  background: linear-gradient(135deg, #FFF8E6 0%, #FBE7B0 100%);
}
.home-banner-copy, .home-slide-copy, .home-banner-plate, .home-slide-photos { position: relative; z-index: 1; }
html:not([data-theme]) .home-banner h1,
html:not([data-theme]) .home-slide-combo h2 { color: var(--marron-oscuro); }
html:not([data-theme]) .home-banner h1 em { color: #B9770E; }
html:not([data-theme]) .home-banner p,
html:not([data-theme]) .home-slide-combo p { color: rgba(44, 27, 20, .82); }
html:not([data-theme]) .home-slide-price strong { color: var(--marron-oscuro); }
html:not([data-theme]) .home-slide-price del { color: var(--muted); }
html:not([data-theme]) .home-slide-price span { background: rgba(244, 168, 23, .28); color: #6B3F00; }
html:not([data-theme]) .home-eyebrow { background: #fff; color: var(--marron); border: 1px solid #F4A817; box-shadow: none; }
html:not([data-theme]) .home-carousel-dots button { background: rgba(44, 27, 20, .25); }
html:not([data-theme]) .home-carousel-dots button[aria-current="true"] { background: var(--amarillo); }
html:not([data-theme]) .home-banner-plate {
  background: linear-gradient(150deg, #fff 0%, #FFE6A8 32%, #F4A817 68%, #B9770E 100%);
  box-shadow: 0 26px 44px -14px rgba(120, 70, 0, .5), inset 0 2px 3px rgba(255, 255, 255, .7);
}
html:not([data-theme]) .home-slide-photos img {
  background: linear-gradient(#000, #000) padding-box, linear-gradient(150deg, #fff 0%, #FFE6A8 32%, #F4A817 68%, #B9770E 100%) border-box;
  box-shadow: 0 14px 28px -10px rgba(120, 70, 0, .55);
}

/* ── Pedir hoy, tarjetas y combos: blancos con filo amarillo ─────────────────────────────────────── */
html:not([data-theme]) .home-order { background: #fff; padding-bottom: 2rem; }
html:not([data-theme]) .home-order-card {
  background: #fff; color: var(--marron-oscuro); border-bottom: 3px solid var(--amarillo); box-shadow: var(--shadow-md);
}
html:not([data-theme]) .home-order-card:hover { background: #FFF8E6; }
html:not([data-theme]) .home-order-sub { color: var(--muted); }
html:not([data-theme]) .dish-card-minimal,
html:not([data-theme]) .combo-card { border-bottom: 3px solid var(--amarillo); }

/* ── Pie de página crema ─────────────────────────────────────────────────────────────────────────── */
html:not([data-theme]) .gourmet-footer { background: #EADCC2; color: var(--marron-oscuro); border-top: 3px solid var(--amarillo); }
html:not([data-theme]) .gourmet-footer-logo { color: var(--marron-oscuro); }
html:not([data-theme]) .gourmet-footer-logo svg { fill: var(--amarillo); }
html:not([data-theme]) .gourmet-footer-tagline { color: var(--muted); }
html:not([data-theme]) .gourmet-chip { background: #fff; border-color: var(--line); color: var(--marron); }
html:not([data-theme]) .gourmet-footer-title { color: var(--marron-oscuro); }
html:not([data-theme]) .gourmet-link-list a { color: var(--muted); }
html:not([data-theme]) .gourmet-hours-list li { color: var(--muted); border-bottom-color: #D5C6AC; }
html:not([data-theme]) .gourmet-hours-list strong { color: var(--marron-oscuro); }
html:not([data-theme]) .gourmet-footer-bottom { border-top: 1px solid #E3D6C0; background: rgba(255, 255, 255, .45); }
html:not([data-theme]) .gourmet-footer-bottom-inner { color: var(--muted); }
html:not([data-theme]) .gourmet-legal-links a,
html:not([data-theme]) .gourmet-cookie-link { color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  html:not([data-theme]) .gourmet-link-list a:hover,
  html:not([data-theme]) .gourmet-legal-links a:hover,
  html:not([data-theme]) .gourmet-cookie-link:hover { color: #B9770E; }
}

/* Botones de agregar en amarillo (como en la plantilla) */
html:not([data-theme]) .btn-dish-add,
html:not([data-theme]) .combo-card .btn-gold { background: var(--amarillo); color: var(--marron-oscuro); box-shadow: 0 6px 14px -6px rgba(244, 168, 23, .7); }
html:not([data-theme]) .btn-dish-add:hover,
html:not([data-theme]) .combo-card .btn-gold:hover { background: var(--amarillo-suave); color: var(--marron-oscuro); }
@media (max-width: 1120px) { html .lnav-name { font-size: 1rem; letter-spacing: 0; } }
@media (max-width: 420px) { html .lnav-name { font-size: .88rem; } html .lnav-brand { gap: .4rem; } html .lnav-icon { display: none; } }

/* ══ CONTRASTE ENTRE FONDO Y TARJETAS (modo claro) ═══════════════════════════════════════════════════
   El fondo de página es crema y las tarjetas son blancas con borde y sombra visibles, para que se
   distingan en toda la web (carta, combos, reservas, formularios…). */
html:not([data-theme]) {
  --bg: #F5EDDF;
  --line: #E0D2BA;
  --line-2: #D2C1A4;
  --shadow: 0 1px 3px rgba(44, 27, 20, .08), 0 10px 22px -8px rgba(44, 27, 20, .20);
  --shadow-md: 0 2px 5px rgba(44, 27, 20, .08), 0 16px 30px -10px rgba(44, 27, 20, .26);
}
html:not([data-theme]) .home-order { background: transparent; }
html:not([data-theme]) .home-order-card,
html:not([data-theme]) .home-order-wide,
html:not([data-theme]) .dish-card-minimal,
html:not([data-theme]) .combo-card {
  background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow-md);
}
html:not([data-theme]) .home-order-card,
html:not([data-theme]) .dish-card-minimal,
html:not([data-theme]) .combo-card { border-bottom: 3px solid var(--amarillo); }
html:not([data-theme]) .home-order-card:hover { background: #FFF8E6; }
/* Botones de iconos de la cabecera: sin recuadro amarillo de foco; el foco con teclado se indica con un tinte suave */
.lnav .theme-toggle-btn:focus,
.lnav .lnav-cart-btn:focus,
.lnav .lnav-search-btn:focus,
.lnav .lnav-toggle:focus,
.lnav-buscar-cerrar:focus { outline: none; }
.lnav .theme-toggle-btn:focus-visible,
.lnav .lnav-cart-btn:focus-visible,
.lnav .lnav-search-btn:focus-visible,
.lnav .lnav-toggle:focus-visible,
.lnav-buscar-cerrar:focus-visible { outline: none; background: rgba(244, 168, 23, .22); }

/* ══ TIPOGRAFÍA (ver opción C al final) ══════════════════════════════════════════════════════════════════════
   Los títulos van en Bebas Neue y el resto del texto en Inter (definido en la opción C, al final de este archivo).
   Ya no hay otras familias (se retiraron Playfair Display y Geist Mono). */
html .reserva-title,
html .checkout-title,
html .tracker-title,
html .rastrear-title {
  font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-style: normal; text-transform: uppercase; letter-spacing: .01em;
}
html .reserva-title span { font-style: normal; }

/* ══ MODAL DE INGRESO COMPACTO: todo el formulario en una sola vista, sin barra de desplazamiento ══════ */
html .modal-ingreso-box {
  padding: 1.2rem 1.5rem 1.1rem; max-height: calc(100dvh - 1rem);
  scrollbar-width: none;            /* por si la pantalla es muy baja: se puede desplazar, pero sin barra */
}
html .modal-ingreso-box::-webkit-scrollbar { display: none; }
html .modal-ingreso-close { top: .7rem; right: .7rem; }
html .kfc-auth-header { margin-bottom: .75rem; }
html .kfc-club-badge { margin-bottom: 0; }
html .kfc-field-wrap { margin-bottom: .65rem; }
html .kfc-field-wrap label { margin-bottom: .25rem; }
html .kfc-input { padding: .58rem .8rem; }
html .btn-kfc-cta { padding: .68rem 1rem; margin-top: .35rem; }
html .kfc-switch-view { margin: .65rem 0 0; }
html .kfc-divider { margin: .65rem 0; }
html .modal-ingreso-box > div > p:last-child { margin-top: .7rem !important; }
@media (max-height: 640px) {
  html .modal-ingreso-box { padding: .9rem 1.2rem .8rem; }
  html .kfc-field-wrap { margin-bottom: .45rem; }
  html .kfc-input { padding: .48rem .75rem; }
  html .btn-kfc-cta { padding: .56rem 1rem; }
  html .kfc-divider { margin: .45rem 0; }
}

/* ══ OPCIÓN C · BEBAS NEUE (títulos) + INTER (texto) ═══════════════════════════════════════════════
   Bebas Neue solo existe en un peso y en mayúsculas: se pide en peso 400 y sin negrita sintética.
   Todo lo demás se escribe en Inter. */
html { font-synthesis-weight: none; }
html .home-banner h1,
html .home-slide-combo h2,
html .home-page .section-title,
html .lnav-name,
html .gourmet-footer-logo,
html .gourmet-footer-title,
html .reserva-title,
html .checkout-title,
html .tracker-title,
html .rastrear-title,
html .titulo-pagina,
html .combos-title,
html .home-order-title,
html .drawer-title {
  font-family: 'Bebas Neue', 'Inter', system-ui, sans-serif; font-weight: 400; font-style: normal; text-transform: uppercase; letter-spacing: .03em;
}
html .home-banner h1 { font-size: clamp(2.8rem, 6vw, 4.8rem); line-height: .95; }
html .home-slide-combo h2 { font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: .98; }
html .home-page .section-title { font-size: clamp(2.2rem, 4.2vw, 3.1rem); }
html .lnav-name { font-size: 1.7rem; letter-spacing: .04em; }
html .reserva-title, html .checkout-title, html .tracker-title, html .rastrear-title { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; }
html .titulo-pagina { font-size: 2.8rem; }
html .combos-title, html .home-order-title { font-size: 1.7rem; }
html .gourmet-footer-logo { font-size: 2rem; }
html .gourmet-footer-title { font-size: 1.3rem; }
html .drawer-title { font-size: 1.6rem; }
@media (max-width: 1120px) { html .lnav-name { font-size: 1.4rem; letter-spacing: .03em; } }
@media (max-width: 420px) { html .lnav-name { font-size: 1.25rem; } }

/* Nombres de platos, combos y tipos de pedido también en Bebas Neue (como en la muestra) */
html .combo-card h4,
html .dish-minimal-name,
html .home-order-name {
  font-family: 'Bebas Neue', 'Inter', system-ui, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .03em;
}
html .combo-card h4 { font-size: 1.5rem; line-height: 1.05; }
html .dish-minimal-name { font-size: 1.45rem; line-height: 1.05; }
html .home-order-name { font-size: 1.6rem; }

/* ══ CAMPO DE BÚSQUEDA FIJO EN LA CABECERA (pantallas anchas) ═════════════════════════════════════════
   Desde 1121 px se ve el campo con sugerencias; en celular queda la lupa, que abre la barra emergente. */
.lnav-search-inline { display: none; position: relative; align-items: center; }
.lnav-search-inline-ico { position: absolute; left: .75rem; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; pointer-events: none; }
.lnav-search-inline-input {
  width: clamp(150px, 14vw, 230px); height: 38px; padding: 0 .8rem 0 2.2rem; border-radius: 12px; border: 1px solid var(--line-2);
  background: #fff; color: var(--text); font: inherit; font-size: .85rem; transition: width .25s ease, border-color .2s ease, box-shadow .2s ease;
}
.lnav-search-inline-input::placeholder { color: var(--faint); }
.lnav-search-inline-input:focus { outline: none; width: clamp(200px, 20vw, 300px); border-color: var(--amarillo); box-shadow: 0 0 0 3px rgba(244, 168, 23, .25); }
.lnav-search-inline-input::-webkit-search-cancel-button { display: none; }
.lnav-search-inline .lnav-buscar-res { left: auto; right: 0; transform: none; width: min(460px, calc(100vw - 2rem)); top: calc(100% + 10px); }
[data-theme] .lnav-search-inline-input { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); color: #FFFBF5; }
[data-theme] .lnav-search-inline-input::placeholder { color: rgba(255, 251, 245, .65); }
[data-theme] .lnav-search-inline-ico { stroke: rgba(255, 251, 245, .75); }
[data-theme] .lnav-search-inline-input:focus { background: rgba(255, 255, 255, .18); border-color: var(--amarillo-suave); }
@media (min-width: 1121px) {
  .lnav-search-inline { display: flex; }
  html .lnav .lnav-search-btn { display: none; }
  .lnav-search-inline-input { width: clamp(110px, 11vw, 230px); }
  .lnav-search-inline-input:focus { width: clamp(170px, 16vw, 300px); }
}
@media (min-width: 1400px) { .lnav-search-inline-input { width: clamp(150px, 14vw, 230px); } }

/* ══ MODAL DE INGRESO ESTILO KFC: Google, Facebook y correo en botones grandes ═══════════════════════ */
html .kfc-auth-title-grande {
  font-family: 'Bebas Neue', 'Inter', system-ui, sans-serif; font-weight: 400; font-size: 2.2rem; line-height: 1; letter-spacing: .03em;
  text-transform: uppercase; text-align: center; margin: .2rem 0 .1rem;
}
.kfc-social-stack { display: grid; gap: .7rem; margin-top: 1.1rem; }
.btn-social {
  display: flex; align-items: center; justify-content: flex-start; gap: .9rem; width: 100%; min-height: 54px; padding: .6rem 1.4rem;
  border: 0; border-radius: 999px; background: #F5F1EA; color: #1F1612; font: 600 .95rem 'Inter', system-ui, sans-serif; text-align: left; cursor: pointer;
  transition: filter .2s ease, transform .15s ease, box-shadow .2s ease;
}
.btn-social:hover { filter: brightness(.97); transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(44, 27, 20, .5); }
.btn-social:active { transform: scale(.985); }
.btn-social svg { flex: none; width: 22px; height: 22px; }
.btn-social-facebook { background: #1565C0; color: #fff; }
.btn-social-facebook:hover { filter: brightness(1.08); }
[data-theme="dark"] .btn-social:not(.btn-social-facebook) { background: #2E1B12; color: #FFFBF5; }
.kfc-legal { margin: 1.1rem 0 0; font-size: .73rem; line-height: 1.45; text-align: center; color: var(--muted); }
.kfc-legal a { color: var(--marron); font-weight: 700; text-decoration: underline; }
[data-theme="dark"] .kfc-legal a { color: var(--amarillo-suave); }
.kfc-back-btn {
  position: absolute; top: .7rem; left: .7rem; display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 50%; background: #F3F4F6; color: #6B7280; cursor: pointer; z-index: 2;
}
.kfc-back-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
[data-theme="dark"] .kfc-back-btn { background: rgba(255, 255, 255, .1); color: #E8DFD0; }
.google-official-btn-wrap { display: flex; justify-content: center; }
.google-official-btn-wrap:empty { display: none; }

/* Google: la pastilla es igual a las demás; el botón oficial del SDK la cubre, invisible, estirado a su altura */
.btn-social-google-wrap { position: relative; }
.btn-social-google-wrap .google-official-btn-wrap {
  position: absolute; inset: 0; z-index: 2; display: block; overflow: hidden; border-radius: 999px; opacity: .001; pointer-events: none;
  margin: 0; min-height: 0; width: auto; height: 100%;
}
.btn-social-google-wrap .google-official-btn-wrap.listo { pointer-events: auto; cursor: pointer; }
.btn-social-google-wrap #googleOfficialBtnInner { width: 100%; transform: scaleY(1.4); transform-origin: top left; }
.btn-social-google-wrap:hover .btn-social-google { filter: brightness(.97); transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(44, 27, 20, .5); }