/* Sabor por Menos | Experiencia de escritorio.
   Se carga luego del tema y no cambia el mapa, sus eventos ni la UX móvil.
   Layout editorial: búsqueda, mapa y resultados visibles sin recorrer
   toda la página en pantallas amplias. */

@media (min-width: 761px) {
  .encabezado {
    position: sticky;
    top: 0;
    z-index: 320;
    box-shadow: 0 4px 18px rgba(8, 34, 24, .12);
  }
  .encabezado .barra-navegacion {
    max-width: 1520px;
    min-height: 70px;
    padding-inline: clamp(22px, 3vw, 44px);
  }
  .encabezado .marca { font-size: 20px; }
  .encabezado nav { gap: clamp(14px, 1.8vw, 25px); }
  .encabezado nav > a {
    text-decoration: none;
    text-underline-offset: 5px;
    transition: opacity .18s ease, color .18s ease;
  }
  .encabezado nav > a:hover { opacity: .82; }

  .hero {
    padding: clamp(46px, 4.9vw, 76px) clamp(24px, 4vw, 54px)
      clamp(98px, 7vw, 132px);
  }
  .hero-contenido { max-width: 1430px; }
  .hero h1 {
    max-width: 860px;
    font-size: clamp(48px, 5.35vw, 79px);
    line-height: 1.08;
  }
  .hero .descripcion-hero { margin: 15px 0 23px; }
  .hero .busqueda {
    max-width: min(720px, 72vw);
    min-height: 61px;
    border-radius: 18px;
  }
  .hero .busqueda input { font-size: 16px; }
  .hero .hero-atajos { margin-top: 14px; }
  .hero .hero-atajos button {
    min-height: 40px;
    padding: 9px 16px;
  }
  .hero .hero-microcopy { margin-top: 14px; }

  .exploracion-escritorio {
    position: relative;
    z-index: 1;
    width: min(100%, 1540px);
    margin: -53px auto 0;
    padding: 0 clamp(20px, 2.5vw, 38px);
  }
  .exploracion-escritorio > #explorar,
  .exploracion-escritorio > #seccionResultados {
    min-width: 0;
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }
  .exploracion-escritorio > #explorar {
    margin-top: 0;
    padding: clamp(22px, 2.3vw, 30px);
    border-radius: 26px;
  }
  .exploracion-escritorio .titulo-seccion {
    gap: 24px;
    margin-bottom: 20px;
  }
  .exploracion-escritorio .titulo-seccion h2 {
    font-size: clamp(27px, 2.2vw, 35px);
  }
  .exploracion-escritorio .titulo-seccion > p {
    font-size: 13px;
    line-height: 1.55;
  }
  .exploracion-escritorio #filtrosExploracion {
    border-radius: 17px;
    margin-bottom: 16px;
    padding: 18px;
  }
  .exploracion-escritorio .filtros-cabecera { gap: 14px; }
  .exploracion-escritorio .acciones-mapa-contextuales {
    align-items: center;
    gap: 10px;
    margin: 10px 0;
  }
  .exploracion-escritorio #mapaOfertas {
    height: clamp(490px, 58vh, 690px);
    margin-top: 12px;
    border-radius: 19px;
  }
  .exploracion-escritorio .nota-mapa {
    max-width: none;
    margin-top: 10px;
  }
  .exploracion-escritorio > #seccionResultados {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .exploracion-escritorio #resultados {
    gap: 17px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  }
  .exploracion-escritorio #resultados > * { min-width: 0; }
  .exploracion-escritorio .resumen-resultados-exploracion {
    border-radius: 12px;
  }
  .exploracion-escritorio #resultados .tarjeta,
  .exploracion-escritorio #resultados .tarjeta-local-redisenada {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .exploracion-escritorio #resultados .tarjeta:hover,
  .exploracion-escritorio #resultados .tarjeta-local-redisenada:hover {
    border-color: #a6c5b4;
    box-shadow: 0 12px 26px rgba(14, 51, 36, .10);
    transform: translateY(-2px);
  }

  /* Encabezados de locales: resguardo para escritorio de 761–859px
     y mientras se cargan las capas visuales finales. */
  #resultados .tarjeta-local-redisenada .tarjeta-local-cabecera {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    padding: 18px 62px 10px 18px;
  }
  #resultados .tarjeta-local-redisenada .tarjeta-local-cabecera h2 {
    min-width: 0;
    max-width: 100%;
    margin: 0;
    font-size: clamp(18px, 1.35vw, 22px);
    line-height: 1.22;
    letter-spacing: -.025em;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* Evita que los anchors queden detrás de la navegación fija. */
  #explorar, #seccionResultados, #registroLocal, #comida {
    scroll-margin-top: 88px;
  }
}

