/* INFORTE · sistema visual (misma familia que ecosoft.com.mx y opus.com.mx).
   Claro por omisión (como opus.com.mx); [data-theme="dark"] para oscuro. Acento: naranja INFORTE. */

/* ═════════ Tokens · claro por omisión ═════════ */
:root{
  --paper:#f4f3f0; --paper-2:#eae8e3; --card:#ffffff;
  --ink:#16171a; --ink-2:#41454d; --ink-3:#6c717a;
  --rule:rgba(22,23,26,.12); --rule-2:rgba(22,23,26,.07);
  --grid:rgba(230,92,0,.06);
  --accent:#e65c00; --accent-2:#ff751a; --accent-ink:#b44800; --accent-tint:#fdece0;
  --band:#16171a; --band-ink:#f4f3f0; --band-ink-2:#b5b8bf;
  --nav-bg:rgba(244,243,240,.9);
  --shadow:0 1px 2px rgba(22,23,26,.05), 0 8px 24px rgba(22,23,26,.06);
  --display:'Archivo','Inter',system-ui,sans-serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --paper:#0e0f12; --paper-2:#15171b; --card:#16181d;
  --ink:#f1efe9; --ink-2:#b9bcc4; --ink-3:#878c96;
  --rule:rgba(255,255,255,.12); --rule-2:rgba(255,255,255,.07);
  --grid:rgba(255,117,26,.06);
  --accent-ink:#ff8f45; --accent-tint:rgba(230,92,0,.16);
  --band:#1b1d22; --band-ink:#f1efe9; --band-ink-2:#a9adb6;
  --nav-bg:rgba(14,15,18,.88);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  color-scheme:dark;
}

*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}
body{font-family:var(--sans); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; overflow-x:hidden; font-size:16px; line-height:1.6}
a{color:inherit}
img{display:block; max-width:100%}
.wrap{max-width:1200px; margin:0 auto; padding:0 1.5rem}
.skip{position:absolute; left:-999px; top:0; background:var(--accent); color:#fff; padding:.5rem 1rem; z-index:100}
.skip:focus{left:1rem; top:1rem}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
.mono{font-family:var(--mono)}

/* Botones */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.72rem 1.2rem; border-radius:10px; text-decoration:none; cursor:pointer; font-family:var(--sans); font-weight:600; font-size:.92rem; line-height:1; border:1px solid transparent; transition:background .18s, border-color .18s, transform .18s; white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-accent{background:var(--accent); color:#fff}
.btn-accent:hover{background:#cf5200}
.btn-ink{background:var(--ink); color:var(--paper)}
.btn-line{background:var(--card); color:var(--ink); border-color:var(--rule)}
.btn-line:hover{border-color:var(--ink-3)}
.btn-lg{padding:.95rem 1.5rem; font-size:1rem}
.arr{transition:transform .18s}
.btn:hover .arr{transform:translateX(3px)}

/* Etiquetas */
.eyebrow{display:inline-flex; align-items:center; gap:.6rem; font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink)}
.eyebrow::before{content:""; width:22px; height:1px; background:currentColor}
.eyebrow .n{color:var(--ink-3)}
.chip{display:inline-flex; align-items:center; gap:.4rem; font-family:var(--mono); font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:.3rem .6rem; border-radius:999px; background:var(--accent-tint); color:var(--accent-ink)}

/* ═════════ Nav ═════════ */
.nav{position:fixed; top:0; left:0; right:0; z-index:60; border-bottom:1px solid transparent; transition:background .2s, border-color .2s}
.nav.scrolled, .nav.solid{background:var(--nav-bg); backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px); border-bottom-color:var(--rule-2)}
.nav-inner{max-width:1200px; margin:0 auto; padding:0 1.5rem; height:68px; display:flex; align-items:center; gap:1.5rem}
.brand{display:flex; align-items:center; text-decoration:none; flex:none}
.brand img{height:26px; width:auto}
.logo-dark{display:none}
:root[data-theme="dark"] .logo-dark{display:block}
:root[data-theme="dark"] .logo-light{display:none}
.links{display:flex; align-items:center; gap:.2rem; margin-left:auto}
.links a, .links button.dd-btn{font-size:.9rem; font-weight:500; color:var(--ink-2); text-decoration:none; padding:.5rem .7rem; border-radius:8px; background:none; border:0; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:.3rem}
.links a:hover, .links button.dd-btn:hover, .links a[aria-current="page"]{color:var(--ink); background:var(--rule-2)}
.links a[aria-current="page"]{color:var(--accent-ink)}
.dd{position:relative}
.dd-menu{position:absolute; top:calc(100% + 6px); left:0; min-width:260px; background:var(--card); border:1px solid var(--rule); border-radius:12px; box-shadow:var(--shadow); padding:.4rem; z-index:70;
  visibility:hidden; opacity:0; transform:translateY(-4px); transition:opacity .15s ease .25s, transform .15s ease .25s, visibility 0s linear .4s}
/* puente invisible sobre el hueco entre el botón y el menú, para que no se cierre al bajar el mouse */
.dd-menu::before{content:""; position:absolute; left:0; right:0; top:-12px; height:12px}
.dd:hover .dd-menu, .dd:focus-within .dd-menu, .dd.open .dd-menu{visibility:visible; opacity:1; transform:none; transition-delay:0s}
.dd-menu a{display:block; padding:.6rem .75rem; border-radius:8px}
.dd-menu a b{display:block; font-weight:600; color:var(--ink); font-size:.9rem}
.dd-menu a span{display:block; font-size:.78rem; color:var(--ink-3); line-height:1.35; margin-top:.1rem}
.nav-actions{display:flex; align-items:center; gap:.5rem}
.nav-actions .btn{padding:.6rem 1rem; font-size:.86rem}
.icon-btn{width:40px; height:40px; display:inline-grid; place-items:center; border-radius:10px; border:1px solid var(--rule); background:var(--card); color:var(--ink); cursor:pointer}
.icon-btn svg{width:18px; height:18px}
.theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:block}
:root[data-theme="dark"] .theme-btn .moon{display:none}
.menu-btn{display:none}
@media (max-width:1060px){
  .links{display:none; position:fixed; inset:68px 0 auto 0; background:var(--paper); border-bottom:1px solid var(--rule); flex-direction:column; align-items:stretch; padding:.75rem 1.5rem 1.25rem; gap:0; max-height:calc(100vh - 68px); overflow:auto}
  .nav.menu-open .links{display:flex}
  .links a, .links button.dd-btn{padding:.8rem .5rem; font-size:1rem}
  .dd-menu{position:static; visibility:visible; opacity:1; transform:none; transition:none; box-shadow:none; border:0; background:transparent; padding:0 0 .4rem .8rem; min-width:0}
  .dd-menu::before{display:none}
  .dd-btn svg{display:none}
  .menu-btn{display:inline-grid; margin-left:auto}
  .nav-actions .hide-sm{display:none}
}

