/* N Usos — hoja de estilos única. Colores sacados de las artes de empaque. */
:root{
  --tinta:#272755;      /* azul marino de fondo en las artes */
  --tinta-2:#1c1c40;
  --rojo:#E2101F;       /* rojo del logo y cintas N- */
  --gris:#9D9D9C;       /* onda gris */
  --azul:#2175A3;       /* Prolimp */
  --blanco:#ffffff;
  --papel:#f3f4f8;      /* fondo claro frío, no crema */
  --acento:var(--rojo);
  --display:"Barlow Condensed",system-ui,sans-serif;
  --texto:"Jost",system-ui,sans-serif;
  --max:1180px;
  --gutter:clamp(16px,4vw,40px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--blanco);color:var(--tinta);font:400 1.0625rem/1.6 var(--texto);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--rojo);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* Tipo de empaque: condensada, itálica, contorno blanco y sombra dura (como "TOPLIMP" en la bolsa) */
.pack{font-family:var(--display);font-weight:900;font-style:italic;line-height:.86;letter-spacing:-.01em;text-transform:uppercase;margin:0}
.pack--stroke{color:var(--tinta);-webkit-text-stroke:.09em var(--blanco);paint-order:stroke fill;text-shadow:.06em .06em 0 rgba(0,0,0,.28)}
h2.pack{font-size:clamp(2.6rem,6.5vw,4.8rem)}
h3{font-family:var(--display);font-weight:800;font-style:italic;font-size:1.7rem;line-height:1;margin:0 0 .4rem;text-transform:uppercase}
p{margin:0 0 1rem;max-width:62ch}
.lead{font-size:1.2rem;max-width:46ch}

/* Barra superior */
.top{position:absolute;inset:0 0 auto 0;z-index:5}
.top .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:18px}
.top img{width:64px;height:64px}
.top nav{display:flex;gap:22px;font-weight:500}
.top nav a{text-decoration:none;color:var(--blanco);opacity:.9}
.top nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:5px}
@media (max-width:640px){.top nav{display:none}}

