/* ==========================================================================
   Punto Digital — sitio v3
   Manual de marca v1.0: un solo color de marca (Azul Punto), negro, blanco y
   grises; Poppins para titulares y cifras, DM Sans para texto; retícula de 8.
   Dirección: el equipo es el protagonista. Fotografía a sangre, titulares
   grandes y apretados, nada de tarjetas decorativas. El azul aparece una vez
   por pantalla: en la acción "Cotizar sistema".
   ========================================================================== */

:root{
  --pd-blue:#2F5BFF;   --pd-blue-600:#1636B8;  --pd-blue-10:#EAEFFF;
  --pd-ink:#0B0B0B;    --pd-graphite:#1C1F24;  --pd-steel:#5B616B;
  --pd-fog:#C9CDD3;    --pd-bone:#F4F4F2;      --pd-white:#FFFFFF;
  --pd-line:#E3E5E8;   --pd-body:#2A2E35;      --pd-line-dark:#2A2E35;
  --pd-muted-dark:#9AA0A9;

  --f-display:'Poppins',Arial,sans-serif;
  --f-text:'DM Sans',Arial,sans-serif;

  --r-sm:8px; --r-md:16px; --r-lg:24px;

  /* escala: display · h2 · h3 · cuerpo grande · cuerpo · chico */
  --fs-display:clamp(52px,7.2vw,120px);
  --fs-h2:clamp(36px,4.6vw,72px);
  --fs-h3:clamp(22px,1.8vw,28px);
  --fs-lead:clamp(18px,1.45vw,22px);
  --fs-body:17px;
  --fs-sm:15px;

  --nav-h:72px;
  --gutter:clamp(20px,4vw,64px);
  --wrap:1280px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{
  font-family:var(--f-text);font-size:var(--fs-body);line-height:1.6;
  color:var(--pd-ink);background:var(--pd-white);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--pd-blue);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:16px;top:-80px;z-index:200;background:var(--pd-ink);color:#fff;padding:12px 16px;border-radius:var(--r-sm)}
.skip:focus{top:12px}
h1,h2,h3{font-family:var(--f-display);font-weight:600;line-height:1;letter-spacing:-.035em}
figure{margin:0}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 24px;border-radius:999px;border:1.5px solid transparent;
  font-family:var(--f-text);font-size:16px;font-weight:700;line-height:1;white-space:nowrap;
  cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.btn-primary{background:var(--pd-blue);color:#fff}
.btn-primary:hover{background:var(--pd-blue-600)}
.btn-ghost{border-color:var(--pd-ink);color:var(--pd-ink)}
.btn-ghost:hover{background:var(--pd-ink);color:#fff}
.btn-ghost-light{border-color:#4A4F57;color:#fff}
.btn-ghost-light:hover{border-color:#fff}
.btn-lg{min-height:56px;padding:0 30px;font-size:17px}
.btn-sm{min-height:40px;padding:0 18px;font-size:15px}
.link-light{color:#fff;font-weight:700;font-size:16px;border-bottom:1.5px solid #4A4F57;padding-bottom:4px;transition:border-color .2s}
.link-light:hover{border-color:#fff}

/* ---------- NAV ---------- */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  background:transparent;border-bottom:1px solid transparent;
  transition:background-color .3s ease,border-color .3s ease;
}
#nav .wrap{max-width:none;height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{position:relative;display:block}
.logo img{height:24px;width:auto}
.logo .logo-light{position:absolute;inset:0;opacity:0}
.nav-links{display:flex;gap:36px}
.nav-links a{font-size:15px;font-weight:500;color:var(--pd-body);transition:color .2s;padding:8px 0}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--pd-ink)}
.nav-links a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--pd-ink)}
/* sobre la portada oscura */
#nav.on-dark .nav-links a{color:#C9CDD3}
#nav.on-dark .nav-links a:hover{color:#fff}
/* páginas interiores y al salir de la portada */
#nav.solid{background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom-color:var(--pd-line)}
.home #nav.solid .logo-dark{opacity:0}
.home #nav.solid .logo-light{opacity:1}
body:not(.home) .logo-dark{display:none}
body:not(.home) .logo .logo-light{position:static;opacity:1}

/* ---------- HERO: negro, titular grande, foto a sangre ---------- */
.hero{
  min-height:100svh;background:var(--pd-ink);color:#fff;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.hero-copy{
  padding:calc(var(--nav-h) + clamp(40px,8vh,96px)) var(--gutter) clamp(32px,5vh,56px);
  display:flex;flex-direction:column;justify-content:center;gap:32px;
  max-width:760px;margin-left:auto;width:100%;
}
.hero h1{font-size:clamp(52px,6.4vw,112px);line-height:.94;letter-spacing:-.045em}
.hero-sub{font-size:var(--fs-lead);line-height:1.5;color:#C9CDD3;max-width:30em}
.hero-ctas{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.facts{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 48px;max-width:620px;
  margin-top:auto;padding-top:32px;border-top:1px solid var(--pd-line-dark);
}
.facts dt{font-family:var(--f-display);font-weight:600;font-size:clamp(18px,1.45vw,22px);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.facts dd{font-size:14px;line-height:1.4;color:var(--pd-muted-dark);margin-top:6px}
.hero-media{position:relative;overflow:hidden;background:var(--pd-graphite)}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 40%}

/* ---------- CÓMO FUNCIONA ---------- */
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--pd-white)}
.story-copy{padding:0 var(--gutter);max-width:760px;margin-left:auto;width:100%}
.story-head{padding:clamp(96px,16vh,160px) 0 clamp(24px,4vh,48px)}
.story-head h2{font-size:var(--fs-h2);max-width:10ch}
.story-head p{font-size:var(--fs-lead);color:var(--pd-body);margin-top:24px;max-width:28em}
.story-steps{list-style:none}
.story-step{
  min-height:82svh;display:flex;flex-direction:column;justify-content:center;
  padding:48px 0;border-top:1px solid var(--pd-line);
  transition:opacity .4s ease;
}
.story-step .step-media{display:none}
.story-step .n{
  font-family:var(--f-display);font-weight:600;font-size:clamp(64px,7vw,112px);line-height:.9;
  letter-spacing:-.05em;color:var(--pd-fog);font-variant-numeric:tabular-nums;
  transition:color .4s ease;margin-bottom:24px;
}
.story-step h3{font-size:var(--fs-h2);font-size:clamp(32px,3.4vw,52px);margin-bottom:20px;max-width:12ch}
.story-step p{font-size:var(--fs-lead);line-height:1.55;color:var(--pd-body);max-width:26em}
.story-step.is-active .n{color:var(--pd-ink)}
.story-media{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--pd-bone)}
.story-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;
  opacity:0;transform:scale(1.03);transition:opacity .7s ease,transform 1.2s ease;
}
.story-media img.is-on{opacity:1;transform:scale(1)}

