/* Slimming archive expects .webp or .no-webp on for hero/product backgrounds. This file is a safety net when detection is late or missing. */ html:not(.webp):not(.no-webp) .slimming-page .screen { background: url(/img/screen1bg.jpg) center no-repeat; background-size: cover; } html:not(.webp):not(.no-webp) .slimming-page .screen__inner::before { background: url(/img/lady.png) 0 100% no-repeat; background-size: contain; } html:not(.webp):not(.no-webp) .slimming-page .product__leaves { background: url(/img/leaves.png) 0 0 no-repeat; } html:not(.webp):not(.no-webp) .slimming-page .product__product-photo { background: url(/img/product.png) no-repeat center/contain; } html:not(.webp):not(.no-webp) .slimming-page .action__figure.ph1 { background: url(/img/c1.jpg) no-repeat center/contain; } html:not(.webp):not(.no-webp) .slimming-page .action__figure.ph2 { background: url(/img/c2.jpg) no-repeat center/contain; } html:not(.webp):not(.no-webp) .slimming-page .action__figure.ph3 { background: url(/img/c3.jpg) no-repeat center/contain; } html:not(.webp):not(.no-webp) .slimming-page .action__figure.ph4 { background: url(/img/c4.jpg) no-repeat center/contain; } html:not(.webp):not(.no-webp) .slimming-page .action__figure.ph5 { background: url(/img/c5.jpg) no-repeat center/contain; } .slimming-page .screen__h1 { max-width: 484px; margin: 8px 0 0 10px; color: #fff; font-size: 24px; font-weight: 700; line-height: 32px; display: block; } .slimming-page .screen__subtitle { max-width: 484px; margin: 8px 0 0 10px; color: #fff; font-size: 20px; font-weight: 400; line-height: 28px; display: block; } /* ========================================================================= BIONICA — capa de diseño «selling page» (encima del template vendor) ========================================================================= */ .slimming-page { scroll-behavior: smooth; } .slimming-page [id] { scroll-margin-top: 72px; } /* ---------- Header / menú sticky ---------- */ .bio-header { position: sticky; top: 0; z-index: 50; background: rgba(28, 20, 18, .96); backdrop-filter: saturate(140%) blur(6px); border-bottom: 1px solid rgba(255,255,255,.08); } .bio-header__inner { max-width: 1120px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 18px; } .bio-header__logo { display: flex; flex-direction: column; line-height: 1; color: #fff; font-weight: 800; font-size: 22px; letter-spacing: .5px; text-decoration: none; } .bio-header__logo-sub { font-size: 10px; font-weight: 500; color: #e3161e; letter-spacing: 2px; text-transform: uppercase; margin-top: 3px; } .bio-header__nav { display: none; margin-left: auto; gap: 22px; } .bio-header__link { color: #e8e2df; text-decoration: none; font-size: 15px; font-weight: 500; transition: color .15s; } .bio-header__link:hover { color: #fff; } .bio-header__cta { margin-left: auto; background: #1faa4b; color: #fff; text-decoration: none; font-weight: 700; font-size: 15px; padding: 9px 22px; border-radius: 30px; transition: background .15s; } .bio-header__cta:hover { background: #188a3d; } @media (min-width: 860px) { .bio-header__nav { display: flex; } .bio-header__cta { margin-left: 0; } } /* ---------- Tarjeta de pedido limpia ---------- */ .slimming-page .bio-order { position: relative; z-index: 6; max-width: 380px; margin: 26px auto 0; background: #fff; border-radius: 20px; padding: 30px 24px 24px; box-shadow: 0 20px 48px rgba(0,0,0,.32); text-align: center; } .slimming-page .bio-order__badge { position: absolute; top: -20px; right: 22px; width: 62px; height: 62px; border-radius: 50%; background: #e3161e; color: #fff; font-weight: 800; font-size: 17px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px rgba(227,22,30,.4); } .slimming-page .bio-order__title { color: #20232a; font-size: 20px; font-weight: 800; margin: 0 0 16px; padding: 0 34px; } .slimming-page .bio-order__price { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-bottom: 20px; } .slimming-page .bio-order__price-old { color: #9aa0a6; font-size: 20px; text-decoration: line-through; } .slimming-page .bio-order__price-new { color: #e3161e; font-size: 36px; font-weight: 800; line-height: 1; } .slimming-page .bio-order__arrow { color: #c7ccd1; font-size: 18px; } .slimming-page .bio-order__price .x_currency { font-size: 14px; font-weight: 700; text-transform: uppercase; margin-left: 3px; } /* ---------- Formulario ---------- */ .slimming-page .bio-form { display: block; margin: 0; } .slimming-page .bio-form__field { position: relative; display: block; margin-bottom: 12px; } .slimming-page .bio-form__icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; background-repeat: no-repeat; background-position: center; background-size: contain; opacity: .8; } .slimming-page .bio-form__icon--user { background-image: url(/img/name.png); } .slimming-page .bio-form__icon--phone { background-image: url(/img/tel.png); } .slimming-page .bio-form__input { display: block; width: 100%; height: 54px; box-sizing: border-box; margin: 0; padding: 0 16px 0 46px; border: 1px solid #e3e6ea; border-radius: 12px; background: #f6f8fa; color: #20232a; font-size: 16px; font-family: inherit; } .slimming-page .bio-form__input::placeholder { color: #9aa0a6; } .slimming-page .bio-form__input:focus { outline: none; border-color: #e3161e; background: #fff; box-shadow: 0 0 0 3px rgba(227,22,30,.12); } .slimming-page .bio-form__btn { display: block; width: 100%; height: 56px; margin-top: 6px; border: 0; border-radius: 12px; cursor: pointer; background: #1faa4b; color: #fff; font-size: 18px; font-weight: 800; font-family: inherit; box-shadow: 0 10px 22px rgba(31,170,75,.28); transition: background .15s, transform .05s; } .slimming-page .bio-form__btn:hover { background: #188a3d; } .slimming-page .bio-form__btn:active { transform: translateY(1px); } .slimming-page .bio-form__btn:disabled { opacity: .7; cursor: default; } .slimming-page .bio-form__note { margin: 12px 0 0; font-size: 12px; color: #8a9099; } /* ---------- Franja de confianza ---------- */ .bio-trust { background: #fff; border-bottom: 1px solid #eee; } .bio-trust__inner { max-width: 1120px; margin: 0 auto; padding: 18px 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 10px; } .bio-trust__item { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #33383f; } .bio-trust__icon { font-size: 20px; } @media (min-width: 760px) { .bio-trust__inner { grid-template-columns: repeat(4, 1fr); justify-items: center; } } /* ---------- FAQ acordeón ---------- */ .bio-faq { background: #f7f8fa; padding: 56px 16px 64px; } .bio-faq__inner { max-width: 820px; margin: 0 auto; } .bio-faq__title { text-align: center; color: #20232a; font-size: 28px; font-weight: 800; margin: 0 0 28px; } .bio-faq__list { display: block; } .bio-faq__item { background: #fff; border: 1px solid #ececec; border-radius: 14px; margin-bottom: 14px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.04); } .bio-faq__q { list-style: none; cursor: pointer; position: relative; user-select: none; padding: 20px 58px 20px 22px; font-size: 17px; font-weight: 700; color: #20232a; } .bio-faq__q::-webkit-details-marker { display: none; } .bio-faq__q::after { content: '+'; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: #fdecec; color: #e3161e; font-size: 22px; font-weight: 400; line-height: 26px; text-align: center; transition: transform .2s, background .2s; } .bio-faq__q:hover { background: #fafafa; } .bio-faq__item[open] .bio-faq__q::after { content: '\2013'; background: #e3161e; color: #fff; } .bio-faq__a { padding: 0 22px 20px; color: #4a4f57; font-size: 15px; line-height: 1.65; } /* ---------- CTA final limpio (reemplaza el bloque con foto torcida) ---------- */ .bio-cta { background: #241a18 url(/img/screen1bg.jpg) center/cover no-repeat; background-blend-mode: multiply; padding: 56px 16px 64px; } .bio-cta__inner { max-width: 1000px; margin: 0 auto; display: grid; gap: 28px; align-items: center; } .bio-cta__logo { color: #e3161e; font-weight: 800; font-size: 30px; letter-spacing: 1px; margin: 0 0 10px; } .bio-cta__title { color: #fff; font-size: 26px; font-weight: 800; line-height: 1.25; margin: 0 0 12px; } .bio-cta__sub { color: #d8d2cf; font-size: 16px; line-height: 1.55; margin: 0; } .bio-cta .bio-order { margin-top: 0; } @media (min-width: 860px) { .bio-cta__inner { grid-template-columns: 1.1fr .9fr; } } /* ---------- Cookie ---------- */ .bio-cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 720px; margin: 0 auto; background: #20232a; color: #eceff3; border-radius: 14px; padding: 16px 18px; box-shadow: 0 12px 34px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 12px; } .bio-cookie[hidden] { display: none; } .bio-cookie__text { margin: 0; font-size: 14px; line-height: 1.5; } .bio-cookie__actions { display: flex; justify-content: flex-end; } .bio-cookie__btn { background: #1faa4b; color: #fff; border: 0; border-radius: 10px; font-weight: 700; font-size: 15px; padding: 10px 26px; cursor: pointer; } .bio-cookie__btn:hover { background: #188a3d; } @media (min-width: 620px) { .bio-cookie { flex-direction: row; align-items: center; } .bio-cookie__text { flex: 1; } .bio-cookie__actions { justify-content: flex-end; } } /* ---------- Footer ---------- */ .bio-footer { background: #1c1412; color: #cfc7c3; } .bio-footer__inner { max-width: 1000px; margin: 0 auto; padding: 40px 16px; text-align: center; } .bio-footer__logo { color: #fff; font-size: 22px; font-weight: 800; margin: 0; letter-spacing: .5px; } .bio-footer__tagline { margin: 6px 0 0; font-size: 14px; color: #b7aca7; } .bio-footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 22px 0; } .bio-footer__nav a { color: #e8e2df; text-decoration: none; font-size: 14px; } .bio-footer__nav a:hover { color: #fff; text-decoration: underline; } .bio-footer__disclaimer { max-width: 760px; margin: 0 auto; font-size: 12px; line-height: 1.6; color: #9a8f8a; } .bio-footer__copy { margin: 18px 0 0; font-size: 13px; color: #b7aca7; }