/* ===========================================================
   PROTECTOLOCK — Design system
   Paleta: A · Acero y Alerta
   Tipografia: Barlow Condensed (titulos) + IBM Plex Sans (texto)
   =========================================================== */

:root{
  /* Marca */
  --pl-primary:      #0B2540;  /* azul acero (navbar, footer, fondos oscuros) */
  --pl-primary-2:    #123458;  /* navy mas claro, para degradados/hover */
  --pl-secondary:    #3D5A73;  /* azul acero secundario */
  --pl-accent:       #E8590C;  /* naranja — CTAs y acentos */
  --pl-accent-dark:  #C24A08;  /* naranja hover */
  --pl-accent-tint:  #FDECE1;  /* naranja muy claro, fondos de badges */

  /* Neutros */
  --pl-surface:      #F3F5F7;  /* fondo de secciones claras */
  --pl-surface-alt:  #FFFFFF;  /* tarjetas */
  --pl-text:         #101820;
  --pl-muted:        #55606B;
  --pl-border:       #DDE3E8;

  /* Semantico */
  --pl-ok:           #2E7D4F;
  --pl-ok-tint:      #E7F3EC;

  --pl-shadow: 0 1px 2px rgba(11,37,64,.06), 0 10px 28px rgba(11,37,64,.08);
  --pl-shadow-sm: 0 1px 2px rgba(11,37,64,.08);
  --pl-radius: 10px;
  --pl-radius-sm: 6px;
}

/* ---------- Base ---------- */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  font-family:'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color:var(--pl-text);
  background:var(--pl-surface-alt);
  line-height:1.6;
}

h1,h2,h3,h4,.font-display{
  font-family:'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-weight:700;
  letter-spacing:.01em;
  text-wrap:balance;
  color:var(--pl-primary);
}

.text-mono, .spec-code, code{
  font-family:'IBM Plex Mono', ui-monospace, monospace;
}

a{ color:var(--pl-secondary); text-decoration:none; }
a:hover{ color:var(--pl-accent); }

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--pl-accent);
  font-weight:600;
  display:inline-block;
  margin-bottom:.6rem;
}

