/* Quatropack — diseño v1 inspiración Apple. Marca: negro + azul del logo (hex aproximado, confirmar con archivo original) */
:root{
  --ink:#1d1d1f; --ink-soft:#515154; --bg:#ffffff; --bg-alt:#f5f5f7;
  --accent:#1d1d1f; --brand:#189bf0; --link:#0a6cc2; --dark:#0b0b0d;
  --maxw:1060px; --radius:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
@font-face{font-family:'Caveat';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/caveat-500.woff2') format('woff2')}
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/caveat-600.woff2') format('woff2')}
html,body{overflow-x:clip} /* clip, NO hidden: hidden crea un contenedor de scroll y rompe el position:sticky del nav (26-07-2026) */
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5}
img{max-width:100%;display:block}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}

/* NAV */
nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.08)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:0 22px;display:flex;align-items:center;gap:26px;height:52px;font-size:16px}
.nav-logo{font-weight:700;font-size:21px;color:var(--ink);letter-spacing:-.02em;display:flex;align-items:center;gap:9px}
.nav-logo em{font-style:normal;font-weight:300}
.nav-logo:hover{text-decoration:none}
.dots{display:inline-grid;grid-template-columns:8px 8px;gap:3px}
.dots i{width:8px;height:8px;border-radius:50%;background:var(--ink)}
.dots i:first-child{background:var(--brand)}
.nav-links{display:flex;gap:22px;flex:1;justify-content:center;flex-wrap:wrap}
.nav-links a{color:var(--ink-soft)}
.nav-links a:hover{color:var(--ink);text-decoration:none}
.nav-cta{background:var(--accent);color:#fff;padding:7px 16px;border-radius:980px;font-weight:600;white-space:nowrap}
.nav-cta:hover{text-decoration:none;filter:brightness(1.1)}
@media(max-width:1200px){.nav-inner{gap:16px;font-size:15px}.nav-links{gap:14px}} /* G 17-08: anchos intermedios, nav compacto */
.nav-cta-menu{display:none}
.nav-burger{display:none;background:none;border:0;padding:8px 6px;cursor:pointer;margin-left:auto}
.nav-burger span{display:block;width:20px;height:2px;background:var(--ink);margin:4.5px 0;border-radius:1px;transition:transform .25s ease,opacity .25s ease}
.nav-burger.x span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-burger.x span:nth-child(2){opacity:0}
.nav-burger.x span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* HERO */
.hero{text-align:center;padding:110px 22px 80px;}
.eyebrow{font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
h1{font-size:clamp(40px,6.5vw,72px);line-height:1.05;letter-spacing:-.015em;font-weight:700;margin:18px auto 22px;max-width:900px}
.hero-sub{font-size:clamp(18px,2.2vw,23px);color:var(--ink-soft);max-width:780px;margin:0 auto 34px;line-height:1.45}
.cta-row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;align-items:center}
.btn{background:var(--accent);color:#fff;padding:14px 30px;border-radius:980px;font-size:17px;font-weight:600;display:inline-block}
.btn:hover{text-decoration:none;filter:brightness(1.12)}
.btn.ghost{background:transparent;color:var(--link);border:1px solid var(--link)}
.link-arrow{font-size:17px;font-weight:500}
.link-arrow::after{content:"\00a0›";}
.trust{margin-top:30px;font-size:13px;color:var(--ink-soft)}
.hero-media{margin:56px auto 0;max-width:980px;aspect-ratio:16/7;border-radius:var(--radius);background:linear-gradient(135deg,#dfe7ee,#c5d2dd);display:flex;align-items:center;justify-content:center;color:#66788a;font-size:15px}

.hero-media iframe,.tps-media iframe{width:100%;height:100%;border:0;border-radius:inherit;display:block}
.video-facade{position:relative;width:100%;height:100%;border-radius:inherit;overflow:hidden;cursor:pointer}
.video-facade img{width:100%;height:100%;object-fit:cover}
.video-facade .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:74px;height:52px;background:rgba(0,0,0,.72);border-radius:14px;display:flex;align-items:center;justify-content:center}
.video-facade .play::after{content:"";border-style:solid;border-width:11px 0 11px 19px;border-color:transparent transparent transparent #fff;margin-left:4px}
.video-facade:hover .play{background:var(--brand)}

/* CIFRAS */
.cifras{background:var(--bg-alt);padding:54px 0}
.cifras-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.cifra b{display:block;font-size:clamp(26px,3.4vw,40px);letter-spacing:-.02em}
.cifra span{font-size:14px;color:var(--ink-soft)}

/* SECTIONS */
section{padding:96px 0}
section.alt{background:var(--bg-alt)}
h2{font-size:clamp(30px,4.4vw,48px);line-height:1.1;letter-spacing:-.015em;font-weight:700;max-width:820px}
.center h2{margin:0 auto}
.center{text-align:center}
.sub{font-size:clamp(17px,2vw,21px);color:var(--ink-soft);margin-top:14px;max-width:720px}
.center .sub{margin-left:auto;margin-right:auto}

/* TE SUENA */
.problemas{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:44px 0 28px}
.prob{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:var(--radius);padding:26px 22px;font-size:16px;line-height:1.4;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;font-weight:600;transition:transform .25s ease,box-shadow .25s ease}
.prob:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.08)}
.pico{width:38px;height:38px;border-radius:50%;background:rgba(24,155,240,.1);display:flex;align-items:center;justify-content:center;color:var(--brand)}
.pico svg{width:19px;height:19px}
.prob.voz{align-items:flex-start;text-align:left;font-weight:400;position:relative;padding:24px 44px 18px 22px;cursor:pointer;user-select:none}
.prob.voz .check{position:absolute;top:16px;right:16px;width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(0,0,0,.22);transition:all .2s}
.prob.voz.sel{border-color:var(--brand);box-shadow:0 0 0 1.5px var(--brand)}
.prob.voz.sel .check{background:var(--brand);border-color:var(--brand)}
.prob.voz.sel .check::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.prob.voz p{font-size:16.5px;line-height:1.45;color:var(--ink)}
.prob.voz .rol{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--link);font-weight:700}
.prob.voz::after{content:"";position:absolute;bottom:-9px;left:34px;width:16px;height:16px;background:#fff;border-right:1px solid rgba(0,0,0,.08);border-bottom:1px solid rgba(0,0,0,.08);transform:rotate(45deg)}
section.alt .prob{background:#fff}
.remate{font-size:clamp(18px,2.2vw,22px);font-weight:600;max-width:760px}
.center .remate{margin:0 auto}

/* METODO */
.actos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px;text-align:left}
.acto{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:var(--radius);padding:28px 26px}
.acto h3{font-size:20px;line-height:1.25;letter-spacing:-.01em;margin-bottom:18px;min-height:84px;text-align:center}
.acto-tag{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--link);font-weight:700;margin-bottom:6px}
.acto ol{list-style:none;counter-reset:paso}
.acto li{counter-increment:paso;position:relative;padding:14px 0 14px 40px;font-size:14px;line-height:1.45;color:var(--ink-soft)}
.acto li:first-child{min-height:364px}
.acto li+li{border-top:1px solid rgba(0,0,0,.06)}
.acto li::before{content:counter(paso);position:absolute;left:0;top:14px;width:26px;height:26px;border-radius:50%;background:rgba(24,155,240,.1);color:var(--link);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.acto li b{display:block;color:var(--ink);font-size:15px;margin-bottom:3px}
.pasos{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;margin-top:48px}
.paso{background:var(--bg-alt);border-radius:var(--radius);padding:18px 14px;font-size:13.5px;line-height:1.4}
section.alt .paso{background:#fff}
.paso b{display:block;font-size:15px;margin-bottom:6px}
.paso .num{display:inline-flex;width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;align-items:center;justify-content:center;font-weight:700;font-size:14px;margin-bottom:10px}

/* SECTORES */
.sectores{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:44px}
.sector{border-radius:var(--radius);overflow:hidden;background:#fff;border:1px solid rgba(0,0,0,.08);text-align:center;padding-bottom:14px}
.sector .ph{aspect-ratio:1/0.75;background:linear-gradient(160deg,#e8edf2,#d3dde5);display:flex;align-items:center;justify-content:center;color:#7c8894;font-size:12px;margin-bottom:10px}
.sector .sico{aspect-ratio:1/0.75;background:linear-gradient(165deg,#f8fafc,#eef2f6);display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.sector .sico svg{width:84px;height:84px;color:#6e7680;transition:color .25s,transform .25s}
.sector span{font-size:14px;font-weight:600;padding:0 8px;display:block;line-height:1.25}
.sector{transition:transform .25s ease,box-shadow .25s ease}
.sector:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.08);text-decoration:none}
.sector:hover .sico svg{color:var(--brand);transform:scale(1.12)}

/* GAMA */
.gama{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.modelo{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:12px;text-align:center;padding:22px 18px}
.modelo .ph{aspect-ratio:1/1;background:linear-gradient(160deg,#eef1f4,#dbe2e8);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#8a95a1;font-size:11px;margin-bottom:12px}
.modelo .mfoto{aspect-ratio:1/1;background:linear-gradient(165deg,#f8fafc,#eef2f6);border-radius:12px;position:relative;margin-bottom:12px;overflow:hidden}
.modelo .mfoto img{position:absolute;inset:0;width:100%;height:100%;padding:2%;box-sizing:border-box;object-fit:contain;mix-blend-mode:multiply}
/* rollover: zoom a la unidad (cabezal/pantalla), la estructura se recorta en el tile */
.modelo .dif{display:block;font-size:16px;line-height:1.35;color:var(--ink);font-weight:600;margin:2px 4px 2px}
.modelo{transition:transform .25s ease,box-shadow .25s ease}
.modelo:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.08);text-decoration:none}

.modelo b{font-size:22px;display:block;margin-top:4px}
.modelo span{font-size:16px;color:var(--ink-soft)}
.strip{margin-top:34px;font-size:15px;color:var(--ink-soft);text-align:center}
.strip b{color:var(--ink)}

/* TPS DARK */
.tps{background:var(--dark);color:#f5f5f7;padding:120px 0}
.tps h2{color:#fff;max-width:900px}
.tps .sub{color:#a1a1a6}
.tps-media{margin-top:52px;aspect-ratio:16/7;border-radius:var(--radius);background:linear-gradient(135deg,#1c1c1f,#2c2c30);display:flex;align-items:center;justify-content:center;color:#6e6e73;font-size:15px}
.tps .btn{background:#fff;color:var(--dark)}
.tps a.link-arrow{color:#2997ff}

/* INSPECCION */
.split{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center}
.split .ph{aspect-ratio:4/3;border-radius:var(--radius);background:linear-gradient(135deg,#10222e,#274b5e);display:flex;align-items:center;justify-content:center;color:#7fa3b5;font-size:14px;overflow:hidden}
.split .ph.termo{background:#0b0f13}
.split .ph.termo img{width:100%;height:100%;object-fit:contain}

/* PRUEBA SOCIAL */
.logos{overflow:hidden;margin:22px 0 0;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logos-track{display:flex;align-items:center;width:max-content;animation:marquee 80s linear infinite}
.logos-track img{height:72px;width:auto;margin-right:68px;filter:grayscale(1);opacity:.6}
.envases-c .logos-track img{height:118px;margin-right:52px}
.env-fader{position:relative;background:#fff !important}
.env-fader img{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);width:auto;max-width:88%;height:86%;object-fit:contain;opacity:0;transition:opacity 1.4s ease}
.env-fader img.on{opacity:1}
/* El color de la zona central lo gradúa el script del footer (distancia al centro) */
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.logos-track{animation:none;flex-wrap:wrap;justify-content:center}}
.testimonios{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:900px;margin:0 auto;margin-top:44px}
.testimonio{border-left:3px solid var(--brand);padding:6px 0 6px 20px;text-align:left}
.testimonio p{font-size:17px;font-style:italic;color:var(--ink)}
.testimonio span{display:block;margin-top:10px;font-size:14px;color:var(--ink-soft);font-style:normal;font-weight:600}
.tlogos{display:flex;gap:16px;align-items:center;margin-top:10px}
.tlogos img{height:26px;width:88px;object-fit:contain;object-position:left center;filter:grayscale(1);opacity:.6;mix-blend-mode:multiply}
.tlogos img[alt="Probelte"]{height:33px;width:110px}
.tlogos img[alt="Cepsa"],.tlogos img[alt="Moeve"]{height:13px;width:44px}

/* CTA FINAL */
.final{background:var(--bg-alt);text-align:center;padding:110px 0}
.final .tel{margin-top:20px;font-size:15px;color:var(--ink-soft)}

/* FOOTER */
footer{background:var(--bg-alt);border-top:1px solid rgba(0,0,0,.08);padding:44px 0 60px;font-size:13px;color:var(--ink-soft)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
.foot-grid b{color:var(--ink);display:block;margin-bottom:10px;font-size:13px}
.foot-grid a{display:block;color:var(--ink-soft);margin-bottom:7px}
.legal{margin-top:36px;padding-top:18px;border-top:1px solid rgba(0,0,0,.08);display:flex;gap:18px;flex-wrap:wrap}

.split-tps{grid-template-columns:1fr 2fr}
.fader-tps{aspect-ratio:750/700;width:100%;max-width:400px;margin-top:-90px}
@media(max-width:1080px){ /* G 17-08: TODOS los iPad en vertical (el 12,9" mide 1024px) pasan al desplegable */
  .actos{grid-template-columns:1fr}
  .problemas,.testimonios{grid-template-columns:1fr 1fr}
  .pasos{grid-template-columns:repeat(4,1fr)}
  .sectores,.gama{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .split .mimg{order:2}
  /* C-200 (07-10): en iPad (561-1080px) el bloque apilado .ph llenaba el ancho entero (980×735 en horizontal); tope de 560px y centrado. El fader estrecho de TPS, a 280px. */
  .split .ph{width:100%;max-width:560px;justify-self:center}
  .split .ph.env-fader.medio{width:100%;max-width:280px;justify-self:center}
  .split-tps{grid-template-columns:1fr}
  .fader-tps{margin-top:0;max-width:320px;margin-left:auto;margin-right:auto}
  .cifras-grid{grid-template-columns:1fr 1fr;gap:34px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .nav-burger{display:block}
  .nav-cta{display:none} /* G 17-08: sin sitio arriba en movil; el CTA vive en el desplegable */
  .nav-links.open .nav-cta-menu{display:block;font-weight:700;color:var(--accent)}
  .nav-links.open{display:flex;position:absolute;top:52px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:rgba(255,255,255,.96);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.08);padding:6px 22px 10px}
  .nav-links.open a{display:block;width:100%;padding:13px 0;font-size:17px;border-bottom:1px solid rgba(0,0,0,.05)}
  .nav-links.open a:last-child{border-bottom:none}
}
.cifras-grid.compromisos{grid-template-columns:repeat(3,1fr);gap:26px;margin-top:36px}
.compromisos .cifra b{font-size:19px}
.fila3{grid-template-columns:repeat(3,1fr)!important}
.ventajas-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:44px;text-align:left}
.vcard{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:var(--radius);padding:22px}
.vcard .vimg{height:150px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.vcard .vimg img{max-height:100%;max-width:80%;object-fit:contain}
.vcard b{display:block;margin-bottom:6px;font-size:18px}
.vcard span{color:var(--ink-soft);font-weight:400}
@media(max-width:560px){
  .ventajas-grid{grid-template-columns:1fr}
  .fila3{grid-template-columns:1fr!important}
  .page-hero h1{font-size:26px}
  .cifras-grid.compromisos{grid-template-columns:1fr 1fr;gap:18px}
  .compromisos .cifra b{font-size:16.5px}
  .problemas,.testimonios{grid-template-columns:1fr}
  .pasos{grid-template-columns:1fr 1fr}
  .sectores,.gama{grid-template-columns:1fr}
  section{padding:64px 0}
}


/* ===== PLANTILLAS DE PÁGINAS INTERIORES ===== */
.page-hero{padding:84px 22px 54px}
.page-hero h1{font-size:clamp(34px,5vw,56px)}
.camino{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:42px;text-align:left}
.camino .paso{background:#fff}
section.alt .camino .paso{background:#fff}
section:not(.alt) .camino .paso{background:var(--bg-alt)}
.kv{display:grid;overflow-wrap:anywhere;grid-template-columns:230px 1fr;gap:0;margin-top:30px;border-top:1px solid rgba(0,0,0,.1)}
.kv dt{padding:13px 0;font-weight:600;border-bottom:1px solid rgba(0,0,0,.08)}
.kv dd{padding:13px 0;color:var(--ink-soft);border-bottom:1px solid rgba(0,0,0,.08)}
details.faq{border-bottom:1px solid rgba(0,0,0,.1);padding:4px 0}
details.faq summary{cursor:pointer;font-weight:600;font-size:17px;padding:16px 0;list-style:none;position:relative;padding-right:34px}
details.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:24px;color:var(--brand);font-weight:400}
details.faq[open] summary::after{content:"–"}
details.faq p{padding:0 0 18px;color:var(--ink-soft);max-width:820px}
.fq{max-width:760px;margin:0 auto}
.fq .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.fq label{display:block;font-size:13.5px;font-weight:600;margin-bottom:14px}
.fq input,.fq select,.fq textarea{display:block;width:100%;margin-top:6px;padding:11px 13px;font-size:15px;font-family:inherit;border:1px solid rgba(0,0,0,.18);border-radius:11px;background:#fff}
.fq input:focus,.fq select:focus,.fq textarea:focus{outline:2px solid var(--brand);border-color:transparent}
.fq .chk{display:flex;gap:9px;align-items:center;font-weight:400}
.fq .chk input{width:auto;margin:0}
.fq button{border:0;cursor:pointer;margin-top:6px}
@media(max-width:900px){.camino{grid-template-columns:1fr 1fr}.kv{grid-template-columns:1fr}.kv dt{border-bottom:0;padding-bottom:2px}.fq .fgrid{grid-template-columns:1fr}}
@media(max-width:560px){.camino{grid-template-columns:1fr}}

.banda{border-radius:var(--radius);overflow:hidden;margin:6px 0 10px}
.banda img{width:100%;height:auto;display:block;max-height:420px;object-fit:cover}
.galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px}
.gitem{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:10px}
.gitem img{max-width:100%;max-height:100%;object-fit:contain}
.sico.envfoto{padding:0;overflow:hidden}
.sico.envfoto img{width:100%;height:100%;object-fit:cover}
@media(max-width:700px){.galeria{grid-template-columns:1fr 1fr}}

.hero-video{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
@media (prefers-reduced-motion: reduce){.hero-video{display:none}.hero-media{background-image:url("https://img.youtube.com/vi/dz8NE0InXQ0/maxresdefault.jpg");background-size:cover;background-position:center}}

/* ===== Galería de packshots (aceite y otros) ===== */
.pack-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:36px}
.pack{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:var(--radius);padding:20px 12px 14px;margin:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.pack img{height:200px;max-width:100%;object-fit:contain}
.pack figcaption{font-size:13px;color:var(--ink-soft);text-align:center;line-height:1.3}
.pack-grid.p4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.pack-grid,.pack-grid.p4{grid-template-columns:repeat(2,1fr)}.pack img{height:150px}}

/* ===== Strip compacto de sectores (fichas de máquina) ===== */
.sector-line{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;margin-top:22px}
.sector-line a{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink-soft)}
.sector-line a:hover{color:var(--brand);text-decoration:none}
.sector-line svg{width:24px;height:24px;color:#6e7680;flex:none;transition:color .2s}
.sector-line a:hover svg{color:var(--brand)}

/* ===== Héroe con vídeo de fondo (velo blanco para legibilidad) ===== */
.hero-media-bg{position:relative;overflow:hidden}
.hero-media-bg .bgv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-media-bg::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.8);z-index:1}
.hero-media-bg>*:not(.bgv){position:relative;z-index:2}
@media (prefers-reduced-motion: reduce){.hero-media-bg .bgv{display:none}}

/* ===== Imagen a ancho completo de página (full-bleed) ===== */
.banda-full{width:100%}
.banda-full img{display:block;width:100%;max-height:440px;object-fit:cover}
.banda-corta img{max-height:299px}  /* 440 -> 352 -> 299 (-32% total): en contacto el texto comun tiene que verse sin scroll */

/* ===== Hoja checklist "De serie con cada SuperSeal" ===== */
.serie-check{max-width:460px;margin:34px auto 0;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:var(--radius);box-shadow:0 12px 34px rgba(0,0,0,.06);padding:10px 34px;list-style:none;text-align:left}
.serie-check li{display:flex;gap:14px;align-items:center;padding:14px 0;font-size:17px;border-bottom:1px solid rgba(0,0,0,.06)}
.serie-check li:last-child{border-bottom:none}
.serie-check li::before{content:"";flex:none;width:24px;height:24px;border-radius:50%;background-color:#34c759;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");background-size:14px;background-position:center;background-repeat:no-repeat}

/* ===== Hero de ficha: foto izquierda + texto derecha ===== */
.hero-ficha{text-align:left;min-height:calc(100vh - 52px);min-height:calc(100svh - 52px);display:flex;flex-direction:column;justify-content:center}
.hf-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:48px;align-items:center;max-width:1100px;margin:0 auto}
.hf-foto img{width:100%;max-height:440px;object-fit:contain;display:block}
.hero-ficha .hero-sub{margin:0 0 34px}
.hero-ficha .cta-row{justify-content:flex-start}
@media (max-width:820px){.hf-grid{grid-template-columns:1fr;gap:26px}.hero-ficha{text-align:center}.hero-ficha .cta-row{justify-content:center}.hero-ficha .hero-sub{margin:0 auto 30px}.hf-foto img{max-height:300px}}

/* ===== Sección compacta (carruseles de logos) ===== */
section.sec-compacta{padding:44px 0}

/* Hero con vídeo 360: columna de imagen más grande */
.hero-ficha-video .hf-grid{grid-template-columns:1.25fr 1fr}
@media (max-width:820px){.hero-ficha-video .hf-grid{grid-template-columns:1fr}}

/* ===== Tira de transportistas (repuestos exprés) ===== */
.carriers{display:flex;align-items:center;gap:20px;margin-top:20px;flex-wrap:wrap}
.carriers span{font-size:13px;color:var(--ink-soft)}
.carriers img{filter:none;opacity:1;width:auto}

/* ===== Héroe de la home con vídeo de fondo a pantalla generosa ===== */
.hero-bg-full{display:flex;flex-direction:column;justify-content:center;min-height:calc(100svh - 53px)}
.hero-bg-full::after{background:rgba(255,255,255,.55)}

/* ===== Imágenes de los apartados del método: seis marcos iguales, imagen entera (29-07) ===== */
.acto-img{width:100%;height:160px;object-fit:contain;border-radius:10px;margin-bottom:10px;display:block;background:#fff}

/* ===== Lightbox mínimo (clic para ampliar) ===== */
img[data-zoom]{cursor:zoom-in}
.lightbox{position:fixed;inset:0;background:rgba(10,10,12,.78);display:none;align-items:center;justify-content:center;z-index:300;cursor:zoom-out}
.lightbox.open{display:flex}
.lightbox img{max-height:90vh;max-width:92vw;border-radius:14px}

/* Link de texto dentro de los apartados del método: mismo tamaño que el texto */
.acto li .link-arrow{font-size:inherit;font-weight:600}

/* Héroe compacto (contacto): menos aire antes y después */
.hero-compacto{padding:42px 22px 14px}
.hero-compacto + section{padding-top:22px}

/* ===== Antispam: honeypot invisible ===== */
.hp-field{position:absolute !important;left:-9999px !important;top:-9999px !important;opacity:0;height:0;overflow:hidden}

/* ===== Banner de cookies ===== */
#qp-cookies{position:fixed;left:14px;right:14px;bottom:14px;z-index:400;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:980px;box-shadow:0 12px 40px rgba(0,0,0,.16);padding:10px 12px 10px 22px;display:flex;gap:16px;align-items:center;flex-wrap:nowrap;max-width:880px;margin:0 auto}
#qp-cookies p{flex:1;min-width:0}
#qp-cookies div{flex:none}
@media (max-width:660px){#qp-cookies{flex-wrap:wrap;border-radius:14px;padding:14px 18px;gap:12px} #qp-cookies p{flex:1 1 100%} #qp-cookies div{width:100%;justify-content:flex-end}} /* RWD-02 (07-10): texto a todo el ancho y botones debajo */
#qp-cookies p{margin:0;font-size:13.5px;color:var(--ink-soft)}
#qp-cookies a{color:var(--brand)}
#qp-cookies div{display:flex;gap:10px}
#qp-cookies button{font:inherit;font-size:13.5px;font-weight:600;padding:8px 18px;border-radius:980px;cursor:pointer;border:1px solid rgba(0,0,0,.18);background:#fff;color:var(--ink)}
#qp-cookies #qpc-si{background:var(--accent);color:#fff;border-color:transparent}

/* ===== Lo principal: lista lateral junto al closeup ===== */
.principal-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;gap:18px}
.principal-lista li b{display:block;font-size:17px;margin-bottom:3px}
.principal-lista li span{color:var(--ink-soft);font-size:15.5px;line-height:1.45}

/* Links dentro de párrafos de capítulo: mismo tamaño que el texto */
p.sub .link-arrow{font-size:inherit}

/* Fader de texto (¿Te suena? TPS) */
.txt-fader{position:relative;min-height:190px;margin-top:34px}
.txt-fader span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;font-size:clamp(24px,3.6vw,40px);font-weight:700;line-height:1.25;letter-spacing:-.015em;max-width:860px;margin:0 auto;opacity:0;transition:opacity 1.2s ease}
.txt-fader span.on{opacity:1}
.env-fader.lento img{transition-duration:2.2s;height:92%;max-width:96%;bottom:4%}
/* Variante medio envase: marco vertical, corte a sangre al borde derecho */
.split .ph.env-fader.medio{aspect-ratio:5/9;width:80%;justify-self:end}
.split:has(.env-fader.medio){gap:28px}
.env-fader.medio img{left:auto;right:0;transform:none;height:96%;max-width:none;bottom:2%}
.pico-g{width:54px;height:54px}
.pico-g svg{width:26px;height:26px}
.dos-listas{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:900px;margin:34px auto 0;align-items:start}
.dos-listas h3{font-size:20px;letter-spacing:-.01em;margin-bottom:4px;text-align:center}
.dos-listas .serie-check{margin-top:14px;max-width:none}
@media (max-width:720px){.dos-listas{grid-template-columns:1fr}}
.fcar .logos-track img{height:210px;width:auto;margin-right:24px;filter:none;opacity:1;border-radius:12px}
.fcar{margin-top:0}

/* Testimonios con manuscrita (fundido) */
.testi-fader{display:grid;margin-top:38px;max-width:980px;margin-left:auto;margin-right:auto}
.tslide{grid-area:1/1;display:grid;grid-template-columns:1.15fr .95fr .75fr;gap:22px;opacity:0;transition:opacity 1.6s ease;text-align:left}
.tslide.dos{grid-template-columns:1.15fr 1.7fr}
.tslide.on{opacity:1}
.tq{font-family:'Caveat',cursive;font-size:24px;line-height:1.3;color:var(--ink);font-weight:500}
.tid{display:flex;align-items:center;gap:14px;margin-top:20px}
.tid img{height:42px;width:auto;max-width:140px;object-fit:contain}
.tid span{font-size:15px;color:var(--ink-soft);line-height:1.45}
.tid b{color:var(--ink)}
.tfoto{max-height:340px;overflow:hidden;border-radius:var(--radius)}
.tfoto img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius)}
@media (max-width:760px){.tslide,.tslide.dos{grid-template-columns:1fr}.tfoto{max-height:170px}.tfoto img{object-position:center 30%}}

.legal-doc{max-width:760px}
.legal-doc h3{font-size:20px;margin:34px 0 10px;letter-spacing:-.01em}
.legal-doc p{font-size:16px;color:var(--ink);line-height:1.6;margin:0 0 14px}

/* CTA suave: enlace dentro del texto, sin peso de boton (26-07-2026) */
.camino .paso b .cta-suave,.cta-suave{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(24,155,240,.35)}
.cta-suave:hover{border-bottom-color:var(--accent);text-decoration:none}

/* Pagina de contacto: dos canales instantaneos al mismo nivel (26-07-2026) */
.canales{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px;text-align:center}
.canal{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:30px 26px;display:flex;flex-direction:column}
.tel-grande,.wa-marca{margin:0 0 14px;min-height:52px;display:flex;align-items:center;justify-content:center;font-size:clamp(26px,3vw,34px);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.tel-grande a{color:var(--brand);text-decoration:none}
.wa-marca a{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.wa-marca span{font-size:clamp(26px,3vw,34px);font-weight:700;letter-spacing:-.02em}
.ico-wa{color:#25D366;flex:none}
.canal-sub{margin:0 0 18px;font-size:15px;color:var(--ink-soft)}
.canal-texto{margin:0;font-size:16.5px;line-height:1.6;color:var(--ink-soft)}
.canales-comun{max-width:680px;margin:26px auto 0;font-size:18.5px;line-height:1.6;color:var(--ink)}
@media(max-width:760px){
  .canales{grid-template-columns:1fr;gap:16px}
  .tel-grande a{display:block;background:var(--brand);color:#fff;border-radius:980px;padding:14px 18px}
}

/* C-125: industrias en una sola página */
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px}
.chips span{border:1px solid rgba(0,0,0,.12);border-radius:999px;padding:7px 15px;font-size:14px;color:var(--ink-soft);background:#fff;line-height:1.35}
.logos-fila{-webkit-mask-image:none;mask-image:none;margin-top:36px}
.logos-fila .logos-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:16px 24px}
.logos-fila .salto{flex-basis:100%;height:0}
.logos-fila .logos-track img{margin:0;height:42px;width:104px;filter:none;opacity:.65;border-radius:0}

/* C-164/C-165: tres canales en fila (teléfono · email · WhatsApp), servicio técnico */
.canales-3{grid-template-columns:repeat(3,1fr)}
.canales-3 .canal{min-height:100%}
@media (max-width:900px){.canales-3{grid-template-columns:1fr}}

/* C-180: logos en color sobre los testimonios de clientes */
.testimonio .testi-logo{display:block;width:auto;margin:0 0 14px;filter:none;opacity:1}

/* EXT-14/15/16 (auditoría externa 07-10-2026) */
.split-logo{grid-template-columns:1fr 1.6fr;align-items:center}
@media (max-width:760px){.split-logo{grid-template-columns:1fr}}
.skip{position:absolute;left:-9999px;top:8px;z-index:1000;background:var(--brand);color:#fff;padding:10px 16px;border-radius:8px;font-weight:600}
.skip:focus{left:12px}
#qp-cookies a{color:#0b5fa8;text-decoration:underline}
.testi-fader{position:relative}
.testi-pausa{position:absolute;right:0;bottom:-6px;background:transparent;border:1px solid rgba(0,0,0,.18);border-radius:999px;padding:4px 12px;font-size:12.5px;color:var(--ink-soft);cursor:pointer}
.testi-pausa:hover,.testi-pausa:focus{border-color:var(--link);color:var(--link)}

/* RWD-01 (07-10, C-201): tabla Junior vs importación — en móvil, cada fila pasa a tarjeta apilada en vez de scroll lateral sin aviso */
@media (max-width:560px){
  .tabla-vs{overflow-x:visible}
  .tabla-vs table,.tabla-vs tbody,.tabla-vs tr,.tabla-vs td{display:block;width:100%}
  .tabla-vs thead{display:none}
  .tabla-vs tr{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px;background:#fff}
  .tabla-vs td{padding:4px 0!important;border:0!important;white-space:normal!important}
  .tabla-vs td:first-child{font-size:16px;padding-bottom:6px!important}
  .tabla-vs td[data-col]::before{content:attr(data-col) ': ';font-weight:600;color:var(--ink)}
}