/* =========================================================
   IMSO UPS — componentes de la vertical (sobre ups-base.css)
   Catálogo, fichas, formularios, baterías y servicios.
   ========================================================= */
:root{ --subnav-h:48px; --photo-bg:#F3F5F7; }

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.muted{color:var(--text-dim); font-size:.82rem;}
.h-sm{font-size:1.3rem;}
.linklike{background:none; border:0; padding:0; color:var(--accent); cursor:pointer; text-decoration:underline; font:inherit;}
.btn-block{width:100%;}
.nav-mobile-only{display:none !important;}
@media (max-width:900px){ .main-nav .nav-mobile-only{display:block !important;} }

/* ---------- Barra de accesos del e-commerce UPS ---------- */
.ups-subnav{
  position:sticky; top:var(--header-h); z-index:45;
  background:var(--bg-alt); border-bottom:1px solid var(--border-soft);
}
.ups-subnav-inner{
  display:flex; align-items:center; gap:6px; height:var(--subnav-h);
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.ups-subnav-inner::-webkit-scrollbar{display:none;}
.ups-subnav a{
  flex:none; font-size:.84rem; font-weight:500; color:var(--text-muted);
  padding:7px 13px; border-radius:999px; border:1px solid transparent; white-space:nowrap;
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.ups-subnav a:hover{color:var(--text); border-color:var(--border);}
.ups-subnav a[aria-current="page"]{color:#06150F; background:var(--accent); border-color:var(--accent);}
.ups-subnav-sep{flex:none; width:1px; height:20px; background:var(--border); margin:0 6px;}
/* Accesos destacados a Baterías y Servicios */
.ups-subnav a.ups-subnav-x{
  color:var(--amber, #E8A33D); border-color:rgba(232,163,61,.45); font-weight:600;
}
.ups-subnav a.ups-subnav-x:hover{color:#1A1204; background:var(--amber, #E8A33D); border-color:var(--amber, #E8A33D);}
.ups-subnav a.ups-subnav-x[aria-current="page"]{color:#1A1204; background:var(--amber, #E8A33D); border-color:var(--amber, #E8A33D);}
html{scroll-padding-top:calc(var(--header-h) + var(--subnav-h) + 16px);}

/* ---------- Hero interior ---------- */
.ups-hero{padding:34px 0 64px;}
.ups-hero h1{font-size:clamp(1.9rem, 3.6vw, 2.9rem); max-width:760px;}
.hero-lead{font-size:1.08rem; color:var(--text-muted); max-width:640px;}
.ups-hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:start;}
@media (max-width:980px){ .ups-hero-grid{grid-template-columns:1fr; gap:32px;} }
.migas{display:flex; flex-wrap:wrap; gap:8px; font-size:.72rem; letter-spacing:.04em; color:var(--text-dim); margin-bottom:26px;}
.migas a:hover{color:var(--accent);}
.migas [aria-current]{color:var(--text-muted);}
.ups-fit .ups-fit-who{color:var(--text); font-size:.95rem;}

.ups-checks{display:flex; flex-direction:column; gap:10px; margin:6px 0 0;}
.ups-checks li{position:relative; padding-left:26px; font-size:.92rem; color:var(--text-muted);}
.ups-checks li::before{
  content:""; position:absolute; left:0; top:.28em; width:15px; height:15px; border-radius:4px;
  background:var(--accent-soft); border:1px solid var(--accent-dark);
}
.ups-checks li::after{
  content:""; position:absolute; left:5px; top:.5em; width:5px; height:8px;
  border:solid var(--accent); border-width:0 2px 2px 0; transform:rotate(45deg);
}
.ups-checks-amber li::before{background:var(--amber-soft); border-color:var(--amber-dark);}
.ups-checks-amber li::after{border-color:var(--amber);}
.ups-checks-2{display:grid; grid-template-columns:1fr 1fr; gap:10px 24px;}
@media (max-width:640px){ .ups-checks-2{grid-template-columns:1fr;} }

/* ---------- Home: catálogo por tipo ---------- */
.tipo-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:34px;}
@media (max-width:1100px){ .tipo-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:700px){ .tipo-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:460px){ .tipo-grid{grid-template-columns:1fr;} }
.tipo-card{
  display:flex; flex-direction:column; gap:8px; padding:22px 20px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-l);
  transition:border-color .2s ease, transform .2s ease;
}
.tipo-card:hover{border-color:var(--accent-dark); transform:translateY(-3px);}
.tipo-card h3{margin:4px 0 0; font-size:1.08rem;}
.tipo-card p{margin:0; font-size:.86rem;}
.tipo-ico{display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; border-radius:10px; background:var(--accent-soft); color:var(--accent); flex:none;}
.tipo-rango{font-size:.68rem; letter-spacing:.06em; color:var(--text-dim);}
.tipo-more{margin-top:auto; padding-top:8px; font-size:.74rem; color:var(--accent);}
.tipo-extra{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px;}
@media (max-width:760px){ .tipo-extra{grid-template-columns:1fr;} }
.tipo-card-wide{flex-direction:row; align-items:center; gap:18px;}
.tipo-card-wide .tipo-more{margin:0 0 0 auto; padding:0; white-space:nowrap;}
@media (max-width:520px){ .tipo-card-wide{flex-direction:column; align-items:flex-start;} .tipo-card-wide .tipo-more{margin:0;} }

.brand-grid-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:980px){ .brand-grid-3{grid-template-columns:1fr;} }
.family-list a{color:var(--text-muted); border-bottom:1px dashed var(--border);}
.family-list a:hover{color:var(--accent); border-color:var(--accent);}
.service-link{transition:border-color .2s ease, color .2s ease;}
.service-link:hover{border-color:var(--accent-dark); color:var(--accent);}

/* mini-enlaces a otros tipos */
.tipo-mini-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:20px;}
@media (max-width:900px){ .tipo-mini-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .tipo-mini-grid{grid-template-columns:1fr;} }
.tipo-mini{display:flex; align-items:center; gap:14px; padding:14px 16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); transition:border-color .2s ease;}
.tipo-mini:hover{border-color:var(--accent-dark);}
.tipo-mini strong{display:block; font-family:var(--font-display); font-size:.95rem; color:var(--text);}
.tipo-mini small{display:block; font-size:.74rem; color:var(--text-dim); margin-top:2px;}
.tipo-mini .tipo-ico{width:38px; height:38px;}

/* ---------- Catálogo: filtros + tarjetas ---------- */
.ups-catalog{padding-top:24px;}
.ups-catalog-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 24px; margin-bottom:18px;}
.ups-catalog-head h2{margin:0;}
.ups-filters{display:flex; flex-direction:column; gap:12px; padding:18px; margin-bottom:24px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-l);}
.ups-search input{max-width:420px;}
.chips{display:flex; flex-wrap:wrap; align-items:center; gap:8px;}
.chips-label{font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); min-width:72px;}
.chip{
  background:var(--bg); border:1px solid var(--border); color:var(--text-muted);
  border-radius:999px; padding:7px 14px; font-size:.82rem; cursor:pointer;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.chip:hover{border-color:var(--accent-dark); color:var(--text);}
.chip[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent); color:var(--accent);}

