/* ==========================================================================
   53 · Punto limpio
   Para organizaciones ambientales que prestan servicios: reciclaje, aseo,
   capacitación, limpieza y siembra. Sirve sin fotografía. Sale del logo: un mundo
   verde dentro de un círculo de flechas de reciclaje, dos verdes y una roja, con dos
   hojas encima. Verde hoja y verde monte de la marca, el rojo de la flecha solo como
   acento, y papel claro de fondo. Sofia Sans Condensed, condensada y en mayúsculas
   como las letras del logo, para títulos; Schibsted Grotesk para leer.
   Los colores del paquete (#00FF00 y #0000FF) no son los del logo y no aguantan
   texto: se usan los verdes y el rojo medidos en el logo.
   ========================================================================== */

:root{
  --papel:     #F3F6EE;
  --blanco:    #FFFFFF;
  --verde:     #1F6B2A;
  --verde-2:   #3E8E2A;
  --hoja:      #6DBE45;
  --monte:     #0F3A1C;
  --monte-2:   #16492A;
  --rojo:      #C2261B;
  --tinta:     #14261A;
  --tinta-2:   #3F5446;
  --gris:      #E4E4E4;
  --linea:     rgba(20,38,26,.13);
  --linea-clara: rgba(255,255,255,.2);
  --ease:cubic-bezier(.2,.8,.25,1);
  --r:18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip}
body{margin:0; background:var(--blanco); color:var(--tinta); line-height:1.7; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{margin:0; font-family:var(--f-titulo); font-weight:800; line-height:1.02; letter-spacing:-.005em}
h1 em, h2 em{font-style:normal; color:var(--verde-2)}
p{margin:0 0 1rem}
.blob{display:none !important}

.wrap{width:min(1180px,92vw); margin:0 auto}
.sec{padding:100px 0; position:relative}
.sec-head{max-width:700px; margin:0 auto 52px; text-align:center}
.sec-head h2{font-size:clamp(2.5rem,5vw,3.9rem); text-transform:uppercase; margin-bottom:14px}
.sec-head p{margin:0; color:var(--tinta-2)}
.eyebrow{display:inline-flex; align-items:center; gap:10px; text-transform:uppercase; color:var(--verde); margin-bottom:12px}
.eyebrow::before{content:""; width:14px; height:14px; flex:none; border-radius:50% 0; background:var(--hoja); transform:rotate(-45deg)}

/* ---------- Encabezado ---------- */
header{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.95); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea); transition:box-shadow .3s var(--ease)}
header.stuck{box-shadow:0 14px 30px -24px rgba(15,58,28,.55)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:18px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; min-width:0}
.brand img{width:60px; height:60px; border-radius:14px; object-fit:cover; flex:none; background:var(--gris);
  transition:width .3s var(--ease), height .3s var(--ease)}
header.stuck .brand img{width:50px; height:50px}
.brand > span{display:flex; flex-direction:column; min-width:0}
.brand b{font-family:var(--f-titulo); font-weight:900; font-size:1.55rem; line-height:1; text-transform:uppercase; color:var(--verde);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brand i{font-style:normal; text-transform:uppercase; color:var(--rojo); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nav-links{display:flex; gap:24px}
.nav-links a{position:relative; text-decoration:none; padding:6px 0; color:var(--tinta)}
.nav-links a::after{content:""; position:absolute; left:0; bottom:0; height:3px; width:100%; border-radius:3px; background:var(--hoja);
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease)}
.nav-links a:hover::after{transform:scaleX(1)}

/* ---------- Botones ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; text-decoration:none;
  border-radius:12px; border:2px solid transparent; cursor:pointer; transition:all .3s var(--ease)}
.btn svg{width:1.15em; height:1.15em; flex:none}
.btn-primary{background:var(--verde); color:#fff}
.btn-primary:hover{background:var(--monte)}
.btn-ghost, .btn-linea{background:transparent; color:var(--verde); border-color:var(--verde)}
.btn-ghost:hover, .btn-linea:hover{background:var(--verde); color:#fff}
.btn-ghost:not(.btn-sm){padding:1rem 2rem; font-weight:700}
.btn-linea-clara{background:transparent; color:#fff; border-color:rgba(255,255,255,.55); padding:1rem 1.8rem; font-weight:700}
.btn-linea-clara:hover{background:#fff; color:var(--monte)}
.btn-wa{background:#25D366; color:#06280F}

.progress{position:fixed; top:0; left:0; height:4px; width:0; z-index:100; background:linear-gradient(90deg,var(--verde),var(--hoja))}

/* ---------- 1 · Portada: el anillo de reciclaje ---------- */
.pl-hero{position:relative; overflow:hidden; background:var(--blanco)}
.pl-hero::before{content:""; position:absolute; right:-10%; top:-20%; width:60%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(109,190,69,.16) 0, rgba(109,190,69,0) 68%); pointer-events:none}
.pl-hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(30px,5vw,72px);
  align-items:center; padding-block:clamp(44px,6vw,86px) 40px}