/* HERO */
.hero{background:var(--tinta);color:var(--blanco);position:relative;padding:120px 0 0;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:32px;align-items:center}
.hero h1{font-size:clamp(4rem,11vw,9.5rem)}
.hero h1 .n{display:inline-block;text-transform:none;font-size:1.15em;line-height:.7;color:var(--rojo);-webkit-text-stroke:.07em var(--blanco);paint-order:stroke fill;transform:rotate(-4deg)}
.hero .lead{margin-top:1.4rem;color:#dcdcf0}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin:1.8rem 0 3rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;font:800 italic 1.25rem/1 var(--display);text-transform:uppercase;letter-spacing:.02em;padding:.9rem 1.4rem;border-radius:999px;border:0;cursor:pointer;text-decoration:none}
.btn--rojo{background:var(--rojo);color:var(--blanco);box-shadow:0 4px 0 #9e0a15}
.btn--rojo:active{transform:translateY(3px);box-shadow:0 1px 0 #9e0a15}
.btn--linea{background:transparent;color:var(--blanco);box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
.btn--linea:hover{box-shadow:inset 0 0 0 2px var(--blanco)}

/* Foto de la familia de productos */
.hero-productos{width:100%;max-width:560px;justify-self:center;margin-bottom:30px}
.hero-productos img{width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 16px 14px rgba(0,0,0,.18))}

/* Onda roja + gris de las artes, como separador */
.onda{display:block;width:100%;height:clamp(50px,8vw,110px)}
.onda--abajo{margin-top:-1px}

/* Cintas N- */
.cintas{padding:40px 0 90px;background:var(--blanco)}
.cintas .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
.cinta{display:block;background:var(--rojo);color:var(--blanco);font:900 italic clamp(1.8rem,4vw,2.8rem)/1 var(--display);text-transform:uppercase;letter-spacing:.06em;padding:.45em .9em .4em;margin:0 0 .9rem;width:fit-content;transform:rotate(-3deg);clip-path:polygon(0 0,100% 0,97% 50%,100% 100%,0 100%,3% 50%)}
.cinta + p{margin:-.2rem 0 1.8rem 1.2rem}
.cinta:nth-of-type(2){margin-left:1.4rem}.cinta:nth-of-type(3){margin-left:2.8rem}

/* Ciclo (sí es una secuencia: se numera) */
.ciclo{background:var(--papel);padding:90px 0}
.pasos{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:p}
.pasos li{counter-increment:p;padding:0 24px 0 0;border-top:6px solid var(--tinta);padding-top:18px}
.pasos li:last-child{border-top-color:var(--rojo)}
.pasos li::before{content:counter(p);font:900 italic 3.2rem/1 var(--display);color:var(--rojo);display:block;margin-bottom:.4rem}
.pasos li:last-child::before{content:"n"}
@media (max-width:760px){.pasos{grid-template-columns:1fr 1fr;row-gap:30px}}

/* Video */
.video{background:var(--tinta);color:var(--blanco);padding:90px 0}
.video .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.video video{width:100%;max-width:380px;aspect-ratio:9/16;object-fit:cover;border-radius:22px;background:#15153a;justify-self:center;border:6px solid var(--blanco);box-shadow:14px 14px 0 var(--rojo)}
.video p{color:#dcdcf0}

/* Demostración Toplimp */
.prueba{padding:64px 0 80px;background:var(--blanco);scroll-margin-top:24px}
.prueba .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:center}
.prueba .wrap>div{min-width:0}
.prueba-ceja{font-size:.8rem;letter-spacing:.15em;font-weight:500;color:var(--rojo);margin-bottom:20px}
.prueba h2{font-size:clamp(2.6rem,4.7vw,4.2rem);line-height:.98;margin-bottom:24px}
.prueba h2 span{color:var(--rojo)}
.prueba .lead{font-weight:500;margin-bottom:10px}
.prueba-beneficios{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:24px 0 0}
.prueba-beneficios li{background:var(--papel);padding:7px 12px;font-size:.85rem;border-radius:999px}
.youtube{aspect-ratio:16/9;background:var(--tinta-2);position:relative;overflow:hidden;border-radius:8px;box-shadow:0 16px 36px rgba(39,39,85,.14)}
.youtube-portada{display:block;width:100%;height:100%;position:relative;color:white}
.youtube-portada img{width:100%;height:100%;object-fit:cover}
.youtube-portada::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.7))}
.youtube-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;display:grid;place-items:center;background:var(--rojo);width:76px;height:76px;border-radius:50%;font-size:28px;padding-left:5px;box-shadow:0 4px 20px rgba(0,0,0,.25);transition:background .2s}
.youtube-portada:hover .youtube-play{background:#b60c19}
.youtube-portada:focus-visible{outline-offset:-5px}
.youtube-rotulo{position:absolute;bottom:18px;left:22px;z-index:1;font:800 italic 1.35rem var(--display);text-transform:uppercase}
.youtube iframe{display:block;width:100%;height:100%;border:0}
.prueba-pie{font-size:.85rem;color:#5d5d80;margin:16px 0 0;line-height:1.6}
.prueba-pie a{display:inline-block;text-underline-offset:3px}
.prueba-enlace{display:inline-block;margin:-12px 0 32px;text-underline-offset:5px}
@media(max-width:860px){.prueba .wrap{grid-template-columns:1fr;gap:28px}.prueba{padding:40px 0 56px}}

/* Calculadora */
.calc{padding:90px 0;background:var(--blanco)}
.calc .caja{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-top:30px}
.calc label{font-weight:500;display:block;margin-bottom:.5rem}
.calc input[type=range]{width:100%;accent-color:var(--rojo);height:28px}
.calc output{font:900 italic 1.6rem/1 var(--display)}
.resultado{background:var(--rojo);color:var(--blanco);padding:30px;border-radius:6px 40px 6px 40px}
.resultado b{display:block;font:900 italic clamp(3.2rem,8vw,5.5rem)/.9 var(--display)}
.nota{font-size:.85rem;color:#5d5d80}

/* Productos */
.productos{background:var(--papel);padding:90px 0}
.grilla{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:36px}
.prod{text-decoration:none;background:var(--blanco);display:flex;flex-direction:column;border-bottom:8px solid var(--c,var(--tinta))}
.prod img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;object-position:center;padding:22px}
.prod div{padding:20px 22px 24px}
.prod h3{color:var(--c,var(--tinta))}
.prod:hover h3{text-decoration:underline;text-underline-offset:4px}
.prod small{display:block;color:#5d5d80}
@media (max-width:900px){.grilla{grid-template-columns:1fr}}

/* Usos */
.usos{padding:90px 0}
.iconos{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:30px;text-align:center;font-weight:500}
.iconos svg{display:block;width:56px;height:56px;margin:0 auto 8px;fill:var(--tinta)}
@media (max-width:760px){.iconos{grid-template-columns:repeat(3,1fr)}}

/* FAQ */
.faq{background:var(--papel);padding:90px 0}
.faq details{border-top:2px solid var(--tinta);padding:18px 0;max-width:780px}
.faq summary{cursor:pointer;font:800 italic 1.5rem/1.1 var(--display);text-transform:uppercase;list-style:none}
.faq summary::after{content:"+";float:right;color:var(--rojo)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:.8rem}

/* Comprar + pie */
.comprar{background:var(--rojo);color:var(--blanco);padding:80px 0;text-align:left}
.comprar .tiendas{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.comprar .btn--rojo{background:var(--blanco);color:var(--rojo);box-shadow:0 4px 0 #9e0a15}
footer{background:var(--tinta-2);color:#b9b9d6;padding:50px 0 60px;font-size:.92rem}
footer .wrap{display:grid;grid-template-columns:auto 1fr 1fr;gap:40px;align-items:start}
footer img{width:72px}
footer strong{color:var(--blanco)}

/* Página de producto */
.ficha{background:var(--c);color:var(--blanco);padding:120px 0 0;overflow:hidden}
.ficha .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.ficha h1{font-size:clamp(3.4rem,9vw,7rem)}
.ficha .pack--stroke{color:var(--c)}
.ficha .rollo{width:100%;height:auto;max-height:580px;object-fit:contain;filter:drop-shadow(12px 16px 12px rgba(0,0,0,.2));margin-bottom:60px}
.datos{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:34px 0 0;border-top:2px solid var(--tinta)}
.datos div{padding:18px 16px 18px 0}
.datos dt{font-size:.9rem;color:#5d5d80}
.datos dd{margin:0;font:900 italic 2rem/1 var(--display)}
@media (max-width:760px){.datos{grid-template-columns:1fr 1fr}}

@media (max-width:860px){
  .hero .wrap,.ficha .wrap,.cintas .wrap,.video .wrap,.calc .caja{grid-template-columns:1fr}
  footer .wrap{grid-template-columns:1fr}
  .hero-productos{width:min(520px,100%)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}