/* DAIA CABA — own stylesheet. Visual structure inspired by a report-cards hub;
   all selectors, tokens and rules are original. */
:root{
  --ink:#18181b; --ink-2:#27272a; --ink-3:#3f3f46;
  --mute:#52525b; --mute-2:#71717a; --mute-3:#a1a1aa;
  --line:#e4e4e7; --wash:#f4f4f5; --wash-2:#f0f0f0; --paper:#fff;
  --blue:#1361f0; --blue-2:#2563eb; --blue-soft:#dbeafe; --blue-link:#2f5fd0;
  --green:#15803d; --green-bg:#dcfce7; --green-bd:#bbf7d0;
  --amber:#a16207; --amber-bg:#fef9c3; --amber-bd:#fde68a;
  --pilot:#1d4ed8; --pilot-bg:#dbeafe; --pilot-bd:#bfdbfe;
  --ret:#3f3f46; --ret-bg:#f4f4f5; --ret-bd:#e4e4e7;
  --ph:#fef08a; --ph-bd:#facc15;
  --shadow-pill:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);
  --shadow-card:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06);
  --shadow-card-h:0 10px 24px rgba(0,0,0,.12);
  --shadow-search:0 2px 8px rgba(0,0,0,.08);
  --radius:14px; --max:1152px;
  --font-body:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-head:"Bricolage Grotesque",Inter,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--paper);overflow-x:hidden;line-height:1.5;font-size:16px}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
.ph,.ph-inline{background:var(--ph);border:1px dashed var(--ph-bd);border-radius:4px;padding:.05em .35em}
.ph-block{background:var(--ph);border:1px dashed var(--ph-bd);border-radius:8px;padding:.75rem 1rem;margin:.5rem 0}

