descendiente — moverlo a #alcaplus-landing-app lo dejaría sin efecto y rompería el scroll suave de los enlaces "#kits", "#faq", etc. Es seguro: este archivo solo se carga en la página de la landing, así que nunca se filtra a otras páginas del sitio. */ html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:92px;overflow-x:clip;} #alcaplus-landing-app img, #alcaplus-landing-app svg{display:block;max-width:100%;} #alcaplus-landing-app a{color:inherit;text-decoration:none !important;} #alcaplus-landing-app button{font:inherit !important;cursor:pointer;border:none;background:none;color:inherit;} #alcaplus-landing-app ul{list-style:none !important;} #alcaplus-landing-app table{border-collapse:collapse;width:100%;} @media (prefers-reduced-motion: reduce){ #alcaplus-landing-app *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;} } /* ============================================ TOKENS ============================================ */ #alcaplus-landing-app{ --lima:#C6FF00; --lima-dark:#9FD400; --lima-tint:#F2FFCF; --black:#13140F; --charcoal:#1E1F19; --white:#FFFFFF; --stone:#F1F2EC; --stone-200:#E5E6DD; --ink-soft:#5B5C53; --alcafast:#FF4B2B; --font-display:'Anton',sans-serif; --font-body:'Inter',sans-serif; --radius-sm:14px; --radius-md:22px; --radius-lg:32px; --radius-pill:999px; --shadow-card:0 10px 30px rgba(19,20,15,.08); --shadow-pop:0 6px 0 var(--black); --shadow-pop-lima:0 6px 0 var(--lima-dark); --container:1180px; --py:clamp(64px,8vw,116px); --py-sm:clamp(40px,5vw,72px); } /* ============================================ BASE TYPE Las reglas que en la demo local viven en "body{...}" se aplican aquí a #alcaplus-landing-app en su lugar (self, no descendiente): el contenedor es la raíz visual de toda la landing dentro de , así que font-family/color/line-height heredan igual hacia sus hijos sin tocar el real (compartido con el resto del sitio/tema). ============================================ */ #alcaplus-landing-app{ min-height:100%;max-width:100%; font-family:var(--font-body); color:var(--black); background:var(--white); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } #alcaplus-landing-app :where(a,button,[tabindex]):focus-visible{outline:3px solid var(--lima-dark);outline-offset:3px;} #alcaplus-landing-app .skip-link{position:fixed;top:10px;left:10px;z-index:1000;padding:10px 16px;background:var(--white);color:var(--black);border-radius:var(--radius-sm);font-weight:800;transform:translateY(-160%);} #alcaplus-landing-app .skip-link:focus{transform:translateY(0);} #alcaplus-landing-app .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-family:var(--font-body);font-weight:800;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase; padding:8px 18px;border-radius:var(--radius-pill); background:var(--stone);color:var(--black); margin-bottom:20px; } #alcaplus-landing-app .eyebrow--on-dark{background:rgba(255,255,255,.08);color:var(--lima);} #alcaplus-landing-app h1, #alcaplus-landing-app .h1, #alcaplus-landing-app h2, #alcaplus-landing-app .h2, #alcaplus-landing-app h3, #alcaplus-landing-app .h3{font-family:var(--font-display) !important;text-transform:uppercase !important;line-height:1.05;letter-spacing:.005em;} #alcaplus-landing-app .h1{font-size:clamp(40px,6vw,72px);} #alcaplus-landing-app .h2{font-size:clamp(30px,4.2vw,48px);} #alcaplus-landing-app .h3{font-size:clamp(20px,2.4vw,26px);} #alcaplus-landing-app .section-head{max-width:640px;margin-bottom:48px;} #alcaplus-landing-app .section-head p{color:var(--ink-soft);font-size:17px;margin-top:14px;max-width:520px;} #alcaplus-landing-app .section-head.center{margin-inline:auto;text-align:center;} /* ============================================ LAYOUT ============================================ */ #alcaplus-landing-app .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px;} #alcaplus-landing-app .section{padding-block:var(--py);position:relative;overflow:hidden;} #alcaplus-landing-app .section--sm{padding-block:var(--py-sm);} #alcaplus-landing-app .section--dark{background:var(--black);color:var(--white);} #alcaplus-landing-app .section--dark .ink-soft, #alcaplus-landing-app .section--dark p{color:#B9BAB1;} #alcaplus-landing-app .section--stone{background:var(--stone);} #alcaplus-landing-app .split{display:grid;grid-template-columns:1fr;gap:48px;align-items:center;} @media (min-width:900px){ #alcaplus-landing-app .split{grid-template-columns:1.05fr .95fr;gap:64px;} #alcaplus-landing-app .split--rev{grid-template-columns:.95fr 1.05fr;} #alcaplus-landing-app .split--rev > *:first-child{order:2;} } #alcaplus-landing-app .grid{display:grid;gap:24px;} @media (min-width:700px){#alcaplus-landing-app .grid--2{grid-template-columns:repeat(2,1fr);}} @media (min-width:900px){#alcaplus-landing-app .grid--4{grid-template-columns:repeat(4,1fr);}} /* ============================================ SIGNATURE MOTIF — orbit accent ============================================ */ #alcaplus-landing-app .orbit-motif{position:absolute;width:520px;height:520px;opacity:.5;pointer-events:none;animation:spin 70s linear infinite;} #alcaplus-landing-app .orbit-motif ellipse{fill:none;stroke:var(--lima);stroke-width:1.1;} #alcaplus-landing-app .section--dark .orbit-motif ellipse{stroke:var(--lima);} @keyframes spin{to{transform:rotate(360deg);}} /* ============================================ BUTTONS ============================================ */ #alcaplus-landing-app .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; font-weight:800;font-size:14.5px;letter-spacing:.04em;text-transform:uppercase; padding:18px 32px;border-radius:var(--radius-pill); transition:transform .15s ease, box-shadow .15s ease; min-height:56px;text-align:center; } #alcaplus-landing-app .btn--primary{background:var(--lima);color:var(--black);box-shadow:var(--shadow-pop);} #alcaplus-landing-app .btn--primary:hover{transform:translateY(3px);box-shadow:0 3px 0 var(--black);} #alcaplus-landing-app .btn--dark{background:var(--black);color:var(--lima);box-shadow:var(--shadow-pop-lima);} #alcaplus-landing-app .btn--dark:hover{transform:translateY(3px);box-shadow:0 3px 0 var(--lima-dark);} /* "Ver más productos" (#productsMoreBtn): en producción el fondo negro y la sombra verde de .btn--dark se veían bien, pero el texto quedaba invisible — consistente con que algo (probablemente el tema activo) esté aplicando -webkit-text-fill-color:transparent a botones de forma genérica (una técnica común para texto con gradiente) por encima del color normal. Regla aparte, deliberadamente NO sobre ".btn--dark" a secas: esa clase también la llevan los botones "Añadir al carrito" de las product-card (generados por alcaplus_add_to_cart_button_html() en page-alcaplus.php), que sí deben seguir en verde lima, no blanco. Por eso se apunta solo al ID #productsMoreBtn — nunca toca ninguna otra sección — y se cubre cualquier nodo interno (span, a, etc.) con el combinador universal, aunque hoy el botón es solo texto plano sin hijos. */ #alcaplus-landing-app #productsMoreBtn, #alcaplus-landing-app #productsMoreBtn *{ color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; opacity:1 !important; visibility:visible !important; } #alcaplus-landing-app #productsMoreBtn:hover, #alcaplus-landing-app #productsMoreBtn:hover *, #alcaplus-landing-app #productsMoreBtn:focus, #alcaplus-landing-app #productsMoreBtn:focus *, #alcaplus-landing-app #productsMoreBtn:focus-visible, #alcaplus-landing-app #productsMoreBtn:focus-visible *, #alcaplus-landing-app #productsMoreBtn:active, #alcaplus-landing-app #productsMoreBtn:active *{ color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; } #alcaplus-landing-app .btn:disabled{cursor:not-allowed;opacity:.58;box-shadow:none;transform:none;} #alcaplus-landing-app .btn:disabled:hover{box-shadow:none;transform:none;} #alcaplus-landing-app .btn:focus-visible{outline:3px solid var(--lima);outline-offset:3px;} #alcaplus-landing-app .btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;} /* ============================================ BADGES / CHIPS ============================================ */ #alcaplus-landing-app .badges{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 30px;} #alcaplus-landing-app .badge{ display:inline-flex;align-items:center;gap:8px; padding:10px 18px;border-radius:var(--radius-pill); font-weight:700;font-size:13.5px;border:1.5px solid var(--stone-200);background:var(--white); } #alcaplus-landing-app .badge svg{width:15px;height:15px;flex-shrink:0;} #alcaplus-landing-app .badge--status{font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;} #alcaplus-landing-app .badge--lima{background:var(--lima);border-color:var(--lima);color:var(--black);} #alcaplus-landing-app .badge--black{background:var(--black);border-color:var(--black);color:var(--white);} #alcaplus-landing-app .badge--alcafast{background:var(--alcafast);border-color:var(--alcafast);color:var(--white);} /* ============================================ TRUST ROW (used across hero + CTAs) ============================================ */ #alcaplus-landing-app .trust-row{display:flex;flex-wrap:wrap;gap:22px;align-items:center;margin-top:26px;font-size:13.5px;font-weight:600;color:var(--ink-soft);} #alcaplus-landing-app .trust-row svg{width:17px;height:17px;flex-shrink:0;color:var(--lima-dark);} #alcaplus-landing-app .section--dark .trust-row{color:#C9CABF;} #alcaplus-landing-app .section--dark .trust-row svg{color:var(--lima);} #alcaplus-landing-app .trust-row__item{display:flex;align-items:center;gap:7px;} /* Modificador puntual SOLO para el ítem de métodos de pago del hero: su texto es mucho más largo que los otros dos de .trust-row (clientes, envío gratis), así que necesita ancho máximo + alinear el ícono arriba para que envuelva en 2-3 líneas limpias en vez de una sola línea muy larga. No toca la clase base .trust-row__item (compartida con .cta-final y los otros ítems), así que nada más se ve afectado. */ #alcaplus-landing-app .trust-row__item--payments{align-items:flex-start;max-width:360px;} #alcaplus-landing-app .trust-row__item--payments svg{margin-top:2px;} #alcaplus-landing-app .stars{display:inline-flex;gap:2px;color:var(--lima-dark);} #alcaplus-landing-app .stars svg{width:14px;height:14px;} #alcaplus-landing-app .section--dark .stars{color:var(--lima);} #alcaplus-landing-app .logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:22px;letter-spacing:.01em;} #alcaplus-landing-app .logo svg{width:30px;height:30px;} #alcaplus-landing-app .logo-img{ height:30px;width:auto;aspect-ratio:1154/337; object-fit:cover;object-position:50% 47%; } #alcaplus-landing-app .icon-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;position:relative;border-radius:50%;} #alcaplus-landing-app .icon-btn:hover{background:var(--stone);} #alcaplus-landing-app .icon-btn svg{width:22px;height:22px;} #alcaplus-landing-app .cart-count{position:absolute;top:-6px;right:-8px;background:var(--lima);color:var(--black);font-size:10px;font-weight:800;width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center;} /* ============================================ CART DRAWER ============================================ */ #alcaplus-landing-app .cart-drawer-overlay{position:fixed;inset:0;background:rgba(19,20,15,.5);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:299;} #alcaplus-landing-app .cart-drawer-overlay.is-open{opacity:1;pointer-events:auto;} #alcaplus-landing-app .cart-drawer{ position:fixed;top:0;right:0;height:100%;width:min(92vw,400px);background:var(--white);z-index:300; transform:translateX(100%);transition:transform .3s ease; display:flex;flex-direction:column; } #alcaplus-landing-app .cart-drawer.is-open{transform:translateX(0);} #alcaplus-landing-app .cart-drawer__head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:24px 24px 18px;border-bottom:1px solid var(--stone-200);flex-shrink:0;} #alcaplus-landing-app .cart-drawer__title{font-family:var(--font-display);text-transform:uppercase;font-size:20px;} #alcaplus-landing-app .cart-drawer__close svg{width:22px;height:22px;} #alcaplus-landing-app .cart-drawer__items{flex:1;overflow-y:auto;padding:18px 24px;display:flex;flex-direction:column;gap:20px;} #alcaplus-landing-app .cart-drawer__item{display:flex;gap:14px;} #alcaplus-landing-app .cart-drawer__item-img{width:64px;height:64px;border-radius:var(--radius-sm);object-fit:cover;background:var(--stone);flex-shrink:0;} #alcaplus-landing-app .cart-drawer__item-body{flex:1;min-width:0;} #alcaplus-landing-app .cart-drawer__item-name{font-weight:800;font-size:14px;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;} #alcaplus-landing-app .cart-drawer__item-price{font-size:12.5px;color:var(--ink-soft);margin-bottom:10px;} #alcaplus-landing-app .cart-drawer__item-side{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:10px;flex-shrink:0;} #alcaplus-landing-app .cart-drawer__item-subtotal{font-weight:800;font-size:14px;white-space:nowrap;} #alcaplus-landing-app .cart-drawer__item-remove{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);border-radius:50%;flex-shrink:0;} #alcaplus-landing-app .cart-drawer__item-remove:hover{background:var(--stone);color:var(--alcafast);} #alcaplus-landing-app .cart-drawer__item-remove svg{width:16px;height:16px;} #alcaplus-landing-app .qty-stepper{display:inline-flex;align-items:center;gap:4px;border:1.5px solid var(--stone-200);border-radius:var(--radius-pill);padding:2px;} #alcaplus-landing-app .qty-stepper__btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;line-height:1;border-radius:50%;flex-shrink:0;} #alcaplus-landing-app .qty-stepper__btn:hover{background:var(--stone);} #alcaplus-landing-app .qty-stepper__value{font-weight:800;font-size:13px;min-width:14px;text-align:center;} #alcaplus-landing-app .cart-drawer__empty{margin:auto;padding:40px 24px;text-align:center;display:flex;flex-direction:column;gap:18px;align-items:center;color:var(--ink-soft);} #alcaplus-landing-app .cart-drawer__empty svg{width:40px;height:40px;opacity:.4;} #alcaplus-landing-app .cart-drawer__footer{border-top:1px solid var(--stone-200);padding:20px 24px 24px;flex-shrink:0;} #alcaplus-landing-app .cart-drawer__subtotal-row{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:16px;margin-bottom:16px;} #alcaplus-landing-app .cart-drawer__notice{font-size:12px;color:var(--ink-soft);text-align:center;margin-top:12px;} #alcaplus-landing-app .cart-drawer__notice:empty{display:none;} /* ============================================ HERO ============================================ */ #alcaplus-landing-app .hero{padding-top:clamp(20px,3vw,28px);padding-bottom:clamp(56px,7vw,96px);position:relative;overflow:hidden;} #alcaplus-landing-app .hero .orbit-motif{top:-120px;right:-160px;} #alcaplus-landing-app .hero__copy{position:relative;z-index:2;} #alcaplus-landing-app .hero h1{margin-top:6px;line-height:1.15;} #alcaplus-landing-app .hero h1 span{color:var(--lima-dark);} /* "Atrévete a ser tu mejor versión" es más larga que el texto anterior ("vuelve a sentirte tú") y en pantallas angostas puede envolver a una tercera línea — la línea de base 1.05 (heredada de .h1 general) se sube a 1.15 solo aquí (arriba) para que esa línea extra no se sienta apretada, y en móvil se reduce un poco el tamaño para que quepa sin pegarse a los bordes del contenedor. Ámbito exclusivo de .hero .h1: ningún otro título de la página cambia. */ @media (max-width:480px){ #alcaplus-landing-app .hero .h1{font-size:36px;} } #alcaplus-landing-app .hero__lead{font-size:18px;color:var(--ink-soft);max-width:480px;margin-top:18px;} #alcaplus-landing-app .hero__visual{ position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:3/4; background:linear-gradient(155deg,var(--stone) 0%,var(--lima-tint) 55%,var(--lima) 130%); display:flex;align-items:center;justify-content:center; } #alcaplus-landing-app .hero__visual picture{ display:block;width:100%;height:100%; } #alcaplus-landing-app .hero__visual .hero-img{ object-position:50% 50%; transform:scale(1.2); transform-origin:50% 22%; } @media (max-width:640px){ /* La foto móvil (hero-mobile.jpg) muestra a las dos mujeres. Con este aspect-ratio de contenedor (3/4) la imagen es "width-bound" en object-fit:cover — el ancho ya llena el contenedor exacto, así que object-position horizontal NO tiene ningún efecto real; el encuadre real lo da este transform + transform-origin. El origen anterior (50% 22%) centraba el zoom en el centro geométrico de la foto, no en el centro real de las dos modelos (que están corridas a la izquierda) — por eso sobraba fondo a la derecha. Recalculado midiendo manos/rostros reales: origin 41% 52% centra el par, y el escalado sube de 1.2 a 1.44 para que ocupen más del encuadre, manteniendo ambos rostros y los productos que sostienen visibles. */ #alcaplus-landing-app .hero__visual .hero-img{ object-position:50% 50%; transform:scale(1.44); transform-origin:41% 52%; } } #alcaplus-landing-app .hero__visual .floating-badge{ position:absolute;bottom:22px;left:22px;background:var(--white);border-radius:var(--radius-md); padding:14px 18px;box-shadow:var(--shadow-card);display:flex;align-items:center;gap:10px;font-weight:800;font-size:13px; } #alcaplus-landing-app .hero__visual .floating-badge svg{width:20px;height:20px;color:var(--lima-dark);} @media (min-width:900px){ #alcaplus-landing-app .hero .split{grid-template-columns:.92fr 1.08fr;gap:56px;} } /* ============================================ PRODUCT CARDS (WooCommerce-ready) ============================================ */ #alcaplus-landing-app .product-card{ background:var(--white);border:1px solid var(--stone-200);border-radius:var(--radius-md); overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease, box-shadow .2s ease; } #alcaplus-landing-app .product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);} #alcaplus-landing-app .product-card__media{aspect-ratio:1/1;background:var(--stone);position:relative;display:flex;align-items:center;justify-content:center;} #alcaplus-landing-app .product-card__status{position:absolute;top:14px;left:14px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;} #alcaplus-landing-app .product-card__body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1;} #alcaplus-landing-app .product-card__name{font-weight:800;font-size:16px;} #alcaplus-landing-app .product-card__price{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 10px;} #alcaplus-landing-app .product-card__price-group{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;} #alcaplus-landing-app .price-old{font-weight:600;font-size:13px;color:var(--ink-soft);text-decoration:line-through;} #alcaplus-landing-app .price-now{font-weight:900;font-size:20px;color:var(--lima-dark);} #alcaplus-landing-app .badge--sale{background:var(--white);border-color:var(--alcafast);color:var(--alcafast);} #alcaplus-landing-app .product-card__cta{margin-top:auto;} #alcaplus-landing-app .product-img--contain, #alcaplus-landing-app .product-card .product-img{object-fit:contain;padding:18px;} #alcaplus-landing-app .product-carousel{margin-bottom:20px;background:transparent !important;overflow:visible !important;} #alcaplus-landing-app .product-track, #alcaplus-landing-app .products-track{ display:flex !important;align-items:stretch !important;justify-content:flex-start !important; width:100% !important;gap:20px !important;column-gap:20px !important;row-gap:0 !important; margin:0 !important;padding:0 0 8px !important; background:transparent !important;overflow-x:auto !important;overflow-y:hidden !important; scroll-snap-type:x mandatory;scroll-padding-inline:0;scrollbar-width:none; } #alcaplus-landing-app .product-track::-webkit-scrollbar, #alcaplus-landing-app .products-track::-webkit-scrollbar{display:none;} #alcaplus-landing-app .product-track .product-card, #alcaplus-landing-app .products-track .product-card{ width:clamp(230px,calc(100% - 40px),300px) !important; margin-right:0 !important;scroll-snap-align:start; flex:0 0 clamp(230px,calc(100% - 40px),300px) !important;flex-shrink:0 !important; } #alcaplus-landing-app .product-track .product-card.is-hidden, #alcaplus-landing-app .products-track .product-card.is-hidden{display:none;} #alcaplus-landing-app .product-carousel__controls{display:flex;justify-content:center;gap:10px;margin-top:18px;} #alcaplus-landing-app .wc-slot-note{ font-size:12px;color:var(--ink-soft);text-align:center;margin-top:18px;font-weight:600; border-top:1px dashed var(--stone-200);padding-top:14px; } #alcaplus-landing-app #wc-complementos{min-height:clamp(430px,58vw,680px);} /* ============================================ PROBLEMA ============================================ */ #alcaplus-landing-app .pain-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-md);padding:28px 24px;} #alcaplus-landing-app .pain-card__icon{width:46px;height:46px;border-radius:50%;background:var(--lima);display:flex;align-items:center;justify-content:center;margin-bottom:18px;} #alcaplus-landing-app .pain-card__icon svg{width:22px;height:22px;color:var(--black);} #alcaplus-landing-app .pain-card h3{font-family:var(--font-body) !important;font-weight:800;font-size:17px;text-transform:none !important;margin-bottom:8px;} #alcaplus-landing-app .pain-card p{font-size:14.5px;} /* ============================================ STATS ============================================ */ #alcaplus-landing-app .stat-card{background:var(--white);border-radius:var(--radius-md);padding:30px 26px;box-shadow:var(--shadow-card);} #alcaplus-landing-app .stat-card__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap;} #alcaplus-landing-app .stat-card__num{font-family:var(--font-display);font-size:clamp(34px,4vw,44px);color:var(--black);} #alcaplus-landing-app .stat-card p{font-size:14px;color:var(--ink-soft);} /* ============================================ KIT PREMIUM (híbrido WooCommerce) ============================================ */ #alcaplus-landing-app .kit-card{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:32px;} #alcaplus-landing-app .kit-card__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px;} #alcaplus-landing-app .kit-list{display:flex;flex-direction:column;gap:14px;margin-bottom:28px;} #alcaplus-landing-app .kit-list li{display:flex;flex-direction:column;align-items:flex-start;gap:3px;font-size:15px;font-weight:600;border-bottom:1px dashed var(--stone-200);padding-bottom:12px;} #alcaplus-landing-app .kit-list li:last-child{border-bottom:none;padding-bottom:0;} #alcaplus-landing-app .kit-list li span:first-child{display:inline-flex;align-items:center;} #alcaplus-landing-app .kit-list li svg{width:16px;height:16px;color:var(--lima-dark);margin-right:8px;flex-shrink:0;} #alcaplus-landing-app .kit-list li span:last-child{ margin-left:24px;font-size:12px;font-weight:800;letter-spacing:.04em; text-transform:uppercase;color:var(--lima-dark); } #alcaplus-landing-app .plans{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:26px;} @media (min-width:640px){#alcaplus-landing-app .plans{grid-template-columns:repeat(3,1fr);}} #alcaplus-landing-app .plan{border:2px solid var(--stone-200);border-radius:var(--radius-md);padding:20px 16px;text-align:center;position:relative;width:100%;transition:border-color .15s,background .15s,transform .15s;} #alcaplus-landing-app .plan:hover{transform:translateY(-2px);} #alcaplus-landing-app .plan.is-selected{border-color:var(--black);box-shadow:0 0 0 3px var(--lima);} #alcaplus-landing-app .plan.is-popular{border-color:var(--black);} #alcaplus-landing-app .plan.is-best{border-color:var(--lima-dark);background:var(--lima-tint);} #alcaplus-landing-app .plan__tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:var(--radius-pill);background:var(--black);color:var(--lima);white-space:nowrap;} #alcaplus-landing-app .plan__name{font-weight:800;font-size:14.5px;margin:10px 0 8px;} #alcaplus-landing-app .plan__fit{display:block;min-height:2.7em;margin-bottom:10px;font-size:11.5px;line-height:1.35;font-weight:600;color:var(--ink-soft);} #alcaplus-landing-app .plan__price{font-family:var(--font-display);font-size:22px;} #alcaplus-landing-app .plan__price small{display:block;font-family:var(--font-body);font-weight:600;font-size:11px;color:var(--ink-soft);text-transform:none;letter-spacing:0;margin-top:4px;} /* Estado con precio rebajado real (mismos componentes .price-old/.price-now/ .badge--sale que las product-card del grid), ajustados a la tipografía y el tamaño ya establecidos para el precio del plan. */ #alcaplus-landing-app .plan__price-value .product-card__price-group{justify-content:center;} #alcaplus-landing-app .plan__price-value .price-old{font-family:var(--font-body);font-size:12px;} #alcaplus-landing-app .plan__price-value .price-now{font-family:var(--font-display);font-size:22px;} #alcaplus-landing-app .plan__price-value .badge--sale{display:inline-flex;margin-top:6px;} #alcaplus-landing-app .flatlay{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:1/1;background:linear-gradient(160deg,var(--stone),var(--white));} #alcaplus-landing-app .flatlay .product-img{transform:scale(1.05);} /* ============================================ TICKER ============================================ */ #alcaplus-landing-app .ticker{background:var(--black);padding-block:18px;overflow:hidden;} #alcaplus-landing-app .ticker-track{display:flex;gap:48px;width:max-content;animation:ticker-scroll 30s linear infinite;} #alcaplus-landing-app .ticker-track span{display:flex;align-items:center;gap:10px;color:var(--white);font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;} #alcaplus-landing-app .ticker-track svg{width:16px;height:16px;color:var(--lima);} @keyframes ticker-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}} /* ============================================ CERTIFICACIONES ============================================ */ #alcaplus-landing-app .cert-row{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;} #alcaplus-landing-app .cert{ display:flex;flex-direction:column;align-items:center;gap:10px;width:140px;padding:22px 14px; border:1px solid var(--stone-200);border-radius:var(--radius-md);text-align:center; } #alcaplus-landing-app .cert__seal{width:46px;height:46px;border-radius:50%;border:2px solid var(--black);display:flex;align-items:center;justify-content:center;} #alcaplus-landing-app .cert__seal svg{width:22px;height:22px;} #alcaplus-landing-app .cert__seal img{width:72%;height:72%;object-fit:contain;display:block;} /* El sello de INVIMA trae margen transparente arriba/abajo dentro de un lienzo cuadrado (el wordmark real solo ocupa ~37% de esa altura); sin este recorte del margen vacío se vería mucho más pequeño que los demás sellos. */ #alcaplus-landing-app .cert__seal img.cert__seal-img--invima{ width:82%;height:auto;aspect-ratio:288/117;object-fit:cover;object-position:center; } #alcaplus-landing-app .cert span{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;} #alcaplus-landing-app .cert-disclaimer{text-align:center;font-size:12.5px;color:var(--ink-soft);margin-top:22px;} #alcaplus-landing-app .certification-strip{padding-block:32px;background:var(--stone);} #alcaplus-landing-app .certification-strip .section-head{margin-bottom:20px;} #alcaplus-landing-app .certification-strip .h2{font-size:clamp(22px,3vw,30px);} #alcaplus-landing-app .certification-strip .cert-row{flex-wrap:nowrap;justify-content:flex-start;gap:10px;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;} #alcaplus-landing-app .certification-strip .cert-row::-webkit-scrollbar{display:none;} #alcaplus-landing-app .certification-strip .cert{width:112px;padding:12px 8px;border:0;background:transparent;} @media (min-width:768px){#alcaplus-landing-app .certification-strip .cert-row{justify-content:center;overflow:visible;}} /* ============================================ TESTIMONIOS ============================================ */ #alcaplus-landing-app .testi-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:36px;} #alcaplus-landing-app .testi-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none;} #alcaplus-landing-app .testi-track::-webkit-scrollbar{display:none;} #alcaplus-landing-app .testi-card{ scroll-snap-align:start;flex:0 0 270px;background:var(--charcoal);border-radius:var(--radius-md); padding:22px;display:flex;flex-direction:column;gap:14px; } #alcaplus-landing-app .testi-card__media{aspect-ratio:1/1;border-radius:var(--radius-sm);overflow:hidden;background:var(--charcoal);} /* Variante de dos fotos (antes/después) para la única tarjeta que la usa (Valentino Lazaroh) — mismo footprint cuadrado que .testi-card__media en las demás tarjetas (mismo tamaño de card), solo dividido en 2 columnas. Reutiliza .badge/.featured-testi__tag, las mismas etiquetas "Antes"/"Después" que ya existen en el resto del sitio. */ #alcaplus-landing-app .testi-card__media--split{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:none;} #alcaplus-landing-app .testi-card__photo{position:relative;border-radius:var(--radius-sm);overflow:hidden;background:var(--charcoal);} #alcaplus-landing-app .testi-card__photo .testimonial-img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;} #alcaplus-landing-app .testi-card blockquote{font-size:14.5px;font-weight:600;line-height:1.5;} #alcaplus-landing-app .testi-card footer{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;color:var(--lima);} #alcaplus-landing-app .carousel-controls{display:flex;gap:10px;} #alcaplus-landing-app .carousel-btn{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--stone-200);display:flex;align-items:center;justify-content:center;transition:background .15s;} #alcaplus-landing-app .carousel-btn:hover{background:var(--stone);} #alcaplus-landing-app .carousel-btn:disabled{cursor:not-allowed;opacity:.38;} #alcaplus-landing-app .carousel-btn svg{width:18px;height:18px;} #alcaplus-landing-app .section--dark .carousel-btn{border-color:rgba(255,255,255,.25);} #alcaplus-landing-app .section--dark .carousel-btn:hover{background:rgba(255,255,255,.08);} #alcaplus-landing-app .featured-testi{ margin-top:48px;background:var(--charcoal);border-radius:var(--radius-lg);padding:clamp(28px,5vw,52px); display:grid;gap:28px;text-align:center; } #alcaplus-landing-app .featured-testi__photos{ display:grid;grid-template-columns:1fr 1fr;gap:16px; max-width:380px;margin-inline:auto;width:100%; } #alcaplus-landing-app .featured-testi__photos .media-frame--sm{position:relative;} #alcaplus-landing-app .featured-testi__tag{position:absolute;top:10px;left:10px;z-index:2;} #alcaplus-landing-app .featured-testi__body{max-width:520px;margin-inline:auto;} #alcaplus-landing-app .featured-testi__quote{font-size:18px;font-weight:600;line-height:1.5;margin-bottom:10px;} #alcaplus-landing-app .featured-testi__label{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--lima);margin-bottom:8px;} #alcaplus-landing-app .conversion-proof .featured-testi{margin-top:0;} /* ============================================ COMPARATIVA Dos versiones completas y separadas del mismo contenido, mutuamente excluyentes por CSS (nunca reescalado): por debajo de 768px se muestran las tarjetas (.compare-cards, una por producto, lista vertical de una sola columna — nunca hay un ancho de columna fijo que pueda desbordarse ni superponerse); desde 768px se muestra la tabla de 4 columnas (.compare-wrap > table.compare). Solo una de las dos está en el DOM visible/accesible a la vez (display:none en la otra), así que un lector de pantalla nunca anuncia las dos. Si se edita una característica hay que actualizar ambas versiones — están deliberadamente duplicadas porque no existe forma de reagrupar por producto (cada tarjeta) el contenido de una tabla agrupada por característica (cada fila) usando solo CSS. ============================================ */ /* display en dos niveles (el wrapper Y el propio elemento) + !important: si alguna regla externa (tema/plugin) llegara a anular uno de los dos, el otro igual mantiene correcto el estado mostrado/oculto. */ #alcaplus-landing-app .compare-wrap{display:none !important;} #alcaplus-landing-app .compare{display:none !important;} #alcaplus-landing-app .compare-cards{display:grid !important;gap:16px;margin-top:32px;} @media (min-width:768px){ #alcaplus-landing-app .compare-wrap{display:block !important;} #alcaplus-landing-app .compare{display:table !important;} #alcaplus-landing-app .compare-cards{display:none !important;} } /* --- checks/X: SVG del mismo tamaño dentro de una "chip" circular, compartido entre la tabla y las tarjetas. La X comunica desventaja con claridad (rojo, no un gris apagado que parece deshabilitado); el check se lee como un estado positivo real. --- */ #alcaplus-landing-app .compare-icon{ display:inline-flex;align-items:center;justify-content:center; width:28px;height:28px;border-radius:50%;flex-shrink:0; } #alcaplus-landing-app .compare-icon svg{width:15px;height:15px;display:block;} #alcaplus-landing-app .compare-icon--yes{background:rgba(159,212,0,.16);color:var(--lima-dark);} #alcaplus-landing-app .compare-icon--no{background:rgba(239,68,68,.1);color:#EF4444;} #alcaplus-landing-app .compare-chip{ display:inline-flex;align-items:center;justify-content:center; padding:6px 14px;border-radius:var(--radius-pill); font-size:12px;font-weight:700;line-height:1.3;white-space:nowrap;flex-shrink:0; min-height:28px;box-sizing:border-box;max-width:100%; background:var(--stone);color:var(--ink-soft); } /* ============================================ COMPARATIVA — TARJETAS (< 768px) Una tarjeta por producto (Alcaplus primero y destacada, luego cada competidor), cada una con sus 5 características en una lista vertical de "etiqueta ⟷ estado". El texto de la característica tiene todo el ancho de la tarjeta para envolver entre palabras — nunca compite por espacio con una columna angosta, así que nunca se corta ni se superpone. ============================================ */ #alcaplus-landing-app .compare-card{ border:1px solid var(--stone-200); border-radius:24px; padding:22px 20px; background:var(--white); } #alcaplus-landing-app .compare-card--brand{ position:relative; overflow:visible; border:2px solid var(--lima-dark); background:linear-gradient(180deg,var(--lima-tint) 0%,var(--white) 210px); box-shadow:0 16px 40px rgba(159,212,0,.16); } #alcaplus-landing-app .compare-card__head{ display:flex;align-items:center;gap:10px;flex-wrap:wrap; padding-bottom:16px;margin-bottom:8px; border-bottom:1px solid rgba(19,20,15,.08); } #alcaplus-landing-app .compare-card__name{ font-weight:800;font-size:15.5px;color:var(--black); flex:1;min-width:0; } #alcaplus-landing-app .compare-card__badge{margin-left:auto;flex-shrink:0;} /* --- Frasco hero, ARRIBA de la tarjeta: el frasco es el elemento protagonista de la tarjeta "Alcaplus/Alcafast" (la única con foto real) — mismo lenguaje visual de "producto flotando" que usan las landing premium (Apple/Nike/Nara/Stripe), en vez de un ícono chico al lado del nombre. Mecánica: .compare-card__hero es una fila flex normal (imagen + badge, uno al lado del otro) que se "levanta" por encima del borde superior de la propia tarjeta con un margin-top negativo en la FILA completa (imagen y badge suben juntos) — pero solo la imagen recibe además su propio margin-left negativo, así que el badge no se corre de su sitio junto al borde derecho de la tarjeta. align-items:center en la fila alinea verticalmente el badge con el centro del frasco. Números: la tarjeta tiene padding-top 22px (heredado de .compare-card base); con margin-top:-72px la fila arranca 50px por ENCIMA del borde superior de la tarjeta. Como la fila mide 206px de alto (el frasco, que es el hijo más alto), termina 156px por DEBAJO del borde — bien adentro de la tarjeta, con aire de sobra antes del nombre y la lista. #alcaplus-landing-app .compare-cards ya reserva 32px extra de aire arriba (sumados a los 48px que trae .section-head de margen inferior = 80px de despeje libre) — de sobra para que este desborde de 50px nunca se acerque al texto del encabezado de la sección ("No es lo mismo..."). Por el lado izquierdo, la imagen (no toda la fila) recibe margin-left:-28px: como el contenido de la tarjeta ya está 20px adentro del borde (padding lateral de .compare-card), el frasco sobresale apenas ~8px del borde izquierdo — siempre dentro del padding-inline de .container (18-24px en móvil), así que nunca provoca scroll horizontal. Solo aplica a esta tarjeta (las otras 2 no tienen foto) y solo en móvil — la tabla de escritorio (≥768px) no se toca. flex-wrap:wrap es la red de seguridad para los ~320px más angostos: si el frasco (con su ancho máximo de 56%) y el badge no llegan a caber juntos en la misma fila con su gap, el badge simplemente pasa a su propia línea debajo del frasco en vez de desbordar o forzar scroll horizontal — nunca se corta ni se superpone contenido. El badge usa margin-left:auto (no justify-content) para quedar pegado a la derecha tanto si comparte fila con el frasco como si le toca su propia línea — margin:auto en un flex-item se resuelve por línea, así que funciona igual en los dos casos. */ #alcaplus-landing-app .compare-card__hero{ position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:-72px; margin-bottom:20px; } #alcaplus-landing-app .compare-card--brand .compare-card__logo{ width:auto; max-width:56%; height:206px; object-fit:contain; filter:drop-shadow(0 18px 16px rgba(19,20,15,.26)); pointer-events:none; flex-shrink:0; margin-left:-28px; } #alcaplus-landing-app .compare-card--brand > .compare-card__badge{ flex-shrink:0; margin-left:auto; box-shadow:0 8px 18px rgba(19,20,15,.2); } #alcaplus-landing-app .compare-card--brand > .compare-card__name{ display:block; font-weight:800; font-size:17px; color:var(--black); margin-bottom:16px; } #alcaplus-landing-app .compare-card__list{display:flex;flex-direction:column;} #alcaplus-landing-app .compare-card__list li{ display:flex;align-items:center;justify-content:space-between;gap:16px; padding:13px 0; border-bottom:1px solid rgba(19,20,15,.06); } #alcaplus-landing-app .compare-card__list li:first-child{padding-top:0;} #alcaplus-landing-app .compare-card__list li:last-child{border-bottom:none;padding-bottom:0;} #alcaplus-landing-app .compare-card__feature{ font-size:14px;font-weight:600;line-height:1.4;color:var(--black); flex:1;min-width:0; } /* ============================================ COMPARATIVA — TABLA (≥ 768px) table-layout:fixed + en porcentaje: el mecanismo nativo de CSS para columnas de ancho exacto y desigual, sin scroll horizontal. Desde 768px sobra espacio (columnas de ~150-260px) para el nombre completo de cada categoría — por eso esta versión no necesita abreviar nada. ============================================ */ #alcaplus-landing-app .compare-wrap{ position:relative; border-radius:28px; border:1px solid rgba(19,20,15,.07); box-shadow:0 20px 50px rgba(19,20,15,.05); padding-top:64px; background:var(--white); } #alcaplus-landing-app .compare{ width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0; } #alcaplus-landing-app .compare__col--feature{width:36%;} #alcaplus-landing-app .compare__col--brand, #alcaplus-landing-app .compare__col--generic, #alcaplus-landing-app .compare__col--stim{width:21.33%;} #alcaplus-landing-app .compare th, #alcaplus-landing-app .compare td{ word-break:normal; overflow-wrap:normal; hyphens:none; white-space:normal; } #alcaplus-landing-app .compare__head{ background:var(--white); color:var(--ink-soft); font-family:var(--font-body); font-weight:600; font-size:13px; letter-spacing:.01em; line-height:1.35; text-align:center; vertical-align:bottom; padding:22px 14px 24px; } #alcaplus-landing-app .compare__head--feature{ text-align:left; color:var(--black); font-weight:700; font-size:16px; padding-left:8px; } #alcaplus-landing-app .compare__head.is-brand{ position:relative; background:linear-gradient(180deg,var(--lima) 0%,var(--lima-dark) 100%); color:var(--black); font-weight:800; padding-top:72px; } #alcaplus-landing-app .compare__feature{ text-align:left; vertical-align:middle; font-weight:600; line-height:1.5; font-size:15px; padding:26px 16px 26px 8px; } #alcaplus-landing-app .compare td{ text-align:center; vertical-align:middle; padding:26px 16px; } #alcaplus-landing-app .compare th.is-brand, #alcaplus-landing-app .compare td.is-brand{background:var(--lima-tint);} #alcaplus-landing-app .compare tbody th, #alcaplus-landing-app .compare tbody td{ border-top:1px solid rgba(19,20,15,.06); } #alcaplus-landing-app .compare tbody tr:first-child th, #alcaplus-landing-app .compare tbody tr:first-child td{border-top:none;} #alcaplus-landing-app .compare__product-img{ position:absolute;top:-46px;left:50%;transform:translateX(-50%); height:104px;width:auto;object-fit:contain;pointer-events:none; } /* ============================================ ES PARA TI SI / CHECKLIST ============================================ */ #alcaplus-landing-app .check-list{display:flex;flex-direction:column;gap:24px;margin:28px 0 32px;} #alcaplus-landing-app .check-item{display:flex;gap:16px;} #alcaplus-landing-app .check-item__icon{width:38px;height:38px;border-radius:50%;background:var(--black);display:flex;align-items:center;justify-content:center;flex-shrink:0;} #alcaplus-landing-app .check-item__icon svg{width:18px;height:18px;color:var(--lima);} #alcaplus-landing-app .check-item h3{font-family:var(--font-body) !important;font-weight:800;font-size:16px;text-transform:none !important;margin-bottom:4px;} #alcaplus-landing-app .check-item p{font-size:14px;color:var(--ink-soft);} /* ============================================ FAQ ============================================ */ #alcaplus-landing-app .faq-list{border-top:1px solid var(--stone-200);} #alcaplus-landing-app .faq-item{border-bottom:1px solid var(--stone-200);} #alcaplus-landing-app .faq-q{ width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px; padding:24px 4px;text-align:left;font-weight:800;font-size:16.5px; } #alcaplus-landing-app .faq-q svg{width:20px;height:20px;flex-shrink:0;transition:transform .25s ease;} #alcaplus-landing-app .faq-item.is-open .faq-q svg{transform:rotate(45deg);} #alcaplus-landing-app .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;} #alcaplus-landing-app .faq-a__inner{padding:0 4px 24px;font-size:15px;color:var(--ink-soft);max-width:560px;} /* ============================================ CTA FINAL ============================================ */ #alcaplus-landing-app .cta-final{text-align:center;position:relative;} #alcaplus-landing-app .cta-final .orbit-motif{top:-200px;left:50%;transform:translateX(-50%);} #alcaplus-landing-app .cta-final__inner{position:relative;z-index:2;max-width:640px;margin-inline:auto;} #alcaplus-landing-app .cta-final .trust-row{justify-content:center;} #alcaplus-landing-app .cta-final .btn-row{justify-content:center;margin-top:30px;} /* ============================================ FOOTER ============================================ */ #alcaplus-landing-app .site-footer{background:var(--black);color:var(--white);padding-block:64px 28px;} #alcaplus-landing-app .footer-top{display:grid;gap:40px;margin-bottom:48px;} @media (min-width:600px) and (max-width:899px){#alcaplus-landing-app .footer-top{grid-template-columns:1fr 1fr;}} @media (min-width:900px){#alcaplus-landing-app .footer-top{grid-template-columns:1.4fr 1fr 1fr 1fr;}} #alcaplus-landing-app .footer-brand p{color:#B9BAB1;font-size:14px;margin-top:14px;max-width:280px;} #alcaplus-landing-app .footer-col h4{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--lima);margin-bottom:18px;} #alcaplus-landing-app .footer-col a, #alcaplus-landing-app .footer-col p{display:block;color:#C9CABF;font-size:14.5px;margin-bottom:12px;} #alcaplus-landing-app .footer-col a{overflow-wrap:anywhere;} #alcaplus-landing-app .footer-col a:hover{color:var(--lima);} #alcaplus-landing-app .social-row{display:flex;gap:12px;margin-top:18px;} #alcaplus-landing-app .social-row a{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s;} #alcaplus-landing-app .social-row a:hover{border-color:var(--lima);color:var(--lima);} #alcaplus-landing-app .social-row svg{width:17px;height:17px;} #alcaplus-landing-app .footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13px;color:#8C8D84;} /* ============================================ WHATSAPP FLOATING BUTTON A propósito en la esquina inferior IZQUIERDA (no derecha): el tema activo (Nutreko Child) agrega su propio botón flotante "Volver arriba" en la esquina inferior derecha, fuera del control de este plugin (no vive en #alcaplus-landing-app ni en ningún archivo de alcaplus-landing-plugin — lo inyecta el tema). En vez de perseguir su selector exacto para evitar que se superponga, se aísla el conflicto de raíz: los dos botones flotantes quedan en esquinas opuestas, así que no pueden solaparse sin importar cómo el tema posicione o dimensione el suyo. ============================================ */ #alcaplus-landing-app .whatsapp-float{ position:fixed !important;bottom:22px !important;left:22px !important;right:auto !important; z-index:250;width:58px;height:58px;border-radius:50%; background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(0,0,0,.25); transition:transform .15s ease; } #alcaplus-landing-app .whatsapp-float:hover{transform:scale(1.07);} #alcaplus-landing-app .whatsapp-float svg{width:28px;height:28px;color:var(--white);} /* ============================================ SCROLL REVEAL Las clases "js"/"js-ready" las agrega script.js/el sobre (document.documentElement), no sobre #alcaplus-landing-app — por eso el selector desciende desde html.js.js-ready y recién ahí entra al contenedor, en vez de prefijar todo con #alcaplus-landing-app como en el resto del archivo. ============================================ */ html.js.js-ready #alcaplus-landing-app .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;} html.js.js-ready #alcaplus-landing-app .reveal.is-visible{opacity:1;transform:translateY(0);} /* ============================================ VISUALLY HIDDEN (a11y) ============================================ */ #alcaplus-landing-app .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);} #alcaplus-landing-app .hero-img, #alcaplus-landing-app .section-img, #alcaplus-landing-app .product-img, #alcaplus-landing-app .testimonial-img{ width: 100%; height: 100%; object-fit: cover; display: block; } /* Los testimonios usan fotos ya cuadradas/completas que no deben recortarse (a diferencia de hero/section/product, que sí cubren su contenedor). */ #alcaplus-landing-app .testimonial-img{ object-fit: contain; object-position: center; } /* ============================================ MEDIA FRAMES (radius + aspect-ratio wrappers) ============================================ */ #alcaplus-landing-app .media-frame{border-radius:var(--radius-lg);aspect-ratio:4/5;overflow:hidden;} #alcaplus-landing-app .media-frame--sm{border-radius:var(--radius-sm);aspect-ratio:3/4;overflow:hidden;background:var(--charcoal);} /* El bloque antes/después usa fotos reales de cuerpo completo casi 1:2.55 (637x1279) en vez del 3:4 genérico de arriba; calzar el contenedor a esa proporción real elimina el "aire" interno que hacía ver ambas fotos más separadas de lo que en realidad estaban. */ #alcaplus-landing-app .featured-testi__photos .media-frame--sm{aspect-ratio:637/1279;} @media (max-width:480px){ #alcaplus-landing-app .container{padding-inline:18px;} #alcaplus-landing-app .btn{width:100%;white-space:normal;padding-inline:22px;} #alcaplus-landing-app .kit-card{padding:24px 18px;} #alcaplus-landing-app .kit-card__head, #alcaplus-landing-app .kit-list li{align-items:flex-start;} #alcaplus-landing-app .kit-list li{font-size:14px;} #alcaplus-landing-app .hero__visual .floating-badge{left:12px;right:12px;bottom:12px;justify-content:center;} #alcaplus-landing-app .whatsapp-float{width:52px;height:52px;left:14px !important;bottom:14px !important;right:auto !important;} } @media (prefers-reduced-motion:reduce){ html.js.js-ready #alcaplus-landing-app .reveal{opacity:1;transform:none;} #alcaplus-landing-app .ticker-track, #alcaplus-landing-app .orbit-motif{animation:none;} } /* ============================================ POPUP DE BIENVENIDA (descuento primera compra) — rediseño premium. Overlay/animación/z-index/ancho máximo se REUTILIZAN tal cual (mismo .3s fade+scale de siempre, ya estaba en el rango 250-350ms pedido). Lo nuevo: el padding ya no vive en .welcome-popup (eso impedía que la imagen superior llegara a los bordes) — se movió a .welcome-popup__body, así la imagen puede ir a sangre con solo las esquinas superiores redondeadas, heredando el radio del contenedor. ============================================ */ #alcaplus-landing-app .welcome-popup-overlay{ position:fixed;inset:0;background:rgba(19,20,15,.55);opacity:0;pointer-events:none; transition:opacity .3s ease;z-index:400; } #alcaplus-landing-app .welcome-popup-overlay.is-open{opacity:1;pointer-events:auto;} #alcaplus-landing-app .welcome-popup{ position:fixed;top:50%;left:50%; width:min(92vw,430px);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px); overflow-x:hidden;overflow-y:auto; overscroll-behavior:contain;-webkit-overflow-scrolling:touch; background:var(--white);border-radius:var(--radius-lg);border:1px solid var(--stone-200); box-shadow:0 24px 60px rgba(19,20,15,.28); z-index:401;text-align:center; transform:translate(-50%,-50%) scale(.94);opacity:0;pointer-events:none; transition:transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s ease; } #alcaplus-landing-app .welcome-popup.is-open{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto;} /* Cierre = solo fade (nada de escala), distinto del fade+scale de apertura — se agrega/quita esta clase justo antes de quitar "is-open" (ver script.js), y se limita la lista de propiedades animadas a opacity. */ #alcaplus-landing-app .welcome-popup.is-closing{transition:opacity .25s ease;} #alcaplus-landing-app .welcome-popup__close{ position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%; display:flex;align-items:center;justify-content:center;color:var(--black); background:var(--white);border:1.5px solid var(--lima-dark); box-shadow:0 3px 10px rgba(19,20,15,.16);z-index:2; transition:background .15s,transform .15s; } #alcaplus-landing-app .welcome-popup__close:hover{background:var(--stone);transform:scale(1.05);} #alcaplus-landing-app .welcome-popup__close svg{width:17px;height:17px;} /* Imagen hero: 100% del ancho, alto fijo entre 190 y 240px (clamp para una pequeña fluidez sin salir de ese rango), solo esquinas superiores redondeadas, object-fit:cover — sin padding/margen/borde alrededor. Solo se pinta si el archivo existe (ver file_exists() en el template), nunca un ícono de imagen rota. */ #alcaplus-landing-app .welcome-popup__media{ border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg); display:block;width:100%;overflow:hidden;height:clamp(190px,32vw,240px); background:var(--stone);margin:0;padding:0;flex:0 0 auto; } #alcaplus-landing-app .welcome-popup__image{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%;margin:0;} #alcaplus-landing-app .welcome-popup__body{padding:22px 26px 24px;} #alcaplus-landing-app .welcome-popup__body--no-media{padding-top:clamp(28px,5vw,36px);} #alcaplus-landing-app .welcome-popup__badge{ display:inline-flex;font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase; color:var(--black);background:var(--stone);border:1px solid var(--stone-200); padding:6px 14px;border-radius:var(--radius-pill);margin-bottom:12px; } /* Título compacto para que el mensaje en mayúsculas respire incluso en pantallas de 320px sin competir con el formulario. */ #alcaplus-landing-app .welcome-popup__title{ font-family:var(--font-body);font-weight:600;text-transform:none; font-size:clamp(28px,8vw,38px);line-height:1.08;letter-spacing:0; margin-bottom:10px; } #alcaplus-landing-app .welcome-popup__highlight{font-weight:800;color:var(--lima-dark);} #alcaplus-landing-app .welcome-popup__text{font-size:14px;line-height:1.5;color:var(--ink-soft);max-width:340px;margin-inline:auto;} #alcaplus-landing-app .welcome-popup__text + .welcome-popup__text{margin-top:6px;} #alcaplus-landing-app .welcome-popup__text--sub{margin-bottom:18px;} /* -------- Formulario real de Contact Form 7 — reseteado por completo: nada de estilos por defecto de CF7 debe sobrevivir, solo se ve el input de correo y el botón, sin etiquetas ni saltos de línea. -------- */ #alcaplus-landing-app .welcome-popup__form-wrap{text-align:left;} #alcaplus-landing-app .welcome-popup__form-wrap .wpcf7-form{display:flex;flex-direction:column;gap:10px;} #alcaplus-landing-app .welcome-popup__form-wrap .wpcf7-form p{margin:0;padding:0;} #alcaplus-landing-app .welcome-popup__form-wrap .wpcf7-form br{display:none;} #alcaplus-landing-app .welcome-popup__form-wrap .wpcf7-form-control-wrap{display:block;} #alcaplus-landing-app .welcome-popup__form-wrap .alcaplus-cf7-email-row{font-size:0;} #alcaplus-landing-app .welcome-popup__form-wrap .alcaplus-cf7-hidden-row{display:none;} /* Bloques que no son el del correo (nombre/asunto/mensaje/lo que sea): ocultos por JS de forma agnóstica al nombre real del campo (ver script.js) sin quitarlos del formulario — CF7 los sigue enviando y validando igual, el usuario nunca los ve. */ #alcaplus-landing-app .welcome-popup__form-wrap .alcaplus-cf7-hidden-field{ position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0; } #alcaplus-landing-app .welcome-popup__form-wrap input[type="email"], #alcaplus-landing-app .welcome-popup__form-wrap input[type="text"]{ width:100%;height:58px;padding:0 18px;font-size:15px;font-family:var(--font-body); border:1.5px solid var(--stone-200);border-radius:var(--radius-md);background:var(--white);color:var(--black); transition:border-color .15s,box-shadow .15s; } #alcaplus-landing-app .welcome-popup__form-wrap input[type="email"]:focus, #alcaplus-landing-app .welcome-popup__form-wrap input[type="text"]:focus{ outline:none;border-color:var(--lima-dark);box-shadow:0 0 0 3px var(--lima-tint); } #alcaplus-landing-app .welcome-popup__form-wrap input.wpcf7-not-valid{border-color:#DC2626;} #alcaplus-landing-app .welcome-popup__form-wrap .wpcf7-not-valid-tip{ display:block;margin-top:6px;font-size:12.5px;font-weight:600;color:#DC2626 !important; } #alcaplus-landing-app .welcome-popup__form-wrap .wpcf7-response-output{ margin:8px 0 0;padding:10px 14px;border-radius:var(--radius-sm);font-size:12.5px;font-weight:600; border:1px solid #DC2626;color:#DC2626;text-align:center; } /* Botón: ancho completo, 58px de alto, borde negro + sombra inferior (mismo lenguaje "neubrutalista" que el resto del sitio), esquinas muy redondeadas, texto grande. */ #alcaplus-landing-app .welcome-popup__form-wrap input[type="submit"], #alcaplus-landing-app .welcome-popup__form-wrap button[type="submit"]{ width:100%;height:58px;border:1.5px solid var(--black);border-radius:var(--radius-pill); background:var(--lima);color:var(--black); font-family:var(--font-body);font-weight:800;font-size:16px;padding:0 20px; box-shadow:var(--shadow-pop);cursor:pointer;transition:transform .15s,box-shadow .15s; margin-top:2px; } #alcaplus-landing-app .welcome-popup__form-wrap input[type="submit"]:hover, #alcaplus-landing-app .welcome-popup__form-wrap button[type="submit"]:hover{transform:translateY(3px);box-shadow:0 3px 0 var(--black);} #alcaplus-landing-app .welcome-popup__form-wrap input[type="submit"]:disabled, #alcaplus-landing-app .welcome-popup__form-wrap button[type="submit"]:disabled{opacity:.6;pointer-events:none;} /* Spinner nativo de CF7 mientras envía — se reutiliza, solo se centra. */ #alcaplus-landing-app .welcome-popup__form-wrap .wpcf7-spinner{margin:8px auto 0;display:block;} #alcaplus-landing-app .welcome-popup__form-wrap.is-submitting{opacity:.7;pointer-events:none;} /* -------- Pantalla de éxito (dentro del mismo popup) -------- */ #alcaplus-landing-app .welcome-popup__success{padding-block:4px 2px;} #alcaplus-landing-app .welcome-popup__success-icon{ display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px; border-radius:50%;background:var(--lima-tint);color:var(--lima-dark);margin-bottom:12px; } #alcaplus-landing-app .welcome-popup__success-icon svg{width:26px;height:26px;} #alcaplus-landing-app .welcome-popup__success-title{font-family:var(--font-body);font-weight:600;font-size:24px;margin-bottom:8px;} #alcaplus-landing-app .welcome-popup__success-text{font-size:14px;line-height:1.5;color:var(--ink-soft);max-width:320px;margin-inline:auto;margin-bottom:18px;} /* Debajo del botón, más chico, subrayado. */ #alcaplus-landing-app .welcome-popup__decline{ display:block;width:100%;text-align:center;margin-top:12px;font-size:12px;font-weight:600; color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px; } #alcaplus-landing-app .welcome-popup__decline:hover{color:var(--black);} @media (max-width:480px){ #alcaplus-landing-app .welcome-popup{width:calc(100vw - 24px);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);} #alcaplus-landing-app .welcome-popup__media{display:block;height:170px;min-height:170px;} #alcaplus-landing-app .welcome-popup__image{display:block;width:100%;height:100%;object-position:center 30%;} #alcaplus-landing-app .welcome-popup__body{padding:18px 24px 22px;} #alcaplus-landing-app .welcome-popup__title{font-size:clamp(34px,9vw,40px);} #alcaplus-landing-app .welcome-popup__close{top:12px;right:12px;width:46px;height:46px;z-index:5;} } /* prefers-reduced-motion: ya cubierto por la regla global de línea ~25 (#alcaplus-landing-app *{transition-duration:.001ms !important}) — no se duplica aquí. */ /* ============================================ AISLAMIENTO ANTI-CONFLICTO (tema activo del sitio, p.ej. Nutreko Child) Todo lo de arriba ya va prefijado con #alcaplus-landing-app, lo que por sí solo gana casi cualquier pulso de especificidad contra selectores de tema sin scope (button, svg, img, a, blockquote, footer...). Este bloque final agrega !important SOLO en los puntos donde un tema/plugin agresivo suele usar !important también (iconos SVG ocultos por un sistema de iconos de fuente, botones de "Añadir al carrito" ocultos por estados de carga, blockquote/footer con color forzado, object-fit de imágenes). Nada de esto sale de #alcaplus-landing-app: el resto del sitio no se toca. ============================================ */ #alcaplus-landing-app svg{ display:block !important; overflow:visible !important; } #alcaplus-landing-app .icon-btn{ display:flex !important;align-items:center !important;justify-content:center !important; width:44px !important;height:44px !important;border-radius:50% !important; padding:0 !important;overflow:visible !important;background:none !important;border:none !important; } #alcaplus-landing-app .icon-btn svg{ display:block !important;width:22px !important;height:22px !important; fill:none !important;stroke:currentColor !important;flex-shrink:0 !important; } #alcaplus-landing-app .icon-btn:hover{background:var(--stone) !important;} #alcaplus-landing-app .icon-btn:focus-visible{outline:3px solid var(--lima-dark) !important;outline-offset:3px !important;} #alcaplus-landing-app .cart-count{ display:flex !important;align-items:center !important;justify-content:center !important; position:absolute !important;top:-6px !important;right:-8px !important; width:17px !important;height:17px !important;border-radius:50% !important; background:var(--lima) !important;color:var(--black) !important; font-size:10px !important;font-weight:800 !important;line-height:1 !important; } #alcaplus-landing-app .carousel-btn{ display:flex !important;align-items:center !important;justify-content:center !important; width:44px !important;height:44px !important;border-radius:50% !important; overflow:visible !important;background:none !important; border:1.5px solid var(--stone-200) !important; } #alcaplus-landing-app .carousel-btn svg{ display:block !important;width:18px !important;height:18px !important; fill:none !important;stroke:currentColor !important; } #alcaplus-landing-app .carousel-btn:disabled{cursor:not-allowed !important;opacity:.38 !important;} #alcaplus-landing-app .section--dark .carousel-btn{border-color:rgba(255,255,255,.25) !important;} #alcaplus-landing-app .product-card{ display:flex !important;flex-direction:column !important;background:var(--white) !important; margin-right:0 !important;flex-shrink:0; } #alcaplus-landing-app .product-card .product-img, #alcaplus-landing-app .product-img--contain{ object-fit:contain !important; } #alcaplus-landing-app .kit-card, #alcaplus-landing-app .plans, #alcaplus-landing-app .plan{overflow:visible !important;} #alcaplus-landing-app .plan[aria-pressed="true"]{ border-color:var(--black) !important;box-shadow:0 0 0 3px var(--lima) !important; } #alcaplus-landing-app .product-card__cta, #alcaplus-landing-app .add_to_cart_button, #alcaplus-landing-app .kit-card__cta{ display:inline-flex !important;align-items:center !important;justify-content:center !important; width:100% !important;max-width:100% !important;opacity:1 !important;visibility:visible !important; background:var(--black) !important;color:var(--lima) !important; border-radius:var(--radius-pill) !important;position:relative !important; overflow:visible !important; } #alcaplus-landing-app .product-card__cta svg{ display:block !important;width:20px !important;height:20px !important; min-width:20px !important;flex:0 0 20px !important; opacity:1 !important;visibility:visible !important; fill:none !important;stroke:currentColor !important; } #alcaplus-landing-app .product-card__cta span{ display:inline !important;color:inherit !important; -webkit-text-fill-color:currentColor !important; opacity:1 !important;visibility:visible !important; } #alcaplus-landing-app .kit-card__cta{background:var(--lima) !important;color:var(--black) !important;} #alcaplus-landing-app .add_to_cart_button:disabled, #alcaplus-landing-app .add_to_cart_button.disabled, #alcaplus-landing-app .kit-card__cta:disabled{ opacity:.58 !important;cursor:not-allowed !important; } #alcaplus-landing-app .testi-card blockquote{ color:var(--white) !important;margin:0 !important;border:none !important;padding:0 !important; } #alcaplus-landing-app .testi-card footer{ color:var(--lima) !important;margin:0 !important;padding:0 !important; } #alcaplus-landing-app .site-footer .logo-img{ height:30px !important;width:auto !important;max-width:none !important; aspect-ratio:auto !important;object-fit:contain !important;object-position:left center !important; } #alcaplus-landing-app .site-footer .logo{overflow:visible !important;} #alcaplus-landing-app :where(a,button,[tabindex]):focus-visible{ outline:3px solid var(--lima-dark) !important;outline-offset:3px !important; } #alcaplus-landing-app .btn:disabled{ opacity:.58 !important;cursor:not-allowed !important;box-shadow:none !important;transform:none !important; } /* ============================================ COLORES DE TEXTO EXPLÍCITOS (nunca heredados del tema) Un h1/h2/h3/p/a/button sin color PROPIO no está realmente protegido por el prefijo #alcaplus-landing-app: la herencia de color no tiene ninguna especificidad, así que CUALQUIER regla de Nutreko que apunte a ese mismo tipo de elemento (aunque sea sin scope) le gana al valor heredado. Por eso cada elemento de texto de aquí en adelante fija su propio color con !important, en vez de depender de que un ancestro (body, .section--dark, etc.) se lo pase por herencia. Orden: 1) base clara (fondo blanco/stone → texto negro), 2) fondos oscuros reales de la landing (más específico, gana automáticamente sobre la base), 3) refuerzo con !important de los acentos de color que ya existían (price-now, badges, eyebrow, etc.) para que tampoco dependan de ganar sin !important. ============================================ */ /* --- 1) Base clara: texto negro por defecto en headings/párrafos/listas --- */ #alcaplus-landing-app h1, #alcaplus-landing-app .h1, #alcaplus-landing-app h2, #alcaplus-landing-app .h2, #alcaplus-landing-app h3, #alcaplus-landing-app .h3, #alcaplus-landing-app h4, #alcaplus-landing-app p{ color:var(--black) !important; } #alcaplus-landing-app a{color:inherit !important;} #alcaplus-landing-app button{color:inherit !important;} #alcaplus-landing-app li{color:inherit !important;} /* --- 2) Fondos oscuros reales de la landing: se declaran DESPUÉS de la base, con selectores más específicos (.section--dark ..., .site-footer ..., etc.), así que ganan automáticamente sobre el negro de arriba sin necesidad de tocar cada componente individual (pain-card, testi-card y featured-testi ya viven dentro de .section--dark). --- */ #alcaplus-landing-app .section--dark h1, #alcaplus-landing-app .section--dark .h1, #alcaplus-landing-app .section--dark h2, #alcaplus-landing-app .section--dark .h2, #alcaplus-landing-app .section--dark h3, #alcaplus-landing-app .section--dark .h3, #alcaplus-landing-app .section--dark h4{ color:var(--white) !important; } #alcaplus-landing-app .section-head p{color:var(--ink-soft) !important;} #alcaplus-landing-app .section--dark p{color:#B9BAB1 !important;} #alcaplus-landing-app .site-footer, #alcaplus-landing-app .site-footer h4, #alcaplus-landing-app .site-footer p, #alcaplus-landing-app .site-footer span{color:var(--white) !important;} #alcaplus-landing-app .footer-brand p{color:#B9BAB1 !important;} #alcaplus-landing-app .footer-col a, #alcaplus-landing-app .footer-col p{color:#C9CABF !important;} #alcaplus-landing-app .footer-col a:hover{color:var(--lima) !important;} #alcaplus-landing-app .footer-col h4{color:var(--lima) !important;} #alcaplus-landing-app .footer-bottom, #alcaplus-landing-app .footer-bottom span{color:#8C8D84 !important;} #alcaplus-landing-app .social-row a{color:var(--white) !important;} #alcaplus-landing-app .social-row a:hover{color:var(--lima) !important;} #alcaplus-landing-app .ticker-track span{color:var(--white) !important;} /* --- 3) Íconos/botones circulares: currentColor necesita un color propio y explícito en el botón — si Nutreko fuerza un color en