/* LA PORTADA (`web/inicio.blade.php`; T6a del producto, `paginas/portada.card.html` del diseño): lo que es de la PÁGINA
   —la rejilla y los huecos de cada pieza, los `.q*` del diseño— y no de un componente (esos viven en `entradas.css`).
   Se carga después de `entradas.css`. */

/* Pieza 1: la cabecera, con 40px debajo (el reparto sube hasta ella). */
.pj-sec--top.pj-q1{padding-bottom:40px}

/* Pieza 2: el reparto. Tres puertas en fila; por debajo de 900px, una columna (cada puerta es entonces una fila). */
.pj-sec--reparto{padding-top:clamp(24px,3vw,40px)}
.pj-q2{display:grid;gap:var(--space-8);scroll-margin-top:92px}
.pj-q2__puertas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}
@media (max-width:899px){.pj-q2__puertas{grid-template-columns:minmax(0,1fr);gap:var(--space-4)}}
.pj-q2__bajo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px var(--space-8);padding-top:var(--space-5);border-top:1px solid var(--border-subtle)}
.pj-q2__garantia{flex:1 1 26rem}
.pj-q2__grupos{margin:0;font-family:var(--font-ui);font-size:var(--fs-body-sm);color:var(--text-body);display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}

/* Pieza 3: seis planos (tres por debajo de 1080px; en el móvil, una fila que se desliza con el siguiente asomando). */
.pj-q3{display:grid;gap:var(--space-8);scroll-margin-top:92px}
.pj-q3__planos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-4)}
@media (max-width:1080px){.pj-q3__planos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){
  .pj-q3__planos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);padding-bottom:4px;scrollbar-width:none}
  .pj-q3__planos::-webkit-scrollbar{display:none}
  .pj-q3__planos>figure{flex:0 0 44%;scroll-snap-align:start}
}
.pj-q3__zonas{display:grid;gap:var(--space-5);margin-top:var(--space-8)}
.pj-q3__zt{margin:0;font:var(--type-h3);color:var(--text-strong)}

/* Piezas 4 y 5: la reseña de «También es para ti», al ANCHO de su columna (el owner, 14-10: con poco texto se quedaba estrecha
   —la columna es una rejilla con `justify-items:start` y la tarjeta se encogía a su texto, con un tope de 440 px—). */
.pj-q5__voz{justify-self:stretch;min-width:0}

/* Pieza 6: para tu tranquilidad. */
.pj-q6{display:grid;gap:var(--space-8);scroll-margin-top:92px}

/* Pieza 7: dónde y cuándo; a la derecha, la única caja, «Antes de venir». */
.pj-q7{display:grid;gap:var(--space-8);scroll-margin-top:92px}
.pj-q7__cols{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--space-10);align-items:start}
.pj-q7__cols>*{min-width:0}
@media (max-width:880px){.pj-q7__cols{grid-template-columns:minmax(0,1fr);gap:var(--space-8)}}
.pj-q7__info{display:grid;gap:var(--space-8)}
.pj-q7__bloque{display:grid;gap:11px}
.pj-q7__ovl{font:var(--type-overline);letter-spacing:var(--tracking-overline);color:var(--ink-500)}
.pj-q7__antes{display:grid;gap:var(--space-5);align-content:start;padding:var(--pad-card-lg);background:var(--surface-card);border:var(--border-card);border-radius:var(--r-xl);box-shadow:var(--shadow-xs)}
@media (max-width:640px){.pj-q7__antes{padding:var(--space-5)}}
.pj-q7__antes h3{margin:0;font:var(--type-h3);font-size:1.25rem;color:var(--text-strong)}
.pj-q7__filas{list-style:none;margin:0;padding:0;display:grid}
.pj-q7__filas li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:start;padding:16px 0;border-top:1px solid var(--border-subtle)}
.pj-q7__filas li:first-child{border-top:0;padding-top:4px}
.pj-q7__ic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--bg-brand-soft);color:var(--aqua-700)}
.pj-q7__filas b{display:block;font-family:var(--font-ui);font-size:var(--fs-body);font-weight:var(--fw-bold);line-height:1.35;color:var(--text-strong)}
.pj-q7__t{display:block;margin-top:2px;font-family:var(--font-ui);font-size:var(--fs-body-sm);line-height:var(--lh-body);color:var(--text-body)}
.pj-q7__pr{font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-body);font-variant-numeric:tabular-nums;color:var(--text-strong)}