/* ===========================================================
   PIRCA PERÚ — tema «vial» para las páginas interiores
   (industrial, familiar, privacidad, 404)
   Se carga DESPUÉS de estilos.css y solo actúa con body.vial.
   Mismos colores y tipografía que la portada, sin tocar el
   marcado ni el formulario.
   =========================================================== */

@font-face{
  font-family:"Archivo";
  src:url("/assets/fonts/archivo.woff2") format("woff2");
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
}

body.vial{
  --tinta:#262B31;
  --tinta-suave:#5A626C;
  --linea:#D3D8DE;
  --papel-2:#EEF0F2;
  --amarillo:#FF6A13;          /* aquí es el naranja cono: acción */
  --amarillo-oscuro:#B84300;
  --acento:#B84300;
  --radio:6px;
  --sombra:none;
  --ancho:1080px;
  --verde:#0A7B4F;
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-variant-numeric:tabular-nums;
  background:#fff;
}
body.vial .env{padding-left:clamp(16px,4vw,48px);padding-right:clamp(16px,4vw,48px)}
body.vial ::selection{background:#FF6A13;color:#111}
body.vial :focus-visible{outline:3px solid #FF6A13;outline-offset:3px}

/* ---------- tipografía ---------- */
body.vial h1,body.vial h2,body.vial h3{font-stretch:108%;letter-spacing:-.02em}
body.vial h2{font-size:clamp(1.55rem,3vw,2.2rem);font-weight:800;font-stretch:112%;margin-top:0;max-width:24ch}
body.vial h3{font-size:1.15rem;font-weight:750}

/* ---------- cabecera ---------- */
body.vial .top{background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
body.vial .marca svg path:first-child{fill:#262B31}
body.vial .hamb{border-radius:6px}

/* ---------- hero claro, con la franja de piedra seca ---------- */
body.vial .hero{
  background:#fff;color:var(--tinta);
  padding:clamp(40px,6vw,88px) 0 clamp(36px,5vw,64px);
  position:relative;
}
body.vial .hero h1{
  color:var(--tinta);font-size:clamp(2.2rem,5.6vw,4.6rem);font-weight:800;font-stretch:118%;
  line-height:1.03;letter-spacing:-.03em;max-width:15ch;margin-bottom:18px;
}
body.vial .hero p{color:var(--tinta-suave);font-size:clamp(1.05rem,1.5vw,1.22rem);max-width:52ch}
body.vial .hero .kicker{
  text-transform:none;letter-spacing:0;font-size:1rem;font-weight:700;
  color:var(--amarillo-oscuro);margin-bottom:14px;
}
body.vial .hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='36'%3E%3Cg fill='%23E1E5E9'%3E%3Crect x='0' y='0' width='92' height='16' rx='3'/%3E%3Crect x='-44' y='18' width='92' height='16' rx='3'/%3E%3Crect x='52' y='18' width='92' height='16' rx='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size:96px 36px;border-top:1px solid var(--linea);
}
body.vial .hero .env{padding-bottom:36px}
body.vial .hero + main .bloque:first-of-type{margin-top:36px}

/* ---------- bloques y cifras ---------- */
body.vial .bloque{padding-top:44px;margin-top:56px}
body.vial .cifras{gap:clamp(14px,3vw,36px);margin:30px 0}
body.vial .cifra{
  border:0;border-top:3px solid var(--tinta);border-radius:0;background:transparent;
  text-align:left;padding:12px 0 0;
}
body.vial .cifra b{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;font-stretch:112%;letter-spacing:-.025em}
body.vial .cifra span{font-size:.92rem;margin-top:6px}

/* ---------- avisos, tarjetas y tablas ---------- */
body.vial .aviso{border-left:4px solid #FF6A13;background:var(--papel-2);border-radius:0 6px 6px 0}
body.vial .aviso a{color:var(--tinta);font-weight:700}
body.vial .figuras figure,
body.vial .equipo,
body.vial .form,
body.vial .camaras li,
body.vial .sonda{border-radius:6px;box-shadow:none}
body.vial .equipo.destaca{border:2px solid #FF6A13}
body.vial .equipo .monto{font-size:2rem;font-weight:800;font-stretch:110%}
body.vial .equipo .sello{text-transform:none;letter-spacing:0;font-size:.8rem;border-radius:4px}
body.vial .equipo li::before,body.vial .incluye li:before{background:#FF6A13}
body.vial .tabla th{background:var(--papel-2)}
body.vial .tabla .si{color:var(--verde)}
body.vial .figuras .rotulo,
body.vial .paso-rotulo,
body.vial .menu .grupo,
body.vial .exito .luego b,
body.vial .sonda .etiqueta{text-transform:none;letter-spacing:0;font-size:.82rem}
body.vial .sonda .etiqueta{background:var(--papel-2);color:var(--tinta)}

/* ---------- botones y formularios ---------- */
body.vial .btn{border-radius:6px;color:#16181B;transition:background .2s ease, transform .2s ease}
body.vial .btn:hover{filter:none;background:#FF7E33;transform:translateY(-1px)}
body.vial .btn.linea{background:transparent;border:1.5px solid var(--tinta);color:var(--tinta)}
body.vial .btn.linea:hover{background:var(--papel-2);transform:none}
body.vial .campo input,body.vial .campo select,body.vial .sonda input[type=email]{border-radius:6px}
body.vial .campo input:focus,body.vial .campo select:focus{outline:2px solid #FF6A13;border-color:transparent}
body.vial .progreso span{background:#FF6A13}
body.vial .exito .tic{background:#E3F4EC;color:var(--verde)}
body.vial .demo{background:#FFF1E6;border-color:#FFD2B0;border-radius:6px}
body.vial .detalle summary::after{color:var(--amarillo-oscuro)}

/* ---------- pie y barra ---------- */
body.vial footer{background:var(--papel-2);border-top:1px solid var(--linea);margin-top:72px}
body.vial .barra{background:rgba(255,255,255,.96)}
body.vial .barra .btn.linea{background:transparent}
@media(min-width:900px){body.vial .barra{display:none}}

@media(max-width:480px){
  body.vial .hero h1{font-size:2.1rem}
  body.vial .hero{padding:36px 0 28px}
}
@media (prefers-reduced-motion: reduce){body.vial .btn{transition:none}}