.ucard-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media (max-width:1000px){ .ucard-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .ucard-grid{grid-template-columns:1fr;} }
.ucard{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-l); overflow:hidden; transition:border-color .2s ease, transform .2s ease;}
.ucard:hover{border-color:var(--accent-dark); transform:translateY(-3px);}
.ucard[hidden]{display:none;}
.ucard-img{position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:4/3; background:var(--photo-bg); padding:18px;}
.ucard-img img{max-height:100%; width:auto; object-fit:contain;}
.ucard-noimg{color:var(--text-dim);}
.ucard-noimg svg{width:56px; height:56px;}
.ucard-brand{position:absolute; top:12px; left:12px; font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:#0F151C; background:#fff; border:1px solid #D7DEE5; padding:3px 8px; border-radius:4px;}
.ucard-body{display:flex; flex-direction:column; gap:10px; padding:18px 18px 20px; flex:1;}
.ucard-name{font-size:1.02rem; margin:0; line-height:1.3;}
.ucard-name a:hover{color:var(--accent);}
.ucard-specs{display:flex; flex-wrap:wrap; gap:6px;}
.ucard-specs li{font-size:.68rem; color:var(--accent); background:var(--accent-soft); padding:3px 8px; border-radius:4px;}
.ucard-desc{font-size:.85rem; margin:0;}
.ucard-foot{display:flex; gap:10px; margin-top:auto; padding-top:6px;}
.ucard-foot .btn{flex:1;}
.ups-empty{padding:24px; text-align:center; border:1px dashed var(--border); border-radius:var(--radius-m);}
.ups-callout-tool{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.ups-callout-tool p{margin:0;}

/* ---------- Ficha de producto ---------- */
.pdp-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
@media (max-width:900px){ .pdp-grid{grid-template-columns:1fr; gap:28px;} }
.pdp-main{display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; background:var(--photo-bg); border-radius:var(--radius-l); padding:28px; border:1px solid var(--border);}
.pdp-main img{max-height:100%; width:auto; object-fit:contain;}
.pdp-thumbs{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap;}
.pdp-thumb{width:72px; height:72px; padding:6px; background:var(--photo-bg); border:2px solid transparent; border-radius:var(--radius-s); cursor:pointer;}
.pdp-thumb img{width:100%; height:100%; object-fit:contain;}
.pdp-thumb[aria-current="true"]{border-color:var(--accent);}
.pdp-title{font-size:clamp(1.6rem, 3vw, 2.3rem);}
.pdp-keys{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:22px 0;}
.pdp-keys li{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-s); padding:10px 12px; font-size:.84rem; color:var(--text);}
.pdp-keys span{display:block; font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); margin-bottom:3px;}
.pdp-price{display:flex; flex-direction:column; gap:4px; padding:14px 16px; margin-bottom:18px; border-left:3px solid var(--amber); background:var(--amber-soft); border-radius:0 var(--radius-s) var(--radius-s) 0;}
.pdp-price strong{font-family:var(--font-display); color:var(--text);}
.pdp-price span{font-size:.84rem; color:var(--text-muted);}
.pdp-doc{display:inline-flex; align-items:center; gap:12px; margin-top:18px; padding:12px 16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); color:var(--accent);}
.pdp-doc:hover{border-color:var(--accent-dark);}
.pdp-doc strong{display:block; color:var(--text); font-family:var(--font-display);}
.pdp-doc small{color:var(--text-dim); font-size:.76rem;}
.pdp-sku{font-size:.72rem; color:var(--text-dim); margin-top:14px;}
.pdp-body{display:grid; grid-template-columns:1.3fr .9fr; gap:48px; align-items:start;}
@media (max-width:900px){ .pdp-body{grid-template-columns:1fr;} }
.pdp-desc h2, .pdp-specs h2{font-size:1.35rem; margin-top:0;}
.pdp-desc h2:not(:first-child){margin-top:40px;}
.prose p{color:var(--text-muted);}
.prose strong{color:var(--text);}
.pdp-apps{display:flex; flex-wrap:wrap; gap:8px;}
.pill{font-size:.82rem; padding:7px 13px; border-radius:999px; border:1px solid var(--border); color:var(--text-muted); background:var(--surface);}
.spec-table{width:100%; border-collapse:collapse; font-size:.88rem;}
.spec-table th, .spec-table td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--border-soft); vertical-align:top;}
.spec-table th{color:var(--text-dim); font-weight:500; width:46%;}
.spec-table td{color:var(--text);}
.table-scroll{overflow-x:auto; margin-top:20px; border:1px solid var(--border); border-radius:var(--radius-m);}
.spec-table-wide th{width:auto; background:var(--surface); font-family:var(--font-mono); font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap;}
.spec-table-wide td{white-space:nowrap;}