/* ═════════ Hero ═════════ */
.hero{position:relative; padding:9.5rem 0 4.5rem; overflow:hidden;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size:48px 48px}
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:3.5rem; align-items:center}
.hero h1{font-family:var(--display); font-weight:800; font-size:clamp(2.4rem, 5.2vw, 4.1rem); line-height:1.02; letter-spacing:-.035em; margin:1.1rem 0 1.2rem; text-wrap:balance}
.hero h1 em{font-style:normal; color:var(--accent)}
.hero-sub{font-size:1.12rem; color:var(--ink-2); max-width:36rem; text-wrap:pretty}
.hero-cta{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:2rem}
.hero-note{margin-top:1rem; font-size:.85rem; color:var(--ink-3)}
.hero-note a{color:var(--ink); font-weight:600}
.hero-visual{position:relative}
.hero-photo{border-radius:18px; overflow:hidden; aspect-ratio:4/3.3; box-shadow:var(--shadow); border:1px solid var(--rule-2)}
.hero-photo img{width:100%; height:100%; object-fit:cover}
.hero-stats{position:absolute; left:-1.5rem; bottom:-1.5rem; display:grid; grid-template-columns:repeat(3,auto); gap:0; background:var(--card); border:1px solid var(--rule); border-radius:14px; box-shadow:var(--shadow); overflow:hidden}
.hero-stats div{padding:.85rem 1.1rem; border-left:1px solid var(--rule-2)}
.hero-stats div:first-child{border-left:0}
.hero-stats b{display:block; font-family:var(--display); font-weight:800; font-size:1.45rem; letter-spacing:-.02em; color:var(--accent-ink); line-height:1.1}
.hero-stats span{font-size:.72rem; color:var(--ink-3); line-height:1.3; display:block; max-width:12ch}
@media (max-width:980px){ .hero{padding-top:7.5rem} .hero .wrap{grid-template-columns:1fr; gap:3rem} .hero-stats{left:1rem; right:1rem; bottom:-1.25rem; grid-template-columns:repeat(3,1fr)} }
@media (max-width:520px){ .hero-cta .btn{flex:1 1 100%} .hero-stats div{padding:.7rem .6rem} .hero-stats b{font-size:1.15rem} }

