/* ═══════════════════════════════════════════════════════════
   QUIMCONEX · sistema visual
   Base extraída de index.html (v3) + componentes de páginas interiores.
   Paleta muestreada del logotipo: ámbar #F9A21D · naranja #F05A25 · rojo #CB372B
   ═══════════════════════════════════════════════════════════ */

:root{
  --bg:#0B0B0C;
  --surf:#17120F;         /* superficie con sesgo cálido hacia la marca */
  --surf2:#241B15;
  --line:rgba(255,255,255,.13);
  --line-soft:rgba(255,255,255,.07);
  --ink:#F3EEEA;          /* off-white cálido */
  --dim:#B9AFA7;
  --dimmer:#8E847B;
  --a1:#F9A21D;           /* ámbar — los anillos "OO" del logotipo */
  --a2:#F05A25;           /* naranja de marca — EXCLUSIVO del CTA */
  --a3:#CB372B;           /* rojo de marca — profundidad en fotografía */
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --disp:"Jost",system-ui,-apple-system,"Century Gothic","Segoe UI",sans-serif;
  --body:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --rail:92px;
  --wrap:1360px;
  color-scheme:dark;   /* el sitio es oscuro por decisión: controles y barras siguen la paleta */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-weight:400;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
/* hidden siempre esconde: si no, un display:flex/grid propio (.item, .cat) le gana
   y el filtro del catalogo marca los productos pero no los oculta */
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
::selection{background:var(--a1);color:#0B0B0C}
:focus-visible{outline:2px solid var(--a1);outline-offset:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:400}
.num{font-variant-numeric:tabular-nums}

/* ── RAIL ────────────────────────────────────────── */
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:60;border-right:1px solid var(--line);background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:22px 0}
.rail::after{content:"";position:absolute;right:-1px;top:0;width:1px;height:var(--prog,0);background:var(--a1);transition:height .12s linear}
.rail-logo{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--disp);font-weight:400;letter-spacing:.3em;font-size:21px;text-transform:uppercase}
.rail-logo b{color:var(--a1)}
.rail-nav{display:flex;flex-direction:column;align-items:center;gap:30px}
.rail-nav a{position:relative;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);transition:color .35s var(--ease)}
.rail-nav a::before{content:"";position:absolute;left:-9px;top:50%;width:4px;height:4px;background:var(--a1);border-radius:50%;transform:translateY(-50%) scale(0);transition:transform .4s var(--ease)}
.rail-nav a:hover{color:var(--ink)}
.rail-nav a.active{color:var(--a1)}
.rail-nav a.active::before{transform:translateY(-50%) scale(1)}
.rail-mark{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--dimmer);writing-mode:vertical-rl;transform:rotate(180deg)}

