/* iNET Soluciones Mexicali — hoja de estilos del sitio */
:root{
  --paper:#F5F8F7;
  --white:#FFFFFF;
  --ink:#122629;
  --petrol:#1C3A3E;
  --leaf:#4E9A2B;
  --leaf-dk:#3D7B21;
  --leaf-soft:#E6F0E0;
  --mist:#DCE5E2;
  --slate:#5A6B6D;
  --radius:10px;
  --font:'Public Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--leaf);outline-offset:3px;border-radius:4px}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:6px;z-index:100}
.skip:focus{left:8px}

/* Tipografía */
h1,h2,h3{font-weight:700;letter-spacing:-.015em;line-height:1.15;color:var(--ink)}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem);letter-spacing:-.025em}
h2{font-size:clamp(1.6rem,3vw,2.2rem)}
h3{font-size:1.15rem;letter-spacing:-.005em}
p{max-width:68ch}
.lead{font-size:1.15rem;color:var(--slate);line-height:1.65}
.muted{color:var(--slate)}

/* Botones */
.btn{display:inline-flex;align-items:center;gap:.55rem;font:600 1rem/1 var(--font);padding:.95rem 1.4rem;border-radius:8px;text-decoration:none;border:1.5px solid transparent;transition:background-color .2s,border-color .2s,color .2s}
.btn-pri{background:var(--leaf);color:#fff}
.btn-pri:hover{background:var(--leaf-dk)}
.btn-sec{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-sec:hover{background:var(--ink);color:#fff}
.btn-light{border-color:rgba(255,255,255,.55);color:#fff}
.btn-light:hover{background:#fff;color:var(--ink)}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* Encabezado */
.top{position:sticky;top:0;z-index:50;background:rgba(245,248,247,.92);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--mist)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:42px;height:42px}
.brand b{font-size:1.05rem;letter-spacing:-.01em}
.brand small{display:block;font-size:.78rem;color:var(--slate);font-weight:400;margin-top:-2px}
.menu{display:flex;align-items:center;gap:26px;list-style:none}
.menu a{text-decoration:none;font-weight:500;font-size:.96rem;color:var(--ink)}
.menu a:hover{color:var(--leaf-dk)}
.menu .btn{padding:.7rem 1.1rem;font-size:.94rem}
.menu-tog{display:none;background:none;border:1px solid var(--mist);border-radius:8px;padding:8px 10px;font:600 .9rem var(--font);color:var(--ink);cursor:pointer}
@media(max-width:900px){
  .menu-tog{display:block}
  .menu{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--white);border-bottom:1px solid var(--mist);padding:8px 24px 18px}
  .menu.open{display:flex}
  .menu li a{display:block;padding:12px 0;border-bottom:1px solid var(--mist)}
  .menu li:last-child a{border:0;margin-top:12px;justify-content:center}
}

/* Portada */
.hero{padding:72px 0 56px;border-bottom:1px solid var(--mist);background:linear-gradient(180deg,var(--white) 0%,var(--paper) 100%)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero p.lead{margin:20px 0 30px}
.hero .loc{margin-top:28px;font-size:.92rem;color:var(--slate);display:flex;gap:8px;align-items:center}
.hero .loc svg{flex:none}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:36px}.hero{padding:44px 0}}

/* Diagrama unifilar */
.uni{background:var(--white);border:1px solid var(--mist);border-radius:14px;padding:22px 20px 16px}
.uni svg{width:100%;height:auto}
.uni .ln{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.uni .lg{fill:none;stroke:var(--leaf);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.uni .nd{fill:var(--white);stroke:var(--ink);stroke-width:2}
.uni .dot{fill:var(--leaf)}
.uni text{font:600 12.5px var(--font);fill:var(--ink)}
.uni text.s{font-weight:400;fill:var(--slate);font-size:11.5px}
.uni figcaption{font-size:.85rem;color:var(--slate);margin-top:10px;border-top:1px solid var(--mist);padding-top:10px}
@media(prefers-reduced-motion:no-preference){
  .uni .draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 1.6s ease-out .25s forwards}
  .uni .pop{opacity:0;animation:pop .4s ease-out forwards;animation-delay:var(--d,1.2s)}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{to{opacity:1}}

/* Secciones */
.sec{padding:88px 0}
.sec.white{background:var(--white);border-top:1px solid var(--mist);border-bottom:1px solid var(--mist)}
.sec-head{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:end;margin-bottom:44px}
.sec-head p{color:var(--slate)}
@media(max-width:900px){.sec{padding:60px 0}.sec-head{grid-template-columns:1fr;gap:12px;margin-bottom:28px}}

/* Soluciones agrupadas */
.groups{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
@media(max-width:900px){.groups{grid-template-columns:1fr}}
.group h3{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:2px solid var(--ink);margin-bottom:6px}
.group h3 svg{color:var(--leaf)}
.group ul{list-style:none}
.group li{border-bottom:1px solid var(--mist)}
.group li a,.group li span.it{display:block;padding:14px 0;text-decoration:none}
.group li strong{display:block;font-weight:600}
.group li em{display:block;font-style:normal;color:var(--slate);font-size:.94rem;margin-top:2px}
.group li a strong{color:var(--ink);text-decoration:underline;text-decoration-color:var(--leaf);text-underline-offset:4px;text-decoration-thickness:2px}
.group li a:hover strong{color:var(--leaf-dk)}

/* Sectores */
.sectors{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--mist);border-radius:var(--radius);background:var(--white);overflow:hidden}
.sector{padding:28px 24px}
.sector+.sector{border-left:1px solid var(--mist)}
.sector h3{margin-bottom:8px}
.sector p{color:var(--slate);font-size:.96rem}
@media(max-width:900px){.sectors{grid-template-columns:1fr 1fr}.sector:nth-child(3){border-left:0}.sector:nth-child(n+3){border-top:1px solid var(--mist)}}
@media(max-width:560px){.sectors{grid-template-columns:1fr}.sector+.sector{border-left:0;border-top:1px solid var(--mist)}}

/* Proceso (secuencia real) */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;list-style:none;counter-reset:s}
.steps li{counter-increment:s;padding-top:18px;border-top:2px solid var(--mist)}
.steps li::before{content:counter(s);display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--leaf-soft);color:var(--leaf-dk);font-weight:700;font-size:.9rem;margin-bottom:12px}
.steps li:first-child{border-top-color:var(--leaf)}
.steps p{color:var(--slate);font-size:.96rem;margin-top:6px}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* Banda petróleo: misión y visión */
.band{background:var(--ink);color:#E8EFEE;padding:88px 0}
.band h2{color:#fff;margin-bottom:36px}
.mv{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.mv h3{color:#9FD27F;font-size:1rem;font-weight:600;margin-bottom:10px}
.mv p{font-size:1.18rem;line-height:1.6;color:#E8EFEE}
@media(max-width:900px){.band{padding:60px 0}.mv{grid-template-columns:1fr;gap:28px}}

/* Contacto */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
@media(max-width:900px){.contact{grid-template-columns:1fr}}
.cdata{list-style:none;margin:24px 0}
.cdata li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--mist)}
.cdata li:first-child{border-top:1px solid var(--mist)}
.cdata svg{color:var(--leaf);flex:none;margin-top:3px}
.cdata small{display:block;color:var(--slate);font-size:.85rem}
.cdata a{text-decoration:none;font-weight:600}
.cdata a:hover{color:var(--leaf-dk)}
.map{border:1px solid var(--mist);border-radius:var(--radius);overflow:hidden}
.map iframe{display:block;width:100%;height:240px;border:0}
.form{background:var(--white);border:1px solid var(--mist);border-radius:14px;padding:32px}
.form h3{margin-bottom:6px}
.form>p{color:var(--slate);margin-bottom:22px;font-size:.96rem}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.row{grid-template-columns:1fr}}
.field{margin-bottom:14px}
.field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font:400 1rem var(--font);color:var(--ink);background:var(--paper);border:1px solid #C9D5D2;border-radius:8px;padding:.8rem .9rem}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--leaf);box-shadow:0 0 0 3px var(--leaf-soft)}
.field textarea{resize:vertical;min-height:110px}
.form .btn{width:100%;justify-content:center;border:0;cursor:pointer}

/* Pie */
.foot{background:var(--white);border-top:1px solid var(--mist);padding:52px 0 28px;font-size:.95rem}
.foot .wrap>div:first-child{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
@media(max-width:900px){.foot .wrap>div:first-child{grid-template-columns:1fr}}
.foot h4{font-size:.95rem;margin-bottom:12px}
.foot ul{list-style:none}
.foot li{margin:6px 0}
.foot a{text-decoration:none;color:var(--slate)}
.foot .brand{color:var(--ink)}
.foot a:hover{color:var(--leaf-dk)}
.foot .legal{margin-top:36px;padding-top:18px;border-top:1px solid var(--mist);color:var(--slate);font-size:.88rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* WhatsApp */
.wa{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;align-items:center;gap:8px;background:#1F9D55;color:#fff;text-decoration:none;font-weight:600;font-size:.95rem;padding:12px 16px;border-radius:999px;box-shadow:0 6px 20px rgba(18,38,41,.18)}
.wa:hover{background:#178246}
@media(max-width:560px){.wa span{display:none}.wa{padding:14px}}

/* Páginas de servicio */
.crumbs{font-size:.9rem;color:var(--slate);margin-bottom:18px}
.crumbs a{color:var(--leaf-dk)}
.phero{padding:60px 0 52px;background:linear-gradient(180deg,var(--white) 0%,var(--paper) 100%);border-bottom:1px solid var(--mist)}
.phero .lead{margin:18px 0 28px}
.prose p{margin-bottom:16px;color:#2D4245}
.prose h2{margin-bottom:18px}
.plist{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--mist);border-radius:var(--radius);background:var(--white);overflow:hidden}
.plist div{padding:22px 22px 24px;border-right:1px solid var(--mist);border-bottom:1px solid var(--mist)}
.plist div:nth-child(3n){border-right:0}
.plist div:nth-last-child(-n+3){border-bottom:0}
.plist p{color:var(--slate);font-size:.95rem;margin-top:6px}
@media(max-width:900px){.plist{grid-template-columns:1fr}.plist div{border-right:0!important;border-bottom:1px solid var(--mist)!important}.plist div:last-child{border-bottom:0!important}}
.checks{list-style:none;columns:2;column-gap:40px}
.checks li{break-inside:avoid;padding:10px 0 10px 30px;position:relative;border-bottom:1px solid var(--mist)}
.checks li::before{content:"";position:absolute;left:4px;top:17px;width:12px;height:7px;border-left:2.5px solid var(--leaf);border-bottom:2.5px solid var(--leaf);transform:rotate(-45deg)}
@media(max-width:700px){.checks{columns:1}}
.faq details{border-bottom:1px solid var(--mist);padding:18px 0}
.faq details:first-of-type{border-top:1px solid var(--mist)}
.faq summary{font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";color:var(--leaf-dk);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{color:var(--slate);margin-top:10px}
.cta{background:var(--ink);color:#E8EFEE;border-radius:14px;padding:40px;display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.cta h2{color:#fff;font-size:1.6rem}
.cta p{color:#C9D8D5;margin-top:6px}
.more{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.more a{border:1px solid var(--mist);background:var(--white);border-radius:999px;padding:8px 14px;text-decoration:none;font-size:.93rem}
.more a:hover{border-color:var(--leaf);color:var(--leaf-dk)}