/* Hero interior (páginas) */
.page-hero{padding:8.5rem 0 3.5rem; border-bottom:1px solid var(--rule-2);
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size:48px 48px}
.page-hero .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center}
.page-hero h1{font-family:var(--display); font-weight:800; font-size:clamp(2.1rem,4.4vw,3.3rem); line-height:1.05; letter-spacing:-.03em; margin:1rem 0; text-wrap:balance}
.page-hero h1 em{font-style:normal; color:var(--accent)}
.page-hero p.lead{font-size:1.08rem; color:var(--ink-2); max-width:38rem}
.page-hero .hero-photo{aspect-ratio:16/11}
.crumbs{font-family:var(--mono); font-size:.72rem; color:var(--ink-3); letter-spacing:.04em}
.crumbs a{color:var(--ink-3); text-decoration:none}
.crumbs a:hover{color:var(--accent-ink)}
@media (max-width:900px){ .page-hero{padding-top:7rem} .page-hero .wrap{grid-template-columns:1fr} }

/* ═════════ Secciones ═════════ */
.section{padding:5.5rem 0}
.section.alt{background:var(--paper-2)}
.section.tight{padding:4rem 0}
.sec-head{max-width:46rem; margin-bottom:2.6rem}
.sec-head.center{margin-left:auto; margin-right:auto; text-align:center}
.sec-head.center .eyebrow::before{display:none}
.sec-head h2{font-family:var(--display); font-weight:800; font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1.08; letter-spacing:-.03em; margin:.8rem 0 .9rem; text-wrap:balance}
.sec-head p{color:var(--ink-2); font-size:1.04rem; text-wrap:pretty}
.split{display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:start}
.split .big{font-family:var(--display); font-weight:800; font-size:clamp(1.9rem,3.6vw,2.8rem); line-height:1.05; letter-spacing:-.03em; text-wrap:balance}
.split .big em{font-style:normal; color:var(--accent)}
.prose p{color:var(--ink-2); margin-bottom:1rem; font-size:1.02rem}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink)}
@media (max-width:900px){ .split{grid-template-columns:1fr; gap:1.6rem} .section{padding:4rem 0} }

/* Cifras */
.facts{border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); background:var(--card)}
.facts ul{list-style:none; display:grid; grid-template-columns:repeat(4,1fr)}
.facts li{padding:1.6rem 1.4rem; border-left:1px solid var(--rule-2)}
.facts li:first-child{border-left:0; padding-left:0}
.facts b{display:block; font-family:var(--display); font-weight:800; font-size:clamp(1.6rem,3vw,2.3rem); letter-spacing:-.03em; line-height:1.05}
.facts b em{font-style:normal; color:var(--accent)}
.facts span{font-size:.86rem; color:var(--ink-3)}
@media (max-width:820px){ .facts ul{grid-template-columns:1fr 1fr} .facts li:nth-child(3){border-left:0; padding-left:0} .facts li{border-top:1px solid var(--rule-2)} .facts li:nth-child(-n+2){border-top:0} }

/* Tarjetas */
.grid{display:grid; gap:1rem}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){ .g3,.g4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .g2,.g3,.g4{grid-template-columns:1fr} }
.card{background:var(--card); border:1px solid var(--rule); border-radius:16px; padding:1.5rem; display:flex; flex-direction:column; gap:.55rem; transition:border-color .18s, transform .18s, box-shadow .18s}
a.card{text-decoration:none}
a.card:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow)}
.card .num{font-family:var(--mono); font-size:.78rem; font-weight:600; color:var(--accent-ink)}
.card h3{font-family:var(--display); font-weight:700; font-size:1.2rem; letter-spacing:-.01em; line-height:1.2}
.card p{color:var(--ink-2); font-size:.94rem; line-height:1.55}
.card .more{margin-top:auto; padding-top:.5rem; font-size:.88rem; font-weight:600; color:var(--accent-ink)}
.card .ico{width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:var(--accent-tint); color:var(--accent-ink)}
.card .ico svg{width:20px; height:20px}
.card.media{padding:0; overflow:hidden}
.card.media .ph{aspect-ratio:16/9; overflow:hidden; background:var(--paper-2)}
.card.media .ph img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
a.card.media:hover .ph img{transform:scale(1.04)}
.card.media .bd{padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.5rem; flex:1}

