.elementor-12374 .elementor-element.elementor-element-b54791c{--display:flex;--overflow:hidden;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-12374 .elementor-element.elementor-element-b54791c:not(.elementor-motion-effects-element-type-background), .elementor-12374 .elementor-element.elementor-element-b54791c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:radial-gradient(at top center, #1F0D16 0%, #0B0A0C 100%);}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-12d1c4b *//* ============================================================ MAZUR — Landing "¿Qué te interesa hoy?" CSS encapsulado para incrustar en Elementor / WordPress. Todo cuelga de .mazur-landing para NO afectar al resto de la web. ============================================================ */ /* Fuentes (antes iban en el ; aquí van con @import) */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Poppins:wght@300;400;500;600&display=swap'); /* ------------------------------------------------------------ >>> IMÁGENES DE FONDO DE LAS 3 CAJAS <<< Sube tus fotos a WordPress (Medios) y pega aquí sus URLs. Deja el url(...) tal cual, solo cambia lo de dentro de las comillas. Si dejas una vacía, la caja mostrará solo el degradado (no se rompe). ------------------------------------------------------------ */ .mazur-landing{ --img-academia: url('PEGA-AQUI-URL-IMAGEN-ACADEMIA.jpg'); --img-salon: url('PEGA-AQUI-URL-IMAGEN-SALON.jpg'); --img-tienda: url('PEGA-AQUI-URL-IMAGEN-TIENDA.jpg'); } /* ---------- Tokens de diseño ---------- */ .mazur-landing{ --bg: #0B0A0C; --card: #141016; --card-grad: linear-gradient(160deg,#241826 0%,#0C0A0D 100%); --accent: #D81E6E; --accent-l: #E7579B; --white: #FFFFFF; --gray: #C9C2CB; --muted: #8B858F; --border: rgba(224,80,140,.20); --border-hi: rgba(231,87,155,.55); --serif: "Playfair Display", Georgia, serif; --sans: "Poppins", -apple-system, Segoe UI, Roboto, sans-serif; --wrap: 1060px; --radius: 18px; background:var(--bg); color:var(--gray); font-family:var(--sans); font-weight:300; line-height:1.6; -webkit-font-smoothing:antialiased; background-image:radial-gradient(120% 60% at 50% -8%, rgba(216,30,110,.14), transparent 60%); background-repeat:no-repeat; } .mazur-landing *{box-sizing:border-box;margin:0;padding:0} .mazur-landing img{max-width:100%;display:block} .mazur-landing a{color:#fff;text-decoration:none} .mazur-landing .wrap{max-width:var(--wrap);margin:0 auto;padding-left:20px;padding-right:20px} .mazur-landing .section{padding-top:34px;padding-bottom:34px} /* iconos svg */ .mazur-landing .ico{width:1em;height:1em;display:inline-block;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .mazur-landing .ico--fill{fill:currentColor;stroke:none} /* ---------- HERO ---------- */ .mazur-landing .hero{text-align:center;padding-top:64px;padding-bottom:14px} .mazur-landing .hero h1{ font-family:var(--serif); font-weight:600; color:var(--white); font-size:clamp(30px,5.4vw,46px); line-height:1.15; letter-spacing:.3px; display:inline-flex;align-items:center;gap:.5em;flex-wrap:wrap;justify-content:center; } .mazur-landing .hero h1 .hl{color:var(--accent-l)} .mazur-landing .hero .spark{color:var(--accent-l);width:.62em;height:.62em;opacity:.9} .mazur-landing .hero p{color:var(--gray);font-size:clamp(14px,2.6vw,16px);margin-top:14px;font-weight:300} /* ---------- TARJETAS PRINCIPALES ---------- */ .mazur-landing .choices{ display:grid;grid-template-columns:repeat(3,1fr);gap:20px; } .mazur-landing .choice{ position:relative;display:flex;flex-direction:column;text-align:center; background:var(--card-grad); background-size:cover; background-position:center; border:1px solid var(--border); border-radius:var(--radius); padding:36px 24px 26px; overflow:hidden; transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease; } /* Foto de fondo por caja + capa oscura encima para que el texto se lea */ .mazur-landing .choice.academia{ background-image:linear-gradient(160deg, rgba(11,10,12,.74), rgba(11,10,12,.92)), var(--img-academia); } .mazur-landing .choice.salon{ background-image:linear-gradient(160deg, rgba(11,10,12,.74), rgba(11,10,12,.92)), var(--img-salon); } .mazur-landing .choice.tienda{ background-image:linear-gradient(160deg, rgba(11,10,12,.74), rgba(11,10,12,.92)), var(--img-tienda); } .mazur-landing .choice:hover{transform:translateY(-6px);border-color:var(--border-hi);box-shadow:0 18px 40px -18px rgba(216,30,110,.5)} .mazur-landing .choice .badge{color:var(--accent-l);font-size:44px;line-height:1;margin-bottom:16px} .mazur-landing .choice h2{font-family:var(--serif);color:var(--white);font-size:26px;font-weight:600;letter-spacing:1px} .mazur-landing .rule{width:46px;height:2px;background:var(--accent);border:0;border-radius:2px;margin:12px auto 14px} .mazur-landing .choice p{color:var(--gray);font-size:15px;flex:1 1 auto;margin-bottom:22px} /* ---------- BOTONES ---------- */ .mazur-landing .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%; font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase; padding:14px 22px;border-radius:11px;cursor:pointer;border:1px solid transparent; transition:background .25s ease, transform .2s ease, box-shadow .25s ease, color .25s ease, border-color .25s ease; } .mazur-landing .btn .ico{font-size:15px} .mazur-landing .btn--solid{background:var(--accent);color:var(--white);box-shadow:0 8px 22px -12px rgba(216,30,110,.9)} .mazur-landing .btn--solid:hover{background:var(--accent-l);transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(231,87,155,.95)} .mazur-landing .btn--solid:hover .arrow{transform:translateX(4px)} .mazur-landing .btn--ghost{background:transparent;color:var(--accent-l);border-color:var(--border-hi)} .mazur-landing .btn--ghost:hover{background:var(--accent);color:var(--white);border-color:var(--accent)} .mazur-landing .arrow{transition:transform .25s ease} /* ---------- BARRA WHATSAPP ---------- */ .mazur-landing .panel{ background:var(--card);border:1px solid var(--border);border-radius:var(--radius); padding:22px 26px; } .mazur-landing .wa{display:flex;align-items:center;gap:22px;flex-wrap:wrap} .mazur-landing .wa .left{display:flex;align-items:center;gap:16px;flex:1 1 300px} .mazur-landing .wa-badge{ flex:0 0 auto;width:56px;height:56px;border-radius:50%; background:#25D366;display:grid;place-items:center;color:#fff; box-shadow:0 8px 20px -8px rgba(37,211,102,.7); } .mazur-landing .wa-badge .ico{font-size:30px} .mazur-landing .wa .txt small{display:block;color:var(--gray);font-size:13.5px;font-weight:300} .mazur-landing .wa .txt .phone{font-size:clamp(20px,4vw,26px);font-weight:600;color:var(--accent-l);letter-spacing:.5px;line-height:1.3} .mazur-landing .wa .btn{width:auto;flex:0 0 auto;padding-left:26px;padding-right:26px} /* ---------- INFO ---------- */ .mazur-landing .info{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .mazur-landing .info .box{ background:var(--card);border:1px solid var(--border);border-radius:var(--radius); padding:30px 22px 26px;text-align:center;display:flex;flex-direction:column;align-items:center; transition:border-color .3s ease, transform .3s ease; } .mazur-landing .info .box:hover{border-color:var(--border-hi);transform:translateY(-4px)} .mazur-landing .info .box .badge{color:var(--accent-l);font-size:30px;margin-bottom:12px} .mazur-landing .info .box h3{ color:var(--accent-l);font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px; } .mazur-landing .info .box .big{color:var(--white);font-size:20px;font-weight:600;margin-bottom:4px} .mazur-landing .info .box p{color:var(--gray);font-size:14px;line-height:1.55} .mazur-landing .stars{color:var(--accent-l);font-size:16px;letter-spacing:3px;margin:2px 0 4px} .mazur-landing .info .box .btn{margin-top:auto;padding-top:12px;padding-bottom:12px} .mazur-landing .info .box .spacer{height:16px} /* ---------- REDES ---------- */ .mazur-landing .social{ background:var(--card);border:1px solid var(--border);border-radius:var(--radius); display:flex;align-items:stretch;justify-content:center;gap:0;padding:6px; } .mazur-landing .social a{ flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:12px; padding:18px 14px;border-radius:14px;transition:background .25s ease} .mazur-landing .social a:hover{background:rgba(255,255,255,.03)} .mazur-landing .social .divider{width:1px;background:var(--border);margin:14px 0} .mazur-landing .brand-badge{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:0 0 auto} .mazur-landing .brand-badge .ico{font-size:22px} .mazur-landing .brand-badge.ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285AEB 90%)} .mazur-landing .brand-badge.fb{background:#1877F2} .mazur-landing .social .label b{display:block;color:var(--white);font-size:14px;font-weight:600;letter-spacing:.6px} .mazur-landing .social .label span{color:var(--muted);font-size:13px} /* ---------- PIE ---------- */ .mazur-landing .legal{text-align:center;color:var(--muted);font-size:12px;padding-top:20px;padding-bottom:40px} .mazur-landing .legal a{color:var(--muted)} .mazur-landing .legal a:hover{color:var(--accent-l)} .mazur-landing .legal .sep{margin:0 10px;opacity:.5} /* ---------- FOCUS accesible ---------- */ .mazur-landing a:focus-visible,.mazur-landing .btn:focus-visible{outline:2px solid var(--accent-l);outline-offset:3px;border-radius:11px} /* ---------- ANIMACIÓN de entrada ---------- */ @keyframes mz-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} .mazur-landing .reveal{animation:mz-rise .7s cubic-bezier(.2,.7,.2,1) both} .mazur-landing .d1{animation-delay:.05s} .mazur-landing .d2{animation-delay:.13s} .mazur-landing .d3{animation-delay:.21s} .mazur-landing .d4{animation-delay:.29s} /* ---------- RESPONSIVE ---------- */ @media (max-width:820px){ .mazur-landing .choices{grid-template-columns:1fr;max-width:440px;margin:0 auto} .mazur-landing .info{grid-template-columns:1fr;max-width:440px;margin:0 auto} } @media (max-width:560px){ .mazur-landing .section{padding-top:26px;padding-bottom:26px} .mazur-landing .hero{padding-top:48px} .mazur-landing .wa{flex-direction:column;align-items:stretch;text-align:center} .mazur-landing .wa .left{flex-direction:column;align-items:center;text-align:center;gap:12px;flex:0 0 auto} .mazur-landing .wa .btn{width:100%} .mazur-landing .social{flex-direction:column} .mazur-landing .social .divider{width:auto;height:1px;margin:0 24px} } @media (prefers-reduced-motion: reduce){ .mazur-landing *{animation:none !important;transition:none !important} }/* End custom CSS */