/* ==========================================================================
   corrientes.net.ar — Sistema de diseño
   Archivo compartido entre todas las páginas.
   ========================================================================== */

/* --- Tokens de diseño --- */
:root {
  --fondo: #f4f4f4;
  --sup: #ffffff;
  --lima-pal: #ecfbb2;
  --lima: #98c61a;
  --verde: #00795c;
  --verde-osc: #065c47;
  --verde-osc-plus: #152420;
  --texto: #2f3634;
  --suave: #727b78;
  --tenue: #9aa19e;
  --linea: rgba(47, 54, 52, 0.09);
  --linea-2: rgba(47, 54, 52, 0.14);
  --sombra: 0 1px 2px rgba(47, 54, 52, 0.04), 0 4px 14px rgba(47, 54, 52, 0.05);
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --disp: "Montserrat", system-ui, sans-serif;
  --cuerpo: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --nav-h: 74px;
}

/* --- Reset & base --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--cuerpo);
  color: var(--texto);
  background: var(--fondo);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px);
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  display: block;
}

/* --- Utilidades --- */
.contenedor {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 18px;
}

.contenedor img {
  display: block;
  max-width: 210px;
  height: auto;
}
.eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tenue);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ==========================================================================
   Encabezado
   ========================================================================== */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(244, 244, 244, 0.82);
  backdrop-filter: saturate(1.3) blur(12px);
  border-bottom: 2px solid #98c61a;
  box-shadow:
    0px 0px 10px 7px rgba(0, 0, 0, 0.2),
    0 6px 20px 0 #00000020;
}
.encabezado .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
}
/* El logo se mide por ALTO, no por ancho: así no depende de la regla
   genérica .contenedor img (max-width:210px) que lo dejaba enorme. */
.encabezado .marca-link {
  display: flex;
  align-items: center;
  flex: none;
}
.encabezado .logo,
.encabezado .marca-link img {
  height: 26px;
  width: auto;
  max-width: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--suave);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 10px;
  border: 1px solid var(--linea-2);
  border-radius: 999px;
  background: var(--sup);
}
.chip svg {
  width: 14px;
  height: 14px;
  color: var(--verde);
  flex: none;
}

/* Chip de ubicación: es un <button>, no un span. Se toca para detectar
   o volver a detectar dónde está la persona. Nunca crece más allá del
   45% del ancho: si el nombre es largo se corta con puntos suspensivos
   en vez de partirse en dos renglones. */