/* Masthead / gov banner */
.mast{background:var(--wash-2);color:#474747;font-size:.75rem}
@media(min-width:1024px){.mast{font-size:.875rem}}
.mast-inner{padding:.25rem .75rem;display:flex;gap:.5rem;align-items:flex-start}
@media(min-width:1024px){.mast-inner{padding:.25rem 1.5rem}}
.mast-mark{flex-shrink:0;width:20px;height:28px}
.mast-row{display:flex;flex-wrap:wrap;gap:.25rem .5rem;align-items:center;padding:.25rem 0;flex:1}
.mast-toggle{display:inline-flex;align-items:center;gap:.25rem;color:var(--blue-link);cursor:pointer;background:none;border:0;padding:0}
.mast-toggle span{text-decoration:underline}
.mast-toggle:hover span{color:#4371d6}
.mast-toggle svg{width:12px;height:12px;transition:transform .3s;transform:rotate(180deg)}
.mast-toggle[aria-expanded="true"] svg{transform:rotate(0deg)}
.mast-panel{display:none;padding:1rem .75rem 2rem;color:#474747}
.mast-panel.open{display:block}
@media(min-width:1024px){.mast-panel{padding:2.5rem 1.5rem 3rem}}
.mast-grid{display:grid;gap:1.5rem}
@media(min-width:1024px){.mast-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:5rem}}
.mast-card{display:flex;gap:.75rem;font-size:.6875rem}
@media(min-width:1024px){.mast-card{font-size:1rem;gap:1rem}}
.mast-card h3{margin:0 0 .35rem;font-size:inherit;font-weight:600}
.mast-card p{margin:0;line-height:1.4}

/* Pill nav */
.nav-wrap{position:sticky;top:0;z-index:50;padding:1rem;background:transparent}
.pill{max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  background:var(--ink);color:#fff;border-radius:9999px;padding:.35rem 1.25rem .35rem 1rem;min-height:52px;
  box-shadow:var(--shadow-pill)}
.pill-brand{display:inline-flex;align-items:center;justify-content:center;gap:0;min-width:44px;min-height:40px;
  padding:4px 10px 4px 6px;margin:0;border-radius:999px;color:#fff;text-decoration:none;user-select:none;
  transition:background-color .15s ease,opacity .15s ease}
.pill-brand:hover{background:rgba(255,255,255,.08);text-decoration:none;opacity:.95}
.pill-brand:focus-visible{outline:2px solid #fff;outline-offset:3px}
.pill-brand img{width:auto;height:30px;max-height:30px;object-fit:contain;display:block}
.pill-brand img.brand-wordmark{width:auto;height:22px;max-width:148px}
.pill-brand .name[hidden],.footer-brand span[hidden]{display:none!important}
.pill-brand .name{font-weight:600;letter-spacing:3px;text-transform:uppercase;font-size:.875rem;line-height:1.125}
.pill-brand .combo{display:none;background:#e11d48;border-radius:99px;padding:0 .5rem;font-size:.7rem;margin-left:.35rem;animation:pop .3s}
.pill-brand .combo.show{display:inline-block}
@keyframes pop{from{transform:scale(1.5)}to{transform:scale(1)}}
.pill-links{display:flex;align-items:center;gap:.5rem;list-style:none;margin:0;padding:0;height:48px}
.pill-links a{color:#d4d4d8;font-weight:600;letter-spacing:2px;text-transform:uppercase;font-size:.8125rem;
  padding:.5rem .75rem;border-radius:8px;display:flex;align-items:center;height:32px;transition:color .15s}
.pill-links a:hover{color:#e4e4e7}
.pill-links a.on{color:#fff}
@media(max-width:640px){
  .pill{padding:.3rem .85rem .3rem .7rem;gap:.75rem}
  .pill-brand{padding:2px 6px;min-width:40px}
  .pill-brand img{height:26px;max-height:26px}
  .pill-brand .name{display:none}
  .pill-links a{padding:.5rem .4rem;letter-spacing:1px;font-size:.75rem}
}

/* Layout helpers */
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 1rem}
@media(min-width:768px){.container{padding:0 1.5rem}}
.main{display:flex;flex-direction:column;min-height:60vh;position:relative}

/* Home hero */
.hero{text-align:center;padding:2rem 0 3rem;position:relative}
@media(min-width:768px){.hero{padding:3rem 0 4rem}}
.hero h1{font-family:var(--font-head);font-weight:600;font-size:clamp(2.25rem,6vw,5.625rem);line-height:1.05;
  color:var(--ink-2);margin:0 0 1rem;text-wrap:balance}
.hero .lead{max-width:48rem;margin:0 auto;color:var(--mute);font-size:clamp(1rem,2vw,1.25rem);text-wrap:balance}

/* Photo strip */
.photo-strip{display:flex;justify-content:center;align-items:center;gap:1rem;overflow:hidden;width:100%;margin:0 auto;z-index:20;position:relative}
@media(min-width:768px){.photo-strip{gap:1.5rem}}
@media(min-width:1024px){.photo-strip{gap:2rem}}
.photo-strip img{border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);object-fit:cover;height:auto}
.photo-strip .p1,.photo-strip .p5{width:400px;display:none}
.photo-strip .p2,.photo-strip .p4{width:450px;display:none}
.photo-strip .p3{width:min(480px,92vw)}
@media(min-width:768px){.photo-strip .p2,.photo-strip .p4{display:block;width:450px}
  .photo-strip .p3{width:480px}}
@media(min-width:1024px){.photo-strip .p1,.photo-strip .p5{display:block}
  .photo-strip .p2,.photo-strip .p4{width:490px}.photo-strip .p3{width:540px}}

/* Intro + reportcard */
.intro{padding:0;position:relative;z-index:0}
@media(min-width:1024px){.intro{padding-top:8rem}}
.intro-grid{display:flex;flex-direction:column;gap:2.5rem}
@media(min-width:1024px){.intro-grid{flex-direction:row;align-items:flex-start}}
.intro-copy{width:100%;padding-top:4rem}
@media(min-width:1024px){.intro-copy{width:50%}}
.intro-copy p{font-family:var(--font-head);font-weight:500;font-size:clamp(1.25rem,2.5vw,1.75rem);line-height:1.25;color:#a1a1aa;margin:0 0 1.5rem;max-width:40rem}
.intro-copy p strong{color:var(--ink);font-weight:600}
.cta-link{display:inline-flex;align-items:center;gap:.5rem;color:var(--blue-2);font-weight:600;font-size:clamp(1.125rem,2vw,1.5rem)}
.cta-link:hover{color:#1d4ed8}
.cta-link svg{width:1.5rem;height:1.5rem}
.intro-art{width:100%;display:flex;justify-content:center;color:var(--mute-2)}
@media(min-width:1024px){.intro-art{width:50%;margin-top:-6rem}}
.intro-art img{width:min(100%,420px);height:auto}

/* Why cards */
.section{padding:3rem 0 5rem}
.section h2{font-family:var(--font-head);font-weight:600;font-size:clamp(2rem,4vw,4.25rem);line-height:1.1;margin:0 0 2rem}
.why-grid{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:1024px){.why-grid{grid-template-columns:repeat(3,1fr)}}
.why-card{background:var(--wash);border-radius:1rem;padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem}
@media(min-width:768px){.why-card{flex-direction:row}}
@media(min-width:1024px){.why-card{flex-direction:column;padding:2rem}}
.why-card .ico{width:88px;height:88px;flex-shrink:0}
@media(min-width:1024px){.why-card .ico{width:104px;height:104px}}
.why-card h3{font-family:var(--font-head);font-weight:600;font-size:1.375rem;margin:0 0 .75rem;line-height:1.125}
.why-card p{margin:0;color:var(--mute);font-size:1.125rem}

/* Phases */
.phases-lead{max-width:56rem;font-size:clamp(1.125rem,2vw,1.375rem);color:var(--mute);margin:0 0 3rem}
.phases{display:flex;flex-direction:column;gap:.125rem}
@media(min-width:1024px){.phases{flex-direction:row}}
.phase{flex:1;display:flex;gap:.75rem}
@media(min-width:1024px){.phase{flex-direction:column}}
.phase-rail{display:flex;flex-direction:column;align-items:center;width:2rem}
@media(min-width:1024px){.phase-rail{display:none}}
.phase-rail .dot{width:1rem;height:1rem;border:2px solid var(--mute-2);border-radius:99px;background:#fff;z-index:1}
.phase-rail .line{flex:1;width:0;border-left:1px dashed #a1a1aa;min-height:1rem}
.phase-top{display:none}
@media(min-width:1024px){
  .phase-top{display:flex;flex-direction:column;gap:.5rem}
  .phase-line{display:flex;align-items:center;height:2rem;width:100%}
  .phase-line .dot{width:1rem;height:1rem;border:2px solid var(--mute-2);border-radius:99px;flex-shrink:0}
  .phase-line .dash{flex:1;height:0;border-top:1px dashed #a1a1aa}
}
.phase-body{padding:.5rem 0 3rem}
@media(min-width:1024px){.phase-body{padding:.5rem 2rem .5rem 1rem}}
.badge{display:inline-flex;align-items:center;padding:.35rem .75rem;border-radius:999px;font-size:.875rem;font-weight:500;border:1px solid;line-height:1;width:fit-content}
.badge.piloto{background:var(--pilot-bg);color:var(--pilot);border-color:var(--pilot-bd)}
.badge.activo{background:var(--green-bg);color:var(--green);border-color:var(--green-bd)}
.badge.mantenimiento{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-bd)}
.badge.retirado{background:var(--ret-bg);color:var(--ret);border-color:var(--ret-bd)}
.phase-body .ph-ico{width:2rem;height:2rem;margin:.75rem 0;color:inherit}
@media(min-width:1024px){.phase-body .ph-ico-m{display:none}}
.phase-body h3{font-family:var(--font-head);font-weight:600;font-size:clamp(1.25rem,2vw,1.5rem);margin:.5rem 0;line-height:1.125}
.phase-body p{color:var(--mute);font-size:1.125rem;margin:0}
.phase .ph-ico-d{display:none;width:2rem;height:2rem;margin-left:.5rem}
@media(min-width:1024px){.phase .ph-ico-d{display:block}}
.phase.piloto .ph-ico,.phase.piloto .ph-ico-d{color:#1d4ed8}
.phase.activo .ph-ico,.phase.activo .ph-ico-d{color:#15803d}
.phase.mantenimiento .ph-ico,.phase.mantenimiento .ph-ico-d{color:#a16207}
.phase.retirado .ph-ico,.phase.retirado .ph-ico-d{color:#3f3f46}

/* Footer */
.site-footer{background:var(--ink);color:#fff;margin-top:auto}
.site-footer .container{padding-top:4rem;padding-bottom:4rem}
.site-footer h2{font-family:var(--font-head);font-weight:600;font-size:clamp(1.5rem,3vw,1.875rem);max-width:32rem;margin:0;line-height:1.125;text-wrap:balance}
.footer-links{display:flex;flex-direction:column;gap:.75rem;margin:1rem 0 2.5rem}
@media(min-width:768px){.footer-links{flex-direction:row;gap:2rem}}
.footer-links a{color:#93c5fd;font-weight:500;font-size:.875rem}
.footer-links a:hover{color:#bfdbfe}
.footer-bottom{display:flex;flex-direction:column;gap:2.5rem;font-size:.8125rem}
@media(min-width:768px){.footer-bottom{flex-direction:row;justify-content:space-between;align-items:flex-end}}
.footer-built{color:#a1a1aa;margin-bottom:1rem}
.footer-brand{display:inline-flex;align-items:center;gap:.7rem;color:#fff;text-decoration:none;
  padding:4px 0;border-radius:8px;transition:opacity .15s ease}
.footer-brand:hover{opacity:.88;text-decoration:none}
.footer-brand:focus-visible{outline:2px solid #fff;outline-offset:3px}
.footer-brand img{height:32px;width:auto;object-fit:contain}
.footer-brand span{font-weight:600;letter-spacing:2px;text-transform:uppercase;font-size:.9375rem;line-height:1}
.footer-social{display:flex;gap:1rem}
.footer-social img{width:32px;height:32px}
.footer-copy{color:#a1a1aa;margin-top:1rem}
.footer-copy a{text-decoration:underline}
.footer-copy a:hover{color:#e4e4e7}

/* Products page */
.prod-hero{position:relative;text-align:center;padding:3rem 1rem 1.5rem;overflow:visible;min-height:220px}
.prod-hero h1{font-family:var(--font-head);font-weight:600;font-size:clamp(2rem,4vw,3.125rem);margin:0 0 1.5rem;color:var(--ink);position:relative;z-index:2}
.shapes{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:1}
.shape{position:absolute;will-change:transform;opacity:.9}
.shape img{width:100%;height:100%}
@media(max-width:700px){.shape{opacity:.45}}
@media(prefers-reduced-motion:reduce){.shape{transform:none!important}}

.search-wrap{position:relative;z-index:2;max-width:560px;margin:0 auto}
.search-wrap input{width:100%;padding:.875rem 1.25rem .875rem 2.75rem;border-radius:999px;border:1px solid var(--line);
  box-shadow:var(--shadow-search);font:inherit;background:#fff;outline:none}
.search-wrap input:focus{border-color:#93c5fd;box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.search-wrap .ico{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--mute-3);pointer-events:none}
.search-wrap .clear{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);background:var(--wash);border:0;border-radius:99px;width:28px;height:28px;display:none;align-items:center;justify-content:center;color:var(--mute)}
.search-wrap .clear.show{display:flex}

.cats{display:flex;gap:.5rem;overflow-x:auto;padding:1rem;justify-content:safe center;scrollbar-width:thin}
.cat{background:none;border:0;border-bottom:3px solid transparent;padding:.5rem .875rem;display:grid;justify-items:center;gap:.35rem;color:var(--mute);min-width:100px;flex-shrink:0}
.cat .ic{width:28px;height:28px;border-radius:50%;background:var(--wash);display:grid;place-items:center;color:var(--mute-2)}
.cat .ic svg{width:16px;height:16px}
.cat.on{color:var(--ink);border-color:var(--ink);font-weight:600}
.cat.on .ic{box-shadow:0 0 18px rgba(228,0,43,.4);color:var(--ink)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.25rem;padding:0 1rem 3rem;max-width:var(--max);margin:0 auto}
/* Floating cards — continuous gentle float + hover lift (open-gov feel) */
@keyframes cardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.grid{perspective:800px}
.card{
  display:flex;flex-direction:column;gap:.5rem;border-radius:var(--radius);padding:1.25rem;background:#fff;
  box-shadow:0 8px 24px rgba(149,157,165,.22),0 2px 6px rgba(0,0,0,.04);
  border:1px solid var(--line);
  transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s cubic-bezier(.22,1,.36,1);
  min-height:200px;
  will-change:transform;
  animation:cardFloat 5.5s ease-in-out infinite;
}
.card:nth-child(2n){animation-duration:6.2s;animation-delay:-1.1s}
.card:nth-child(3n){animation-duration:5.1s;animation-delay:-2.4s}
.card:nth-child(4n){animation-duration:6.8s;animation-delay:-.7s}
.card:hover,.card:focus-visible{
  animation-play-state:paused;
  transform:translateY(-10px) scale(1.015);
  box-shadow:0 22px 40px rgba(149,157,165,.38),0 8px 16px rgba(0,0,0,.08);
  border-color:#d4d4d8;
  z-index:2;
}
@media (prefers-reduced-motion:reduce){
  .card{animation:none}
  .card:hover,.card:focus-visible{transform:translateY(-4px)}
}
.card-top{display:flex;align-items:flex-start;gap:.75rem}
.card-logo{width:38px;height:38px;border-radius:10px;flex-shrink:0}
.card h3{margin:0;font-size:1.125rem;font-weight:600;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.card .tag{font-size:.6875rem;background:var(--wash);border-radius:99px;padding:.15rem .55rem;font-weight:500;color:var(--mute)}
.card .meta{color:var(--mute-2);font-size:.8125rem;margin:0}
.card .desc{color:var(--mute);font-size:.9375rem;margin:.25rem 0 .5rem;flex:1}
.card .status{align-self:flex-start;margin-top:auto}
#empty{text-align:center;padding:3rem;color:var(--mute);display:none}
#empty.show{display:block}

/* Product detail */
.prod-page{max-width:1100px;margin:0 auto;padding:1rem 1rem 4rem}
.crumb{font-size:.875rem;color:var(--mute);margin:1rem 0}
.crumb a:hover{color:var(--blue-2);text-decoration:underline}
.prod-head{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;justify-content:space-between;margin-bottom:1rem}
.prod-id{display:flex;gap:1rem;align-items:flex-start;flex:1}
.prod-id img{width:48px;height:48px;border-radius:12px}
.prod-id h1{font-family:var(--font-head);font-size:1.75rem;font-weight:600;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;color:var(--ink-2)}
.prod-id .ext{color:var(--mute);font-size:.875rem;display:inline-flex;align-items:center;gap:.25rem}
.prod-id .ext:hover{color:var(--blue-2)}
.prod-id .sum{color:var(--mute);margin:.5rem 0 0;max-width:40rem}
.prod-side{text-align:right}
.prod-side .meta{color:var(--mute-2);font-size:.8125rem;margin-top:.5rem}

.tabs{display:flex;gap:1.5rem;border-bottom:1px solid var(--line);margin:1.5rem 0}
.tabs a{padding:.6rem .15rem;font-size:.875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);border-bottom:3px solid transparent;margin-bottom:-1px}
.tabs a.on{color:var(--blue);border-color:var(--blue)}
.tabs a:hover{color:var(--ink)}

.ov-grid{display:grid;gap:2.5rem}
@media(min-width:900px){.ov-grid{grid-template-columns:1.4fr .8fr}}
.ov-main section{margin-bottom:3rem}
.lbl{color:var(--blue);font-size:.875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin:0 0 .75rem}
.ov-main h2{font-family:var(--font-head);font-size:1.375rem;font-weight:600;margin:0 0 .75rem;line-height:1.25}
.ov-main p{color:var(--mute);margin:0 0 1rem}
.ov-main .shot{border-radius:12px;box-shadow:var(--shadow-card);margin:1rem 0;width:100%;background:var(--wash)}
.feat-list{display:grid;gap:1.25rem;margin:1.5rem 0}
.feat-list h3{margin:0 0 .25rem;font-size:1rem}
.feat-list p{margin:0;font-size:.9375rem}
.quotes blockquote{margin:0 0 1.25rem;padding:0;font-style:italic;color:var(--mute);border:0}
.quotes cite{display:block;font-style:normal;font-size:.8125rem;color:var(--mute-3);margin-top:.35rem}

.ov-side{background:#eff6ff;border-radius:1rem;padding:1.5rem;height:fit-content;position:sticky;top:6rem}
.ov-side .lbl{color:var(--blue)}
.ov-side h3{font-size:1rem;margin:0 0 .5rem}
.ov-side p{color:var(--mute);font-size:.9375rem;margin:0 0 1rem}
.big-stat{font-family:var(--font-head);font-size:2rem;font-weight:600;margin:.25rem 0;color:var(--ink)}
.big-stat small{display:block;font-size:.8125rem;font-weight:500;color:var(--mute);font-family:var(--font-body)}

/* Metrics */
.metrics-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.metrics-head h2{font-family:var(--font-head);font-size:1.75rem;margin:0}
.q-select{border:1px solid var(--line);border-radius:8px;padding:.4rem .75rem;background:#fff}
.metric-row{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:start;padding:1.5rem 0;border-bottom:1px solid var(--line)}
@media(min-width:700px){.metric-row{grid-template-columns:220px 1fr auto;align-items:center}}
.metric-label{display:flex;align-items:center;gap:.6rem;color:var(--blue);font-weight:600}
.metric-label .mi{width:28px;height:28px;border-radius:99px;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:.75rem;flex-shrink:0}
.metric-val{font-family:var(--font-head);font-size:clamp(1.5rem,3vw,2rem);font-weight:600;text-align:right}
.metric-val .sub{display:block;font-size:.8125rem;font-weight:500;color:var(--mute);font-family:var(--font-body);margin-top:.25rem}
.metric-val .delta{font-size:.8125rem;color:var(--green)}
.metric-mid{color:var(--mute);font-size:.875rem}
.avatars{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.5rem}
.avatars img{width:40px;height:40px;border-radius:99px;background:var(--wash)}
.breakdown{margin-top:.5rem;color:var(--mute);font-size:.875rem;cursor:pointer;user-select:none;display:inline-flex;align-items:center;gap:.35rem}
.breakdown-panel{display:none;margin-top:.75rem;padding:1rem;background:var(--wash);border-radius:8px;font-size:.875rem}
.breakdown-panel.open{display:block}
.chart{display:flex;align-items:flex-end;gap:8px;height:160px;margin-top:1rem;padding-top:.5rem;border-bottom:1px solid var(--line)}
.chart .bar{flex:1;background:var(--blue-2);border-radius:6px 6px 0 0;position:relative;min-height:4px;transition:filter .15s}
.chart .bar:hover{filter:brightness(1.2)}
.chart .bar:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;font-size:.7rem;padding:.2rem .5rem;border-radius:6px;white-space:nowrap;pointer-events:none}

/* Updates */
.updates h2.page{font-family:var(--font-head);font-size:1.75rem;margin:0 0 1.5rem}
.q-block{margin-bottom:2.5rem}
.q-block h3{font-size:1rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);margin:0 0 1rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.upd{display:grid;gap:.35rem;margin:0 0 1.25rem;padding-left:1rem;border-left:3px solid var(--blue-soft)}
.upd .kind{font-size:.75rem;font-weight:600;color:var(--blue);text-transform:uppercase;letter-spacing:.04em}
.upd p{margin:0;color:var(--mute)}

/* 404 / credits */
.nf{min-height:50vh;display:grid;place-content:center;text-align:center;padding:3rem}
.nf h1{font-family:var(--font-head);font-size:4rem;margin:0}
.nf h2{font-weight:500;color:var(--mute);margin:.5rem 0 1.5rem}
.credits{max-width:720px;margin:0 auto;padding:2rem 1rem 4rem}
.credits h1{font-family:var(--font-head);font-size:2rem}
.credits li{margin:.5rem 0;color:var(--mute)}

/* Notice */
.preview-note{background:#fff7ed;border-bottom:1px solid #fed7aa;color:#9a3412;font-size:.75rem;text-align:center;padding:.35rem}

/* ===================================================================
   Afinado de fidelidad (oct 2026) — escala tipográfica, contenedor y
   espaciados medidos en la referencia a 390/768/1024/1280. Reglas propias.
   =================================================================== */
:root{--lh-body:1.688}
/* contenedor: ancho completo con 16px de margen (la píldora sigue a 1152) */
.container{max-width:none;padding:0 1rem}
@media(min-width:768px){.container{padding:0 1rem}}
/* franja superior: 28px de alto */
.mast-mark{height:20px}
.mast-inner{padding:0 .75rem;align-items:center}
@media(min-width:1024px){.mast-inner{padding:0 1.5rem}}
.mast-row{padding:4px 0;min-height:28px}
@media(min-width:1024px){.mast{font-size:.75rem}}
/* píldora: enlaces 16px, 600, tracking 2px */
.pill{padding:.25rem 1.5rem}
.pill-links{gap:0}
.pill-links a{font-size:1rem;line-height:1;letter-spacing:2px;padding:.5rem .75rem;height:32px}
@media(max-width:640px){.pill-links a{font-size:.8125rem;padding:.5rem .25rem;letter-spacing:1px}}
/* hero */
.hero{padding:3rem 0 4rem}
@media(min-width:768px){.hero{padding:4rem 0 4rem}}
.hero h1{font-size:46px;line-height:54px;letter-spacing:-.03em;margin:0 0 1rem}
@media(min-width:768px){.hero h1{font-size:58px;line-height:1;letter-spacing:-.034em}}
@media(min-width:1024px){.hero h1{font-size:68px;letter-spacing:-.036em}}
@media(min-width:1280px){.hero h1{font-size:90px;letter-spacing:-.0393em}}
.hero .lead{font-size:20px;line-height:var(--lh-body);letter-spacing:-.005em}
/* escalas compartidas */
.intro-copy p{font-size:28px;line-height:1.25;letter-spacing:-.0175em;max-width:none}
.cta-link,.phases-lead{font-size:22px;line-height:1.636;letter-spacing:-.009em}
.section h2{font-size:38px;line-height:1.25;letter-spacing:-.0258em;margin:0 0 2rem;color:#000}
.why-card h3,.phase-body h3{font-size:28px;line-height:1.125;letter-spacing:-.0175em}
.why-card p,.phase-body p{font-size:20px;line-height:var(--lh-body);letter-spacing:-.005em}
@media(min-width:768px){
  .intro-copy p{font-size:30px;letter-spacing:-.0197em}
  .cta-link,.phases-lead{font-size:24px;line-height:1.583;letter-spacing:-.0125em}
  .section h2{font-size:46px;letter-spacing:-.03em}
  .why-card h3,.phase-body h3{font-size:30px;letter-spacing:-.0197em}
}
@media(min-width:1024px){
  .intro-copy p{font-size:34px;letter-spacing:-.0232em}
  .cta-link,.phases-lead{font-size:26px;line-height:1.538;letter-spacing:-.015em}
  .section h2{font-size:54px;letter-spacing:-.0328em}
  .why-card h3,.phase-body h3{font-size:34px;letter-spacing:-.0232em}
}
@media(min-width:1280px){
  .intro-copy p{font-size:38px;letter-spacing:-.0258em}
  .cta-link,.phases-lead{font-size:28px;line-height:1.5;letter-spacing:-.0175em}
  .section h2{font-size:68px;letter-spacing:-.0362em}
  .why-card h3,.phase-body h3{font-size:38px;letter-spacing:-.0258em}
}
/* intro + ilustración (mitad y mitad) */
.intro-grid{gap:0}
@media(min-width:1024px){.intro-copy{padding-top:6rem;padding-right:2.5rem}.intro-art{margin-top:-6rem}}
.intro-copy p{margin:0}
.cta-link{margin-top:1.5rem;font-weight:600;color:#1c64f2}
.intro-art img{width:min(100%,604px)}
/* por qué: tarjetas zinc-100, radio 16, padding 32, gap 32 */
.section{padding:0 0 5rem}
.why-grid{gap:2rem}
.why-card{border-radius:16px;padding:2rem;gap:1.5rem;background:#f4f4f5}
.why-card .ico{width:104px;height:104px;object-fit:contain;object-position:left center}
.why-card h3{margin:0 0 1rem;color:#27272a}
/* etapas */
.section.phases-sec,.section[style*="padding-top:0"]{padding-top:6rem!important;padding-bottom:6rem}
.phases-lead{max-width:56rem;margin:0 0 4rem}
.phase-line .dash{border-top:2px dashed #d4d4d8!important}
.phase-line .dot{border-color:#71717a}
@media(min-width:1024px){.phase-body{padding:2rem 4rem 0 1rem}}
.phase-body h3{margin:1rem 0;color:#000}
.badge{font-size:1rem;line-height:1;padding:6px 12px;font-weight:400}
.badge.piloto{color:#005dea;background:#e1effe;border-color:#acc7fa}
.badge.activo{color:#0a524b;background:#def7ec;border-color:#bcf0da}
.badge.mantenimiento{color:#b45309;background:#fef3c7;border-color:#fde68a}
.badge.retirado{color:#3f3f46;background:#f4f4f5;border-color:#e4e4e7}
/* footer */
.main{padding-bottom:4rem}
.site-footer .container{padding-top:4rem;padding-bottom:4rem}
.site-footer h2{font-size:36px;line-height:1.125;letter-spacing:-.03em;max-width:32rem}
@media(min-width:768px){.site-footer h2{font-size:42px}}
@media(min-width:1024px){.site-footer h2{font-size:46px}}
@media(min-width:1280px){.site-footer h2{font-size:50px;letter-spacing:-.0314em}}
.footer-links{margin:1.75rem 0 2.5rem}
.footer-links a{color:#62a1ff;font-size:1rem;line-height:28px;font-weight:500}
.footer-links a:hover{color:#93c5fd}
.footer-bottom{font-size:14px;line-height:26px}
.footer-built{margin-bottom:1rem}
.footer-brand img{height:36px}
.footer-copy{margin-top:1rem}
/* ajustes finos tras medir */
.phases-lead{margin-bottom:6rem}
@media(min-width:1024px){.phase-body{padding-top:12px}
  .intro-copy{padding-right:20px}.intro-art{justify-content:flex-end}}
.footer-bottom>div:last-child{display:flex;flex-direction:column;align-items:flex-start}
@media(min-width:768px){.footer-bottom>div:last-child{align-items:flex-end;text-align:right}}

/* ---------- Proyectos: hero con degradé propio, buscador translúcido, filtros con ícono de línea, tarjetas 400x330 ---------- */
div:has(> main > .prod-hero){background:radial-gradient(120% 520px at 50% 260px,#f8f9fb 0%,#f1f2f6 55%,#eceef4 100%) top/100% 600px no-repeat,#fff}
.prod-hero{padding:1.5rem 1rem 0;min-height:0;overflow-x:clip;overflow-y:visible}
.prod-hero h1{font-size:36px;line-height:1.12;letter-spacing:-.03em;margin:0 0 1.5rem;color:#18181b}
@media(min-width:768px){.prod-hero h1{font-size:44px}}
@media(min-width:1024px){.prod-hero h1{font-size:50px;letter-spacing:-.0314em}}
.shapes{top:-88px;bottom:auto;height:500px}
.shape{opacity:1}
.shape::before{content:"";position:absolute;left:5%;right:5%;top:45%;bottom:-12%;border-radius:50%;background:radial-gradient(closest-side,var(--glow,rgba(0,0,0,.15)),transparent);filter:blur(14px);z-index:-1}
.shape img{position:relative}
.shape.sh-md{display:none}.shape.sh-lg{display:none}.shape.sh-xl{display:none}
@media(min-width:768px){.shape.sh-md{display:block}}
@media(min-width:1024px){.shape.sh-lg{display:block}}
@media(min-width:1280px){.shape.sh-xl{display:block}}
@media(max-width:767px){.shape{width:64px!important;height:64px!important}.shape img{width:64px;height:64px}}
@media(min-width:768px) and (max-width:1279px){.shape{width:112px!important;height:112px!important}.shape img{width:112px;height:112px}}
@media(max-width:700px){.shape{opacity:.7}}
.search-wrap{max-width:672px}
.search-wrap input{height:38px;padding:4px 16px 4px 40px;border-radius:9999px;border:1px solid #fff;background:rgba(255,255,255,.5);box-shadow:none;font-size:16px;line-height:28px;color:#18181b;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.search-wrap input::placeholder{color:#71717a}
.search-wrap input:focus{border-color:#93c5fd;box-shadow:0 0 0 3px rgba(37,99,235,.15);background:rgba(255,255,255,.85)}
.search-wrap .ico{left:17px;color:#18181b}
.search-wrap .ico svg{width:15px;height:15px}
.cats{position:relative;z-index:2;gap:16px;padding:0 1rem;margin:28px 0 9px}
.cat{height:80px;min-width:100px;padding:4px 0;border-bottom:2px solid transparent;gap:4px;align-content:center;font-size:14px;line-height:26px;font-weight:500;color:#71717a}
.cat .ic{width:24px;height:24px;background:none;border-radius:0;color:inherit;box-shadow:none!important}
.cat .ic svg{width:24px;height:24px;stroke-width:1.5}
.cat.on{color:#18181b;border-color:#18181b;font-weight:500}
.cat.on .ic{color:#18181b}
.cat:hover{color:#3f3f46}
.grid{position:relative;z-index:2;isolation:isolate;max-width:none;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;padding:0 1rem}
@media(min-width:1024px){.grid{grid-template-columns:repeat(3,1fr)}}
.grid::before{content:"";position:absolute;z-index:-1;left:50%;width:100vw;transform:translateX(-50%);top:71px;bottom:-4rem;background:#fafafa;border-top:1px solid #e4e4e7}
.card{border-radius:12px;padding:24px;background:#fefefe;border:1px solid #e4e4e7;box-shadow:0 10px 28px rgba(149,157,165,.24),0 2px 6px rgba(0,0,0,.04);gap:0;min-height:330px}
.card:hover,.card:focus-visible{transform:translateY(-12px) scale(1.015);box-shadow:0 26px 48px rgba(149,157,165,.4),0 10px 18px rgba(0,0,0,.08)}
.card-top{flex-direction:column;gap:20px}
.card-logo{width:64px;height:64px;padding:12px;border:1px solid #e5e7eb;border-radius:9999px;background:#fff;object-fit:contain;box-sizing:border-box}
.card h3{font-family:var(--font-head);font-size:22px;line-height:22px;letter-spacing:-.009em;color:#27272a;gap:12px}
.card .tag{font-family:var(--font-body);font-size:16px;line-height:16px;font-weight:400;padding:6px 12px;background:transparent;border:1px solid #e4e4e7;color:#52525b;letter-spacing:0}
.card .meta{font-size:16px;line-height:28px;color:#52525b;margin-top:8px}
.card .desc{font-size:16px;line-height:28px;color:#52525b;margin:8px 0 16px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:0 0 auto;min-height:84px}
.card .status,.card .badge{margin-top:auto}
#empty{position:relative;z-index:2}
.card .meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html{overflow-x:clip}
.card,.card *{min-width:0}.card .meta{max-width:100%;display:block}
.mast{position:relative;z-index:5}
.card-top > div{align-self:stretch;min-width:0}

/* flame mark */
.pill-brand img{width:auto;height:30px;max-height:30px;object-fit:contain}
.mast-mark{width:auto;height:18px;max-height:18px;display:block;object-fit:contain;flex:none}
.footer-brand img{width:auto;height:28px;max-height:28px;object-fit:contain}

/* pro2-polish-2026-10-06 */
/* Masthead text-only (sin llama) + mobile: solo Cómo reconocernos */
.mast-mark{display:none!important}
.mast-inner{padding-left:.75rem}
@media(min-width:1024px){.mast-inner{padding-left:1.5rem}}
@media(max-width:700px){
  .mast-row>span:first-of-type{display:none}
  .mast-row{flex-wrap:nowrap}
}
/* Cards OGP: quitar float infinito; elevación sutil */
@keyframes cardFloat{0%,100%{transform:none}50%{transform:none}}
.card{
  animation:none!important;
  will-change:auto;
  transform:none;
  box-shadow:0 1px 6px rgba(0,0,0,.12)!important;
  border:1px solid #e4e4e7;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important;
}
.card:nth-child(n){animation:none!important}
.card:hover,.card:focus-visible{
  animation:none!important;
  transform:translateY(-4px)!important;
  box-shadow:0 8px 20px rgba(0,0,0,.18)!important;
  border-color:#d4d4d8;
}
.grid{perspective:none}
/* Why cards: ligera elevación */
.why-card{
  box-shadow:0 1px 4px rgba(0,0,0,.04);
  transition:transform .2s ease,box-shadow .2s ease;
}
.why-card:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 18px rgba(0,0,0,.1);
}
/* Search polish */
.search-wrap input{
  transition:box-shadow .15s ease,border-color .15s ease,background .15s ease;
}
.search-wrap input:focus{
  border-color:#93c5fd!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.15)!important;
}
.cats{scrollbar-width:thin}
.cat{transition:color .15s ease,border-color .15s ease}
/* Section rhythm */
.section{padding:3.5rem 0 4.5rem}
@media(min-width:768px){.section{padding:4.5rem 0 5.5rem}}
.section.phases-sec,.section[style*="padding-top:0"]{padding-top:5rem!important;padding-bottom:5rem}
@media (prefers-reduced-motion:reduce){
  .card,.why-card{transition:none}
  .card:hover,.why-card:hover{transform:none}
}
/* QA 2026-10-07: utilidades y franja alineada con hub/IDE */
.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}
.mast{background:#f3f4f6;color:#5b6270;font-size:12.5px;line-height:18px}
.mast-row{min-height:34px;padding:7px 0}
.mast-toggle{color:#4b5563;font-size:12.5px;font-family:inherit}
.mast-toggle:hover span{color:#1f2937}
@media(min-width:1024px){.mast{font-size:12.5px}}
#grid .card[hidden]{display:none!important}
.footer-brand span{text-transform:none;letter-spacing:0;font-size:.875rem}
.intro-copy p{color:#868690}