/* ============================================================
   LUZ — la cara pública (la portada y la tienda del vendedor)
   ------------------------------------------------------------
   Se carga DESPUÉS de base.css y sólo actúa dentro de
   <body class="luz">, así que no toca ni la app del vendedor ni
   el panel. La foto real del artículo es el fondo; encima va
   vidrio sobre un fondo con luz.

   La regla que costó caro en otra app: el adorno NUNCA puede
   esconder el contenido. La clase que desvanece la pone el JS
   (si el JS falla se ve todo) y hay un plazo que destapa pase
   lo que pase. Está en js/api.js → apareceAlBajar().
   ============================================================ */

/* ---------- Portada con la foto de fondo ---------- */
.luz .portada {
  position: relative; isolation: isolate;
  min-height: min(78vh, 620px);
  display: flex; align-items: flex-end;
  padding: 120px 0 96px;
  overflow: hidden;
}
.luz .portada .foto {
  position: absolute; inset: 0; z-index: -1;
  background-size: cover; background-position: center;
  filter: saturate(1.08) contrast(1.04);
}
/* El velo hace legible el título; por eso NADA que deba leerse
   dentro de la foto (precio, insignias) cuelga de la foto.
   Dos capas: (1) el oscurecido cálido —café pluma, no el verde de
   la paleta vieja, que teñía de verde la foto de la tienda— y
   (2) un desvanecido al crema del fondo en el último tramo, para
   que la portada NO termine en un corte duro contra la página. */
.luz .portada .velo {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(to top, var(--papel) 0, rgba(244,250,251,0) 130px),
    linear-gradient(185deg, rgba(4,24,47,.16) 0%, rgba(4,24,47,.46) 52%, rgba(4,24,47,.74) 100%);
}
.luz .portada .dentro { position: relative; z-index: 1; color: #fff; }
.luz .portada h1 {
  font-size: clamp(38px, 6vw, 74px); color: #fff; max-width: 16ch;
  text-shadow: 0 2px 30px rgba(0,0,0,.35);
}
.luz .portada .lema { font-size: clamp(17px, 2.2vw, 21px); max-width: 46ch; margin-top: 14px; color: rgba(255,255,255,.92); }
.luz .portada .antetitulo {
  display: inline-block; margin-bottom: 14px; font-size: 12px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.86);
}
.luz .portada .acciones { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* La ficha del vendedor dentro de la portada: escudo redondo + nombre +
   dirección. Se pone ANTES del título para que el comprador identifique la
   tienda de un vistazo. Antes esta información sólo aparecía hasta abajo. */
.luz .portada .identidad {
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
  padding: 10px 14px 10px 10px; border-radius: 999px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
  max-width: max-content;
}
.luz .portada .identidad .escudo {
  width: 52px; height: 52px; border-radius: 18px; flex: none; overflow: hidden;
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 22px;
  background: linear-gradient(145deg, var(--acento-claro), var(--acento-hondo));
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
}
.luz .portada .identidad .escudo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.luz .portada .identidad .datos { color: #fff; display: flex; flex-direction: column; line-height: 1.15; }
.luz .portada .identidad .datos b { font-size: 17px; }
.luz .portada .identidad .datos span { font-size: 13.5px; opacity: .9; margin-top: 2px; }

/* Las cifras de vidrio, montadas sobre el borde de la portada. */
.luz .cifras {
  position: relative; z-index: 2; margin: -46px auto 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px;
}
.luz .cifras .cifra {
  background: var(--vidrio-fuerte); border: 1px solid var(--vidrio-borde);
  border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--sombra-2);
  backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
}
.luz .cifras .cifra b { display: block; font-size: 27px; letter-spacing: -.03em; }
.luz .cifras .cifra span { font-size: 13.5px; color: var(--suave); font-weight: 600; }

/* ---------- Secciones ---------- */
.luz .seccion { padding: 56px 0; }
.luz .seccion h2 { font-size: clamp(26px, 3.4vw, 38px); }
.luz .seccion .antetitulo {
  display: inline-block; margin-bottom: 10px; font-size: 12px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--acento-hondo);
}
.luz .seccion > p { max-width: 60ch; color: var(--suave); font-size: 17px; }

/* ---------- Las tarjetas de artículo: la foto grande arriba ---------- */
.luz .rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 20px; margin-top: 26px; }
.luz .articulo {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--sombra-1);
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex; flex-direction: column;
}
.luz .articulo:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); }
.luz .articulo .imagen { position: relative; aspect-ratio: 4/3; background: linear-gradient(145deg, var(--luz-campo), var(--luz-sol)); }
.luz .articulo .imagen img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.08) contrast(1.04); }
/* El video de un artículo ocupa el mismo hueco que la foto: si midiera distinto,
   la rejilla se escalonaría en cuanto un vendedor subiera uno. Fondo negro para
   que las barras de un video vertical no se vean como un error. */