.chip-ubic {
  font-family: var(--cuerpo);
  cursor: pointer;
  max-width: 46%;
  min-width: 0;
  white-space: nowrap;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.chip-ubic:hover {
  border-color: var(--lima);
}
.chip-ubic .ubic-txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.chip-ubic .ubic-ch {
  width: 12px;
  height: 12px;
  color: var(--tenue);
  opacity: 0.8;
}
/* Mientras busca la ubicación, el pin late suave. */
.chip-ubic.buscando .ubic-pin {
  animation: ubic-late 1s ease-in-out infinite;
}
.chip-ubic.detectada .ubic-pin {
  color: var(--lima);
}
@keyframes ubic-late {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* Variante: encabezado de página interna (con botón volver) */
.encabezado--interna .contenedor {
  justify-content: flex-start;
  gap: 12px;
}
.volver {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 1px solid var(--linea-2);
  border-radius: var(--r-sm);
  background: var(--sup);
  color: var(--verde);
}
.volver svg {
  width: 18px;
  height: 18px;
}
.encabezado h1,
.encabezado .cab-cat {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}
/* Isotipo en la cabecera de las páginas internas.
   Va como pseudo-elemento del título y no como <img> en cada página por dos
   motivos: se aplica a las 14 internas tocando un solo archivo, y al ser
   contenido generado por CSS los lectores de pantalla lo ignoran solos — que
   es lo que corresponde, porque es identidad visual, no navegación (la flecha
   de al lado ya lleva al home).
   Importa sobre todo para quien entra desde Google directo a una interna: sin
   esto, la primera pantalla del sitio no dice de qué sitio es. */
.encabezado--interna h1::before,
.encabezado--interna .cab-cat::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 26px;
  margin-right: 9px;
  vertical-align: -7px;
  background: url('../images/favicon.png') center / contain no-repeat;
}

/* En la ficha de lugar, la barra superior muestra la categoría, pero el H1
   de la página es el nombre del lugar (más abajo, sobre la foto). Por eso
   acá va un <p> con el mismo aspecto que un h1 de cabecera interna. */
.encabezado .cab-cat {
  margin: 0;
  color: inherit;
}

/* ==========================================================================
   Compartir (ficha de lugar)
   ========================================================================== */
.compartir-wrap {
  position: relative;
  margin-left: auto;
}
.compartir-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 1px solid var(--linea-2);
  border-radius: var(--r-sm);
  background: var(--sup);
  color: var(--verde);
}
.compartir-btn svg {
  width: 18px;
  height: 18px;
}
.compartir-panel {
  position: absolute;
  right: 0;
  top: 44px;
  z-index: 60;
  min-width: 190px;
  background: #fff;
  border: 1px solid var(--linea-2);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.compartir-panel[hidden] {
  display: none;
}
.compartir-op {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  font-family: var(--cuerpo);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--texto);
  text-decoration: none;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.compartir-op:hover {
  background: var(--fondo);
}
.compartir-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex: none;
}
.compartir-ic svg {
  width: 15px;
  height: 15px;
}
.compartir-ic--whatsapp {
  background: #25d366;
}
.compartir-ic--facebook {
  background: #1877f2;
}
.compartir-ic--x {
  background: #111;
}
.compartir-ic--copiar {
  background: var(--suave);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  color: #fff;
  padding: 22px 0 24px;
  background:
    linear-gradient(14deg, #b70234c9, #cd00392b),
    url(../images/lapacho_en_flor.jpg) center / cover;
  border-radius: 0 0 24px 24px;
  border-bottom: 3px solid #d9d9d9;
}
.saludo {
  font-size: 13.5px;
  font-weight: 500;
  opacity: 0.88;
  margin-bottom: 6px;
}
.hero h1 {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(24px, 6.4vw, 30px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  max-width: 16ch;
}
.hero .lado {
  display: none;
}

/* Buscador */
.busca-wrap {
  position: relative;
}
.busca {
  display: flex;
  align-items: center;
  gap: 11px;
  background: #fff;
  border-radius: 13px;
  padding: 14px 15px;
  box-shadow: 0 8px 24px rgba(6, 60, 45, 0.28);
}
.busca svg {
  width: 19px;
  height: 19px;
  color: var(--verde);
  flex: none;
}
.busca input {
  border: 0;
  outline: 0;
  font-family: var(--cuerpo);
  font-size: 15px;
  color: var(--texto);
  width: 100%;
  background: transparent;
  letter-spacing: -0.01em;
}
.busca input::placeholder {
  color: var(--tenue);
}
.cerca {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--lima);
  color: var(--verde-osc);
  font-weight: 700;
  font-size: 13.5px;
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  cursor: pointer;
  font-family: var(--cuerpo);
  letter-spacing: -0.01em;
}
.cerca svg {
  width: 16px;
  height: 16px;
}

/* Panel de resultados del buscador */
.resultados {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 35;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  box-shadow: 0 14px 34px rgba(6, 40, 30, 0.22);
  max-height: min(64vh, 440px);
  overflow-y: auto;
  color: var(--texto);
  display: none;
  text-align: left;
}
.resultados.on {
  display: block;
}
.res-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--linea);
  cursor: pointer;
}
.res-item:last-child {
  border-bottom: 0;
}
.res-item:hover,
.res-item:focus-visible {
  background: var(--fondo);
  outline: none;
}
.res-ic {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--lima-pal);
  display: grid;
  place-items: center;
  flex: none;
}
.res-ic svg {
  width: 18px;
  height: 18px;
  color: var(--verde);
  stroke-width: 1.8;
}
.res-txt {
  min-width: 0;
}
.res-t {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.res-s {
  font-size: 12px;
  color: var(--suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.res-msg {
  padding: 16px 14px;
  text-align: center;
  color: var(--suave);
  font-size: 13px;
}

/* ==========================================================================
   Secciones genéricas
   ========================================================================== */
.seccion {
  padding-top: 32px;
}
.seccion + .seccion {
  border-top: 1px solid var(--linea);
  margin-top: 32px;
}
.cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
  margin-top: 20px;
}
.cab h2 {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 16.5px;
  letter-spacing: -0.01em;
  color: var(--texto);
}
.cab a {
  font-size: 13px;
  font-weight: 600;
  color: var(--verde);
  flex: none;
}

/* ==========================================================================
   Accesos rápidos
   ========================================================================== */
.accesos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.acceso {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
}
.acceso .tile {
  width: 100%;
  aspect-ratio: 1;
  max-width: 92px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #ffffff, #c0c0c0);
  border: 3px solid #ffffff;
  box-shadow: 0px 0px 13px 5px #0000000f;
  transition:
    border-color 1.15s,
    transform 0.9s,
    box-shadow 0.15s;
}
.acceso:hover .tile {
  border-color: var(--lima);
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 121, 92, 0.14);
}
.acceso .tile svg {
  width: 35px;
  height: 35px;
  color: var(--verde);
  stroke-width: 1.9;
  transition: color 0.15s;
}
.acceso .et {
  font-size: 12px;
  font-weight: 600;
  color: var(--texto);
  line-height: 1.25;
  max-width: 9ch;
}

/* ==========================================================================
   Ahora en Corrientes (tarjeta de farmacia de turno)
   ========================================================================== */
.ahora {
  background: var(--sup);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0px 0px 20px 7px #00000017;
  border-bottom: 10px solid #98c61a79;
  padding: 10px 5px 10px 5px;
}
.ahora-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--linea);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--verde); 
}
.vivo {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lima);
  box-shadow: 0 0 0 4px rgba(152, 198, 26, 0.25);
}
.ahora-b {
  padding: 16px;
}
.ahora-b .nom {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 18px;
  margin: 2px 0 4px;
  letter-spacing: -0.01em;
}
.meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--suave);
}
.meta svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--tenue);
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--verde);
  background: rgba(0, 121, 92, 0.08);
  padding: 5px 10px;
  border-radius: 999px;
}
.tag .vivo {
  background: var(--verde);
  box-shadow: none;
  width: 6px;
  height: 6px;
}
.acciones {
  display: flex;
  gap: 9px;
  margin-top: 15px;
}
.btn {
  flex: 1;
  text-align: center;
  padding: 11px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
}
.btn-1 {
  background: var(--verde);
  color: #fff;
}
.btn-2 {
  background: var(--verde);
  color: var(--fondo);
  border: 1px solid var(--linea-2);
}
.ver-todas {
  display: block;
  text-align: center;
  padding: 12px; 
  font-size: 13px;
  font-weight: 600;
  color: var(--verde); 
}
.ver-todas:hover {
  background: var(--fondo);
  transition: background 0.5s ease-in-out;
}