/* ---------- Formularios de lead ---------- */
.lead-block{display:grid; grid-template-columns:.8fr 1.2fr; gap:48px; align-items:start;}
@media (max-width:900px){ .lead-block{grid-template-columns:1fr; gap:24px;} }
.lead-points{display:flex; flex-direction:column; gap:10px; margin-top:20px;}
.lead-points li{display:flex; align-items:center; gap:10px; font-size:.9rem; color:var(--text-muted);}
.ups-form{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-l); padding:30px;}
@media (max-width:640px){ .ups-form{padding:22px 16px;} }
.ups-fieldset{border:0; padding:0; margin:0 0 8px;}
.ups-fieldset legend{font-family:var(--font-display); font-weight:600; color:var(--text); margin-bottom:14px; padding:0;}
.ups-form .field > span{display:block;}
.ups-form .field-privacy{flex-direction:row; align-items:center; gap:10px;}
.ups-form .field-privacy input{accent-color:var(--accent); width:auto;}
.form-ok{text-align:center; padding:28px 10px 6px;}
.form-ok .led{margin:0 auto 12px;}
.form-ok h3{font-size:1.3rem; margin-bottom:6px;}
.form-ok a{color:var(--accent); text-decoration:underline;}
.ups-form.is-sent > :not(.form-ok){display:none;}
.ups-form.is-sent .form-ok{display:block;}