.topbar{display:none;position:fixed;inset:0 0 auto 0;z-index:70;height:60px;align-items:center;justify-content:space-between;padding:0 20px;background:rgba(11,11,12,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:var(--prog,0);background:var(--a1);transition:width .12s linear}
.topbar .brand{font-family:var(--disp);font-weight:400;letter-spacing:.24em;font-size:18px;text-transform:uppercase}
.topbar .brand b{color:var(--a1)}
.burger{width:42px;height:42px;border:1px solid var(--line);background:none;display:grid;place-items:center;cursor:pointer;padding:0}
.burger span{display:block;width:18px;height:1px;background:var(--ink);position:relative;transition:background .3s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1px;background:var(--ink);transition:transform .35s var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
.panel{display:none;position:fixed;inset:0;z-index:65;background:var(--bg);padding:88px 24px 32px;flex-direction:column;gap:0;overflow-y:auto}
.panel.open{display:flex}
.panel a{font-family:var(--disp);font-size:clamp(26px,7vw,36px);font-weight:500;letter-spacing:-.01em;text-transform:uppercase;padding:11px 0;border-bottom:1px solid var(--line-soft);opacity:0;transform:translateY(18px);animation:pin .5s var(--ease) forwards}
.panel a:nth-child(1){animation-delay:.04s}.panel a:nth-child(2){animation-delay:.09s}
.panel a:nth-child(3){animation-delay:.14s}.panel a:nth-child(4){animation-delay:.19s}
.panel a:nth-child(5){animation-delay:.24s}.panel a:nth-child(6){animation-delay:.29s}
.panel a.active{color:var(--a1)}
@keyframes pin{to{opacity:1;transform:none}}
.panel .mono{margin-top:24px}

main{margin-left:var(--rail)}

/* ── FOTOGRAFÍA ──────────────────────────────────── */
.ph{position:relative;overflow:hidden;background:#08080A}
.ph img,.ph video{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.16) brightness(.74);transform:scale(1.08);transition:transform 1.6s var(--ease),filter .9s var(--ease)}
.ph.in img,.ph.in video{transform:scale(1)}
.ph video{position:absolute;inset:0;z-index:0}
.ph .tint{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(168deg,rgba(249,162,29,.16) 0%,rgba(203,55,43,.20) 40%,rgba(11,11,12,.74) 100%);transition:opacity .7s var(--ease)}
.ph .curtain{position:absolute;inset:0;z-index:3;background:var(--bg);transform:translateY(0);transition:transform 1.2s cubic-bezier(.76,0,.24,1)}
.ph.in .curtain{transform:translateY(-101%)}
.ph .sweep{position:absolute;inset:0;z-index:4;pointer-events:none;transform:translateX(-130%);background:linear-gradient(104deg,transparent 36%,rgba(255,255,255,.15) 50%,transparent 64%)}
.ph.in .sweep{animation:sweep 1.7s .6s var(--ease) forwards}
@keyframes sweep{to{transform:translateX(130%)}}

/* ── HERO (portada) ──────────────────────────────── */
.hero{position:relative;min-height:min(94vh,900px);display:flex;align-items:flex-end;border-bottom:1px solid var(--line);overflow:hidden}
.hero .ph{position:absolute;inset:-8% 0;z-index:0;will-change:transform}
.hero .ph .tint{background:linear-gradient(90deg,rgba(11,11,12,.94) 0%,rgba(11,11,12,.80) 42%,rgba(11,11,12,.34) 100%),linear-gradient(0deg,rgba(11,11,12,.92) 0%,rgba(11,11,12,0) 55%)}
#marks{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}
.hero .wrap{position:relative;z-index:5;width:100%;padding-top:150px;padding-bottom:70px}
.hero-eyebrow{display:flex;gap:18px;align-items:center;margin-bottom:22px;flex-wrap:wrap}
.hero-eyebrow .dot{width:6px;height:6px;background:var(--a1);border-radius:50%;flex:none;animation:blip 2.4s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(249,162,29,.55)}50%{opacity:.4;box-shadow:0 0 0 6px rgba(249,162,29,0)}}

h1{font-family:var(--disp);font-size:clamp(40px,6.5vw,98px);line-height:.98;font-weight:600;letter-spacing:-.022em;text-transform:uppercase;margin:0 0 26px;max-width:14ch;text-wrap:balance}
h1 .hi{position:relative;display:inline-block}
h1 .hi::after{content:attr(data-t);position:absolute;left:0;top:0;color:var(--a1);clip-path:inset(0 100% 0 0);animation:fill 1.15s .85s var(--ease) forwards}
@keyframes fill{to{clip-path:inset(0 0 0 0)}}
.lede{font-size:clamp(16px,1.35vw,19px);color:var(--ink);max-width:54ch;margin:0 0 38px;line-height:1.62}
.lede b{color:#fff;font-weight:700}

.cta{position:relative;display:inline-flex;align-items:center;gap:14px;overflow:hidden;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:var(--a2);padding:18px 28px;border:1px solid var(--a2);cursor:pointer;transition:transform .35s var(--ease)}
.cta>*{position:relative;z-index:2}
.cta::before{content:"";position:absolute;inset:0;z-index:1;background:#0B0B0C;transform:translateY(101%);transition:transform .45s var(--ease)}
.cta:hover{transform:translateY(-3px)}
.cta:hover::before{transform:translateY(0)}
.cta .arw{transition:transform .35s var(--ease)}
.cta:hover .arw{transform:translateX(5px)}
.cta.ghost{background:none;color:var(--ink);border-color:var(--line)}
.cta.ghost::before{background:var(--a1)}
.cta.ghost:hover{color:#0B0B0C;border-color:var(--a1)}

/* ── TICKER ──────────────────────────────────────── */
.ticker{border-bottom:1px solid var(--line);overflow:hidden;padding:15px 0;background:var(--surf)}
.ticker-track{display:flex;width:max-content;will-change:transform}
.ticker-track span{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);padding:0 30px;white-space:nowrap;position:relative}
.ticker-track span::after{content:"";position:absolute;right:0;top:50%;width:3px;height:3px;background:var(--a1);border-radius:50%;transform:translateY(-50%)}

/* ── SECCIONES ───────────────────────────────────── */
section{border-bottom:1px solid var(--line)}
.pad{padding:112px 0}
.pad-s{padding:78px 0}
.sec-head{display:flex;align-items:baseline;gap:22px;margin-bottom:54px;flex-wrap:wrap}
.sec-head .idx{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--a1);white-space:nowrap}
h2{font-family:var(--disp);font-size:clamp(30px,4.1vw,60px);line-height:1.02;font-weight:600;letter-spacing:-.018em;text-transform:uppercase;margin:0;max-width:17ch;text-wrap:balance}

/* palabras que suben con retardo escalonado */
.sp .w{display:inline-block;overflow:hidden;vertical-align:top;padding-top:.14em;margin-top:-.14em}
.sp .w>i{display:inline-block;font-style:normal;transform:translateY(105%);transition:transform .82s var(--ease)}
.sp.in .w>i{transform:none}

/* argumento A/B */
.ab{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.ab-col{padding:36px 0 0}
.ab-col:first-child{padding-right:40px;border-right:1px solid var(--line)}
.ab-col:last-child{padding-left:40px}
.ab-tag{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:26px;display:block}
.ab-col:first-child .ab-tag{color:var(--dimmer)}
.ab-col:last-child .ab-tag{color:var(--a1)}
.ab-col ul{list-style:none;margin:0;padding:0}
.ab-col li{padding:18px 0;border-bottom:1px solid var(--line-soft);font-size:clamp(16px,1.6vw,23px);line-height:1.25;letter-spacing:-.005em;opacity:0;transform:translateX(-14px);transition:opacity .6s var(--ease),transform .6s var(--ease),color .3s}
.ab.in li{opacity:1;transform:none}
.ab-col:first-child li{color:var(--dimmer)}
.ab-col:last-child li{color:var(--ink);font-weight:700}
.ab-col:last-child li{transform:translateX(14px)}
.ab.in .ab-col li:nth-child(1){transition-delay:.05s}
.ab.in .ab-col li:nth-child(2){transition-delay:.12s}
.ab.in .ab-col li:nth-child(3){transition-delay:.19s}
.ab.in .ab-col li:nth-child(4){transition-delay:.26s}
.ab.in .ab-col li:nth-child(5){transition-delay:.33s}
.ab-col:last-child li:hover{color:var(--a1)}

/* método — 4 columnas */
.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.step{position:relative;padding:36px 30px 46px;border-right:1px solid var(--line);overflow:hidden;transition:background .5s var(--ease)}
.step::before{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--a1);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.step:hover{background:var(--surf)}
.step:hover::before{transform:scaleX(1)}
.step:last-child{border-right:none}
.step .n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--a1);display:block}
.step h3{font-family:var(--disp);font-size:clamp(21px,1.9vw,28px);font-weight:600;letter-spacing:-.012em;text-transform:uppercase;margin:32px 0 12px;line-height:.94}
.step p{margin:0;color:var(--dim);font-size:15px;line-height:1.55}
.step .u{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--dimmer);margin-top:20px;display:block;text-transform:uppercase}