.pl-hero h1{font-size:clamp(3.6rem,8vw,6.9rem); text-transform:uppercase; line-height:.9}
.pl-hero h1 span, .pl-hero h1 em{display:block}
.pl-lead{font-size:1.1rem; color:var(--tinta-2); max-width:48ch; margin:22px 0 0}
.pl-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px}
.pl-anillo{position:relative; width:min(100%,470px); aspect-ratio:1; justify-self:center; --lav:var(--hoja)}
.pl-flechas{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.anim .pl-flechas{animation:girarAnillo 26s linear infinite}
@keyframes girarAnillo{to{rotate:360deg}}
.pl-logo{position:absolute; left:50%; top:50%; width:62%; aspect-ratio:1; translate:-50% -50%; border-radius:28px; overflow:hidden;
  background:var(--gris); box-shadow:0 30px 60px -34px rgba(15,58,28,.6), 0 0 0 8px var(--blanco)}
.pl-logo img{width:100%; height:100%; object-fit:cover}
.pl-franja{position:relative; z-index:1; list-style:none; margin:0 auto; padding:0 0 70px; width:min(1180px,92vw);
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px}
.pl-franja li{display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; background:var(--papel);
  color:var(--monte); font-weight:700; font-size:.9rem; box-shadow:inset 0 0 0 1px var(--linea)}
.pl-franja svg{width:18px; height:18px; color:var(--verde-2)}
.pista{color:var(--verde)}

/* ---------- 2 · Qué hacemos ---------- */
.pl-hacemos{background:var(--papel)}
.pl-frentes{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px}
.pl-frentes li{position:relative; padding:26px 20px 22px; border-radius:var(--r); background:var(--blanco);
  box-shadow:0 18px 36px -30px rgba(15,58,28,.5); border-top:5px solid var(--verde-2)}
.pl-frentes li:nth-child(3n){border-top-color:var(--rojo)}
.pl-frente-ic{display:grid; place-items:center; width:58px; height:58px; border-radius:50%; background:var(--verde); color:#fff; margin-bottom:14px}
.pl-frentes li:nth-child(3n) .pl-frente-ic{background:var(--rojo)}
.pl-frente-ic svg{width:28px; height:28px}
.pl-frente-n{position:absolute; right:18px; top:16px; font-family:var(--f-titulo); font-weight:900; font-size:1.6rem; color:rgba(20,38,26,.16)}
.pl-frentes h3{font-size:1.45rem; text-transform:uppercase; margin-bottom:8px}
.pl-frentes p{margin:0; color:var(--tinta-2); font-size:.93rem}
.pl-nota-frentes{text-align:center; margin:34px auto 0; color:var(--tinta-2)}
.pl-nota-frentes a{color:var(--verde); font-weight:700}

/* ---------- 3 · El taller ---------- */
.pl-taller{background:var(--monte); color:#fff}
.pl-taller .eyebrow{color:var(--hoja)}
.pl-taller .sec-head h2{color:#fff}
.pl-taller .sec-head p{color:rgba(255,255,255,.8)}
.pl-ficha{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); max-width:1040px; margin:0 auto; border-radius:24px; overflow:hidden;
  background:var(--monte-2); box-shadow:0 40px 80px -46px rgba(0,0,0,.7); --lav:var(--hoja)}
.pl-ficha-precio{display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:6px; padding:44px 40px;
  background:var(--verde); position:relative}
.pl-ficha-precio::after{content:""; position:absolute; right:-60px; bottom:-60px; width:200px; height:200px; border-radius:50%;
  border:22px solid rgba(255,255,255,.1)}
.pl-ficha-ic{display:grid; place-items:center; width:64px; height:64px; border-radius:18px; background:rgba(255,255,255,.14); margin-bottom:12px}
.pl-ficha-ic svg{width:32px; height:32px}
.pl-ficha-precio b{font-family:var(--f-titulo); font-weight:900; font-size:clamp(2.6rem,5vw,3.8rem); line-height:1}
.pl-ficha-precio small{color:rgba(255,255,255,.85); font-weight:600}
.pl-ficha-tx{padding:40px 42px 38px}
.pl-ficha-tx h3{font-size:clamp(1.9rem,3.2vw,2.5rem); text-transform:uppercase; margin-bottom:12px}
.pl-ficha-tx h3 a{text-decoration:none}
.pl-ficha-tx > p{color:rgba(255,255,255,.82)}
.pl-chequeo{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:10px}
.pl-chequeo li{display:flex; gap:10px; align-items:flex-start; color:rgba(255,255,255,.9)}
.pl-chequeo svg{width:18px; height:18px; flex:none; margin-top:4px; color:var(--hoja)}
.pl-ficha-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}
.pl-taller .btn-primary{background:var(--hoja); color:var(--monte)}
.pl-taller .btn-primary:not(.btn-sm){padding:1rem 2rem; font-weight:800}
.pl-taller .btn-primary:hover{background:#fff}

/* ---------- 4 · Tres canecas ---------- */
.pl-separar{background:var(--blanco)}
.pl-canecas{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,3vw,36px); max-width:1000px; margin:0 auto}
/* Cada caneca: un cuerpo de esquinas bajas redondeadas con su tapa encima. Sin clip-path:
   recortaría también la tapa, que asoma por arriba. */
.pl-caneca{position:relative; padding:46px 26px 30px; margin-top:38px; text-align:center; border-radius:6px 6px 26px 26px}
.pl-tapa{position:absolute; left:-2%; right:-2%; top:-26px; height:26px; border-radius:14px 14px 4px 4px}
.pl-tapa::before{content:""; position:absolute; left:50%; top:-12px; width:56px; height:16px; translate:-50% 0; border-radius:10px 10px 0 0; background:inherit}
.pl-caneca{overflow:visible}
.pl-caneca h3{font-size:2.2rem; text-transform:uppercase}
.pl-tipo{font-weight:800; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; margin:4px 0 16px}
.pl-caneca ul{list-style:none; margin:0 0 16px; padding:0; display:grid; gap:8px}
.pl-caneca li{padding:8px 10px; border-radius:10px; font-weight:600; font-size:.93rem}
.pl-caneca small{font-size:.82rem}
.bin-blanca{background:#F7F7F4; color:var(--tinta); box-shadow:inset 0 0 0 2px #CFCFC8}
.bin-blanca .pl-tapa{background:#E2E2DC}
.bin-blanca li{background:#fff; box-shadow:inset 0 0 0 1px #DADAD2}
.bin-blanca .pl-tipo{color:var(--tinta-2)}
.bin-negra{background:#1C1F1D; color:#fff}
.bin-negra .pl-tapa{background:#2E3230}
.bin-negra li{background:rgba(255,255,255,.08)}
.bin-negra .pl-tipo, .bin-negra small{color:rgba(255,255,255,.75)}
.bin-verde{background:var(--verde); color:#fff}
.bin-verde .pl-tapa{background:var(--verde-2)}
.bin-verde li{background:rgba(255,255,255,.12)}
.bin-verde .pl-tipo, .bin-verde small{color:rgba(255,255,255,.85)}
.pl-separar-cta{text-align:center; margin:40px auto 0; color:var(--tinta-2)}
.pl-separar-cta a{color:var(--verde); font-weight:700}

/* ---------- 5 · Quiénes somos ---------- */
.pl-nosotros{background:var(--papel)}
.pl-nos-grid{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(30px,5vw,70px); align-items:center}
.pl-nosotros h2{font-size:clamp(2.5rem,5vw,3.7rem); text-transform:uppercase; margin-bottom:16px}
.hist > summary{color:var(--verde)}
.pl-mv{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px}
.pl-mv > div{padding:22px 20px 18px; border-radius:var(--r); background:var(--blanco); border-left:5px solid var(--verde-2)}
.pl-mv > div + div{border-left-color:var(--rojo)}
.pl-mv h3{font-size:1.35rem; text-transform:uppercase; margin-bottom:6px}
.pl-mv p{margin:0; color:var(--tinta-2); font-size:.94rem}
.pl-meta{position:relative; overflow:hidden; padding:40px 34px; border-radius:24px; background:var(--monte); color:#fff; text-align:center}
.pl-meta > svg{position:absolute; right:-40px; bottom:-40px; width:190px; height:190px; color:rgba(255,255,255,.08); stroke-width:1.4}
.pl-meta-anio{display:inline-block; padding:6px 14px; border-radius:999px; background:var(--rojo); font-weight:800; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase}
.pl-meta b{display:block; font-family:var(--f-titulo); font-weight:900; font-size:clamp(5rem,11vw,8rem); line-height:1; margin:14px 0 4px; color:var(--hoja)}
.pl-meta b span{font-size:.55em; vertical-align:.45em}
.pl-meta p{margin:0; font-size:1.1rem; font-weight:700}
.pl-quien{margin-top:60px; text-align:center}
.pl-quien h3{font-size:1.9rem; text-transform:uppercase; margin-bottom:20px}
.pl-quien ul{list-style:none; margin:0; padding-left:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.pl-quien li{display:flex; flex-direction:column; align-items:center; gap:10px; padding:22px 12px; border-radius:var(--r); background:var(--blanco); font-weight:700}
.pl-quien li span{display:grid; place-items:center; width:54px; height:54px; border-radius:50%; background:var(--papel); color:var(--verde)}
.pl-quien li svg{width:26px; height:26px}

/* ---------- 6 · Cómo agendar ---------- */
.pl-agendar{background:var(--blanco)}
.pl-pasos{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; counter-reset:paso}
.pl-pasos li{position:relative; padding:30px 26px 26px; border-radius:var(--r); background:var(--papel)}
.pl-paso-n{display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--verde); color:#fff;
  font-family:var(--f-titulo); font-weight:900; font-size:1.7rem; margin-bottom:14px}
.pl-pasos li:last-child .pl-paso-n{background:var(--rojo)}
.pl-pasos h3{font-size:1.55rem; text-transform:uppercase; margin-bottom:6px}
.pl-pasos p{margin:0; color:var(--tinta-2)}
.pl-agendar-cta{text-align:center; margin-top:42px}
.pl-agendar-cta .btn{padding:1.05rem 2.2rem; font-weight:800}

/* ---------- 7 · Contacto ---------- */
.pl-contacto{background:var(--monte); color:#fff}
.pl-contacto .eyebrow{color:var(--hoja)}
.pl-con-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,5vw,70px); align-items:center}
.pl-contacto h2{font-size:clamp(2.8rem,5.4vw,4.2rem); text-transform:uppercase; margin-bottom:14px}
.pl-con-txt{color:rgba(255,255,255,.84); max-width:40ch; margin-bottom:24px}
.pl-contacto .btn-primary{background:var(--hoja); color:var(--monte); font-weight:800}
.pl-contacto .btn-primary:hover{background:#fff}
.pl-redes{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.pl-redes a{display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:16px; background:var(--monte-2); text-decoration:none;
  box-shadow:inset 0 0 0 1px var(--linea-clara); transition:background .3s var(--ease)}
.pl-redes a:hover{background:var(--verde)}
.pl-red-ic{flex:none; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:var(--hoja); color:var(--monte)}
.pl-red-ic svg{width:22px; height:22px}
.pl-red-tx{display:flex; flex-direction:column; min-width:0; line-height:1.25}
.pl-red-tx small{font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.7)}
.pl-red-tx b{font-weight:700; overflow-wrap:break-word}

/* ---------- Pie ---------- */
footer{background:#0A2913; color:rgba(255,255,255,.75); padding:54px 0 38px}
footer .brand b{color:#fff}
footer .brand i{color:var(--hoja); text-transform:none}
.foot-top{display:flex; flex-wrap:wrap; gap:22px; align-items:center; justify-content:space-between; padding-bottom:24px; border-bottom:1px solid var(--linea-clara)}
.foot-social{display:flex; gap:12px}
.foot-social a{width:46px; height:46px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--linea-clara); color:#fff; transition:all .3s var(--ease)}
.foot-social a:hover{background:var(--hoja); color:var(--monte); border-color:var(--hoja)}
.foot-social svg{width:20px; height:20px}
.foot-bot{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-top:20px}
footer .btn-primary{background:var(--hoja); color:var(--monte)}

/* ---------- Flotantes y piezas compartidas ---------- */
.wa-float{position:fixed; right:24px; bottom:24px; z-index:90; display:inline-flex; align-items:center; gap:10px;
  background:#25D366; color:#06280F; text-decoration:none; border-radius:999px; box-shadow:0 18px 38px -16px rgba(37,211,102,.9)}
.anim .wa-float{animation:latirPl 3.4s ease-out infinite}
@keyframes latirPl{0%{box-shadow:0 18px 38px -16px rgba(37,211,102,.9), 0 0 0 0 rgba(37,211,102,.55)}
  70%,100%{box-shadow:0 18px 38px -16px rgba(37,211,102,.9), 0 0 0 16px rgba(37,211,102,0)}}
.arriba{background:var(--verde); color:#fff}
.barra-compra{background:var(--blanco); border-top:1px solid var(--linea)}

/* ---------- Ficha de servicio ---------- */
.pp-cab{position:relative; overflow:hidden; background:var(--monte); color:#fff}
.pp-cab-anillo{position:absolute; right:-40px; top:50%; width:clamp(180px,24vw,300px); height:auto; translate:0 -50%; stroke:rgba(109,190,69,.22); pointer-events:none}
.anim .pp-cab-anillo{animation:girarAnillo 30s linear infinite}
.pp-cab-in{position:relative; z-index:1; padding-block:34px 44px}
.p-migas{margin:0 0 16px; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.7)}
.p-migas a{text-decoration:none}
.p-migas span{margin:0 8px; color:var(--hoja)}
.pp-cab .eyebrow{color:var(--hoja)}
.pp-cab h1{max-width:18ch; font-size:clamp(2.6rem,5.4vw,4.4rem); text-transform:uppercase}
.pp-cuerpo{padding:56px 0 80px; background:var(--papel)}
.pp-grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,4vw,64px); align-items:start; width:min(1180px,92vw); margin:0 auto}
.pp-fotos{position:relative}
.pp-foto{position:relative; border-radius:24px; overflow:hidden; background:var(--gris); box-shadow:0 30px 60px -40px rgba(15,58,28,.6); --lav:var(--hoja)}
.pp-foto img{width:100%; height:auto; aspect-ratio:512/460; object-fit:cover}
/* Arriba a la derecha: abajo tapaba el nombre escrito en el logo. */
.pp-sello{position:absolute; z-index:3; right:18px; top:18px; padding:10px 18px; border-radius:12px; background:var(--rojo); color:#fff;
  font-family:var(--f-titulo); font-weight:900; font-size:1.6rem; line-height:1}
.pp-mini{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.pp-mini button{width:70px; height:70px; padding:0; border-radius:12px; overflow:hidden; cursor:pointer; background:none; border:2px solid transparent}
.pp-mini button[aria-current="true"]{border-color:var(--verde)}
.pp-mini img{width:100%; height:100%; object-fit:cover}
.pp-nombre{font-size:clamp(2rem,3.4vw,2.8rem); text-transform:uppercase; margin-bottom:10px}
.p-desc{color:var(--tinta-2)}
.p-precio{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; margin:20px 0 6px}
.p-precio b{font-family:var(--f-titulo); font-weight:900; font-size:3rem; line-height:1; color:var(--verde)}
.p-precio small{color:var(--tinta-2)}
.p-opciones{margin:22px 0}
.p-opciones h3{font-family:var(--f-cuerpo); font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--verde); margin-bottom:10px}
.p-chips{display:flex; flex-wrap:wrap; gap:9px}
.p-chips button{min-height:44px; padding:0 16px; border-radius:10px; border:1.5px solid var(--linea); background:#fff; cursor:pointer; font:inherit; font-weight:700; color:var(--tinta)}
.p-chips button[aria-pressed="true"]{background:var(--verde); border-color:var(--verde); color:#fff}
.p-puntos{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:11px}
.p-puntos li{display:flex; gap:11px; align-items:flex-start; color:var(--tinta-2)}
.p-puntos svg{width:18px; height:18px; flex:none; margin-top:4px; color:var(--verde-2)}
.p-cta{margin-top:26px}
.btn-block{width:100%}
.p-cta .btn{padding:1.05rem 1.6rem; font-weight:800}
.p-nota{display:flex; align-items:flex-start; gap:9px; margin-top:16px; color:var(--tinta-2); font-size:.9rem}
.p-nota svg{width:18px; height:18px; color:var(--verde); flex:none; margin-top:3px}
.p-agotado{padding:5px 12px; border-radius:999px; background:var(--gris); color:var(--rojo); font-weight:700; font-size:.8rem}
.pp-det{padding:0 0 86px; background:var(--papel)}
.pp-ficha{max-width:780px; margin:0 auto; padding:36px 38px 28px; border-radius:20px; background:#fff; --lav:var(--verde-2)}
.pp-ficha h2{font-size:2.2rem; text-transform:uppercase; margin-bottom:14px}
.pp-ficha .rico{color:var(--tinta-2)}
.pp-otros{padding:76px 0; background:var(--blanco)}
.pp-otros .sec-head h2{font-size:clamp(2.1rem,4vw,3rem)}
.pp-lineas{list-style:none; margin:0 auto; padding:0; max-width:900px; display:grid; gap:12px}
.pp-lineas li{display:flex; align-items:center; gap:16px; padding:14px 18px; border-radius:16px; background:var(--papel)}
.pp-lineas li span{flex:none; display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--verde); color:#fff}
.pp-lineas li span svg{width:24px; height:24px}
.pp-lineas b{flex:1; min-width:0; font-family:var(--f-titulo); font-weight:800; font-size:1.35rem; text-transform:uppercase}
.pp-lineas a{flex:none; color:var(--verde); font-weight:800; text-decoration:none; padding:8px 14px; border-radius:10px; box-shadow:inset 0 0 0 2px var(--verde)}
.pp-lineas a:hover{background:var(--verde); color:#fff}
.pp-otros-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px}
.pp-otro{display:flex; flex-direction:column; gap:4px; padding:20px; border-radius:16px; background:var(--papel); text-decoration:none}

/* ---------- Pantallas ---------- */
@media (max-width:1080px){
  .pl-frentes{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:960px){
  .pl-hero-grid, .pl-nos-grid, .pl-con-grid, .pp-grid, .pl-ficha{grid-template-columns:minmax(0,1fr)}
  .pl-anillo{width:min(80%,400px)}
  .pl-quien ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .sec{padding:76px 0}
  .nav-links{display:none}
  .pl-frentes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pl-canecas{grid-template-columns:minmax(0,1fr); max-width:420px}
  .pl-pasos{grid-template-columns:minmax(0,1fr)}
  .pl-mv{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .brand img{width:48px; height:48px}
  .brand i{display:none}
  .pl-hero h1{font-size:clamp(3rem,15vw,4.2rem)}
  .pl-frentes{grid-template-columns:minmax(0,1fr)}
  .pl-ficha-precio{padding:34px 26px}
  .pl-ficha-tx{padding:30px 24px}
  .pl-ficha-cta .btn{width:100%}
  .pl-quien ul{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pp-ficha{padding:28px 22px 22px}
  .pp-lineas li{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn, .nav-links a::after{transition:none}
  .anim .pl-flechas, .anim .pp-cab-anillo, .anim .wa-float{animation:none}
}