/* ==========================================================================
   PLOMART · rejillas de página.

   Los componentes viven en plomart-ds.css. Esto es solo el layout por pantalla,
   portado de los prototipos de diseño con los mismos nombres de clase (`hm-` Home,
   `ct-` catálogo) para que el cotejo contra el diseño sea directo.
   ========================================================================== */

/* --- Home ---------------------------------------------------------------- */
/* Tantas columnas como líneas haya (hoy 4): con 5 fijas quedaba un hueco. */
.hm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.hm-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.hm-feat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.hm-show { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: start; }
.hm-insp { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.hm-insp figure { aspect-ratio: 16/10; }
.hm-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.hm-why > div {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-1);
  background: var(--surface-card);
  transition: box-shadow 180ms var(--ease-out), border-color 180ms var(--ease-out),
              transform 180ms var(--ease-out);
}
.hm-why > div:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: var(--line-strong);
}
.hm-why h3 { margin: 0; font-size: var(--type-h5); }
.hm-why p { margin: 0; font-size: var(--type-body-sm); color: var(--text-secondary); }
.hm-why__icono { color: var(--brass-dark); }
.hm-why .plm-icon { transition: transform 260ms var(--ease-out); }
.hm-why > div:hover .plm-icon { transform: translateY(-3px) scale(1.12); }

.hm-datos { display: grid; gap: 14px; margin-bottom: 28px; }
.hm-datos > div { display: flex; gap: 10px; align-items: flex-start; }
.hm-datos .plm-icon { color: var(--brass-dark); margin-top: 2px; }

@media (max-width: 1023px) {
  /* minmax(0,…): «Impermeabilización» ensanchaba la columna y la página se
     arrastraba de lado en el teléfono. */
  .hm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-why { grid-template-columns: repeat(2, 1fr); }
  .hm-feat { grid-template-columns: repeat(2, 1fr); }
  .hm-show { grid-template-columns: 1fr; gap: var(--sp-6); }
}
@media (max-width: 767px) {
  .hm-why { grid-template-columns: 1fr; }
  .hm-feat { grid-template-columns: 1fr; }
  .hm-insp { grid-template-columns: 1fr; }
}

/* --- Catálogo ------------------------------------------------------------ */
.ct-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 40px; align-items: start; }
.ct-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ct-ficha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.ct-pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ct-barra { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ct-chips {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin-bottom: 18px; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line);
}
.ct-pasos > div {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-1);
}
.ct-pasos h3 { margin: 0; font-size: var(--type-h5); }
.ct-pasos p { margin: 0; font-size: var(--type-body-sm); color: var(--text-secondary); }
.ct-pasos__num {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--type-h4);
  color: var(--brass-dark);
}
.ct-galeria {
  aspect-ratio: 1;
  background: var(--cream-2);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.ct-galeria img { width: 100%; height: 100%; object-fit: cover; }
.ct-ficha__meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.ct-ficha__acciones { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.ct-slot-precio {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--radius-1);
  background: var(--cream-2); padding: 14px 16px; margin-bottom: 22px;
}
.ct-slot-precio b { font-family: var(--font-display); font-size: var(--type-h4); }
.ct-slot-precio span { font-size: var(--type-body-sm); color: var(--text-secondary); }

@media (max-width: 1023px) {
  .ct-layout { grid-template-columns: 1fr; gap: var(--sp-5); }
  .ct-filtros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 20px; align-items: start; }
  .ct-grid { grid-template-columns: repeat(3, 1fr); }
  .ct-ficha { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 767px) {
  .ct-filtros { grid-template-columns: 1fr; }
  .ct-grid { grid-template-columns: repeat(2, 1fr); }
  .ct-pasos { grid-template-columns: 1fr; }
}
/* Extensión del diseño para el breakpoint más chico del DS (360px): dos cards por
   renglón dejan 157px de ancho y el nombre del producto se vuelve ilegible.
   Abajo de 420px va una por renglón. */
@media (max-width: 419px) {
  .ct-grid { grid-template-columns: 1fr; }
}

/* --- Cotización, mayoreo y contacto ------------------------------------- */
.fm-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.fm-caja { border: 1px solid var(--line); border-radius: var(--radius-1); padding: var(--sp-5); }
.fm-caja--ink {
  background: var(--surface-inverse);
  border-color: var(--ink);
  color: var(--text-inverse);
  position: relative;
  overflow: hidden;
}
.fm-caja--ink h2, .fm-caja--ink h3 { color: var(--text-inverse); }
.fm-caja--ink p { color: rgba(255, 255, 255, .78); }
.fm-fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.fm-lista { display: grid; gap: 0; }
.fm-renglon {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
}
.fm-renglon__foto { aspect-ratio: 1; background: var(--cream-2); border: 1px solid var(--line); overflow: hidden; }
.fm-renglon__foto img { width: 100%; height: 100%; object-fit: cover; }
/* "Ver el mensaje que se envía": Chala valida el formato 4.3 sin abrir WhatsApp. */
.fm-mensaje {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-4);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  border-radius: var(--radius-1);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--type-caption);
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-x: auto;
}
.fm-puntos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.fm-puntos__num {
  font-family: var(--font-display);
  font-size: var(--type-h3);
  font-weight: var(--weight-semibold);
  color: var(--text-accent-on-dark);
}
@media (max-width: 1023px) {
  .fm-layout { grid-template-columns: 1fr; gap: var(--sp-6); }
  .fm-puntos { grid-template-columns: 1fr; gap: var(--sp-4); }
}
@media (max-width: 767px) {
  .fm-fila { grid-template-columns: 1fr; }
  .fm-renglon { grid-template-columns: 56px minmax(0, 1fr); }
  .fm-renglon > :last-child { grid-column: 1 / -1; }
}