@media (min-width: 1120px) {
  .exploracion-escritorio {
    display: grid;
    grid-template-columns: minmax(0, 1.66fr) minmax(344px, .87fr);
    align-items: start;
    gap: clamp(16px, 1.6vw, 26px);
    margin-top: -58px;
  }
  .exploracion-escritorio > #explorar {
    padding: clamp(20px, 2vw, 30px);
  }
  .exploracion-escritorio > #explorar .titulo-seccion {
    align-items: start;
  }
  .exploracion-escritorio > #explorar .titulo-seccion > p {
    max-width: 260px;
  }
  /* En el mapa es más legible una cuadrícula de filtros 2 × N. */
  .exploracion-escritorio .controles-mapa {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }
  .exploracion-escritorio > #seccionResultados {
    position: sticky;
    top: 90px;
    align-self: start;
    max-height: calc(100vh - 108px);
    max-height: calc(100dvh - 108px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: #bacdc0 transparent;
    padding: 25px 20px 24px;
    border: 1px solid #dbe7dd;
    border-radius: 25px;
    background: #fff;
    box-shadow: 0 14px 38px rgba(22, 60, 53, .08);
  }
  .exploracion-escritorio > #seccionResultados .titulo-seccion {
    display: block;
    margin-bottom: 15px;
  }
  .exploracion-escritorio > #seccionResultados .titulo-seccion h2 {
    font-size: clamp(24px, 1.9vw, 30px);
  }
  .exploracion-escritorio > #seccionResultados .titulo-seccion > p {
    max-width: none;
    margin-top: 7px;
  }
  .exploracion-escritorio > #seccionResultados #resultados {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .exploracion-escritorio #seccionResultados .resumen-resultados-exploracion {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
    padding: 12px 13px;
  }
  .exploracion-escritorio #resultados .tarjeta {
    padding: 16px;
  }
  .exploracion-escritorio #resultados .tarjeta-local-redisenada {
    margin: 0;
  }
  .exploracion-escritorio #seccionResultados .guia-guardar-seguir {
    margin-bottom: 15px;
  }
}
@media (min-width: 1500px) {
  .exploracion-escritorio {
    grid-template-columns: minmax(0, 1.8fr) minmax(385px, .9fr);
    gap: 24px;
  }
  .exploracion-escritorio > #explorar { padding: 32px; }
  .exploracion-escritorio > #seccionResultados { padding: 28px 24px; }
  .exploracion-escritorio #mapaOfertas { height: min(70vh, 760px); }
}

/* Tema oscuro: el área lateral es un panel real, no un espacio claro. */
@media (min-width: 1120px) {
  html[data-tema="oscuro"] body .exploracion-escritorio > #seccionResultados {
    background: var(--oe-superficie) !important;
    color: var(--oe-texto);
    border-color: var(--oe-borde) !important;
    box-shadow: 0 14px 36px rgba(0,0,0,.30);
    scrollbar-color: #46554b transparent;
  }
  html[data-tema="oscuro"] body .exploracion-escritorio #resultados .tarjeta:hover,
  html[data-tema="oscuro"] body .exploracion-escritorio #resultados .tarjeta-local-redisenada:hover {
    border-color: #607e6c !important;
    box-shadow: 0 12px 27px rgba(0,0,0,.32) !important;
  }
}
@media (prefers-reduced-motion: reduce) and (min-width: 761px) {
  .exploracion-escritorio #resultados .tarjeta,
  .exploracion-escritorio #resultados .tarjeta-local-redisenada {
    transition: none;
  }
  .exploracion-escritorio #resultados .tarjeta:hover,
  .exploracion-escritorio #resultados .tarjeta-local-redisenada:hover {
    transform: none;
  }
}
/* AJUSTE TIPOGRAFICO DESKTOP 2026.11.06
   El panel lateral debe mostrar UNA tarjeta por fila. Los CSS dinámicos de
   escritorio imponen 3 columnas con !important y estrechan todo el texto.
   Aquí usamos selectores más específicos sin modificar vista móvil. */
