/**
 * listeo-master.css — portada Home Sample 1 (réplica nativa Listeo, GDM).
 *
 * Spec: /var/specs/erp/ERP-2026-10-08-021-directorio-home-sample1.spec.md
 * Sin CDN ni fuentes remotas (I4): pila de fuentes del sistema y assets locales.
 * Paleta: **corporativa Bolívar360** (spec 026) — azul #1681e5, naranja
 * #fdaf00, rojo #fe0000, verde #33cc33, gris #4d4d4d.
 */

:root {
  /* ── Paleta corporativa Bolívar360 (spec 026) — fuente única de la marca ── */
  --bo-azul: #1681e5;
  --bo-naranja: #fdaf00;
  --bo-rojo: #fe0000;
  --bo-verde: #33cc33;
  --bo-gris: #4d4d4d;

  /* Alias de las piezas Listeo → paleta de marca */
  --l1-rojo: var(--bo-rojo);
  --l1-rojo-oscuro: #cc0000;
  --l1-tinta: var(--bo-gris);
  --l1-texto: #4a4a5c;
  --l1-suave: #6b6f8d;
  --l1-borde: #ececf3;
  --l1-fondo: #f7f7fb;
  --l1-verde: var(--bo-verde);
  --l1-dorado: var(--bo-naranja);
  --l1-azul: var(--bo-azul);
  --l1-radio: 16px;
  --l1-sombra: 0 10px 30px rgba(22, 22, 29, .08);
  --l1-fuente: "Montserrat", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
}

.l1-home { font-family: var(--l1-fuente); color: var(--l1-texto); background: var(--l1-fondo); }
.l1-home *, .l1-home *::before, .l1-home *::after { box-sizing: border-box; }
.l1-home a { color: inherit; text-decoration: none; }
.l1-home img { max-width: 100%; display: block; }
.l1-contenedor { width: min(1180px, 100% - 32px); margin-inline: auto; }

/* ═══ Títulos de sección ═══ */
.l1-titulo-seccion { text-align: center; margin: 54px 0 26px; }
.l1-titulo-seccion h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--l1-tinta); font-weight: 800; margin: 0 0 10px; }
.l1-titulo-seccion p { margin: 0; color: var(--l1-suave); font-size: .95rem; }
.l1-titulo-seccion::after {
  content: ""; display: block; width: 54px; height: 4px; margin: 14px auto 0;
  border-radius: 999px; background: var(--l1-rojo);
}