/* ---------- Modal de cotización ---------- */
.ups-modal{
  width:min(560px, calc(100vw - 32px)); max-height:calc(100vh - 32px); padding:0;
  border:1px solid var(--border); border-radius:var(--radius-l); background:var(--surface); color:var(--text);
  box-shadow:var(--shadow-panel);
}
.ups-modal::backdrop{background:rgba(5,9,13,.72); backdrop-filter:blur(3px);}
.ups-modal .ups-form{border:0; border-radius:0;}
.ups-modal-head{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.ups-modal-head h3{margin:0;}
.ups-modal-close{background:none; border:1px solid var(--border); color:var(--text); width:36px; height:36px; border-radius:var(--radius-s); font-size:1.3rem; cursor:pointer;}
.ups-modal-prod{font-size:.8rem; color:var(--accent); margin:10px 0 18px;}

/* ---------- Servicios ---------- */
.serv-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px;}
@media (max-width:900px){ .serv-grid{grid-template-columns:1fr;} }
.serv-card{display:flex; flex-direction:column; gap:10px; padding:26px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-l); transition:border-color .2s ease, transform .2s ease;}
.serv-card:hover{border-color:var(--accent-dark); transform:translateY(-3px);}
.serv-card h2{font-size:1.2rem; margin:6px 0 0;}
.serv-card p{margin:0; font-size:.9rem;}
.serv-more{margin-top:auto; font-size:.74rem; color:var(--accent);}
.method-cycle-5{grid-template-columns:repeat(5,1fr);}
@media (max-width:900px){ .method-cycle-5{grid-template-columns:repeat(3,1fr);} }
@media (max-width:560px){ .method-cycle-5{grid-template-columns:repeat(2,1fr);} }
.quick-grid a.quick-opt{display:inline-block;}

/* Header: en anchos intermedios el nav + CTA no caben → compactar */
@media (max-width:1150px) and (min-width:901px){
  .main-nav{gap:20px;}
  .main-nav a:last-child{display:none;}
}
.ups-search input[type=search]{
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-s);
  color:var(--text); padding:11px 14px; font-family:var(--font-body); font-size:.92rem; width:100%;
}
.ups-search input[type=search]:focus{border-color:var(--accent); outline:none;}
.main-nav a[aria-current="page"]{color:var(--accent);}
.main-nav a[aria-current="page"]::after{transform:scaleX(1);}

