/** Shopify CDN: Minification failed Line 7:19 Unexpected "@import" **/ #landing-body-suit @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap'); :root{--papel:#FFFFFF; --boton:#7A2545; --boton-hondo:#5C1A33; --k-vino:#61002B; --k-berry:#810C43; --k-mauve:#BD5567; --k-si:#AD4A5E; --k-no:#CE9AA6; --k-nox:#BC7A8A; --k-rosa:#FFCCD6; --k-pale:#FBEBEF; --k-ink:#1a1a1a; --k-gray:#6a6a6a; --k-gray2:#9a9a9a; --k-line:#F0DCE2; --f:Montserrat,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --ancho:560px;} #landing-body-suit *{box-sizing:border-box; margin:0; padding:0} #landing-body-suit img{display:block; width:100%; height:auto; -webkit-user-drag:none} #landing-body-suit .lienzo{max-width:var(--ancho); margin:0 auto; background:var(--papel); color:var(--k-ink); font-family:var(--f); line-height:1.5; overflow:hidden} #landing-body-suit .env{padding:0 16px} #landing-body-suit .gal{position:relative} #landing-body-suit .gal__p{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch} #landing-body-suit .gal__p::-webkit-scrollbar{display:none} #landing-body-suit .gal__p{cursor:grab; touch-action:pan-y} #landing-body-suit .gal__p.arrastra,#landing-body-suit .gal__p.sinsnap{scroll-snap-type:none} #landing-body-suit .gal__p.arrastra{cursor:grabbing} #landing-body-suit .gal__p figure{flex:0 0 100%; scroll-snap-align:center; margin:0; background:var(--k-pale)} #landing-body-suit .gal__p img{aspect-ratio:1/1; object-fit:contain; -webkit-user-drag:none; user-select:none} #landing-body-suit .gal__d{display:flex; justify-content:center; gap:7px; padding:12px 0 4px} #landing-body-suit .gal__d button{width:8px; height:8px; padding:0; border:0; border-radius:50%; background:var(--k-rosa); cursor:pointer; transition:background .18s ease, transform .18s ease} #landing-body-suit .gal__d button.on{background:var(--k-vino); transform:scale(1.15)} #landing-body-suit .gal__f{position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border:0; border-radius:50%; cursor:pointer; background:rgba(255,255,255,.82); box-shadow:0 2px 10px rgba(0,0,0,.14); display:flex; align-items:center; justify-content:center; color:var(--k-vino); font-size:19px; line-height:1; font-family:inherit} #landing-body-suit .gal__f[hidden]{display:none} #landing-body-suit .gal__f--izq{left:10px} #landing-body-suit .gal__f--der{right:10px} #landing-body-suit .korin-info{margin:14px 0 0} #landing-body-suit .korin-info__rating{display:flex;align-items:center;gap:8px;margin:0 0 16px;font-size:15px;color:#1a1a1a} #landing-body-suit .korin-info__stars{color:#7a1f3d;font-size:17px;letter-spacing:1px} #landing-body-suit .korin-info__lede{font-size:16px;line-height:1.55;color:#4a4a4a;margin:0 0 20px} #landing-body-suit .korin-info__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px} #landing-body-suit .korin-info__item{display:flex;gap:12px;align-items:flex-start} #landing-body-suit .korin-info__mark{color:#7a1f3d;font-size:18px;line-height:1.4;flex:0 0 auto} #landing-body-suit .korin-info__item b{display:block;color:#1a1a1a;font-size:16px;font-weight:700;line-height:1.4} #landing-body-suit .korin-info__text{display:block;color:#6a6a6a;font-size:15px;line-height:1.45} #landing-body-suit .korin-titulo{font-size:27px;line-height:1.12;font-weight:700;letter-spacing:-.02em;margin:0 0 4px} #landing-body-suit .korin-mas{display:block;font-size:13px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:#7a1f3d;margin-bottom:6px} #landing-body-suit .korin-precio{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0 0} #landing-body-suit .korin-precio b{font-size:22px;font-weight:700;color:#1a1a1a} #landing-body-suit .korin-precio s{font-size:15px;color:#9a9a9a} #landing-body-suit .korin-precio i{font-style:normal;background:#7a1f3d;color:#fff;font-size:12px;font-weight:700; padding:5px 10px;border-radius:6px;letter-spacing:.03em} #landing-body-suit .sel{margin:18px 0 0} #landing-body-suit .sel__f{margin-bottom:15px} #landing-body-suit .sel__t{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#61002B; margin-bottom:9px} #landing-body-suit .sel__t span{font-weight:500; color:#6a6a6a; text-transform:none; letter-spacing:0} #landing-body-suit .sel__o{display:flex; gap:12px; flex-wrap:wrap; align-items:center} #landing-body-suit .tono{width:42px; height:42px; min-width:42px; padding:0; border-radius:50%; border:2px solid #ddd; cursor:pointer; background-clip:padding-box} #landing-body-suit .tono[aria-pressed="true"]{border-color:#111; box-shadow:0 0 0 2px #fff, 0 0 0 4px #111} #landing-body-suit .talla{min-width:54px; padding:11px 14px; border-radius:8px; cursor:pointer; background:#fff; border:1.5px solid var(--k-line); color:var(--k-ink); font-family:inherit; font-size:14px; font-weight:700} #landing-body-suit .talla[aria-pressed="true"]{border-color:#61002B; background:var(--k-pale); color:#61002B} #landing-body-suit .korin-sizeguide-link{all:unset;box-sizing:border-box;display:flex;align-items:center; justify-content:center;gap:9px;width:100%;margin:14px 0 0;padding:14px 18px; font-family:inherit;font-size:14.5px;font-weight:700;letter-spacing:.2px;line-height:1.1; color:#61002B;text-align:center;cursor:pointer; background:linear-gradient(180deg,#FFF7F9,#FFE1E9); border:1.6px solid #BD5567;border-radius:999px; box-shadow:0 0 0 0 rgba(189,85,103,.5);animation:korinSgPulse 2.2s ease-out infinite} #landing-body-suit .korin-sizeguide-link::before{content:"";flex:0 0 18px;width:18px;height:18px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2361002B' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='2' y='7' width='20' height='10' rx='2.5'/%3E%3Cpath d='M6.5 7v3.2M10 7v4.2M13.5 7v3.2M17 7v4.2'/%3E%3C/svg%3E") center/contain no-repeat} #landing-body-suit .korin-sizeguide-link::after{content:"";flex:0 0 7px;width:7px;height:7px; border-right:2px solid #61002B;border-bottom:2px solid #61002B; transform:rotate(-45deg);margin-left:2px} @keyframes korinSgPulse{ 0%{box-shadow:0 0 0 0 rgba(189,85,103,.55);transform:scale(1)} 55%{box-shadow:0 0 0 11px rgba(189,85,103,0);transform:scale(1.018)} 100%{box-shadow:0 0 0 0 rgba(189,85,103,0);transform:scale(1)}} @media (prefers-reduced-motion:reduce){ #landing-body-suit .korin-sizeguide-link{animation:none}} #landing-body-suit .korin-sg-hint{display:block;margin:7px 0 0;text-align:center;font-size:12px; line-height:1.35;color:#810C43;opacity:.9} #landing-body-suit .korin-sizeguide-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55); z-index:9999;align-items:center;justify-content:center;padding:20px} #landing-body-suit .korin-sizeguide-overlay.open{display:flex} #landing-body-suit .korin-sizeguide-modal{background:#fff;border-radius:16px;max-width:520px;width:100%; max-height:85vh;overflow:auto;padding:22px;position:relative} #landing-body-suit .korin-sizeguide-modal h3{margin:0 0 12px;font-size:18px} #landing-body-suit .korin-sg-img{width:100%;height:auto;display:block;border-radius:12px;margin-top:6px} #landing-body-suit .korin-sizeguide-close{position:absolute;top:12px;right:14px;font-size:24px;line-height:1; background:none;border:none;cursor:pointer;font-family:inherit} #landing-body-suit #korin-offer{max-width:100%;margin:16px 0;display:flex;flex-direction:column;gap:12px} #landing-body-suit #korin-offer *,#landing-body-suit #korin-offer *::before,#landing-body-suit #korin-offer *::after{box-sizing:border-box} #landing-body-suit #korin-offer .koc-opt{position:relative} #landing-body-suit #korin-offer .koc-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none} #landing-body-suit #korin-offer .koc-body{display:block;cursor:pointer;background:#FFFFFF; border:1px solid #F0DCE2;border-radius:14px;padding:16px 18px 14px; color:#61002B;letter-spacing:-.2px; transition:border-color .18s ease, background .18s ease} #landing-body-suit #korin-offer .koc-input:checked + .koc-body{background:#FBEBEF;border:1.5px solid #61002B; padding:15.5px 17.5px 13.5px} #landing-body-suit #korin-offer .koc-head{display:flex;align-items:center;gap:10px} #landing-body-suit #korin-offer .koc-radio{flex:0 0 auto;width:20px;height:20px;border-radius:999px; background:#FFF;border:2px solid #D9AEBC;display:flex;align-items:center;justify-content:center; transition:border-color .18s ease, background .18s ease} #landing-body-suit #korin-offer .koc-input:checked + .koc-body .koc-radio{background:#61002B;border-color:#61002B} #landing-body-suit #korin-offer .koc-radio::after{content:"";width:10px;height:10px;border-radius:999px;background:#FFF;opacity:0} #landing-body-suit #korin-offer .koc-input:checked + .koc-body .koc-radio::after{opacity:1} #landing-body-suit #korin-offer .koc-name{flex:1 1 auto;margin:0;font-size:17px;line-height:21.25px; font-weight:700;color:#61002B;letter-spacing:normal} #landing-body-suit #korin-offer .koc-badge{flex:0 0 auto;font-size:10.5px;line-height:1;font-weight:700; letter-spacing:.84px;text-transform:uppercase;background:#FFCCD6;color:#61002B; padding:5px 11px;border-radius:999px;white-space:nowrap} #landing-body-suit #korin-offer .koc-badge.dark{background:#61002B;color:#FFF} #landing-body-suit #korin-offer .koc-pricerow{display:flex;align-items:baseline;flex-wrap:wrap; column-gap:4px;row-gap:6px;margin-top:6px;padding-left:30px} #landing-body-suit #korin-offer .koc-save{align-self:center;margin-right:6px;font-size:10.5px;line-height:1; font-weight:700;letter-spacing:.84px;text-transform:uppercase;color:#61002B; background:#FFE3EA;padding:5px 11px;border-radius:999px;white-space:nowrap} #landing-body-suit #korin-offer .koc-price{font-size:30px;line-height:33px;font-weight:700;color:#61002B;letter-spacing:-.3px} #landing-body-suit #korin-offer .koc-compare{font-size:13px;line-height:14.3px;font-weight:500; color:#BD5567;text-decoration:line-through} #landing-body-suit #korin-offer .koc-sub{padding-left:30px;margin-top:4px;font-size:12.5px;line-height:16.25px; font-weight:500;color:#BD5567} #landing-body-suit #korin-offer .koc-sub strong{color:#61002B;font-weight:700} #landing-body-suit #korin-offer .koc-expand{display:none} #landing-body-suit #korin-offer .koc-input:checked + .koc-body .koc-expand{display:block} #landing-body-suit #korin-offer .koc-divider{height:1px;background:#FFCCD6;border:0;margin:14px 0 0} #landing-body-suit #korin-offer .koc-list{list-style:none;margin:14px 0 4px;padding:0;font-size:14px; line-height:20.3px;font-weight:500;letter-spacing:-.4px;color:#61002B} #landing-body-suit #korin-offer .koc-list li{position:relative;padding-left:24px;margin-bottom:5px} #landing-body-suit #korin-offer .koc-list li::before{content:"\2713";position:absolute;left:0;top:0; width:16px;font-weight:700;color:#61002B} #landing-body-suit #korin-offer .koc-list li.bold{font-weight:700} #landing-body-suit #korin-offer .koc-giftrow{margin-top:14px} #landing-body-suit #korin-offer .koc-kithead{margin:0 0 8px;font-size:10px;line-height:21.6px;font-weight:700; letter-spacing:1.2px;text-transform:uppercase;color:#61002B} #landing-body-suit #korin-offer .koc-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:14px;padding:0;margin:0} #landing-body-suit #korin-offer .koc-cell{min-width:0;display:flex;flex-direction:column;align-items:center} #landing-body-suit #korin-offer .koc-thumb{width:100%;max-width:82px;aspect-ratio:1/1;border-radius:10px; background:#FFCCD6;overflow:hidden} #landing-body-suit #korin-offer .koc-thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 50%} #landing-body-suit #korin-offer .koc-gval{margin:8px 0 3px;text-align:center;font-size:11px;line-height:13.2px; font-weight:500;color:#61002B;text-decoration:line-through} #landing-body-suit #korin-offer .koc-gname{width:100%;text-align:center;font-size:11.5px;line-height:14.5px; font-weight:500;color:#61002B} @media (max-width:360px){ #landing-body-suit #korin-offer .koc-rail{column-gap:9px}} #landing-body-suit .cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px; margin:16px 0 0;padding:15px 18px;border-radius:999px;text-decoration:none; background:#61002B;color:#fff;font-family:inherit;font-size:13px;font-weight:700; letter-spacing:.1em;text-transform:uppercase;text-align:center;gap:10px} #landing-body-suit .cta small{font-size:11px;font-weight:500;letter-spacing:.02em;text-transform:none;opacity:.85} #landing-body-suit .nota{display:block;margin:8px 0 0;text-align:center;font-size:12px;color:#810C43;opacity:.9} #landing-body-suit #korin-sellos{max-width:100%;margin:16px 0;display:grid;grid-template-columns:1fr;gap:10px} #landing-body-suit #korin-sellos *,#landing-body-suit #korin-sellos *::before,#landing-body-suit #korin-sellos *::after{box-sizing:border-box} #landing-body-suit #korin-sellos .ks-card{display:flex;align-items:flex-start;gap:13px;background:#FBEBEF; border:1px solid #FFCCD6;border-radius:14px;padding:15px 16px;color:#61002B;letter-spacing:-.2px} #landing-body-suit #korin-sellos .ks-ico{flex:0 0 auto;width:42px;height:42px;border-radius:999px; background:#FFFFFF;border:1px solid #FFCCD6;display:flex;align-items:center;justify-content:center} #landing-body-suit #korin-sellos .ks-ico svg{width:22px;height:22px;display:block;fill:none;stroke:#61002B; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} #landing-body-suit #korin-sellos .ks-txt{min-width:0;padding-top:1px} #landing-body-suit #korin-sellos .ks-title{margin:0 0 3px;font-size:14px;line-height:18px;font-weight:700; color:#61002B;letter-spacing:normal} #landing-body-suit #korin-sellos .ks-body{margin:0;font-size:12.5px;line-height:16.25px;font-weight:500;color:#810C43} #landing-body-suit #korin-sellos .ks-body strong{color:#61002B;font-weight:700} @media (min-width:600px){ #landing-body-suit #korin-sellos{grid-template-columns:1fr 1fr;gap:12px}} #landing-body-suit #korinTabs{margin:16px 0 0} #landing-body-suit #korinTabs .kt-b{display:flex;gap:18px;border-bottom:1px solid rgba(26,26,26,.1);overflow-x:auto; scrollbar-width:none} #landing-body-suit #korinTabs .kt-b::-webkit-scrollbar{display:none} #landing-body-suit #korinTabs .kt-b button{flex:0 0 auto;padding:10px 0;border:0;background:none;cursor:pointer; font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:#9a9a9a;border-bottom:2px solid transparent;margin-bottom:-1px} #landing-body-suit #korinTabs .kt-b button[aria-selected="true"]{color:#61002B;border-bottom-color:#61002B} #landing-body-suit #korinTabs .kt-p > div{display:none;padding:16px 0 0} #landing-body-suit #korinTabs .kt-p > div.on{display:block} #landing-body-suit #korinTabs ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px} #landing-body-suit #korinTabs li{position:relative;padding-left:16px;font-size:14px;line-height:1.5;color:#4a4a4a} #landing-body-suit #korinTabs li::before{content:"\2022";position:absolute;left:2px;color:#61002B;font-weight:700} #landing-body-suit #korinTabs li b{color:#1a1a1a;font-weight:700} #landing-body-suit #korinTabs p{font-size:14px;line-height:1.55;color:#4a4a4a} #landing-body-suit .k-cf{background:#FBEBEF;border-radius:16px;padding:22px 18px 20px;margin:0 0 14px} #landing-body-suit .k-cf__eyebrow{font-size:12px;letter-spacing:.09em;font-weight:700;color:#810C43; text-transform:uppercase;margin:0 0 6px} #landing-body-suit .k-cf__title{font-size:26px;line-height:1.15;font-weight:700;color:#1a1a1a;margin:0 0 18px} #landing-body-suit .k-cf__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px} #landing-body-suit .k-cf__item{display:flex;gap:12px;align-items:flex-start} #landing-body-suit .k-cf__ico{flex:0 0 32px;width:32px;height:32px;color:#810C43} #landing-body-suit .k-cf__ico svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor; stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} #landing-body-suit .k-cf__h{font-size:15px;font-weight:700;color:#810C43;margin:0 0 3px;line-height:1.25} #landing-body-suit .k-cf__p{font-size:13.5px;line-height:1.45;color:#6a6a6a;margin:0} #landing-body-suit .k-cf__foto{flex:0 0 74px;width:74px;height:90px;border-radius:10px;overflow:hidden;background:#FFCCD6} #landing-body-suit .k-cf__foto img{width:100%;height:100%;object-fit:cover} #landing-body-suit .k-vs{margin:0 0 14px} #landing-body-suit .k-vs__eyebrow{font-size:12px;letter-spacing:.09em;font-weight:700;color:#810C43; text-transform:uppercase;margin:0 0 6px} #landing-body-suit .k-vs__title{font-size:26px;line-height:1.18;font-weight:700;color:#1a1a1a;margin:0 0 8px} #landing-body-suit .k-vs__sub{font-size:13.5px;line-height:1.45;color:#9a9a9a;margin:0 0 18px} #landing-body-suit .k-vs__t{display:grid;grid-template-columns:1fr 1fr;column-gap:12px;align-items:stretch} #landing-body-suit .k-vs__hk{background:#FBEBEF;border-radius:18px 18px 0 0;padding:26px 14px 18px; display:flex;align-items:center;justify-content:center;text-align:center; font-size:17px;font-weight:700;color:#61002B;line-height:1.2} #landing-body-suit .k-vs__ho{padding:26px 6px 18px;display:flex;align-items:center;justify-content:center; text-align:center;font-size:12.5px;font-weight:600;color:#2a2a2a; text-transform:uppercase;line-height:1.3} #landing-body-suit .k-vs__c{background:#FBEBEF;padding:0 14px;display:flex} #landing-body-suit .k-vs__c--last{border-radius:0 0 18px 18px;padding-bottom:10px} #landing-body-suit .k-vs__ci{display:flex;gap:11px;align-items:center;border-top:1px solid rgba(129,12,67,.13); padding:14px 0;width:100%;font-size:13px;line-height:1.3;color:#2a2a2a} #landing-body-suit .k-vs__o{padding:0 6px;display:flex} #landing-body-suit .k-vs__oi{display:flex;align-items:center;justify-content:center;border-top:1px solid #e6e6e6; padding:14px 0;width:100%} #landing-body-suit .k-vs__yes{flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:#AD4A5E;color:#fff; display:flex;align-items:center;justify-content:center} #landing-body-suit .k-vs__no{width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #CE9AA6; color:#BC7A8A;display:flex;align-items:center;justify-content:center} #landing-body-suit .k-vs__yes svg{width:15px;height:15px;display:block} #landing-body-suit .k-vs__no svg{width:13px;height:13px;display:block} #landing-body-suit .k-cf2{margin:26px 0 0;overflow:hidden} #landing-body-suit .k-cf2__eyebrow{font-size:12px;letter-spacing:.09em;font-weight:700;color:#810C43; text-transform:uppercase;margin:0 0 6px} #landing-body-suit .k-cf2__title{font-size:30px;line-height:1.15;font-weight:700;color:#1a1a1a;margin:0 0 6px} #landing-body-suit .k-cf2__sub{font-size:14px;line-height:1.45;color:#8a8a8a;margin:0 0 20px} #landing-body-suit .k-cf2__vp{overflow:hidden;width:100%; -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)} #landing-body-suit .k-cf2__track{display:flex;gap:12px;width:max-content;animation:kcf2scroll 55s linear infinite} #landing-body-suit .k-cf2__vp:hover .k-cf2__track{animation-play-state:paused} #landing-body-suit .k-cf2__track img{width:172px;height:232px;object-fit:cover;border-radius:16px; display:block;flex:0 0 auto;box-shadow:0 4px 18px rgba(0,0,0,.09)} @keyframes kcf2scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){ #landing-body-suit .k-cf2__track{animation:none} #landing-body-suit .k-cf2__vp{overflow-x:auto}} #landing-body-suit .fin{padding:30px 16px 30px;text-align:center} #landing-body-suit .fin h2{font-size:27px;line-height:1.12;font-weight:700;color:#1a1a1a;margin:0 0 4px} #landing-body-suit .fin h2 em{font-style:normal;color:#61002B;display:block} #landing-body-suit .pie{padding:0 16px 30px;text-align:center;font-size:11.5px;color:#9a9a9a;line-height:1.6} #landing-body-suit .pie a{color:#6a6a6a;text-decoration:none;margin:0 7px} #landing-body-suit .np-cabecera,#landing-body-suit .np-urgencia,#landing-body-suit .np-cuenta__envio,#landing-body-suit .np-lote,#landing-body-suit .np-stock__aviso,#landing-body-suit .boton__nota{display:none !important} #landing-body-suit .np-variantes input[type="radio"]{position:absolute !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important} #landing-body-suit .np-cabecera__antes,#landing-body-suit .np-precio__antes{display:none !important} #landing-body-suit .np-cuenta__hueco{display:block !important; height:48px !important} #landing-body-suit .np-opcion{position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; margin:-1px !important} /* MODO OSCURO FORZADO: Chrome y Samsung Internet en Android invierten por su cuenta los fondos claros de cualquier pagina que no declare que es clara. Eso dejaba el bloque de compra en negro con el texto en blanco, aunque el CSS diga crema. Declarando el esquema, el navegador deja de tocarla y se ve con los colores de la marca. */ :root{color-scheme:light !important} #landing-body-suit, #landing-body-suit *{color-scheme:light} /* Los tonos de marca, como variables. Sin esto var(--boton-hondo) no existia en ninguna parte y la pildora del descuento de la banda de arriba quedaba con texto blanco sobre fondo blanco: se veia un rectangulo vacio. Los dos hex se sustituyen mas abajo por los del proyecto. */ #landing-body-suit{--boton:#7A2545; --boton-hondo:#5C1A33} #landing-body-suit{margin:0 auto; background:#FFFFFF} #landing-body-suit .lienzo{max-width:100%; background:#FFFFFF} /* Las secciones del tema traen su propio fondo blanco y por eso se marcaba el corte de cada imagen. Aqui les damos el crema de la marca, que es el color al que van a morir los degradados. */ [id^="shopify-section-"][id*="__np_"]{ background:#FFFFFF !important; padding:0 !important; margin:0 !important; } /* Costuras mas generosas: la imagen se funde por arriba y por abajo, no solo por abajo. Asi no se ve donde empieza y donde termina. */ /* Difuminacion entre secciones: bandas mas anchas pero con CURVA SUAVE (varios pasos), asi el fundido es profundo sin tapar el texto que las imagenes traen pegado al borde. La opacidad cae rapido: a 20px del borde ya casi no cubre nada. */ #landing-body-suit .costura{height:52px; margin-top:-52px} #landing-body-suit .bloque{position:relative} #landing-body-suit .bloque::before{ content:''; position:absolute; left:0; right:0; top:0; height:44px; z-index:2; pointer-events:none; background:linear-gradient(to bottom, rgba(255,255,255,.95) 0%, rgba(255,255,255,.55) 30%, rgba(255,255,255,.18) 60%, rgba(255,255,255,0) 100%); } /* El fundido superior se apaga SOLO en el hero (#arriba, arriba del todo). Antes se usaba :first-of-type, pero como la landing se parte en dos secciones, la primera imagen de contenido (np_abajo) tambien era first-of-type y perdia el fundido -> borde duro. Ahora esa SI se difumina. */ #landing-body-suit #arriba::before{display:none} #landing-body-suit .bloque:first-of-type:not(#arriba)::before{display:block} #landing-body-suit .bloque::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:52px; z-index:2; pointer-events:none; background:linear-gradient(to top, rgba(255,255,255,.95) 0%, rgba(255,255,255,.55) 30%, rgba(255,255,255,.18) 60%, rgba(255,255,255,0) 100%); } /* La barra flotante nuestra sobra: la unica que queda es la de Releasit, que es la que de verdad abre el formulario. */ #landing-body-suit .barra, .barra{display:none !important} #landing-body-suit{padding-bottom:0} /* BLINDAJE: la landing NO se muestra en computador (mouse = PC/laptop). Se oculta al instante, sin parpadeo. El telefono (tactil) no se toca. El JS complementa esto para las extensiones que fingen movil. El :not(.np-movil) es por Clarity. Clarity no guarda un video: guarda el HTML y lo vuelve a pintar dentro de un iframe EN NUESTRO PC. Como la regla de abajo es una media query, se evaluaba de nuevo al reproducir, contra el mouse de quien mira la grabacion -> tapaba la landing entera y la grabacion salia en blanco (solo se veia el boton de Releasit, que es lo unico que vive fuera de #landing-body-suit). La clase np-movil se la pone el JS al celular de verdad, queda grabada en el HTML, y al reproducir manda la clase y no el mouse del que mira. */ @media (hover:hover) and (pointer:fine){ html:not(.np-dueno):not(.np-movil) #landing-body-suit{display:none !important} } /* En PC, cuando el dueño des-oculta la landing, las secciones .revela deben verse SIN depender del JS de reveal (que en PC no dispara bien). */ @media (hover:hover) and (pointer:fine){ #landing-body-suit .revela{opacity:1 !important; transform:none !important; filter:none !important} } /* En PC el tema Horizon encierra la pagina: a partir de 990px pone html:has(.page-wrapper), html:has(.page-wrapper) body { height:100dvh; overflow:hidden } y hace el scroll por dentro de .page-wrapper. Con la landing abierta eso dejaba la pagina trabada en la primera pantalla: no bajaba, y como las fotos son lazy nunca entraban en vista -> nunca cargaban -> las secciones quedaban en alto 0 (se veia solo el hero). Cuando el dueño abre la landing le devolvemos el scroll normal a la pagina. */ html.np-dueno, html.np-dueno body, html.np-dueno .page-wrapper{ height:auto !important; max-height:none !important; overflow:visible !important; } /* La tira de fotos y las fajas, sobre el fondo de la landing. Va con var(--fondo, ...) y no con el color pelado a proposito: este bloque se pega DESPUES del CSS del proyecto, asi que un color fijo aqui le ganaba a cualquier seccion que quisiera otro fondo. Una landing que alterna secciones claras y oscuras solo tiene que redefinir --fondo en la seccion; el respaldo se usa cuando la landing no declara el token. */ #landing-body-suit .tira, #landing-body-suit .faja{background:var(--fondo,#FFFFFF)} #np-comprar{scroll-margin-top:90px; display:block; height:0} #landing-body-suit .np-respiro{height:80px} #landing-body-suit .np-variantes{padding-top:22px; padding-bottom:28px} #landing-body-suit .np-opcion{margin-bottom:20px} /* insignia de viral: una sola linea, logos reales, sin quiebres. Los colores NO son suyos: los toma de las variables de cada landing (superficie, borde, tinta), asi combina con cualquier sistema, claro u oscuro. */ #landing-body-suit .np-viral{ display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; white-space:nowrap; gap:8px; width:fit-content; max-width:100%; margin:0 auto 14px; padding:8px 16px; border-radius:999px; background:var(--superficie, #fff); border:1px solid var(--borde, rgba(0,0,0,.15)); box-shadow:0 4px 14px rgba(0,0,0,.10); font-family:system-ui,-apple-system,'Segoe UI',sans-serif; font-size:13px; color:var(--tinta, #222); } #landing-body-suit .np-viral__fuego{font-size:14px; line-height:1} #landing-body-suit .np-viral__texto{ font-weight:600; opacity:.85; letter-spacing:.02em; } #landing-body-suit .np-viral__red{ display:inline-flex; align-items:center; gap:5px; font-weight:800; letter-spacing:.01em; } #landing-body-suit .np-viral__red + .np-viral__red{ margin-left:2px; padding-left:10px; border-left:1px solid var(--borde, rgba(0,0,0,.18)); } #landing-body-suit .np-viral__red svg{display:block; flex:0 0 auto} @media (max-width:380px){ #landing-body-suit .np-viral{font-size:12px; padding:7px 12px; gap:6px} } /* estrellas + ventas, arriba del precio. Las estrellas van en DORADO, no en el color del boton: en las landings de fondo oscuro y boton rojo se perdian contra el fondo y ensuciaban. El dorado es color de estrella en todos lados y sube el nivel. */ #landing-body-suit .np-social{ display:flex; align-items:center; gap:8px; margin:0; min-width:0; font-family:system-ui,-apple-system,'Segoe UI',sans-serif; } #landing-body-suit .np-estrellas{ color:#F0B429; font-size:13px; letter-spacing:1px; line-height:1; white-space:nowrap; flex:0 0 auto; /* nunca se parten en dos renglones */ } #landing-body-suit .np-social__texto{ font-size:12.5px; color:var(--tinta-suave); letter-spacing:.005em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #landing-body-suit .np-social__texto b{color:var(--tinta); font-weight:800} #landing-body-suit .np-opcion__nombre{ display:block; margin-bottom:8px; font-family:system-ui,-apple-system,'Segoe UI',sans-serif; font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--oro); } /* --- color: cuadritos con el tono real --- */ #landing-body-suit .np-muestras{display:flex; gap:14px; flex-wrap:wrap} #landing-body-suit .np-muestra{ position:relative; cursor:pointer; text-align:center; display:flex; flex-direction:column; align-items:center; gap:7px; } #landing-body-suit .np-muestra input{position:absolute; opacity:0; pointer-events:none} #landing-body-suit .np-muestra__tono{ display:block; width:58px; height:58px; border-radius:14px; border:2px solid var(--borde,rgba(46,52,64,.12)); box-shadow:inset 0 -8px 14px rgba(0,0,0,.10), 0 3px 10px rgba(46,52,64,.10); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; background:#D9D9D9; } #landing-body-suit .np-muestra__nombre{ font-family:system-ui,-apple-system,'Segoe UI',sans-serif; font-size:12.5px; font-style:normal; color:var(--tinta-suave); transition:color .18s ease, font-weight .18s ease; } #landing-body-suit .np-muestra input:checked + .np-muestra__tono{ border-color:var(--boton); transform:scale(1.06); box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--boton), inset 0 -8px 14px rgba(0,0,0,.10); } #landing-body-suit .np-muestra input:checked ~ .np-muestra__nombre{ color:var(--tinta); font-weight:700; } #landing-body-suit .np-muestra__tono[data-tono="palo-de-rosa"]{background:#C18B87} #landing-body-suit .np-muestra__tono[data-tono="azul"]{background:#5D7091} #landing-body-suit .np-muestra__tono[data-tono="crema"]{background:#EDE2CE} #landing-body-suit .np-muestra__tono[data-tono="gris"]{background:#5E5E5E} #landing-body-suit .np-muestra__tono[data-tono="cafe"]{background:#B5722F} #landing-body-suit .np-muestra__tono[data-tono="blanco"]{background:#F6F4EF} #landing-body-suit .np-muestra__tono[data-tono="rojo"]{background:#B8272E} #landing-body-suit .np-muestra__tono[data-tono="negro"]{background:#1C1C1C} #landing-body-suit .np-muestra__tono[data-tono="beige"]{background:#D9C7A7} #landing-body-suit .np-muestra__tono[data-tono="miel"]{background:#C68A3F} #landing-body-suit .np-muestra__tono[data-tono="rosado"]{background:#E8A2B8} #landing-body-suit .np-muestra__tono[data-tono="verde"]{background:#4E7A44} #landing-body-suit .np-muestra__tono[data-tono="vinotinto"]{background:#6E1F2C} /* --- talla: selector de borde a borde --- */ #landing-body-suit .np-tallas{ display:grid; gap:0; width:100%; border:1.5px solid var(--borde,#D5DCE4); border-radius:14px; overflow:hidden; background:var(--superficie,#fff); align-items:stretch; } #landing-body-suit .np-talla{position:relative; cursor:pointer; display:flex} #landing-body-suit .np-talla input{position:absolute; opacity:0; pointer-events:none} #landing-body-suit .np-talla + .np-talla span{border-left:1.5px solid var(--borde,#D5DCE4)} #landing-body-suit .np-talla span{ display:flex; align-items:center; justify-content:center; width:100%; min-height:56px; padding:12px 10px; text-align:center; font-family:system-ui,-apple-system,'Segoe UI',sans-serif; font-size:15.5px; font-weight:700; color:var(--tinta); line-height:1.25; hyphens:none; word-break:normal; transition:background .18s ease, color .18s ease; } #landing-body-suit .np-talla input:checked + span{ background:var(--boton); color:#fff; border-left-color:var(--boton); } #landing-body-suit .np-talla input:disabled + span{ opacity:.32; text-decoration:line-through; cursor:not-allowed; } /* Nombre del producto, justo encima del precio. Hereda la tipografia de titulares de cada landing (la serif en las que la usan), para que no se vea como un texto pegado sino como parte del diseno. */ /* Nombre del producto. Hereda la tipografia de titulares de la landing (la serif donde la haya) para que se lea como parte del diseno y no como un texto del sistema pegado encima del precio. */ /* Dos renglones: arriba nombre + precio, abajo estrellas + tachado. */ #landing-body-suit .np-cabecera{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 4px; } #landing-body-suit .np-cabecera--sec{ align-items:center; margin:0 0 16px; } #landing-body-suit .np-titulo{ /* cada landing puede fijar --fuente-titulo en su :root; si no la define, se queda con la del sistema como hasta ahora */ font-family:var(--fuente-titulo, system-ui,-apple-system,'Segoe UI',sans-serif); font-size:clamp(21px,5.8vw,27px); line-height:1.1; font-weight:800; color:var(--tinta); letter-spacing:-.015em; margin:0; text-transform:none; flex:1 1 auto; min-width:0; } /* PRECIO: el ancla de la pagina. Se le da aire y una jerarquia clara: el "antes" chiquito y apagado arriba, el precio grande solo, y el descuento como una ficha discreta al lado. Antes iban los tres al mismo nivel peleandose. */ /* El precio, pegado a la derecha: el numero grande arriba y debajo, en una sola linea, el tachado y el descuento. */ #landing-body-suit .np-precio{ flex:0 0 auto; margin:0; padding:0; display:flex; align-items:center; justify-content:flex-end; gap:8px; max-width:100%; font-family:system-ui,-apple-system,'Segoe UI',sans-serif; } /* el precio vive en el primer renglon, al frente del nombre */ #landing-body-suit .np-precio__ahora{ flex:0 0 auto; text-align:right; white-space:nowrap; font-family:system-ui,-apple-system,'Segoe UI',sans-serif; font-size:clamp(28px,7.8vw,36px); font-weight:900; color:var(--tinta); letter-spacing:-.028em; line-height:1; } #landing-body-suit .np-precio__antes{ font-size:13.5px; color:var(--tinta-suave); text-decoration:line-through; text-decoration-thickness:1px; opacity:.75; } /* La ficha del descuento va RELLENA: en contorno se perdia contra el fondo oscuro. Rellena se ve de una y sigue siendo chica. */ #landing-body-suit .np-precio__ahorro{ align-self:center; background:var(--boton); color:#fff; padding:3.5px 10px; border-radius:8px; font-size:12.5px; font-weight:900; letter-spacing:.02em; box-shadow:0 3px 10px rgba(0,0,0,.35); } /* la seccion de compra fija su padding horizontal para poder sangrar la banda */ #landing-body-suit .np-variantes{padding-left:22px; padding-right:22px} /* CONTADOR STICKY: barra de oferta que sigue toda la landing */ #landing-body-suit .np-cuenta__hueco{height:48px} #landing-body-suit .np-cuenta{ position:fixed; top:0; left:50%; transform:translateX(-50%); z-index:9500; width:100%; max-width:560px; height:48px; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 13px; background: radial-gradient(120% 180% at 0% 0%, rgba(255,255,255,.16), rgba(255,255,255,0) 45%), linear-gradient(90deg, #7A2545 0%, #5C1A33 100%); color:#fff; font-family:system-ui,-apple-system,'Segoe UI',sans-serif; box-shadow:0 4px 20px rgba(0,0,0,.24); border-bottom:1px solid rgba(255,255,255,.18); } /* brillo que barre la banda */ #landing-body-suit .np-cuenta::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(105deg, transparent 34%, rgba(255,255,255,.30) 50%, transparent 66%); transform:translateX(-120%); animation:np-brillo 5.5s ease-in-out infinite; } @keyframes np-brillo{ 0%,55%{transform:translateX(-120%)} 100%{transform:translateX(120%)} } @media (prefers-reduced-motion:reduce){ #landing-body-suit .np-cuenta::after{animation:none; display:none} } /* zona izquierda: la oferta */ #landing-body-suit .np-cuenta__deal{display:inline-flex; align-items:center; gap:8px; position:relative; z-index:1; min-width:0} #landing-body-suit .np-cuenta__rayo{ width:23px; height:23px; flex:0 0 auto; padding:4px; border-radius:50%; background:rgba(255,255,255,.18); filter:drop-shadow(0 1px 1px rgba(0,0,0,.2)); } #landing-body-suit .np-cuenta__precio{display:inline-flex; align-items:baseline; gap:5px; white-space:nowrap; flex:0 0 auto} #landing-body-suit .np-cuenta__antes{font-size:11px; opacity:.72; text-decoration:line-through} #landing-body-suit .np-cuenta__ahora{font-size:15.5px; font-weight:900; letter-spacing:-.02em} #landing-body-suit .np-cuenta__desc{ background:var(--superficie,#fff); color:var(--boton-hondo); padding:3px 8px; border-radius:7px; font-weight:900; font-size:13px; line-height:1.1; letter-spacing:-.02em; box-shadow:0 2px 7px rgba(0,0,0,.22); flex:0 0 auto; } #landing-body-suit .np-cuenta__envio{ font-weight:800; font-size:11px; line-height:1.1; text-transform:uppercase; letter-spacing:.02em; white-space:nowrap; } #landing-body-suit .np-cuenta__envio b{color:#FFE9B0; font-weight:900} /* segunda linea: dice que la oferta no se repite, no solo que hay reloj */ #landing-body-suit .np-cuenta__envio em{ display:block; font-style:normal; font-size:8.5px; font-weight:700; opacity:.82; letter-spacing:.06em; } /* zona derecha: el cronometro en fichas */ #landing-body-suit .np-cuenta__timer{display:inline-flex; align-items:center; gap:4px; position:relative; z-index:1; flex:0 0 auto} #landing-body-suit .np-cuenta__reloj-ico{width:15px; height:15px; opacity:.85; margin-right:2px} /* "Termina en" al lado del reloj: sin esto el cronometro no decia de que */ #landing-body-suit .np-cuenta__termina{ font-size:8.5px; font-weight:800; line-height:1.05; text-transform:uppercase; letter-spacing:.04em; opacity:.9; text-align:right; margin-right:4px; } #landing-body-suit .np-cuenta__tile{ background:rgba(0,0,0,.32); color:#fff; font-weight:900; font-size:15.5px; line-height:1; font-variant-numeric:tabular-nums; padding:6px 6px; border-radius:6px; min-width:28px; text-align:center; box-shadow:inset 0 -2px 0 rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.16); } #landing-body-suit .np-cuenta__colon{font-weight:900; font-size:15px; opacity:.9; animation:np-parpadeo 1s step-end infinite} @keyframes np-parpadeo{50%{opacity:.25}} @media (prefers-reduced-motion:reduce){#landing-body-suit .np-cuenta__colon{animation:none}} /* en celular sobra el tachado (el -32% ya dice el descuento): se oculta para que "Envío GRATIS" y el reloj nunca se monten. Solo vuelve en anchos. */ @media (max-width:479px){ #landing-body-suit .np-cuenta__antes{display:none} } @media (max-width:369px){ #landing-body-suit .np-cuenta__envio{display:none} } /* BANDA DE URGENCIA a todo el ancho. Va separada del precio: antes quedaba pegada debajo y los dos bloques se leian como uno solo. */ #landing-body-suit .np-urgencia{ display:flex; align-items:center; justify-content:center; gap:9px; margin:6px -22px 20px; padding:11px 16px; background:linear-gradient(90deg, rgba(122,37,69,.08) 0%, rgba(122,37,69,.16) 50%, rgba(122,37,69,.08) 100%); border-top:1px solid rgba(122,37,69,.20); border-bottom:1px solid rgba(122,37,69,.20); font-family:system-ui,-apple-system,'Segoe UI',sans-serif; font-size:13px; color:var(--tinta); text-align:center; } /* el numero de gente viendo va en BLANCO: en el color de marca se perdia contra la banda, que ya es de ese mismo tono */ #landing-body-suit .np-urgencia b{color:var(--tinta); font-weight:900} /* el monito toma el color del texto: claro en landing oscura, oscuro en landing clara. Con el rojo de marca se perdia sobre el vino. */ #landing-body-suit .np-gente{width:18px; height:18px; color:var(--tinta); flex:0 0 auto} #landing-body-suit .np-vivo{ width:9px; height:9px; border-radius:50%; background:#2ECC40; flex:0 0 auto; box-shadow:0 0 0 0 rgba(46,204,64,.55); animation:np-vivo-pulso 1.7s ease-out infinite; } @keyframes np-vivo-pulso{ 0%{box-shadow:0 0 0 0 rgba(46,204,64,.55)} 70%{box-shadow:0 0 0 9px rgba(46,204,64,0)} 100%{box-shadow:0 0 0 0 rgba(46,204,64,0)} } @media (prefers-reduced-motion:reduce){ #landing-body-suit .np-vivo{animation:none} } #landing-body-suit .np-lote{margin:14px auto 0; max-width:360px; text-align:center} #landing-body-suit .np-stock{ height:4px; border-radius:999px; margin:0 0 7px; background:var(--borde,var(--borde,#D5DCE4)); overflow:hidden; } #landing-body-suit .np-stock__fill{ height:100%; border-radius:999px; background:linear-gradient(90deg, #7A2545, #5C1A33); transition:width 1.1s cubic-bezier(.22,.61,.36,1); } /* AVISO DE LOTE: tiene que verse. El numero baja solo mientras el cliente lee, en una caja que no se puede pasar por alto. */ #landing-body-suit .np-stock__aviso{ position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:8px; margin:0 auto; padding:7px 14px; border-radius:999px; background: radial-gradient(120% 180% at 0% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%), linear-gradient(100deg, rgba(122,37,69,.24) 0%, rgba(122,37,69,.08) 100%); border:1.5px solid rgba(122,37,69,.45); box-shadow:0 6px 20px rgba(0,0,0,.16); font-family:system-ui,-apple-system,'Segoe UI',sans-serif; } /* un brillo cruza la caja cada tanto: la hace mirar sin gritar */ #landing-body-suit .np-stock__aviso::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(105deg, transparent 36%, rgba(255,255,255,.22) 50%, transparent 64%); transform:translateX(-120%); animation:np-brillo-stock 6s ease-in-out infinite; } @keyframes np-brillo-stock{ 0%,58%{transform:translateX(-120%)} 100%{transform:translateX(120%)} } @media (prefers-reduced-motion:reduce){ #landing-body-suit .np-stock__aviso::after{display:none} } /* el numero va en su propia ficha roja: se lee de lejos */ #landing-body-suit .np-stock__num{ flex:0 0 auto; min-width:28px; height:auto; padding:2px 8px; display:flex; align-items:center; justify-content:center; border-radius:6px; position:relative; z-index:1; background:linear-gradient(135deg, var(--boton) 0%, var(--boton-hondo) 100%); color:#fff; font-size:15px; font-weight:800; line-height:1.3; letter-spacing:-.03em; font-variant-numeric:tabular-nums; box-shadow:0 5px 16px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.22); } #landing-body-suit .np-stock__cuerpo{ display:flex; flex-direction:row; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; min-width:0; position:relative; z-index:1; } #landing-body-suit .np-stock__txt{ font-size:11.5px; font-weight:600; color:var(--tinta); line-height:1.3; } #landing-body-suit .np-stock__baja{ font-size:10.5px; font-weight:600; color:var(--boton); opacity:0; transition:opacity .35s ease; } #landing-body-suit .np-stock__baja.visible{opacity:1} #landing-body-suit .np-stock__baja::before{content:'● '; font-size:8px; vertical-align:middle} /* RESUMEN DE CALIFICACION: siempre en la seccion de reseñas. La tarjeta se pinta sobre una superficie CLARA. En una landing oscura el --tinta de la pagina es casi blanco, y el "4.8" y los porcentajes salian blancos sobre blanco: se veia una tarjeta vacia con dos barras rojas flotando. Por eso declara aqui sus propios tonos de texto y deja de depender de los de la pagina. Si una landing quiere la tarjeta oscura, redefine --superficie Y estos dos. */ #landing-body-suit .np-rating{ --tinta:#16181C; --tinta-suave:#6B7280; background:var(--superficie,#fff); border:1px solid var(--borde,var(--borde,#D5DCE4)); border-radius:18px; box-shadow:0 10px 30px rgba(0,0,0,.07); padding:18px 18px 15px; margin:0 auto 18px; max-width:440px; text-align:left; } #landing-body-suit .np-rating__score{display:flex; align-items:center; gap:13px; margin-bottom:14px} #landing-body-suit .np-rating__score > b{font-size:44px; font-weight:900; line-height:.85; letter-spacing:-.03em; color:var(--tinta)} #landing-body-suit .np-rating__stars{color:#F5A623; font-size:16px; letter-spacing:2px} #landing-body-suit .np-rating__base{display:block; font-size:11.5px; color:var(--tinta-suave); margin-top:4px} #landing-body-suit .np-rating__bars{display:grid; gap:6px} #landing-body-suit .np-rating__row{display:grid; grid-template-columns:28px 1fr 36px; align-items:center; gap:9px; font-size:11px; color:var(--tinta-suave)} #landing-body-suit .np-rating__lbl{color:var(--tinta); font-weight:700; white-space:nowrap} /* Las barras: riel parejo y relleno con un minimo de ancho. Sin el minimo, la fila del 1% dibujaba una raya de dos pixeles que parecia un error. */ #landing-body-suit .np-rating__track{height:7px; border-radius:999px; background:rgba(22,24,28,.10); overflow:hidden} #landing-body-suit .np-rating__track b{display:block; height:100%; min-width:0; border-radius:999px; background:var(--boton)} #landing-body-suit .np-rating__track b[style="width:0%"]{background:transparent} #landing-body-suit .np-rating__row em{text-align:right; font-variant-numeric:tabular-nums; font-style:normal} #landing-body-suit .np-rating__hi{ margin-top:14px; display:flex; align-items:center; gap:11px; background:rgba(122,37,69,.07); border:1px solid rgba(122,37,69,.18); border-radius:12px; padding:11px 13px; font-size:13px; color:var(--tinta); text-align:left; line-height:1.3; } #landing-body-suit .np-rating__hi-ico{ width:27px; height:27px; border-radius:50%; background:var(--boton); flex:0 0 auto; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 7px rgba(122,37,69,.35); } #landing-body-suit .np-rating__hi-ico svg{width:15px; height:15px; stroke:#fff; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round} #landing-body-suit .np-rating__hi b{color:var(--boton-hondo); font-weight:800} #landing-body-suit .np-rating__hi .pct{font-size:16px; font-weight:900} /* precio por pack dentro del selector: que se vea que el pack es negocio */ #landing-body-suit .np-talla span{flex-direction:column; gap:3px} #landing-body-suit .np-talla__precio{ font-size:12.5px; font-weight:800; opacity:.85; letter-spacing:-.01em; } #landing-body-suit .np-talla__unidad{ font-size:10px; font-weight:600; opacity:.6; } /* ============================================================ BUNDLES QUE SE VEN ------------------------------------------------------------ El pack deja de ser un recuadrito de texto: cada opcion es una tarjeta con la foto real de ESE pack (uno, dos o tres botes), su precio, lo que sale la unidad y el ahorro. La elegida se marca con el color de la marca y un check. ============================================================ */ /* los packs plegados: se ve el elegido, el resto se abre al tocar */ #landing-body-suit .np-packs-fold{ border:1.5px solid var(--borde,rgba(0,0,0,.16)); border-radius:16px; background:var(--superficie,#fff); overflow:hidden; box-shadow:0 3px 12px rgba(0,0,0,.07); } #landing-body-suit .np-packs-fold__resumen{ list-style:none; cursor:pointer; padding:13px 15px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-family:system-ui,-apple-system,'Segoe UI',sans-serif; } #landing-body-suit .np-packs-fold__resumen::-webkit-details-marker{display:none} #landing-body-suit .np-packs-fold__izq{display:flex; align-items:center; gap:11px; min-width:0} #landing-body-suit .np-packs-fold__foto{ flex:0 0 auto; width:46px; height:46px; border-radius:10px; overflow:hidden; background:rgba(127,127,127,.10); display:flex; align-items:center; justify-content:center; } #landing-body-suit .np-packs-fold__foto img{width:100%; height:100%; object-fit:cover; display:block} #landing-body-suit .np-packs-fold__txt{display:flex; flex-direction:column; gap:2px; min-width:0} #landing-body-suit .np-packs-fold__elegido{ font-size:15.5px; font-weight:800; color:var(--tinta); line-height:1.2; } #landing-body-suit .np-packs-fold__elegido b{color:var(--boton)} /* solo el triangulo, grandecito: el "Cambiar" sobraba */ #landing-body-suit .np-packs-fold__cambiar{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; color:var(--boton); } #landing-body-suit .np-packs-fold__cambiar::after{content:'▾'; font-size:22px; line-height:1} #landing-body-suit .np-packs-fold[open] .np-packs-fold__cambiar::after{content:'▴'} /* el texto del resumen NUNCA cambia de color: ni al tocar, ni abierto. El tema le metia su color de hover al summary y se veia negro. */ #landing-body-suit .np-packs-fold__resumen, #landing-body-suit .np-packs-fold__resumen:hover, #landing-body-suit .np-packs-fold__resumen:active, #landing-body-suit .np-packs-fold[open] .np-packs-fold__resumen{ color:var(--tinta) !important; background:transparent !important; } #landing-body-suit .np-packs-fold__elegido, #landing-body-suit .np-packs-fold__resumen:hover .np-packs-fold__elegido, #landing-body-suit .np-packs-fold__resumen:active .np-packs-fold__elegido{ color:var(--tinta) !important; } /* insignia "Mas elegido" tambien en el resumen plegado */ #landing-body-suit .np-packs-fold__mini-cinta{ display:inline-block; margin-left:7px; padding:2px 8px; border-radius:999px; background:var(--boton); color:#fff; vertical-align:middle; font-size:9.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; } #landing-body-suit .np-packs-fold[open] .np-packs-fold__resumen{ border-bottom:1px solid var(--borde,rgba(0,0,0,.12)); } #landing-body-suit .np-packs-fold .np-packs{padding:12px 12px 14px} /* Tarjetas de pack COMPACTAS: con tres ofertas a la vista ocupaban media pantalla y empujaban el boton fuera de vista. Se achico la foto, el relleno y el espacio entre tarjetas, sin tocar los tamanos de precio (que son los que tienen que leerse de lejos). */ #landing-body-suit .np-packs{display:grid; gap:8px} #landing-body-suit .np-pack{position:relative; cursor:pointer; display:block} #landing-body-suit .np-pack input{position:absolute; opacity:0; pointer-events:none} #landing-body-suit .np-pack__caja{ position:relative; display:flex; align-items:center; gap:10px; padding:8px 12px 8px 8px; border-radius:13px; background:var(--superficie,#fff); border:2px solid var(--borde,rgba(0,0,0,.14)); box-shadow:0 4px 16px rgba(0,0,0,.10); transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease; } #landing-body-suit .np-pack__foto{ flex:0 0 auto; width:62px; height:62px; border-radius:10px; overflow:hidden; background:rgba(127,127,127,.10); display:flex; align-items:center; justify-content:center; } #landing-body-suit .np-pack__foto img{ width:100%; height:100%; object-fit:cover; display:block; } #landing-body-suit .np-pack__cuerpo{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; font-family:system-ui,-apple-system,'Segoe UI',sans-serif; text-align:left; } #landing-body-suit .np-pack__nombre{ font-size:14px; font-weight:800; color:var(--tinta); letter-spacing:-.01em; line-height:1.15; } #landing-body-suit .np-pack__precios{display:flex; align-items:baseline; gap:7px; flex-wrap:wrap} #landing-body-suit .np-pack__ahora{ font-size:18px; font-weight:900; color:var(--tinta); letter-spacing:-.02em; } #landing-body-suit .np-pack__antes{ font-size:11.5px; color:var(--tinta-suave); text-decoration:line-through; } #landing-body-suit .np-pack__unidad{ font-size:11.5px; font-weight:700; color:var(--boton); } /* Oferta unica: no hay nada que elegir, asi que la ficha no se comporta como boton (ni cursor de mano, ni levantarse al estar "elegida"). */ #landing-body-suit .np-pack--solo{cursor:default} #landing-body-suit .np-pack--solo .np-pack__caja{ border-color:var(--boton); box-shadow:0 8px 24px rgba(0,0,0,.14); transform:none !important; } /* sello de envio gratis dentro de la tarjeta de oferta */ #landing-body-suit .np-pack__envio{ display:inline-flex; align-items:center; gap:4px; align-self:flex-start; margin-top:2px; padding:2px 8px 2px 6px; border-radius:999px; background:rgba(46,160,90,.12); color:#1E7A45; font-size:10.5px; font-weight:800; letter-spacing:.01em; line-height:1.25; } #landing-body-suit .np-pack__envio svg{ width:14px; height:14px; flex:0 0 auto; stroke:#1E7A45; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } #landing-body-suit .np-pack__envio svg circle{fill:#1E7A45; stroke:none} /* Regalo que solo trae ese pack (por ejemplo las membresias que vienen con el de dos unidades). Sale del metacampo custom.regalo de la variante, asi que cada producto pone el suyo y ninguno lo inventa. */ #landing-body-suit .np-pack__regalo{ display:inline-flex; align-items:center; gap:4px; align-self:flex-start; margin-top:3px; padding:2px 8px 2px 6px; border-radius:999px; background:rgba(214,158,46,.14); color:#B7791F; font-size:10.5px; font-weight:800; letter-spacing:.01em; line-height:1.25; } #landing-body-suit .np-pack__regalo svg{ width:13px; height:13px; flex:0 0 auto; stroke:#B7791F; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } /* El formulario de pedido va SIN selector de cantidad: la cantidad la define el pack que eligio arriba. Dejar el +/- confundia y permitia pedir cantidades que no cuadran con la oferta mostrada. */ #landing-body-suit .np-cantidad, #landing-body-suit quantity-selector, #landing-body-suit .quantity, #landing-body-suit .quantity__input, #landing-body-suit .product-form__quantity, #landing-body-suit [class*="quantity-selector"], #landing-body-suit [class*="qty-selector"]{display:none !important} /* OJO: antes aqui se escondia TODO lo que tuviera "quantity" dentro del formulario de Releasit, para matar el +/-. El problema es que la TARJETA DE OFERTA de Releasit se llama rsi-quantity-product (y sus partes rsi-quantity-title / -price / -plaque): caian en la misma red y la oferta desaparecia del formulario. Ahora no se esconde nada de ahi: se ve la tarjeta de oferta con su precio tachado y sus insignias, y el cliente puede ver la cantidad (1) y cambiarla si quiere. */ /* el circulo que marca cual esta elegido */ #landing-body-suit .np-pack__marca{ flex:0 0 auto; width:23px; height:23px; border-radius:50%; border:2px solid var(--borde,rgba(0,0,0,.22)); position:relative; transition:border-color .18s ease, background .18s ease; } #landing-body-suit .np-pack input:checked + .np-pack__caja{ border-color:var(--boton); box-shadow:0 8px 24px rgba(0,0,0,.16); transform:translateY(-1px); } #landing-body-suit .np-pack input:checked + .np-pack__caja .np-pack__marca{ background:var(--boton); border-color:var(--boton); } #landing-body-suit .np-pack input:checked + .np-pack__caja .np-pack__marca::after{ content:''; position:absolute; left:7px; top:3px; width:5px; height:10px; border:solid #fff; border-width:0 2.4px 2.4px 0; transform:rotate(45deg); } /* cinta del pack recomendado */ #landing-body-suit .np-pack__cinta{ position:absolute; top:-10px; right:12px; z-index:2; background:var(--boton); color:#fff; padding:3px 11px; border-radius:999px; font-family:system-ui,-apple-system,'Segoe UI',sans-serif; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; box-shadow:0 3px 10px rgba(0,0,0,.28); } /* Cinta de urgencia (ultimo pack): opcional, solo si el proyecto la pide. Va del MISMO color de marca que la de "Mas elegido": antes iba en rojo fijo y en las landings rosadas/doradas chocaba, se veian dos rojos distintos peleando en la misma pantalla. */ #landing-body-suit .np-pack__cinta--urgente{ background:var(--boton); } @media (max-width:360px){ #landing-body-suit .np-pack__foto{width:70px; height:70px} #landing-body-suit .np-pack__nombre{font-size:14.5px} #landing-body-suit .np-pack__ahora{font-size:17.5px} } /* estrella "vacia" para las reseñas que no son 5 perfectas */ #landing-body-suit [class$="__estrellas"] .v{opacity:.30} #landing-body-suit [class$="__fecha"]{ color:var(--tinta-suave); font-size:11px; margin-top:-2px; margin-bottom:7px; } /* barra de compra fija: sigue al cliente con precio + boton */ /* El 29% de los que tocan el boton lo tocan DOS Y TRES VECES seguidas, con 0 segundos entre toque y toque: tocan, no ven ninguna respuesta y vuelven a tocar. Cada toque de mas cuenta como un pago iniciado, y el que repite casi nunca compra. Aqui el boton contesta al dedo al instante. */ #landing-body-suit a.boton[data-abriendo], #landing-body-suit .np-barra a[data-abriendo], #landing-body-suit .np-barra button[data-abriendo]{ pointer-events:none; opacity:.72; position:relative} #landing-body-suit a.boton[data-abriendo]::after, #landing-body-suit .np-barra a[data-abriendo]::after, #landing-body-suit .np-barra button[data-abriendo]::after{ content:''; position:absolute; right:16px; top:50%; margin-top:-9px; width:18px; height:18px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:npGira .7s linear infinite} @keyframes npGira{to{transform:rotate(360deg)}} #landing-body-suit .np-barra{ position:fixed; left:50%; bottom:0; z-index:9000; transform:translateX(-50%) translateY(125%); width:100%; max-width:560px; display:flex; align-items:center; gap:12px; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:var(--superficie,#fff); border-top:1px solid var(--borde,var(--borde,#D5DCE4)); box-shadow:0 -8px 26px rgba(0,0,0,.14); transition:transform .4s cubic-bezier(.22,.61,.36,1); } #landing-body-suit .np-barra.visible{transform:translateX(-50%) translateY(0)} #landing-body-suit .np-barra__precio{line-height:1.12; flex:0 0 auto} #landing-body-suit .np-barra__antes{ display:block; font-size:11px; color:var(--tinta-suave); text-decoration:line-through; } #landing-body-suit .np-barra__ahora{display:block; font-size:18px; font-weight:900; color:var(--tinta)} #landing-body-suit .np-barra__cta{ flex:1; text-align:center; text-decoration:none; padding:14px 16px; border-radius:999px; color:#fff !important; font-weight:800; font-size:15.5px; line-height:1.2; font-family:system-ui,-apple-system,'Segoe UI',sans-serif; background:linear-gradient(135deg, #7A2545 0%, #5C1A33 100%); box-shadow:0 8px 20px rgba(122,37,69,.42); } #landing-body-suit .np-agotado{ display:none; margin-top:12px; padding:10px 14px; border-radius:10px; background:#FDECEC; color:#A32B2B; border:1px solid #F2C2C2; font-family:system-ui,sans-serif; font-size:13.5px; } #landing-body-suit .np-agotado.visible{display:block} /* ============================================================ NUESTRO BOTON, QUE ES EL DE RELEASIT ------------------------------------------------------------ Va dentro de un formulario de producto real, que es lo que Releasit busca para engancharse. No hay seccion de informacion de producto en ninguna parte. ============================================================ */ #landing-body-suit #np-form{margin-top:18px} /* ------------------------------------------------------------ UN SOLO BOTON. El nuestro existe solo para que Releasit se enganche: queda plegado, sin ocupar espacio. El que ve el cliente es el de Releasit, vestido con nuestro estilo (.np-boton-real, que le pone el JavaScript en cuanto la app lo dibuja). ------------------------------------------------------------ */ /* El nuestro queda PLEGADO (sr-only): existe solo para que Releasit se enganche. El que ve y toca el cliente es el de Releasit (.np-boton-real), que abre el popup COD. Igual que en las demas landings que funcionan. */ #landing-body-suit #np-boton{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important; } #landing-body-suit #np-boton.oculto{display:none !important} /* mas esbelto: antes iba con 19px de relleno y se veia gordo */ #landing-body-suit .np-boton-real, #landing-body-suit .np-boton-real button{ display:block !important; width:100% !important; max-width:100% !important; margin:0 auto !important; padding:13px 20px !important; border:0 !important; border-radius:999px !important; cursor:pointer !important; background:linear-gradient(135deg, #7A2545 0%, #5C1A33 100%) !important; color:#fff !important; text-align:center !important; font-family:system-ui,-apple-system,'Segoe UI',sans-serif !important; font-size:16.5px !important; font-weight:800 !important; letter-spacing:.01em !important; text-transform:none !important; line-height:1.3 !important; box-shadow:0 8px 20px rgba(122,37,69,.32) !important; transition:transform .18s ease, box-shadow .18s ease !important; animation:np-latido 2.6s ease-in-out infinite; } /* el subtexto del boton ("Envio gratis - Pagas al recibir") mas chico */ #landing-body-suit .np-boton-real small, #landing-body-suit .np-boton-real span:not(:first-child){ font-size:12px !important; font-weight:500 !important; opacity:.85 !important; } #landing-body-suit .np-boton-real:hover{ transform:translateY(-2px) !important; box-shadow:0 14px 32px rgba(122,37,69,.46) !important; } #landing-body-suit .np-boton-real:active{transform:translateY(0) !important} #landing-body-suit .np-boton-real *{ color:#fff !important; background:none !important; font-family:inherit !important; } /* Releasit a veces pega un icono de carrito junto al boton: fuera, tanto si quedo dentro de la pastilla como si quedo de hermano suelto. */ #landing-body-suit .np-boton-real svg, #landing-body-suit .np-boton-real img, #landing-body-suit .np-boton-real i, #landing-body-suit :has(> .np-boton-real) > svg, #landing-body-suit :has(> .np-boton-real) > img, #landing-body-suit :has(> .np-boton-real) > i{ display:none !important; } @keyframes np-latido{ 0%,100%{box-shadow:0 10px 26px rgba(122,37,69,.36)} 50%{box-shadow:0 10px 34px rgba(122,37,69,.58)} } @media (prefers-reduced-motion:reduce){ #landing-body-suit .np-boton-real{animation:none} } /* Red de seguridad: si por lo que sea quedara una seccion de informacion de producto del tema, no se ve. En plantillas JSON el id real es shopify-section-template--XXXX__main, no shopify-section-main. Por eso el selector va por el final. */ [id^="shopify-section-"][id$="__main"], [id^="shopify-section-"][id$="__related-products"]{display:none !important} /* Cabecera y pie DEL TEMA fuera: la landing es de venta directa y el menu, el buscador y el carrito del tema solo son fugas de conversion. Se apunta a los grupos de seccion de Shopify (header-group / footer-group), nunca a nuestro