/* --- Showroom ---------------------------------------------------------- */
.sh-galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sh-galeria figure { aspect-ratio: 4/3; }
.sh-galeria figure:first-child { grid-column: 1 / -1; aspect-ratio: 16/7; }
.sh-visita { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.sh-mapa { height: 320px; }
@media (max-width: 1023px) { .sh-visita { grid-template-columns: 1fr; gap: var(--sp-6); } }
@media (max-width: 767px) { .sh-galeria { grid-template-columns: 1fr 1fr; } }

/* --- 404: la "A" triangular ES el cero de 404 -------------------------- */
.e404 { text-align: center; padding-top: var(--sp-11); padding-bottom: var(--sp-9); }
.e404__cifra {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(4.5rem, 3rem + 9vw, 10rem);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}
.e404__cifra img { height: .82em; width: auto; }
.e404__lineas { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-top: var(--sp-8); }
@media (max-width: 1023px) { .e404__lineas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- Portal de mayoreo ------------------------------------------------- */
/* Solo arriba y abajo: `padding: … 0` borraba el margen lateral de .plm-wrap y
   en el teléfono la caja pegaba al borde. */
.pt-login { display: grid; place-items: center; min-height: 68vh; padding-top: var(--sp-9); padding-bottom: var(--sp-9); }
.pt-login__caja { width: min(420px, 100%); }
.pt-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; }
.pt-nav { display: grid; gap: 2px; }
.pt-nav a {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--target-min); padding: 0 var(--sp-3);
  border-radius: var(--radius-1);
  font-size: var(--type-body-sm); text-decoration: none; color: var(--text-body);
  transition: background var(--dur-1) var(--ease-out);
}
.pt-nav a:hover { background: var(--cream-2); }
.pt-nav a[aria-current="page"] { background: var(--cream); font-weight: var(--weight-medium); }
.pt-nav a[aria-current="page"] .plm-icon { color: var(--brass-dark); }
.pt-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pt-kpi { border: 1px solid var(--line); border-radius: var(--radius-1); padding: var(--sp-4); }
.pt-kpi__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--type-h2);
  font-weight: var(--weight-semibold);
  font-variant-numeric: var(--numeric-tabular);
}
.pt-kpi__label { font-size: var(--type-caption); color: var(--text-secondary); }
.pt-tabla { width: 100%; border-collapse: collapse; font-size: var(--type-body-sm); }
.pt-tabla th, .pt-tabla td {
  padding: var(--sp-3);
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.pt-tabla th {
  font-family: var(--font-display);
  font-size: var(--type-h6);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-secondary);
}
.pt-tabla td.plm-tabular { font-variant-numeric: var(--numeric-tabular); }
/* Línea de seguimiento: el paso activo va en brass. */
.pt-pasos { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.pt-pasos li {
  flex: 1 1 130px;
  padding: var(--sp-3);
  border-top: 3px solid var(--line);
  font-size: var(--type-caption);
  color: var(--text-secondary);
}
.pt-pasos li[data-estado="hecho"] { border-top-color: var(--brass-dark); color: var(--text-body); }
.pt-pasos li[data-estado="activo"] {
  border-top-color: var(--brass);
  color: var(--text-body);
  font-weight: var(--weight-semibold);
  background: var(--cream-2);
}
@media (max-width: 1023px) {
  .pt-layout { grid-template-columns: 1fr; gap: var(--sp-5); }
  .pt-nav { grid-auto-flow: column; overflow-x: auto; }
  .pt-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .pt-tabla thead { display: none; }
  .pt-tabla tr { display: grid; gap: var(--sp-1); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
  .pt-tabla td { border: 0; padding: 0; }
}

/* --- Banner del Club en la home ------------------------------------------
   Sobre ink, como la sección de Mayoreo, pero con el bloque de precio a la
   derecha para que el número sea lo primero que se lee en escritorio. En
   celular se apila y el precio queda arriba: es el dato que decide. */
.hm-club { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: var(--sp-7); align-items: center; }
.hm-club__titulo { margin: var(--sp-2) 0 var(--sp-3); font-size: var(--type-h2); color: var(--text-inverse); }
.hm-club__sub { margin: 0 0 var(--sp-5); color: rgba(255, 255, 255, .78); max-width: 54ch; }
.hm-club__niveles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.hm-club__niveles > div { border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius-md, 10px); padding: var(--sp-4); }
.hm-club__nivel-socio { border-color: rgba(210, 172, 111, .5) !important; background: rgba(210, 172, 111, .10); }
.hm-club__nivel { display: block; font-size: var(--type-caption); color: rgba(255, 255, 255, .6); margin-bottom: 2px; }
.hm-club__niveles b { display: block; color: var(--brass); font-size: var(--type-h5, 18px); margin-bottom: 6px; }
.hm-club__niveles p { margin: 0; font-size: var(--type-body-sm); color: rgba(255, 255, 255, .74); }
.hm-club__acciones { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.hm-club__precio { border: 1px solid rgba(210, 172, 111, .38); border-radius: var(--radius-md, 10px); padding: var(--sp-6); text-align: center; background: rgba(210, 172, 111, .07); }
.hm-club__monto { margin: var(--sp-2) 0 0; font-size: clamp(48px, 7vw, 76px); line-height: 1; color: var(--brass); font-weight: 700; }
.hm-club__periodo { margin: 6px 0 var(--sp-4); color: rgba(255, 255, 255, .72); font-size: var(--type-body-sm); }
.hm-club__nota { margin: 0; padding-top: var(--sp-4); border-top: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .66); font-size: var(--type-caption); }
/* La condición de membresía tiene que ser legible, no letra chiquita escondida:
   la LFPC pide que la publicidad del precio de socio traiga visible que
   requiere membresía. */
.hm-club__legal { margin: var(--sp-6) 0 0; color: rgba(255, 255, 255, .58); font-size: var(--type-caption); max-width: 72ch; }

@media (max-width: 860px) {
  .hm-club { grid-template-columns: 1fr; gap: var(--sp-5); }
  .hm-club__precio { order: -1; }
  .hm-club__niveles { grid-template-columns: 1fr; }
}