/* ---------- SISTEMA ---------- */
.system{padding:clamp(96px,16vh,176px) 0;background:var(--pd-bone)}
.system-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:end;margin-bottom:clamp(56px,9vh,96px)}
.system-head h2{font-size:var(--fs-h2);max-width:12ch}
.system-head p{font-size:var(--fs-lead);color:var(--pd-body);line-height:1.55}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.pillar{border-top:2px solid var(--pd-ink);padding-top:24px}
.pillar h3{font-size:var(--fs-h3);letter-spacing:-.02em;margin-bottom:14px}
.pillar p{color:var(--pd-body);line-height:1.6}
.pillar-accent{border-top-color:var(--pd-blue)}

/* ---------- RUBROS: lista tipográfica grande sobre negro ---------- */
.sectors{background:var(--pd-ink);color:#fff;padding:clamp(96px,16vh,176px) 0}
.sectors h2{font-size:var(--fs-lead);font-family:var(--f-text);font-weight:500;letter-spacing:0;line-height:1.4;color:var(--pd-muted-dark);margin-bottom:32px}
.sector-list{list-style:none;display:flex;flex-wrap:wrap;gap:.08em .5em;
  font-family:var(--f-display);font-weight:600;font-size:clamp(36px,5.2vw,84px);line-height:1.08;letter-spacing:-.035em}
.sector-list li:nth-child(even){color:#5B616B}

/* ---------- PRODUCTOS ---------- */
.products{padding:clamp(96px,16vh,176px) 0 0}
.products h2{font-size:var(--fs-h2);margin-bottom:clamp(48px,8vh,88px)}
.feature{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;min-height:min(92svh,920px)}
.feature-media{height:100%;min-height:560px;position:relative;overflow:hidden;background:var(--pd-bone)}
.feature-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.feature-copy{padding:clamp(48px,8vh,96px) var(--gutter);max-width:600px;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.feature-copy .brand{height:clamp(36px,3.2vw,48px);width:auto}
.feature-copy p{font-size:var(--fs-lead);line-height:1.55;color:var(--pd-body)}
.feature-copy .status{font-size:var(--fs-sm);color:var(--pd-steel);display:flex;align-items:center;gap:10px}
.feature-copy .status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pd-ink)}
.feature-copy .status-dev{color:var(--pd-blue-600)}
.feature-copy .status-dev::before{background:var(--pd-blue)}
.feature-flip .feature-media{order:2}
.feature-flip .feature-copy{margin-left:auto}
.feature + .feature{margin-top:0}

/* ---------- CONTACTO ---------- */
.contact{background:var(--pd-ink);color:#fff;padding:clamp(96px,16vh,176px) 0 clamp(72px,10vh,112px)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:64px;align-items:end}
.contact h2{font-size:var(--fs-display);line-height:.94;letter-spacing:-.045em;max-width:8ch}
.contact-sub{font-size:var(--fs-lead);color:#C9CDD3;margin:32px 0 40px;max-width:30em}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.contact-meta div{display:flex;justify-content:space-between;gap:16px;padding:18px 0;border-top:1px solid var(--pd-line-dark);font-size:var(--fs-sm)}
.contact-meta dt{color:var(--pd-muted-dark)}
.contact-meta a:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- FOOTER ---------- */
footer{background:var(--pd-ink);color:var(--pd-muted-dark);font-size:14px;border-top:1px solid var(--pd-line-dark)}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:28px;padding-bottom:28px}
.foot-brand{display:flex;align-items:center;gap:16px}
.foot-brand img{height:20px;width:auto}
footer nav{display:flex;gap:24px}
footer a:hover{color:#fff}

/* ---------- CATÁLOGO ---------- */
#catalogo{padding:calc(var(--nav-h) + clamp(56px,9vh,104px)) 0 clamp(96px,14vh,152px)}
.cat-head h1{font-size:var(--fs-h2)}
.cat-head .sub{font-size:var(--fs-lead);color:var(--pd-body);margin-top:24px;max-width:34em}
.cat-group{margin-top:clamp(56px,9vh,88px)}
.cat-group > h2{font-size:var(--fs-h3);letter-spacing:-.02em;padding-bottom:16px;margin-bottom:24px;border-bottom:1px solid var(--pd-line)}
.cat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,40px)}
.prod{display:flex;flex-direction:column;gap:12px}
.prod .thumb{aspect-ratio:4/5;border-radius:var(--r-md);overflow:hidden;background:var(--pd-bone);margin-bottom:12px}
.prod .thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform .5s ease}
a.prod:hover .thumb img{transform:scale(1.025)}
.prod .brand{height:28px;width:auto;align-self:flex-start}
.prod h3{font-size:var(--fs-h3);letter-spacing:-.02em}
.prod p{color:var(--pd-body);line-height:1.55;max-width:34em}
.prod .row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px}
.more{font-weight:700;font-size:15px;border-bottom:1.5px solid var(--pd-fog);padding-bottom:2px;transition:border-color .2s}
a.prod:hover .more,.more:hover{border-color:var(--pd-ink)}
.tag{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--pd-steel)}
.tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pd-ink)}
.tag.dev{color:var(--pd-blue-600)}
.tag.dev::before{background:var(--pd-blue)}