/* ---------- Motor de continuidad (hero /ups/) ---------- */
.motor-ups .node rect[style*="fill:none"]{fill:none;}
/* ---------- Anatomía de una UPS ---------- */
.ups-anatomia{margin:30px 0 26px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-l); overflow:hidden;}
.ups-anatomia img{width:100%; height:auto;}
/* ---------- Fotos de servicio ---------- */
.serv-card-img{width:calc(100% + 52px); max-width:none; margin:-26px -26px 6px; aspect-ratio:16/10; object-fit:cover; border-radius:var(--radius-l) var(--radius-l) 0 0;}
.serv-galeria{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:30px;}
@media (max-width:900px){ .serv-galeria{grid-template-columns:1fr 1fr;} }
.serv-galeria figure{margin:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); overflow:hidden;}
.serv-galeria img{width:100%; aspect-ratio:3/4; object-fit:cover;}
.serv-galeria figcaption{padding:10px 12px; font-size:.8rem; color:var(--text-muted);}
.serv-foto{margin:-18px -22px 16px; }
.serv-foto img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-l) var(--radius-l) 0 0;}
.serv-foto figcaption{padding:8px 22px 0; font-size:.76rem; color:var(--text-dim);}
.motor-ups .node-title{font-size:12.5px;}
.motor-ups .node-sub{font-size:10.5px;}

/* =========================================================
   Coherencia con el cabezal global IMSO (núcleo: assets/marca/marca.css)
   La barra de tipos usa EXACTAMENTE la misma pestaña: alto, forma y color.
   ========================================================= */
:root{ --header-h:64px; }
.ups-subnav{top:calc(var(--wp-admin--admin-bar--height, 0px) + 64px); background:#0D1F38;}
.ups-subnav-inner{gap:6px; height:56px;}
.ups-subnav a{
  height:36px; padding:0 14px; display:inline-flex; align-items:center;
  font-family:'IBM Plex Sans', system-ui, sans-serif; font-size:14px; font-weight:500; line-height:1;
  color:#C9D6E3; background:transparent; border:1px solid rgba(255,255,255,.16); border-radius:999px;
}
.ups-subnav a:hover{color:#fff; border-color:#3DB54A;}
.ups-subnav a[aria-current="page"]{color:#06140A; background:#3DB54A; border-color:#3DB54A; font-weight:600;}
html{scroll-padding-top:calc(64px + 56px + 16px);}

/* =========================================================
   TEMA CLARO + BANDAS OSCURAS DE FIRMA (armonía con Home/Variadores)
   La página es clara; estas secciones son "islas" que re-declaran los tokens
   en su versión oscura, así todos sus componentes internos se ven como el
   diseño original (tarjetas, LEDs, acentos) sin overrides pieza por pieza.
   ========================================================= */
.hero,
.trust-bar,
.section-problem,
.section-method,
.section-form,
.site-footer{
  --bg:#0F151C; --bg-alt:#151D26; --surface:#1A2430; --surface-2:#212D3A;
  --border:#2B3947; --border-soft:#22303D;
  --text:#EAF1F7; --text-muted:#9FB2C2; --text-dim:#8195A6;
  --accent:#3DB54A; --accent-dark:#2E9139; --accent-soft:rgba(61,181,74,.16); --on-accent:#06150F;
  --amber:#E8A33D; --amber-dark:#C6822A; --amber-soft:rgba(232,163,61,.16);
  --danger:#E5654E;
  background:#0A1930; color:var(--text);
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* Hero del hub: mismo degradado navy que Home/Variadores */
.hero{
  border-top:0; border-bottom:0;
  background:
    radial-gradient(900px 460px at 82% -6%, rgba(232,163,61,.16), transparent 60%),
    radial-gradient(760px 520px at 8% 110%, rgba(61,181,74,.10), transparent 62%),
    linear-gradient(160deg,#081a33 0%,#0A1930 45%,#0d2340 100%);
}

/* Footer: cierre oscuro como en Home; IMSO en azul del logo */
.site-footer{ background:#081526; border-bottom:0; }
.site-footer .footer-logo{ color:#4FA3DD; }

/* La rejilla técnica de fondo queda tapada por el hero oscuro; en el resto
   (claro) la ocultamos para no ensuciar las secciones claras. */
.grid-overlay{ display:none; }

/* La subnav de tipos ya es oscura por diseño (coherente con el cabezal). */