/* ============================================================
   PIL · Páginas por Unidad de Producto (/servicios y /servicios/<up>) — 2026-10-16
   Manual PIL v2: Tech blue #0002FF, Ink #0D1B2A, Lavanda #F4F7FF, cards 20px, botones pill.
   Ritmo de la home: contenedor 1240, secciones 96 px, títulos 42 px.
   --c / --c-ink / --c-soft = color de la UP (acento), definidos en <main>.
   ============================================================ */
.pup { --blue:#0002ff; --blue-dark:#0000b3; --ink:#0d1b2a; --ink-2:#3d4a5c; --lav:#f4f7ff; --line:#e3e8f6; --r:20px; --c:#0002ff; --c-ink:#0002ff; --c-soft:#e8ebff; color:var(--ink); }
.pup *, .pup *::before, .pup *::after { box-sizing:border-box; }
.pup-in { max-width:1240px; margin:0 auto; padding:0 24px; }
.pup h1, .pup h2, .pup h3, .pup h4 { color:var(--ink); }
.pup h1 span, .pup h2 span { font-weight:700; }
.pup .pcat-cta h2 { color:#fff; }

/* Encabezados de sección */
.pup-eyebrow { font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin:0 0 12px; }
.pup-head { margin:0 0 40px; max-width:760px; }
.pup-head h2 { font-size:clamp(30px,3.4vw,42px); font-weight:400; line-height:1.1; letter-spacing:-.02em; margin:0; }
.pup-head .pup-lead { margin-top:14px; }
.pup-head-row { max-width:none; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.pup-head-row > div { max-width:720px; }
.pup-lead { font-size:17px; line-height:1.6; color:var(--ink-2); max-width:62ch; margin:16px 0 0; }

.pup-sec { padding:96px 0; }
.pup-sec-lav { background:var(--lav); }
.pup-sec-ink { background:var(--blue-dark); color:#fff; } /* Dark blue del manual PIL; la tinta #0D1B2A es solo para texto */
.pup-sec-ink h2, .pup-sec-ink h3 { color:#fff; }
.pup-sec-ink .pup-eyebrow { color:rgba(255,255,255,.75); }
.pup-sec-ink .pup-lead { color:rgba(255,255,255,.82); }

/* 1 · Hero */
.pup-hero { background:var(--lav); padding:48px 0 64px; position:relative; overflow:hidden; }
.pup-hero::after { content:""; position:absolute; left:0; right:0; bottom:0; height:6px; background:var(--c); }
.pup-hero-hub::after { background:linear-gradient(90deg,#fc59f4 0 25%,#ff7900 25% 50%,#efd90c 50% 75%,#2ee57b 75%); }
.pup-crumb { font-size:13px; color:var(--ink-2); margin:0 0 28px; }
.pup-crumb a { color:var(--ink-2); text-decoration:none; }
.pup-crumb a:hover { color:var(--blue); }
.pup-hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.pup-hero h1 { font-size:clamp(34px,4.2vw,52px); font-weight:400; line-height:1.06; letter-spacing:-.025em; margin:0; max-width:18ch; }
.pup-tag { display:inline-flex; align-items:center; gap:10px; margin:0 0 20px; padding:6px 16px 6px 6px; border-radius:999px; background:#fff; border:1px solid var(--line); font-size:13.5px; font-weight:600; color:var(--ink); }
.pup-tag .ic { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--c-soft); }
.pup-act { display:flex; gap:12px; flex-wrap:wrap; margin:32px 0 0; }
.pup-hero-img { position:relative; aspect-ratio:5/4; border-radius:var(--r); overflow:hidden; background:#dfe5f5; box-shadow:0 24px 60px rgba(13,27,42,.14); }
.pup-hero-img > img { width:100%; height:100%; object-fit:cover; display:block; }
.pup-hero-img::after { content:""; position:absolute; left:0; bottom:0; width:38%; height:8px; background:var(--c); }
.pup-collage { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:10px; background:#fff; }
.pup-collage a { display:block; border-radius:14px; overflow:hidden; background:var(--lav); }
.pup-collage img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.pup-collage a:hover img { transform:scale(1.04); }
.pup-collage::after { display:none; }

/* Mosaico del índice */
.pup-mosaic { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pup-mosaic span { position:relative; aspect-ratio:1/1; border-radius:18px; overflow:hidden; background:#fff; }
.pup-mosaic span::after { content:""; position:absolute; left:0; bottom:0; right:0; height:6px; background:var(--c); }
.pup-mosaic img { width:100%; height:100%; object-fit:cover; display:block; }
.pup-mosaic img.is-prod { object-fit:contain; background:#fff; padding:12%; }

/* Selector de unidades */
.pup-switch { border-bottom:1px solid var(--line); background:#fff; }
.pup-switch .pup-in { display:flex; align-items:center; gap:8px; padding-top:14px; padding-bottom:14px; overflow-x:auto; scrollbar-width:none; }
.pup-switch .pup-in::-webkit-scrollbar { display:none; }
.pup-switch .lbl { font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); margin-right:8px; white-space:nowrap; }
.pup-switch a { display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 16px; border-radius:999px; border:1px solid var(--line); color:var(--ink); font-size:14px; font-weight:500; text-decoration:none; white-space:nowrap; transition:border-color .15s, background .15s; }
.pup-switch a i { width:10px; height:10px; border-radius:50%; background:var(--c); flex:none; }
.pup-switch a:hover { border-color:var(--ink); }
.pup-switch a[aria-current="page"] { background:var(--ink); border-color:var(--ink); color:#fff; }

/* 2 · Logros */
.pup-logros { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.pup-logro { border:1px solid var(--line); border-radius:var(--r); padding:32px 28px; background:#fff; border-top:4px solid var(--c); }
.pup-logro .n { display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--c-soft); color:var(--c-ink); font-weight:700; font-size:15px; }
.pup-logro h3 { font-size:22px; font-weight:600; line-height:1.2; margin:20px 0 10px; }
.pup-logro p { margin:0; font-size:15.5px; line-height:1.6; color:var(--ink-2); }

/* 3 · Unidades de negocio */
.pup-uns { display:grid; gap:20px; }
.pup-un { display:grid; grid-template-columns:320px 1fr; gap:40px; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:36px; }
.pup-un header .n { display:block; font-size:13px; font-weight:700; letter-spacing:.12em; color:var(--c-ink); margin:0 0 12px; }
.pup-un header .n::after { content:""; display:block; width:36px; height:4px; border-radius:2px; background:var(--c); margin-top:10px; }
.pup-un header h3 { font-size:24px; font-weight:600; line-height:1.2; margin:0 0 12px; }
.pup-un header p { margin:0; font-size:15.5px; line-height:1.6; color:var(--ink-2); }
.pup-lns { display:grid; grid-template-columns:repeat(2,1fr); gap:28px 32px; }
.pup-lns.is-one { grid-template-columns:1fr; }
.pup-ln h4 { font-size:16.5px; font-weight:600; line-height:1.3; margin:0 0 12px; }
.pup-ln ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.pup-ln li { position:relative; padding-left:26px; font-size:14.5px; line-height:1.5; color:var(--ink-2); }
.pup-ln li::before { content:""; position:absolute; left:0; top:3px; width:16px; height:16px; border-radius:50%; background:var(--c-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4.5 8.2 2.2 2.2 4.8-4.8' stroke='%230d1b2a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.pup-link { display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-size:14px; font-weight:600; color:var(--blue); text-decoration:none; }
.pup-link:hover { color:var(--blue-dark); gap:9px; }

/* 4 · Proceso */
.pup-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:20px; counter-reset:none; position:relative; }
.pup-steps::before { content:""; position:absolute; left:22px; right:22px; top:22px; height:2px; background:rgba(255,255,255,.25); }
.pup-steps li { position:relative; }
.pup-steps .n { position:relative; z-index:1; display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:var(--c); color:var(--ink); font-weight:700; font-size:17px; box-shadow:0 0 0 6px var(--blue-dark); }
.pup-finder ~ .pup-sec-ink .pup-steps .n { background:#fff; }
.pup-steps h3 { font-size:19px; font-weight:600; margin:22px 0 8px; }
.pup-steps p { margin:0; font-size:14.5px; line-height:1.55; color:rgba(255,255,255,.82); }

/* 5 · Proyectos */
.pup-proy { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.pup-pcard { display:flex; flex-direction:column; gap:8px; text-decoration:none; color:var(--ink); }
.pup-pcard .img { display:block; aspect-ratio:868/450; border-radius:var(--r); overflow:hidden; background:var(--lav); margin-bottom:10px; }
.pup-pcard img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.pup-pcard:hover img { transform:scale(1.03); }
.pup-pcard .meta { font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink); }
.pup-pcard h3 { font-size:19px; font-weight:600; line-height:1.3; margin:0; }
.pup-pcard:hover h3 { color:var(--blue); }
.pup-pcard .cli { font-size:14px; color:var(--ink-2); }

.pup-case { display:flex; flex-direction:column; gap:12px; padding:28px; border-radius:var(--r); border:1px solid var(--line); border-top:4px solid var(--c); background:#fff; }
.pup-case header { display:flex; flex-direction:column; gap:4px; }
.pup-case .cli { font-size:15px; font-weight:700; color:var(--ink); }
.pup-case .meta { font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink); }
.pup-case h3 { font-size:19px; font-weight:600; line-height:1.3; margin:4px 0 0; }
.pup-case p { margin:auto 0 0; padding-top:14px; border-top:1px solid var(--line); font-size:14.5px; line-height:1.55; color:var(--ink-2); }
.pup-case p b { color:var(--ink); font-weight:600; }

/* 6 · Suministros: tarjetas del catálogo (pil-catalogo.css) + logos */
.pup-brands { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:28px; }
.pup-brands a { display:grid; place-items:center; height:64px; padding:0 22px; border-radius:14px; background:#fff; border:1px solid var(--line); transition:border-color .15s; }
.pup-brands a:hover { border-color:var(--blue); }
.pup-brands .pcat-logo { height:30px; max-width:130px; }

/* 7 · Normas + FAQ */
.pup-faq-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:start; }
.pup-faq-grid h2 { font-size:clamp(30px,3.4vw,42px); font-weight:400; line-height:1.1; letter-spacing:-.02em; margin:0; }
.pup-normas-t { margin:32px 0 12px; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); }
.pup-normas { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.pup-normas li { padding:8px 14px; border-radius:999px; background:var(--c-soft); color:var(--c-ink); font-size:13.5px; font-weight:600; }
.pup-faq details { border-bottom:1px solid var(--line); }
.pup-faq details:first-child { border-top:1px solid var(--line); }
.pup-faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 0; font-size:17px; font-weight:600; line-height:1.35; color:var(--ink); }
.pup-faq summary::-webkit-details-marker { display:none; }
.pup-faq summary svg { flex:none; color:var(--ink-2); transition:transform .2s; }
.pup-faq details[open] summary svg { transform:rotate(180deg); }
.pup-faq details p { margin:0 0 22px; font-size:15.5px; line-height:1.65; color:var(--ink-2); max-width:68ch; }

/* Índice: buscador de soluciones (hero) */
.pup-finder { position:relative; background:var(--blue); color:#fff; padding:52px 0 72px; overflow:hidden; }
.pup-finder::after { content:""; position:absolute; left:0; right:0; bottom:0; height:6px; background:linear-gradient(90deg,#fc59f4 0 25%,#ff7900 25% 50%,#efd90c 50% 75%,#2ee57b 75%); }
.pup-finder .pup-crumb, .pup-finder .pup-crumb a { color:rgba(255,255,255,.75); }
.pup-finder .pup-crumb a:hover { color:#fff; }
.pup-finder h1 { color:#fff; font-size:clamp(34px,4.6vw,56px); font-weight:400; line-height:1.05; letter-spacing:-.025em; margin:0; max-width:24ch; }
.pup-finder h1 span { font-weight:700; }
.pup-finder .pup-lead { color:rgba(255,255,255,.88); max-width:56ch; }
.pup-search { display:flex; align-items:center; gap:8px; margin:32px 0 0; max-width:820px; background:#fff; border-radius:999px; padding:6px 6px 6px 20px; box-shadow:0 18px 40px rgba(0,0,60,.25); }
.pup-search svg { width:20px; height:20px; color:var(--ink-2); flex:none; }
.pup-search input { flex:1; min-width:0; border:0; outline:0; background:transparent; font:inherit; font-size:16.5px; color:var(--ink); height:48px; padding:0 6px; }
.pup-search input::-webkit-search-cancel-button { display:none; }
.pup-search button { height:48px; padding:0 26px; border:0; border-radius:999px; background:var(--blue); color:#fff; font:inherit; font-size:15px; font-weight:600; cursor:pointer; transition:background .15s; }
.pup-search button:hover { background:var(--blue-dark); }
.pup-qs { display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 0; max-width:980px; }
.pup-q { height:40px; padding:0 18px; border-radius:999px; border:1.5px solid rgba(255,255,255,.5); background:rgba(255,255,255,.1); color:#fff; font:inherit; font-size:14px; font-weight:500; cursor:pointer; transition:background .15s, color .15s, border-color .15s; }
.pup-q:hover, .pup-q[aria-pressed="true"] { background:#fff; color:var(--blue); border-color:#fff; }
.pup-q:focus-visible, .pup-search button:focus-visible { outline:3px solid #fff; outline-offset:2px; }

.pup-results { padding:56px 0 24px; scroll-margin-top:90px; }
.pup-res-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin:0 0 24px; }
.pup-res-head h2 { font-size:clamp(26px,3vw,34px); font-weight:600; line-height:1.15; margin:0; }
.pup-res-head p { margin:8px 0 0; color:var(--ink-2); font-size:15.5px; }
.pup-res-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.pup-res-card { display:flex; flex-direction:column; gap:10px; padding:24px; border:1px solid var(--line); border-top:4px solid var(--c); border-radius:var(--r); background:#fff; color:var(--ink); text-decoration:none; transition:box-shadow .2s, transform .2s; }
.pup-res-card:hover { box-shadow:0 14px 34px rgba(13,27,42,.08); transform:translateY(-2px); color:var(--ink); }
.pup-res-card .up { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); }
.pup-res-card .up i { width:10px; height:10px; border-radius:50%; background:var(--c); }
.pup-res-card h3 { font-size:19px; font-weight:600; line-height:1.25; margin:0; }
.pup-res-card p { margin:0; font-size:14.5px; line-height:1.55; color:var(--ink-2); }
.pup-res-card ul { list-style:none; margin:2px 0 0; padding:0; display:grid; gap:6px; }
.pup-res-card li { position:relative; padding-left:16px; font-size:13.5px; line-height:1.45; color:var(--ink); }
.pup-res-card li::before { content:""; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; background:var(--c); }
.pup-res-card li.hit { color:var(--blue); font-weight:600; }
.pup-res-card .go { margin-top:auto; padding-top:8px; display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--blue); }
.pup-res-card:hover .go { gap:9px; }
.pup-res-none { padding:40px; border:1.5px dashed var(--line); border-radius:var(--r); text-align:center; }
.pup-res-none h3 { margin:0 0 8px; font-size:22px; font-weight:600; }
.pup-res-none p { margin:0 0 20px; color:var(--ink-2); }
.pup-results + .pup-sec { padding-top:64px; }

/* Índice: tarjetas por UP */
.pup-hub-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.pup-hub-card { display:flex; flex-direction:column; gap:14px; padding:32px; border-radius:var(--r); border:1px solid var(--line); border-top:6px solid var(--c); background:#fff; color:var(--ink); text-decoration:none; transition:box-shadow .2s, transform .2s; }
.pup-hub-card:hover { box-shadow:0 18px 44px rgba(13,27,42,.09); transform:translateY(-2px); color:var(--ink); }
.pup-hub-top { display:flex; align-items:center; gap:12px; }
.pup-hub-top .ic { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:var(--c-soft); flex:none; }
.pup-hub-top .nm { font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); }
.pup-hub-card h3 { font-size:26px; font-weight:400; line-height:1.15; letter-spacing:-.015em; margin:4px 0 0; }
.pup-hub-card h3 span { font-weight:700; }
.pup-hub-card p { margin:0; font-size:15.5px; line-height:1.6; color:var(--ink-2); }
.pup-chips { list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.pup-chips li { padding:6px 12px; border-radius:999px; background:var(--lav); font-size:13px; color:var(--ink); }
.pup-more { margin-top:auto; padding-top:8px; display:inline-flex; align-items:center; gap:6px; font-size:14.5px; font-weight:600; color:var(--blue); }
.pup-hub-card:hover .pup-more { gap:9px; }

/* Responsive */
@media (max-width:1100px) {
  .pup-res-grid { grid-template-columns:repeat(2,1fr); }
  .pup-proy { grid-template-columns:repeat(2,1fr); }
  .pup-steps { grid-template-columns:repeat(3,1fr); row-gap:36px; }
  .pup-steps::before { display:none; }
  .pup-un { grid-template-columns:1fr; gap:28px; }
}
@media (max-width:900px) {
  .pup-sec { padding:72px 0; }
  .pup-hero-grid { grid-template-columns:1fr; gap:36px; }
  .pup-logros { grid-template-columns:1fr; }
  .pup-proy { grid-template-columns:1fr; }
  .pup-hub-grid { grid-template-columns:1fr; }
  .pup-res-grid { grid-template-columns:1fr; }
  .pup-faq-grid { grid-template-columns:1fr; gap:32px; }
}
@media (max-width:640px) {
  .pup-in { padding:0 16px; }
  .pup-sec { padding:56px 0; }
  .pup-hero { padding:32px 0 44px; }
  .pup-head { margin-bottom:28px; }
  .pup-lead { font-size:16px; }
  .pup-un { padding:24px 20px; }
  .pup-lns { grid-template-columns:1fr; gap:24px; }
  .pup-logro { padding:26px 22px; }
  .pup-steps { grid-template-columns:1fr; }
  .pup-hub-card { padding:24px 20px; }
  .pup-hub-card h3 { font-size:23px; }
  .pup-act .pcat-btn { flex:1 1 auto; }
  .pup-faq summary { font-size:16px; }
  .pup-finder { padding:36px 0 52px; }
  .pup-search { padding-left:14px; }
  .pup-search button { padding:0 18px; }
  .pup-q { height:auto; min-height:40px; padding:8px 14px; font-size:13.5px; text-align:left; }
}
@media (prefers-reduced-motion:reduce) {
  .pup-collage img, .pup-pcard img, .pup-hub-card { transition:none; }
  .pup-collage a:hover img, .pup-pcard:hover img, .pup-hub-card:hover { transform:none; }
}

/* Íconos de UP según manual PIL v2: contenedor en color de la unidad, ícono blanco (2026-10-19) */
.pup-tag .ic { background:var(--c); border-radius:22%; }
.pup-tag .ic img { width:60% !important; height:60% !important; filter:brightness(0) invert(1); }
.pup-hub-top .ic { background:var(--c); border-radius:22%; }
.pup-hub-top .ic img { width:60% !important; height:60% !important; filter:brightness(0) invert(1); }