/* ========= Variables ========= */
:root{
  --pps-yellow:#F2B800;
  --pps-yellow-dark:#D49A00;
  --bg-dark:#1B1B1B;
  --text-dark:#1B1B1B;
  --muted:#6b6b6b;
  --container-width:1100px;
  --radius:12px;
  --gap:1rem;
  --nav-h:88px; /* se ajusta por JS */
}

/* ========= Base ========= */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--text-dark); background:#fff;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Gutters seguros (incluye iPhone con y sin notch) */
.container{
  max-width:var(--container-width);
  margin:0 auto;
  padding-left:max(1rem, env(safe-area-inset-left));
  padding-right:max(1rem, env(safe-area-inset-right));
  padding-top:1rem;
  padding-bottom:1rem;
}

.section{padding:3rem 0}
@media (max-width:576px){ .section{padding:1.75rem 0} }

/* ========= Navbar ========= */
.site-navbar{ padding:.55rem 0; transition:box-shadow .25s ease,background-color .25s ease; }
.site-navbar.bg-brand{ background:var(--pps-yellow); }
.site-navbar .logo{ height:56px; }
.site-navbar .nav-link{ color:#111; font-weight:700; padding:.6rem .9rem; }
.site-navbar .nav-link.active,
.site-navbar .nav-link:hover{ color:#000; text-decoration:underline; text-underline-offset:4px; }
.site-navbar.nav-scrolled{ box-shadow:0 6px 18px rgba(0,0,0,.2); }
.navbar-toggler{ border-color:rgba(0,0,0,.25); }
.navbar-toggler-icon{ filter:invert(1); }

/* Menú móvil sin márgenes negativos */
@media (max-width:991.98px){
  .navbar-collapse{
    background:var(--pps-yellow);
    margin:0;
    padding:.25rem 0 .75rem; /* gutters vienen de .container */
  }
  .site-navbar .nav-link{ display:block; padding:.7rem 0; border-top:1px solid rgba(0,0,0,.08); }
  .site-navbar .nav-link:first-child{ border-top:0; }
  .site-navbar .logo{ height:48px; }
}

/* ========= Hero ========= */
.hero-wrapper{ position:relative; margin-top:calc(var(--nav-h)); }
.hero-image{ height:520px; object-fit:cover; filter:brightness(.9); width:100%; display:block; }
@media (max-width:992px){ .hero-image{ height:420px } }
@media (max-width:576px){ .hero-image{ height:260px } }

.hero-overlay{ position:absolute; inset:0; background:linear-gradient(rgba(10,10,10,.45),rgba(10,10,10,.45)); z-index:2; }
.hero-inner{ position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.hero-content{ pointer-events:auto; max-width:1100px; padding:1.25rem; text-align:center; }
.hero-title{ font-size:clamp(28px,6vw,56px); color:#fff; font-weight:800; line-height:1.05; margin:0 0 .5rem; text-shadow:0 12px 30px rgba(0,0,0,.6); }
.hero-sub{ color:rgba(255,255,255,.92); font-size:1rem; margin-bottom:.75rem; }
@media (max-width:576px){
  .hero-title{ font-size:clamp(24px,7vw,36px); }
  .hero-sub{ font-size:.95rem; }
  .hero-content .btn{ width:100%; }
}

/* ========= Botones ========= */
.btn-pps-yellow{
  background:var(--pps-yellow); color:#111; border:0;
  padding:.75rem 1.1rem; font-weight:800; border-radius:10px;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}
.btn-pps-yellow:hover{ background:var(--pps-yellow-dark); color:#111; }

/* ========= Features / tiles ========= */
.features .feature{
  border:1px solid rgba(0,0,0,.06); border-radius:12px; padding:1.1rem; background:#fff;
}
.features .feature i{ font-size:26px; margin-bottom:.45rem; display:inline-block; }
@media (max-width:576px){ .features .feature{ padding:1rem; } }

/* ========= Tech tiles ========= */
.tech-tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.35rem; min-height:110px; border:1px solid rgba(0,0,0,.06);
  border-radius:12px; background:#fff; padding:1rem; text-align:center;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.tech-tile i{ font-size:26px; }
.tech-tile span{ font-weight:700; font-size:.98rem; }
.tech-tile:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.08); border-color:rgba(0,0,0,.12); }
@media (max-width:576px){
  .tech-tile{ min-height:96px; padding:.85rem; }
  .tech-tile i{ font-size:22px; }
}

/* ========= Cards / imágenes ========= */
.photo-card{ overflow:hidden; border-radius:12px; background:#f7f7f7; }
.ratio>img{ width:100%; height:100%; object-fit:cover; border-radius:12px; }
img,video,iframe{ max-width:100%; height:auto; display:block; }

/* ========= Badges ========= */
.badges .b{
  display:inline-block; padding:.35rem .6rem; border-radius:999px; background:#f1f1f1;
  margin:.15rem .35rem .15rem 0; font-size:.9rem; font-weight:600;
}

/* ========= Clientes ========= */
.clients{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; justify-content:center; }
.clients img{ height:48px; width:auto; opacity:.9; filter:grayscale(20%); }
.clients img:hover{ opacity:1; filter:none; }
@media (max-width:576px){
  .clients{ gap:.75rem; }
  .clients img{ height:36px; }
}

/* ========= Historial (brands) ========= */
.brands-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:1rem;
  align-items:center;
}
@media (max-width:992px){ .brands-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width:576px){ .brands-grid{ grid-template-columns: repeat(2,1fr); gap:.85rem; } }

.brand{
  margin:0; padding:1rem;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px; background:#fff; text-align:center;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, filter .15s ease;
}
.brand img{
  max-height:54px; width:auto; height:auto; margin:0 auto .35rem; display:block;
  filter: grayscale(25%) contrast(1.05);
}
.brand figcaption{
  font-size:.9rem; font-weight:600; color:#333; opacity:.85;
}
.brand:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.14);
}
.brand:hover img{ filter:none; }
@media (max-width:576px){
  .brand{ padding:.85rem; }
  .brand img{ max-height:42px; }
}

/* ========= Footer ========= */
.site-footer-dark{ background:#000; color:#ccc; }
.site-footer-dark a{ color:#ddd; }
.site-footer-dark .footer-logo{ filter:brightness(1) invert(0); }

/* ========= Separadores / foco de sección ========= */
.section-lined{ border-top:1px solid rgba(0,0,0,.06); border-bottom:1px solid rgba(0,0,0,.06); }
section[id], [id].section{ scroll-margin-top:calc(var(--nav-h) + 14px); }
.section-mark{ position:relative; }
.section-mark:before{
  content:""; position:absolute; inset:-8px;
  border:2px dashed rgba(0,0,0,.08); border-radius:12px;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.section-mark.section-focus:before{ opacity:1; }

/* ========= Accesibilidad ========= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}