.section{ padding:4.5rem 0; }
.section-sm{ padding:3rem 0; }
@media (max-width: 767px){
  .section{ padding:3rem 0; }
}
.bg-navy{ background:var(--pl-primary); color:#fff; }
.bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy h4{ color:#fff; }
.bg-surface{ background:var(--pl-surface); }
.text-muted-pl{ color:var(--pl-muted); }

/* ---------- Buttons ---------- */
.btn-accent{
  background:var(--pl-accent);
  border-color:var(--pl-accent);
  color:#fff;
  font-weight:600;
  padding:.7rem 1.5rem;
  border-radius:var(--pl-radius-sm);
}
.btn-accent:hover, .btn-accent:focus{
  background:var(--pl-accent-dark);
  border-color:var(--pl-accent-dark);
  color:#fff;
}
.btn-outline-pl{
  border:1.5px solid rgba(255,255,255,.55);
  color:#fff;
  font-weight:600;
  padding:.65rem 1.45rem;
  border-radius:var(--pl-radius-sm);
  background:transparent;
}
.btn-outline-pl:hover{
  background:rgba(255,255,255,.12);
  color:#fff;
  border-color:#fff;
}
.btn-outline-navy{
  border:1.5px solid var(--pl-primary);
  color:var(--pl-primary);
  font-weight:600;
  padding:.65rem 1.45rem;
  border-radius:var(--pl-radius-sm);
  background:transparent;
}
.btn-outline-navy:hover{
  background:var(--pl-primary);
  color:#fff;
}
.btn-whatsapp{
  background:#1FA855;
  color:#fff;
  font-weight:600;
  border-radius:var(--pl-radius-sm);
  border:none;
}
.btn-whatsapp:hover{ background:#188A44; color:#fff; }

/* ---------- Navbar ---------- */
.pl-navbar{
  background:var(--pl-primary);
  padding:.7rem 0;
}
.pl-navbar .navbar-brand{
  display:flex;
  align-items:center;
  gap:.55rem;
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700;
  font-size:1.5rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#fff;
}
.pl-navbar .navbar-brand svg{ width:30px; height:30px; color:var(--pl-accent); }
.pl-logo{ height:34px; width:auto; display:block; }
.pl-footer .navbar-brand .pl-logo{ height:30px; }
.pl-navbar .nav-link{
  color:rgba(255,255,255,.82);
  font-weight:500;
  padding:.5rem 1rem !important;
}
.pl-navbar .nav-link.active,
.pl-navbar .nav-link:hover{ color:#fff; }
.pl-navbar .nav-cta{
  background:var(--pl-accent);
  color:#fff !important;
  border-radius:var(--pl-radius-sm);
  padding:.5rem 1.1rem !important;
  margin-left:.4rem;
  font-weight:600;
}
.pl-navbar .navbar-toggler{
  border-color:rgba(255,255,255,.35);
}
.pl-navbar .navbar-toggler-icon{
  filter: invert(1) grayscale(100%) brightness(200%);
}
.pl-topbar{
  background:var(--pl-primary-2);
  color:rgba(255,255,255,.85);
  font-size:.82rem;
  padding:.4rem 0;
}
.pl-topbar a{ color:rgba(255,255,255,.85); }
.pl-topbar a:hover{ color:var(--pl-accent); }
.pl-topbar .divider{ opacity:.3; margin:0 .6rem; }

/* ---------- Hero ---------- */
.pl-hero{
  background:
    radial-gradient(60% 90% at 85% 0%, rgba(232,89,12,.18), transparent 60%),
    linear-gradient(135deg, var(--pl-primary), var(--pl-primary-2) 55%, var(--pl-secondary));
  color:#fff;
  padding:5.5rem 0;
}
.pl-hero h1{
  color:#fff;
  font-size:clamp(2.2rem, 4.4vw, 3.4rem);
  text-transform:uppercase;
  margin-bottom:1.1rem;
}
.pl-hero p.lead{
  color:rgba(255,255,255,.85);
  font-size:1.15rem;
  max-width:46ch;
}
.pl-hero-sub{
  background:var(--pl-primary-2);
  color:#fff;
  padding:2.75rem 0;
}
.pl-hero-sub h1{ color:#fff; font-size:clamp(2rem,3.6vw,2.75rem); }
.pl-hero-sub p{ color:rgba(255,255,255,.82); max-width:60ch; }
.breadcrumb-pl{
  font-family:'IBM Plex Mono', monospace;
  font-size:.75rem;
  letter-spacing:.04em;
  color:rgba(255,255,255,.6);
}
.breadcrumb-pl a{ color:rgba(255,255,255,.75); }
.breadcrumb-pl a:hover{ color:var(--pl-accent); }

/* ---------- Placeholder blocks (para reemplazar por fotos reales) ---------- */
.img-placeholder{
  background:
    repeating-linear-gradient(135deg, rgba(11,37,64,.05) 0 10px, transparent 10px 20px),
    var(--pl-surface);
  border:1px dashed var(--pl-border);
  border-radius:var(--pl-radius);
  color:var(--pl-muted);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:.5rem;
  min-height:220px;
  padding:1.5rem;
}
.img-placeholder svg{ width:34px; height:34px; opacity:.55; }
.img-placeholder span{ font-size:.8rem; }
.img-placeholder small{ font-size:.7rem; opacity:.75; }

/* ---------- Product / value cards ---------- */
.pl-card{
  background:var(--pl-surface-alt);
  border:1px solid var(--pl-border);
  border-radius:var(--pl-radius);
  padding:1.75rem;
  height:100%;
  box-shadow:var(--pl-shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease;
}
.pl-card:hover{ transform:translateY(-3px); box-shadow:var(--pl-shadow); }
.pl-icon-badge{
  width:52px; height:52px;
  border-radius:10px;
  background:var(--pl-accent-tint);
  color:var(--pl-accent);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1rem;
}
.pl-icon-badge svg{ width:26px; height:26px; }

.hero-photo,
.content-photo{
  width:100%;
  height:auto;
  display:block;
  border-radius:var(--pl-radius);
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.content-photo{ box-shadow:var(--pl-shadow); }

.product-shot{
  background:var(--pl-surface);
  border:1px solid var(--pl-border);
  border-radius:var(--pl-radius);
  padding:1.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:300px;
}
.product-shot img{ max-width:100%; max-height:280px; object-fit:contain; }
.product-shot-sm{
  background:#fff;
  border:1px solid var(--pl-border);
  border-radius:var(--pl-radius-sm);
  padding:.75rem;
  display:flex; align-items:center; justify-content:center;
  min-height:140px;
}
.product-shot-sm img{ max-width:100%; max-height:120px; object-fit:contain; }
.map-embed{
  border-radius:var(--pl-radius);
  overflow:hidden;
  border:1px solid var(--pl-border);
  box-shadow:var(--pl-shadow-sm);
}
.map-embed iframe{
  width:100%;
  height:320px;
  display:block;
}
.model-tag{
  font-family:'IBM Plex Mono', monospace;
  font-size:.75rem;
  letter-spacing:.05em;
  color:var(--pl-secondary);
  text-transform:uppercase;
}
.pl-card h3{ font-size:1.3rem; margin-bottom:.5rem; }
.pl-card p{ color:var(--pl-muted); font-size:.95rem; margin-bottom:1rem; }

.product-card{
  background:var(--pl-surface-alt);
  border:1px solid var(--pl-border);
  border-radius:var(--pl-radius);
  overflow:hidden;
  height:100%;
  box-shadow:var(--pl-shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease;
  display:flex; flex-direction:column;
}
.product-card:hover{ transform:translateY(-3px); box-shadow:var(--pl-shadow); }
.product-card .body{ padding:1.35rem 1.35rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.product-card .spec-code{
  display:inline-block;
  background:var(--pl-surface);
  color:var(--pl-secondary);
  font-size:.72rem;
  padding:.2rem .5rem;
  border-radius:4px;
  margin-bottom:.5rem;
  width:fit-content;
}
.product-card h3{ font-size:1.15rem; margin-bottom:.4rem; }
.product-card p{ color:var(--pl-muted); font-size:.9rem; flex:1; }
.product-card .cat-tag{
  position:absolute;
  top:.75rem; left:.75rem;
  background:rgba(11,37,64,.85);
  color:#fff;
  font-size:.68rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:.25rem .55rem;
  border-radius:4px;
}
.product-card .thumb{ position:relative; }

/* ---------- Stats ---------- */
.pl-stat{ text-align:center; }
.pl-stat .num{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700;
  font-size:3rem;
  color:var(--pl-accent);
  line-height:1;
}
.pl-stat .label{ color:rgba(255,255,255,.8); font-size:.9rem; margin-top:.35rem; }

/* ---------- Certification level table ---------- */
.level-table{ width:100%; border-collapse:separate; border-spacing:0; }
.level-table th,.level-table td{
  padding:.85rem 1rem;
  border-bottom:1px solid var(--pl-border);
  vertical-align:top;
}
.level-table thead th{
  font-family:'IBM Plex Mono', monospace;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--pl-muted);
  border-bottom:2px solid var(--pl-primary);
}
.level-pill{
  display:inline-block;
  font-family:'IBM Plex Mono', monospace;
  font-weight:600;
  font-size:.82rem;
  padding:.2rem .55rem;
  border-radius:4px;
  background:var(--pl-primary);
  color:#fff;
}

/* ---------- Accordion (certificaciones / FAQ) ---------- */
.accordion-pl .accordion-button{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:600;
  font-size:1.1rem;
  color:var(--pl-primary);
  text-transform:uppercase;
  letter-spacing:.01em;
}
.accordion-pl .accordion-button:not(.collapsed){
  background:var(--pl-accent-tint);
  color:var(--pl-accent-dark);
  box-shadow:none;
}
.accordion-pl .accordion-button:focus{ box-shadow:0 0 0 .15rem rgba(232,89,12,.25); }
.accordion-pl .accordion-item{ border-color:var(--pl-border); }

/* ---------- Timeline (Nosotros) ---------- */
.pl-timeline{ border-left:2px solid var(--pl-border); padding-left:1.5rem; }
.pl-timeline .tl-item{ position:relative; padding-bottom:1.75rem; }
.pl-timeline .tl-item::before{
  content:'';
  position:absolute;
  left:-1.56rem; top:.3rem;
  width:12px; height:12px;
  border-radius:50%;
  background:var(--pl-accent);
  border:2px solid #fff;
  box-shadow:0 0 0 2px var(--pl-accent);
}
.pl-timeline .tl-year{ font-family:'IBM Plex Mono', monospace; color:var(--pl-accent); font-weight:600; font-size:.85rem; }

/* ---------- Footer ---------- */
.pl-footer{ background:var(--pl-primary); color:rgba(255,255,255,.75); padding:3.5rem 0 0; }
.pl-footer h5{ color:#fff; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-size:1.05rem; margin-bottom:1rem; }
.pl-footer a{ color:rgba(255,255,255,.72); }
.pl-footer a:hover{ color:var(--pl-accent); }
.pl-footer .socials a{
  width:36px; height:36px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  display:inline-flex; align-items:center; justify-content:center;
  margin-right:.5rem;
}
.pl-footer .socials a:hover{ background:var(--pl-accent); border-color:var(--pl-accent); }
.pl-footer .socials svg{ width:16px; height:16px; }
.pl-footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:2.5rem;
  padding:1.25rem 0;
  font-size:.82rem;
}

/* ---------- WhatsApp floating button ---------- */
.wa-float{
  position:fixed;
  right:1.25rem; bottom:1.25rem;
  z-index:1040;
  width:58px; height:58px;
  border-radius:50%;
  background:#1FA855;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.wa-float svg{ width:28px; height:28px; }
.wa-float:hover{ background:#188A44; color:#fff; }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; }
}

/* ---------- Product filter buttons ---------- */
.filter-btn{
  border:1px solid var(--pl-border);
  background:#fff;
  color:var(--pl-text);
  padding:.45rem 1.1rem;
  border-radius:999px;
  font-size:.85rem;
  font-weight:500;
}
.filter-btn.active,
.filter-btn:hover{
  background:var(--pl-primary);
  border-color:var(--pl-primary);
  color:#fff;
}

/* ---------- Forms ---------- */
.form-control, .form-select{
  border-color:var(--pl-border);
  padding:.65rem .9rem;
  border-radius:var(--pl-radius-sm);
}
.form-control:focus, .form-select:focus{
  border-color:var(--pl-secondary);
  box-shadow:0 0 0 .2rem rgba(61,90,115,.18);
}
label{ font-weight:600; font-size:.88rem; color:var(--pl-primary); }