:root{
  /* Identidad Zavala: azul marino, naranja y blanco sobre gris claro */
  --navy:#0E2747; --navy-2:#1A3D6B; --navy-3:#081A31;
  --ink:#0E2747; --ink-2:#2D4566; --muted:#4A5F7A; --line:#C3CDD9; --soft:#F5F7FA; --bg:#ECEFF3; --surface:#FFFFFF;
  --brand:#F26A1B; --brand-d:#C24E0C; --brand-soft:#FDEBDD; --wa:#1A8445; --wa-d:#146B37;   /* verde de WhatsApp más profundo: letras blancas legibles (antes #25D366 / #1DA851) */ --amber:#9A4A06; --amber-soft:#FCE9C8;
  --on-navy:#C5D1E0; --on-navy-2:#8FA3BD;
  --tip:#E8F0FE;   /* fondo de recuadros de aviso (capacitación gratis, "¿Cada cuándo?") */
  --radius:14px; --shadow:0 1px 2px rgba(14,39,71,.06),0 10px 28px rgba(14,39,71,.08);
  --shadow-hover:0 2px 4px rgba(14,39,71,.08),0 16px 38px rgba(14,39,71,.17);
  --t:.42s cubic-bezier(.4,0,.2,1);
  --topo:url("../img/textura/red-vertices.svg");   /* identidad Vértice: red de triangulación (antes curvas-nivel.svg) */
  --font:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  --font-d:'Archivo','Inter',system-ui,sans-serif;
  --font-cond:'Allrounder','Archivo',system-ui,sans-serif;
  --nav-h:72px; --wrap:1200px;
}
@font-face{font-family:'Inter';src:url(../fonts/inter.woff2) format('woff2'),url(../fonts/inter.woff) format('woff');font-weight:400 800;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url(../fonts/plex-sans.woff2) format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(../fonts/plex-mono-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(../fonts/plex-mono-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Archivo';src:url(../fonts/archivo.woff2) format('woff2'),url(../fonts/archivo.woff) format('woff');font-weight:500 800;font-stretch:100% 125%;font-display:swap}
/* Allrounder es tipografía comercial (Identity Letters). Si la compras, coloca el archivo en fonts/ y agrega aquí: url(../fonts/allrounder.woff2) format('woff2') */
@font-face{font-family:'Allrounder';src:local('Allrounder Grotesk Bold'),local('AllrounderGrotesk-Bold'),local('Allrounder Monument Bold'),local('AllrounderMonument-Bold');font-display:swap}
@font-face{font-family:'Marca Sokkia';src:url(../fonts/brand-sokkia.woff2) format('woff2'),url(../fonts/brand-sokkia.woff) format('woff');font-display:swap}
@font-face{font-family:'Marca STEC';src:url(../fonts/brand-stec.woff2) format('woff2'),url(../fonts/brand-stec.woff) format('woff');font-display:swap}
@font-face{font-family:'Marca Leica';src:url(../fonts/brand-leica.woff2) format('woff2'),url(../fonts/brand-leica.woff) format('woff');font-display:swap}
@font-face{font-family:'Marca Topcon';src:url(../fonts/brand-topcon.woff2) format('woff2'),url(../fonts/brand-topcon.woff) format('woff');font-display:swap}
@font-face{font-family:'Marca Ruide';src:url(../fonts/brand-ruide.woff2) format('woff2'),url(../fonts/brand-ruide.woff) format('woff');font-display:swap}
@font-face{font-family:'Marca Sanding';src:url(../fonts/brand-sanding.woff2) format('woff2'),url(../fonts/brand-sanding.woff) format('woff');font-style:italic;font-display:swap}
*{box-sizing:border-box}
/* <picture> (fotos en .webp con respaldo .jpg) no ocupa caja propia: la foto se acomoda igual que antes */
picture{display:contents}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* Animaciones de Windows/celular apagadas: se quitan los movimientos (desplazamientos, acercamientos),
   pero los cambios de color y el carrusel siguen suaves, porque no son movimiento */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important}.logo:hover img,.pcard:hover .pimg img,.svx:hover .svx-media img,.wa-float:hover,.btn:active{transform:none}.drawer,.toast{transition-property:opacity,visibility!important}}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.55;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
h1,h2,h3,h4{line-height:1.12;margin:0;letter-spacing:-.015em;font-family:var(--font-d);font-stretch:112%}
/* Transiciones suaves: el color pasa gradualmente al nuevo tono */
a,button,.btn,.chip,.card,.catcard,.pcard .pimg,.brand-logo,.variants button,.pd-thumbs button,.quote-btn,.faq summary,.sel,.search input,.ic{transition:color var(--t),background-color var(--t),border-color var(--t),box-shadow var(--t),transform var(--t)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:6px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.ico{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:700;letter-spacing:.01em;color:var(--brand)}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px}
.section{padding:72px 0}
.section-head{max-width:720px;margin:0 auto 40px;text-align:center}
.section-head h2{font-size:clamp(28px,4vw,38px);font-weight:800;margin:8px 0 10px}
.section-head p{color:var(--muted)}
.bg-soft{background:var(--surface)}
.bg-soft .card,.bg-soft .w-card{background:var(--soft)}
/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:15px;padding:13px 20px;border-radius:12px;white-space:nowrap;border:1.5px solid transparent}
.btn:active{transform:translateY(1px)}
.btn-brand{background:var(--brand);color:#fff}.btn-brand:hover{background:var(--navy);color:var(--brand)}
.btn-ink{background:var(--navy);color:#fff}.btn-ink:hover{background:var(--brand);color:var(--navy)}
.btn-wa{background:var(--wa);color:#fff}.btn-wa:hover{background:var(--wa-d)}
.btn-line{background:#fff;border-color:var(--line);color:var(--ink)}.btn-line:hover{border-color:var(--brand);color:var(--brand)}
.btn-ghost{color:var(--ink-2);padding:8px 10px}.btn-ghost:hover{color:var(--brand)}
.btn-block{width:100%}
/* Header */
/* Encabezado azul marino; el logo va sobre un recuadro blanco (igual que en el pie) porque sobre azul no se lee */
.hdr{position:sticky;top:0;z-index:50;background:var(--navy);   /* azul 100 % sólido (antes 97 %): en Firefox se alcanzaba a ver el texto de abajo */
backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid rgba(255,255,255,.08);color:#fff}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:16px}
.logo{display:flex;align-items:center;flex:none;background:#fff;border-radius:12px;padding:4px 10px}
.logo img{height:56px;width:auto;transition:transform var(--t)}
.logo:hover img{transform:scale(1.04)}
.nav{display:flex;align-items:center;gap:4px}
.nav a.lnk{padding:9px 12px;border-radius:10px;font-weight:600;font-size:15px;color:var(--on-navy)}
.nav a.lnk:hover,.nav a.lnk[aria-current="page"]{color:var(--brand)}
.nav .btn-brand[aria-current="page"]{box-shadow:0 0 0 3px rgba(255,255,255,.22)}
.nav .btn-brand[aria-current="page"]:hover{box-shadow:0 0 0 3px rgba(242,106,27,.45)}
.quote-btn{position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;font-weight:700;font-size:15px;border:1.5px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff}
.quote-btn:hover{border-color:var(--brand);color:var(--brand)}
.quote-count{min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--brand);color:#fff;font-size:12px;display:inline-grid;place-items:center}
.quote-count[data-n="0"]{background:rgba(255,255,255,.16);color:var(--on-navy)}
.menu-btn{display:none;width:44px;height:44px;border-radius:10px;place-items:center;color:#fff}
.menu-btn:hover{color:var(--brand)}
.menu-btn .ico{width:26px;height:26px}
.mnav{display:none;border-top:1px solid rgba(255,255,255,.08);background:var(--navy);padding:10px 20px 18px}
.mnav a{display:block;padding:12px 6px;font-weight:600;color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.mnav a:hover{color:var(--brand)}
.mnav.open{display:block}
@media (max-width:520px){.hdr .wrap{gap:8px}.logo{padding:3px 8px}.logo img{height:50px}}
@media (max-width:760px){body[data-view=product] .wa-float{display:none}}
body.drawer-open .wa-float{display:none}
body.drawer-open{overflow:hidden}
@media (max-width:900px){.nav .lnk,.nav .btn-brand{display:none}.menu-btn{display:grid}.quote-btn .lbl{display:none}}
/* Hero */
.hero{position:relative;height:min(78vh,640px);min-height:460px;background:linear-gradient(rgba(14,39,71,.8),rgba(14,39,71,.8)),var(--topo) center/cover,var(--navy);overflow:hidden;color:#fff}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;display:flex;align-items:center}
.slide.on{opacity:1;z-index:1}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,39,71,.9) 0%,rgba(14,39,71,.45) 55%,rgba(14,39,71,0) 100%)}
.slide .wrap{position:relative;z-index:2;width:100%}
.slide h1,.slide h2{font-size:clamp(34px,5.4vw,62px);font-weight:800;font-stretch:118%;max-width:760px}
.slide p{font-size:clamp(16px,2vw,20px);color:var(--on-navy);max-width:600px;margin:16px 0 28px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero-dots{position:absolute;z-index:3;bottom:22px;left:0;right:0;display:flex;justify-content:center;gap:8px}
.hero-dots button{width:28px;height:4px;border-radius:4px;background:rgba(255,255,255,.35)}
.hero-dots button[aria-current="true"]{background:var(--brand)}
/* Nosotros */
.two{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
@media (max-width:900px){.two{grid-template-columns:1fr}}
/* Nuestra historia: dos fotos encimadas + sello "Desde 1992"; texto siempre completo (sin recortes) */
.story{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;margin-bottom:72px}
.story-media{position:relative;padding:0 0 30% 0}
.story-media img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:18px;box-shadow:var(--shadow)}
.story-a{width:88%!important}
.story-b{position:absolute;right:0;bottom:22px;width:38%!important;aspect-ratio:4/5!important;border:6px solid var(--bg)}
.story-credit{position:absolute;left:0;bottom:0;margin:0;font-size:11px;color:var(--muted);max-width:58%}
.story-credit a{color:inherit;text-decoration:underline}
.story-badge{position:absolute;left:-14px;top:-14px;background:var(--brand);color:#fff;border-radius:16px;padding:12px 18px;box-shadow:0 10px 24px rgba(242,106,27,.35);line-height:1;text-align:center}
.story-badge small{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.9;margin-bottom:4px}
.story-badge b{font-family:var(--font-d);font-size:30px;font-weight:800}
.story-txt h2,.story-txt .story-h{font-size:clamp(28px,4vw,40px);font-weight:800;margin:8px 0 18px}
.about-page{padding-top:28px}
.about-ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:56px}
.story-txt p{color:var(--ink-2);margin-bottom:14px}
.story-stats{list-style:none;padding:0;margin:24px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.story-stats li{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--brand);border-radius:12px;padding:14px 14px 12px}
.story-stats b{display:block;font-family:var(--font-d);font-size:22px;font-weight:800;color:var(--navy);line-height:1.15}
.story-stats span{display:block;font-size:13px;color:var(--muted);margin-top:4px;line-height:1.35}
@media (max-width:900px){.story{grid-template-columns:1fr;gap:36px;margin-bottom:56px}.story-media{max-width:560px;width:100%;margin:14px auto 0}.story-badge{left:-6px}}
@media (max-width:480px){.story-stats{grid-template-columns:1fr}.story-stats li{display:flex;align-items:baseline;gap:10px}.story-stats span{margin-top:0}}
.about h2{font-size:clamp(28px,4vw,38px);font-weight:800;margin:8px 0 18px}
.about p{color:var(--ink-2);margin-bottom:14px}
.brands{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
.brand-logo{height:64px;border:1px solid var(--line);border-radius:12px;display:grid;place-items:center;padding:10px;background:#fff}
.brand-logo:hover{box-shadow:var(--shadow-hover)}
.brand-logo img{max-height:40px;width:auto;filter:grayscale(1);opacity:.7;transition:filter var(--t),opacity var(--t)}
.brand-logo:hover img{filter:none;opacity:1}
.brand-logo span{font-weight:800;letter-spacing:.08em;color:var(--muted);font-size:14px}
.lab-card{background:linear-gradient(rgba(14,39,71,.9),rgba(14,39,71,.9)),var(--topo) center/cover,var(--navy);color:#fff;border-radius:20px;padding:36px;position:relative;overflow:hidden}
.lab-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--brand)}
.lab-card h3{font-size:24px;color:var(--brand);margin-bottom:10px}
.lab-card p{color:var(--on-navy);margin-bottom:22px}
.checks li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:15px}
.checks .ico{color:var(--brand);margin-top:2px}
.lab-card .btn{margin-top:22px}
/* Cards genéricas */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:860px){.grid-3{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:box-shadow var(--t)}
.card:hover{box-shadow:var(--shadow-hover)}
.card:hover .ic,.catcard:hover .ic{background:var(--brand);color:var(--navy)}
.card .ic{width:52px;height:52px;border-radius:12px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;margin-bottom:16px}
.card .ic .ico{width:26px;height:26px}
.card h3{font-size:19px;font-weight:700;margin-bottom:8px}
.card p{color:var(--muted);font-size:15px}
.center{text-align:center}
.mt-32{margin-top:32px}
/* Renta / garantía */
.band{background:linear-gradient(rgba(14,39,71,.88),rgba(14,39,71,.88)),var(--topo) center/cover,var(--navy);color:#fff;border-radius:22px;padding:40px;display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:center}
.band h2{font-size:clamp(26px,3.6vw,34px);font-weight:800;margin:8px 0 12px}
.band p{color:var(--on-navy)}
.band .actions{display:flex;flex-direction:column;gap:10px}
@media (max-width:860px){.band{grid-template-columns:1fr;padding:28px}}
.warranty{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:1060px){.warranty{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.warranty{grid-template-columns:1fr}}
/* Capacitación gratis al comprar (página de cada equipo, antes de los botones) */
.pd-feats{margin-top:32px}
.pd-feats h2{font-size:20px;font-weight:800;margin-bottom:12px}
.pd-feats ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;padding:0;margin:0}
@media (max-width:600px){.pd-feats ul{grid-template-columns:1fr}}
.pd-feats li{display:flex;gap:8px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);line-height:1.4}
.pd-feats li .ico{width:18px;height:18px;flex:none;color:var(--brand);margin-top:1px}
.pd-train{display:flex;gap:10px;align-items:flex-start;margin:-8px 0 20px;padding:12px 14px;border-radius:12px;background:var(--tip);color:var(--ink-2);font-size:14.5px}
.pd-train .ico{color:var(--brand);margin-top:1px}
.pd-train b{color:var(--ink)}
.pd-train.pd-incl{margin-bottom:10px}
.w-card{border:1px solid var(--line);border-radius:var(--radius);padding:26px;background:#fff;transition:box-shadow var(--t)}
.w-card:hover{box-shadow:var(--shadow-hover)}
.w-card .big{font-size:40px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.w-card .big small{font-size:16px;font-weight:600;color:var(--muted);letter-spacing:0;margin-left:4px}
.w-card h3{font-size:17px;margin:4px 0 8px}
.w-card p{font-size:14px;color:var(--muted)}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:99px}
/* Condición del equipo: Allrounder (si está disponible) o Archivo extra ancho */
.tag-new,.tag-used{font-family:var(--font-cond);font-stretch:125%;font-weight:800;letter-spacing:.06em;font-size:11.5px}
.tag-new{background:var(--brand-soft);color:var(--brand-d)}
.tag-used{background:var(--amber-soft);color:var(--amber)}
.tag-ink{background:#E2E8F0;color:var(--ink-2)}
/* Disponibilidad: equipo en existencia, se entrega de inmediato */
.tag-stock{background:var(--tip);color:var(--navy-2)}
.tag-stock .ico{width:13px;height:13px;stroke-width:2.6}
/* FAQ */
.faq{max-width:800px;margin:0 auto}
.faq details{border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:12px}
.faq summary{list-style:none;cursor:pointer;padding:18px 20px;font-weight:700;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary:hover,.faq details[open] summary{color:var(--brand)}
.faq details{transition:border-color var(--t)}.faq details:hover{border-color:var(--brand)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ico{transition:transform var(--t),color var(--t);color:var(--muted)}
.faq summary:hover .ico{color:var(--brand)}
.faq details[open] summary .ico{transform:rotate(180deg)}
.faq .ans{padding:0 20px 18px;color:var(--ink-2);font-size:15px}
/* Contacto */
.contact{background:linear-gradient(rgba(14,39,71,.9),rgba(14,39,71,.9)),var(--topo) center/cover,var(--navy);color:#fff;padding:72px 0}
.contact .eyebrow{color:var(--brand)}
.contact h2{font-size:clamp(28px,4vw,38px);font-weight:800;margin:8px 0 12px}
.contact .lead{color:var(--on-navy);margin-bottom:28px}
.c-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:40px}
@media (max-width:900px){.c-grid{grid-template-columns:1fr}}
.c-item{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.c-item .ib{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.07);display:grid;place-items:center;color:var(--brand);flex:none}
.c-item .ib.wa{color:var(--wa)}
.c-item small{display:block;font-size:13px;color:var(--on-navy-2);font-weight:600;margin-bottom:3px}
.c-item b{font-weight:700}
.c-item .sub{color:var(--on-navy-2);font-size:14px}
.c-item a:hover{color:var(--brand)}
.map{border-radius:18px;overflow:hidden;background:var(--navy-2);min-height:340px;position:relative;border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column}
.map iframe{border:0;width:100%;flex:1;min-height:300px}
.map-bar{display:flex;gap:8px;flex-wrap:wrap;padding:12px;background:var(--navy-3)}
.map-bar .btn{padding:9px 14px;font-size:14px}
.btn-dark{background:rgba(255,255,255,.08);color:#fff}.btn-dark:hover{background:var(--brand);color:var(--navy)}
/* Footer */
.ftr{background:var(--navy-3);color:var(--on-navy-2);font-size:14px;padding:28px 0}
.ftr .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap}
.ftr-logo{background:#fff;border-radius:12px;padding:8px 12px;display:inline-flex;flex:none}
.ftr-logo img{height:56px;width:auto}
.ftr-txt{display:flex;flex-direction:column;gap:2px}
/* Vistas */
.view[hidden]{display:none!important}
.page-top{padding-top:28px;padding-bottom:8px}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:14px;color:var(--muted)}
.crumbs a:hover{color:var(--brand)}
.crumbs .ico{width:14px;height:14px}
.crumbs [aria-current]{color:var(--ink);font-weight:600}
.page-title{font-size:clamp(28px,4vw,40px);font-weight:800;margin:14px 0 6px}
.page-sub{color:var(--muted);max-width:680px}
/* Facebook: burbuja bajo el mapa; al pasar el cursor toma el azul de Facebook con la F blanca */
.map-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.fb-bubble{align-self:flex-start;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.18);color:var(--on-navy);transition:color var(--t),background-color var(--t),border-color var(--t),box-shadow var(--t)}
.map-col .map{flex:1}
/* Reseña en Google (enlaces oficiales del perfil: compartir y pedir reseñas) */
.review-cta{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.review-cta .stars{display:flex;gap:2px;color:var(--brand)}
.review-cta .stars .ico{width:16px;height:16px;flex:none;fill:currentColor;stroke:none}
/* Calificación: estrellas grises abajo y de color encima, recortadas al porcentaje (4.4 de 5 = 88 %) */
.g-rating{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:8px;color:var(--on-navy);text-decoration:none;padding-right:16px;border-right:1px solid rgba(255,255,255,.12)}
.g-rating .num{grid-row:span 2;font-size:30px;line-height:1;color:#fff;font-weight:800}
.g-rating small{font-size:12.5px;white-space:nowrap}
.g-rating:hover small{text-decoration:underline}
.g-rating:focus-visible small{text-decoration:underline}   /* separado: un navegador viejo que no entienda :focus-visible ignoraría también el :hover */
.g-stars{position:relative;display:block;justify-self:start;width:max-content}
.g-stars .off{color:rgba(255,255,255,.22)}
.g-stars .on{position:absolute;inset:0 auto 0 0;overflow:hidden}
.review-cta p{margin:0;flex:1 1 200px;color:var(--on-navy);font-size:14.5px;line-height:1.45}
.review-cta p b{display:block;color:#fff;font-size:15.5px}
.review-cta .btn{padding:9px 16px;font-size:14px}
@media (max-width:560px){.g-rating{border-right:0;padding-right:0;flex-basis:100%;justify-content:start}.review-cta p{flex-basis:100%}}
.fb-bubble .ico{width:22px;height:22px;fill:currentColor;stroke:none}
.fb-bubble:hover{background:#1877F2;border-color:#1877F2;color:#fff;box-shadow:0 6px 18px rgba(24,119,242,.35)}
.fb-bubble:focus-visible{background:#1877F2;border-color:#1877F2;color:#fff;box-shadow:0 6px 18px rgba(24,119,242,.35)}
/* Solicitud de servicio (formulario que arma el WhatsApp) */
.svc-form{background:var(--surface);border-radius:22px;box-shadow:var(--shadow);padding:clamp(22px,4vw,40px);margin:48px 0;scroll-margin-top:calc(var(--nav-h) + 90px)}
.svc-form-head{max-width:700px;margin-bottom:22px}
.svc-form-head h2{font-size:clamp(24px,3vw,32px);font-weight:800;margin:8px 0}
.svc-form-head .lead{color:var(--ink-2)}
#solForm{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
#solForm .sf-full{grid-column:1/-1}
.sf-full .btn{max-width:100%;white-space:normal;text-align:center}   /* en celulares de 320 px el texto del botón baja de renglón en vez de salirse */
#solForm label,#solForm legend{display:flex;flex-direction:column;gap:7px;font-weight:700;font-size:14px;color:var(--ink)}
#solForm .lt{display:block}
#solForm legend{margin-bottom:8px;display:block}
#solForm fieldset{border:0;padding:0;margin:0;min-width:0}
#solForm i{color:var(--brand-d);font-style:normal}
#solForm small{font-weight:500;color:var(--muted)}
#solForm input[type=text],#solForm textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;font:inherit;font-size:15px;font-weight:400;background:#fff;color:var(--ink);transition:border-color var(--t),box-shadow var(--t)}
#solForm textarea{resize:vertical;min-height:84px}
#solForm input[type=text]:hover,#solForm textarea:hover{border-color:var(--muted)}
#solForm input[type=text]:focus,#solForm textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
#solForm .sel{width:100%;font-weight:400;color:var(--ink)}
#solForm [aria-invalid="true"]{border-color:#C2410C!important;box-shadow:0 0 0 3px #FDE2D3!important}
.sf-pills{display:flex;flex-wrap:wrap;gap:8px}
.sf-pills label{flex-direction:row!important;align-items:center;gap:8px!important;padding:9px 14px;border:1.5px solid var(--line);border-radius:99px;background:#fff;font-weight:600!important;cursor:pointer;transition:border-color var(--t),background-color var(--t),color var(--t)}
#solForm .sf-pills label:hover{border-color:var(--brand);color:var(--brand)}
.sf-pills input{accent-color:var(--brand);width:16px;height:16px;margin:0}
#solForm .sf-pills label:has(input:checked){background:var(--navy);border-color:var(--navy);color:#fff}
#solForm .sf-pills label:has(input:checked):hover{background:var(--brand);border-color:var(--brand);color:var(--navy)}
/* Lo mismo con la clase .on (la pone el código): para navegadores que no entienden :has (Firefox anterior a 2024) */
#solForm .sf-pills label.on{background:var(--navy);border-color:var(--navy);color:#fff}
#solForm .sf-pills label.on:hover{background:var(--brand);border-color:var(--brand);color:var(--navy)}
.sf-pills.invalid label{border-color:#C2410C}
.sf-err{background:#FDE2D3;color:#7C2D12;border-radius:12px;padding:10px 14px;font-size:14px;font-weight:600}
.sf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:4px}
.sf-actions .btn{padding:15px 24px}
.sf-privacy{font-size:13px;color:var(--muted);flex:1 1 260px}
.sf-privacy a{text-decoration:underline;transition:color var(--t)}
.sf-privacy a:hover{color:var(--brand)}
@media (max-width:640px){#solForm{grid-template-columns:minmax(0,1fr)}.sf-actions .btn{flex:1 1 100%}}
/* Comparador */
.pitem{position:relative;display:flex;flex-direction:column}
.pitem .pcard{flex:1}
@media (max-width:560px){body .toast{white-space:normal;text-align:center;width:max-content}}
@media (max-width:560px){.cmp-table tbody th{width:118px;min-width:110px;padding:10px}.cmp-table td{min-width:170px}}
.cmp-open{margin-left:4px}
@media (max-width:760px){.toolbar .count{margin-left:0}.cmp-open{flex:1 1 100%}}
.cmp-pickers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0 4px}
.cmp-pick{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:var(--ink-2)}
@media (max-width:760px){.cmp-pickers{grid-template-columns:minmax(0,1fr)}}
/* Casilla de cada equipo (abre la tarjeta de selección) */
.cmp-slot{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:10px 14px;border:1.5px dashed #B9C4D3;border-radius:14px;background:#fff;font:inherit;text-align:left;color:var(--ink-2);cursor:pointer;transition:border-color var(--t),box-shadow var(--t)}
.cmp-slot .ico{width:20px;height:20px;color:var(--brand);flex:none}
.cmp-slot b{font-size:15px;font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-slot.on{border-style:solid;border-color:var(--line);color:var(--ink)}
.cmp-slot img{width:42px;height:42px;object-fit:contain;mix-blend-mode:multiply;flex:none}
.cmp-slot small{font-size:13px;font-weight:700;color:var(--brand);flex:none}
.cmp-slot:hover:not(:disabled){border-color:var(--brand);box-shadow:var(--shadow)}
.cmp-slot:disabled{opacity:.5;cursor:not-allowed}
/* Tarjeta de selección: lo de atrás se difumina como vidrio (estilo "liquid glass") */
body.modal-open{overflow:hidden}
body.modal-open .wa-float{display:none}
.cmpm{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:28px}
.cmpm[hidden]{display:none}
/* Desenfoque ligero, como ver a través de un cristal mojado: se distinguen las formas de atrás */
.cmpm-back{position:absolute;inset:0;background:rgba(232,238,246,.18);-webkit-backdrop-filter:blur(6px) saturate(1.7) brightness(1.03);backdrop-filter:blur(6px) saturate(1.7) brightness(1.03);opacity:0;transition:opacity .28s ease}
.cmpm-card{position:relative;display:flex;flex-direction:column;width:min(1120px,100%);height:min(820px,calc(100vh - 56px));height:min(820px,calc(100dvh - 56px));
  background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
  border:1px solid rgba(255,255,255,.75);border-radius:30px;box-shadow:0 30px 90px rgba(14,39,71,.28),0 2px 6px rgba(14,39,71,.08),inset 0 1px 0 rgba(255,255,255,.95);overflow:hidden;
  opacity:0;transform:translateY(14px) scale(.98);transition:opacity .28s ease,transform .32s cubic-bezier(.2,.8,.2,1)}
.cmpm.on .cmpm-back{opacity:1}
.cmpm.on .cmpm-card{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.cmpm-back,.cmpm-card{transition:none}}
.cmpm-top{padding:22px 26px 14px;border-bottom:1px solid rgba(14,39,71,.08);background:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,.35))}
.cmpm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.cmpm-head h2{font-size:26px;font-weight:800;letter-spacing:-.02em}
.cmpm-x{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:0;background:rgba(14,39,71,.08);color:var(--ink);cursor:pointer;flex:none}
.cmpm-x:hover{background:rgba(14,39,71,.16)}
.cmpm-x .ico{width:20px;height:20px}
.cmpm-search{display:flex;align-items:center;gap:10px;padding:0 16px;height:52px;border-radius:16px;background:#fff;border:1.5px solid var(--line);box-shadow:inset 0 1px 2px rgba(14,39,71,.04)}
.cmpm-search:focus-within{border-color:var(--brand)}
.cmpm-search .ico{width:20px;height:20px;color:var(--muted);flex:none}
.cmpm-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:16px;color:var(--ink)}
.cmpm-cats{display:flex;gap:8px;overflow-x:auto;margin-top:12px;padding-bottom:2px;scrollbar-width:none}
.cmpm-cats::-webkit-scrollbar{display:none}
.cmpm-cats .chip{cursor:pointer;font:inherit;font-weight:600;font-size:14px}
.cmpm-lock{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink-2);background:var(--tip);padding:8px 12px;border-radius:10px}
.cmpm-lock .ico{width:16px;height:16px}
.cmpm-list{flex:1;overflow-y:auto;padding:6px 26px 20px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.cmpm-list section{margin-top:16px}
.cmpm-list h3{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px}
.cmpm-list h3 span{color:var(--muted);font-weight:600;letter-spacing:0;margin-left:4px}
.cmpm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.cmpm-it{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 10px 12px;border:1.5px solid var(--line);border-radius:18px;background:#fff;font:inherit;text-align:left;color:var(--ink);cursor:pointer;transition:border-color var(--t),box-shadow var(--t)}
.cmpm-it .im{display:grid;place-items:center;width:100%;aspect-ratio:4/3;border-radius:12px;background:#fff;overflow:hidden;margin-bottom:4px}
.cmpm-it img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:6%}
.cmpm-it b{font-size:14.5px;font-weight:700;line-height:1.25}
.cmpm-it small{font-size:12.5px;color:var(--muted)}
.cmpm-it:hover:not(:disabled){border-color:var(--brand);box-shadow:var(--shadow)}
.cmpm-it[aria-pressed="true"]{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.cmpm-it:disabled{opacity:.45;cursor:not-allowed}
.cmpm-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 26px;border-top:1px solid rgba(14,39,71,.08);font-size:14px;color:var(--muted);background:rgba(255,255,255,.6)}
.cmpm-foot .btn{padding:10px 16px;font-size:14px}
@media (max-width:640px){
  .cmpm{padding:10px;place-items:end center}
  .cmpm-card{height:calc(100vh - 20px);height:calc(100dvh - 20px);border-radius:24px}
  .cmpm-top{padding:16px 16px 12px}
  .cmpm-head{margin-bottom:12px}.cmpm-head h2{font-size:21px}
  .cmpm-list{padding:4px 16px 16px}
  .cmpm-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cmpm-foot{padding:10px 16px}
}
.cmp-legend{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);font-weight:600}
.cmp-legend i{display:inline-block;width:14px;height:14px;border-radius:4px;margin-left:6px}
.cmp-legend i.b{background:#DDF3E4;border:1px solid #2F9E5A}.cmp-legend i.w{background:#FBE3E3;border:1px solid #C53D3D}
.cmp-table td.best{background:#DDF3E4!important;color:#14532D;font-weight:700}
.cmp-table td.worst{background:#FBE3E3!important;color:#7F1D1D;font-weight:700}
.cmp-table td.nd{color:var(--muted)}
.cmp-table .nox{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#C53D3D;color:#fff;font-size:12px;font-weight:800;vertical-align:middle}
.cmp-table td small{font-weight:600;font-size:12.5px}
.cmp-legend .lg-x{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#C53D3D;color:#fff;font-size:10px;font-weight:800;margin-left:8px}
.cmp-legend .lg-d{color:var(--muted);font-weight:800;margin-left:8px}
.cmp-legend .lg-e{color:var(--brand-d);font-weight:800;margin-left:8px}
.cmp-legend{flex-wrap:wrap}
sup.ext{color:var(--brand-d);font-weight:800;margin-left:2px}
.cmp-foot{font-size:12.5px;line-height:1.55;color:var(--muted);margin:12px 2px 0;max-width:900px}
.cmp-foot b{color:var(--ink-2)}
.cmp-honest{margin:16px 0 0;padding:14px 16px;border-radius:12px;background:var(--surface);border-left:4px solid var(--navy);box-shadow:var(--shadow);font-size:14px;line-height:1.6;color:var(--ink-2);max-width:900px}
.cmp-honest b{color:var(--ink)}
.cmp-tools{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;margin:16px 0 14px}
.cmp-tools .sel{max-width:100%}
.cmp-tools .diff{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;cursor:pointer}
.cmp-tools .diff input{accent-color:var(--brand);width:17px;height:17px}
.cmp-note{background:var(--amber-soft);color:var(--amber);border-radius:12px;padding:10px 14px;font-size:14px;font-weight:600;margin-bottom:14px}
.cmp-scroll{overflow-x:auto;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);-webkit-overflow-scrolling:touch}
.cmp-table{border-collapse:separate;border-spacing:0;width:100%;min-width:560px;font-size:14px}
.cmp-table th,.cmp-table td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cmp-table tbody th{position:sticky;left:0;background:var(--soft);color:var(--ink-2);font-weight:700;width:170px;min-width:130px;z-index:1}
.cmp-table thead th{background:#fff;vertical-align:bottom}
.cmp-table thead th:first-child{position:sticky;left:0;z-index:2;background:#fff}
.cmp-table td{min-width:190px;color:var(--ink)}
.cmp-table .grp th,.cmp-table .grp td{background:var(--navy);color:#fff;font-weight:800;font-size:13px;letter-spacing:.02em}
.cmp-table tr.same.hide{display:none}
.cmp-head{display:flex;flex-direction:column;gap:8px;position:relative}
.cmp-head .pic{aspect-ratio:1/1;max-width:150px;background:#fff;border:1px solid var(--line);border-radius:12px;display:grid;place-items:center;overflow:hidden}
.cmp-head .pic img{width:100%;height:100%;object-fit:contain;padding:8%;mix-blend-mode:multiply}
.cmp-head a.nm{font-weight:800;font-size:15px;line-height:1.3;transition:color var(--t)}
.cmp-head a.nm:hover{color:var(--brand)}
.cmp-head .rm{position:absolute;top:0;right:0;width:32px;height:32px;border-radius:9px;border:1.5px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--muted);transition:color var(--t),border-color var(--t)}
.cmp-head .rm:hover{color:var(--brand);border-color:var(--brand)}
.cmp-head .rm .ico{width:16px;height:16px}
.cmp-table .act td{border-bottom:0}
.cmp-table .act .btn{width:100%;padding:11px 12px;font-size:14px;margin-bottom:8px;white-space:normal;text-align:center}
.cmp-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
@media (max-width:560px){.cmp-cta .btn{flex:1 1 100%}}
/* Aviso de privacidad (texto legal) */
.legal{max-width:780px;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(22px,4vw,44px);margin-top:18px;color:var(--ink-2);line-height:1.65}
.legal .page-title{margin-top:0}
.legal-date{color:var(--muted);font-size:14px;margin:0 0 18px}
.legal h2{font-size:20px;font-weight:800;color:var(--ink);margin:30px 0 10px}
.legal p{margin:0 0 12px}
.legal ul,.legal ol{margin:0 0 14px;padding-left:22px}
.legal li{margin:6px 0}
.legal b{color:var(--ink)}
.legal a{color:var(--brand-d);text-decoration:underline;text-underline-offset:2px;transition:color var(--t)}
.legal a:hover{color:var(--navy)}
.legal mark.pend{background:#FFF3B0;color:var(--ink);padding:0 4px;border-radius:4px}
.ftr-txt a{color:var(--on-navy);text-decoration:underline;text-underline-offset:2px;transition:color var(--t)}
.ftr-txt a:hover{color:var(--brand)}
.drawer .privacy{font-size:12.5px;color:var(--muted);margin-top:10px}
.drawer .privacy a{text-decoration:underline;transition:color var(--t)}
.drawer .privacy a:hover{color:var(--brand)}
/* Catálogo */
.cats{display:flex;gap:8px;overflow-x:auto;padding:4px 0 2px;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:99px;border:1.5px solid var(--line);font-weight:600;font-size:14px;white-space:nowrap;background:#fff}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.chip[aria-current="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.chip[aria-current="true"]:hover{background:var(--brand);border-color:var(--brand);color:var(--navy)}
.chip .n{font-size:12px;opacity:.78}   /* .78 (antes .6): el número se lee bien también para personas con poca vista */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:20px 0 26px}
.search{position:relative;flex:1 1 260px}
.search .ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);width:18px;height:18px}
.search input{width:100%;padding:12px 14px 12px 42px;border:1.5px solid var(--line);border-radius:12px;font:inherit;font-size:15px;background:#fff}
.search input:hover,.sel:hover{border-color:var(--muted)}
.search input:focus,.sel:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.sel{padding:12px 36px 12px 14px;border:1.5px solid var(--line);border-radius:12px;font:inherit;font-size:15px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/18px;-webkit-appearance:none;appearance:none;color:var(--ink)}
.count{color:var(--muted);font-size:14px;margin-left:auto}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 20px}
@media (max-width:1100px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.pgrid{grid-template-columns:repeat(2,1fr);gap:22px 12px}}
/* Páginas del catálogo (5 filas por página) */
.pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:40px}
.pager button{min-width:44px;height:44px;padding:0 12px;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:inherit;font-weight:700;font-size:15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.pager button:hover:not(:disabled):not([aria-current="page"]){border-color:var(--brand);color:var(--brand-d)}
.pager button[aria-current="page"]{background:var(--navy);border-color:var(--navy);color:#fff;cursor:default}
.pager button:disabled{opacity:.4;cursor:default}
.pager .ico{width:18px;height:18px}
.pager .pg-prev .ico{transform:rotate(180deg)}
.pager .pg-gap{color:var(--muted);padding:0 2px}
@media (max-width:560px){.pager{gap:6px}.pager .pg-arrow span{display:none}.pager .pg-arrow{padding:0}}
.pcard{display:flex;flex-direction:column;gap:12px}
.pcard .pimg{aspect-ratio:1/1;background:#fff;border:1px solid var(--line);border-radius:var(--radius);display:grid;place-items:center;overflow:hidden;position:relative}
.pcard .pimg img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:8%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pcard:hover .pimg{border-color:var(--brand);box-shadow:var(--shadow)}
.pcard:hover .pimg img{transform:scale(1.05)}
.pcard .pimg .tag{position:absolute;top:10px;left:10px}
.pcard .pimg .tag-stock{top:auto;bottom:10px}
@media (max-width:420px){.pcard .pimg .tag-stock{font-size:11px;letter-spacing:.03em;padding:4px 8px;left:6px;bottom:6px}}   /* 11 px (antes 10): se lee bien en celular y sigue cabiendo en la tarjeta */
.pcard .pbrand{font-size:15px;color:var(--ink-2);line-height:1.2}
.pcard h3{font-size:16px;font-weight:700;line-height:1.3;font-stretch:106%;transition:color var(--t)}
.pcard:hover h3{color:var(--brand)}
.pcard .pdesc{font-size:14px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard .pcta{font-size:14px;font-weight:700;color:var(--ink);display:inline-flex;align-items:center;gap:6px;transition:color var(--t),gap var(--t)}
.pcard:hover .pcta{gap:10px}
.pcard:hover .pcta{color:var(--brand)}
.empty{text-align:center;padding:56px 20px;border:1.5px dashed var(--line);border-radius:var(--radius);color:var(--muted)}
.empty b{display:block;color:var(--ink);font-size:18px;margin-bottom:6px}
/* Hub categorías */
.catgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:56px}
@media (max-width:1000px){.catgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.catgrid{grid-template-columns:repeat(2,1fr)}}
.catcard{border:1px solid var(--line);border-radius:var(--radius);padding:22px 18px;background:#fff;display:block}
.catcard:hover{border-color:var(--brand);box-shadow:var(--shadow)}
.catcard:hover h3{color:var(--brand)}
.catcard .ic{width:48px;height:48px;border-radius:12px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;margin-bottom:14px}
.catcard .ic .ico{width:24px;height:24px}
.catcard h3{font-size:16px;font-weight:700}
.catcard p{font-size:13px;color:var(--muted);margin-top:3px}
/* Detalle producto */
.pd{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;padding:24px 0 56px}
@media (max-width:900px){.pd{grid-template-columns:minmax(0,1fr);gap:28px}}
.pd>*{min-width:0}
.pd-media{position:sticky;top:calc(var(--nav-h) + 20px);align-self:start;background:#fff;border:1px solid var(--line);border-radius:22px;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden}
@media (max-width:900px){.pd-media{position:relative;top:0}}
.pd-media img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:9%}
.pd-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.pd h1{font-size:clamp(28px,3.6vw,40px);font-weight:800;margin-bottom:12px}
.pd .lead{color:var(--ink-2);font-size:17px;margin-bottom:24px}
.pd-ctas{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.pd-ctas .btn-wa{grid-column:1/-1;padding:16px}
@media (max-width:520px){.pd-ctas{grid-template-columns:1fr}}
.pd-specs{margin-top:30px}
.specs h2{font-size:20px;font-weight:800;margin-bottom:12px;color:var(--ink)}
.specs .row{transition:background-color var(--t)}.specs .row:hover{background:rgba(242,106,27,.06)}
.specs dl{margin:0;border-top:1px solid var(--line)}
.specs .row{display:grid;grid-template-columns:1fr 1.2fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.specs dt{color:var(--muted)}
.specs dd{margin:0;font-weight:600;text-align:right}
.mail-alt{margin-top:2px}.mail-alt button{color:var(--on-navy-2);font:inherit;padding:0;background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}.mail-alt a{text-decoration:underline;text-underline-offset:2px}.mail-alt button:hover{color:var(--brand)}
.pd-thumbs{display:flex;gap:10px;margin-top:12px}
.pd-thumbs button{width:76px;height:76px;border-radius:12px;background:#fff;border:2px solid var(--line);padding:6px;cursor:pointer}
.pd-thumbs button:hover{border-color:var(--brand)}
.pd-thumbs button[aria-pressed="true"]{border-color:var(--navy)}
.pd-thumbs img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.pd-gal{position:sticky;top:calc(var(--nav-h) + 20px);align-self:start}
.pd-gal .pd-media{position:relative;top:0}
/* Letras chicas bajo la foto: equipo usado a cuenta (no en accesorios) */
.pd-trade{margin:10px 2px 0;font-size:12.5px;line-height:1.45;color:var(--muted);text-align:center}
.pd-trade a{color:var(--navy-2);font-weight:700;text-decoration:underline;white-space:nowrap}
@media (max-width:900px){.pd-gal{position:relative;top:0}}
.variants{margin:0 0 22px}
.variants h2{font-size:16px;font-weight:800;margin-bottom:10px;color:var(--ink)}
.variants .opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.variants button{text-align:left;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;font:inherit}
.variants button:hover{border-color:var(--brand)}
.variants button:hover b{color:var(--brand)}
.variants button b{transition:color var(--t)}
.variants button[aria-pressed="true"]{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.variants button b{display:block;font-size:15px}
.variants button small{color:var(--muted);font-size:13px}
.pkg{display:flex;flex-wrap:wrap;gap:8px;margin:-8px 0 22px}
.pkg span{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;padding:6px 12px;border-radius:99px;background:#E2E8F0;color:var(--ink-2)}
.specs h3{font-size:15px;font-weight:800;margin:22px 0 4px}
.pd-ctas .pdfs{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.specs .note{font-size:12px;color:var(--muted);margin-top:10px}
.related h2{font-size:22px;font-weight:800;margin-bottom:20px}
.related .rel-sub{margin:-12px 0 20px;font-size:14.5px;color:var(--muted)}
/* Servicios */
.svc-hero{background:linear-gradient(rgba(14,39,71,.86),rgba(14,39,71,.86)),var(--topo) center/cover,var(--navy);color:#fff;padding:44px 0 48px}
.svc-hero .crumbs{color:var(--on-navy-2)}.svc-hero .crumbs [aria-current]{color:#fff}
.svc-hero p{color:var(--on-navy)}
/* Pestañas de Servicios: equipo / campo */
.svc-tabs-bar{position:sticky;top:var(--nav-h);z-index:40;background:rgba(236,239,243,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);padding:12px 0}
.svc-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:860px}
.svc-tabs a{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;background:#fff;border:1.5px solid var(--line);color:var(--ink)}
.svc-tabs a .ico{width:26px;height:26px;color:var(--brand);transition:color var(--t)}
.svc-tabs b{display:block;font-family:var(--font-d);font-stretch:108%;font-size:16px;font-weight:800;line-height:1.2}
.svc-tabs small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;transition:color var(--t)}
.svc-tabs a:hover{background:var(--brand);border-color:var(--brand);color:var(--navy)}
.svc-tabs a:hover .ico,.svc-tabs a:hover small{color:var(--navy)}
.svc-tabs a[aria-current="page"],.svc-tabs a[aria-current="page"]:hover{background:var(--navy);border-color:var(--navy);color:var(--brand)}
.svc-tabs a[aria-current="page"] .ico{color:var(--brand)}
.svc-tabs a[aria-current="page"] small{color:var(--on-navy-2)}
.svc-panel{padding-top:40px}
@media (max-width:600px){.svc-tabs-bar{padding:10px 0}.svc-tabs{gap:8px}.svc-tabs a{padding:10px 12px;gap:8px}.svc-tabs a .ico{width:22px;height:22px}.svc-tabs b{font-size:14px}.svc-tabs small{display:none}.svc-panel{padding-top:28px}}
.card-link{display:block;color:inherit}
/* Servicios para tu equipo */
.svx-wrap{margin-bottom:64px}
.svx-head{max-width:760px;margin-bottom:8px}
.svx-head h2{font-size:clamp(28px,4vw,38px);font-weight:800;margin:8px 0 12px}
.svx-head p{color:var(--ink-2)}
.svx-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.svx-nav .ico{width:18px;height:18px;color:var(--brand);transition:color var(--t)}
.svx{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:48px 0;border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--nav-h) + 12px)}
.svx:nth-of-type(even) .svx-media{order:2}
.svx-media{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:3/2;background:var(--navy);box-shadow:var(--shadow)}
.svx-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.4,0,.2,1)}
.svx:hover .svx-media img{transform:scale(1.04)}
.svx-credit{position:absolute;right:8px;bottom:8px;margin:0;padding:2px 8px;border-radius:999px;background:rgba(15,23,42,.55);color:#fff;font-size:11px;line-height:1.5}   /* crédito de foto con licencia Creative Commons (obligatorio) */
.svx-credit a{color:inherit;text-decoration:underline}
.svx-body h2{font-size:clamp(24px,3vw,32px);font-weight:800}
.svx-body .lead{color:var(--ink-2);margin:12px 0 20px;font-size:16.5px}
.svx-body .lead b{color:var(--ink)}
.svx-body h3{font-family:var(--font);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:18px 0 10px}
.svx-list{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}
.svx-list li{display:flex;gap:8px;font-size:15px;color:var(--ink-2)}
.svx-list .ico{width:18px;height:18px;color:var(--brand);margin-top:2px}
.svx-tags{display:flex;flex-wrap:wrap;gap:8px}
.svx-tags span{font-size:13px;font-weight:600;padding:6px 12px;border-radius:99px;background:#fff;border:1px solid var(--line);color:var(--ink-2)}
.svx-tip{display:flex;gap:10px;align-items:flex-start;margin-top:18px;padding:12px 14px;border-radius:12px;background:var(--tip);color:var(--ink-2);font-size:14px}
.semi-tip{margin:0 0 18px}
.semi-tip[hidden]{display:none}
.semi-tip .ico{flex:none;width:18px;height:18px;margin-top:2px;color:var(--navy-2)}
.semi-tip a{color:var(--navy-2);font-weight:700;text-decoration:underline}
.svx-tip .ico{color:var(--brand);margin-top:1px}
.svx-tip b{color:var(--ink)}
.svx-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.svx-steps{background:linear-gradient(rgba(14,39,71,.9),rgba(14,39,71,.9)),var(--topo) center/cover,var(--navy);color:#fff;border-radius:22px;padding:36px;margin:48px 0}
.svx-steps h2{font-size:clamp(22px,3vw,28px);font-weight:800;margin-bottom:22px}
.svx-steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.svx-steps li{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:20px;transition:background-color var(--t),box-shadow var(--t)}
.svx-steps li:hover{background:rgba(255,255,255,.1);box-shadow:0 14px 30px rgba(0,0,0,.25)}
.svx-steps .n{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--brand);color:var(--navy);font-family:var(--font-d);font-weight:800;margin-bottom:12px}
.svx-steps b{display:block;font-size:16px;margin-bottom:4px}
.svx-steps p{color:var(--on-navy);font-size:14px}
@media (max-width:900px){.svx{grid-template-columns:1fr;gap:24px;padding:36px 0}.svx:nth-of-type(even) .svx-media{order:0}.svx-steps ol{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.svx-list{grid-template-columns:1fr}.svx-steps{padding:24px}.svx-steps ol{grid-template-columns:1fr}.svx-ctas .btn{flex:1 1 100%}}
/* Drawer cotización */
.scrim{position:fixed;inset:0;background:rgba(14,39,71,.5);z-index:90;opacity:0;pointer-events:none;transition:opacity .25s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:#fff;z-index:100;transform:translateX(100%);transition:transform .3s ease,visibility .3s;display:flex;flex-direction:column;visibility:hidden}
.drawer.on{transform:none;visibility:visible;box-shadow:-10px 0 40px rgba(14,39,71,.18);transition:transform .3s ease,visibility 0s}   /* visible al instante al abrir, para que el foco del teclado pueda entrar */
.drawer header{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line)}
.drawer header h2{font-size:19px;font-weight:800}
.drawer .body{flex:1;overflow:auto;padding:8px 20px}
.qi{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.qi img{width:64px;height:64px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px;mix-blend-mode:multiply}
.qi b{font-size:14px;display:block;line-height:1.3}
.qi small{color:var(--muted);font-size:12px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;margin-top:6px}
.qty button{width:30px;height:30px;display:grid;place-items:center}
.qty button:hover{color:var(--brand)}
.qty span{min-width:22px;text-align:center;font-size:14px;font-weight:700}
.qi .rm{color:var(--muted);width:36px;height:36px;display:grid;place-items:center;border-radius:8px}
.qi .rm:hover{color:#DC2626;background:#FEF2F2}
.drawer footer{padding:16px 20px 20px;border-top:1px solid var(--line)}
.drawer footer p{font-size:13px;color:var(--muted);margin-bottom:12px}
/* Toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--navy);color:#fff;padding:12px 18px;border-radius:12px;font-size:14px;font-weight:600;z-index:120;opacity:0;pointer-events:none;transition:.25s;display:flex;gap:10px;align-items:center}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast button{color:var(--brand);font-weight:700;white-space:nowrap}
.toast{white-space:nowrap;max-width:calc(100vw - 32px)}
/* WhatsApp flotante */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:80;width:58px;height:58px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px rgba(37,211,102,.4);transition:transform .2s}
.wa-float:hover{transform:scale(1.07)}
.wa-float .ico{width:30px;height:30px}
.bm{font-weight:400;letter-spacing:.04em;text-transform:none;white-space:nowrap}
.bm-sokkia{font-family:'Marca Sokkia',var(--font);font-weight:700;letter-spacing:.07em}
.bm-stec{font-family:'Marca STEC',var(--font);font-weight:900;letter-spacing:.1em}
.bm-leica{font-family:'Marca Leica',cursive;font-size:1.3em;letter-spacing:0;line-height:1}
.bm-topcon{font-family:'Marca Topcon',var(--font);font-weight:700;letter-spacing:.05em}
.bm-ruide{font-family:'Marca Ruide',var(--font);letter-spacing:.05em}
.bm-sanding{font-family:'Marca Sanding',var(--font);font-style:italic;font-weight:800;letter-spacing:.02em}
.tag .bm{font-size:13px}.tag .bm-leica{font-size:17px}
.fade{animation:fade .35s ease both}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* ===================== IDENTIDAD VÉRTICE (8 nov 2026) =====================
   Guía "Vértice Zavala": ▲ vértice geodésico junto a los textos (solo como detalle; el logo no cambia),
   red de triangulación en fondos azules, medidas en IBM Plex Mono. Sin esquinas cortadas (el dueño las descartó).
   Va al final para que mande sobre los estilos anteriores; para volver atrás basta con borrar este bloque. */
h1,h2,h3,h4{font-stretch:125%;letter-spacing:-.01em}
.slide h1,.slide h2{font-stretch:125%;font-size:clamp(32px,5vw,58px)}
.svc-tabs b{font-stretch:125%}
/* El ▲ junto a los textos, con sus puntas (así le gusta al dueño). Lo redondeado es todo lo demás:
   imágenes, tarjetas, botones y etiquetas, sin esquinas cortadas */
:root{--vx-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 11'%3E%3Cpath d='M6 0 L12 11 H0 Z' fill='%23000'/%3E%3C/svg%3E")}
.eyebrow::before,.vx-tri,.pcard .pbrand::before{background:currentColor;border-radius:0;-webkit-mask:var(--vx-mask) center/contain no-repeat;mask:var(--vx-mask) center/contain no-repeat}
.eyebrow::before{width:13px;height:12px}
.vx-tri{display:inline-block;width:11px;height:10px;color:var(--brand);margin-right:8px;vertical-align:-1px}
.ftr-sello{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;margin-top:4px}
/* La marca de cada equipo lleva el ▲ */
.pcard .pbrand::before{content:"";display:inline-block;width:10px;height:9px;margin-right:6px;color:var(--brand);vertical-align:0}
/* Medidas como en la pantalla de una estación total */
.specs dd.lec,.cmp-table td.lec{font-family:var(--font-mono);font-weight:500;font-size:13.5px}
.story-stats b,.w-card .big{font-stretch:125%}

/* ===================== COLORES CON MÁS CONTRASTE (10 nov 2026, aprobado por el dueño) =====================
   Mismos tonos de la marca, un poco más oscuros donde hay texto, para que se lea bien (norma WCAG: 4.5 : 1 o más).
   Para regresar a los colores anteriores, borra este bloque y en :root vuelve --wa a #25D366 y --wa-d a #1DA851. */
.btn-brand{background:var(--brand-d)}                                   /* botones naranjas: #C24E0C con letras blancas (antes #F26A1B) */
.wa-float{box-shadow:0 8px 24px rgba(26,132,69,.4)}                     /* sombra del botón flotante con el verde nuevo */
.eyebrow{color:#B84A0B}                                                 /* títulos pequeños sobre fondo claro */
.hero .eyebrow,.band .eyebrow,.contact .eyebrow{color:var(--brand)}     /* sobre azul marino el naranja brillante ya se lee bien */
.eyebrow::before{background:var(--brand)}                               /* el ▲ siempre en naranja brillante */
.tag-new{color:#A8430A}                                                 /* etiqueta "Nuevo" */
.cmp-slot small{color:#B84A0B}                                          /* "Cambiar" en las casillas del comparador */
.story-badge{background:var(--brand-d);box-shadow:0 10px 24px rgba(194,78,12,.35)}   /* sello "Desde 1992" (Nosotros) */
.story-badge small{opacity:1}