/* Planes / soluciones */
.plan{position:relative}
.plan.hl{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset}
.plan .tag{position:absolute; top:-11px; left:1.4rem; background:var(--accent); color:#fff; font-family:var(--mono); font-size:.66rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:.25rem .55rem; border-radius:6px}
.plan .for{font-size:.9rem; color:var(--ink-3)}
.plan ul{list-style:none; display:grid; gap:.45rem; margin:.4rem 0 .8rem}
.plan li{display:flex; gap:.55rem; font-size:.92rem; color:var(--ink-2); line-height:1.45}
.plan li::before{content:"✓"; color:var(--accent-ink); font-weight:700; flex:none}
.plan .acts{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:auto}
.plan .acts .btn{padding:.6rem .95rem; font-size:.86rem}

/* Lista de características */
.feat{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--rule)}
.feat > div{padding:1.6rem 1.5rem 1.6rem 0; border-bottom:1px solid var(--rule)}
.feat > div:not(:nth-child(3n+1)){padding-left:1.5rem; border-left:1px solid var(--rule-2)}
.feat h4{font-family:var(--display); font-size:1.05rem; font-weight:700; margin-bottom:.35rem; display:flex; align-items:center; gap:.5rem}
.feat h4 i{width:8px; height:8px; border-radius:2px; background:var(--accent); flex:none}
.feat p{font-size:.92rem; color:var(--ink-2)}
@media (max-width:900px){ .feat{grid-template-columns:1fr 1fr} .feat > div{padding:1.3rem 1rem 1.3rem 0 !important; border-left:0 !important} .feat > div:nth-child(2n){padding-left:1rem !important; border-left:1px solid var(--rule-2) !important} }
@media (max-width:600px){ .feat{grid-template-columns:1fr} .feat > div{padding:1.2rem 0 !important; border-left:0 !important} }

/* Banda oscura (CTA) */
.band{background:var(--band); color:var(--band-ink); padding:4.5rem 0}
.band .wrap{display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap}
.band h2{font-family:var(--display); font-weight:800; font-size:clamp(1.7rem,3.2vw,2.4rem); letter-spacing:-.03em; line-height:1.1; max-width:30ch}
.band p{color:var(--band-ink-2); margin-top:.6rem; max-width:52ch}
.band .acts{display:flex; gap:.6rem; flex-wrap:wrap}
.band .btn-line{background:transparent; color:var(--band-ink); border-color:rgba(255,255,255,.28)}