/* paneles a sangre */
.panels{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line)}
.pnl{background:var(--bg);display:grid;grid-template-columns:1.05fr 1fr;min-height:460px}
.pnl:nth-child(even) .pnl-media{order:-1}
.pnl-body{padding:64px 52px;display:flex;flex-direction:column;justify-content:center}
.pnl-body .mono{margin-bottom:20px;color:var(--a1)}
.pnl-body h3{font-family:var(--disp);font-size:clamp(26px,2.6vw,40px);font-weight:600;letter-spacing:-.018em;text-transform:uppercase;line-height:.9;margin:0 0 20px;max-width:15ch}
.pnl-body p{color:var(--dim);margin:0 0 24px;max-width:46ch;font-size:16px}
.pnl-body .specs{display:flex;flex-wrap:wrap;gap:8px}
.pnl-body .specs i{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);padding:6px 11px}
.pnl-media{position:relative;min-height:380px}
.pnl:hover .pnl-media img{transform:scale(1.045);filter:grayscale(.72) contrast(1.16) brightness(.82)}
.pnl:hover .pnl-media .tint{opacity:.78}
/* sello "[Falta: foto…]": vale para cualquier foto (.ph), no solo para los paneles */
.ph .stamp{position:absolute;left:20px;bottom:18px;z-index:5;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(232,232,228,.6)}

/* respaldo */
.resp{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;border-top:1px solid var(--line)}
.resp .ph{min-height:540px}
.resp-body{padding:72px 56px;display:flex;flex-direction:column;justify-content:center;border-left:1px solid var(--line)}
.resp-body h3{font-family:var(--disp);font-size:clamp(26px,2.9vw,44px);font-weight:600;letter-spacing:-.018em;text-transform:uppercase;line-height:.9;margin:0 0 26px;max-width:14ch}
.resp-list{list-style:none;margin:0 0 26px;padding:0;border-top:1px solid var(--line-soft)}
.resp-list li{display:flex;gap:18px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line-soft);transition:padding-left .4s var(--ease)}
.resp-list li:hover{padding-left:8px}
.resp-list em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--a1);flex:none;width:96px}
.resp-list span{color:var(--dim);font-size:15.5px}

/* cierre */
.close{padding:120px 0}
.close .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:70px;align-items:start}
/* si el cierre queda solo con el texto (sin nota al lado), ocupa todo el ancho */
.close .wrap>:only-child{grid-column:1/-1}
.close h2{font-size:clamp(28px,3.5vw,52px);max-width:14ch;margin-bottom:30px}
.close .mono{margin-bottom:22px;display:block}
.close-alt{border-top:1px solid var(--line-soft);padding-top:22px;margin-top:34px}
.close-alt a{display:flex;align-items:center;gap:9px;width:fit-content;color:var(--ink);font-size:16px;padding:7px 0;transition:color .25s,transform .35s var(--ease)}
.close-alt a:hover{color:var(--a1);transform:translateX(5px)}

/* formulario */
.form{border:1px solid var(--line);background:var(--surf);padding:36px 32px 32px;position:relative}
.form-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.form-head strong{font-family:var(--disp);font-size:22px;font-weight:600;letter-spacing:-.005em;text-transform:uppercase;line-height:1;color:var(--ink)}
.field{margin-bottom:17px}
.field label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);display:block;margin-bottom:7px}
.field label span{color:var(--a1)}
.field input,.field select,.field textarea{
  width:100%;background:#0B0B0C;border:1px solid var(--line);color:var(--ink);
  font-family:var(--body);font-size:15px;padding:13px 14px;border-radius:0;
  transition:border-color .3s var(--ease),background .3s}
.field textarea{resize:vertical;min-height:92px;line-height:1.5}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field input::placeholder,.field textarea::placeholder{color:var(--dimmer)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--a1);background:#0F1211}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--a2)}
.field .msg{display:none;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--a2);margin-top:6px}
.field.bad .msg{display:block}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.check{display:flex;gap:11px;align-items:flex-start;margin:20px 0 8px;cursor:pointer}
.check input{appearance:none;flex:none;width:17px;height:17px;margin:2px 0 0;border:1px solid var(--line);background:#0B0B0C;cursor:pointer;transition:border-color .25s,background .25s}
.check input:checked{background:var(--a1);border-color:var(--a1)}
.check input:checked::after{content:"";display:block;width:5px;height:9px;margin:1px auto 0;border:solid #0B0B0C;border-width:0 2px 2px 0;transform:rotate(45deg)}
.check span{font-size:13.5px;color:var(--dim);line-height:1.45}
.check.bad span{color:var(--a2)}
.form .cta{width:100%;justify-content:center;margin-top:14px}
.form .foot-note{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--dimmer);margin:16px 0 0;text-align:center}
.sent{display:none;padding:34px 4px;text-align:center}
.sent .tick{width:46px;height:46px;margin:0 auto 20px;border:1px solid var(--a1);border-radius:50%;display:grid;place-items:center;color:var(--a1);font-size:20px}
.sent strong{display:block;font-family:var(--disp);font-size:26px;font-weight:600;text-transform:uppercase;letter-spacing:-.005em;margin-bottom:10px;color:var(--ink)}
.sent p{color:var(--dim);font-size:15px;margin:0;max-width:34ch;margin-inline:auto}
.form.done .form-head,.form.done form{display:none}
.form.done .sent{display:block}

/* footer */
footer{padding:56px 0 40px;color:var(--dim)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:44px}
.foot-grid h4{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dimmer);margin:0 0 16px;font-weight:400}
.foot-grid a{display:block;padding:5px 0;font-size:15px;transition:color .25s,transform .35s var(--ease)}
.foot-grid a:hover{color:var(--ink);transform:translateX(5px)}
.foot-brand{font-family:var(--disp);font-size:clamp(34px,7.4vw,108px);font-weight:300;letter-spacing:.13em;line-height:.8;color:var(--surf2);margin:0;text-transform:uppercase;overflow:hidden}
.foot-bot{display:flex;justify-content:space-between;gap:20px;padding-top:26px;border-top:1px solid var(--line);flex-wrap:wrap}

