/* ZOHMA IMI - style.css - BEM & variables */
:root{
  --color-bg:#FFFFFF;
  --color-brand:#F97316; /* naranja corporativo */
  --color-text:#1F2937; /* antracita */
  --color-muted:#374151;
  --color-surface:#F3F4F6;
  --color-accent:#1E3A8A; /* azul técnico */
  --radius: 16px;
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --maxw: 1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--color-text); background:var(--color-bg); line-height:1.6;
}
img{max-width:100%; height:auto}
.container{max-width:var(--maxw); margin:auto; padding:0 var(--space-2)}
.btn{display:inline-block; padding:.75rem 1.25rem; border-radius:999px; text-decoration:none; font-weight:600}
.btn--primary{background:var(--color-brand); color:#fff}
.btn--ghost{border:2px solid var(--color-brand); color:var(--color-brand); background:transparent}
.section{padding: clamp(3rem, 6vw, 6rem) 0}
.section--alt{background:var(--color-surface)}
h1,h2,h3{line-height:1.2; margin:.2em 0 .4em}
h1{font-size:clamp(2rem, 3.2vw, 3rem)}
h2{font-size:clamp(1.5rem, 2.4vw, 2rem)}
h3{font-size:clamp(1.2rem, 2vw, 1.4rem)}
/* Header */
.header{position:sticky; top:0; background:#fff; border-bottom:1px solid #e5e7eb; z-index:50}
.header__wrap{display:flex; align-items:center; justify-content:space-between; padding:.75rem 0}
.header__brand{display:flex; align-items:center; gap:.75rem}
.header__brand img{width:40px; height:40px}
.nav{display:flex; gap:1rem}
.nav a{color:var(--color-muted); text-decoration:none; font-weight:600}
.nav a:hover, .nav a:focus{color:var(--color-brand)}
/* Hero */
.hero{display:grid; grid-template-columns: 1.2fr .8fr; gap:var(--space-4); align-items:center; padding: clamp(2rem, 4vw, 4rem) 0}
.hero__badge{display:inline-flex; align-items:center; gap:.5rem; padding:.25rem .75rem; border-radius:999px; background:var(--color-surface); color:var(--color-muted); font-weight:600}
.hero__title strong{color:var(--color-brand)}
.hero__panel{background:linear-gradient(180deg, #fff, var(--color-surface)); border-radius:var(--radius); padding:var(--space-3); border:1px solid #e5e7eb}
@media (max-width: 900px){ .hero{grid-template-columns:1fr} }
/* Cards */
.grid{display:grid; gap:var(--space-3)}
.grid--3{grid-template-columns: repeat(3, 1fr)}
.grid--2{grid-template-columns: repeat(2, 1fr)}
@media (max-width: 900px){ .grid--3, .grid--2{grid-template-columns:1fr} }
.card{background:#fff; border:1px solid #e5e7eb; border-radius:var(--radius); padding:var(--space-3)}
.card h3{margin-top:0}
.icon{width:28px; height:28px}
.badge{display:inline-block; padding:.25rem .6rem; border-radius:.4rem; background:var(--color-surface); color:var(--color-muted); font-weight:600; font-size:.85rem}
/* Services list */
.services__item{display:flex; gap:1rem; align-items:flex-start}
.services__item svg{flex:0 0 28px}
/* Contact */
.form{display:grid; gap:1rem}
.form__row{display:grid; gap:1rem; grid-template-columns:1fr 1fr}
@media (max-width: 800px){ .form__row{grid-template-columns:1fr} }
input, select, textarea{width:100%; padding:.75rem; border:1px solid #d1d5db; border-radius:.5rem; font:inherit}
input:focus, select:focus, textarea:focus{outline:2px solid var(--color-brand); border-color:var(--color-brand)}
.footer{background:#0b0d12; color:#cbd5e1; padding:2rem 0}
.footer a{color:#e5e7eb; text-decoration:none}
.footer a:hover{color:#fff}
/* Skip link */
.skip-link{position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:1rem; top:1rem; width:auto; height:auto; background:#000; color:#fff; padding:.5rem 1rem; z-index:1000}