/* Concepto: una plática de WhatsApp que se lee hacia abajo; a la derecha, un teléfono fijo que se arma con cada etapa. */
:root{
  --niebla:#DCE8EA; --petroleo:#044A53; --tinta:#04262B; --cereza:#C0262D; --blanco:#FFFFFF;
  --bg:#DCE8EA; --ink:#04262B; --ink-soft:#2E4C51; --brand:#044A53; --accent:#C0262D; --line:rgba(4,38,43,.18);
  --us-bg:#FFFFFF; --us-ink:#04262B; --me-bg:#044A53; --me-ink:#FFFFFF; --file-line:rgba(4,38,43,.25);
  --edge:#04262B; --logo:#044A53; --dot:#C0262D; --focus:#C0262D;
  --scr:#FFFFFF; --scr-line:#B8C9CC; --scr-ink:#5B7479; --scr-niebla:#DCE8EA; --scr-pet:#044A53; --scr-cer:#C0262D;
  --display:'Young Serif',Georgia,'Times New Roman',serif; --body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#04262B; --ink:#DCE8EA; --ink-soft:#A9C2C6; --brand:#DCE8EA; --accent:#FF9A9E; --line:rgba(220,232,234,.2);
  --us-bg:#0B3A42; --us-ink:#DCE8EA; --me-bg:#DCE8EA; --me-ink:#04262B; --file-line:rgba(220,232,234,.3);
  --edge:#DCE8EA; --logo:#DCE8EA; --dot:#FF9A9E; --focus:#FF9A9E; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#04262B; --ink:#DCE8EA; --ink-soft:#A9C2C6; --brand:#DCE8EA; --accent:#FF9A9E; --line:rgba(220,232,234,.2);
  --us-bg:#0B3A42; --us-ink:#DCE8EA; --me-bg:#DCE8EA; --me-ink:#04262B; --file-line:rgba(220,232,234,.3);
  --edge:#DCE8EA; --logo:#DCE8EA; --dot:#FF9A9E; --focus:#FF9A9E; color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.45}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.wrap{max-width:1180px;margin-inline:auto}
.logo{height:28px;width:auto;color:var(--logo);display:block}
.grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(24px,6vw,96px);align-items:start}
.chat{min-width:0}
.chat-head{display:flex;align-items:center;gap:12px;padding:10px 16px 10px 10px;background:var(--me-bg);color:var(--me-ink);border-radius:999px;width:fit-content;margin-bottom:8px}
.chat-head .av{width:34px;height:34px;border-radius:50%;background:var(--petroleo);padding:5px;flex:none}
.chat-head strong{display:block;font-size:16px;line-height:1.1}
.chat-head span{font-size:13px;opacity:.85}
.step{padding-block:clamp(40px,9vh,96px);scroll-margin-top:40px}
.step-head{display:flex;align-items:baseline;gap:16px;margin-bottom:20px}
.num{font-weight:800;font-size:18px;width:38px;height:38px;border-radius:50%;border:3px solid var(--brand);display:inline-flex;align-items:center;justify-content:center;flex:none;transform:translateY(-.55em);color:var(--brand);transition:background .4s,color .4s,border-color .4s}
.step h5{font-family:var(--display);font-weight:400;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1;margin:0;color:var(--brand);text-wrap:balance;transition:opacity .4s}
.step:not(.on) h5{opacity:.6}
.step.on .num{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.step:last-of-type.on .num{color:var(--fin-ink,#fff);background:var(--fin-bg,var(--cereza));border-color:var(--fin-bg,var(--cereza))}
.thread{display:flex;flex-direction:column;gap:10px;padding-left:54px}
.msg{max-width:min(100%,30rem);padding:12px 16px;font-size:18px;line-height:1.4;position:relative}
.msg p{margin:0}
.msg.us{align-self:flex-start;background:var(--us-bg);color:var(--us-ink);border-radius:4px 20px 20px 20px}
.msg.me{align-self:flex-end;background:var(--me-bg);color:var(--me-ink);border-radius:20px 4px 20px 20px}
.msg.fin{background:var(--fin-b,var(--cereza));color:var(--fin-ink2,#fff);font-family:var(--display);font-size:26px;line-height:1.1}
.msg.file{border:2px dashed var(--file-line);background:transparent;color:var(--ink)}
.rec{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.fl{display:flex;gap:12px;align-items:center}
.fl strong{display:block;font-size:17px;line-height:1.2}
.fl span{display:block;font-size:15px;color:var(--ink-soft);line-height:1.3}
.doc{width:26px;height:30px;flex:none;color:var(--brand)}
.stage{position:sticky;top:calc(50vh - 300px);align-self:start;padding-top:8px}
.stage-in{display:flex;flex-direction:column;align-items:center;gap:20px}
.stage-txt{display:flex;flex-direction:column;align-items:center;gap:14px}
.stage-note{font-size:14px;line-height:1.35;color:var(--ink-soft);text-align:center;max-width:300px}
.stage-note a{font-weight:700;color:var(--ink)}
.cap{font-size:15px;font-weight:700;color:var(--ink);text-align:center}
.cap b{color:var(--accent)}
.dots{display:flex;align-items:center}
.dot{width:30px;height:30px;border-radius:50%;border:3px solid var(--brand);color:var(--brand);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;text-decoration:none;transition:background .4s,border-color .4s,color .4s}
.dot.done{background:var(--dd-bg,var(--brand));color:var(--dd-ink,var(--bg))}
.dot[aria-current="step"]{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.dl{width:18px;border-top:4px dotted var(--accent)}
.phone-box{width:246px;height:420px}
.phone{width:246px;height:420px;border:6px solid var(--edge);border-radius:38px;background:var(--scr);position:relative;overflow:hidden;transform-origin:0 0;transition:border-color .5s}
.phone *{transition:background-color .5s ease,border-color .5s ease,opacity .5s ease,transform .5s ease,color .5s ease}
.pe{position:absolute;box-sizing:border-box;border:2px dotted var(--scr-line);opacity:.55;background:transparent}
.p-notch{left:87px;top:8px;width:60px;height:6px;border-radius:3px;background:var(--edge);border:0;opacity:1}
.p-bar{left:14px;top:28px;width:206px;height:16px;border-radius:8px}
.p-hero{left:14px;top:54px;width:206px;height:140px;border-radius:10px}
.p-c{top:206px;width:62px;height:78px;border-radius:8px}
.p-c1{left:14px}.p-c2{left:86px}.p-c3{left:158px}
.p-btn{left:14px;top:298px;width:122px;height:34px;border-radius:17px}
.p-l1{left:14px;top:348px;width:190px;height:8px;border-radius:4px}
.p-l2{left:14px;top:364px;width:140px;height:8px;border-radius:4px}
.px{position:absolute;pointer-events:none}
.p-empty{left:14px;top:54px;width:206px;height:140px;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--display);font-size:20px;line-height:1.1;color:var(--scr-pet);padding:0 24px}
.p-lab{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--scr-ink);opacity:0;display:flex;align-items:center;justify-content:center;text-align:center}
.lab-h{left:14px;top:54px;width:206px;height:140px}
.lab-c1{left:14px;top:206px;width:62px;height:78px}.lab-c2{left:86px;top:206px;width:62px;height:78px}.lab-c3{left:158px;top:206px;width:62px;height:78px}
.lab-b{left:14px;top:298px;width:122px;height:34px}
.p-t{background:#fff;opacity:0;border-radius:6px;height:12px}
.p-t1{left:30px;top:76px;width:110px}.p-t2{left:30px;top:98px;width:78px;height:8px;opacity:0}
.p-bt{left:14px;top:298px;width:122px;height:34px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:12px;opacity:0}
.p-pin{width:22px;height:22px;border-radius:50%;background:var(--scr-cer);color:#fff;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.4)}
.pin1{left:198px;top:44px}.pin2{left:52px;top:196px}.pin3{left:126px;top:286px}
.p-ok{left:156px;top:304px;font-weight:800;font-size:12px;color:var(--scr-cer);opacity:0;white-space:nowrap}
.p-final{inset:0;opacity:0;background:#111}
.p-final img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.p-live{left:50%;bottom:16px;transform:translateX(-50%) translateY(8px);background:#fff;color:var(--scr-pet);font-weight:800;font-size:12px;padding:6px 12px;border-radius:999px;display:flex;align-items:center;gap:6px;opacity:0;white-space:nowrap}
.p-live i{width:8px;height:8px;border-radius:50%;background:var(--scr-cer);display:block}
/* estados acumulativos */
.proceso.s2 .pe:not(.p-notch){border-style:dashed;border-color:#8FA6AA;opacity:1}
.proceso.s2 .p-empty{opacity:0}
.proceso.s2 .p-lab{opacity:1}
.proceso.s3 .p-lab{opacity:0}
.proceso.s3 .pe:not(.p-notch){border-style:solid;border-color:transparent;opacity:1}
.proceso.s3 .p-bar{background:var(--scr-niebla);border-color:transparent}
.proceso.s3 .p-hero{background:var(--scr-pet);border-color:transparent}
.proceso.s3 .p-c{background:var(--scr-niebla);border-color:transparent}
.proceso.s3 .p-btn{background:var(--scr-cer);border-color:transparent}
.proceso.s3 .p-l1,.proceso.s3 .p-l2{background:var(--scr-niebla);border-color:transparent;opacity:1}
.proceso.s3 .p-t{opacity:1}.proceso.s3 .p-t2{opacity:.6}
.proceso.s3 .p-bt{opacity:1}
.proceso.s4 .p-pin{opacity:1;transform:scale(1)}
.proceso.s4 .p-ok{opacity:1}
.proceso.s5 .p-final{opacity:1}
.proceso.s5 .p-live{opacity:1;transform:translateX(-50%)}
.proceso.s5 .phone{border-color:var(--fin-edge,var(--cereza))}
.end{padding-block:clamp(40px,8vw,80px) 56px;max-width:40rem;font-size:15px;color:var(--ink-soft)}
.end a{font-weight:700;color:var(--ink)}
@media (max-width:860px){
  body{font-size:17px}
  .grid{grid-template-columns:minmax(0,1fr);gap:0}
  .stage{order:-1;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);margin-inline:calc(-1 * clamp(16px,4vw,48px));padding:10px clamp(16px,4vw,48px);border-bottom:2px solid var(--line)}
  .stage-in{flex-direction:row;align-items:center;gap:16px}
  .phone-box{width:106px;height:181px;flex:none}
  .phone{transform:scale(.431)}
  .stage-txt{display:flex;flex-direction:column;gap:10px;min-width:0}
  .cap{text-align:left;font-size:17px}
  .stage-note{text-align:left;font-size:12px}
  .step{scroll-margin-top:220px;padding-block:44px}
  .thread{padding-left:0}
  .step-head{align-items:center}
  .num{transform:none}
    .dot{width:26px;height:26px;font-size:12px}.dl{width:10px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.phone *,.num,.dot,.step h5{transition:none!important}}

/* ===== página completa ===== */
:root{--card:#FFFFFF;--card-ink:#04262B;--field-line:#5B7479;--cereza-hover:#9F1F25;--header-h:68px}
body{padding-inline:0}
.wrap{padding-inline:clamp(16px,4vw,48px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.draft{background:var(--tinta);color:var(--niebla);font-size:13px;line-height:1.35;padding:8px clamp(16px,4vw,48px);text-align:center}
.draft b{color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;font:800 18px/1 var(--body);text-decoration:none;border:0;cursor:pointer;transition:background-color .2s,color .2s,transform .2s;text-align:center}
.btn:active{transform:translateY(1px)}
.btn-wa{background:var(--cereza);color:#fff}
.btn-wa:hover{background:var(--cereza-hover)}
.btn-inv{background:#fff;color:var(--cereza)}
.btn-inv:hover{background:var(--niebla)}
.btn-sm{min-height:44px;padding:0 20px;font-size:16px}
.link{font-weight:800;color:var(--ink);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px;text-decoration-color:var(--accent);font-size:18px;display:inline-flex;gap:6px;align-items:center}
.link:hover{text-decoration-color:var(--ink)}
/* encabezado */
.site-head{background:var(--bg);position:sticky;top:env(safe-area-inset-top,0px);z-index:30;border-bottom:2px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--header-h)}
.site-head nav{display:none;gap:clamp(16px,2.2vw,28px);align-items:center}
.site-head nav a:not(.btn){font-weight:700;font-size:16px;text-decoration:none;color:var(--ink);padding-block:8px}
.site-head nav a:not(.btn):hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px;text-decoration-color:var(--accent)}
.site-head .menu-cta{display:none}
.burger{display:none;width:48px;height:48px;border:0;border-radius:12px;background:transparent;cursor:pointer;position:relative;flex:none;color:var(--ink)}
.burger span,.burger span::before,.burger span::after{position:absolute;left:11px;width:26px;height:3px;border-radius:2px;background:currentColor;content:"";transition:transform .25s,top .25s,opacity .2s}
.burger span{top:22px}.burger span::before{left:0;top:-8px}.burger span::after{left:0;top:8px}
.site-head.open .burger span{background:transparent}
.site-head.open .burger span::before{top:0;transform:rotate(45deg)}
.site-head.open .burger span::after{top:0;transform:rotate(-45deg)}
main section[id]{scroll-margin-top:calc(var(--header-h) + 4px)}
@media (min-width:861px){.site-head nav{display:flex}.stage{top:calc(var(--header-h) + 20px)!important}.step{scroll-margin-top:calc(var(--header-h) + 24px)}}
@media (max-width:860px){
  :root{--header-h:60px}
  .site-head .hd-cta{display:none}
  .burger{display:block}
  .site-head.open nav{display:flex;flex-direction:column;align-items:stretch;gap:2px;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:2px solid var(--line);padding:12px clamp(16px,4vw,48px) 20px}
  .site-head nav a:not(.btn){font-family:var(--display);font-weight:400;font-size:26px;padding:10px 0;border-bottom:1px solid var(--line)}
  .site-head.open .menu-cta{display:inline-flex;margin-top:14px;min-height:52px;font-size:18px}
}
.site-head .btn{min-height:44px;padding:0 20px;font-size:16px}
/* entrada */
.hero{overflow:clip;padding-block:clamp(28px,5vw,64px) clamp(48px,8vw,104px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,64px);align-items:center}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(3.1rem,8.6vw,7.6rem);line-height:.96;margin:0;color:var(--brand);text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--accent);display:block}
.hero .sub{font-size:clamp(1.25rem,2.6vw,1.75rem);font-weight:500;margin:clamp(18px,3vw,32px) 0 0;max-width:24ch;line-height:1.25}
.hero .cta{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;margin-top:clamp(24px,4vw,40px)}
.hero .what{margin:clamp(24px,4vw,44px) 0 0;font-weight:800;font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.scene{position:relative;width:100%;max-width:460px;margin-inline:auto;aspect-ratio:1/1.12}
.scene .bg{position:absolute;inset:-4% -8% 0 -8%;width:116%;height:auto}
.scene .bg path:first-child{fill:var(--brand)}
.scene .bg path:last-child{fill:var(--cereza)}
.scene .ph{position:absolute;left:24%;top:5%;width:50%;border:5px solid var(--tinta);border-radius:30px;overflow:hidden;transform:rotate(-3deg);background:#fff;box-shadow:0 18px 0 -8px rgba(4,38,43,.0)}
.scene .ph img{display:block;width:100%}
.scene .chip{position:absolute;background:var(--card);color:var(--card-ink);border-radius:999px;font-weight:700;font-size:clamp(12px,1.9vw,16px);padding:9px 16px;display:flex;align-items:center;gap:8px;white-space:nowrap}
.scene .chip svg{width:1.1em;height:1.1em;flex:none}
.scene .s1{left:-8%;top:1%}
.scene .s2{right:-4%;bottom:21%;background:var(--petroleo);color:#fff;border-radius:20px 20px 4px 20px;padding:10px 16px}
.scene .s3{left:2%;bottom:7%;border-radius:18px;padding:10px 14px;gap:10px}
.scene .s3 b{font-family:var(--display);font-weight:400;font-size:clamp(22px,4vw,32px);line-height:1}
.scene .s3 i{width:16px;height:16px;border-radius:50%;display:block;border:2px solid var(--card-ink)}
/* trabajos */
.work{background:var(--petroleo);color:#fff;padding-block:clamp(56px,9vw,120px)}
.work h1,.work h2{font-family:var(--display);font-weight:400;font-size:clamp(3.4rem,12vw,9rem);line-height:.95;margin:0 0 clamp(24px,4vw,56px);color:#fff}
.work .grid2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:start}
.case{display:flex;gap:16px;align-items:baseline}
.case .n{font-weight:800;font-size:20px;color:var(--niebla)}
.case h3{font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1;margin:0;color:#fff}
.work p{margin:16px 0 0 38px;font-size:clamp(1.05rem,1.8vw,1.25rem);color:var(--niebla);max-width:34ch}
.work p.res{color:#fff;font-weight:500}
.work .tags{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0 38px;padding:0;list-style:none}
.work .tags li{border:2px solid var(--niebla);color:var(--niebla);font-weight:700;font-size:15px;padding:3px 12px;border-radius:999px}
.work .link{color:#fff;margin:22px 0 0 38px;text-decoration-color:#fff}
.shots{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,2vw,22px);align-items:start;padding-bottom:40px}
.shots img{display:block;width:100%;border:4px solid var(--tinta);border-radius:clamp(14px,2.4vw,28px);background:#111}
.shots img:nth-child(1){margin-top:56px}
.shots img:nth-child(2){margin-top:0}
.shots img:nth-child(3){margin-top:84px}
.next{margin-top:clamp(32px,5vw,64px);border-top:2px dashed var(--niebla);padding-top:28px;display:flex;flex-wrap:wrap;gap:20px 32px;align-items:center;justify-content:space-between}
.next>div:first-child{display:flex;gap:16px;align-items:baseline}
.next .n{font-weight:800;font-size:20px;color:var(--niebla)}
.next span.t{font-family:var(--display);font-size:clamp(1.8rem,4vw,3rem);line-height:1.05;color:#fff}
/* contacto */
.contact{background:var(--cereza);color:#fff;padding-block:clamp(56px,9vw,120px)}
.contact .wrap{row-gap:24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(32px,5vw,80px);align-items:start}
.contact h1,.contact h2{grid-column:1/-1;font-family:var(--display);font-weight:400;font-size:clamp(3.4rem,11vw,8.4rem);line-height:.95;margin:0 0 4px;color:#fff}
.hello{background:#fff;color:var(--card-ink);border-radius:4px 22px 22px 22px;padding:14px 20px;font-size:clamp(1.1rem,2vw,1.35rem);line-height:1.35;max-width:30rem;margin:0 0 24px}
.contact .lead{font-size:clamp(1.05rem,1.9vw,1.25rem);max-width:32rem;margin:0 0 28px}
.form{background:var(--card);color:var(--card-ink);border-radius:22px;padding:clamp(20px,3vw,32px)}
.form h3{font-family:var(--display);font-weight:400;font-size:clamp(1.8rem,3.4vw,2.4rem);margin:0 0 4px;color:var(--petroleo)}
.form .hint{margin:0 0 20px;font-size:15px;color:#2E4C51}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-weight:800;font-size:16px}
.field .help{font-size:14px;color:#2E4C51;margin-top:-2px}
.field input,.field select,.field textarea{font:500 17px/1.3 var(--body);color:var(--card-ink);background:#fff;border:2px solid var(--field-line);border-radius:12px;padding:12px 14px;width:100%;min-height:48px}
.field textarea{min-height:110px;resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--cereza);outline-offset:2px;border-color:var(--card-ink)}
.field [aria-invalid="true"]{border-color:var(--cereza);border-width:3px}
.field .err{color:#9F1F25;font-weight:700;font-size:14px;min-height:0}
.form .btn{width:100%;margin-top:6px;background:var(--cereza);color:#fff}
.form .btn:hover{background:var(--cereza-hover)}
.form .priv{font-size:14px;margin:14px 0 0;color:#2E4C51}
.status{margin-top:14px;padding:14px 16px;border-radius:12px;font-weight:700;font-size:16px;line-height:1.35}
.status[hidden]{display:none}
.status.ok{background:var(--niebla);color:var(--card-ink);border:2px solid var(--petroleo)}
.status.bad{background:#fff;color:#9F1F25;border:3px solid var(--cereza)}
.status small{display:block;font-weight:500;margin-top:4px;color:#2E4C51}
/* servicios */
.serv{padding-block:clamp(56px,9vw,120px);border-top:2px solid var(--line)}
.serv h1,.serv h2{font-family:var(--display);font-weight:400;font-size:clamp(2.6rem,7.2vw,6rem);line-height:1;margin:0;color:var(--brand);max-width:14em;text-wrap:balance}
.serv h2 em{display:block;font-style:normal;color:var(--accent)}
.serv-lead{font-size:clamp(1.15rem,2.2vw,1.5rem);max-width:34rem;margin:clamp(20px,3vw,32px) 0 0;color:var(--ink-soft)}
.serv-list{list-style:none;margin:clamp(36px,6vw,72px) 0 0;padding:0;border-top:2px solid var(--line)}

.serv-list h3{font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,5.4vw,4.4rem);line-height:1;margin:0;color:var(--brand)}
.svc-row p{margin:0;font-size:clamp(1.05rem,1.8vw,1.25rem);max-width:36rem}
.tags2{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.tags2 li{border:2px solid var(--ink-soft);color:var(--ink);font-weight:700;font-size:15px;padding:3px 12px;border-radius:999px}
.serv-foot{margin:clamp(24px,4vw,40px) 0 0;font-weight:700;font-size:clamp(1.05rem,1.8vw,1.25rem);max-width:36rem}
/* botón en forma de mensaje enviado */
.btn-send{background:var(--tinta);color:#fff;border:2px solid #fff;border-radius:24px 24px 4px 24px;min-height:56px;padding:0 30px;font-size:19px}
.btn-send:hover{background:#fff;color:var(--tinta)}
.btn-send::after{content:"→";margin-left:10px;font-weight:800}
.sendnote,.work p.sendnote{margin:10px 0 0;font-size:14px;max-width:none}
.work .btn-send{background:#fff;color:var(--tinta);border-color:#fff}
.work .btn-send:hover{background:var(--niebla)}
.next-cta{display:flex;flex-direction:column;align-items:flex-start}
/* nosotros */
.about{padding-block:clamp(56px,9vw,120px)}
.about h1,.about h2{font-family:var(--display);font-weight:400;font-size:clamp(3rem,9vw,7rem);line-height:.98;margin:0;color:var(--brand)}
.about-lead{font-size:clamp(1.3rem,2.8vw,2rem);line-height:1.25;max-width:36rem;margin:clamp(20px,3vw,36px) 0 0;font-weight:500}
.about-list{list-style:none;margin:clamp(36px,6vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
.about-list li{border-top:5px solid var(--accent);padding-top:20px}
.about-list h3{font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.05;margin:0 0 12px;color:var(--brand)}
.about-list p{margin:0;font-size:clamp(1.05rem,1.6vw,1.2rem);max-width:26rem}
@media (max-width:860px){.about-list{grid-template-columns:minmax(0,1fr)}}
/* acordeón de servicios */
.serv-list>li{display:block;padding-block:clamp(24px,4vw,44px);border-bottom:2px solid var(--line)}
.svc-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px clamp(24px,5vw,72px);align-items:start;cursor:pointer}
.more{margin-top:22px;display:inline-flex;align-items:center;gap:12px;background:transparent;color:var(--brand);border:3px solid var(--brand);border-radius:999px;min-height:48px;padding:0 20px;font:800 17px/1 var(--body);cursor:pointer;transition:background-color .2s,color .2s}
.more:hover,.more[aria-expanded="true"]{background:var(--brand);color:var(--bg)}
.more-i{position:relative;width:16px;height:16px;flex:none}
.more-i::before,.more-i::after{content:"";position:absolute;left:0;top:7px;width:16px;height:3px;background:currentColor;border-radius:2px;transition:transform .25s}
.more-i::after{transform:rotate(90deg)}
.more[aria-expanded="true"] .more-i::after{transform:rotate(0)}
.panel[hidden]{display:none}
.panel{margin-top:clamp(24px,4vw,40px);padding-top:clamp(24px,4vw,40px);border-top:2px dashed var(--line);cursor:auto}
.ph{font-family:var(--display);font-size:clamp(2.2rem,5vw,3.8rem);line-height:1;color:var(--brand);margin:0 0 12px}
.ph-sub{font-size:clamp(1.05rem,2vw,1.3rem);color:var(--ink-soft);max-width:30rem;margin:0 0 8px}
.proceso{padding-block:8px 0}
.panel-end{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;padding-block:32px 8px}
.close{background:transparent;border:0;font:800 17px/1 var(--body);color:var(--ink);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px;text-decoration-color:var(--accent);cursor:pointer;min-height:44px;padding:0 4px}
/* tarjetas de servicio */
.serv-list{border-top:0;display:flex;flex-direction:column;gap:clamp(16px,2.4vw,28px)}
.serv-list>li{border:0;padding:0}
.svc-row{border-radius:clamp(22px,3vw,36px);padding:clamp(22px,4vw,52px);align-items:center}
.svc-row h3{color:inherit;font-size:clamp(2.8rem,6vw,5rem)}
.svc-art{margin-top:clamp(16px,2.4vw,28px);max-width:300px}
.svc-art svg{display:block;width:100%;height:auto}
.svc-row .tags2 li{border-color:currentColor;color:inherit}
.svc-row .more{border-color:currentColor;color:inherit}
.svc[data-svc="marca"] .svc-row{background:var(--cereza);color:#fff}
.svc[data-svc="web"] .svc-row{background:var(--petroleo);color:#fff}
.svc[data-svc="redes"] .svc-row{background:var(--card);color:var(--card-ink);border:2px solid var(--line)}
.svc[data-svc="marca"] .more:hover,.svc[data-svc="marca"] .more[aria-expanded="true"]{background:#fff;color:var(--cereza);border-color:#fff}
.svc[data-svc="web"] .more:hover,.svc[data-svc="web"] .more[aria-expanded="true"]{background:#fff;color:var(--petroleo);border-color:#fff}
.svc[data-svc="redes"] .more:hover,.svc[data-svc="redes"] .more[aria-expanded="true"]{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.svc[data-svc="marca"] .svc-row :focus-visible,.svc[data-svc="web"] .svc-row :focus-visible{outline-color:#fff}
.svc-row p{max-width:34rem}
@media (max-width:860px){.more{font-size:16px;padding:0 16px;gap:8px;max-width:100%}.svc-art{max-width:260px}}
/* tarjeta continua */
.svc{--cpad:clamp(22px,4vw,52px)}
.serv-list>li.svc{padding:var(--cpad);border-radius:clamp(22px,3vw,36px)}
.svc .svc-row{background:none!important;border:0!important;border-radius:0;padding:0}
.svc[data-svc="marca"]{background:var(--cereza);color:#fff;--bg:#C0262D;--ink:#fff;--ink-soft:#FBE3E4;--brand:#fff;--accent:#fff;--line:rgba(255,255,255,.4);--us-bg:#fff;--us-ink:#04262B;--me-bg:#04262B;--me-ink:#fff;--file-line:rgba(255,255,255,.6);--edge:#04262B;--focus:#fff;--fin-bg:#fff;--fin-ink:#C0262D;--fin-b:#04262B;--fin-ink2:#fff;--fin-edge:#fff;--dd-bg:rgba(255,255,255,.35);--dd-ink:#fff}
.svc[data-svc="web"]{background:var(--petroleo);color:#fff;--bg:#044A53;--ink:#fff;--ink-soft:#C9DDE0;--brand:#fff;--accent:#FF9A9E;--line:rgba(255,255,255,.3);--us-bg:#fff;--us-ink:#04262B;--me-bg:#C0262D;--me-ink:#fff;--file-line:rgba(255,255,255,.5);--edge:#DCE8EA;--focus:#fff;--fin-bg:#FF9A9E;--fin-ink:#044A53;--fin-b:#DCE8EA;--fin-ink2:#04262B;--fin-edge:#FF9A9E;--dd-bg:#fff;--dd-ink:#044A53}
.svc[data-svc="redes"]{background:#fff;color:#04262B;border:2px solid rgba(4,38,43,.18);--bg:#fff;--ink:#04262B;--ink-soft:#2E4C51;--brand:#044A53;--accent:#C0262D;--line:rgba(4,38,43,.18);--us-bg:#DCE8EA;--us-ink:#04262B;--me-bg:#044A53;--me-ink:#fff;--file-line:rgba(4,38,43,.3);--edge:#04262B;--focus:#C0262D;--fin-bg:#C0262D;--fin-ink:#fff;--fin-b:#C0262D;--fin-ink2:#fff;--fin-edge:#C0262D;--dd-bg:#044A53;--dd-ink:#fff}
.svc .panel{border-top:0;margin-top:clamp(36px,5vw,64px);padding-top:0}
.svc .ph{color:var(--brand)}
.svc .btn-send{background:#04262B;color:#fff;border-color:#fff}
.svc[data-svc="redes"] .btn-send{border-color:#04262B}
.svc .btn-send:hover{background:#fff;color:#04262B}
.svc[data-svc="redes"] .btn-send:hover{background:#DCE8EA;border-color:#04262B}
.svc .stage{margin-inline:0}
.svc[data-svc="marca"] .more.hint{background:#fff;color:var(--cereza);border-color:#fff}
.svc[data-svc="web"] .more.hint{background:#fff;color:var(--petroleo);border-color:#fff}
.svc[data-svc="redes"] .more.hint{background:var(--tinta);color:#fff;border-color:var(--tinta)}
@media (max-width:860px){.svc .stage{margin-inline:calc(-1 * var(--cpad));padding-inline:var(--cpad);top:calc(var(--header-h) + env(safe-area-inset-top,0px));border-bottom:2px solid var(--line)}}
/* teléfono de web */
.web-final{background:#fff}
/* teléfono de marca */
.m-logo{left:14px;top:28px;width:206px;height:104px;border-radius:12px}
.m-sw{top:144px;width:62px;height:50px;border-radius:10px}
.m-sw1{left:14px}.m-sw2{left:86px}.m-sw3{left:158px}
.m-type{left:14px;top:206px;width:206px;height:80px;border-radius:12px}
.m-voice{left:14px;top:298px;width:206px;height:76px;border-radius:12px}
.m-lb-logo{left:14px;top:28px;width:206px;height:104px}.m-lb-sw{left:14px;top:144px;width:206px;height:50px}.m-lb-type{left:14px;top:206px;width:206px;height:80px}.m-lb-voice{left:14px;top:298px;width:206px;height:76px}
.m-t{opacity:0}
.m-logoimg{left:14px;top:28px;width:206px;height:104px;display:flex;align-items:center;justify-content:center}
.m-ico{width:56px;height:56px;display:block}
.m-typet{left:14px;top:206px;width:206px;height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--scr-pet)}
.m-typet b{font-family:var(--display);font-weight:400;font-size:40px;line-height:1}
.m-typet span{font-size:11px;font-weight:700}
.m-voicet{left:14px;top:298px;width:206px;height:76px;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 16px;font-family:var(--display);font-size:16px;line-height:1.15;color:var(--scr-pet)}
.proceso.s3 .m-t{opacity:1}
.proceso.s3 .m-logo{background:var(--scr-pet)}
.proceso.s3 .m-sw1{background:var(--scr-niebla)}.proceso.s3 .m-sw2{background:var(--scr-pet)}.proceso.s3 .m-sw3{background:var(--scr-cer)}
.proceso.s3 .m-type,.proceso.s3 .m-voice{background:var(--scr-niebla)}
.k-marca .pin1{left:200px;top:20px}.k-marca .pin2{left:200px;top:134px}.k-marca .pin3{left:200px;top:290px}
.k-marca .p-ok{left:14px;top:382px}
.fin-marca{background:var(--scr-pet);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#fff;text-align:center;padding:20px}
.fin-marca .m-ico{width:64px;height:64px}
.fin-marca b{font-family:var(--display);font-weight:400;font-size:26px;line-height:1}
.fin-marca .sw{display:flex;gap:8px}.fin-marca .sw i{width:24px;height:24px;border-radius:50%;display:block;border:2px solid #fff}
.fin-marca small{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
/* teléfono de redes */
.k-redes .p-empty{left:26px;top:172px;width:182px;height:46px;background:#fff;border:2px dotted var(--scr-line);border-radius:12px;font-size:16px;padding:0 8px}
.r-av{left:14px;top:26px;width:46px;height:46px;border-radius:50%}
.r-nm{left:70px;top:32px;width:120px;height:12px;border-radius:6px}
.r-bio{left:70px;top:52px;width:90px;height:8px;border-radius:4px}
.r-g{width:62px;height:62px;border-radius:8px}
.r-g1,.r-g4,.r-g7{left:14px}.r-g2,.r-g5,.r-g8{left:86px}.r-g3,.r-g6,.r-g9{left:158px}
.r-g1,.r-g2,.r-g3{top:90px}.r-g4,.r-g5,.r-g6{top:162px}.r-g7,.r-g8,.r-g9{top:234px}
.r-cal{left:14px;top:312px;width:206px;height:44px;border-radius:10px}
.r-lb-p{left:14px;top:26px;width:206px;height:46px}.r-lb-g{left:14px;top:90px;width:206px;height:206px}.r-lb-c{left:14px;top:312px;width:206px;height:44px}
.r-calt{left:14px;top:312px;width:206px;height:44px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:12px}
.proceso.s3 .r-av,.proceso.s3 .r-cal,.proceso.s3 .r-g1,.proceso.s3 .r-g6,.proceso.s3 .r-g8{background:var(--scr-pet)}
.proceso.s3 .r-nm,.proceso.s3 .r-bio,.proceso.s3 .r-g2,.proceso.s3 .r-g4,.proceso.s3 .r-g9{background:var(--scr-niebla)}
.proceso.s3 .r-g3,.proceso.s3 .r-g5,.proceso.s3 .r-g7{background:var(--scr-cer)}
.proceso.s3 .r-calt{opacity:1}
.k-redes .pin1{left:52px;top:18px}.k-redes .pin2{left:184px;top:148px}.k-redes .pin3{left:200px;top:300px}
.k-redes .p-ok{left:14px;top:372px}
.proceso.k-redes.s5 .p-pin,.proceso.k-redes.s5 .p-ok{opacity:0}
.proceso.k-redes.s5 .r-g{border-radius:14px}
@media (max-width:860px){.svc-row{grid-template-columns:minmax(0,1fr)}.panel-end{padding-top:24px}}
/* pie */
.foot{padding-block:36px 48px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;justify-content:space-between}
.foot p{margin:0;font-size:15px;color:var(--ink-soft)}
.foot a{color:var(--ink);font-weight:700}
.fab{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:40;box-shadow:0 6px 0 -2px rgba(4,38,43,.35)}
.fab[hidden]{display:none}
@media (min-width:861px){.fab{display:none}}
@media (max-width:860px){
  .hero .wrap,.work .grid2,.contact .wrap{grid-template-columns:minmax(0,1fr)}
  .scene{max-width:400px;margin-top:8px}
  .work p,.work .tags,.work .link{margin-left:0}
  .case{flex-direction:column;gap:4px}
  .contact h2{margin-bottom:20px}
}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

/* base */
html{color-scheme:light}
img{max-width:100%}
[hidden]{display:none!important}
.site-head nav a[aria-current]:not(.btn){text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px;text-decoration-color:var(--accent)}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.foot-nav a{font-weight:700;text-decoration:none}
.foot-nav a:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px;text-decoration-color:var(--accent)}
#menu a:not(.btn){display:inline-flex;align-items:center;gap:8px}
#menu .mi{flex:none;color:var(--accent)}
@media (max-width:860px){#menu .mi{width:24px;height:24px}#menu a:not(.btn){gap:12px}}
/* nosotros: qué hacemos y para qué */
.about-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,3vw,40px);margin-top:clamp(32px,5vw,64px);align-items:stretch}
.about-do h3,.about-why h3{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1;margin:0 0 16px}
.about-do h3{color:var(--brand)}
.about-do p{margin:0 0 14px;font-size:clamp(1.1rem,1.8vw,1.3rem);max-width:34rem}
.about-do p:last-child{margin-bottom:0}
.about-why{background:var(--petroleo);color:#fff;border-radius:clamp(22px,2.6vw,32px);padding:clamp(24px,3.4vw,44px)}
.about-why h3{color:var(--niebla)}
.about-why .why-big{font-family:var(--display);font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.02;margin:0 0 20px}
.about-why .why-big span{display:block}
.about-why .why-big span:nth-child(2){color:var(--niebla)}
.about-why p{margin:0;font-size:clamp(1.05rem,1.7vw,1.2rem);max-width:34rem}
.about-sub{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1;margin:clamp(40px,6vw,72px) 0 0;color:var(--brand)}
.about-sub+.about-list{margin-top:clamp(20px,3vw,32px)}
@media (max-width:860px){.about-two{grid-template-columns:minmax(0,1fr)}}
/* productos */
.prod{padding-block:clamp(56px,9vw,120px);border-top:2px solid var(--line)}
.prod h2{font-family:var(--display);font-weight:400;font-size:clamp(3.4rem,12vw,9rem);line-height:.95;margin:0;color:var(--brand)}
.prod-lead{font-size:clamp(1.15rem,2.2vw,1.5rem);max-width:36rem;margin:clamp(16px,2.4vw,28px) 0 0;color:var(--ink-soft)}
.pk-grid{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,22px);align-items:stretch}
.pk{position:relative;display:flex;flex-direction:column;gap:14px;padding:clamp(20px,2.2vw,28px);border-radius:clamp(20px,2.2vw,28px);background:var(--pk-bg);color:var(--pk-ink);border:2px solid var(--pk-line,transparent)}
.pk .pk-n{font-weight:800;font-size:15px;opacity:.85}
.pk h3{font-family:var(--display);font-weight:400;font-size:clamp(2rem,3.2vw,2.8rem);line-height:1;margin:0}
.pk p{margin:0;font-size:1.05rem;line-height:1.4}
.pk ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:9px;font-weight:600}
.pk li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;line-height:1.3}
.pk li svg{width:20px;height:20px;margin-top:1px;color:var(--pk-mark)}
.pk .pk-go{margin-top:auto;padding-top:10px}
.pk .btn-send{background:var(--pk-btn);color:var(--pk-btn-ink);border-color:var(--pk-btn-line);min-height:52px;padding:0 14px;font-size:16px;width:100%;justify-content:center;white-space:nowrap}
.pk .btn-send:hover{background:var(--pk-btn-hover);color:var(--pk-btn-hover-ink)}
.pk .btn-send::after{margin-left:8px}
.pk-marca{--pk-bg:var(--cereza);--pk-ink:#fff;--pk-mark:#fff;--pk-btn:var(--tinta);--pk-btn-ink:#fff;--pk-btn-line:#fff;--pk-btn-hover:#fff;--pk-btn-hover-ink:var(--tinta)}
.pk-web{--pk-bg:var(--petroleo);--pk-ink:#fff;--pk-mark:var(--niebla);--pk-btn:var(--tinta);--pk-btn-ink:#fff;--pk-btn-line:#fff;--pk-btn-hover:#fff;--pk-btn-hover-ink:var(--tinta)}
.pk-redes{--pk-bg:#fff;--pk-ink:var(--tinta);--pk-line:rgba(4,38,43,.18);--pk-mark:var(--cereza);--pk-btn:var(--tinta);--pk-btn-ink:#fff;--pk-btn-line:var(--tinta);--pk-btn-hover:var(--cereza);--pk-btn-hover-ink:#fff}
.pk-todo{--pk-bg:var(--tinta);--pk-ink:#fff;--pk-mark:var(--cereza);--pk-btn:var(--cereza);--pk-btn-ink:#fff;--pk-btn-line:#fff;--pk-btn-hover:#fff;--pk-btn-hover-ink:var(--tinta)}
.pk-todo .pk-tag{position:absolute;top:clamp(18px,2vw,26px);right:clamp(18px,2vw,26px);background:#fff;color:var(--tinta);font-weight:800;font-size:13px;padding:3px 12px;border-radius:999px}
.prod-foot{margin:clamp(24px,4vw,40px) 0 0;font-weight:700;font-size:clamp(1.05rem,1.8vw,1.25rem);max-width:40rem}
@media (min-width:861px) and (max-width:1180px){#menu .mi{display:none}.site-head nav{gap:clamp(12px,1.6vw,20px)}.site-head nav a:not(.btn){font-size:15px}.hd-cta{display:none}}
@media (max-width:1100px){.pk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pk-grid{grid-template-columns:minmax(0,1fr)}}
/* casos de éxito: tarjetas pequeñas (inicio) */
.work .cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px);align-items:stretch;max-width:60rem}
.work .cc{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,2vw,22px);align-items:center;padding:clamp(16px,2vw,24px);border-radius:clamp(20px,2.4vw,28px);background:var(--niebla);color:var(--tinta);text-decoration:none;transition:transform .2s}
.work a.cc:hover{transform:translateY(-4px)}
.work a.cc:focus-visible{outline:3px solid #fff;outline-offset:3px}
.work .cc-img{display:block;width:clamp(76px,11vw,108px);border:3px solid var(--tinta);border-radius:16px;overflow:hidden;background:#111;aspect-ratio:9/14}
.work .cc-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.work .cc-n{font-weight:800;font-size:15px;color:var(--petroleo);display:block}
.work .cc h3{font-family:var(--display);font-weight:400;font-size:clamp(1.8rem,3.4vw,2.5rem);line-height:1;margin:2px 0 0;color:var(--tinta)}
.work .cc p{margin:10px 0 0;font-size:1rem;line-height:1.4;color:var(--tinta);max-width:none}
.work .cc-go{display:inline-flex;gap:8px;margin-top:12px;font-weight:800;color:var(--tinta);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px;text-decoration-color:var(--accent)}
.work .cc-next{background:transparent;border:2px solid var(--niebla);color:#fff;grid-template-columns:minmax(0,1fr);align-content:center;justify-items:start;gap:16px}
.work .cc-next .cc-n{color:var(--niebla)}
.work .cc-next .t{font-family:var(--display);font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.05;color:#fff;display:block}
.work .cc-next .next-cta{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.work .cc-next .sendnote{margin:0;font-size:14px;color:var(--niebla);max-width:none}
/* página del caso */
.casep{background:var(--petroleo);color:#fff;padding-block:clamp(32px,5vw,64px) clamp(48px,8vw,104px)}
.back{display:inline-flex;gap:8px;font-weight:800;color:#fff;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px;text-decoration-color:var(--niebla);margin-bottom:clamp(20px,3vw,40px)}
.casep .kicker{font-weight:800;color:var(--niebla);margin:0 0 6px}
.casep h1{font-family:var(--display);font-weight:400;font-size:clamp(3.4rem,12vw,9rem);line-height:.95;margin:0;color:#fff}
.casep .grid2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:start;margin-top:clamp(20px,3vw,40px)}
.casep .lead{font-size:clamp(1.15rem,2vw,1.4rem);color:var(--niebla);margin:0;max-width:34ch}
.casep .tags{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.casep .tags li{border:2px solid var(--niebla);color:var(--niebla);font-weight:700;font-size:15px;padding:3px 12px;border-radius:999px}
.casep .link{color:#fff;margin-top:26px;text-decoration-color:#fff}
.casep .shots{padding-bottom:40px}
.cdet{padding-block:clamp(48px,8vw,104px)}
.cdet ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);counter-reset:c}
.cdet li{border-top:3px solid var(--accent);padding-top:18px;counter-increment:c}
.cdet li::before{content:counter(c,decimal-leading-zero);font-weight:800;color:var(--brand)}
.cdet h2{font-family:var(--display);font-weight:400;font-size:clamp(2rem,3.6vw,2.8rem);line-height:1;margin:6px 0 12px;color:var(--brand)}
.cdet p{margin:0;font-size:clamp(1.05rem,1.7vw,1.2rem);max-width:30ch}
.cdet .incl{margin:clamp(32px,5vw,56px) 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.cdet .incl li{border:2px solid var(--brand);color:var(--brand);font-weight:700;padding:4px 14px;border-radius:999px;counter-increment:none}
.cdet .incl li::before{content:none}
.band{background:var(--cereza);color:#fff;padding-block:clamp(48px,8vw,104px)}
.band .wrap{display:flex;flex-wrap:wrap;gap:24px clamp(24px,5vw,72px);align-items:center;justify-content:space-between}
.band h2{font-family:var(--display);font-weight:400;font-size:clamp(2.8rem,8vw,6.4rem);line-height:.95;margin:0}
.band .sendnote{color:#fff}
.band .btn-send{background:var(--tinta);border-color:#fff}
@media (max-width:860px){
 .work .cases{grid-template-columns:minmax(0,1fr)}
 .casep .grid2{grid-template-columns:minmax(0,1fr)}
 .cdet ol{grid-template-columns:minmax(0,1fr)}
 .cdet p{max-width:none}
}

/* búsqueda que cambia */
.scene .s1{padding:10px 16px}
.rot{display:inline-grid;overflow:hidden;transition:width .45s ease}
.rot>span{grid-area:1/1;justify-self:start;opacity:0;transform:translateY(7px);transition:opacity .45s ease,transform .45s ease}
.rot>span.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rot>span,.rot{transition:none}}
@media (max-width:520px){.scene .s1{left:0}}
/* opción 2: la conversación vive en un panel con fondo tipo WhatsApp */
.svc{--bar-h:58px}
.svc .chat{border-radius:22px;padding-bottom:22px;background-color:var(--wp);background-image:var(--wp-img);background-size:96px 96px}
.svc[data-svc="marca"]{--wp:#A51E25;--wp-img:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><g fill='none' stroke='%23fff' stroke-opacity='.07' stroke-width='2'><circle cx='24' cy='26' r='9'/><circle cx='33' cy='26' r='9'/><path d='M66 64h14M66 70h9' stroke-linecap='round'/><circle cx='70' cy='20' r='3'/><rect x='14' y='62' width='14' height='14' rx='4'/></g></svg>")}
.svc[data-svc="web"]{--wp:#033A41;--wp-img:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><g fill='none' stroke='%23fff' stroke-opacity='.07' stroke-width='2'><circle cx='24' cy='26' r='9'/><circle cx='33' cy='26' r='9'/><path d='M66 64h14M66 70h9' stroke-linecap='round'/><circle cx='70' cy='20' r='3'/><rect x='14' y='62' width='14' height='14' rx='4'/></g></svg>")}
.svc[data-svc="redes"]{--wp:#DCE8EA;--wp-img:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><g fill='none' stroke='%23044A53' stroke-opacity='.07' stroke-width='2'><circle cx='24' cy='26' r='9'/><circle cx='33' cy='26' r='9'/><path d='M66 64h14M66 70h9' stroke-linecap='round'/><circle cx='70' cy='20' r='3'/><rect x='14' y='62' width='14' height='14' rx='4'/></g></svg>");--us-bg:#fff}
.svc .chat-head{position:sticky;top:var(--header-h,64px);z-index:6;box-sizing:border-box;height:var(--bar-h);width:auto;margin:0;padding:0 clamp(16px,2.5vw,28px);border-radius:22px 22px 0 0;gap:12px;background:var(--me-bg);color:var(--me-ink);box-shadow:0 4px 12px rgba(4,38,43,.2)}
.svc .chat-head .av{width:36px;height:36px;background:rgba(255,255,255,.14)}
.svc .chat-head{transition:opacity .35s ease,transform .35s ease}
.svc .chat.chat-end .chat-head{opacity:0;transform:translateY(-10px);pointer-events:none}
@media (prefers-reduced-motion:reduce){.svc .chat-head{transition:none}}
.svc .chat .step{padding-inline:clamp(16px,2.5vw,28px)}
@media (min-width:861px){.svc .step{scroll-margin-top:calc(var(--header-h) + var(--bar-h) + 20px)}}
@media (max-width:860px){
 .svc .chat-head{top:calc(var(--header-h) + var(--stage-h,0px) + env(safe-area-inset-top,0px));border-radius:22px 22px 0 0}
 .svc .step{scroll-margin-top:calc(var(--header-h) + var(--bar-h) + 214px)}
}

/* ---- Los números (v0.52) ---- */
.nums{padding-block:clamp(56px,9vw,120px);border-top:2px solid var(--line)}
.nums h2{font-family:var(--display);font-weight:400;font-size:clamp(3rem,9vw,7rem);line-height:.98;margin:0;color:var(--brand)}
.nums-lead{font-size:clamp(1.3rem,2.8vw,2rem);line-height:1.25;max-width:36rem;margin:clamp(20px,3vw,36px) 0 0;font-weight:500}
.nums-grid{list-style:none;margin:clamp(32px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:clamp(28px,4vw,52px) clamp(20px,2.4vw,32px)}
.nums-grid>li{border-top:5px solid var(--accent);padding-top:18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.num-pre{margin:0 0 -6px;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);line-height:1}
.num-big{font-variant-numeric:tabular-nums;font-family:var(--display);font-size:clamp(3.4rem,5.6vw,4.8rem);line-height:.95;color:var(--brand);margin:0;overflow-wrap:anywhere}
.num-txt{margin:0;font-size:clamp(1.1rem,1.7vw,1.25rem);line-height:1.35;max-width:26rem}
.num-src{margin:auto 0 0;padding-top:6px;font-size:14.5px;line-height:1.35;color:var(--ink-soft);max-width:26rem}
.num-src a{font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--accent)}
.num-src a:hover{text-decoration-color:var(--ink)}
.nums-grid>li.num-note{grid-column:1/-1;background:var(--petroleo);color:#fff;border:0;border-radius:clamp(22px,2.6vw,32px);padding:clamp(22px,3vw,36px)}
.num-note h3{font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.05;margin:0;color:var(--niebla)}
.num-note p{max-width:44rem;margin:0;font-size:clamp(1.02rem,1.5vw,1.15rem);line-height:1.4}

/* ---- Los números: línea de avance (v0.61) ---- */
.nums{background:var(--tinta);color:#fff;border-top:0}
.nums h2{color:var(--niebla)}
.nums-lead{color:#fff}
.nums-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,48px) clamp(32px,6vw,88px)}
.nums-grid>li{border-top:0;padding-top:0;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"n t" "b b";column-gap:clamp(16px,2.4vw,28px);row-gap:14px;align-items:center}
.num-big{grid-area:n;color:#fff;font-size:clamp(3rem,5.2vw,4.4rem)}
.num-txt{grid-area:t;color:#fff;margin:0;max-width:none}
.bar{grid-area:b;display:block;height:4px;border-radius:4px;background:rgba(220,232,234,.2);overflow:hidden}
.bar i{display:block;height:100%;border-radius:4px;background:var(--niebla);transition:width .09s linear}
.nums-grid>li.num-note{display:block;grid-column:1/-1;background:var(--petroleo)}
.num-note h3{margin:0 0 12px}
.nums h2.hook{font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.08;max-width:21em;text-wrap:balance;text-align:center;margin-inline:auto}
@media (max-width:640px){.nums-grid{grid-template-columns:minmax(0,1fr)}.nums-grid>li{grid-template-columns:minmax(0,1fr);grid-template-areas:"n" "t" "b"}}

/* ---- Preguntas frecuentes (v0.69) ---- */
.faq{padding-block:clamp(56px,9vw,120px)}
.faq h2{font-family:var(--display);font-weight:400;font-size:clamp(3rem,9vw,7rem);line-height:.98;margin:0;color:var(--brand)}
.faq-list{margin:clamp(28px,5vw,56px) 0 0;max-width:62rem;border-top:2px solid var(--ink)}
.faq-list details{border-bottom:2px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:clamp(18px,2.4vw,26px) 4px;font-weight:800;font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.25;color:var(--ink);min-height:48px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;border:2px solid var(--ink);background:
 linear-gradient(var(--ink),var(--ink)) center/12px 2px no-repeat,
 linear-gradient(var(--ink),var(--ink)) center/2px 12px no-repeat;transition:background-color .2s,transform .2s}
.faq-list summary:hover::after{background-color:var(--accent);border-color:var(--accent)}
.faq-list details[open] summary::after{background:linear-gradient(var(--ink),var(--ink)) center/12px 2px no-repeat}
.faq-list summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
.faq-list details p{margin:0;padding:0 4px clamp(20px,2.6vw,30px);max-width:46rem;font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.45;color:var(--ink)}
.faq-list details p a{font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--accent)}

/* ---- Aro 360° en Acerca de nosotros (v0.73) ---- */
.ring{margin:clamp(40px,6vw,80px) 0 0;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center;border-top:2px solid var(--line);padding-top:clamp(32px,5vw,56px)}
.ring svg{display:block;width:100%;height:auto;overflow:visible}
.ring-txt h3{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1;margin:0 0 14px;color:var(--brand)}
.ring-txt p{margin:0;font-size:clamp(1.1rem,1.8vw,1.3rem);max-width:30rem}
@media (max-width:700px){.ring{grid-template-columns:minmax(0,1fr)}.ring svg{max-width:300px}}
.ring .tk{stroke:var(--ink-soft);stroke-width:1.5;stroke-linecap:round;opacity:.55}
.ring .tk.q{stroke-width:2.5;opacity:.9;stroke:var(--ink)}
.ring .arc{fill:none;stroke-width:30;stroke-linecap:butt}
.ring .a1{stroke:var(--cereza)} .ring .a2{stroke:var(--petroleo)} .ring .a3{stroke:var(--tinta)}
.ring .deg{font-family:var(--display);font-size:66px;fill:var(--brand);text-anchor:middle}
.ring .sub{font:800 12px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;fill:var(--ink-soft);text-anchor:middle}
.ring-key{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:15px;font-weight:700;color:var(--ink)}
.ring-key li{display:flex;align-items:center;gap:8px}
.ring-key i{display:block;width:14px;height:14px;border-radius:50%}
.js-ring .arc{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .9s cubic-bezier(.3,.7,.2,1)}
.js-ring.draw .arc{stroke-dashoffset:0}
.js-ring .a2{transition-delay:.25s} .js-ring .a3{transition-delay:.5s}
.js-ring .deg,.js-ring .sub{opacity:0;transition:opacity .6s .7s}
.js-ring.draw .deg,.js-ring.draw .sub{opacity:1}
@media (prefers-reduced-motion:reduce){.js-ring .arc{transition:none}.js-ring .deg,.js-ring .sub{transition:none}}

/* ---- Acerca de nosotros: alineación, propósito y aro (v0.75) ---- */
.about-two{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:stretch}
@media (max-width:860px){.about-two{grid-template-columns:minmax(0,1fr)}}
.about-do{padding-top:clamp(24px,3.4vw,44px)}
.about-do h3,.about-why h3{font-family:var(--body);font-weight:800;font-size:14px;line-height:1;letter-spacing:.16em;text-transform:uppercase;margin:0 0 20px}
.about-do h3{color:var(--accent)}
.about-why h3{color:var(--niebla);opacity:.9}
.about-why .why-big{font-size:clamp(1.75rem,4.4vw,3.9rem);line-height:1.02;margin:0 0 26px;color:#fff}
.about-why .why-big span:nth-child(2){color:#fff}
.about-why .why-big span:last-child{color:#FF9A9E}
.about-why p:not(.why-big){font-size:clamp(1.05rem,1.6vw,1.2rem);opacity:.95}
.about-do p{font-size:clamp(1.1rem,1.7vw,1.28rem)}
.ring{background:#fff;color:#04262B;border:0;border-radius:clamp(22px,2.6vw,32px);padding:clamp(24px,4vw,48px);margin-top:clamp(28px,4vw,48px)}
.ring .tk{stroke:#5B7479;opacity:.7}
.ring .tk.q{stroke:#04262B;opacity:1}
.ring .a1{stroke:#C0262D} .ring .a2{stroke:#044A53} .ring .a3{stroke:#04262B}
.ring .deg{fill:#044A53} .ring .sub{fill:#2E4C51}
.ring-txt h3{color:#044A53}
.ring-txt p,.ring-key{color:#04262B}

/* ======== Guía de espaciado (v0.78) ========
   Una sola escala para todas las secciones:
   --sec-y        aire arriba y abajo de cada sección
   --gap-head     título -> frase de apoyo
   --gap-content  título (o frase) -> contenido
   --h2           tamaño de los títulos de sección
   Excepción: la frase de enganche (h2.hook) tiene tamaño propio. */
:root{--sec-y:clamp(56px,7.5vw,96px);--gap-head:clamp(16px,2vw,24px);--gap-content:clamp(32px,4.4vw,56px);--h2:clamp(3rem,8.4vw,6.8rem)}
.serv,.prod,.work,.about,.nums,.contact,.faq{padding-block:var(--sec-y)}
.serv h2,.prod h2,.work h2,.about h2,.contact h2,.faq h2{font-size:var(--h2);line-height:.98;margin:0}
.serv-lead,.prod-lead,.about-lead{margin-top:var(--gap-head)}
.serv-list,.pk-grid,.about-two,.faq-list,.nums-grid,.work .cases{margin-top:var(--gap-content)}
.work .cases{grid-template-columns:minmax(0,34rem)}
.contact .wrap{row-gap:var(--gap-content)}
.ring{margin-top:var(--gap-content)}

/* ---- Revisión de alineación y espacios vacíos (v0.82) ---- */
/* Casos: la tarjeta ocupa el ancho y la acción va a la derecha */
.work .cases{grid-template-columns:minmax(0,1fr);max-width:none}
.work .cc{grid-template-columns:auto minmax(0,1fr) auto;column-gap:clamp(20px,3.4vw,48px);padding:clamp(18px,2.6vw,36px)}
.work .cc-img{width:clamp(88px,13vw,160px)}
.work .cc h3{font-size:clamp(2rem,4.2vw,3.4rem)}
.work .cc p{font-size:clamp(1.05rem,1.6vw,1.25rem);max-width:34rem}
.work .cc>.cc-go{margin-top:0;align-self:center;border:3px solid var(--tinta);border-radius:999px;padding:12px 22px;text-decoration:none;font-size:1.05rem}
.work a.cc:hover>.cc-go{background:var(--tinta);color:#fff}
@media (max-width:860px){.work .cc{grid-template-columns:auto minmax(0,1fr)}.work .cc>.cc-go{grid-column:1/-1;justify-self:start;margin-top:4px}}
/* Contacto: la columna izquierda acompaña al formulario */
@media (min-width:861px){.contact .wrap>div:first-of-type{position:sticky;top:clamp(88px,13vh,132px)}}
/* Preguntas: la lista ocupa el ancho de la página */
.faq-list{max-width:none}
/* Los números: la tarjeta final reparte título y texto en dos columnas */
@media (min-width:861px){
.nums-grid>li.num-note{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.7fr);column-gap:clamp(24px,4vw,64px);align-items:start}
.nums-grid>li.num-note h3{margin:0}
.nums-grid>li.num-note p{max-width:none}
}

/* ---- Tarjeta final de Los números: texto en tres párrafos (v0.84) ---- */
.num-note h3 span{display:block;color:#fff}
.num-note h3{text-wrap:balance}
@media (min-width:861px){.nums-grid>li.num-note{grid-template-columns:minmax(0,1.2fr) minmax(0,1.4fr)}}
.num-note .num-body{display:flex;flex-direction:column;gap:14px;min-width:0}
.num-note .num-body p{margin:0;max-width:none}

/* ---- Aro 360°: título y texto más largos (v0.85) ---- */
.ring-txt h3 span{display:block;text-wrap:balance}
.ring-txt p{max-width:36rem}

/* ---- Títulos de panel: segunda frase en el color de acento, mismo tamaño (v0.86) ---- */
.num-note h3{font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.02}
.num-note h3 span{color:#FF9A9E}
@media (min-width:861px){.nums-grid>li.num-note{grid-template-columns:minmax(0,1fr);grid-template-areas:none;row-gap:clamp(18px,2.4vw,28px)}.nums-grid>li.num-note h3{margin:0}.num-note .num-body p{max-width:46rem}}
@media (min-width:1000px){.num-note .num-body{flex-direction:row;gap:clamp(28px,3.4vw,52px)}.num-note .num-body p{flex:1 1 0;max-width:none}}
.ring-txt h3 span{color:var(--scr-cer,#C0262D)}

/* ---- Acerca de nosotros: párrafo de apertura (v0.87) ---- */
@media (min-width:861px){.about-why{display:flex;flex-direction:column;justify-content:center}}
.about-intro{margin:var(--gap-head) 0 0;max-width:42rem;font-size:clamp(1.1rem,1.7vw,1.28rem);line-height:1.45;color:var(--ink-soft)}

/* ---- Acerca de nosotros: composición en bandas (v0.90) ---- */
.about-head{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap-head);margin-top:var(--gap-head)}
.about-head .about-lead,.about-head .about-intro{margin:0;max-width:none}
.about-two{grid-template-columns:minmax(0,1fr);gap:var(--gap-content)}
.about-do{padding-top:0}
.about-do h3{margin:0 0 clamp(16px,2vw,24px)}
.about-do p{margin:0 0 22px;max-width:none;border-top:5px solid var(--accent);padding-top:18px}
.about-do p:last-child{margin-bottom:0}
@media (min-width:861px){
.about-head{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:clamp(32px,5vw,80px);align-items:start}
.about-do{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,3.4vw,48px)}
.about-do h3{grid-column:1/-1}
.about-do p{margin:0}
.about-why{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:clamp(28px,5vw,80px);row-gap:clamp(14px,2vw,22px);align-items:center}
.about-why h3{grid-column:1/-1;margin:0}
.about-why .why-big{margin:0}
.about-why p:not(.why-big){max-width:none}
}

/* ---- Nuestro propósito: dos párrafos (v0.91) ---- */
.about-why .why-body{display:flex;flex-direction:column;gap:14px;min-width:0}
.about-why .why-body p{margin:0}

/* ---- Frases de cierre de Servicios y Productos: centradas (v0.92) ---- */
.serv-foot,.prod-foot{text-align:center;max-width:44rem;margin-inline:auto;text-wrap:balance}

/* ---- Márgenes laterales en computadora (v0.93) ---- */
@media (min-width:861px){.wrap{max-width:1240px;padding-inline:clamp(40px,8.2vw,104px)}}
@media (min-width:861px){#menu .mi{display:none}.site-head nav a:not(.btn),.site-head .btn{white-space:nowrap}}

/* ---- Productos: filas alineadas entre tarjetas con subrejilla (v0.100) ---- */
@media (min-width:641px){
.pk-grid{row-gap:clamp(14px,1.8vw,22px)}
.pk{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:14px;grid-template-columns:minmax(0,1fr)}
.pk>.pk-n{grid-row:1}
.pk>h3{grid-row:2;align-self:start}
.pk>p{grid-row:3;align-self:start}
.pk>ul{grid-row:4;align-self:start}
.pk>.pk-go{grid-row:5;align-self:end;margin-top:0}
}

/* ---- Ventana de conversación en computadora: solo se desplaza el chat, no la página (v0.97) ---- */
@media (min-width:861px){
.svc{--win-h:clamp(470px,calc(100vh - var(--header-h) - 255px),820px)}
@media (max-height:780px){.svc .stage{zoom:.8}}
}

@media (max-width:860px){
.svc{--win-h:clamp(360px,calc(100svh - var(--header-h) - 312px),680px)}
.svc .ph{font-size:clamp(1.7rem,7vw,2.2rem);margin-bottom:4px}
.svc .stage{position:static!important;top:auto!important;margin-inline:0;padding:10px 0 14px;border-bottom:0;background:none}
.svc .chat{position:relative;height:var(--win-h);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.4) transparent;padding-bottom:0}
.svc[data-svc="redes"] .chat{scrollbar-color:rgba(4,38,43,.4) transparent}
.svc .chat:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.svc .chat-head{top:0}
.svc .step{scroll-margin-top:0;padding-block:32px}
}
@media (min-width:861px){/*fin*/
.svc .proceso .grid{height:var(--win-h);align-items:stretch;grid-template-columns:minmax(0,1fr) 300px;column-gap:clamp(24px,4vw,56px)}
.svc .chat{position:relative;height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.4) transparent;padding-bottom:0}
.svc .redes .chat,.svc[data-svc="redes"] .chat{scrollbar-color:rgba(4,38,43,.4) transparent}
.svc .chat:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.svc .chat-head{top:0}
.svc .chat.chat-end .chat-head{opacity:1;transform:none;pointer-events:auto}
.svc .step{scroll-margin-top:0}
.svc .stage{position:static!important;align-self:center;top:auto!important}
}

/* ---- Conversación: burbujas con sangría real, tú a la derecha y nosotros a la izquierda (v0.96) ---- */
.thread .msg.us,.thread .msg.me{max-width:min(86%,30rem)}
.thread .msg.file,.thread .msg.fin{max-width:100%}
@media (min-width:861px){.thread{padding-left:0}.thread .msg.us,.thread .msg.me{max-width:min(78%,30rem)}}

/* ---- Flujo de lectura en computadora: Acerca de nosotros y cierre de Los números (v0.94) ---- */
@media (min-width:861px){
:root{--bp:clamp(28px,3.4vw,44px);--gx:clamp(32px,6vw,88px)}
/* un solo eje: mitad izquierda ancla, mitad derecha se lee; coincide con la 2.ª columna de las cifras */
.about-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--gx);align-items:first baseline}
.about-head .about-lead{font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.22}
.about-head .about-intro{font-size:clamp(1.1rem,1.6vw,1.28rem);line-height:1.5}
.about-do{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--gx);row-gap:clamp(18px,2vw,28px);border-top:5px solid var(--accent);padding-top:clamp(18px,2vw,26px);align-items:start}
.about-do h3{grid-column:1/-1;grid-row:1;margin:0}
.about-do>p{grid-column:1;grid-row:2;border-top:0;padding-top:0;margin:0;font-size:clamp(1.3rem,2vw,1.62rem);font-weight:500;line-height:1.3}
.about-do .do-rest{grid-column:2;grid-row:2;display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px);min-width:0}
.about-do .do-rest p{border-top:0;padding-top:0;margin:0;font-size:clamp(1.08rem,1.55vw,1.22rem);font-weight:400;line-height:1.5}
.about-why{padding:var(--bp);grid-template-columns:calc((100% + 2*var(--bp) - var(--gx))/2 - var(--bp)) minmax(0,1fr);column-gap:var(--gx);align-items:first baseline;row-gap:clamp(18px,2.2vw,28px)}
.about-why .why-big{font-size:clamp(1.7rem,3.4vw,3.1rem);line-height:1.06}
.about-why .why-body{gap:14px}
.ring{padding:var(--bp);grid-template-columns:calc((100% + 2*var(--bp) - var(--gx))/2 - var(--bp)) minmax(0,1fr);column-gap:var(--gx);align-items:center}
.ring svg{max-width:330px;justify-self:start}
.nums-grid>li.num-note{padding:var(--bp);grid-template-columns:calc((100% + 2*var(--bp) - var(--gx))/2 - var(--bp)) minmax(0,1fr);column-gap:var(--gx);row-gap:0;align-items:start}
.num-note h3{font-size:clamp(1.6rem,2.9vw,2.45rem);line-height:1.05}
.num-note .num-body{flex-direction:column;gap:14px}
.ring-txt h3{font-size:clamp(1.5rem,2.2vw,2rem)}
.num-cta{margin-top:20px;align-self:flex-start}
.nums-grid>li.num-note{grid-template-rows:auto 1fr}
.nums-grid>li.num-note h3{grid-column:1;grid-row:1}
.nums-grid>li.num-note .num-body{grid-column:2;grid-row:1/span 2}
.nums-grid>li.num-note .num-cta{grid-column:1;grid-row:2;align-self:end;justify-self:start;margin-top:24px}
.num-note .num-body p{max-width:none;font-size:clamp(1.05rem,1.5vw,1.18rem);line-height:1.5}
}

/* ---- Acerca de nosotros en computadora: composición editorial (v0.101) ---- */
@media (min-width:861px){
.about-head{align-items:end}
.about-head .about-lead{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,3.3vw,3rem);line-height:1.08;color:var(--tinta);text-wrap:balance}
.about-head .about-lead em{font-style:normal;color:var(--cereza)}
.about-head .about-intro{padding-bottom:.35rem}
.about-do .do-rest{padding-top:6px}
.about-why{position:relative;overflow:hidden;padding-block:clamp(36px,4.8vw,68px);row-gap:0}
.about-why>*{position:relative;z-index:1}
.about-why::after{content:"";position:absolute;z-index:0;right:-7%;top:-30%;width:clamp(260px,34vw,480px);aspect-ratio:1;border-radius:50%;border:clamp(28px,3.4vw,52px) solid rgba(255,154,158,.14);pointer-events:none}
.about-why h3{grid-column:1/-1}
.about-why .why-big{grid-column:1/-1;max-width:none;font-size:clamp(2.6rem,5.4vw,4.8rem);line-height:1.02;margin:clamp(14px,2vw,26px) 0 0}
.about-why .why-big span:nth-child(2){padding-left:clamp(28px,6vw,96px)}
.about-why .why-big span:nth-child(3){padding-left:clamp(56px,12vw,192px)}
.about-why .why-body{grid-column:1/-1;display:flex;flex-direction:column;gap:16px;margin-top:clamp(28px,3.6vw,52px)}
.about-why .why-body p{max-width:none;font-size:clamp(1.08rem,1.6vw,1.28rem);line-height:1.5}
}
@media (max-width:860px){
.about-why{position:relative;overflow:hidden;display:block}
.about-why>*{position:relative;z-index:1}
.about-why::after{content:"";position:absolute;z-index:0;right:-16%;top:-10%;width:clamp(190px,50vw,340px);aspect-ratio:1;border-radius:50%;border:clamp(20px,5vw,36px) solid rgba(255,154,158,.14);pointer-events:none}
.about-why h3{margin:0}
.about-why .why-big{max-width:none;font-size:clamp(1.7rem,7.6vw,3.6rem);line-height:1.05;margin:clamp(14px,3vw,24px) 0 0}
.about-why .why-big span:nth-child(2){padding-left:clamp(14px,4.4vw,40px)}
.about-why .why-big span:nth-child(3){padding-left:clamp(28px,8.8vw,80px)}
.about-why .why-body{display:flex;flex-direction:column;gap:14px;margin-top:clamp(22px,4vw,34px)}
.about-why .why-body p{max-width:none}
}
/* ---- Aviso discreto para desplazar la conversación (v1.03) ---- */
.chat-hint{position:sticky;bottom:0;height:0;z-index:5;pointer-events:none;transition:opacity .3s ease}
.chat-hint::before{content:"";position:absolute;left:0;right:0;bottom:0;height:76px;background:linear-gradient(to top,var(--wp) 8%,transparent)}
.chat-hint span{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 13px;border-radius:999px;background:var(--me-bg);color:var(--me-ink);font:700 13px/1 var(--body);white-space:nowrap;box-shadow:0 2px 10px rgba(4,38,43,.28)}
.chat-hint i{display:block;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);animation:hintb 1.7s ease-in-out infinite}
@keyframes hintb{0%,100%{transform:rotate(45deg) translateY(-2px)}50%{transform:rotate(45deg) translateY(2px)}}
@media (prefers-reduced-motion:reduce){.chat-hint i{animation:none}}
.chat.hint-off .chat-hint{opacity:0}
/* ---- Acerca de nosotros: todo en tarjetas, mismo lenguaje que el resto (v1.04) ---- */
.about{--acr:clamp(22px,2.6vw,32px);--acp:clamp(24px,3.4vw,44px);--acg:clamp(16px,2vw,24px)}
.about-head,.about-do{background:#fff;border:0;border-radius:var(--acr);padding:var(--acp);color:var(--tinta)}
.about-head{margin-top:var(--gap-head)}
.about-two{gap:var(--acg);margin-top:var(--acg)}
.ring{margin-top:var(--acg);border-radius:var(--acr);padding:var(--acp)}
.about-do p,.about-do .do-rest p{border-top:0;padding-top:0}
.about-do>p{font-weight:500}
.about-do .do-rest{padding-top:0}
.about-head .about-lead{font-size:clamp(1.55rem,2.5vw,2.35rem);line-height:1.12}
.about-head .about-intro{padding-bottom:0}
@media (min-width:861px){
.about-head{align-items:start}
.about-do{padding:var(--acp)}
.about-why{padding:var(--acp)}
}
@media (max-width:860px){
.about-do p{margin:0 0 16px}
.about-do p:last-child{margin-bottom:0}
.about-do .do-rest{display:flex;flex-direction:column;gap:16px;margin-top:16px}
.about-do .do-rest p{margin:0}
.about-head .about-lead{font-size:clamp(1.5rem,5.6vw,2.2rem)}
}
/* ---- Acerca de nosotros: tipografía alineada a la escala del sitio (v1.05) ---- */
.about{--a-h3:clamp(1.8rem,2.7vw,2.4rem);--a-lead:clamp(1.15rem,1.7vw,1.5rem);--a-body:clamp(1.05rem,1.4vw,1.25rem)}
.about .about-lead,.about .about-lead em{font-family:var(--display);font-weight:400;font-style:normal;font-size:var(--a-h3);line-height:1.12;letter-spacing:normal;color:var(--tinta)}
.about .about-lead em{color:var(--cereza)}
.about .about-do h3,.about .about-why h3{font-family:var(--display);font-weight:400;font-size:var(--a-h3);line-height:1.05;letter-spacing:normal;text-transform:none;opacity:1}
.about .about-do h3{color:var(--petroleo)}
.about .about-why h3{color:var(--niebla)}
.about .ring-txt h3{font-size:var(--a-h3);line-height:1.05}
.about .about-intro,.about .about-do .do-rest p,.about .about-why .why-body p,.about .ring-txt p{font-size:var(--a-body);font-weight:400;line-height:1.45}
.about .about-do>p{font-size:var(--a-lead);font-weight:400;line-height:1.45;color:var(--tinta)}
@media (max-width:860px){.about .about-why h3{font-size:clamp(1.2rem,4.2vw,1.6rem)}}
/* ---- Escala de texto unificada (v1.06) ---- */
.faq details p,.nums-grid>li.num-note p{font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.45}
.pk-todo .pk-tag{font-size:14px}
@media (max-width:860px){.nums-grid>li.num-note .num-cta{margin-top:24px}}
@media (max-width:640px){.serv h2{font-size:clamp(2rem,11.7vw,2.9rem)}}
@media (max-width:860px){.serv h2{max-width:8.4em}}
/* ---- Colores de texto en Acerca de nosotros (v1.07): intro en negro, "A qué nos dedicamos" en gris ---- */
.about .about-intro{color:var(--tinta)}
.about .about-do>p,.about .about-do .do-rest p{color:var(--ink-soft)}
/* ---- v1.09: "A qué nos dedicamos" sin tarjeta, sobre el lienzo; "Nuestro propósito" en su tarjeta verde ---- */
.about .about-two{gap:var(--acg)}
.about .about-do{background:none;border:0;border-radius:0;box-shadow:none;padding:clamp(20px,2.4vw,32px) 0 clamp(20px,2.4vw,32px);color:var(--tinta)}
.about .about-do h3{color:var(--brand)}
.about .about-do>p,.about .about-do .do-rest p{color:var(--ink);opacity:1}
.about .about-why{border-radius:var(--acr);background-image:none}
/* ---- v1.11: línea fina roja entre las dos columnas de "A qué nos dedicamos" (solo computadora) ---- */
@media (min-width:861px){
.about .about-do::before{content:"";grid-column:1;grid-row:2;justify-self:end;align-self:stretch;width:1.5px;background:var(--accent);transform:translateX(calc(var(--gx)/2 + .75px));pointer-events:none}
}
/* ---- v1.12: apertura en una sola columna también en computadora ---- */
@media (min-width:861px){
.about .about-head{grid-template-columns:minmax(0,1fr);row-gap:clamp(16px,1.8vw,24px)}
.about .about-head .about-lead{max-width:none;font-size:clamp(2rem,3.9vw,3.6rem);line-height:1.08}
.about .about-head .about-lead em{display:block;font-size:inherit;line-height:inherit}
.about .about-head .about-intro{max-width:none}
}
/* ---- v1.14: página del caso La Tiznada, rehecha con recortes enfocados ---- */
.casep{padding-block:clamp(28px,4vw,48px) clamp(40px,6vw,72px)}
.casep h1{font-size:clamp(3.2rem,9vw,7rem)}
.casep .grid2{align-items:center;grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
.casep .portada{margin:0;justify-self:end;width:min(100%,400px);border-radius:clamp(20px,2.4vw,28px);overflow:hidden;border:1px solid rgba(220,232,234,.28);background:#100C08}
.casep .portada img{display:block;width:100%;height:auto}
.partes{padding-block:clamp(48px,7vw,96px)}
.partes h2{font-family:var(--display);font-weight:400;font-size:var(--h2);line-height:.98;margin:0;color:var(--brand)}
.pgrid{list-style:none;margin:var(--gap-content) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.pcard{background:#fff;color:#04262B;border-radius:clamp(20px,2.2vw,28px);padding:clamp(12px,1.4vw,16px) clamp(12px,1.4vw,16px) clamp(20px,2vw,26px);display:flex;flex-direction:column;gap:12px}
.pcard h3{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.05;margin:6px 6px 0;color:#044A53}
.pcard p{margin:0 6px;font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.4;color:#04262B}
.pshot{aspect-ratio:405/260;border-radius:clamp(14px,1.6vw,18px);overflow:hidden;background:#100C08;display:grid;place-items:center}
.crop{position:relative;margin:0;width:100%}
.crop img{display:block;width:100%;height:auto}
.crop .hl{position:absolute;display:block;border:3px solid #FF9A9E;box-shadow:0 0 0 2px rgba(16,12,8,.55);pointer-events:none}
@media (max-width:860px){.casep .grid2{grid-template-columns:minmax(0,1fr)}.casep .portada{justify-self:start;width:min(100%,360px)}}
@media (max-width:700px){.pgrid{grid-template-columns:minmax(0,1fr)}}
.partes + .cdet{padding-top:0}

/* caso: bloques parejos */
@media (min-width:861px){
.cdet ol{row-gap:0}
.cdet li{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0;align-content:start}
.cdet h2{font-size:clamp(1.7rem,2.5vw,2.3rem);margin:6px 0 14px;align-self:start}
.cdet p{max-width:none}
}

/* caso: en tablet el retrato se queda a la derecha del texto */
@media (min-width:641px) and (max-width:860px){
.casep .grid2{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(24px,4vw,40px);align-items:start}
.casep .portada{justify-self:end;width:min(100%,340px)}
}

/* caso en computadora: título, texto e imagen en una sola composición */
@media (min-width:861px){
.casep .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,min(460px,44%));grid-template-rows:auto 1fr auto auto auto 1fr;column-gap:clamp(40px,6vw,104px);align-items:start}
.casep .back{grid-column:1/-1;justify-self:start}
.casep .kicker{grid-column:1;grid-row:3;margin-top:0}
.casep h1{grid-column:1;grid-row:4;font-size:clamp(3rem,6vw,5.6rem);margin:0 0 clamp(16px,2vw,28px);white-space:nowrap}
.casep .grid2{display:contents}
.casep .grid2>div{grid-column:1;grid-row:5}
.casep .lead{margin-top:0}
.casep .portada{grid-column:2;grid-row:2/7;align-self:start;justify-self:end;width:100%;max-width:460px;margin-top:clamp(20px,2.4vw,32px)}
}

/* ---- v1.20: página Aviso de privacidad ---- */
.legal{padding-block:clamp(28px,4vw,48px) clamp(48px,8vw,96px)}
.legal .back{color:var(--ink);text-decoration-color:var(--accent)}
.legal h1{font-family:var(--display);font-weight:400;font-size:clamp(2.6rem,7vw,5rem);line-height:1;margin:0 0 clamp(28px,4vw,44px);color:var(--ink)}
.legal .upd{margin:0 0 clamp(28px,4vw,48px);color:var(--ink-soft);font-size:16px}
.legal-body{max-width:68ch}
.legal-body h2{font-family:var(--display);font-weight:400;font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.15;margin:clamp(28px,4vw,40px) 0 10px;color:var(--ink)}
.legal-body p,.legal-body li{margin:0 0 12px;color:var(--ink)}
.legal-body ul{margin:0 0 12px;padding-left:1.2em}
.legal-body a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px;overflow-wrap:anywhere}
.legal-body .pend{background:var(--accent);color:var(--bg);padding:0 6px;border-radius:4px;font-weight:700}
.form .priv a{color:#044A53;font-weight:700;text-decoration:underline;text-decoration-color:#C0262D;text-decoration-thickness:2px;text-underline-offset:3px}

/* ---- v1.24: el título de las cifras va alineado a la izquierda como los demás ---- */
.nums h2.hook{text-align:left;margin-inline:0}