.luz .articulo .imagen video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.luz .articulo .cuerpo { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.luz .articulo h3 { font-size: 18.5px; }
.luz .articulo .lana { font-size: 25px; font-weight: 800; color: var(--acento-hondo); letter-spacing: -.03em; }
.luz .articulo .resumen { font-size: 14.5px; color: var(--suave); margin: 0; flex: 1; }
.luz .articulo .btn { margin-top: 6px; }

/* ---------- La ficha del vendedor ---------- */
.luz .quien-vende {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  background: var(--vidrio-fuerte); border: 1px solid var(--vidrio-borde);
  border-radius: var(--r-xl); padding: 22px 24px; box-shadow: var(--sombra-2);
}
.luz .quien-vende .retrato {
  width: 64px; height: 64px; border-radius: 22px; flex: none; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--acento-claro), var(--acento-hondo));
  color: #fff; font-size: 27px; font-weight: 800; box-shadow: var(--brillo);
  overflow: hidden;
}
.luz .quien-vende .retrato img { width: 100%; height: 100%; object-fit: cover; display: block; }
.luz .quien-vende .datos { flex: 1; min-width: 200px; }
.luz .quien-vende .datos b { font-size: 21px; display: block; }

/* ---------- Barra fija del celular ---------- */
.luz .barra-abajo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--vidrio-fuerte); border-top: 1px solid var(--vidrio-borde);
  backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
}
.luz .barra-abajo .btn { width: 100%; }

@media (max-width: 720px) {
  .luz .barra-abajo { display: block; }
  /* body.luz, no «.luz body»: el body ES el que trae la clase. */
  body.luz { padding-bottom: 84px; }
  /* En el celular no van dos botones de WhatsApp: si está la barra fija
     abajo, el de arriba estorba. */
  .luz .quien-vende .btn.wa { display: none; }
}

/* ---------- Pie ---------- */
.luz .pie { padding: 40px 0 60px; color: var(--suave); font-size: 13.5px; border-top: 1px solid var(--linea); margin-top: 40px; }

/* ============================================================
   El CATÁLOGO de los demás vendedores
   ------------------------------------------------------------
   Va dentro de la página de cada quien, hasta abajo: primero lo
   que vende esta persona —a eso vino el comprador— y sólo
   después «y si no, mira a los demás». Al revés, la página se
   volvería un directorio con una tienda pegada.

   Deliberadamente MÁS CHICO que las tarjetas de artículo: es un
   apoyo, no la carne de la página. Y no lleva teléfonos: lleva
   el enlace. Quien quiera contactar, entra a esa página y ahí
   está su botón.
   ============================================================ */
.luz .catalogo {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px; margin-top: 24px;
}
.luz .tienda-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--sombra-1);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.luz .tienda-card:hover {
  transform: translateY(-3px); box-shadow: var(--sombra-2); border-color: var(--acento);
}
.luz .tienda-card .imagen {
  aspect-ratio: 16/10; background: linear-gradient(145deg, var(--luz-campo), var(--luz-sol));
  background-size: cover; background-position: center; position: relative;
}
/* El logo redondo montado en la esquina de la foto: es lo que hace que se
   reconozca a la persona de un vistazo, igual que en su propia ficha. */
.luz .tienda-card .logo {
  position: absolute; left: 12px; bottom: -18px; width: 44px; height: 44px;
  border-radius: 15px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--acento-claro), var(--acento-hondo));
  color: #fff; font-weight: 800; font-size: 19px;
  border: 3px solid var(--blanco); box-shadow: var(--sombra-1);
}
.luz .tienda-card .logo img { width: 100%; height: 100%; object-fit: cover; }
.luz .tienda-card .cuerpo { padding: 26px 14px 14px; display: flex; flex-direction: column; gap: 3px; }
.luz .tienda-card b { font-size: 16px; line-height: 1.25; }
.luz .tienda-card small { font-size: 13px; color: var(--suave); }
.luz .tienda-card .lana { font-size: 15px; font-weight: 800; color: var(--acento-hondo); margin-top: 4px; }