/* Ecosistema ECOSOFT */
.eco{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.eco a{background:var(--card); border:1px solid var(--rule); border-radius:16px; padding:1.4rem 1.5rem; text-decoration:none; display:flex; flex-direction:column; gap:.6rem; transition:border-color .18s, transform .18s}
.eco a:hover{border-color:var(--ink-3); transform:translateY(-2px)}
.eco a.here{border-color:var(--accent); background:linear-gradient(180deg, var(--accent-tint), var(--card) 70%)}
.eco .eco-logo{height:30px; display:flex; align-items:center}
.eco .eco-logo img{height:26px; width:auto}
.eco h4{font-family:var(--display); font-size:1.05rem; font-weight:700}
.eco p{font-size:.9rem; color:var(--ink-2)}
.eco small{margin-top:auto; font-family:var(--mono); font-size:.72rem; font-weight:600; color:var(--ink-3)}
.eco a.here small{color:var(--accent-ink)}
@media (max-width:820px){ .eco{grid-template-columns:1fr} }

/* Asesores */
.people{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.person{background:var(--card); border:1px solid var(--rule); border-radius:16px; padding:1.4rem; display:flex; flex-direction:column; gap:.7rem}
.person .who{display:flex; align-items:center; gap:.8rem}
.person .av{width:46px; height:46px; border-radius:50%; background:var(--accent-tint); color:var(--accent-ink); display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:1rem; flex:none}
.person h3{font-family:var(--display); font-size:1.05rem; font-weight:700; line-height:1.2}
.person .role{font-size:.82rem; color:var(--ink-3)}
.person a{display:flex; gap:.5rem; align-items:center; font-size:.88rem; color:var(--ink-2); text-decoration:none; word-break:break-word}
.person a:hover{color:var(--accent-ink)}
.person a svg{width:15px; height:15px; flex:none; color:var(--ink-3)}
@media (max-width:900px){ .people{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .people{grid-template-columns:1fr} }

/* Anclas internas de una página */
.subnav{position:sticky; top:68px; z-index:20; background:var(--nav-bg); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--rule-2)}
.subnav .wrap{display:flex; gap:.3rem; overflow-x:auto; padding-top:.5rem; padding-bottom:.5rem; scrollbar-width:none}
.subnav a{flex:none; font-size:.86rem; font-weight:500; color:var(--ink-2); text-decoration:none; padding:.45rem .8rem; border-radius:999px; border:1px solid transparent}
.subnav a:hover{border-color:var(--rule); color:var(--ink)}
section[id]{scroll-margin-top:130px}

/* Formulario (Google Forms) */
.form-shell{background:var(--card); border:1px solid var(--rule); border-radius:18px; overflow:hidden; box-shadow:var(--shadow)}
.form-shell iframe{display:block; width:100%; height:1500px; border:0; background:#fff}
.form-aside{display:grid; gap:1rem; align-content:start}

/* Footer */
.footer{border-top:1px solid var(--rule); padding:3.5rem 0 2rem; background:var(--card)}
.footer-top{display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:2rem}
.footer-brand p{font-size:.88rem; color:var(--ink-3); margin-top:.9rem; max-width:32ch}
.footer h5{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.8rem; font-weight:600}
.footer-col a{display:block; font-size:.88rem; color:var(--ink-2); text-decoration:none; padding:.22rem 0}
.footer-col a:hover{color:var(--accent-ink)}
.social{display:flex; gap:.4rem; margin-top:1rem}
.social a{width:34px; height:34px; border-radius:9px; border:1px solid var(--rule); display:grid; place-items:center; text-decoration:none; color:var(--ink-2); font-size:.85rem}
.social a:hover{border-color:var(--accent); color:var(--accent-ink)}
.footer-bottom{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:2.5rem; padding-top:1.4rem; border-top:1px solid var(--rule-2); font-size:.8rem; color:var(--ink-3)}
.footer-bottom nav{display:flex; gap:1.1rem; flex-wrap:wrap}
.footer-bottom a{color:var(--ink-3)}
@media (max-width:900px){ .footer-top{grid-template-columns:1fr 1fr} .footer-brand{grid-column:1 / -1} }

/* Etiquetas de apps (soluciones) */
.pills{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.3rem}
.pills span{font-size:.78rem; padding:.22rem .6rem; border:1px solid var(--rule); border-radius:999px; color:var(--ink-2); background:var(--paper)}
.facts b{white-space:nowrap}

/* Servicios compactos (portada): miniatura + texto en una fila */
.svc-card{flex-direction:row; align-items:center; gap:1rem; padding:.8rem}
.svc-card img{width:92px; height:72px; object-fit:cover; border-radius:10px; flex:none}
.svc-card h3{font-size:1.05rem}
.svc-card p{font-size:.88rem; margin-top:.15rem}

/* Sección oscura dentro de la página clara (contraste, como la banda de contacto) */
.section.dark{
  --paper:#16171a; --paper-2:#1d1f23; --card:#1f2126;
  --ink:#f4f3f0; --ink-2:#b9bcc4; --ink-3:#8a8f98;
  --rule:rgba(255,255,255,.12); --rule-2:rgba(255,255,255,.07);
  --accent-ink:#ff8f45; --accent-tint:rgba(230,92,0,.18);
  background:#16171a; color:var(--ink)}
:root[data-theme="dark"] .section.dark{background:#1b1d22; --card:#23262c}
.section.dark a.card:hover{border-color:var(--accent)}

/* Marca: ECOSOFT | INFORTE (como «✱ | OPUS27» en opus.com.mx) */
.brand{gap:.75rem}
.brand .eco-mark{height:24px; width:auto}
.brand-sep{width:1px; height:24px; background:var(--rule); flex:none}
@media (max-width:420px){ .brand .eco-mark{height:20px} .brand img:not(.eco-mark){height:22px} }