/* Estilos propios de la pagina de productos. Antes iban en un
   bloque <style> dentro del HTML; se extrajeron para poder prohibir
   los estilos en linea en la CSP. */
/* Estilos propios de la página de producto */
.phero{position:relative;padding:148px 0 80px;overflow:hidden;color:#B9D2E2;background:linear-gradient(168deg,#071B29 0%,#0A2C42 52%,#0D3A54 100%)}
.phero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);background-size:28px 28px;mask-image:linear-gradient(115deg,transparent 35%,rgba(0,0,0,.8));-webkit-mask-image:linear-gradient(115deg,transparent 35%,rgba(0,0,0,.8));pointer-events:none}
.phero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.phero .eyebrow{background:rgba(255,255,255,.09);color:#7FD4FF}
.phero .eyebrow::before{background:#7FD4FF}
.phero h1{font-size:clamp(2rem,3.7vw,2.85rem);color:#fff;margin-bottom:20px;letter-spacing:-.02em}
.phero h1 span{color:#4FC3F7}
.phero-sub{font-size:1.03rem;max-width:560px;margin-bottom:32px;color:#B9D2E2}
.phero .btn-ghost{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.phero .btn-ghost:hover{border-color:#7FD4FF;color:#7FD4FF}
.phero .chip{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#D9E7F1}
.phero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px}
.phero-scene{position:relative;inset:auto;opacity:1;transform:none;padding:0;display:block;pointer-events:auto}
.phero-scene .s2-doc{box-shadow:0 40px 100px rgba(0,0,0,.5)}
.crumb{position:relative;display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#7FA6BC;margin-bottom:22px}
.crumb a{color:#7FD4FF}
.crumb a:hover{text-decoration:underline}
.feat-icon{width:44px;height:44px;border-radius:12px;background:rgba(23,114,159,.09);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.feat-icon svg{width:22px;height:22px;stroke:var(--blue)}
.pwho{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:760px;margin:0 auto}
.pcard-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.pcard-top .feat-icon{margin-bottom:0}
.pstate{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:4px 11px;white-space:nowrap}
.pstate.ok{color:#1FA84B;background:rgba(40,200,64,.12)}
.pstate.dev{color:#B45309;background:rgba(245,158,11,.16)}
.pcard-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:14px}
.pcard-list li{display:flex;gap:9px;font-size:13.5px;color:var(--body);align-items:flex-start}
.pcard-list svg{width:14px;height:14px;flex:none;margin-top:3px}
.pmore{margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--blue);transition:color .2s ease}
.pmore:hover{color:var(--blue-700)}
.pmore svg{width:15px;height:15px;stroke:currentColor;transition:transform .2s var(--ease-out)}
.pmore:hover svg{transform:translateX(4px)}
@media (max-width:1020px){.phero-grid{grid-template-columns:1fr;gap:48px}}
@media (max-width:640px){.phero{padding:130px 0 70px}.phero-actions .btn{width:100%;justify-content:center}}

/* Encabezados de grupo dentro de la grilla del catalogo. Ocupan la fila
   completa para separar la Suite Municipal del resto de los productos. */
.grupo-cab{grid-column:1/-1;margin:0 0 -8px}
.grupo-cab h2{font-size:1.36rem;margin:0 0 6px;letter-spacing:-.015em}
.grupo-cab p{font-size:14.5px;color:var(--muted);margin:0;max-width:64ch}
.grupo-cab:not(:first-child){border-top:1px solid var(--line);padding-top:34px;margin-top:20px}
@media (max-width:640px){
  .grupo-cab:not(:first-child){padding-top:26px;margin-top:12px}
}


/* Rejilla del catalogo: 6 columnas para que ningun grupo termine con una fila
   a medias. Las cuatro de la Suite Municipal ocupan media fila cada una (2 por
   fila, tarjeta grande: es el grupo insignia) y el resto un tercio (3 por fila).
   Asi 4 = 2x2, 3 = una fila y 6 = dos filas, sin huecos en ninguno. */
.build-grid{grid-template-columns:repeat(6,1fr)}
.build-grid > .build-card{grid-column:span 2}
.build-grid > .build-card.destacada{grid-column:span 3}
.build-grid > .grupo-cab,
.build-grid > .build-card.cta-ancha{grid-column:1 / -1}

@media (max-width:1020px){
  .build-grid{grid-template-columns:repeat(6,1fr)}
  .build-grid > .build-card,
  .build-grid > .build-card.destacada{grid-column:span 3}
  .build-grid > .build-card.cta-ancha{grid-column:1 / -1}
}
@media (max-width:640px){
  .build-grid{grid-template-columns:repeat(6,1fr)}
  .build-grid > .build-card,
  .build-grid > .build-card.destacada{grid-column:span 6}
  .build-grid > .build-card.cta-ancha{grid-column:1 / -1}
}