/*
Theme Name: PSI Theme
Description: Tema para PSI Distribuciones
Version: 1.0
*/

/* --- bloque 1 --- */
:root{
  --verde:#0E8A4A; --verde-osc:#0A6B3A; --verde-claro:#E7F4EC;
  --rojo:#E01B1B; --rojo-osc:#B51414; --negro:#1A1A1A;
  --gris:#F5F7F6; --gris-500:#5b6470; --blanco:#fff;
  --radio:16px; --sombra:0 12px 30px rgba(15,30,22,.12);
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Roboto,Arial,sans-serif;color:#22282e;line-height:1.65;background:#fff}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:var(--verde-osc)}
.contenedor{max-width:1240px;margin:0 auto;padding:0 22px}
.btn{display:inline-block;padding:14px 30px;border-radius:50px;font-weight:700;font-size:16px;transition:.25s;border:2px solid transparent;cursor:pointer}
.btn-verde{background:var(--verde);color:#fff}
.btn-verde:hover{background:var(--verde-osc)}
.btn-rojo{background:var(--rojo);color:#fff}
.btn-rojo:hover{background:var(--rojo-osc)}
.btn-borde{border-color:#fff;color:#fff}
.btn-borde:hover{background:#fff;color:var(--negro)}
.btn-linea{border-color:var(--verde);color:var(--verde-osc)}
.btn-linea:hover{background:var(--verde);color:#fff}

/* header */
header{position:sticky;top:0;z-index:60;background:var(--negro);box-shadow:0 2px 18px rgba(0,0,0,.28)}
header .contenedor{display:flex;align-items:center;gap:26px;height:88px}
.logo img{height:56px;width:auto;border-radius:10px}
nav{margin-left:auto}
nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;align-items:center}
nav a{color:#e9eeeb;font-weight:600;font-size:15px}
nav a:hover{color:#8fe0a6}
nav .destacado{background:var(--rojo);color:#fff!important;padding:11px 24px;border-radius:50px}
nav .destacado:hover{background:var(--rojo-osc)}

/* slider */
.slider{position:relative;height:min(74vh,620px);min-height:440px;overflow:hidden;background:#111}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .9s ease;display:flex;align-items:flex-end}
.slide.activo{opacity:1}
.slide::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,20,14,.88) 0%,rgba(10,20,14,.55) 45%,rgba(10,20,14,.15) 100%)}
.slide .texto{position:relative;z-index:2;color:#fff;padding:0 0 62px;max-width:640px}
.slide .texto h2{font-size:clamp(30px,4.4vw,52px);line-height:1.08;margin:0 0 14px}
.slide .texto p{font-size:18.5px;color:#dbe7de;margin:0 0 26px}
.slide .texto .btn{padding:13px 28px}
.slider .puntos{position:absolute;bottom:22px;left:0;right:0;z-index:3;display:flex;gap:9px;justify-content:center}
.slider .puntos button{width:11px;height:11px;border-radius:50%;border:2px solid rgba(255,255,255,.75);background:transparent;cursor:pointer;padding:0}
.slider .puntos button.activo{background:#fff}
.slider .flecha{position:absolute;top:50%;transform:translateY(-50%);z-index:3;background:rgba(0,0,0,.35);color:#fff;border:none;width:46px;height:46px;border-radius:50%;font-size:20px;cursor:pointer}
.slider .flecha:hover{background:rgba(0,0,0,.6)}
.slider .ant{left:18px}
.slider .sig{right:18px}

/* botón ancho bajo el slider */
.barra-btn{background:var(--verde);text-align:center}
.barra-btn a{display:block;padding:20px 22px;color:#fff;font-weight:800;font-size:clamp(15px,1.6vw,19px);letter-spacing:.4px}
.barra-btn a:hover{background:var(--verde-osc)}

/* tira */
.tira{background:#111;color:#cfe6d6;padding:14px 0;font-size:14.6px}
.tira .contenedor{display:flex;gap:32px;justify-content:center;flex-wrap:wrap}
.tira span::before{content:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%238fe0a6%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E");display:inline-block;width:14px;height:14px;color:transparent}

/* secciones */
section{padding:78px 0}
.gris{background:var(--gris)}
.enc{text-align:center;max-width:780px;margin:0 auto 46px}
.enc .kicker{color:var(--verde);font-weight:800;letter-spacing:2.6px;font-size:12.5px;text-transform:uppercase}
.enc h2{font-size:clamp(25px,3.2vw,38px);margin:10px 0 12px;color:var(--negro)}
.enc p{color:var(--gris-500);font-size:17px;margin:0}

/* productos: 6 en una sola fila */
.productos{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.producto{background:#fff;border-radius:14px;box-shadow:var(--sombra);overflow:hidden;display:flex;flex-direction:column;transition:.3s;border:1px solid #eef2f0}
.producto:hover{transform:translateY(-7px);box-shadow:0 20px 42px rgba(15,30,22,.18)}
.producto .img{aspect-ratio:1/1;background:var(--gris);overflow:hidden}
.producto .img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.producto:hover .img img{transform:scale(1.07)}
.producto .cuerpo{padding:16px;display:flex;flex-direction:column;gap:7px;flex:1}
.producto h3{margin:0;font-size:15.5px;color:var(--negro);line-height:1.3}
.producto p{margin:0;font-size:13.4px;color:var(--gris-500);flex:1}
.producto a{margin-top:8px;font-weight:700;font-size:13.4px;color:var(--verde-osc)}

/* segmentos */
.segmentos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.segmento{background:#fff;border-radius:var(--radio);padding:30px 26px;box-shadow:var(--sombra);border-top:4px solid var(--verde);text-align:center}
.segmento .ico{font-size:40px}
.segmento h3{margin:12px 0 8px;font-size:19px;color:var(--negro)}
.segmento p{margin:0;color:var(--gris-500);font-size:14.8px}
.segmento a{display:inline-block;margin-top:14px;font-weight:700;font-size:14px}

/* distribuidores */
.dist{background:linear-gradient(120deg,#0F1512 0%,#123a25 55%,var(--verde) 130%);color:#fff}
.dist .contenedor{display:grid;grid-template-columns:1fr 1.05fr;gap:44px;align-items:center}
.dist h2{font-size:clamp(26px,3.3vw,40px);margin:0 0 14px;line-height:1.12}
.dist p{color:#d6e4da;font-size:17px;margin:0 0 24px}
.dist ul{list-style:none;padding:0;margin:0 0 28px}
.dist li{margin:10px 0;color:#e8f2ec}
.dist li::before{content:"● ";color:#8fe0a6}
.dist img{border-radius:var(--radio);box-shadow:0 22px 50px rgba(0,0,0,.5)}

/* beneficios */
.beneficios{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.beneficio{text-align:center;padding:26px 20px}
.beneficio .ico{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:var(--verde-claro);display:flex;align-items:center;justify-content:center;font-size:28px}
.beneficio h4{margin:0 0 6px;font-size:16.5px;color:var(--negro)}
.beneficio p{margin:0;font-size:14.5px;color:var(--gris-500)}

/* cta */
.cta{background:var(--verde);color:#fff;text-align:center;padding:70px 0}
.cta h2{font-size:clamp(24px,3vw,36px);margin:0 0 12px}
.cta p{color:#e2f4e8;margin:0 0 28px;font-size:17px}
.cta .acciones{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.cta .datos{margin-top:26px;font-size:15.5px;color:#e2f4e8}

/* footer */
footer{background:#111;color:#a9b4ae;padding:56px 0 28px;font-size:15px}
footer .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:36px}
footer h4{color:#fff;font-size:16px;margin:0 0 14px}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin:9px 0}
footer a{color:#a9b4ae}
footer a:hover{color:#fff}
footer .logo img{height:56px;border-radius:10px;margin-bottom:12px}
footer .legal{font-size:13.8px;color:#8b958f;margin-top:10px}
footer .copy{border-top:1px solid rgba(255,255,255,.1);margin-top:38px;padding-top:20px;text-align:center;font-size:13.5px;color:#7c8781}

@media(max-width:1100px){.productos{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){
  .dist .contenedor{grid-template-columns:1fr}
  header .contenedor{height:auto;flex-wrap:wrap;padding:12px 22px}
  nav ul{flex-wrap:wrap;gap:14px}
  footer .cols{grid-template-columns:1fr}
  .slider{height:auto;min-height:520px}
}
@media(max-width:620px){.productos{grid-template-columns:repeat(2,1fr)}}

/* --- bloque 2 --- */
.servicios-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.servicio{background:#fff;border-radius:var(--radio);padding:28px 24px;box-shadow:var(--sombra);border-left:4px solid var(--verde)}
.servicio .s-ico{font-size:32px;display:block;margin-bottom:10px}
.servicio h3{margin:0 0 8px;font-size:18px;color:var(--negro)}
.servicio p{margin:0;font-size:14.8px;color:var(--gris-500)}
.nos-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.nos-grid img{border-radius:var(--radio);box-shadow:var(--sombra)}
.nos-lista{list-style:none;padding:0;margin:18px 0 24px}
.nos-lista li{margin:9px 0;color:#3a434d}
.nos-lista li::before{content:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230E8A4A%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E");display:inline-block;width:15px;height:15px;color:transparent;font-weight:700}
.form-cot{max-width:520px;margin:0 auto;display:grid;gap:12px;text-align:left}
.form-cot input,.form-cot select,.form-cot textarea{
  width:100%;padding:14px 16px;border-radius:12px;border:none;font-size:15.5px;font-family:inherit;background:#fff;color:#22282e}
.form-cot textarea{resize:vertical}
.form-cot input:focus,.form-cot select:focus,.form-cot textarea:focus{outline:3px solid rgba(255,255,255,.5)}
@media(max-width:900px){.servicios-grid{grid-template-columns:1fr}.nos-grid{grid-template-columns:1fr}}

/* --- bloque 3 --- */
.wa-flotante{position:fixed;right:22px;bottom:22px;z-index:80;background:#25D366;width:60px;height:60px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,0,0,.32);transition:.25s}
.wa-flotante:hover{transform:scale(1.08);background:#1ebe5a}
@media(max-width:620px){.wa-flotante{width:54px;height:54px;right:16px;bottom:16px}}

/* --- bloque 4 --- */
.segmento{padding:0 0 26px;overflow:hidden;text-align:left}
.segmento .seg-img{aspect-ratio:16/10;overflow:hidden;margin-bottom:18px;background:var(--gris)}
.segmento .seg-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.segmento:hover .seg-img img{transform:scale(1.06)}
.segmento h3,.segmento p,.segmento a{margin-left:24px;margin-right:24px}
.servicio{padding:0 0 24px;overflow:hidden}
.servicio .s-img{aspect-ratio:16/10;overflow:hidden;margin-bottom:16px;background:var(--gris)}
.servicio .s-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.servicio:hover .s-img img{transform:scale(1.06)}
.servicio h3,.servicio p{margin-left:22px;margin-right:22px}
/* fondo tipo papel tapiz difuminado */
#servicios{position:relative;overflow:hidden}
#servicios::before{
  content:"";position:absolute;inset:0;
  background-image:url('http://psi.extintorescoinseg.com/wp-content/uploads/2026/10/papel-tapiz.webp');background-size:cover;background-position:center;
  opacity:.5;z-index:0
}
#servicios::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.88));z-index:1}
#servicios .contenedor{position:relative;z-index:2}

/* --- whatsapp flotante --- */
<style>
.wa-flotante{position:fixed;right:22px;bottom:22px;z-index:80;background:#25D366;width:60px;height:60px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,0,0,.32);transition:.25s}
.wa-flotante:hover{transform:scale(1.08);background:#1ebe5a}
@media(max-width:620px){.wa-flotante{width:54px;height:54px;right:16px;bottom:16px}}
</style>