/** * Single Product Logotipo — CSS critical (above-the-fold) * * Carga: render-blocking en . Solo lo necesario para hero + trust bar + * primer slider de logos + tipografías. ~6 KB. * * Scope: body.single-product-cartel (añadido en astra-overrides.php bloque 10). * * @since 2026-04-29 */ /* ── Tokens locales (fallback si design-tokens no está cargado) ─────────────── */ body.single-product-cartel { --lpl-bg-dark: #161616; --lpl-bg-light: #FFFFFF; --lpl-bg-yellow: #FFED00; --lpl-bg-soft: #F4F4F4; --lpl-text: #161616; --lpl-text-inv: #FFFFFF; --lpl-yellow: #FFED00; --lpl-pink: #FF008C; --lpl-shadow: 0 6px 30px rgba(0,0,0,0.08); --lpl-font-h: 'Raleway', system-ui, sans-serif; --lpl-font-b: 'Nunito', system-ui, sans-serif; } /* ── Reset mínimo del scope ─────────────────────────────────────────────────── */ body.single-product-cartel .lpl-main { margin: 0; padding: 0; font-family: var(--lpl-font-b); color: var(--lpl-text); line-height: 1.55; overflow-x: hidden; } body.single-product-cartel .lpl-main *, body.single-product-cartel .lpl-main *::before, body.single-product-cartel .lpl-main *::after { box-sizing: border-box; } body.single-product-cartel .lpl-main img { max-width: 100%; height: auto; display: block; } body.single-product-cartel .lpl-main h1, body.single-product-cartel .lpl-main h2, body.single-product-cartel .lpl-main h3 { font-family: var(--lpl-font-h); font-weight: 700; line-height: 1.15; margin: 0 0 .6em; letter-spacing: -.01em; } body.single-product-cartel .lpl-main p { margin: 0 0 1em; } body.single-product-cartel .lpl-main a { color: inherit; text-decoration: none; } /* ── Container ──────────────────────────────────────────────────────────────── */ /* Iter-2.7 — ancho global 1600px en todas las secciones (no solo hero) */ body.single-product-cartel .lpl-main .c { width: min(1600px, 100% - 2rem); margin-inline: auto; } /* ── Section base + min-heights (CLS guard) ─────────────────────────────────── */ body.single-product-cartel .lpl-section { position: relative; } body.single-product-cartel .lpl-hero { background: var(--lpl-bg-dark); color: var(--lpl-text-inv); /* Iter-2.6 — más generoso top/bottom para que se vea más mosaic + scroll-down respira al fondo */ padding: clamp(4rem, 7vw, 6rem) 0 clamp(3rem, 5vw, 5rem); min-height: 760px; /* CLS guard mobile */ position: relative; isolation: isolate; overflow: hidden; } @media (min-width: 900px) { body.single-product-cartel .lpl-hero { min-height: 720px; } } /* Iter-2 — Hero v2 mosaic background (36 client neon photos + dark overlay) */ body.single-product-cartel .lpl-hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background: url('/wp-content/uploads/2026/05/cartel-hero-bokeh-bg.webp') center/cover no-repeat; background-color: var(--lpl-bg-dark); /* Slight desaturation so colors don't fight with H1/form */ filter: saturate(.8) contrast(1.05); } body.single-product-cartel .lpl-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; /* Stronger overlay top-bottom for legibility, slight magenta tint */ background: radial-gradient(ellipse at 30% 40%, rgba(230,0,126,.10), transparent 60%), linear-gradient(180deg, rgba(22,22,22,.78) 0%, rgba(22,22,22,.92) 100%); } /* ── HERO LAYOUT ────────────────────────────────────────────────────────────── */ body.single-product-cartel .lpl-hero__inner { display: grid; grid-template-columns: 1fr; gap: 1.6rem; align-items: start; } /* Mobile: copy arriba (H1 + trustbar), form debajo (mejor flow visual sobre mosaic). */ body.single-product-cartel .lpl-hero__copy { order: 1; } body.single-product-cartel .lpl-hero__form { order: 2; } @media (min-width: 900px) { body.single-product-cartel .lpl-hero__inner { /* Iter-2.3 — Form 20% más estrecho (step 1 solo dropzone): copy gana espacio para H1 + sub respiren */ grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(2.5rem, 4vw, 4rem); /* Iter-2.6 — verticalmente centrado para que copy y form se alineen aunque tengan distinta altura */ align-items: center; } } /* Iter-2.6 — espaciado interno del bloque copy más amplio (compensa form más bajo) */ body.single-product-cartel .lpl-hero__copy { display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.5rem); } body.single-product-cartel .lpl-hero__copy > * { margin: 0; } @media (min-width: 900px) { body.single-product-cartel .lpl-hero__copy { gap: clamp(1.25rem, 2.4vw, 2rem); } } body.single-product-cartel .lpl-hero__ey, body.single-product-cartel .ey { font-family: var(--lpl-font-b); font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--lpl-yellow); margin: 0 0 .8rem; } body.single-product-cartel .ey--dark { color: var(--lpl-text); } body.single-product-cartel .lpl-h1 { font-size: clamp(2rem, 5vw, 3.4rem); margin: 0 0 1rem; } body.single-product-cartel .lpl-hero__sub { font-size: clamp(1rem, 1.4vw, 1.15rem); color: rgba(255,255,255,.85); max-width: 56ch; margin: 0 0 1.6rem; } /* ── HERO CTAs ─────────────────────────────────────────────────────────────── */ body.single-product-cartel .lpl-hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.6rem; } body.single-product-cartel .lpl-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .9rem 1.4rem; font-family: var(--lpl-font-h); font-weight: 700; font-size: 1rem; line-height: 1; border: 2px solid transparent; border-radius: 0; /* manual de marca: sin radio */ cursor: pointer; text-align: center; transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease; min-height: 48px; } body.single-product-cartel .lpl-btn:hover { transform: translateY(-1px); } body.single-product-cartel .lpl-btn--primary { background: var(--lpl-yellow); color: var(--lpl-text); border-color: var(--lpl-yellow); } body.single-product-cartel .lpl-btn--primary:hover { background: #fff35a; border-color: #fff35a; } body.single-product-cartel .lpl-btn--ghost { background: transparent; color: var(--lpl-text-inv); border-color: rgba(255,255,255,.4); } body.single-product-cartel .lpl-btn--ghost:hover { border-color: var(--lpl-text-inv); background: rgba(255,255,255,.06); } body.single-product-cartel .lpl-btn--dark { background: var(--lpl-bg-dark); color: var(--lpl-text-inv); border-color: var(--lpl-bg-dark); } body.single-product-cartel .lpl-btn--dark:hover { background: #2a2a2a; border-color: #2a2a2a; } body.single-product-cartel .lpl-btn--ghost-dark { background: transparent; color: var(--lpl-text); border-color: rgba(0,0,0,.25); } body.single-product-cartel .lpl-btn--ghost-dark:hover { border-color: var(--lpl-text); background: rgba(0,0,0,.04); } /* ── HERO TRUST BAR ─ Iter-2.5: 6 chips individuales en grid 3+3 con hue-rotate stagger ─ */ body.single-product-cartel .lpl-trustbar { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } @media (min-width: 700px) { body.single-product-cartel .lpl-trustbar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } } body.single-product-cartel .lpl-trustbar__item { display: inline-flex; align-items: center; gap: .6rem; color: rgba(255,255,255,.92); font-family: var(--lpl-font-b); font-size: .88rem; font-weight: 600; /* Iter-2.5 — chip oscuro individual con borde redondeado */ padding: 10px 14px; background: rgba(22,22,22,.6); border: 1px solid rgba(255,255,255,.10); border-radius: 12px; backdrop-filter: blur(6px); transition: background .18s ease, border-color .18s ease, transform .18s ease; } body.single-product-cartel .lpl-trustbar__item:hover { background: rgba(22,22,22,.78); border-color: rgba(255,255,255,.18); transform: translateY(-1px); } /* Cada icon hereda un color "actual" dinámico vía hue-rotate stagger */ body.single-product-cartel .lpl-trustbar__icon { width: 22px; height: 22px; display: inline-flex; flex-shrink: 0; color: #4ade80; /* base verde — hue-rotate la cicla a través de todo el espectro */ animation: lpl-hue 8s linear infinite; animation-delay: calc(var(--lpl-i, 0) * -1.33s); } body.single-product-cartel .lpl-trustbar__icon svg { width: 100%; height: 100%; filter: drop-shadow(0 0 4px currentColor); } @keyframes lpl-hue { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } } body.single-product-cartel .lpl-trustbar__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 700px) { body.single-product-cartel .lpl-trustbar__item { font-size: 12px; padding: 8px 11px; gap: .5rem; } body.single-product-cartel .lpl-trustbar__icon { width: 18px; height: 18px; } } @media (prefers-reduced-motion: reduce) { body.single-product-cartel .lpl-trustbar__icon { animation: none; filter: none; } body.single-product-cartel .lpl-trustbar__icon svg { filter: none; } body.single-product-cartel .lpl-trustbar__item:hover { transform: none; } } /* ── HERO FORM CARD (right column, above-the-fold) ─────────────────────────── */ body.single-product-cartel .lpl-hero__form { width: 100%; min-height: 580px; /* CLS guard: ahora es 2-step con altura razonable */ display: flex; align-items: stretch; } /* ── HERO FORM CARD — estilo rotulo (gradient border + white inner) ─────────── */ body.single-product-cartel .lpl-form-card { /* Outer gradient border 135deg magenta → amarillo → magenta */ background: linear-gradient(135deg, #FF008C 0%, #FFED00 50%, #FF008C 100%); padding: 2px; border-radius: 24px; box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 60px rgba(230,0,126,.18); width: 100%; box-sizing: border-box; color: var(--lpl-text); display: flex; flex-direction: column; } body.single-product-cartel .lpl-form-card__inner { /* Inner white card — todo el contenido (pill+h2+sub+form) vive aquí */ background: #fff; border-radius: 22px; /* Iter-2.6 — padding ligeramente reducido para form más compacto */ padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.1rem, 1.8vw, 1.6rem); flex: 1; display: flex; flex-direction: column; gap: 0; } body.single-product-cartel .lpl-form-card__pill { display: inline-flex; align-items: center; gap: .55rem; padding: .4rem .9rem .4rem .65rem; background: rgba(34,197,94,.10); color: #15803d; font-family: var(--lpl-font-b); font-size: .82rem; font-weight: 600; line-height: 1.2; border-radius: 999px; border: 1px solid rgba(34,197,94,.24); margin: 0 auto; align-self: center; } body.single-product-cartel .lpl-form-card__pill-dot { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.7); animation: lpl-pulse 1.6s ease-out infinite; } @keyframes lpl-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } } @media (prefers-reduced-motion: reduce) { body.single-product-cartel .lpl-form-card__pill-dot { animation: none; } } body.single-product-cartel .lpl-form-card__title { font-family: var(--lpl-font-h); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 1.85rem); line-height: 1.15; margin: .8rem auto .35rem; text-align: center; color: #161616; letter-spacing: -.01em; padding: 0 1rem; } body.single-product-cartel .lpl-form-card__title em { font-style: italic; color: #FF008C; font-weight: 700; } body.single-product-cartel .lpl-form-card__sub { font-size: .92rem; line-height: 1.45; color: rgba(22,22,22,.65); margin: 0 auto 0; text-align: center; padding: 0 1rem .25rem; } /* Mini WhatsApp link bajo trust bar */ body.single-product-cartel .lpl-hero__wa-hint { margin: 1.1rem 0 0; font-size: .85rem; } body.single-product-cartel .lpl-hero__wa-hint a { color: var(--lpl-yellow); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; transition: opacity .15s; } body.single-product-cartel .lpl-hero__wa-hint a:hover { opacity: .8; } body.single-product-cartel .lpl-hero__wa-hint svg { color: #25D366; } /* ── HERO LOGOS SLIDER ─────────────────────────────────────────────────────── */ body.single-product-cartel .lpl-hero__logos { /* Iter-2.6 — más separación: queda al fondo del above-the-fold, separado de inner */ margin-top: clamp(3rem, 5vw, 4.5rem); overflow: hidden; width: 100%; } body.single-product-cartel .lpl-hero__logos .slider__label { text-align: center; color: rgba(255,255,255,.55); font-size: .82rem; margin: 0 0 .9rem; padding: 0 1rem; } body.single-product-cartel .lpl-hero__logos .slider__track { display: flex; gap: 2.5rem; align-items: center; animation: lpl-slide 38s linear infinite; width: max-content; will-change: transform; } body.single-product-cartel .lpl-hero__logos .slider__track img { height: 36px; width: auto; max-width: 130px; opacity: .65; filter: brightness(0) invert(1); flex-shrink: 0; transition: opacity .2s; } body.single-product-cartel .lpl-hero__logos .slider__track img:hover { opacity: 1; } @keyframes lpl-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { body.single-product-cartel .lpl-hero__logos .slider__track { animation: none; } } /* ═══════════════════════════════════════════════════════════════════════ * F1.1A — VARIANTE A HERO: H1+sub centrado · split 60/40 · trust 3 chips * Añadido: 2026-05-04 * Override del layout 2-col Iter-2.x → estructura vertical: * 1) lpl-hero__head (H1 + sub centrados) * 2) lpl-hero__split (60% foto + 40% form-card en desktop, stacked mobile) * 3) lpl-trustbar--compact (3 chips horizontales centrados) * Hipótesis CRO: mensaje primero (lo que ofrecemos) → prueba visual (cómo se ve) * + form (cómo lo pides) en paralelo → prueba social compacta (por qué confiar). * ═══════════════════════════════════════════════════════════════════════ */ /* Hero V-A — balance entre impacto visual y altura razonable (~85-95vh). * Padding intermedio: ni 80vh estricto sacrificando jerarquía, ni hero * desbordado. El form single-step + dropzone-end es la pieza más alta. */ body.single-product-cartel .lpl-hero--va { padding: clamp(2rem, 3.2vw, 3rem) 0 clamp(1.5rem, 2.4vw, 2.4rem); min-height: auto; } @media (min-width: 900px) { body.single-product-cartel .lpl-hero--va { min-height: 0; } } /* Reset del grid 2-col cuando se usa el inner --va */ body.single-product-cartel .lpl-hero__inner--va { display: flex; flex-direction: column; gap: clamp(1rem, 1.6vw, 1.4rem); align-items: stretch; } @media (min-width: 900px) { body.single-product-cartel .lpl-hero__inner--va { grid-template-columns: none; gap: clamp(1.1rem, 1.8vw, 1.6rem); align-items: stretch; } } /* Head — H1 + sub left-aligned dentro de la columna media (Variante A * compactada). El head vive ahora dentro de .lpl-hero__media para ahorrar * altura: ~250 px que estaban como bloque centrado superior pasan a * encajar encima de la foto, sin afectar el split 60/40. */ body.single-product-cartel .lpl-hero__head { text-align: left; max-width: 100%; margin: 0; display: flex; flex-direction: column; gap: clamp(.55rem, 1vw, .85rem); } body.single-product-cartel .lpl-hero__head .lpl-h1 { margin: 0; text-align: left; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.05; letter-spacing: -0.01em; } body.single-product-cartel .lpl-hero__head .lpl-hero__sub { margin: 0; max-width: 56ch; text-align: left; font-size: clamp(.98rem, 1.15vw, 1.1rem); line-height: 1.55; } /* Media column — agrupa H1 + sub + foto en stack vertical */ body.single-product-cartel .lpl-hero__media { display: flex; flex-direction: column; gap: clamp(.9rem, 1.6vw, 1.4rem); min-width: 0; } /* Split — mobile stacked (slider arriba, form debajo), desktop 52/48 (form * más ancho que la versión 60/40 inicial — los inputs respiran y los CTAs * tienen presencia). align-items: start para que slider y form-card no se * estiren mutuamente. */ body.single-product-cartel .lpl-hero__split { display: grid; grid-template-columns: 1fr; gap: clamp(1.2rem, 2.2vw, 1.8rem); align-items: start; } @media (min-width: 900px) { body.single-product-cartel .lpl-hero__split { grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); gap: clamp(1.6rem, 2.6vw, 2.4rem); align-items: start; } } /* Hero gallery (slider 2-col auto-scroll) — clonado 1:1 de homepage hero. * En homepage el CSS está scopeado a .en-preview; aquí lo re-scopeamos a * body.single-product-cartel para que funcione siempre, también tras * promover a público (cuando .en-preview ya no estará en el body). */ body.single-product-cartel .hero__gallery { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(6px, .8vw, 10px); height: clamp(420px, 70vh, 640px); overflow: hidden; border-radius: 12px; position: relative; } body.single-product-cartel .hero__gallery::before, body.single-product-cartel .hero__gallery::after { content: ''; position: absolute; left: 0; right: 0; height: 60px; z-index: 2; pointer-events: none; } body.single-product-cartel .hero__gallery::before { top: 0; background: linear-gradient(to bottom, var(--lpl-bg-dark, #161616), transparent); } body.single-product-cartel .hero__gallery::after { bottom: 0; background: linear-gradient(to top, var(--lpl-bg-dark, #161616), transparent); } body.single-product-cartel .hero__col { display: flex; flex-direction: column; gap: clamp(6px, .8vw, 10px); will-change: transform; } body.single-product-cartel .hero__col--up { animation: cartelHGalUp 120s linear infinite; } body.single-product-cartel .hero__col--down { animation: cartelHGalDown 130s linear infinite; } body.single-product-cartel .hero__gal-item { border-radius: 8px; overflow: hidden; flex-shrink: 0; } body.single-product-cartel .hero__gal-item img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; } @keyframes cartelHGalUp { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } } @keyframes cartelHGalDown { 0% { transform: translateY(-50%); } 100% { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { body.single-product-cartel .hero__col--up, body.single-product-cartel .hero__col--down { animation: none; } } @media (max-width: 720px) { body.single-product-cartel .hero__gallery { height: 360px; border-radius: 8px; } body.single-product-cartel .hero__gallery::before, body.single-product-cartel .hero__gallery::after { height: 40px; } } /* Form en --va: aplanamos los 2 steps con display:contents para que todos * los rows vivan en un grid único de 2 cols (cleanest layout — sin huecos * entre step1 y step2). Nombre+Teléfono ocupan 1 col cada uno (forman fila), * el resto va con --full → grid-column: 1 / -1. */ body.single-product-cartel .lpl-hero--va .lpl-hero__form { min-height: 0; } body.single-product-cartel .lpl-hero--va .lead-form { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.6rem, 1vw, .85rem); align-items: start; } body.single-product-cartel .lpl-hero--va .lead-form > .lead-form__step, body.single-product-cartel .lpl-hero--va .lead-form > input[type="hidden"], body.single-product-cartel .lpl-hero--va .lead-form > .lead-form__feedback { display: contents; /* sus hijos floatan al grid del form */ } /* Honeypot: NO usamos display:contents porque entonces sus hijos (label "No * rellenar" + input) se vuelven visibles dentro del grid. Mantenemos el * position:absolute -10000px de forms.css que lo saca de pantalla. */ body.single-product-cartel .lpl-hero--va .lead-form > .lead-form__hp { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; pointer-events: none !important; } body.single-product-cartel .lpl-hero--va .lead-form .lead-form__row { margin: 0; grid-column: span 1; min-width: 0; } body.single-product-cartel .lpl-hero--va .lead-form .lead-form__row--full, body.single-product-cartel .lpl-hero--va .lead-form .lead-form__row--consent, body.single-product-cartel .lpl-hero--va .lead-form .lead-form__row--dropzone-end, body.single-product-cartel .lpl-hero--va .lead-form .lead-form__row--submit { grid-column: 1 / -1; } body.single-product-cartel .lpl-hero--va .lead-form .lead-form__row--dropzone-end .lead-form__dropzone { padding: clamp(.85rem, 1.4vw, 1.2rem); min-height: 0; width: 100%; } body.single-product-cartel .lpl-hero--va .lead-form .lead-form__row--dropzone-end .lead-form__dropzone-icon svg { width: 28px; height: 28px; } body.single-product-cartel .lpl-hero--va .lead-form textarea { min-height: 70px; rows: 2; } body.single-product-cartel .lpl-hero--va .lpl-form-card__inner { padding: clamp(1.2rem, 2vw, 1.7rem); } body.single-product-cartel .lpl-hero--va .lpl-form-card__title { font-size: clamp(1.2rem, 1.9vw, 1.55rem); line-height: 1.2; margin: 0 0 .4rem; } body.single-product-cartel .lpl-hero--va .lpl-form-card__sub { font-size: .92rem; line-height: 1.45; margin: 0 0 .9rem; } body.single-product-cartel .lpl-hero--va .lpl-form-card__pill { margin-bottom: .65rem; padding: .4rem .85rem; font-size: .74rem; letter-spacing: .02em; background: rgba(34,197,94,.12); color: #15803d; border: 1px solid rgba(34,197,94,.35); box-shadow: 0 0 0 4px rgba(34,197,94,.04); } /* ─── CRO V-A — form-card más vivo + inputs con focus magenta + submit glow ─── */ body.single-product-cartel .lpl-hero--va .lpl-form-card { border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.25), 0 0 0 1px rgba(255,237,0,.35), 0 0 50px rgba(230,0,126,.08); background: #ffffff; border: 1px solid rgba(0,0,0,.05); } body.single-product-cartel .lpl-hero--va .lead-form .lead-form__label { font-weight: 600; font-size: .82rem; letter-spacing: .01em; margin-bottom: .35rem; color: #161616; } body.single-product-cartel .lpl-hero--va .lead-form .lead-form__required { color: #E6007E; margin-left: 2px; font-weight: 700; } body.single-product-cartel .lpl-hero--va .lead-form input, body.single-product-cartel .lpl-hero--va .lead-form textarea, body.single-product-cartel .lpl-hero--va .lead-form select { width: 100%; padding: .65rem .85rem; border: 1.5px solid rgba(0,0,0,.12); border-radius: 10px; background: #fafafa; font-size: .95rem; line-height: 1.4; color: #161616; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } body.single-product-cartel .lpl-hero--va .lead-form input:hover, body.single-product-cartel .lpl-hero--va .lead-form textarea:hover, body.single-product-cartel .lpl-hero--va .lead-form select:hover { border-color: rgba(0,0,0,.25); background: #ffffff; } body.single-product-cartel .lpl-hero--va .lead-form input:focus, body.single-product-cartel .lpl-hero--va .lead-form textarea:focus, body.single-product-cartel .lpl-hero--va .lead-form select:focus { outline: 0; border-color: #E6007E; background: #ffffff; box-shadow: 0 0 0 4px rgba(230,0,126,.12); } body.single-product-cartel .lpl-hero--va .lead-form textarea { min-height: 90px; resize: vertical; } /* Dropzone-end más atractivo: borde discontinuo magenta sutil */ body.single-product-cartel .lpl-hero--va .lead-form .lead-form__row--dropzone-end .lead-form__dropzone { background: rgba(230,0,126,.04); border: 2px dashed rgba(230,0,126,.35); border-radius: 12px; transition: background .15s, border-color .15s; cursor: pointer; } body.single-product-cartel .lpl-hero--va .lead-form .lead-form__row--dropzone-end .lead-form__dropzone:hover { background: rgba(230,0,126,.08); border-color: rgba(230,0,126,.6); } body.single-product-cartel .lpl-hero--va .lead-form .lead-form__dropzone-icon { color: #E6007E; } body.single-product-cartel .lpl-hero--va .lead-form .lead-form__dropzone-title { font-weight: 600; color: #161616; } body.single-product-cartel .lpl-hero--va .lead-form .lead-form__dropzone-btn { display: inline-block; background: #FFED00; color: #161616; padding: .35rem .7rem; border-radius: 8px; font-size: .72rem; font-weight: 700; margin-top: .4rem; letter-spacing: .03em; } body.single-product-cartel .lpl-hero--va .lead-form .lead-form__dropzone-sub { font-size: .72rem; color: rgba(22,22,22,.55); margin-top: .35rem; display: block; } /* Consent checkbox: más visible */ body.single-product-cartel .lpl-hero--va .lead-form .lead-form__consent { display: flex; gap: .55rem; align-items: flex-start; font-size: .82rem; line-height: 1.45; color: rgba(22,22,22,.85); } body.single-product-cartel .lpl-hero--va .lead-form .lead-form__consent input[type="checkbox"] { width: 18px; height: 18px; accent-color: #E6007E; flex: 0 0 auto; margin-top: 2px; cursor: pointer; } /* Submit con glow magenta hover + transition */ body.single-product-cartel .lpl-hero--va .lead-form .lead-form__submit { width: 100%; background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); color: #ffffff; border: 0; padding: .95rem 1.5rem; border-radius: 12px; font-size: 1rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; box-shadow: 0 8px 22px rgba(22,163,74,.32), 0 0 0 0 rgba(230,0,126,0); transition: transform .15s ease, box-shadow .25s ease, background .15s; margin-top: .25rem; } body.single-product-cartel .lpl-hero--va .lead-form .lead-form__submit:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(22,163,74,.4), 0 0 0 6px rgba(230,0,126,.1); background: linear-gradient(135deg, #15803d 0%, #16a34a 100%); } body.single-product-cartel .lpl-hero--va .lead-form .lead-form__submit:active { transform: translateY(0); } /* Microcopy CRO debajo del submit (inyectado vía CSS ::after del row submit). * i18n por idioma vía html[lang] (mismo patrón que single-product-rotulo-360): * EN es el contenido base; FR/PT lo sobrescriben. */ body.single-product-cartel .lpl-hero--va .lead-form .lead-form__row--submit::after { content: "🔒 Your details go straight to us · no spam · only for your quote"; grid-column: 1 / -1; text-align: center; font-size: .72rem; color: rgba(22,22,22,.55); margin-top: .35rem; letter-spacing: .01em; line-height: 1.5; } html[lang^="fr"] body.single-product-cartel .lpl-hero--va .lead-form .lead-form__row--submit::after { content: "🔒 Vos données nous parviennent directement · sans spam · uniquement pour votre devis"; } html[lang^="pt"] body.single-product-cartel .lpl-hero--va .lead-form .lead-form__row--submit::after { content: "🔒 Os seus dados chegam diretamente até nós · sem spam · apenas para o seu orçamento"; } /* ─── 3 secciones, 6 cards cada una, 3-col en desktop (2 filas de 3 perfectas) ─── * !important porque las reglas de rest.css con auto-fit minmax sobrescriben * silenciosamente cuando el viewport excede 4×280px. */ @media (min-width: 900px) { body.single-product-cartel .lpl-usecases__grid, body.single-product-cartel .lpl-featured__grid, body.single-product-cartel .lpl-benefits__grid { grid-template-columns: repeat(3, 1fr) !important; gap: clamp(20px, 2vw, 32px) !important; max-width: 1400px !important; margin-inline: auto !important; } } /* ─── UseCases section LIGHT (alternancia oscuro/claro como el resto del template) ─── */ body.single-product-cartel .lpl-section--usecases-light { background: #ffffff; color: #161616; padding: clamp(3rem, 5vw, 5rem) 0; } body.single-product-cartel .lpl-usecases__hd { text-align: center; max-width: 800px; margin: 0 auto clamp(2rem, 3.5vw, 3rem); } body.single-product-cartel .lpl-usecases__hd .ey { color: #E6007E; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; margin: 0 0 .65rem; } body.single-product-cartel .lpl-usecases__hd .lpl-h2 { color: #161616; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.15; margin: 0 0 .8rem; } body.single-product-cartel .lpl-usecases__hd .lpl-usecases__sub { color: rgba(22,22,22,.7); font-size: clamp(.95rem, 1.1vw, 1.05rem); line-height: 1.55; margin: 0; } body.single-product-cartel .lpl-usecases__hd .lpl-usecases__sub strong { color: #161616; font-weight: 700; } /* UseCase card — imagen grande arriba + body con padding */ body.single-product-cartel .lpl-usecase { background: #ffffff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04); transition: transform .25s ease, box-shadow .25s ease; display: flex; flex-direction: column; } body.single-product-cartel .lpl-usecase:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.1), 0 0 0 1px rgba(230,0,126,.25); } body.single-product-cartel .lpl-usecase__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #1a1a1a; border-radius: 0; } body.single-product-cartel .lpl-usecase__media img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 1; /* override de .step__slides>img:opacity:0 si quedó algún residuo */ transition: transform .4s ease; } body.single-product-cartel .lpl-usecase:hover .lpl-usecase__media img { transform: scale(1.05); } body.single-product-cartel .lpl-usecase__body { padding: clamp(1.1rem, 1.6vw, 1.5rem); display: flex; flex-direction: column; gap: .35rem; flex: 1 1 auto; } body.single-product-cartel .lpl-usecase__tag { color: #E6007E; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; margin: 0; opacity: 1; } body.single-product-cartel .lpl-usecase__title { font-size: 1.15rem; font-weight: 700; margin: 0; color: #161616; line-height: 1.25; } body.single-product-cartel .lpl-usecase__desc { font-size: .92rem; line-height: 1.55; color: rgba(22,22,22,.72); margin: .2rem 0 0; } /* CTA debajo del grid */ body.single-product-cartel .lpl-usecases__cta { text-align: center; margin-top: clamp(1.5rem, 2.5vw, 2.5rem); } body.single-product-cartel .lpl-section--usecases-light .lpl-btn--primary { background: #E6007E; color: #ffffff; padding: .9rem 1.8rem; border-radius: 999px; font-weight: 700; text-decoration: none; display: inline-block; box-shadow: 0 8px 22px rgba(230,0,126,.3); transition: transform .15s, box-shadow .25s; } body.single-product-cartel .lpl-section--usecases-light .lpl-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(230,0,126,.42); } /* ─── CONTRASTE V-A — fix arriba a abajo ─────────────────────────────────── * Todos los textos sobre el fondo oscuro del hero se fuerzan a blanco para * legibilidad sobre el bokeh background. Textos dentro del form-card no se * tocan: ese contenedor tiene fondo claro y conserva su scheme propio. */ /* 1. H1 — sobre fondo oscuro */ body.single-product-cartel .lpl-hero--va .lpl-hero__head .lpl-h1 { color: #ffffff; } /* 2. Sub-headline — base 92% blanco, strong puro blanco */ body.single-product-cartel .lpl-hero--va .lpl-hero__head .lpl-hero__sub { color: rgba(255,255,255,.92); } body.single-product-cartel .lpl-hero--va .lpl-hero__head .lpl-hero__sub strong { color: #ffffff; font-weight: 700; } /* 3. Trust bar labels — sobre fondo oscuro abajo del split */ body.single-product-cartel .lpl-hero--va .lpl-trustbar--compact .lpl-trustbar__label { color: #ffffff; } body.single-product-cartel .lpl-hero--va .lpl-trustbar--compact .lpl-trustbar__item { color: #ffffff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); } /* 4. Form-card: dentro del card el fondo es claro — labels deben ser oscuras * legibles. El default de forms.css ya pone color oscuro, pero forzamos * por si Astra/herencia mete algo distinto. */ body.single-product-cartel .lpl-hero--va .lead-form .lead-form__label, body.single-product-cartel .lpl-hero--va .lead-form .lead-form__consent span, body.single-product-cartel .lpl-hero--va .lead-form .lead-form__dropzone-title, body.single-product-cartel .lpl-hero--va .lead-form .lead-form__dropzone-sub { color: #161616; } body.single-product-cartel .lpl-hero--va .lead-form .lead-form__consent a { color: #E6007E; /* magenta de marca */ text-decoration: underline; } body.single-product-cartel .lpl-hero--va .lead-form input, body.single-product-cartel .lpl-hero--va .lead-form textarea, body.single-product-cartel .lpl-hero--va .lead-form select { color: #161616; } body.single-product-cartel .lpl-hero--va .lead-form input::placeholder, body.single-product-cartel .lpl-hero--va .lead-form textarea::placeholder { color: rgba(22,22,22,.45); } /* Trust bar compact — 3 chips horizontales centrados (no grid 3+3) */ body.single-product-cartel .lpl-trustbar--compact { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; } @media (min-width: 700px) { body.single-product-cartel .lpl-trustbar--compact { gap: 14px; } } /* Override del display:grid heredado de .lpl-trustbar */ body.single-product-cartel .lpl-trustbar.lpl-trustbar--compact { grid-template-columns: none; } /* ═══════════════════════════════════════════════════════════════════════ * PASO 1 — Tokens + utilities (Integración Manus) * Añadido: 2026-04-30 * Nuevos tokens: card dark, magenta glow, online dot, text mute, border soft * Nuevas utilities: glow-am, glow-mg, text-glow, online-badge * ═══════════════════════════════════════════════════════════════════════ */ body.single-product-cartel { /* Tokens nuevos */ --lpl-bg-card-dark: #1f1f1f; --lpl-mg-glow: #E6007E; --lpl-online-dot: #22c55e; --lpl-text-mute: rgba(255,255,255,.65); --lpl-border-soft: rgba(255,255,255,.08); --lpl-text-mute-dark: rgba(22,22,22,.6); } /* Glow utilities — reutilizables en hero, cards, CTAs */ body.single-product-cartel .lpl-glow-am { box-shadow: 0 0 20px rgba(255,237,0,.30), 0 0 60px rgba(255,237,0,.10); } body.single-product-cartel .lpl-glow-mg { box-shadow: 0 0 20px rgba(230,0,126,.30), 0 0 60px rgba(230,0,126,.10); } body.single-product-cartel .lpl-text-glow-am { text-shadow: 0 0 20px rgba(255,237,0,.50); } body.single-product-cartel .lpl-text-glow-mg { text-shadow: 0 0 16px rgba(230,0,126,.55), 0 0 32px rgba(230,0,126,.30); } /* Online badge — usado en hero + CTA final */ body.single-product-cartel .lpl-online-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; background: rgba(34,197,94,.10); border: 1px solid rgba(34,197,94,.30); border-radius: 999px; font-family: var(--lpl-font-b); font-size: 13px; font-weight: 600; color: rgba(255,255,255,.92); line-height: 1.2; } body.single-product-cartel .lpl-online-badge--dark { background: rgba(34,197,94,.12); color: var(--lpl-text); } body.single-product-cartel .lpl-online-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lpl-online-dot); box-shadow: 0 0 0 0 rgba(34,197,94,.7); animation: lpl-pulse 1.6s ease-out infinite; flex-shrink: 0; } /* (lpl-pulse keyframe ya existe arriba en este archivo, reusamos) */ @media (prefers-reduced-motion: reduce) { body.single-product-cartel .lpl-online-dot { animation: none; } } /* Card base — fondo oscuro reutilizable (Featured Projects, Reviews, Social Proof) */ body.single-product-cartel .lpl-card-dark { background: var(--lpl-bg-card-dark); border: 1px solid var(--lpl-border-soft); border-radius: 14px; transition: border-color .25s ease, transform .25s ease; } body.single-product-cartel .lpl-card-dark:hover { border-color: rgba(255,237,0,.25); } /* ═══════════════════════════════════════════════════════════════════════ * Iter-2 — Slider neón (port homepage) + Online badge * Iter-1 slideshow eliminado (30 abr PM) — reemplazado por bg mosaic + form * ═══════════════════════════════════════════════════════════════════════ */ /* Online badge wrapper en hero (badge styles ya en paso 1) */ body.single-product-cartel .lpl-hero__online { margin-bottom: clamp(14px, 1.4vw, 20px); } /* SLIDER LOGOS — port del efecto neón de la homepage */ /* Sobreescribe rules previas (cascade later) — magenta borders + multi drop-shadow filter */ body.single-product-cartel .lpl-hero__logos { border-top: 1px solid rgba(230,0,126,.18); border-bottom: 1px solid rgba(230,0,126,.18); padding: clamp(14px, 1.6vw, 22px) 0; background: rgba(22,22,22,.85); } body.single-product-cartel .lpl-hero__logos .slider__track { animation: lpl-slide-neon 160s linear infinite; } body.single-product-cartel .lpl-hero__logos .slider__track img { height: clamp(30px, 3.2vw, 42px); width: clamp(90px, 9vw, 130px); max-width: none; margin: 0 clamp(20px, 3vw, 44px); opacity: .9; filter: grayscale(100%) brightness(3.5) drop-shadow(0 0 8px rgba(255,255,255,.85)) drop-shadow(0 0 18px rgba(255,255,255,.4)) drop-shadow(0 0 35px rgba(255,255,255,.15)); transition: filter .4s ease, opacity .4s ease; } body.single-product-cartel .lpl-hero__logos .slider__track img:hover { opacity: 1; filter: grayscale(100%) brightness(3.5) drop-shadow(0 0 10px rgba(230,0,126,.95)) drop-shadow(0 0 24px rgba(230,0,126,.6)) drop-shadow(0 0 48px rgba(230,0,126,.25)); } @keyframes lpl-slide-neon { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { body.single-product-cartel .lpl-hero__logos .slider__track { animation: none; } } /* ── HERO SCROLL-DOWN INDICATOR (Iter-2.6) ─────────────────────────────────── */ body.single-product-cartel .lpl-hero__scroll { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: 44px; height: 44px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: rgba(22,22,22,.55); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px); text-decoration: none; z-index: 5; cursor: pointer; animation: lpl-scroll-bounce 1.8s ease-in-out infinite; transition: background .18s ease, border-color .18s ease, color .18s ease; } body.single-product-cartel .lpl-hero__scroll:hover, body.single-product-cartel .lpl-hero__scroll:focus-visible { background: rgba(22,22,22,.85); border-color: rgba(255,237,0,.6); color: #FFED00; outline: none; } body.single-product-cartel .lpl-hero__scroll-mouse { display: inline-flex; line-height: 0; } @keyframes lpl-scroll-bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } } @media (prefers-reduced-motion: reduce) { body.single-product-cartel .lpl-hero__scroll { animation: none; } } /* ============================================================ F1.1I — TRUST LOGOS (autoridad, debajo de Reseñas) Portado de homepage.css (.slider) con prefijo propio .lpl-trust-slider para no colisionar con .lpl-hero__gallery. Fondo dark continuo con sección Colors siguiente (sin wave entre ambos). ============================================================ */ body.single-product-cartel .lpl-section--trust-logos { background: var(--ne, #161616); padding: clamp(28px, 4vw, 56px) 0 clamp(20px, 3vw, 40px); overflow: hidden; position: relative; border-top: 1px solid rgba(230, 0, 126, .15); border-bottom: 1px solid rgba(230, 0, 126, .15); } body.single-product-cartel .lpl-trust-slider { width: 100%; } body.single-product-cartel .lpl-trust-slider__label { text-align: center; font-size: clamp(11px, .8vw, 13px); color: rgba(255, 255, 255, .55); font-weight: 600; margin: 0 0 clamp(14px, 1.4vw, 22px); letter-spacing: .1em; text-transform: uppercase; padding: 0 16px; } body.single-product-cartel .lpl-trust-slider__track { display: flex; align-items: center; width: max-content; animation: lplSlideLogos 160s linear infinite; } body.single-product-cartel .lpl-trust-slider__track img { width: clamp(90px, 9vw, 130px); height: clamp(30px, 3.2vw, 42px); margin: 0 clamp(24px, 3.5vw, 52px); opacity: .85; filter: grayscale(100%) brightness(3.5) drop-shadow(0 0 8px rgba(255, 255, 255, .8)) drop-shadow(0 0 18px rgba(255, 255, 255, .4)) drop-shadow(0 0 35px rgba(255, 255, 255, .15)); transition: opacity .4s ease, filter .4s ease; flex-shrink: 0; object-fit: contain; } body.single-product-cartel .lpl-trust-slider__track img:hover { opacity: 1; filter: grayscale(100%) brightness(3.5) drop-shadow(0 0 10px rgba(230, 0, 126, .95)) drop-shadow(0 0 24px rgba(230, 0, 126, .6)) drop-shadow(0 0 48px rgba(230, 0, 126, .25)); } @keyframes lplSlideLogos { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { body.single-product-cartel .lpl-trust-slider__track { animation: none; } } /* F1.1K — Spotlight focus form desactivado: escribir en el formulario no debe desenfocar la página. */ body.single-product-cartel.is-form-active::before { content: none; } body.single-product-cartel.is-form-active .lpl-hero__track, body.single-product-cartel.is-form-active .lpl-trust-slider__track { animation-play-state: running; } body.single-product-cartel.is-form-active .lpl-sticky { opacity: 1; } /* ============================================================ F1.1J — SHOWCASE CINEMATOGRÁFICO Hero único con drag slider mockup↔real + filmstrip 3 casos. Reemplaza el grid Featured de 6 cards. ============================================================ */ body.single-product-cartel .lpl-section--showcase { background: var(--ne, #161616); padding: clamp(56px, 7vw, 110px) 0 clamp(48px, 6vw, 90px); color: #fff; } body.single-product-cartel .lpl-section--showcase .lpl-shead { text-align: center; max-width: 760px; margin: 0 auto clamp(32px, 4vw, 56px); padding: 0 clamp(16px, 3vw, 32px); } body.single-product-cartel .lpl-section--showcase .lpl-shead .ey { color: var(--mg, #E6007E); font-size: 13px; letter-spacing: .15em; text-transform: uppercase; font-weight: 700; margin: 0 0 12px; } body.single-product-cartel .lpl-section--showcase .lpl-shead .lpl-h2 { color: #fff; font-size: clamp(28px, 3.6vw, 52px); line-height: 1.1; margin: 0 0 16px; font-weight: 800; } body.single-product-cartel .lpl-section--showcase .lpl-shead__sub { color: rgba(255, 255, 255, .78); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.55; margin: 0; } body.single-product-cartel .lpl-showcase { max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 32px); } /* Showcase pair: mockup approved + installed neon */ body.single-product-cartel .lpl-showcase__hero { transition: opacity .22s ease; } body.single-product-cartel .lpl-showcase__hero.is-swap { opacity: .25; } body.single-product-cartel .lpl-showcase__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 2vw, 24px); width: 100%; max-width: 1060px; margin: 0 auto; align-items: start; } body.single-product-cartel .lpl-showcase__panel { position: relative; margin: 0; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 10px; background: radial-gradient(circle at 50% 42%, rgba(230, 0, 126, .18), rgba(0, 0, 0, 0) 56%), #050505; box-shadow: 0 26px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(230, 0, 126, .18); } body.single-product-cartel .lpl-showcase__panel--mockup { background: radial-gradient(circle at 50% 46%, rgba(255, 237, 0, .12), rgba(0, 0, 0, 0) 58%), linear-gradient(145deg, #141414, #030303); } body.single-product-cartel .lpl-main .lpl-showcase__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; box-sizing: border-box; display: block; pointer-events: none; -webkit-user-drag: none; } body.single-product-cartel .lpl-showcase__label { position: absolute; top: clamp(10px, 1.3vw, 16px); left: clamp(10px, 1.3vw, 16px); z-index: 2; padding: 6px 10px; background: rgba(0, 0, 0, .58); color: #fff; font-size: clamp(10px, .85vw, 12px); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Meta del hero */ body.single-product-cartel .lpl-showcase__meta { margin-top: clamp(20px, 2.5vw, 32px); text-align: center; } body.single-product-cartel .lpl-showcase__brand { font-size: clamp(18px, 1.6vw, 24px); font-weight: 700; color: #fff; margin: 0 0 6px; letter-spacing: -.01em; } body.single-product-cartel .lpl-showcase__detail { font-size: clamp(13px, 1vw, 15px); color: rgba(255, 255, 255, .65); margin: 0; font-weight: 400; } /* Filmstrip */ body.single-product-cartel .lpl-showcase__strip { display: flex; gap: clamp(12px, 1.5vw, 20px); margin-top: clamp(28px, 3.5vw, 48px); justify-content: center; flex-wrap: wrap; } body.single-product-cartel .lpl-showcase__thumb { background: transparent; border: 0; padding: 0; cursor: pointer; color: inherit; display: flex; flex-direction: column; align-items: center; gap: 10px; width: clamp(140px, 18vw, 200px); transition: transform .25s ease; -webkit-tap-highlight-color: transparent; } body.single-product-cartel .lpl-showcase__thumb:hover { transform: translateY(-3px); } body.single-product-cartel .lpl-showcase__thumb-img { display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px; background: #000; border: 2px solid transparent; transition: border-color .25s ease, box-shadow .25s ease, opacity .25s ease; opacity: .6; } body.single-product-cartel .lpl-showcase__thumb-img img { width: 100%; height: 100%; object-fit: cover; display: block; } body.single-product-cartel .lpl-showcase__thumb.is-active .lpl-showcase__thumb-img { border-color: var(--mg, #E6007E); box-shadow: 0 8px 28px rgba(230, 0, 126, .35); opacity: 1; } body.single-product-cartel .lpl-showcase__thumb:hover .lpl-showcase__thumb-img { opacity: .95; } body.single-product-cartel .lpl-showcase__thumb-name { font-size: clamp(12px, .95vw, 14px); font-weight: 600; color: rgba(255, 255, 255, .8); letter-spacing: .01em; } body.single-product-cartel .lpl-showcase__thumb.is-active .lpl-showcase__thumb-name { color: #fff; } /* CTA showcase */ body.single-product-cartel .lpl-showcase__cta { text-align: center; margin-top: clamp(32px, 4vw, 56px); } /* Mobile tweaks */ @media (max-width: 720px) { body.single-product-cartel .lpl-showcase { padding-inline: 12px; } body.single-product-cartel .lpl-showcase__pair { gap: 8px; } body.single-product-cartel .lpl-showcase__panel { border-radius: 8px; } body.single-product-cartel .lpl-showcase__strip { gap: 12px; } body.single-product-cartel .lpl-showcase__thumb { width: calc(33.333% - 8px); min-width: 90px; } body.single-product-cartel .lpl-showcase__label { font-size: 10px; padding: 4px 8px; } } @media (prefers-reduced-motion: reduce) { body.single-product-cartel .lpl-showcase__hero, body.single-product-cartel .lpl-showcase__thumb, body.single-product-cartel .lpl-showcase__thumb-img { transition: none; } } /* CRO #24 — mobile: el formulario pasa antes de la galería para reducir fricción. */ @media (max-width: 720px) { body.single-product-cartel .lpl-hero--va { padding: 1.25rem 0 1.1rem; } body.single-product-cartel .lpl-hero__split { gap: .9rem; } body.single-product-cartel .lpl-hero__media { display: contents; } body.single-product-cartel .lpl-hero__head { order: 1; gap: .55rem; } body.single-product-cartel .lpl-hero__form { order: 2; } body.single-product-cartel .hero__gallery { order: 3; height: clamp(210px, 56vw, 260px); margin-top: .2rem; } body.single-product-cartel .lpl-hero__head .lpl-h1 { font-size: clamp(1.8rem, 8vw, 2.2rem); line-height: 1.05; } body.single-product-cartel .lpl-hero__head .lpl-hero__sub { font-size: .94rem; line-height: 1.45; } body.single-product-cartel .lpl-form-card__inner { padding: .9rem; } body.single-product-cartel .lpl-hero--va .lpl-form-card__pill { margin-bottom: .42rem; padding: .32rem .65rem; font-size: .68rem; } body.single-product-cartel .lpl-hero--va .lpl-form-card__title { font-size: 1.08rem; margin-bottom: .18rem; } body.single-product-cartel .lpl-hero--va .lpl-form-card__sub { display: none; } body.single-product-cartel .lpl-hero--va .lead-form { gap: .44rem; } body.single-product-cartel .lpl-hero--va .lead-form .lead-form__label { margin-bottom: .22rem; font-size: .78rem; } body.single-product-cartel .lpl-hero--va .lead-form input, body.single-product-cartel .lpl-hero--va .lead-form textarea, body.single-product-cartel .lpl-hero--va .lead-form select { padding: .52rem .66rem; font-size: .9rem; } body.single-product-cartel .lpl-hero--va .lead-form textarea { min-height: 62px; } body.single-product-cartel .lpl-hero--va .lead-form .lead-form__row--submit { order: 20; } body.single-product-cartel .lpl-hero--va .lead-form .lead-form__row--dropzone-end { order: 30; } body.single-product-cartel .lpl-hero--va .lead-form .lead-form__row--dropzone-end .lead-form__dropzone { padding: .52rem .65rem; } body.single-product-cartel .lpl-hero--va .lead-form .lead-form__dropzone-icon { display: none; } body.single-product-cartel .lpl-hero--va .lead-form .lead-form__dropzone-title { font-size: .9rem; } body.single-product-cartel .lpl-hero--va .lead-form .lead-form__dropzone-btn { margin-top: .2rem; padding: .3rem .6rem; } body.single-product-cartel .lpl-hero--va .lead-form .lead-form__dropzone-sub { display: none; } body.single-product-cartel .lpl-hero__scroll { display: none; } } body.single-product-cartel .lead-form--cartel .lead-form__row--dropzone-end .lead-form__label::after, body.single-product-cartel .lead-form--cartel .lead-form__row--dropzone-end .lead-form__dropzone-title::after { content: " (opcional)"; color: rgba(22, 22, 22, .58); font-weight: 600; }