.float{position:fixed;right:26px;bottom:26px;z-index:80;display:inline-flex;align-items:center;gap:10px;overflow:hidden;background:var(--a2);color:#fff;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;padding:15px 21px;transition:transform .35s var(--ease)}
.float:hover{transform:translateY(-4px)}

.fmark{display:inline-block;border:1px dashed rgba(249,162,29,.55);color:var(--a1);font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;margin:0 2px;vertical-align:middle}

/* ── MOTION BASE ─────────────────────────────────── */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.08s}.rv[data-d="2"]{transition-delay:.16s}
.rv[data-d="3"]{transition-delay:.24s}.rv[data-d="4"]{transition-delay:.32s}
.rv[data-d="5"]{transition-delay:.40s}.rv[data-d="6"]{transition-delay:.48s}
.mask{overflow:hidden;display:block;padding-top:.14em;margin-top:-.14em}
.mask>span{display:block;transform:translateY(105%);transition:transform 1.05s var(--ease)}
.mask.in>span{transform:none}


/* ═══════════════════════════════════════════════════════════
   PÁGINAS INTERIORES
   ═══════════════════════════════════════════════════════════ */

/* ── cabecera de página ──────────────────────────── */
.phead{position:relative;border-bottom:1px solid var(--line);overflow:hidden;background:var(--bg)}
.phead .ph{position:absolute;inset:-6% 0;z-index:0}
.phead .ph .tint{background:linear-gradient(90deg,rgba(11,11,12,.95) 0%,rgba(11,11,12,.84) 46%,rgba(11,11,12,.42) 100%),linear-gradient(0deg,rgba(11,11,12,.94) 0%,rgba(11,11,12,0) 62%)}
.phead .wrap{position:relative;z-index:4;padding-top:132px;padding-bottom:64px}
.phead h1{font-size:clamp(36px,5.4vw,80px);max-width:16ch;margin-bottom:22px}
.phead .lede{margin-bottom:0;max-width:58ch}
.crumb{display:flex;align-items:center;gap:10px;margin-bottom:20px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer);flex-wrap:wrap}
.crumb a{color:var(--dim);transition:color .25s}
.crumb a:hover{color:var(--a1)}
.crumb .sep{color:var(--a1)}

/* ── tira de datos bajo la cabecera ──────────────── */
.strip{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line);background:var(--surf)}
.strip>div{padding:24px 28px;border-right:1px solid var(--line)}
.strip>div:last-child{border-right:none}
.strip dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer);margin:0 0 8px}
.strip dd{margin:0;font-family:var(--disp);font-size:clamp(17px,1.6vw,22px);font-weight:500;letter-spacing:-.01em;line-height:1.15;text-transform:uppercase}

/* ── línea de tiempo (método) ────────────────────── */
.tl{border-top:1px solid var(--line);counter-reset:paso}
.tl-item{display:grid;grid-template-columns:96px 1fr 1fr;gap:0;border-bottom:1px solid var(--line);position:relative;transition:background .5s var(--ease)}
.tl-item:hover{background:var(--surf)}
.tl-item::before{content:"";position:absolute;left:0;top:0;width:2px;height:100%;background:var(--a1);transform:scaleY(0);transform-origin:top;transition:transform .6s var(--ease)}
.tl-item:hover::before{transform:scaleY(1)}
.tl-n{padding:44px 0 44px 28px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--a1)}
.tl-main{padding:44px 44px 44px 0}
.tl-main h3{font-family:var(--disp);font-size:clamp(24px,2.5vw,38px);font-weight:600;letter-spacing:-.016em;text-transform:uppercase;line-height:.92;margin:0 0 16px;max-width:16ch}
.tl-main p{margin:0 0 18px;color:var(--dim);max-width:48ch;font-size:16px}
.tl-side{padding:44px 28px 44px 44px;border-left:1px solid var(--line-soft)}
.tl-side h4{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer);margin:0 0 14px;font-weight:400}
.tl-side ul{list-style:none;margin:0 0 22px;padding:0}
.tl-side li{position:relative;padding:7px 0 7px 20px;font-size:15px;color:var(--dim);border-bottom:1px solid var(--line-soft)}
.tl-side li::before{content:"";position:absolute;left:0;top:15px;width:7px;height:1px;background:var(--a1)}
.tl-side li:last-child{border-bottom:none}

/* ── filas editoriales (soluciones) ──────────────── */
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:.34fr .66fr;border-bottom:1px solid var(--line);transition:background .5s var(--ease)}
.row:hover{background:var(--surf)}
.row-k{padding:48px 40px 48px 0;border-right:1px solid var(--line-soft)}
.row-k .mono{color:var(--a1);display:block;margin-bottom:14px}
.row-k h3{font-family:var(--disp);font-size:clamp(23px,2.3vw,34px);font-weight:600;letter-spacing:-.016em;text-transform:uppercase;line-height:.94;margin:0;max-width:13ch}
.row-v{padding:48px 0 48px 44px}
.row-v p{margin:0 0 20px;color:var(--dim);max-width:60ch;font-size:16px}
.row-v p.sign{color:var(--ink);font-size:17px;border-left:2px solid var(--a1);padding-left:16px;max-width:52ch}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.tags i{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);padding:7px 12px;transition:border-color .3s,color .3s}
.row:hover .tags i{border-color:rgba(249,162,29,.4);color:var(--ink)}