/* La tarjeta del catálogo dejó de ser UN enlace (2026-09-12): ahora lleva
   botones de WhatsApp y «Cómo llegar», y un botón dentro de un <a> se pelea con
   él por el clic. La mitad de arriba —foto, nombre, ciudad— sigue siendo el
   enlace a su página; abajo van los contactos. Al negocio de SÓLO CATÁLOGO la
   parte de arriba le sale como <div> sin liga, porque su página está cerrada. */
.luz .tienda-card .tapa {
  display: block;
  color: inherit;
  text-decoration: none;
}
.luz .tienda-card .contactos {
  display: flex;
  gap: 8px;
  padding: 0 14px 14px;
  flex-wrap: wrap;
}
.luz .tienda-card .contactos .btn { flex: 1 1 auto; justify-content: center; }
/* Sin contactos la fila no debe dejar un hueco bajo el nombre. */
.luz .tienda-card .contactos:empty { display: none; }

/* ============================================================
   El DIRECTORIO de servicios (plomeros, llanteras, carpinteros)
   ------------------------------------------------------------
   Aquí SÍ va el teléfono a la vista y el botón grande: quien
   entra tiene una fuga de agua, no ganas de navegar.
   ============================================================ */
.luz .buscador {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px;
  background: var(--vidrio-fuerte); border: 1px solid var(--vidrio-borde);
  border-radius: var(--r-xl); padding: 14px; box-shadow: var(--sombra-2);
}
.luz .buscador input, .luz .buscador select {
  flex: 1 1 200px; width: auto; font-size: 17px; padding: 14px 16px;
}
.luz .buscador .btn { flex: none; }

/* En un celular las tres piezas NO caben en una fila: el «Buscar» se cae solo
   a un renglón, se queda chiquito a la izquierda y parece un descuido. Abajo
   de 640 px se apilan y cada una ocupa todo el ancho — que además es lo que se
   puede tocar sin fallar. */
@media (max-width: 640px) {
  .luz .buscador { flex-direction: column; }
  .luz .buscador input, .luz .buscador select, .luz .buscador .btn {
    flex: none; width: 100%;
  }
}

/* Los oficios, como botones: la mitad de la gente no sabe qué escribir. */
.luz .oficios { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.luz .oficios button {
  border: 1px solid var(--linea); background: var(--blanco); color: var(--tinta);
  font: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer;
  padding: 9px 14px; border-radius: 999px; display: flex; align-items: center; gap: 7px;
}
.luz .oficios button:hover { border-color: var(--acento); color: var(--acento-hondo); }
.luz .oficios button[aria-pressed="true"] {
  background: var(--acento); border-color: var(--acento); color: #fff; box-shadow: var(--brillo);
}
.luz .oficios button small { font-weight: 600; opacity: .7; }

.luz .servicios { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 26px; }
.luz .servicio {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-lg);
  padding: 18px 20px; box-shadow: var(--sombra-1);
  display: flex; flex-direction: column; gap: 6px;
}
.luz .servicio.destacado { border-color: var(--acento); box-shadow: var(--brillo); }
.luz .servicio .arriba { display: flex; gap: 12px; align-items: center; }
.luz .servicio .icono {
  width: 46px; height: 46px; border-radius: var(--r-md); flex: none;
  display: grid; place-items: center; font-size: 24px; background: var(--acento-tenue);
}
/* El logo que sube el proveedor. Recuadro del mismo tamaño que el ícono
   para que las tarjetas de negocios con y sin logo se vean parejas. */
.luz .servicio .logo-neg {
  width: 46px; height: 46px; border-radius: var(--r-md); flex: none;
  object-fit: cover; background: var(--acento-tenue);
}
.luz .servicio h3 { font-size: 18.5px; line-height: 1.2; }
.luz .servicio .oficio { font-size: 13px; color: var(--acento-hondo); font-weight: 700; }
.luz .servicio p { font-size: 14.5px; color: var(--suave); margin: 0; }
.luz .servicio .donde { font-size: 14px; color: var(--suave); }
.luz .servicio .botones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.luz .servicio .botones .btn { flex: 1 1 auto; }

.luz .nada {
  text-align: center; padding: 40px 20px; color: var(--suave);
  background: var(--blanco); border: 1px dashed var(--linea); border-radius: var(--r-lg);
  margin-top: 24px;
}

/* ================================================================
   Corazon (favorito) y estrellas (calificacion). Van en tienda.html,
   servicio.html, favoritos.html y el catalogo. Se dibujan con el
   modulo js/comprador.js.
   ================================================================ */
/* La fila de acciones de un articulo: preguntar por WhatsApp y guardarlo en la
   libreta. En un telefono se apilan; en pantalla grande van a la par. */
