/* =========================================================================
   estaciondeservicio.com.ar — hoja de estilos
   CSS escrito a mano: no hay compilador ni build. Se edita y se sube.
   ========================================================================= */

:root {
  --brand-50:  #eff8fb;
  --brand-100: #d6edf5;
  --brand-200: #b0dbea;
  --brand-300: #7bc1da;
  --brand-400: #3f9ec3;
  --brand-500: #2482a9;
  --brand-600: #1f688e;
  --brand-700: #1e5674;
  --brand-800: #204861;
  --brand-900: #1b3b51;
  --brand-950: #0d2434;

  --acento-300: #fcd34d;
  --acento-400: #fbbf24;
  --acento-500: #f59e0b;
  --acento-600: #d97706;

  --gris-50:  #f8fafc;
  --gris-100: #f1f5f9;
  --gris-200: #e2e8f0;
  --gris-300: #cbd5e1;
  --gris-400: #94a3b8;
  --gris-500: #64748b;
  --gris-600: #475569;
  --gris-700: #334155;
  --gris-800: #1e293b;
  --gris-900: #0f172a;

  --verde-50:  #ecfdf5;
  --verde-100: #d1fae5;
  --verde-700: #047857;
  --verde-800: #065f46;
  --rojo-50:   #fef2f2;
  --rojo-100:  #fee2e2;
  --rojo-600:  #dc2626;
  --rojo-700:  #b91c1c;
  --ambar-50:  #fffbeb;
  --ambar-100: #fef3c7;
  --ambar-300: #fcd34d;
  --ambar-800: #92400e;

  --fondo: #f6f7f9;
  --radio: 12px;
  --radio-sm: 8px;
  --sombra: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .1);
  --sombra-md: 0 4px 6px -1px rgba(15, 23, 42, .1), 0 2px 4px -2px rgba(15, 23, 42, .1);
  --sombra-lg: 0 10px 15px -3px rgba(15, 23, 42, .1), 0 4px 6px -4px rgba(15, 23, 42, .1);
  --ancho: 1200px;
}

/* ------------------------------------------------------------------ Base */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--gris-800);
  font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1; }

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -.02em; }

p { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 1rem;
}

.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ------------------------------------------------------------ Tipografía */

.titulo-1 { font-size: 1.875rem; font-weight: 700; color: var(--gris-900); }
.titulo-2 { font-size: 1.5rem; font-weight: 700; color: var(--gris-900); }
.titulo-3 { font-size: 1.125rem; font-weight: 700; color: var(--gris-900); }

.texto-suave { color: var(--gris-500); }
.texto-chico { font-size: .875rem; }
.texto-mini  { font-size: .75rem; }
.negrita { font-weight: 600; }

@media (min-width: 640px) {
  .titulo-1 { font-size: 2.25rem; }
}

/* ---------------------------------------------------------------- Botones */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radio-sm);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
  font-family: inherit;
  text-align: center;
}

.boton--acento { background: var(--acento-500); color: var(--brand-950); }
.boton--acento:hover { background: var(--acento-400); }