/* ── preguntas (acordeón) ────────────────────────── */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:26px 0;display:flex;align-items:baseline;gap:20px;font-family:var(--disp);font-size:clamp(18px,1.8vw,25px);font-weight:500;letter-spacing:-.01em;transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";font-family:var(--mono);font-size:16px;color:var(--a1);flex:none;transition:transform .35s var(--ease)}
.faq details[open] summary::before{content:"–"}
.faq summary:hover{color:var(--a1)}
.faq .ans{padding:0 0 28px 36px;color:var(--dim);max-width:70ch;font-size:16px}
.faq .ans p{margin:0 0 12px}
.faq .ans p:last-child{margin:0}

/* ── canales de contacto ─────────────────────────── */
.chan{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.chan a,.chan div{background:var(--bg);padding:38px 32px;display:flex;flex-direction:column;gap:10px;transition:background .45s var(--ease)}
.chan a:hover{background:var(--surf)}
.chan .mono{color:var(--a1)}
.chan strong{font-family:var(--disp);font-size:clamp(19px,1.8vw,26px);font-weight:600;letter-spacing:-.012em;text-transform:uppercase;line-height:1}
.chan p{margin:0;color:var(--dim);font-size:14.5px;max-width:34ch}
.chan .go{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer);margin-top:auto;padding-top:14px;transition:color .3s,transform .35s var(--ease)}
.chan a:hover .go{color:var(--a1);transform:translateX(5px)}

/* ── blog ────────────────────────────────────────── */
.feat{display:grid;grid-template-columns:1.1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);min-height:440px}
.feat-body{padding:60px 52px 60px 0;display:flex;flex-direction:column;justify-content:center}
.feat-body h3{font-family:var(--disp);font-size:clamp(27px,3.1vw,46px);font-weight:600;letter-spacing:-.02em;text-transform:uppercase;line-height:.94;margin:0 0 20px;max-width:17ch}
.feat-body p{color:var(--dim);margin:0 0 26px;max-width:50ch}
.feat .ph{min-height:340px;border-left:1px solid var(--line)}
.meta{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
.meta .tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#0B0B0C;background:var(--a1);padding:5px 10px}
.meta .mono{color:var(--dimmer)}

.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.post{background:var(--bg);padding:40px 34px 34px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:background .5s var(--ease)}
.post::before{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--a1);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.post:hover{background:var(--surf)}
.post:hover::before{transform:scaleX(1)}
.post h3{font-family:var(--disp);font-size:clamp(20px,1.9vw,27px);font-weight:600;letter-spacing:-.014em;text-transform:uppercase;line-height:.98;margin:18px 0 14px;max-width:18ch}
.post p{color:var(--dim);font-size:15px;margin:0 0 22px;flex:1}
.post .go{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer);transition:color .3s,transform .35s var(--ease)}
.post:hover .go{color:var(--a1);transform:translateX(5px)}
.post.soon{opacity:.62}
.post.soon:hover{background:var(--bg)}
.post.soon:hover::before{transform:scaleX(0)}
.post.soon .go{color:var(--dimmer)}

/* ── artículo ────────────────────────────────────── */
.art{display:grid;grid-template-columns:1fr 296px;gap:60px;padding:78px 0 90px;align-items:start}
.art-body{max-width:70ch;font-size:17.5px;line-height:1.72;color:var(--dim)}
.art-body h2{font-size:clamp(23px,2.4vw,34px);text-transform:uppercase;margin:52px 0 18px;max-width:22ch;color:var(--ink)}
.art-body h3{font-family:var(--disp);font-size:clamp(19px,1.8vw,24px);font-weight:600;letter-spacing:-.01em;margin:34px 0 12px;color:var(--ink)}
.art-body p{margin:0 0 20px}
.art-body strong{color:var(--ink);font-weight:600}
.art-body ul,.art-body ol{margin:0 0 22px;padding-left:22px}
.art-body li{margin-bottom:10px}
.art-body li::marker{color:var(--a1)}
.art-body blockquote{margin:30px 0;padding:22px 26px;border-left:2px solid var(--a1);background:var(--surf);color:var(--ink);font-size:18px}
.art-body blockquote p:last-child{margin:0}
.art-body hr{border:none;border-top:1px solid var(--line);margin:44px 0}
.art-body .tabla{width:100%;border-collapse:collapse;margin:26px 0;font-size:15px}
.art-body .tabla th,.art-body .tabla td{border:1px solid var(--line);padding:13px 15px;text-align:left;vertical-align:top}
.art-body .tabla th{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--a1);background:var(--surf);font-weight:400}
.art-side{position:sticky;top:40px;border-left:1px solid var(--line);padding-left:28px}
.art-side h4{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer);margin:0 0 14px;font-weight:400}
.art-side a{display:block;padding:9px 0;font-size:14.5px;color:var(--dim);border-bottom:1px solid var(--line-soft);transition:color .25s,padding-left .35s var(--ease)}
.art-side a:hover{color:var(--a1);padding-left:6px}
.art-side .box{margin-top:32px;border:1px solid var(--line);background:var(--surf);padding:24px 22px}
.art-side .box strong{display:block;font-family:var(--disp);font-size:19px;font-weight:600;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:10px;color:var(--ink);line-height:1.05}
.art-side .box p{margin:0 0 18px;font-size:14px;color:var(--dim)}
.art-side .box .cta{width:100%;justify-content:center;padding:14px 18px;font-size:11px}