/* ---------- PÁGINA DE PRODUCTO ---------- */
#producto{padding:calc(var(--nav-h) + clamp(32px,5vh,56px)) 0 clamp(96px,14vh,152px)}
.crumb{font-size:15px;font-weight:500;color:var(--pd-steel);margin-bottom:32px;display:inline-flex;gap:8px;transition:color .2s}
.crumb:hover{color:var(--pd-ink)}
.prod-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,6vw,96px);align-items:start}
.gallery{position:sticky;top:calc(var(--nav-h) + 24px)}
.gallery .main{aspect-ratio:3/4;max-height:calc(100svh - var(--nav-h) - 150px);margin:0 auto;border-radius:var(--r-lg);overflow:hidden;background:var(--pd-bone)}
.gallery .main img{width:100%;height:100%;object-fit:cover}
.thumbs{display:flex;gap:8px;margin-top:16px;justify-content:center}
.thumbs button{width:64px;height:80px;padding:0;border:1.5px solid var(--pd-line);border-radius:var(--r-sm);overflow:hidden;background:var(--pd-bone);cursor:pointer;transition:border-color .2s}
.thumbs button[aria-current="true"]{border-color:var(--pd-ink)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.pinfo{padding-top:clamp(0px,4vh,48px)}
.pinfo .brand{height:40px;width:auto;margin-bottom:28px}
.pinfo .eyebrow{display:none}
.pinfo h1{font-size:clamp(40px,4.6vw,72px);letter-spacing:-.04em;margin-bottom:20px;max-width:12ch}
.pinfo .tagline{font-size:var(--fs-lead);color:var(--pd-body);margin-bottom:20px}
.pinfo .desc{color:var(--pd-body);line-height:1.65;margin-bottom:32px;max-width:34em}
.pinfo .modal{font-size:var(--fs-sm);color:var(--pd-steel);margin:16px 0 56px}
.specs h2{font-size:var(--fs-h3);letter-spacing:-.02em;margin-bottom:16px}
.specs dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:0 24px;border-top:1px solid var(--pd-line)}
.specs dt,.specs dd{padding:16px 0;border-bottom:1px solid var(--pd-line);font-size:var(--fs-sm)}
.specs dt{color:var(--pd-steel)}