@media (min-width: 761px) {
  .encabezado .barra-navegacion,
  .encabezado .marca,
  .hero .hero-contenido,
  .exploracion-escritorio > #explorar,
  .exploracion-escritorio > #seccionResultados,
  .exploracion-escritorio .titulo-seccion > div,
  .exploracion-escritorio .filtros-cabecera > div {
    min-width: 0;
  }
  .encabezado .barra-navegacion { gap: 14px; }
  .encabezado nav {
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 6px;
  }
  .hero h1,
  body.vista-escritorio-activa #comida .hero-contenido > h1 {
    max-width: 100% !important;
    line-height: 1.12 !important;
    overflow-wrap: break-word;
    text-wrap: balance;
  }
  .exploracion-escritorio > #explorar .titulo-seccion {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(170px, 33%);
    gap: clamp(12px, 1.6vw, 22px);
    align-items: start !important;
  }
  .exploracion-escritorio .titulo-seccion h2,
  body.vista-escritorio-activa .exploracion-escritorio #seccionResultados .titulo-seccion h2 {
    max-width: 100%;
    line-height: 1.18 !important;
    white-space: normal;
    overflow-wrap: break-word;
    text-wrap: balance;
  }
  .exploracion-escritorio .titulo-seccion > p,
  .exploracion-escritorio .filtros-cabecera p,
  .sugerir-local-cabecera p {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    line-height: 1.5;
  }
  .exploracion-escritorio #filtrosExploracion :is(button, select, label),
  .exploracion-escritorio #resultados :is(button, a, strong, p, small, h2, h3) {
    min-width: 0;
    overflow-wrap: break-word;
  }
  .exploracion-escritorio #filtrosExploracion button,
  .exploracion-escritorio #resultados button {
    white-space: normal;
    line-height: 1.3;
  }
  .exploracion-escritorio #resultados > *,
  .exploracion-escritorio #resultados .tarjeta-local-redisenada,
  .exploracion-escritorio #resultados .tarjeta-local-cabecera {
    min-width: 0;
    max-width: 100%;
  }
  body.vista-escritorio-activa .exploracion-escritorio #resultados
    .ux-producto-principal-visual .tarjeta-promocion-etiqueta {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word;
    line-height: 1.25 !important;
  }
  .sugerir-local-cabecera > div:first-child { min-width: 0; }
}
/* En escritorio ancho el CSS antiguo dibujaba 3 columnas DENTRO del sidebar
   (apenas ~350px), causando textos y botones desfasados. */
@media (min-width: 1120px) {
  body.vista-escritorio-activa .exploracion-escritorio > #seccionResultados #resultados {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }
  body.vista-escritorio-activa .exploracion-escritorio > #seccionResultados .titulo-seccion {
    display: block !important;
    min-width: 0;
    padding-inline: 0 !important;
  }
  body.vista-escritorio-activa .exploracion-escritorio > #seccionResultados .titulo-seccion > p {
    max-width: none !important;
    margin-top: 8px;
  }
  body.vista-escritorio-activa .exploracion-escritorio > #seccionResultados .titulo-seccion h2 {
    font-size: clamp(23px, 1.85vw, 30px) !important;
  }
  /* Si el usuario elige sólo mapa o sólo lista, evitamos la columna vacía. */
  body.vista-escritorio-mapa .exploracion-escritorio,
  body.vista-escritorio-lista .exploracion-escritorio {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.vista-escritorio-mapa .exploracion-escritorio > #explorar,
  body.vista-escritorio-lista .exploracion-escritorio > #explorar,
  body.vista-escritorio-lista .exploracion-escritorio > #seccionResultados {
    grid-column: 1 / -1;
  }
  body.vista-escritorio-lista .exploracion-escritorio > #seccionResultados {
    position: static;
    max-height: none;
    overflow: visible;
  }
  body.vista-escritorio-activa.vista-escritorio-lista .exploracion-escritorio > #seccionResultados #resultados {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)) !important;
    gap: 18px !important;
  }
}
@media (min-width: 761px) and (max-width: 1119px) {
  .exploracion-escritorio .titulo-seccion {
    align-items: start !important;
  }
  .exploracion-escritorio #resultados {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  }
}