/* ==========================================================================
   Carrusel (Para descubrir)
   ========================================================================== */
.carrusel {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 2px 18px 8px;
  margin: 0 -18px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-padding-left: 18px;
  cursor: grab;
}
.carrusel::-webkit-scrollbar {
  display: none;
}
.carrusel.drag {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}
.carrusel img {
  -webkit-user-drag: none;
  user-select: none;
}
.card {
  flex: 0 0 210px;
  scroll-snap-align: start;
  background: var(--sup);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  overflow: hidden;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
.card:hover {
  border-color: var(--linea-2);
  transform: translateY(-2px);
}
.card .ph {
  position: relative;
  height: 128px;
  background: var(--lima-pal);
  display: grid;
  place-items: center;
}
.card .ph-icono {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.card .ph-icono svg {
  width: 44px;
  height: 44px;
  color: var(--verde);
  opacity: 0.55;
}
/* Foto principal del lugar en el carrusel "Para descubrir".
   Va encima del icono, que queda de respaldo si la imagen falla. */
.card .ph-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.card .ph .cat {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.92);
  color: var(--verde);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
}
/* Distancia: arriba a la derecha de la foto, enfrentada a la categoría.
   Va sobre la imagen a propósito, para no sumarle alto a la tarjeta. */
.card .ph .dist {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  background: rgba(0, 121, 92, 0.92);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.card .b {
  padding: 12px 13px 14px;
}
.card .b .t {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  /* Dos renglones como máximo: los nombres largos no deben descuadrar
     la altura del carrusel. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card .b .d {
  font-size: 12.5px;
  color: var(--suave);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Entre qué calles queda (las plazas no tienen altura de calle) */
.card .b .e {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--tenue);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
}
.card .b .e svg {
  width: 12px;
  height: 12px;
  flex: none;
  color: var(--lima);
}
.card .b .e span,
.card .b .e {
  min-width: 0;
  text-overflow: ellipsis;
}
.card-cargando {
  flex: 0 0 100%;
  padding: 26px 0;
  text-align: center;
  color: var(--tenue);
  font-size: 13px;
}

/* ==========================================================================
   Grilla de cards (Farmacias, Oficinas, Últimos)
   ========================================================================== */
.grilla-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.grilla-cards .card {
  flex: none;
}

/* ==========================================================================
   Mixto: 2 cards + lista compacta (Farmacias, Oficinas)
   ========================================================================== */
.mixto {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mixto-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.mixto-cards .card {
  flex: none;
}
.mini-lista {
  display: flex;
  flex-direction: column;
  background: var(--sup);
  border: 1px solid var(--linea);
  border-radius: 16px;
  overflow: hidden;
}
.mini-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--linea);
  transition: background 0.15s;
}
.mini-item:last-child {
  border-bottom: none;
}
.mini-item:hover {
  background: var(--fondo);
}
.mini-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mini-nom {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--texto);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mini-dir {
  font-size: 12.5px;
  color: var(--suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mini-ch {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--tenue);
}
.ver-mas-txt {
  display: block;
  text-align: center;
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--verde);
}

/* ==========================================================================
   Listado en dos columnas, sin cards (Farmacias) — a propósito discreto:
   son comercios, y a futuro es el espacio que se vende como destacado.
   ========================================================================== */
.listas-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.seccion--discreta .cab h2 {
  font-size: 15px;
  color: var(--suave);
}
.seccion--discreta .mini-lista {
  background: transparent;
  box-shadow: none;
}
.seccion--discreta .mini-item {
  padding: 10px 11px;
}
.seccion--discreta .mini-nom {
  font-size: 13.5px;
  font-weight: 600;
}
.seccion--discreta .mini-dir {
  font-size: 11.5px;
}

/* ==========================================================================
   Plazas por barrio
   ========================================================================== */
.barrio-grupo {
  margin-bottom: 22px;
}
.barrio-grupo:last-child {
  margin-bottom: 0;
}
.barrio-titulo {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 14px;
  color: var(--suave);
  margin-bottom: 10px;
  padding-left: 2px;
}

/* ==========================================================================
   Ahora en Corrientes — dos cards con jerarquía distinta:
   farmacia (principal) y clima (secundaria, más chica y sobria)
   ========================================================================== */
.ahora-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ahora--mini {
  padding: 0;
}
.ahora--mini .ahora-b {
  padding: 12px 16px; 
}
.ahora--mini .ahora-b .nom {
  font-size: 16px;
  margin: 0 0 2px;
}

/* Card de clima */
.ahora--clima {
  display: none;
  align-items: center;
  gap: 12px;
  background: var(--sup);
  border: 1px solid var(--linea);
  border-radius: 14px;
  padding: 12px 16px;
  justify-content: space-evenly;
  position: relative;
}

/* Ambiente de la card según el clima que muestra.
   Reemplaza al intento anterior con una foto de fondo, que además nunca se
   llegó a ver: el ::before tenía z-index:-1 y la card no crea contexto de
   apilamiento, así que la imagen quedaba detrás del fondo blanco.
   Un degradado hace el mismo trabajo (que la card se sienta como el clima),
   cubre los nueve estados, no pide ni una request más y nunca compromete la
   lectura del texto, que es la regla de oro del sitio: lo visual sirve al
   dato, no compite con él.
   El atributo data-clima lo pone js/app.js junto con el ícono. */
/* Recalibrado 23-ago (sesión 3): los tonos originales eran demasiado
   parecidos entre sí -especialmente los fríos (luna/nublado/parcial-noche),
   que de noche son la mayoría- y se leían como "sin color". Colores más
   profundos, cada uno más distinguible del resto, y el punto de fundido a
   blanco más lejos para que el tinte cubra más superficie de la card. La
   luminosidad se mantiene alta a propósito: el texto sigue siendo gris
   oscuro sobre un fondo claro en los dos extremos del degradado. */
.ahora--clima[data-clima="sol"]            { background: linear-gradient(155deg, #ffedc4, var(--sup) 82%); }
.ahora--clima[data-clima="luna"]           { background: linear-gradient(155deg, #dde4f5, var(--sup) 82%); }
.ahora--clima[data-clima="parcial"]        { background: linear-gradient(155deg, #fce9c8, var(--sup) 82%); }
.ahora--clima[data-clima="parcial-noche"]  { background: linear-gradient(155deg, #dfe3f0, var(--sup) 82%); }
.ahora--clima[data-clima="nublado"]        { background: linear-gradient(155deg, #dde1e4, var(--sup) 82%); }
.ahora--clima[data-clima="niebla"]         { background: linear-gradient(155deg, #e6e2da, var(--sup) 82%); }
.ahora--clima[data-clima="lluvia"]         { background: linear-gradient(155deg, #c9e4fa, var(--sup) 82%); }
.ahora--clima[data-clima="nieve"]          { background: linear-gradient(155deg, #cdeefb, var(--sup) 82%); }
.ahora--clima[data-clima="tormenta"]       { background: linear-gradient(155deg, #c9ced9, var(--sup) 82%); }

.clima-ic {
  --icono_clima: 64px;
  width: var(--icono_clima);
  height: var(--icono_clima);
  flex: none;
  /* Color de respaldo. Cada trazo del ícono trae el suyo propio desde
     js/app.js (sol ámbar, nube gris, gotas azules): un ícono de clima en
     verde institucional se lee como adorno, y en su color natural se lee
     como información. El resto de la card sigue en la paleta del sitio. */
  color: var(--suave);
}
.clima-cuerpo {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.clima-fila {
  display: flex;
  align-items: baseline;  
  gap: 8px;
  align-items: center;
}
.clima-temp {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1.1;
  color: var(--verde);
  letter-spacing: -0.01em;
}
.clima-desc {
  font-size: 0.9rem;
  color: var(--suave);
}
.clima-etq {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--tenue);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 1px;
}

/* ==========================================================================
   Mapa expandible — botón para agrandar cualquier mapa Leaflet a pantalla
   casi completa (mín. 70% de alto), con botón para volver a la vista normal.
   Se usa envolviendo el contenedor del mapa en <div class="mapa-caja">.
   ========================================================================== */
.mapa-caja {
  position: relative;
}
.mapa-expandir-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 500;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--linea-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--verde);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.mapa-expandir-btn svg {
  width: 18px;
  height: 18px;
}
.mapa-caja--expandida {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 70dvh !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  z-index: 2000 !important;
}
.mapa-caja--expandida #mapa,
.mapa-caja--expandida #mapa-hero {
  height: 100% !important;
  width: 100% !important;
  border-radius: 0 !important;
  position: static !important;
}
.mapa-caja--expandida .mapa-expandir-btn {
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.pie {
  margin-top: 36px;
  /* background: linear-gradient(14deg, var(--verde-osc-plus), var(--verde-osc)); */
  background: #ad3502;
  background: linear-gradient(120deg, var(--verde) 0%, #648115 100%);
  color: #c9e5db;
  border-radius: 26px 26px 0 0;
  padding: 60px 0 30px 0;
  border-top: 2px solid #98c61a;
  box-shadow:
    0px 0px 10px 7px rgba(0, 0, 0, 0.2),
    0 6px 20px 0 #00000020;
}
.pie .contenedor {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.pie .logo {
  height: 22px;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.pie h3 {
  font-family: var(--disp);
  color: #fff;
  font-size: 13px;
  margin-bottom: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.pie p,
.pie li {
  font-size: 13px;
  line-height: 1.7;
  color: #bfe0d6;
}
.pie a {
  color: #fff;
  font-weight: 500;
}
.pie ul {
  list-style: none;
}
.pie-f li {
  padding-left: 14px;
  position: relative;
}
.pie-f li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lima);
}
/* Columna de enlaces del sitio (Términos, Fuentes de datos, Publicidad,
   Instalar la app). Reemplaza a la vieja lista de "Fuentes de datos",
   que ahora tiene su propia página. */
.pie-links {
  list-style: none;
}
.pie-links li {
  padding: 3px 0;
}
.pie-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.pie-links a:hover {
  text-decoration: underline;
}
.pie-links svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--lima);
}
/* El link de instalar aparece solo si el navegador puede instalar la PWA
   (js/pwa.js le saca el hidden). Sin JS o ya instalada, no se ve. */
.pie-instalar[hidden] {
  display: none;
}
.pie-instalar a {
  font-weight: 700;
  color: var(--lima);
}

/* Cartel modal con las instrucciones de instalación en iPhone/iPad,
   donde el navegador no ofrece el diálogo automático. */
.instalar-ayuda {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: end center;
  background: rgba(21, 36, 32, 0.55);
  padding: 16px;
}
.instalar-ayuda[hidden] {
  display: none;
}
.instalar-caja {
  background: var(--sup);
  color: var(--texto);
  border-radius: 20px;
  padding: 22px 20px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
}
.instalar-caja h3 {
  font-family: var(--disp);
  font-size: 17px;
  margin-bottom: 10px;
}
.instalar-caja ol {
  margin: 0 0 4px 18px;
  font-size: 14px;
  line-height: 1.8;
}
.instalar-caja button {
  margin-top: 16px;
  width: 100%;
  border: 0;
  border-radius: 50px;
  background: var(--verde);
  color: #fff;
  font-family: var(--cuerpo);
  font-weight: 600;
  font-size: 14px;
  padding: 11px;
  cursor: pointer;
}

.legal {
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  padding-top: 18px;
  margin-top: 6px;
  font-size: 12px;
  color: #95c2b5;
  line-height: 1.6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 26px;
  text-align: center;
}
.legal p {
  margin: 0;
  font-size: 12px;
  color: #95c2b5;
}
/* Firma del desarrollador (script externo) */
#aw-footer {
  font-size: 12px;
}
/* "Ver más" de la columna de vinculos oficiales */
.pie-mas {
  display: inline-block;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lima);
}

.marca img {
  display: block;
  max-width: 200px;
  height: auto;
}

/* ==========================================================================
   Menú flotante inferior
   ========================================================================== */
.navinf {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 50;
  width: calc(100% - 28px);
  max-width: 420px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border: 1px solid var(--linea);
  border-radius: 50px;
  box-shadow: 0 6px 26px rgba(47, 54, 52, 0.16);
  display: flex;
  justify-content: space-around;
  padding: 12px 6px 10px 6px;
}
.navinf a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--tenue);
  flex: 1;
  transition: color 0.15s;
}
.navinf a .ic {
  display: grid;
  place-items: center;
  /* width: 40px;
  height: 26px; */
  border-radius: 9px;
  transition: background 0.25s;
  padding: 6px 8px 8px 8px;
}
.navinf a svg {
  width: 21px;
  height: 21px;
  stroke-width: 1.8;
}
.navinf a.on {
  color: var(--verde);
}
.navinf a.on .ic {
  background: var(--lima-pal);
}

/* ==========================================================================
   Listado (páginas internas: farmacias-turno, plazas, etc.)
   ========================================================================== */
.intro {
  padding: 20px 0 6px;
}
.intro h2 {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(22px, 5.5vw, 28px);
  letter-spacing: -0.02em;
  margin: 4px 0 2px;
}
.intro p {
  color: var(--suave);
  font-size: 14px;
}
.lista {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.item {
  background: var(--sup);
  border: 1px solid var(--linea);
  border-radius: 16px;
  padding: 15px 16px;
  /* box-shadow: var(--sombra); */
}
.item .fila {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.item .nom {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 16.5px;
  letter-spacing: -0.01em;
}
/* En los listados renderizados en el servidor el nombre es un enlace real
   a la ficha (así el rastreador lo ve), pero visualmente sigue siendo el
   mismo título de antes: sin subrayado ni color de link. */
a.nom {
  color: inherit;
  text-decoration: none;
}
a.nom:hover {
  color: var(--verde);
}
.item .dist {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--verde);
  background: rgba(0, 121, 92, 0.08);
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.item .dir {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--suave);
  margin-top: 5px;
}
.item .dir svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--tenue);
}
.item .acc {
  display: flex;
  gap: 9px;
  margin-top: 13px;
}
.item .acc a {
  flex: 1;
  text-align: center;
  padding: 10px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 14px;
}
.b1 {
  background: var(--verde);
  color: #fff;
}
.b2 {
  background: var(--fondo);
  color: var(--verde);
  border: 1px solid var(--linea-2);
}
.estado {
  padding: 30px 0;
  text-align: center;
  color: var(--suave);
}

/* ==========================================================================
   Cotizaciones (dólar y real) — valores de referencia
   ========================================================================== */
.cotiza-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.cotiza-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--sup);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  padding: 12px 15px;
}
.cotiza-etq {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.005em;
}
.cotiza-vals {
  display: flex;
  gap: 20px;
  flex: none;
}
.cotiza-vals > span {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
}
.cotiza-vals b {
  font-size: 16px;
  font-weight: 700;
  color: var(--verde);
}
.cotiza-vals small {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tenue);
}
.cotiza-ref {
  font-size: 12px;
  font-weight: 600;
  color: var(--tenue);
  flex: none;
}
.cotiza-pie {
  margin-top: 10px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--tenue);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet */
@media (min-width: 640px) {
  .contenedor {
    max-width: 720px;
  }
  .hero {
    padding: 38px 0 40px;
  }
  .accesos {
    gap: 14px;
  }
  .acceso .tile {
    max-width: 84px;
  }
  .card {
    flex-basis: 230px;
  }
  .grilla-cards {
    grid-template-columns: repeat(3, 1fr);
  }
  .pie .contenedor {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px 26px;
    align-items: start;
  }
  .pie .legal {
    grid-column: 1/-1;
  }
  .cab {
    margin-top: 20px;
  }
  .cotiza-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .contenedor {
    max-width: 1080px;
  }
  /* Pie de 4 columnas: marca+contacto / el sitio / vínculos oficiales /
     info importante. El © y la firma van abajo (.legal es grid-column:1/-1). */
  .pie .contenedor {
    grid-template-columns: 1.2fr 1fr 1fr 1.1fr;
    gap: 34px 30px;
  }
  .pie .marca img {
    max-width: 90%;
  }
  body {
    padding-bottom: 110px;
  }
  .encabezado .logo,
  .encabezado .marca-link img {
    height: 30px;
  }
  .chip-ubic {
    max-width: 260px;
    font-size: 13.5px;
  }
  .hero {
    border-radius: 0 0 34px 34px;
    padding: 0;
  }
  .hero .contenedor {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: center;
    /* min-height: 340px; */
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .hero h1 {
    font-size: 38px;
    max-width: 13ch;
    margin-bottom: 22px;
  }
  .hero .lado {
    /* display: block; */
    align-self: stretch;
    min-height: 210px;
    border-radius: 24px;
    background:
      radial-gradient(
        circle at 68% 42%,
        rgba(152, 198, 26, 0.45),
        transparent 46%
      ),
      radial-gradient(
        circle at 38% 68%,
        rgba(236, 251, 178, 0.3),
        transparent 42%
      ),
      repeating-radial-gradient(
        circle at 60% 50%,
        transparent 0 20px,
        rgba(255, 255, 255, 0.1) 20px 21px
      );
    border: 1px solid rgba(255, 255, 255, 0.14);
  }
  .busca {
    padding: 16px 17px;
  }
  .accesos {
    /* max-width: 600px; */
    grid-template-columns: repeat(6, 1fr);
    /* repeat(auto-fit, minmax(90px, 1fr)); */
  }

  .acceso {
    border-left: 1px solid var(--linea);
    border-right: 1px solid var(--linea);
    border-radius: 10px;
  }
  .acceso .tile {
    max-width: 92px;
  }
  .grilla-cards {
    grid-template-columns: repeat(4, 1fr);
  }
  .mixto {
    flex-direction: row;
    align-items: stretch;
    gap: 20px;
  }
  .mixto-cards {
    flex: 0 0 46%;
    grid-template-columns: repeat(2, 1fr);
  }
  .mini-lista {
    flex: 1;
  }
  .mini-item {
    padding: 15px 18px;
  }
  .ahora-grid {
    flex-direction: row;
    align-items: stretch;
    gap: 16px;
  }
  .ahora--mini {
    flex: 1 1 68%;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 24px;
    row-gap: 8px;
    padding: 15px 24px 17px;
  }
  .ahora--clima {
    flex: 0 0 30%;
    max-width: 320px;
    border-radius: var(--r-lg);
    padding: 0 20px;
  }
  .ahora--mini .ahora-top {
    grid-column: 1;
    grid-row: 1;
    border-bottom: 1px dashed var(--linea);
    padding: 0 0 10px;
    white-space: nowrap;
  }
  .ahora--mini .ver-todas {
    grid-column: 2;
    grid-row: 1;
    border-bottom: 1px dashed var(--linea);
    padding: 0 0 10px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    background: none;
    text-align: left;
  }
  .ahora--mini .ahora-b {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0;
  }
  .ahora--mini .ahora-info {
    min-width: 0;
  }
  .ahora--mini .ahora-b .nom {
    margin: 0 0 3px;
    font-size: 17px;
  }
  .ahora--mini .meta {
    white-space: nowrap;
  }
  .ahora--mini .acciones {
    flex: 0 0 auto;
    margin-top: 0;
    gap: 10px;
  }
  .ahora--mini .btn {
    flex: none;
    padding: 11px 22px;
  }
  .acceso:hover .tile svg {
    color: var(--lima);
  }
  .split {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 30px;
    align-items: start;
  }
  .split > * {
    min-width: 0;
  }
  .card {
    flex-basis: 250px;
  }
  .carrusel {
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .navinf {
    max-width: 440px;
    bottom: 22px;
  }
  /* Listado interno */
  .split-interna {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 24px;
    align-items: start;
    margin-top: 16px;
  }
  #mapa {
    height: calc(100vh - 210px);
    position: sticky;
    top: 78px;
    margin-top: 0;
  }
  .lista {
    margin-top: 0;
  }
  .cab {
    margin-top: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 0;
  outline-offset: 2px;
  border-radius: 8px;
}

/* ==========================================================================
   Escritorio — Home en grilla
   Todo lo de acá abajo aplica solo de 1024px para arriba y, salvo las
   utilidades base, solo al home (body.home). Mobile y tablet quedan
   exactamente como estaban.
   ========================================================================== */

/* Piezas que solo existen en escritorio: ocultas por defecto. */
.nav-esc,
.busca-btn,
.clima-mas,
.seccion--solo-esc {
  display: none;
}

@media (min-width: 1024px) {
  .contenedor {
    max-width: 1180px;
  }

  /* --- Navegación superior (solo home) --- */
  .nav-esc {
    display: flex;
    gap: 26px;
    margin: 0 auto;
    font-size: 14px;
    font-weight: 600;
  }
  .nav-esc a {
    color: var(--texto);
    padding: 5px 2px;
    border-bottom: 2px solid transparent;
    transition: color 0.15s;
  }
  .nav-esc a:hover {
    color: var(--verde);
  }
  .nav-esc a.on {
    color: var(--verde);
    border-color: var(--lima);
  }
  /* La barra flotante de abajo es redundante con la de arriba. Se oculta
     solo en el home: las internas siguen usándola en escritorio. */
  .home .navinf {
    display: none;
  }
  body.home {
    padding-bottom: 40px;
  }

  /* --- Buscador del hero con botón --- */
  .busca-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    background: var(--verde);
    color: #fff;
    border: 0;
    border-radius: 9px;
    padding: 10px 18px;
    font-family: var(--cuerpo);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }
  .busca-btn:hover {
    background: var(--verde-osc);
  }
  .busca-btn svg {
    width: 16px;
    height: 16px;
    color: #fff;
  }
  .home .busca {
    padding: 10px 10px 10px 16px;
  }

  /* --- Hero: deja lugar para el panel que se le monta encima --- */
  .home .hero .contenedor {
    padding-bottom: 96px;
  }

  /* --- La grilla: 12 columnas, cada sección elige cuántas ocupa --- */
  .home main.contenedor {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px;
    align-items: start;
    margin-top: -62px;
    position: relative;
    z-index: 5;
  }
  /* Cada sección pasa a ser un panel blanco, como en el mockup. */
  .home main.contenedor > .seccion {
    background: var(--sup);
    border: 1px solid var(--linea);
    border-radius: var(--r-lg);
    box-shadow: var(--sombra);
    padding: 2px 20px 20px;
    margin-top: 0;
    border-top: 1px solid var(--linea);
  }
  .home main.contenedor > .seccion > .cab {
    margin-top: 16px;
  }
  .home .seccion--solo-esc {
    display: block;
  }
  .home .seccion--solo-mob {
    display: none;
  }

  /* Fila 1: accesos + clima. Fila 2: descubrir + farmacias de turno.
     Fila 3: oficinas + últimos. Cada fila suma 12. */
  .home .seccion--accesos {
    grid-column: span 8;
  }
  .home .ahora--clima {
    grid-column: span 4;
  }
  .home .seccion--descubrir {
    grid-column: span 7;
  }
  .home .seccion--turno {
    grid-column: span 5;
  }
  /* Oficinas y Últimos van solos, a todo el ancho: emparejarlos dejaba un
     panel de 620px al lado de uno de 260px, con el hueco blanco abajo. Y el
     carrusel, ancho, deja de cortar cards por la mitad en el borde. */
  .home .seccion--cotiza,
  .home .seccion--oficinas,
  .home .seccion--ultimos {
    grid-column: span 12;
  }

  /* "Ahora en Corrientes" se disuelve en escritorio: display:contents saca
     la sección y su grid del medio, así el clima queda como celda propia al
     lado de los accesos. La card de farmacia de turno se oculta porque su
     contenido ya está, completo, en el panel "Farmacias de turno". */
  .home .seccion--ahora,
  .home .ahora-grid {
    display: contents;
  }
  .home .seccion--ahora > .cab,
  .home .ahora--mini {
    display: none;
  }
  .home .ahora--clima {
    max-width: none;
    align-self: stretch;
    padding: 20px 22px; 
    justify-content: center;
    flex-direction: row;
    align-items: center;
  }
  .clima-mas {
    display: block;
    margin-top: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--verde);
  }

  /* Los accesos entran los 6 en una fila y sin las líneas divisorias, que
     dentro del panel quedaban como una reja. */
  .home .seccion--accesos .acceso {
    border-left: 0;
    border-right: 0;
  }
  .home .seccion--accesos .acceso .tile {
    max-width: 62px;
    border-width: 2px;
  }
  .home .seccion--accesos .acceso .tile svg {
    width: 26px;
    height: 26px;
  }
  .home .seccion--accesos .acceso .et {
    max-width: 11ch;
  }

  /* Cards más chicas: en el panel de 7 columnas entran 4 a la vista. */
  .home .seccion--descubrir .card,
  .home .seccion--ultimos .card {
    flex-basis: 152px;
  }
  .home .seccion--descubrir .card .ph,
  .home .seccion--ultimos .card .ph {
    height: 98px;
  }

  /* Farmacias de turno: dos columnas de items, como el mockup. */
  .home .seccion--turno .listas-2col {
    gap: 8px;
  }
  .home .seccion--turno .mini-item {
    padding: 11px 12px;
  }
  .home .seccion--turno .mini-lista {
    border: 0;
    border-radius: 0;
  }

  /* Oficinas a todo el ancho: las cards no se estiran para igualar el alto
     de la lista (era de donde salía el bloque blanco muerto). */
  .home .seccion--oficinas .mixto {
    align-items: flex-start;
  }
  .home .seccion--oficinas .mixto-cards {
    flex: 0 0 38%;
  }
  .home .seccion--oficinas .card {
    flex-basis: auto;
  }

  /* El carrusel de últimos, ancho, se banca cards más grandes. */
  .home .seccion--ultimos .card {
    flex-basis: 190px;
  }
  .home .seccion--ultimos .card .ph {
    height: 120px;
  }
}

/* ====================================================================
   PUBLICIDAD — Fase 4
   Va al final del archivo a propósito: la regla que baja
   .seccion--ultimos de 12 a 8 columnas tiene que pisar la de la
   media query de escritorio de más arriba, y con la misma
   especificidad gana la que viene después.
   ==================================================================== */

/* ── Contenedor del banner ─────────────────────────────────────────
   El alto se reserva desde PHP con --anu-mob / --anu-esc para que la
   imagen no empuje el contenido al terminar de cargar. Sin esto el
   home mueve el layout en cada visita y se nota en Core Web Vitals. */
.anuncio {
  position: relative;
  margin: 18px 0;
  padding: 0;
  min-height: var(--anu-mob, 110px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.anuncio-etq {
  display: block;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9aa0a6;
  margin: 0 0 6px 2px;
  line-height: 1;
}

.anuncio-pieza {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  line-height: 0;
}

.anuncio-pieza img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.anuncio-ads {
  display: block;
  width: 100%;
}

/* El lateral no existe en celular: ahi el home ya es largo y un
   rectangulo mas empeora el scroll sin sumar inventario real. */
.anuncio--home-lateral {
  display: none;
}

/* ── Tarjeta de destacado pago ─────────────────────────────────────
   Diferencia sutil: un borde de acento, no un tratamiento distinto.
   Si la card paga se ve como otra cosa, deja de funcionar. */
.card--pago {
  outline: 2px solid rgba(0, 121, 92, .35);
  outline-offset: -2px;
}

.pat-chip {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  background: rgba(17, 17, 17, .72);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 50px;
  line-height: 1;
  backdrop-filter: blur(2px);
}

/* ── Escritorio ────────────────────────────────────────────────────
   Los banners horizontales ocupan la fila entera de la grilla de 12.
   El lateral comparte fila con "Ultimos lugares", que baja a 8. */
@media (min-width: 1024px) {

  body.home main>.anuncio {
    min-height: var(--anu-esc, 130px);
    grid-column: span 12;
    margin: 0;
  }

  body.home main>.anuncio--home-lateral {
    display: flex;
    grid-column: span 4;
    min-height: var(--anu-esc, 250px);
    justify-content: flex-start;
  }

  /* Pareja de la fila del lateral. Si algun dia sacas el espacio
     'home-lateral' de index.php, borra tambien esta regla o
     "Ultimos lugares" queda con una columna vacia al lado. */
  body.home main>.seccion--ultimos:has(+ .anuncio--home-lateral) {
    grid-column: span 8;
  }

  /* Respaldo para navegadores sin :has() — Safari < 15.4 y Firefox
     viejo. Sin esto el lateral se mete en la fila igual, pero
     "Ultimos" sigue en 12 y lo empuja abajo. */
  @supports not selector(:has(*)) {
    body.home main>.seccion--ultimos {
      grid-column: span 8;
    }
  }
}