/*
Theme Name: Volppro Safety
Description: Tema independiente para el catalogo B2B de EPP Volppro. Portada, catalogo, filtros y cotizacion por codigo propio, sin plugins de pago.
Author: Volppro
Version: 1.0
*/

:root{
  --vp-navy:#071A2F;
  --vp-navy-900:#04101D;
  --vp-blue:#1560E5;
  --vp-blue-light:#3A82FF;
  --vp-gray:#5A6473;
  --vp-line:#E4E7EB;
  --vp-bg:#F4F5F7;
  --vp-title:'Barlow Condensed', Helvetica, Arial, sans-serif;
  --vp-body:'Barlow', Helvetica, Arial, sans-serif;
  --vp-mono:'IBM Plex Mono', monospace;
}

/* ---- base ---- */
.vp body,body{font-family:var(--vp-body);color:#1E2A38}
.vp-wrap{max-width:1440px;margin:0 auto;padding:0 48px}
.vp-title{font-family:var(--vp-title);font-weight:700;text-transform:uppercase;line-height:1;color:var(--vp-navy);margin:0}
.vp-eyebrow{font-family:var(--vp-mono);font-size:11px;letter-spacing:.14em;color:#8A93A0}
.vp-btn{display:inline-block;background:var(--vp-blue);color:#fff;font-family:var(--vp-title);font-weight:700;font-size:15px;letter-spacing:.1em;text-transform:uppercase;padding:15px 24px;border:0;cursor:pointer;text-decoration:none}
.vp-btn:hover{background:#0B3FA0;color:#fff}
.vp-btn--ghost{background:transparent;color:var(--vp-navy);border:1px solid #C9CFD8}
.vp-btn--ghost:hover{background:var(--vp-bg);color:var(--vp-navy)}

/* ---- header / footer ---- */
.vp-header{display:flex;align-items:center;gap:40px;height:76px;border-bottom:1px solid var(--vp-line)}
.vp-logo{font-family:var(--vp-title);font-weight:700;font-size:24px;color:var(--vp-navy);text-decoration:none}
.vp-logo span{color:var(--vp-blue)}
.vp-nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-family:var(--vp-title);font-size:15px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.vp-nav a{color:var(--vp-navy);text-decoration:none}
.vp-nav a:hover{color:var(--vp-blue)}
.vp-header__end{margin-left:auto;display:flex;align-items:center;gap:18px}
.vp-footer{background:var(--vp-navy-900);color:#6C87A8;font-family:var(--vp-mono);font-size:12px;padding:30px 0;margin-top:64px}
.vp-footer a{color:#8FA8C6;text-decoration:none}

/* ---- catalogo ---- */
.vp-catalog{display:grid;grid-template-columns:270px 1fr;gap:0}
.vp-facets{border-right:1px solid var(--vp-line);padding:26px 28px 60px}
.vp-facet{margin-bottom:26px}
.vp-facet h3{font-family:var(--vp-title);font-size:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--vp-navy);padding-bottom:8px;border-bottom:1px solid var(--vp-line);margin:0 0 10px}
.vp-facet label{display:flex;align-items:center;gap:10px;font-size:14px;color:#3F4954;padding:4px 0;cursor:pointer}
.vp-facet label span{margin-left:auto;font-family:var(--vp-mono);font-size:11px;color:#8A93A0}
.vp-results{padding:26px 0 60px 48px}
.vp-results__bar{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--vp-line);font-family:var(--vp-mono);font-size:12px;color:var(--vp-gray)}
.vp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
.vp-grid--4{grid-template-columns:repeat(4,1fr)}
.vp-card{border:1px solid var(--vp-line);display:flex;flex-direction:column;background:#fff}
.vp-card__img{aspect-ratio:4/3;background:var(--vp-bg);display:flex;align-items:center;justify-content:center;overflow:hidden}
.vp-card__img img{width:100%;height:100%;object-fit:cover}
.vp-card__body{padding:16px;display:flex;flex-direction:column;gap:6px;border-top:3px solid var(--vp-blue)}
.vp-card__sku{font-family:var(--vp-mono);font-size:11px;letter-spacing:.1em;color:#8A93A0}
.vp-card__name{font-family:var(--vp-title);font-size:19px;font-weight:700;text-transform:uppercase;line-height:1.1;color:var(--vp-navy);text-decoration:none}
.vp-card__meta{font-size:13px;color:var(--vp-gray)}
.vp-card__actions{display:flex;gap:8px;margin-top:8px}
.vp-chip{background:#EAF0FC;color:var(--vp-blue);font-size:13px;font-weight:600;padding:7px 12px;text-decoration:none}

/* ---- ficha ---- */
.vp-product{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;padding:24px 0 48px}
.vp-gallery__main{aspect-ratio:1/1;background:var(--vp-bg);display:flex;align-items:center;justify-content:center;overflow:hidden}
.vp-gallery__main img{width:100%;height:100%;object-fit:contain}
.vp-gallery__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.vp-gallery__thumbs img{width:100%;aspect-ratio:1/1;object-fit:cover;border:1px solid var(--vp-line)}
.vp-norms{display:flex;gap:10px;flex-wrap:wrap}
.vp-norms span{border:1px solid #C9CFD8;font-family:var(--vp-mono);font-size:12px;color:#3F4954;padding:9px 14px}
.vp-specs{width:100%;border-collapse:collapse;font-size:14px;max-width:900px}
.vp-specs th{text-align:left;width:240px;font-family:var(--vp-mono);font-size:11px;letter-spacing:.1em;color:#8A93A0;font-weight:400}
.vp-specs th,.vp-specs td{padding:12px 0;border-bottom:1px solid var(--vp-line)}
.vp-sizes{display:flex;gap:8px;flex-wrap:wrap}
.vp-sizes label{border:1px solid #C9CFD8;font-size:14px;padding:11px 18px;color:#3F4954;cursor:pointer}
.vp-sizes input{display:none}
.vp-sizes input:checked + span{font-weight:700;color:var(--vp-navy)}

/* ---- hero / secciones oscuras ---- */
.vp-dark{background:var(--vp-navy);color:#fff}
.vp-dark .vp-title{color:#fff}
.vp-hero{display:grid;grid-template-columns:1fr 1fr;align-items:center}
.vp-hero__text{padding:88px 48px}
.vp-hero__media{min-height:540px;background:#0E2744;overflow:hidden}
.vp-hero__media img{width:100%;height:100%;object-fit:cover}

/* ---- cotizacion ---- */
.vp-quote{display:grid;grid-template-columns:1.5fr 1fr;gap:44px;padding:48px 0 64px}
.vp-quote__row{display:grid;grid-template-columns:88px 1fr 130px 90px 30px;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--vp-line)}
.vp-quote__side{background:var(--vp-bg);padding:32px}
.vp-field{display:block;margin-bottom:16px}
.vp-field span{display:block;font-family:var(--vp-mono);font-size:10px;letter-spacing:.14em;color:#8A93A0;margin-bottom:4px}
.vp-field input,.vp-field textarea,.vp-field select{width:100%;padding:11px;border:1px solid #D8DCE2;background:#fff;font-family:var(--vp-body);font-size:15px;box-sizing:border-box}
.vp-notice{background:#EAF0FC;color:#0B3FA0;padding:14px 16px;font-size:15px;margin:16px 0}

/* ---- responsive ---- */
@media (max-width:1024px){
  .vp-wrap{padding:0 24px}
  .vp-catalog,.vp-product,.vp-quote,.vp-hero{grid-template-columns:1fr}
  .vp-facets{border-right:0;border-bottom:1px solid var(--vp-line)}
  .vp-results{padding:26px 0 40px}
  .vp-grid,.vp-grid--4{grid-template-columns:repeat(2,1fr)}
  .vp-hero__text{padding:48px 0}
  .vp-header{height:auto;flex-wrap:wrap;gap:16px;padding:16px 0}
}
@media (max-width:600px){
  .vp-grid,.vp-grid--4{grid-template-columns:1fr}
  .vp-quote__row{grid-template-columns:64px 1fr;row-gap:8px}
}


/* ---- portada ---- */
.vp-hero__aside{position:absolute;right:40px;top:64px;width:230px;background:rgba(4,14,26,.86);border:1px solid #1E3653}
.vp-hero__aside div{padding:16px 18px;border-bottom:1px solid #1E3653;font-family:var(--vp-title);font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.vp-hero__aside div:last-child{border-bottom:0}
.vp-sectores{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#1E3653}
.vp-sectores a{background:var(--vp-navy);padding:26px 20px;font-family:var(--vp-title);font-size:19px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;text-decoration:none}
.vp-sectores a:hover{background:#0E2744;color:#fff}
.vp-pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.vp-paso{padding-top:16px;border-top:1px solid #C9CFD8}
.vp-paso b{display:block;font-family:var(--vp-title);font-size:22px;font-weight:700;text-transform:uppercase;color:var(--vp-navy);margin:6px 0 4px}
.vp-normas-fila{display:flex;gap:12px;flex-wrap:wrap;font-family:var(--vp-mono);font-size:13px;color:var(--vp-gray)}
.vp-normas-fila span{border:1px solid #C9CFD8;padding:12px 18px}
.vp-cta{display:grid;grid-template-columns:1fr 1fr}
.vp-cta__b{background:var(--vp-blue);color:#fff;padding:52px 48px}
.vp-cta__b .vp-title{color:#fff}
.vp-placeholder{background:repeating-linear-gradient(135deg,#EAECEF 0 12px,#F4F5F7 12px 24px);display:flex;align-items:center;justify-content:center;font-family:var(--vp-mono);font-size:12px;color:#8A93A0;text-align:center;padding:20px}
.vp-dark .vp-placeholder{background:repeating-linear-gradient(135deg,#0E2744 0 12px,#122E4F 12px 24px);color:#6C87A8}
.vp-post{border-bottom:1px solid var(--vp-line);padding:26px 0}
.vp-post h2{font-family:var(--vp-title);font-size:30px;font-weight:700;text-transform:uppercase;margin:6px 0}
.vp-post h2 a{color:var(--vp-navy);text-decoration:none}
.vp-entry{max-width:760px;margin:0 auto;padding:48px 0 64px}
.vp-entry h1{font-family:var(--vp-title);font-size:clamp(38px,5vw,64px);font-weight:700;text-transform:uppercase;line-height:1;color:var(--vp-navy);margin:0 0 18px}
.vp-entry h2,.vp-entry h3{font-family:var(--vp-title);text-transform:uppercase;color:var(--vp-navy)}
.vp-entry p{font-size:17px;line-height:1.65;color:#1E2A38}
@media (max-width:1024px){
  .vp-sectores,.vp-pasos{grid-template-columns:repeat(2,1fr)}
  .vp-cta{grid-template-columns:1fr}
  .vp-hero__aside{position:static;width:auto;margin:24px 0 0}
}