/* ── navegación entre páginas ────────────────────── */
.pagenav{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.pagenav a{padding:44px 40px;border-right:1px solid var(--line);transition:background .45s var(--ease)}
.pagenav a:last-child{border-right:none;text-align:right}
.pagenav a:hover{background:var(--surf)}
.pagenav .mono{display:block;margin-bottom:12px;color:var(--dimmer)}
.pagenav strong{font-family:var(--disp);font-size:clamp(20px,2.2vw,32px);font-weight:600;letter-spacing:-.016em;text-transform:uppercase;line-height:1;transition:color .3s}
.pagenav a:hover strong{color:var(--a1)}

/* ── cifras ──────────────────────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kpis>div{padding:44px 30px;border-right:1px solid var(--line)}
.kpis>div:last-child{border-right:none}
.kpis .v{font-family:var(--disp);font-size:clamp(34px,4.4vw,64px);font-weight:600;letter-spacing:-.03em;line-height:.9;color:var(--a1);display:block;margin-bottom:12px}
.kpis .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

/* ── nota / aviso dentro del contenido ───────────── */
.nota{border:1px dashed rgba(249,162,29,.45);background:rgba(249,162,29,.045);padding:24px 26px;margin:0}
.nota strong{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--a1);margin-bottom:10px;font-weight:400}
.nota p{margin:0;color:var(--dim);font-size:15px;max-width:74ch}
.nota p+p{margin-top:10px}

/* el rail lleva 6 entradas: en pantallas bajas se aprieta.
   Medido (13-oct): a tamaño completo, logo + menú + LIMA·PE ocupan 920px de alto;
   sin LIMA·PE y con gap 22, 800px. Los cortes dejan siempre 30px o más de aire. */
@media (min-width:761px) and (max-height:1000px){
  .rail-mark{display:none}
  .rail-nav{gap:22px;margin-block:auto}
}
@media (min-width:761px) and (max-height:860px){
  .rail-nav{gap:16px}
  .rail-nav a{font-size:13px;letter-spacing:.14em}
  .rail-logo{font-size:18px;letter-spacing:.24em}
  .rail-logo .oo{margin-inline-end:.24em}
}
@media (min-width:761px) and (max-height:700px){
  .rail-nav{gap:11px}
  .rail-nav a{font-size:12px;letter-spacing:.1em}
}

/* ── RESPONSIVE ──────────────────────────────────── */
@media (max-width:1080px){
  .steps{grid-template-columns:1fr 1fr}
  .step:nth-child(2){border-right:none}
  .step:nth-child(1),.step:nth-child(2){border-bottom:1px solid var(--line)}
  .resp{grid-template-columns:1fr}
  .resp .ph{min-height:340px}
  .resp-body{border-left:none;border-top:1px solid var(--line);padding:48px 32px}
  .close .wrap{grid-template-columns:1fr;gap:48px}
  .close h2{max-width:18ch}
  .strip{grid-template-columns:1fr 1fr}
  .strip>div:nth-child(2){border-right:none}
  .strip>div:nth-child(1),.strip>div:nth-child(2){border-bottom:1px solid var(--line)}
  .tl-item{grid-template-columns:78px 1fr}
  .tl-side{grid-column:1 / -1;border-left:none;border-top:1px solid var(--line-soft);padding:28px 28px 40px}
  .tl-main{padding-right:28px}
  .art{grid-template-columns:1fr;gap:48px}
  .art-side{position:static;border-left:none;border-top:1px solid var(--line);padding:28px 0 0}
  .posts{grid-template-columns:1fr 1fr}
  .feat{grid-template-columns:1fr}
  .feat-body{padding:48px 0 44px}
  .feat .ph{border-left:none;border-top:1px solid var(--line);min-height:280px}
  .chan{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr}
  .kpis>div:nth-child(2){border-right:none}
  .kpis>div:nth-child(1),.kpis>div:nth-child(2){border-bottom:1px solid var(--line)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:16px}
  .rail{display:none}
  .topbar{display:flex}
  main{margin-left:0;padding-top:60px}
  .wrap{padding:0 20px}
  .pad{padding:74px 0}
  .pad-s{padding:56px 0}
  .hero{min-height:auto}
  .hero .ph{inset:0}
  .hero .wrap{padding-top:96px;padding-bottom:54px}
  h1{max-width:100%}
  .ab{grid-template-columns:1fr}
  .ab-col:first-child{padding-right:0;border-right:none;border-bottom:1px solid var(--line);padding-bottom:24px}
  .ab-col:last-child{padding-left:0}
  .ab-col:last-child li{transform:translateX(-14px)}
  .steps{grid-template-columns:1fr}
  .step{border-right:none;border-bottom:1px solid var(--line);padding:28px 20px 34px}
  .step:last-child{border-bottom:none}
  .pnl{grid-template-columns:1fr;min-height:0}
  .pnl:nth-child(even) .pnl-media{order:0}
  .pnl-body{padding:40px 20px}
  .pnl-media{min-height:260px}
  .resp-body{padding:40px 20px}
  .resp-list em{width:78px}
  .foot-grid{grid-template-columns:1fr;gap:26px}
  .float{right:16px;bottom:16px;padding:12px 16px}
  .close{padding:70px 0}
  .close .wrap{gap:38px}
  .form{padding:26px 20px 24px}
  .frow{grid-template-columns:1fr;gap:0}
  .form-head strong{font-size:23px}

  .phead .ph{inset:0}
  .phead .wrap{padding-top:78px;padding-bottom:44px}
  .strip{grid-template-columns:1fr}
  .strip>div{border-right:none;border-bottom:1px solid var(--line);padding:18px 20px}
  .strip>div:last-child{border-bottom:none}
  .tl-item{grid-template-columns:1fr}
  .tl-n{padding:28px 20px 0}
  .tl-main{padding:14px 20px 30px}
  .tl-side{padding:24px 20px 32px}
  .row{grid-template-columns:1fr}
  .row-k{padding:34px 0 18px;border-right:none}
  .row-v{padding:0 0 38px}
  .posts{grid-template-columns:1fr}
  .post{padding:32px 20px 28px}
  .feat-body{padding:38px 0 34px}
  .chan a,.chan div{padding:30px 20px}
  .kpis{grid-template-columns:1fr}
  .kpis>div{border-right:none;border-bottom:1px solid var(--line);padding:32px 20px}
  .kpis>div:last-child{border-bottom:none}
  .pagenav{grid-template-columns:1fr}
  .pagenav a{border-right:none;border-bottom:1px solid var(--line);padding:30px 20px;text-align:left!important}
  .art{padding:52px 0 64px}
  .faq summary{padding:20px 0;gap:14px}
  .faq .ans{padding-left:28px}
  .nota{padding:20px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  .mask>span,.sp .w>i{transform:none}
  .ab-col li{opacity:1;transform:none}
  h1 .hi::after{clip-path:inset(0 0 0 0)}
  .ph img{transform:none}
  .ph .curtain{transform:translateY(-101%)}
  .ph .sweep,.panel a{display:none}
  .panel.open a{display:block;opacity:1;transform:none}
}

/* ═══════════════════════════════════════════════════════════
   SOLUCIONES · industrias + catálogo filtrable
   Espina tomada de la referencia del sector (industria → catálogo),
   resuelta con la retícula de líneas del sistema, sin cards redondeadas.
   ═══════════════════════════════════════════════════════════ */

/* ── tiles de industria ──────────────────────────── */
.inds{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.ind{position:relative;display:block;width:100%;text-align:left;background:none;border:none;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:32px 28px 34px;cursor:pointer;font-family:inherit;color:inherit;overflow:hidden;transition:background .45s var(--ease)}
.ind::before{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--a1);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.ind:hover{background:var(--surf)}
.ind:hover::before,.ind[aria-pressed="true"]::before{transform:scaleX(1)}
.ind[aria-pressed="true"]{background:var(--surf)}
a.ind{text-decoration:none}
.ind .n{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--dimmer);display:block;margin-bottom:22px}
.ind[aria-pressed="true"] .n{color:var(--a1)}
.ind h3{font-family:var(--disp);font-size:clamp(20px,2vw,28px);font-weight:600;letter-spacing:-.014em;text-transform:uppercase;line-height:.96;margin:0 0 10px;max-width:14ch}
.ind p{margin:0;color:var(--dim);font-size:14.5px;line-height:1.5;max-width:30ch}
.ind .cuenta{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--dimmer);margin-top:18px;display:block}