.boton--primario { background: var(--brand-700); color: #fff; }
.boton--primario:hover { background: var(--brand-800); }

.boton--secundario { background: #fff; border-color: var(--gris-300); color: var(--gris-700); }
.boton--secundario:hover { background: var(--gris-50); }

.boton--verde { background: var(--verde-700); color: #fff; }
.boton--verde:hover { background: var(--verde-800); }

.boton--rojo { background: var(--rojo-600); color: #fff; }
.boton--rojo:hover { background: var(--rojo-700); }

.boton--whatsapp { background: #25D366; color: #fff; }
.boton--whatsapp:hover { filter: brightness(.95); }

.boton--chico { padding: .4rem .75rem; font-size: .75rem; }
.boton--ancho { width: 100%; }
.boton[disabled], .boton:disabled { opacity: .55; cursor: not-allowed; }

.enlace { color: var(--brand-700); font-weight: 500; }
.enlace:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Header */

.encabezado {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(13, 36, 52, .97);
  border-bottom: 1px solid rgba(27, 59, 81, .8);
  backdrop-filter: blur(8px);
}

.encabezado__barra {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 64px;
}

.marca { display: flex; align-items: center; gap: .5rem; color: #fff; flex-shrink: 0; }

.marca__icono {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--radio-sm);
  background: var(--acento-500);
  color: var(--brand-950);
  flex-shrink: 0;
}

.marca__texto { font-size: .95rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.marca__texto span { color: var(--acento-400); }

.nav-principal { display: none; gap: .125rem; }

.nav-principal a {
  padding: .5rem .75rem;
  border-radius: var(--radio-sm);
  font-size: .875rem;
  font-weight: 500;
  color: var(--brand-100);
}
.nav-principal a:hover { background: rgba(255, 255, 255, .1); color: #fff; }

.encabezado__acciones { margin-left: auto; display: flex; align-items: center; gap: .4rem; }

.encabezado__acciones .enlace-claro {
  padding: .5rem .7rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--brand-100);
  border-radius: var(--radio-sm);
}
.encabezado__acciones .enlace-claro:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.encabezado__acciones .es-admin { color: var(--acento-400); }

.solo-escritorio { display: none; }

@media (min-width: 900px) {
  .nav-principal { display: flex; }
  .solo-escritorio { display: inline-flex; }
  .marca__texto { font-size: 1rem; }
}

/* ------------------------------------------------------------------ Hero */

.hero {
  position: relative;
  background: var(--brand-950);
  padding: 3.5rem 0 4rem;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute; inset: 0;
  opacity: .25;
  background:
    radial-gradient(circle at 20% 20%, #2482a9 0%, transparent 45%),
    radial-gradient(circle at 80% 0%, #f59e0b 0%, transparent 40%);
}

.hero > * { position: relative; }

.hero__ojo {
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--acento-400);
}

.hero__titulo {
  margin-top: .75rem;
  max-width: 46rem;
  font-size: 2.1rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
}
.hero__titulo span { color: var(--acento-400); }

.hero__bajada {
  margin-top: 1rem;
  max-width: 40rem;
  font-size: 1.05rem;
  color: var(--brand-100);
}

@media (min-width: 640px) {
  .hero__titulo { font-size: 3rem; }
}

.atajos { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem; }

.atajo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .05);
  border-radius: 999px;
  font-size: .875rem;
  color: var(--brand-100);
}
.atajo:hover { border-color: var(--acento-400); color: #fff; }

/* -------------------------------------------------------------- Buscador */

.buscador {
  margin-top: 2rem;
  background: rgba(255, 255, 255, .96);
  border-radius: var(--radio);
  padding: .75rem;
  box-shadow: var(--sombra-lg);
  max-width: 62rem;
}

.buscador__pestanias {
  display: flex;
  gap: .25rem;
  background: var(--gris-100);
  border-radius: var(--radio-sm);
  padding: .25rem;
  margin-bottom: .75rem;
}

.buscador__pestania {
  flex: 1;
  padding: .5rem 1rem;
  border: 0;
  background: transparent;
  border-radius: 6px;
  font-family: inherit;
  font-size: .875rem;
  font-weight: 600;
  color: var(--gris-500);
  cursor: pointer;
}
.buscador__pestania.activa { background: #fff; color: var(--brand-800); box-shadow: var(--sombra); }

.buscador__campos { display: grid; gap: .5rem; }

@media (min-width: 900px) {
  .buscador { padding: 1rem; }
  .buscador__campos { grid-template-columns: 1.1fr .9fr 1fr 1.2fr auto; }
}

.buscador__campos select,
.buscador__campos input {
  width: 100%;
  padding: .8rem .75rem;
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-sm);
  font-family: inherit;
  font-size: .875rem;
  color: var(--gris-700);
  background: #fff;
}

.buscador__campos select:focus,
.buscador__campos input:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-100);
}

/* --------------------------------------------------------------- Secciones */

.seccion { padding: 3.5rem 0; }
.seccion--blanca { background: #fff; }
.seccion--borde { border-bottom: 1px solid var(--gris-200); }
.seccion--compacta { padding: 2rem 0; }

.seccion__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------- Banderas */

.grilla-banderas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  margin-top: 1rem;
}

@media (min-width: 640px) { .grilla-banderas { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .grilla-banderas { grid-template-columns: repeat(7, 1fr); } }

.bandera {
  display: block;
  padding: 1rem .5rem;
  text-align: center;
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  background: #fff;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.bandera:hover { transform: translateY(-2px); border-color: var(--brand-400); box-shadow: var(--sombra-md); }
.bandera__nombre { font-weight: 700; color: var(--brand-800); }
.bandera__cantidad { font-size: .75rem; color: var(--gris-500); margin-top: .1rem; }

.bandera--vacia { background: var(--gris-50); border-color: var(--gris-100); }
.bandera--vacia:hover { transform: none; border-color: var(--gris-200); box-shadow: none; }
.bandera--vacia .bandera__nombre { color: var(--gris-400); }

/* ---------------------------------------------------------------- Tarjetas */

.grilla-avisos { display: grid; gap: 1.25rem; }

@media (min-width: 640px) { .grilla-avisos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grilla-avisos { grid-template-columns: repeat(3, 1fr); } }

.tarjeta {
  background: #fff;
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  transition: transform .15s, box-shadow .15s;
  display: flex;
  flex-direction: column;
}
.tarjeta:hover { transform: translateY(-2px); box-shadow: var(--sombra-lg); }

.tarjeta__foto {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--gris-100);
  overflow: hidden;
}

.tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.tarjeta:hover .tarjeta__foto img { transform: scale(1.05); }
.tarjeta__foto--cerrada img { filter: grayscale(1); }

.tarjeta__etiquetas {
  position: absolute; top: .75rem; left: .75rem;
  display: flex; flex-wrap: wrap; gap: .35rem;
}

.tarjeta__bandera {
  position: absolute; top: .75rem; right: .75rem;
  background: rgba(255, 255, 255, .95);
  color: var(--brand-800);
  padding: .25rem .5rem;
  border-radius: 6px;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.tarjeta__precio {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.5rem .75rem .75rem;
  background: linear-gradient(to top, rgba(0, 0, 0, .78), transparent);
  color: #fff;
}
.tarjeta__precio strong { font-size: 1.125rem; font-weight: 700; }
.tarjeta__precio small { display: block; font-size: .75rem; color: rgba(255, 255, 255, .8); }

.tarjeta__cuerpo { padding: 1rem; flex: 1; }

.tarjeta__tipo {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--brand-600);
}

.tarjeta__titulo {
  margin-top: .25rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--gris-900);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tarjeta__lugar {
  margin-top: .5rem;
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .875rem;
  color: var(--gris-500);
}

.tarjeta__datos {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--gris-100);
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  font-size: .875rem;
  color: var(--gris-600);
}
.tarjeta__datos .despacho { color: var(--brand-700); font-weight: 600; }

.tarjeta__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .6rem 1rem;
  border-top: 1px solid var(--gris-100);
  font-size: .75rem;
  color: var(--gris-500);
}

/* ---------------------------------------------------------------- Etiquetas */

.etiqueta {
  display: inline-block;
  padding: .25rem .5rem;
  border-radius: 6px;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.etiqueta--oscura   { background: rgba(13, 36, 52, .88); color: #fff; }
.etiqueta--acento   { background: var(--acento-500); color: var(--brand-950); }
.etiqueta--gris     { background: var(--gris-100); color: var(--gris-600); }
.etiqueta--cerrada  { background: var(--gris-700); color: #fff; }

.estado {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
}
.estado--PUBLICADA { background: var(--verde-100); color: var(--verde-800); }
.estado--PENDIENTE { background: var(--ambar-100); color: var(--ambar-800); }
.estado--RECHAZADA { background: var(--rojo-100); color: var(--rojo-700); }
.estado--RESERVADA { background: var(--ambar-100); color: var(--acento-600); }
.estado--VENDIDA, .estado--ALQUILADA { background: var(--gris-200); color: var(--gris-700); }
.estado--PAUSADA, .estado--BORRADOR { background: var(--gris-100); color: var(--gris-500); }

.verificado { color: var(--brand-500); flex-shrink: 0; }

/* ----------------------------------------------------------------- Listado */

.listado { display: block; padding: 2rem 0; }

@media (min-width: 1024px) {
  .listado { display: flex; gap: 2rem; align-items: flex-start; }
  .listado__filtros { width: 280px; flex-shrink: 0; position: sticky; top: 80px; }
  .listado__resultados { flex: 1; min-width: 0; }
}

.listado__filtros { margin-bottom: 1.5rem; }

.filtros {
  background: #fff;
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  padding: 1.25rem;
}

.filtros__grupo { margin-bottom: 1.25rem; }
.filtros__grupo:last-child { margin-bottom: 0; }

.filtros__titulo {
  display: block;
  margin-bottom: .4rem;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gris-500);
}

.filtros__separador { border-top: 1px solid var(--gris-100); padding-top: 1.25rem; }

.chips { display: flex; flex-wrap: wrap; gap: .35rem; }

.chip {
  display: inline-block;
  padding: .3rem .75rem;
  border: 1px solid var(--gris-200);
  border-radius: 999px;
  background: #fff;
  font-size: .75rem;
  font-weight: 500;
  color: var(--gris-600);
  cursor: pointer;
}
.chip:hover { border-color: var(--gris-300); }
.chip.activo { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }

.segmentado {
  display: flex;
  gap: .25rem;
  background: var(--gris-100);
  border-radius: var(--radio-sm);
  padding: .25rem;
}

.segmentado a {
  flex: 1;
  text-align: center;
  padding: .4rem .5rem;
  border-radius: 6px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--gris-500);
}
.segmentado a.activo { background: #fff; color: var(--brand-800); box-shadow: var(--sombra); }

.barra-resultados {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1.25rem;
}

/* -------------------------------------------------------------- Paginación */

.paginacion {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
}

.paginacion a, .paginacion span {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 .75rem;
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-sm);
  background: #fff;
  font-size: .875rem;
  font-weight: 500;
  color: var(--gris-600);
}
.paginacion a:hover { border-color: var(--gris-300); }
.paginacion .actual { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.paginacion .puntos { border: 0; background: transparent; color: var(--gris-400); min-width: auto; }

/* ------------------------------------------------------------------ Ficha */

.migas {
  background: #fff;
  border-bottom: 1px solid var(--gris-200);
}
.migas ol { display: flex; flex-wrap: wrap; gap: .4rem; padding: .75rem 0; font-size: .875rem; color: var(--gris-500); }
.migas a:hover { color: var(--brand-700); }

.ficha { display: grid; gap: 2rem; padding: 2rem 0; }

@media (min-width: 1024px) {
  .ficha { grid-template-columns: 1fr 360px; align-items: start; }
  .ficha__lateral { position: sticky; top: 80px; }
}

.ficha__principal > * + * { margin-top: 2rem; }

.galeria { border-radius: var(--radio); overflow: hidden; background: var(--gris-900); }
.galeria__grande { position: relative; aspect-ratio: 16 / 10; }
.galeria__grande img { width: 100%; height: 100%; object-fit: cover; }

.galeria__contador {
  position: absolute; right: .75rem; bottom: .75rem;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  padding: .25rem .6rem;
  border-radius: 6px;
  font-size: .75rem;
}

.galeria__miniaturas {
  display: flex;
  gap: .5rem;
  padding: .5rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.galeria__miniaturas::-webkit-scrollbar { display: none; }

.galeria__miniaturas button {
  flex-shrink: 0;
  width: 96px; height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  opacity: .7;
}
.galeria__miniaturas button.activa { border-color: var(--acento-400); opacity: 1; }
.galeria__miniaturas img { width: 100%; height: 100%; object-fit: cover; }

.ficha__etiquetas { display: flex; flex-wrap: wrap; gap: .5rem; }
.ficha__titulo { margin-top: .75rem; font-size: 1.75rem; font-weight: 700; color: var(--gris-900); }
.ficha__lugar { margin-top: .5rem; display: flex; align-items: center; gap: .5rem; color: var(--gris-600); }
.ficha__meta { margin-top: 1rem; font-size: .875rem; color: var(--gris-400); }

.ficha__descripcion { margin-top: .75rem; color: var(--gris-700); line-height: 1.7; }

/* Ficha técnica */

.datos {
  display: grid;
  gap: .75rem;
  margin-top: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.dato {
  background: var(--gris-50);
  border-radius: var(--radio-sm);
  padding: .75rem 1rem;
}
.dato dt { font-size: .7rem; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--gris-500); }
.dato dd { margin: .15rem 0 0; font-weight: 600; color: var(--gris-900); }

.despachos { display: grid; gap: .75rem; margin-top: .75rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.despacho-caja {
  border: 1px solid var(--brand-200);
  background: var(--brand-50);
  border-radius: var(--radio-sm);
  padding: .75rem 1rem;
}
.despacho-caja__rotulo { font-size: .7rem; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--brand-700); }
.despacho-caja__valor { font-size: 1.5rem; font-weight: 700; color: var(--brand-900); }
.despacho-caja__valor small { font-size: .8rem; font-weight: 500; }
.despacho-caja--total { border-color: var(--acento-400); background: #fef6e7; }
.despacho-caja--total .despacho-caja__rotulo { color: var(--acento-600); }
.despacho-caja--total .despacho-caja__valor { color: var(--gris-900); }

.servicios { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }

.servicio {
  padding: .35rem .75rem;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 500;
  background: var(--brand-700);
  color: #fff;
}
.servicio--no { background: var(--gris-100); color: var(--gris-400); text-decoration: line-through; }

.habilitaciones { margin-top: .5rem; }
.habilitacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--gris-100);
  font-size: .875rem;
}
.habilitacion:last-child { border-bottom: 0; }

.pastilla-ok    { background: var(--verde-100); color: var(--verde-800); padding: .1rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.pastilla-falta { background: var(--rojo-100); color: var(--rojo-700); padding: .1rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 600; }

.mapa-caja {
  margin-top: .75rem;
  aspect-ratio: 16 / 7;
  display: grid;
  place-items: center;
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #eef2f5 25%, transparent 25%),
    linear-gradient(-45deg, #eef2f5 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eef2f5 75%),
    linear-gradient(-45deg, transparent 75%, #eef2f5 75%);
  background-size: 24px 24px;
}

.mapa-caja__interior {
  background: rgba(255, 255, 255, .92);
  padding: 1rem 1.25rem;
  border-radius: var(--radio-sm);
  text-align: center;
  box-shadow: var(--sombra);
}

/* Panel lateral de contacto */

.caja {
  background: #fff;
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  padding: 1.25rem;
  box-shadow: var(--sombra);
}

.caja + .caja { margin-top: 1rem; }

.precio-grande { font-size: 1.875rem; font-weight: 700; color: var(--gris-900); letter-spacing: -.02em; }

.publicador { display: flex; gap: .75rem; align-items: flex-start; margin-top: .5rem; }

.avatar {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: var(--brand-100);
  color: var(--brand-800);
  font-weight: 700;
  flex-shrink: 0;
}

.separador { border-top: 1px solid var(--gris-100); margin-top: 1.25rem; padding-top: 1.25rem; }

.recuadro-tip {
  border: 1px solid rgba(251, 191, 36, .45);
  background: rgba(251, 191, 36, .12);
  border-radius: var(--radio);
  padding: 1rem;
  font-size: .875rem;
  color: var(--gris-700);
}

/* --------------------------------------------------------------- Formularios */

.formulario { display: grid; gap: 1rem; }

.campo { display: block; }

.campo label, .campo > .rotulo {
  display: block;
  margin-bottom: .35rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--gris-700);
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo input[type="password"],
.campo input[type="number"],
.campo input[type="date"],
.campo input[type="search"],
.campo select,
.campo textarea,
input.control, select.control, textarea.control {
  width: 100%;
  padding: .65rem .75rem;
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-sm);
  background: #fff;
  font-family: inherit;
  font-size: .875rem;
  color: var(--gris-800);
}

.campo textarea { resize: vertical; min-height: 90px; }

.campo input:focus, .campo select:focus, .campo textarea:focus,
input.control:focus, select.control:focus, textarea.control:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-100);
}

.campo--error input, .campo--error select, .campo--error textarea { border-color: #fca5a5; background: #fffafa; }

.campo .error { margin-top: .25rem; font-size: .75rem; color: var(--rojo-600); }
.campo .ayuda { margin-top: .25rem; font-size: .75rem; color: var(--gris-400); }

.grilla-2 { display: grid; gap: 1rem; }
.grilla-3 { display: grid; gap: 1rem; }
.grilla-4 { display: grid; gap: 1rem; }

@media (min-width: 640px) {
  .grilla-2 { grid-template-columns: repeat(2, 1fr); }
  .grilla-3 { grid-template-columns: repeat(3, 1fr); }
  .grilla-4 { grid-template-columns: repeat(4, 1fr); }
}

.casilla {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  color: var(--gris-600);
  cursor: pointer;
}
.casilla input { width: 16px; height: 16px; accent-color: var(--brand-700); }

.casilla--marco {
  border: 1px solid var(--gris-200);
  border-radius: 999px;
  padding: .4rem .8rem;
}

.opciones-tarjeta { display: grid; gap: .75rem; }
@media (min-width: 640px) { .opciones-tarjeta { grid-template-columns: repeat(2, 1fr); } }

.opcion-tarjeta {
  display: block;
  border: 2px solid var(--gris-200);
  border-radius: var(--radio);
  padding: 1rem;
  cursor: pointer;
  background: #fff;
}
.opcion-tarjeta:hover { border-color: var(--gris-300); }
.opcion-tarjeta input { position: absolute; opacity: 0; }
.opcion-tarjeta:has(input:checked) { border-color: var(--brand-600); background: var(--brand-50); }

.acciones-formulario {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gris-100);
  margin-top: 1rem;
}

.zona-archivos {
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  border: 2px dashed var(--gris-300);
  border-radius: var(--radio);
  background: var(--gris-50);
  text-align: center;
}

.grilla-fotos {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 1rem;
}
@media (min-width: 640px) { .grilla-fotos { grid-template-columns: repeat(4, 1fr); } }

.foto-mini {
  position: relative;
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-sm);
  overflow: hidden;
  background: #fff;
}
.foto-mini img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.foto-mini__pie { display: flex; align-items: center; justify-content: space-between; padding: .35rem .5rem; }
.foto-mini__portada {
  position: absolute; top: .35rem; left: .35rem;
  background: rgba(13, 36, 52, .85);
  color: #fff;
  padding: .1rem .4rem;
  border-radius: 4px;
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* -------------------------------------------------------------- Mensajes */

.aviso {
  border: 1px solid;
  border-radius: var(--radio-sm);
  padding: .75rem 1rem;
  font-size: .875rem;
}
.aviso + .aviso { margin-top: .75rem; }
.aviso--info   { border-color: var(--brand-200); background: var(--brand-50); color: var(--brand-900); }
.aviso--exito  { border-color: #a7f3d0; background: var(--verde-50); color: var(--verde-800); }
.aviso--error  { border-color: #fecaca; background: var(--rojo-50); color: var(--rojo-700); }
.aviso--alerta { border-color: var(--ambar-300); background: var(--ambar-50); color: var(--ambar-800); }

.vacio {
  border: 2px dashed var(--gris-300);
  border-radius: var(--radio);
  background: #fff;
  padding: 3rem 1.5rem;
  text-align: center;
}

/* ----------------------------------------------------------------- Panel */

.panel-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2rem;
}

.panel-nav {
  display: flex;
  gap: .25rem;
  margin-top: 1.5rem;
  border-bottom: 1px solid var(--gris-200);
  overflow-x: auto;
}

.panel-nav a {
  padding: .6rem 1rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--gris-600);
  white-space: nowrap;
}
.panel-nav a:hover { color: var(--gris-900); border-color: var(--gris-300); }
.panel-nav a.activo { color: var(--brand-800); border-color: var(--brand-700); font-weight: 600; }

.globo {
  display: inline-block;
  margin-left: .35rem;
  padding: .05rem .4rem;
  border-radius: 999px;
  background: var(--brand-700);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
}
.globo--acento { background: var(--acento-500); color: var(--brand-950); }

.kpis { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); margin-top: 1.5rem; }
@media (min-width: 900px) { .kpis { grid-template-columns: repeat(4, 1fr); } }

.kpi { background: #fff; border: 1px solid var(--gris-200); border-radius: var(--radio); padding: 1.25rem; }
.kpi__rotulo { font-size: .7rem; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--gris-500); }
.kpi__valor { margin-top: .15rem; font-size: 1.875rem; font-weight: 700; color: var(--gris-900); }

.lista-avisos { background: #fff; border: 1px solid var(--gris-200); border-radius: var(--radio); overflow: hidden; }

.fila-aviso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: .75rem;
  border-bottom: 1px solid var(--gris-100);
}
.fila-aviso:last-child { border-bottom: 0; }
.fila-aviso:hover { background: var(--gris-50); }
.fila-aviso__foto { width: 96px; height: 64px; border-radius: var(--radio-sm); object-fit: cover; flex-shrink: 0; }
.fila-aviso__cuerpo { flex: 1; min-width: 200px; }
.fila-aviso__acciones { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }

.barra-plan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  background: #fff;
}
.barra-plan--activo { border-color: var(--brand-200); background: var(--brand-50); }

/* ---------------------------------------------------------------- Tablas */

.tabla-envoltorio {
  background: #fff;
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  overflow-x: auto;
}

table.tabla { width: 100%; min-width: 720px; border-collapse: collapse; font-size: .875rem; }

table.tabla thead th {
  text-align: left;
  padding: .75rem 1rem;
  background: var(--gris-50);
  border-bottom: 1px solid var(--gris-200);
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gris-500);
}

table.tabla td { padding: .75rem 1rem; border-bottom: 1px solid var(--gris-100); vertical-align: top; }
table.tabla tbody tr:last-child td { border-bottom: 0; }
table.tabla tbody tr:hover { background: var(--gris-50); }
.derecha { text-align: right; }

/* ---------------------------------------------------------------- Planes */

.grilla-planes { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
@media (min-width: 900px) { .grilla-planes { grid-template-columns: repeat(3, 1fr); } }

.plan {
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  background: #fff;
  padding: 1.5rem;
}
.plan--destacado { border-color: var(--brand-600); background: var(--brand-50); box-shadow: var(--sombra-lg); }
.plan__precio { margin-top: .5rem; font-size: 1.875rem; font-weight: 700; color: var(--gris-900); }
.plan__lista { margin-top: 1.25rem; display: grid; gap: .6rem; font-size: .875rem; color: var(--gris-700); }
.plan__lista li { display: flex; gap: .5rem; }
.plan__lista li::before { content: "✓"; color: var(--brand-600); font-weight: 700; }

/* ------------------------------------------------------------------ Pago */

.pago { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
@media (min-width: 800px) { .pago { grid-template-columns: repeat(2, 1fr); } }

.qr { display: block; max-width: 260px; margin: 1.25rem auto 0; border: 1px solid var(--gris-200); border-radius: var(--radio); background: #fff; padding: .5rem; }

.datos-pago { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--gris-100); display: grid; gap: .5rem; font-size: .875rem; }
.datos-pago > div { display: flex; justify-content: space-between; gap: .75rem; }
.datos-pago dt { color: var(--gris-500); }
.datos-pago dd { margin: 0; font-weight: 600; color: var(--gris-900); text-align: right; word-break: break-all; }

/* -------------------------------------------------------------- Contenido */

.pagina-simple { background: var(--fondo); }
.caja-centrada { max-width: 32rem; margin: 3.5rem auto; padding: 2rem; background: #fff; border: 1px solid var(--gris-200); border-radius: var(--radio); box-shadow: var(--sombra); }
.angosto { max-width: 48rem; margin: 0 auto; }
.medio { max-width: 64rem; margin: 0 auto; }

.pasos { display: grid; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 640px) { .pasos { grid-template-columns: repeat(3, 1fr); } }

.paso { border: 1px solid var(--gris-200); background: rgba(248, 250, 252, .6); border-radius: var(--radio); padding: 1.25rem; }
.paso__numero { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: var(--brand-700); color: #fff; font-size: .875rem; font-weight: 700; }

/* ------------------------------------------------------------------- Pie */

.pie { margin-top: 4rem; background: var(--brand-950); color: var(--brand-200); }

.pie__columnas { display: grid; gap: 2.5rem; padding: 3rem 0; }
@media (min-width: 640px) { .pie__columnas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pie__columnas { grid-template-columns: repeat(4, 1fr); } }

.pie h3 { font-size: .875rem; font-weight: 600; color: #fff; }
.pie ul { margin-top: 1rem; display: grid; gap: .5rem; font-size: .875rem; }
.pie a:hover { color: var(--acento-400); }

.pie__banderas { border-top: 1px solid rgba(255, 255, 255, .1); padding: 1.5rem 0; }
.pie__banderas .chips { margin-top: .75rem; }
.pie__banderas .chip {
  background: transparent;
  border-color: rgba(255, 255, 255, .15);
  color: var(--brand-200);
}
.pie__banderas .chip:hover { border-color: var(--acento-400); color: var(--acento-400); }

.pie__legal {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 1.5rem 0;
  font-size: .75rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: space-between;
}

/* ---------------------------------------------------------------- Varios */

.oculto { display: none !important; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.centrado { text-align: center; }
.fila { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.fila--separada { justify-content: space-between; }
.crecer { flex: 1; min-width: 0; }
.recortar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ======================================================================
   Mejoras 29/09/2026 (revisión completa)
   ====================================================================== */

/* Accesibilidad: saltar al contenido y botones con aspecto de enlace */
.saltar-contenido {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--acento-500); color: var(--brand-950);
  padding: .6rem 1rem; font-weight: 700; border-radius: 0 0 var(--radio-sm) 0;
}
.saltar-contenido:focus { left: 0; }
.boton-texto { background: none; border: 0; cursor: pointer; font: inherit; }
.encabezado__acciones .boton-texto { color: var(--brand-100); padding: .5rem .7rem; font-size: .875rem; font-weight: 500; }
.solo-celular { display: inline; }
@media (min-width: 900px) { .solo-celular { display: none; } }

/* Celular: la cabecera se desbordaba (scroll horizontal) y el menú no existía */
@media (max-width: 899px) {
  .encabezado__barra { flex-wrap: wrap; height: auto; padding-top: .5rem; row-gap: .25rem; }
  .nav-principal {
    display: flex; order: 3; width: 100%;
    overflow-x: auto; padding-bottom: .4rem; -webkit-overflow-scrolling: touch;
  }
  .nav-principal a { white-space: nowrap; padding: .45rem .65rem; }
}
@media (max-width: 480px) {
  .marca__texto { display: none; }
}

/* iOS hace zoom en campos con letra menor a 16 px */
@media (max-width: 640px) {
  .campo input, .campo select, .campo textarea,
  input.control, select.control, textarea.control,
  .buscador__campos input, .buscador__campos select,
  .formulario input, .formulario select, .formulario textarea { font-size: 16px; }
}

/* Contraste suficiente (WCAG AA) */
.boton--whatsapp { color: var(--brand-950); }
.campo .ayuda { color: var(--gris-500); }
.estado--RESERVADA { color: var(--ambar-800); }
.opcion-tarjeta:has(input:focus-visible) { outline: 3px solid var(--brand-400); outline-offset: 2px; }

/* Botones y chips más fáciles de tocar en pantallas táctiles */
@media (pointer: coarse) {
  .chip, .segmentado a, .boton--chico { min-height: 40px; display: inline-flex; align-items: center; }
  .pie ul a { display: inline-block; padding: .35rem 0; }
}

/* Formulario de aviso: el "span 2" en celular creaba una columna extra */
.campo--doble { grid-column: auto; }
@media (min-width: 640px) { .campo--doble { grid-column: span 2; } }

/* Filtros del listado plegables en celular (en escritorio quedan abiertos) */
details.filtros > summary { cursor: pointer; list-style: none; }
details.filtros > summary::-webkit-details-marker { display: none; }
details.filtros > summary::after { content: " ▾"; color: var(--gris-500); }
details.filtros[open] > summary::after { content: " ▴"; }

/* Barra de contacto fija en la ficha, sólo en celular */
.barra-contacto {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; gap: .5rem;
  padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--gris-200); box-shadow: 0 -4px 12px rgba(15, 23, 42, .08);
}
.barra-contacto .boton { flex: 1; justify-content: center; }
body:has(.barra-contacto) .pie { padding-bottom: 4.5rem; }
@media (min-width: 1024px) {
  .barra-contacto { display: none; }
  body:has(.barra-contacto) .pie { padding-bottom: 0; }
}

/* Pie con la columna "El portal" */
@media (min-width: 1024px) { .pie__columnas { grid-template-columns: 1.4fr repeat(4, 1fr); } }

/* Páginas legales / institucionales */
.texto-legal { max-width: 46rem; }
.texto-legal h2 { margin-top: 2rem; }
.texto-legal p, .texto-legal li { line-height: 1.7; color: var(--gris-700); }
.texto-legal ul { margin: .5rem 0 0 1.25rem; list-style: disc; display: grid; gap: .35rem; }
.dato-pendiente { background: var(--ambar-100); color: var(--ambar-800); padding: 0 .3rem; border-radius: 4px; }

/* Registro: la matrícula es sólo para inmobiliarias */
.formulario:has(input[name="tipo"][value="PARTICULAR"]:checked) .campo-matricula { display: none; }

/* Formulario de aviso: bloques de ficha técnica por rubro */
.fieldset-limpio { border: 0; padding: 0; margin: 0; min-width: 0; }
[hidden] { display: none !important; }