/* ═══ 1 · Hero con buscador en cápsula ═══ */
.l1-hero {
  position: relative; min-height: 560px; display: flex; align-items: center;
  background: linear-gradient(180deg, rgba(12, 12, 20, .82), rgba(12, 12, 20, .62)),
    radial-gradient(1200px 420px at 20% 0%, #3b1024, transparent),
    var(--l1-hero-imagen, none) center/cover no-repeat, #101018;
  color: #fff; padding: 96px 0 72px;
}
.l1-hero__contenido { position: relative; z-index: 2; text-align: center; }
.l1-hero h1 { font-size: clamp(1.9rem, 4.4vw, 3.2rem); line-height: 1.12; font-weight: 800; margin: 0 0 14px; }
.l1-hero__sub { font-size: clamp(1rem, 1.6vw, 1.15rem); opacity: .88; margin: 0 auto 30px; max-width: 640px; }

.l1-buscador {
  display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 10px; align-items: center;
  background: #fff; border-radius: 999px; padding: 10px; box-shadow: var(--l1-sombra);
}
.l1-buscador__campo { display: flex; align-items: center; gap: 9px; padding: 6px 14px; min-width: 0; }
.l1-buscador__campo + .l1-buscador__campo { border-left: 1px dashed var(--l1-borde); }
.l1-buscador__ico { font-size: 1rem; color: var(--l1-rojo); flex: none; }
.l1-buscador__ico--ia { color: #7c3aed; }
.l1-buscador input, .l1-buscador select {
  border: 0; outline: 0; font: inherit; font-size: .95rem; color: var(--l1-tinta);
  width: 100%; background: transparent;
}
.l1-buscador input::placeholder { color: #9a9ab0; }
.l1-boton-rojo {
  border: 0; cursor: pointer; background: var(--l1-rojo); color: #fff; font-weight: 700;
  border-radius: 999px; padding: 13px 34px; font-size: .95rem; transition: .15s;
}
.l1-boton-rojo:hover { background: var(--l1-rojo-oscuro); }
.l1-accesos { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; }
.l1-accesos a {
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
  color: #fff; padding: 7px 16px; border-radius: 999px; font-size: .85rem; transition: .15s;
}
.l1-accesos a:hover { background: var(--l1-rojo); border-color: var(--l1-rojo); }

/* ═══ 2 · Categorías populares ═══ */
.l1-categorias__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.l1-cat-card {
  background: #fff; border: 1px solid var(--l1-borde); border-radius: var(--l1-radio);
  padding: 22px 12px 16px; text-align: center; transition: .15s;
}
.l1-cat-card:hover { transform: translateY(-4px); box-shadow: var(--l1-sombra); border-color: #ffd3dc; }
.l1-cat-card__ico {
  width: 46px; height: 46px; margin: 0 auto 10px; display: grid; place-items: center;
  border: 2px solid var(--l1-rojo); border-radius: 50%; color: var(--l1-rojo); font-size: 1.15rem;
}
.l1-cat-card__nombre { display: block; color: var(--l1-tinta); font-weight: 700; font-size: .9rem; }
.l1-cat-card__n {
  display: inline-grid; place-items: center; min-width: 34px; height: 24px; margin-top: 10px;
  padding: 0 8px; border-radius: 999px; background: #ffe6e6; color: var(--l1-rojo);
  font-size: .75rem; font-weight: 800;
}

/* ═══ 3 · Anuncios en tendencia ═══ */
.l1-tendencia__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.l1-anuncio {
  background: #fff; border: 1px solid var(--l1-borde); border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column; transition: .15s;
}
.l1-anuncio:hover { transform: translateY(-4px); box-shadow: var(--l1-sombra); }
.l1-anuncio__media { position: relative; aspect-ratio: 4 / 3; background: #ececf3; }
.l1-anuncio__media img { width: 100%; height: 100%; object-fit: cover; }
.l1-anuncio__badges { position: absolute; inset: 12px 12px auto; display: flex; gap: 8px; flex-wrap: wrap; }
.l1-chip {
  font-size: .68rem; font-weight: 700; padding: 5px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .94); color: var(--l1-tinta); box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
.l1-chip--abierto { background: var(--l1-verde); color: #fff; }
.l1-chip--cerrado { background: #ef4444; color: #fff; }
.l1-chip--destacado {
  position: absolute; inset: auto auto 12px 12px; background: linear-gradient(135deg, #fdaf00, #e0a52a);
  color: #4a3200;
}
.l1-anuncio__cuerpo { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.l1-anuncio__titulo { font-size: 1.02rem; font-weight: 800; color: var(--l1-tinta); margin: 0; }
.l1-anuncio__verif { color: var(--l1-rojo); font-weight: 700; }
.l1-anuncio__lugar { font-size: .84rem; color: var(--l1-suave); display: flex; gap: 6px; align-items: center; }
.l1-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.l1-etiqueta {
  background: #ffe6e6; color: #c2415d; font-size: .7rem; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
}
.l1-amenidades { display: flex; gap: 12px; color: var(--l1-suave); font-size: .9rem; }
.l1-anuncio__pie {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px dashed var(--l1-borde); padding-top: 10px; margin-top: 4px; font-size: .85rem;
}
.l1-estrellas { color: var(--l1-dorado); font-weight: 800; }
.l1-precio { color: var(--l1-tinta); font-weight: 700; }

/* ═══ 4 · Ofertas locales / cupones ═══ */
.l1-pestanas { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 24px; }
.l1-pestana {
  border: 1px solid var(--l1-borde); background: #fff; color: var(--l1-texto);
  border-radius: 999px; padding: 9px 20px; font-size: .86rem; font-weight: 700; cursor: pointer;
}
.l1-pestana--activa { background: var(--l1-tinta); border-color: var(--l1-tinta); color: #fff; }
.l1-cupones__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.l1-cupon {
  background: #fff; border: 1px solid var(--l1-borde); border-radius: 18px; padding: 18px;
  display: flex; flex-direction: column; gap: 10px; position: relative;
}
.l1-cupon__fuego {
  position: absolute; top: -12px; right: 14px; background: var(--l1-rojo); color: #fff;
  font-weight: 800; font-size: .78rem; padding: 6px 12px; border-radius: 999px;
}
.l1-cupon__negocio { font-weight: 800; color: var(--l1-tinta); }
.l1-cupon__desc { font-size: .86rem; color: var(--l1-suave); min-height: 40px; }
.l1-cupon__fecha { font-size: .76rem; color: var(--l1-suave); }
.l1-cupon__codigo {
  border: 2px dashed var(--l1-rojo); color: var(--l1-rojo); border-radius: 10px;
  padding: 10px; text-align: center; font-weight: 800; letter-spacing: .12em; background: #fff5f5;
}
.l1-cupon__boton {
  border: 1px solid var(--l1-rojo); background: #fff; color: var(--l1-rojo);
  border-radius: 999px; padding: 9px; font-weight: 700; cursor: pointer; font-size: .85rem;
}
.l1-cupon__boton:hover { background: var(--l1-rojo); color: #fff; }
.gdm-cupon-aviso {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  background: var(--l1-tinta); color: #fff; padding: 12px 22px; border-radius: 999px;
  font-size: .88rem; opacity: 0; pointer-events: none; transition: .2s; z-index: 1200;
}
.gdm-cupon-aviso--visible { opacity: 1; transform: translate(-50%, 0); }
.gdm-cupon-aviso--err { background: var(--l1-rojo); }

/* ═══ 5 · Cómo funciona ═══ */
.l1-como__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.l1-paso {
  background: #fff; border: 1px solid var(--l1-borde); border-radius: 20px;
  padding: 28px 24px; position: relative; overflow: hidden;
}
.l1-paso__n {
  position: absolute; top: 6px; right: 16px; font-size: 4.2rem; font-weight: 800;
  color: rgba(249, 25, 66, .10); line-height: 1;
}
.l1-paso__ico {
  width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px;
  background: #ffe6e6; font-size: 1.5rem; margin-bottom: 14px; position: relative;
}
.l1-paso__badge {
  position: absolute; right: -26px; bottom: -10px; background: #fff; border: 1px solid var(--l1-borde);
  border-radius: 999px; font-size: .66rem; font-weight: 700; padding: 4px 9px; color: var(--l1-tinta);
  box-shadow: var(--l1-sombra); white-space: nowrap;
}
.l1-paso h3 { margin: 0 0 8px; color: var(--l1-tinta); font-size: 1.06rem; }
.l1-paso p { margin: 0 0 14px; font-size: .9rem; }
.l1-enlace-rojo { color: var(--l1-rojo); font-weight: 700; font-size: .88rem; }

/* ═══ 6-9 · Bloques asimétricos ═══ */
.l1-bloque { padding: 46px 0; }
.l1-bloque__inner {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center;
  background: #fff; border-radius: 26px; padding: 38px; border: 1px solid var(--l1-borde);
}
.l1-bloque:nth-of-type(even) .l1-bloque__inner { grid-template-columns: .95fr 1.05fr; }
.l1-bloque:nth-of-type(even) .l1-bloque__texto { order: 2; }
.l1-bloque--rosa .l1-bloque__inner { background: #fff0f0; border-color: #ffd9d9; }
.l1-bloque--crema .l1-bloque__inner { background: #fff7e6; border-color: #ffe9c2; }
.l1-bloque--menta .l1-bloque__inner { background: #e9fbf3; border-color: #c9f3e0; }
.l1-bloque--lavanda .l1-bloque__inner { background: #f1edff; border-color: #ded6ff; }
.l1-bloque__badge {
  display: inline-block; font-size: .7rem; letter-spacing: .16em; font-weight: 800;
  color: var(--l1-rojo); background: #fff; border-radius: 999px; padding: 6px 14px; margin-bottom: 14px;
}
.l1-bloque h2 { margin: 0 0 12px; color: var(--l1-tinta); font-size: clamp(1.35rem, 2.3vw, 1.9rem); }
.l1-bloque p { margin: 0 0 20px; font-size: .95rem; }
.l1-botones { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.l1-boton-fantasma { color: var(--l1-tinta); font-weight: 700; font-size: .9rem; text-decoration: underline; }
.l1-mini {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px;
}
.l1-mini span {
  background: #fff; border-radius: 999px; padding: 7px 15px; font-size: .78rem; font-weight: 700;
  color: var(--l1-tinta); box-shadow: 0 4px 14px rgba(22, 22, 29, .07);
}
.l1-dias { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.l1-dias b {
  background: #fff; border-radius: 8px; padding: 7px 9px; font-size: .68rem; color: var(--l1-suave);
}
.l1-testimonio {
  background: #fff; border-radius: 16px; padding: 18px; box-shadow: var(--l1-sombra); font-size: .88rem;
}
.l1-testimonio .l1-estrellas { display: block; margin-bottom: 8px; }

/* ═══ 10 · Casos de éxito ═══ */
.l1-exito__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.l1-exito-card {
  background: #fff; border: 2px solid var(--l1-borde); border-radius: 20px; padding: 24px;
}
.l1-exito-card:hover { border-color: var(--l1-tinta); }
.l1-exito-card__metrica { font-size: 1.5rem; font-weight: 800; color: var(--l1-rojo); }
.l1-exito-card h3 { margin: 8px 0; color: var(--l1-tinta); font-size: 1rem; }
.l1-exito-card p { margin: 0 0 12px; font-size: .88rem; }

/* ═══ 11 · Anuncios (ads, spec 013/016) ═══ */
.l1-home .gdm-ads-strip { width: min(1180px, 100% - 32px); margin: 22px auto 0; }
.l1-home .gdm-ads-banner { border-radius: 16px; }

/* ═══ 12 · Asistente flotante ═══ */
.l1-asistente {
  position: fixed; right: 18px; bottom: 18px; z-index: 1100;
  background: var(--l1-rojo); color: #fff; border: 0; cursor: pointer;
  border-radius: 999px; padding: 13px 20px; font-weight: 700; font-size: .88rem;
  box-shadow: 0 12px 30px rgba(249, 25, 66, .35);
}
.l1-asistente:hover { background: var(--l1-rojo-oscuro); }

/* ═══ Contador de visitas (spec 019) ═══ */
.l1-hero .gdm-visitas {
  display: inline-flex; align-items: center; gap: .4em; background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .24); border-radius: 999px; padding: .35em .9em;
  font-size: .82rem; margin: 0 0 18px;
}
.l1-hero .gdm-visitas b { color: #fff; }

/* ═══ Responsivo ═══ */
@media (max-width: 1024px) {
  .l1-categorias__grid { grid-template-columns: repeat(4, 1fr); }
  .l1-tendencia__grid, .l1-como__grid, .l1-exito__grid { grid-template-columns: repeat(2, 1fr); }
  .l1-cupones__grid { grid-template-columns: repeat(2, 1fr); }
  .l1-bloque__inner,
  .l1-bloque:nth-of-type(even) .l1-bloque__inner { grid-template-columns: 1fr; }
  .l1-bloque:nth-of-type(even) .l1-bloque__texto { order: 0; }
}

@media (max-width: 720px) {
  .l1-hero { min-height: 480px; padding: 76px 0 56px; }
  .l1-buscador { grid-template-columns: 1fr; border-radius: 22px; }
  .l1-buscador__campo + .l1-buscador__campo { border-left: 0; border-top: 1px dashed var(--l1-borde); }
  .l1-boton-rojo { width: 100%; }
  .l1-categorias__grid { grid-template-columns: repeat(2, 1fr); }
  .l1-tendencia__grid, .l1-como__grid, .l1-cupones__grid, .l1-exito__grid { grid-template-columns: 1fr; }
  .l1-bloque__inner { padding: 26px 20px; }
  /* Invariante 4 de la spec: en móvil el asistente no resta área de lectura. */
  .l1-asistente { right: 12px; bottom: 12px; padding: 10px 14px; font-size: .8rem; }
}