/* V14 — materiales en 2 filas x 3 columnas con codificación ISO */
.materials-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.material-item{
  position:relative;
  display:grid;
  grid-template-columns:76px 1fr;
  gap:22px;
  min-height:190px;
  padding:30px 28px 28px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.18);
  overflow:hidden;
}
.material-item::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:3px;
  background:var(--material-color);
  opacity:.85;
}
.material-icon{
  width:68px;
  height:68px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid color-mix(in srgb,var(--material-color) 42%, transparent);
  background:color-mix(in srgb,var(--material-color) 8%, transparent);
  color:var(--material-color);
}
.material-icon svg{width:46px;height:46px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.iso-code{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.14em;color:var(--material-color);margin-bottom:8px}
.material-item h3{font-family:'Space Grotesk';font-size:22px;line-height:1.05;margin:0 0 10px}
.material-item p{font-size:12px;line-height:1.6;color:#5d6871;margin:0;max-width:290px}
.material-p{--material-color:#2463ad}
.material-m{--material-color:#d3a900}
.material-n{--material-color:#3e9b52}
.material-item:hover{background:rgba(255,255,255,.42)}
@media(max-width:900px){
  .materials-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .materials-grid{grid-template-columns:1fr}
  .material-item{min-height:170px;grid-template-columns:62px 1fr;gap:16px;padding:24px 18px}
  .material-icon{width:58px;height:58px}
  .material-icon svg{width:39px;height:39px}
}

/* V15 — símbolos químicos / composición básica */
.material-icon{border-radius:0}
.material-icon .chem-svg{width:58px;height:58px;overflow:visible}
.material-icon .chem-svg text{font-family:'Space Grotesk',Arial,sans-serif;font-weight:700;font-size:19px;letter-spacing:-.03em;fill:currentColor;stroke:none}
.material-icon .chem-svg text.atomic{font-size:7px;letter-spacing:.08em;font-weight:600;opacity:.8}

/* V16 — refinamiento de casillas químicas */
.material-icon .chem-svg .element{font-size:25px;font-weight:700;}
.material-icon .chem-svg .element.small{font-size:16px;}
.material-icon .chem-svg .minor{font-size:11px;font-weight:700;fill:currentColor;opacity:.9;}
.material-icon .chem-svg text.atomic{font-size:8px;letter-spacing:.08em;font-weight:700;}


/* V19 — Sectores: cuadrícula limpia + geometría técnica, sin diagonales */
.sectors{
  position:relative;
  overflow:hidden;
  background-color:var(--navy);
  background-image:
    linear-gradient(rgba(155,177,193,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(155,177,193,.055) 1px,transparent 1px);
  background-size:64px 64px;
  background-position:0 0;
  color:#fff;
}
.sectors .section-tag{color:#9eabb5;border-color:rgba(255,255,255,.15)}
.sectors .section-head>p{color:#c2cbd1}
.sectors .sector-grid{border-top:1px solid rgba(255,255,255,.16)}
.sectors .sector-grid div{color:#fff;border-bottom-color:rgba(255,255,255,.16)}
.sectors::before{
  content:"";
  position:absolute;
  width:360px;height:360px;
  right:-115px;top:105px;
  border:1px dashed rgba(190,207,219,.12);
  border-radius:50%;
  box-shadow:0 0 0 24px rgba(190,207,219,.018),0 0 0 72px rgba(190,207,219,.008);
  pointer-events:none;
}
.sectors::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:92px;height:92px;
  border-top:1px solid rgba(190,207,219,.13);
  border-right:1px solid rgba(190,207,219,.13);
  pointer-events:none;
}
.sectors > *{position:relative;z-index:1}
@media(max-width:900px){
  .sectors::before{width:250px;height:250px;right:-105px;top:150px}
  .sectors::after{width:70px;height:70px}
}