.luz .acciones-articulo { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.luz .acciones-articulo .btn.wa { flex: 1; min-width: 150px; }
.btn-guardar { white-space: nowrap; }
.btn-guardar.on { background: #fee2e2; border-color: #fecaca; color: #b91c1c; }

/* La libreta: lo que el comprador guardo para comprar despues. Lo vendido no
   se esconde, se apaga — que se haya agotado es justo lo que vino a saber. */
.guardado { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: start;
  background: #fff; border: 1px solid var(--linea, #e6eef0); border-radius: var(--r-md, 14px);
  padding: 12px; margin-bottom: 12px; }
.guardado .foto { width: 96px; height: 96px; border-radius: 10px; object-fit: cover; background: #eef3f5; }
.guardado.agotado .foto { filter: grayscale(1); opacity: .6; }
.guardado .lana { font-size: 20px; font-weight: 800; color: var(--acento-hondo, #0B6E7F); }
.guardado .botones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.guardado .parecidos-caja { margin-top: 10px; }

.btn-favorito {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--r-lg);
  background: rgba(255,255,255,.88); color: var(--tinta);
  border: 1px solid var(--vidrio-borde); font-weight: 700; font-size: 14.5px;
  cursor: pointer; transition: transform .1s, background .15s;
}
.btn-favorito .icono { font-size: 20px; line-height: 1; color: #e11d48; }
.btn-favorito:hover { background: #fff; }
.btn-favorito.en { background: #fee2e2; border-color: #fecaca; }
.btn-favorito.en .icono { color: #dc2626; }
.btn-favorito[disabled] { opacity: .55; cursor: default; }

/* Estrellas de solo lectura (tarjetas). Van en linea con el nombre. */
.estrellas.ro {
  display: inline-flex; align-items: center; gap: 2px;
  vertical-align: middle;
}
.estrellas.ro .cifra {
  margin-left: 6px; font-size: 13px; color: var(--suave); font-weight: 600;
}

/* Estrellas para calificar. Botones grandes, faciles de picar con el dedo. */
.estrellas.edit {
  display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.estrellas.edit .star {
  background: none; border: 0; padding: 4px; cursor: pointer;
  border-radius: 6px; line-height: 0;
}
.estrellas.edit .star:hover { background: rgba(245,179,1,.15); }
.estrellas.edit .star.on svg path { fill: #f5b301; }
.estrellas.edit .star-quitar {
  margin-left: 8px; background: none; border: 0; color: var(--suave);
  font-size: 13px; text-decoration: underline; cursor: pointer;
}
.estrellas.edit .star-quitar:hover { color: var(--tinta); }

/* La caja que envuelve corazon + estrellas cuando van juntos en la ficha. */
.calif-ficha {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--vidrio-fuerte); border: 1px solid var(--vidrio-borde);
  border-radius: var(--r-lg); padding: 14px 18px; margin-top: 18px;
}
.calif-ficha .titulin { font-size: 13.5px; color: var(--suave); font-weight: 700; }
.calif-ficha .promedio { display: flex; align-items: center; gap: 10px; }

/* ================================================================
   La cinta de los AVISOS. Sale debajo del corazon recien prendido
   (js/avisos.js) y, ya fija, arriba de la lista de favoritos.
   Es una oferta, no una alarma: por eso no lleva rojo ni signos de
   admiracion, y el boton de "ahora no" pesa lo mismo que el de si.
   ================================================================ */
.cinta-avisos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 12px; padding: 12px 16px;
  background: var(--vidrio-fuerte); border: 1px solid var(--vidrio-borde);
  border-radius: var(--r-lg);
}
.cinta-avisos.fija { margin-top: 0; }
/* Dentro de la fila de botones de la portada tiene que ocupar SU renglón: si
   no, se acomoda al lado del corazón y queda una tira de dos dedos de ancho. */
.acciones .cinta-avisos { flex: 1 0 100%; }
.cinta-avisos .texto { display: flex; flex-direction: column; gap: 2px; min-width: 12ch; flex: 1 1 22ch; }
/* El color va a la FUERZA. En la portada del vendedor esta cinta cae encima de
   la foto oscura, donde el texto de alrededor es blanco: sin esta línea, el
   título salía blanco sobre el vidrio claro y no se leía. */
.cinta-avisos .texto b { font-size: 15px; color: var(--tinta); }
.cinta-avisos .texto span { font-size: 13.5px; color: var(--suave); line-height: 1.35; }
.cinta-avisos .botones { display: flex; gap: 8px; flex-wrap: wrap; }
.cinta-avisos.listo { background: var(--ok-suave); border-color: #C4E3D0; }