/* ── barra del catálogo ──────────────────────────── */
.cat-bar{display:flex;gap:22px;align-items:center;justify-content:space-between;padding:26px 0;border-bottom:1px solid var(--line);flex-wrap:wrap;position:sticky;top:0;background:var(--bg);z-index:20}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);background:none;border:1px solid var(--line);padding:8px 13px;cursor:pointer;transition:color .3s,border-color .3s,background .3s}
.chip:hover{color:var(--ink);border-color:rgba(249,162,29,.45)}
.chip[aria-pressed="true"]{color:#0B0B0C;background:var(--a1);border-color:var(--a1);font-weight:700}
.busca{position:relative;flex:0 0 280px;max-width:100%}
.busca input{width:100%;background:#0B0B0C;border:1px solid var(--line);color:var(--ink);font-family:var(--body);font-size:14.5px;padding:11px 14px 11px 34px;border-radius:0;transition:border-color .3s}
.busca input:focus{outline:none;border-color:var(--a1)}
.busca input::placeholder{color:var(--dimmer)}
.busca::before{content:"⌕";position:absolute;left:12px;top:50%;transform:translateY(-52%);color:var(--dimmer);font-size:16px;pointer-events:none}

/* ── retícula del catálogo ───────────────────────── */
.cat-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:20px 0 6px;flex-wrap:wrap}
.cat{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.item{background:var(--bg);padding:26px 28px;display:flex;flex-direction:column;gap:9px;position:relative;transition:background .4s var(--ease)}
.item:hover{background:var(--surf)}
.item .f{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--a1)}
.item h4{font-family:var(--disp);font-size:clamp(17px,1.5vw,21px);font-weight:600;letter-spacing:-.01em;text-transform:uppercase;line-height:1.02;margin:0;max-width:26ch}
.item p{margin:0;color:var(--dim);font-size:14.5px;line-height:1.55;max-width:46ch}
.item .ind-chip{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dimmer);border:1px solid var(--line);padding:5px 9px;align-self:flex-start;margin-top:4px}
.cat-vacio{padding:56px 4px;text-align:center;color:var(--dim);border-bottom:1px solid var(--line)}
.cat-vacio strong{display:block;font-family:var(--disp);font-size:24px;font-weight:600;text-transform:uppercase;letter-spacing:-.01em;color:var(--ink);margin-bottom:10px}

@media (max-width:1080px){
  .inds{grid-template-columns:repeat(2,1fr)}
  .cat{grid-template-columns:1fr}
  .cat-bar{position:static}
}
@media (max-width:760px){
  .inds{grid-template-columns:1fr}
  .ind{padding:26px 20px 28px}
  .busca{flex:1 1 100%}
  .item{padding:22px 20px}
}

/* ═══════════════════════════════════════════════════════════
   ALIANZA CON NORKEN+
   Tres unidades (Asfaltos, Lubricantes y Oil & Gas) se trabajan en
   conjunto. El vínculo se marca con un sello, no cambiando la paleta:
   cada compañía conserva su identidad.
   ═══════════════════════════════════════════════════════════ */

