/* marca.css — índice de marcas y página de ecosistema. Contrato: ../../CONTRATO-DISENO.md */

/* fureone.css solo pone overflow-x:hidden en <body>, no en <html>; se refuerza aquí por
   seguridad (ver el mismo comentario y el reporte de entrega en categoria.css). */
html{overflow-x:hidden}

/* índice de todas las marcas */
.indexhead{padding:44px 0 8px}
.indexhead h1{font-size:clamp(28px,4vw,44px);letter-spacing:-.02em;line-height:1.08}
.indexhead .lead{color:var(--fu-muted);margin-top:12px;max-width:44em;font-size:16px}

.brands-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.bcard{background:var(--fu-surface);border:1px solid var(--fu-line);border-radius:var(--fu-radius-sm);padding:22px 20px;display:flex;flex-direction:column;gap:6px;transition:border-color .2s ease,background .2s ease}
.bcard:hover{border-color:var(--fu-line-2);background:var(--fu-surface-2)}
.bcard b{font-size:17px;letter-spacing:-.01em}
.bcard small{color:var(--fu-faint);font-size:13px}

/* encabezado de marca */
.brandhead{padding:48px 0 8px}
.brandhead h1{font-family:var(--fu-f-brand);font-size:clamp(34px,7vw,84px);letter-spacing:.01em;line-height:1;margin-top:16px}
.brandhead .lead{color:var(--fu-muted);margin-top:18px;max-width:40em;font-size:17px}

.notices{display:grid;gap:10px;margin-top:26px;max-width:60em}
.notice{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--fu-line-2);border-radius:var(--fu-radius-sm);padding:14px 16px;font-size:13.5px;color:var(--fu-muted)}
.notice .ico{width:18px;height:18px;color:var(--fu-text);flex:0 0 auto;margin-top:1px}
.notice b{color:var(--fu-text)}

/* productos agrupados por familia */
.fam-section{padding:36px 0}
.fam-section+.fam-section{border-top:1px solid var(--fu-line)}
.fam-section h2{font-size:21px;letter-spacing:-.01em;margin-bottom:18px}

/* "todo el ecosistema funciona junto" */
.ecoblock{border:1px dashed var(--fu-line-2);border-radius:var(--fu-radius);padding:28px}
.ecoblock h2{font-size:22px;margin-bottom:10px}
.ecoblock p{color:var(--fu-muted);max-width:56em}

/* llamada a asesoría por WhatsApp */
.askblock{border-radius:var(--fu-radius);background:var(--fu-bg-2);border:1px solid var(--fu-line);padding:28px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.askblock p{color:var(--fu-muted);max-width:40em}
.askblock b{color:var(--fu-text)}

@media (max-width:1060px){
  .brands-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .brands-grid{grid-template-columns:repeat(2,1fr)}
  .askblock{flex-direction:column;align-items:start}
}