/* ---------- responsive ---------- */
@media (max-width:960px){
  :root{--nav-h:64px}
  .nav-links{display:none}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-media{order:-1;height:62svh;min-height:380px}
  .hero-copy{padding:40px var(--gutter) 48px;max-width:none;gap:24px}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;padding-top:24px;margin-top:8px}
  .facts dd{font-size:13px}

  .story{grid-template-columns:1fr}
  .story-media{display:none}
  .story-copy{max-width:none}
  .story-step{min-height:0;padding:40px 0 56px}
  .story-step .step-media{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 40%;border-radius:var(--r-lg);margin-bottom:32px;background:var(--pd-bone)}
  .story-step .n{font-size:56px;color:var(--pd-ink);margin-bottom:16px}

  .system-head{grid-template-columns:1fr;gap:24px}
  .pillars{grid-template-columns:1fr;gap:40px}

  .feature,.feature-flip{grid-template-columns:1fr;min-height:0}
  .feature-media,.feature-flip .feature-media{order:-1;min-height:0;height:auto;aspect-ratio:4/5}
  .feature-copy,.feature-flip .feature-copy{margin:0;max-width:none;padding:40px var(--gutter) 72px}

  .contact-grid{grid-template-columns:1fr;gap:48px}

  .cat-grid{grid-template-columns:1fr}
  .prod-layout{grid-template-columns:1fr}
  .gallery{position:static}
  .gallery .main{max-height:none}
}
@media (max-width:480px){
  #nav .btn-sm{padding:0 14px;font-size:14px}
  .hero-ctas{gap:24px}
  .hero-ctas .btn{width:100%}
  .facts dt{font-size:18px}
  .contact .btn-lg{width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
  .story-media img{transform:none}
}