/* ── tira superior (mismo dispositivo que usa Norken, en nuestra paleta) ── */
.tira{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:11px 32px;background:var(--surf);border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.tira a{transition:color .25s}
.tira a:hover{color:var(--a1)}
.tira .der{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.tira b{color:var(--ink);font-weight:400}

/* ── sello de unidad compartida ── */
.sello{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--a1);
  border:1px solid rgba(249,162,29,.42);padding:5px 10px;white-space:nowrap}
.sello::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--a1);flex:none}
.ind .sello{margin-top:16px}
.ind .sello + .cuenta{margin-top:10px}
.item .sello{align-self:flex-start;margin-top:2px}

/* ── banda de alianza ── */
.banda{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surf)}
.banda-txt{padding:58px 52px 58px 44px}
.banda-txt h2{margin-bottom:22px;max-width:15ch}
.banda-txt p{color:var(--dim);margin:0 0 18px;max-width:52ch;font-size:16px}
.banda-txt p:last-of-type{margin-bottom:28px}
.banda-lista{display:grid;gap:1px;background:var(--line);border-left:1px solid var(--line)}
.banda-u{background:var(--surf);padding:30px 40px;display:flex;align-items:center;justify-content:space-between;gap:20px;transition:background .4s var(--ease)}
.banda-u:hover{background:var(--bg)}
.banda-u strong{font-family:var(--disp);font-size:clamp(20px,2.1vw,30px);font-weight:600;letter-spacing:-.016em;text-transform:uppercase;line-height:1}
.banda-u span{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--dimmer);text-align:right}
.banda-u:hover span{color:var(--a1)}

@media (max-width:1080px){
  .banda{grid-template-columns:1fr}
  .banda-txt{padding:48px 32px}
  .banda-lista{border-left:none;border-top:1px solid var(--line)}
}
@media (max-width:760px){
  .tira{padding:10px 20px;gap:10px;font-size:9.5px;letter-spacing:.1em}
  .tira .der{gap:16px}
  .banda-txt{padding:40px 20px}
  .banda-u{padding:24px 20px}
}


/* ── El "CO" del logotipo: dos anillos entrelazados (isotipo oficial) ── */
/* Medido contra marca/logo.jpg: cada anillo mide lo mismo que una mayúscula
   redonda (en Jost, la O va de -.01em a .71em) y su trazo es igual al de las
   letras (.08em). La caja mide lo mismo que el dibujo (viewBox 47×34 a .02353em
   por unidad), sin aire a los costados, y el margen final repite el
   letter-spacing: el CO tiene el mismo espacio antes y después que el resto. */
.oo{display:inline-block;width:1.106em;height:.8em;vertical-align:-.05em;line-height:0;margin-inline-end:.24em}
.oo svg{width:100%;height:100%;display:block;overflow:visible}
.oo circle{stroke-width:3.4}
/* rail (texto vertical): el dibujo se gira dentro de una caja ya girada, así no
   se encoge ni deja huecos a los lados */
.rail-logo .oo{position:relative;width:.8em;height:1.106em;vertical-align:0;margin-inline-end:.3em}
.rail-logo .oo svg{position:absolute;left:50%;top:50%;width:1.106em;height:.8em;transform:translate(-50%,-50%) rotate(90deg)}
/* pie: la C clara y la O ámbar como en el logo; el resto de la palabra sigue tenue.
   El pie va en Jost 300 (trazo .055em), así que el anillo se adelgaza igual. */
.foot-brand .oo{color:var(--ink);margin-inline-end:.13em}
.foot-brand .oo circle{stroke-width:2.35}

/* Texto accesible oculto: el "CO" del logotipo es un dibujo, pero la palabra
   completa tiene que seguir existiendo para Google y los lectores de pantalla. */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Datos legales de la empresa en el pie (razon social, RUC, domicilio fiscal) */
.datos-emp{margin:16px 0 0;font-size:13px;line-height:1.75;color:var(--dim)}
.datos-emp b{color:var(--ink)}
.datos-emp a{display:inline;font-size:13px;color:var(--dim);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.datos-emp a:hover{border-bottom-color:var(--a1)}

/* ── Lista de productos por sector (sectores.html) ─────────────────
   Nombre comercial, funcion y detalle tecnico. Sin fichas colgadas:
   el cliente pidio nombrarlos, no publicar los PDF. */
.prods{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--line)}
.prods li{padding:13px 0;border-bottom:1px solid var(--line)}
.prods li b{display:block;font-family:var(--disp);font-weight:500;font-size:16px;letter-spacing:.01em;color:var(--ink)}
.prods li i{display:block;font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--a1);margin-top:3px}
.prods li span{display:block;font-size:14px;line-height:1.6;color:var(--dim);margin-top:6px;max-width:62ch}
.prods-pie{margin:14px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dimmer)}
.prods-pie a{color:var(--a1);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.prods-pie a:hover{border-bottom-color:var(--a1)}
.specs i.sello{background:rgba(249,162,29,.12);color:var(--a1);border-color:rgba(249,162,29,.3)}
/* el panel de Petroleo lista 35: que no se dispare el alto */
.pnl-body .prods{max-height:none}

/* Sectores con muchos productos: los primeros 6 a la vista, el resto plegado (sigue en el HTML para Google) */
.prods-mas>summary{list-style:none;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--a1);padding:15px 0;border-bottom:1px solid var(--line);transition:color .3s var(--ease)}
.prods-mas>summary::-webkit-details-marker{display:none}
.prods-mas>summary::after{content:"  +"}
.prods-mas[open]>summary::after{content:"  −"}
.prods-mas>summary:hover{color:var(--ink)}
.prods-mas>summary:focus-visible{outline:1px solid var(--a1);outline-offset:4px}
.prods-mas .prods{margin-top:0;border-top:0}
/* Con la lista abierta la foto no se estira: se queda a la altura de la pantalla y acompaña el scroll */
@media (min-width:761px){.pnl:has(.prods-mas[open]) .pnl-media{align-self:start;position:sticky;top:0;height:100vh}}