/* ========================================================================== Puruwa — rediseño con los colores de marca: blanco, negro, rojo y dorado. 1) Tokens 2) Base y componentes 3) Cabecera / pie 4) Páginas propias 5) Plugin puruwahome-web 6) WooCommerce y tema 7) Animaciones 8) Responsivo Todo va bajo body.pwn: si se desactiva el plugin, vuelve el diseño anterior. ========================================================================== */ /* 1) Tokens ---------------------------------------------------------------- */ body.pwn { --white: #ffffff; --cream: #faf7f2; --cream-2: #f4efe6; --line: #ebe4d8; --ink: #141210; --ink-2: #3b3632; --muted: #6f6860; --black: #0f0e0d; --black-2: #1c1a18; --red: #c8102e; --red-dark: #a50d26; --red-soft: #fcebee; --gold: #b8902f; --gold-2: #d9b65e; --gold-soft: #f8f0dc; --font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; --font-head: "Montserrat", "Inter", system-ui, sans-serif; --r-sm: 10px; --r: 16px; --r-lg: 22px; --sh-1: 0 1px 0 var(--line), 0 0 0 1px var(--line); --sh-2: 0 18px 44px -24px rgba(20, 18, 16, .35), 0 0 0 1px var(--line); --sh-hover: 0 26px 60px -28px rgba(20, 18, 16, .45), 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent); --ease: cubic-bezier(.22, .61, .36, 1); /* Paleta del tema Twenty Twenty-Five (WooCommerce y páginas sin plantilla propia) */ --wp--preset--color--base: #ffffff; --wp--preset--color--contrast: #141210; --wp--preset--color--accent-1: #c8102e; --wp--preset--color--accent-2: #faf7f2; --wp--preset--color--accent-3: #b8902f; --wp--preset--color--accent-4: #6f6860; --wp--preset--color--accent-5: #faf7f2; --wp--preset--color--accent-6: #ebe4d8; --wp--preset--font-family--manrope: var(--font); background: var(--white) !important; color: var(--ink) !important; font-family: var(--font) !important; font-size: 15.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; } /* 2) Base y componentes ------------------------------------------------------ */ /* El sitio ya usa una clase .ph (marcador de imagen) que choca con los iconos Phosphor. */ body.pwn i.ph { display: inline-block; background: none; color: inherit; font-size: inherit; letter-spacing: 0; text-transform: none; border-radius: 0; min-height: 0; text-align: inherit; line-height: 1; vertical-align: -.125em; } body.pwn ::selection { background: var(--red); color: #fff; } body.pwn :focus-visible { outline: 2px solid var(--gold) !important; outline-offset: 2px; } body.pwn .wp-site-blocks, body.pwn main.wp-block-group { background: transparent !important; color: var(--ink); position: relative; z-index: 1; } body.pwn h1, body.pwn h2, body.pwn h3, body.pwn h4, body.pwn h5, body.pwn h6 { font-family: var(--font-head) !important; font-weight: 700 !important; color: var(--ink); letter-spacing: -.02em; } body.pwn a { color: var(--red); } body.pwn a:hover { color: var(--red-dark); } body.pwn img { max-width: 100%; } /* Fondo: brillo cálido muy suave */ .pwn-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(800px 420px at 92% -8%, color-mix(in srgb, var(--gold-2) 22%, transparent), transparent 70%), radial-gradient(640px 420px at -8% 30%, color-mix(in srgb, var(--red) 7%, transparent), transparent 70%); } body.pwn .btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none !important; white-space: nowrap; font: 600 14px/1.2 var(--font); color: var(--ink); background: transparent; border: 1.5px solid transparent; padding: 11px 18px; border-radius: 999px; transition: background .25s var(--ease), color .25s, border-color .25s, box-shadow .25s, transform .25s var(--ease); } body.pwn .btn i { font-size: 1.1em; } body.pwn .btn-lg { font-size: 15px; padding: 14px 24px; } body.pwn .btn:hover { transform: translateY(-2px); } /* Brillo que cruza el botón al pasar el cursor */ body.pwn .btn-primary::after, body.pwn .btn-gold::after { content: ""; position: absolute; inset: 0; z-index: -1; transform: translateX(-120%); background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transition: transform .7s var(--ease); } body.pwn .btn-primary:hover::after, body.pwn .btn-gold:hover::after { transform: translateX(120%); } body.pwn .btn-primary { background: var(--red); color: #fff !important; box-shadow: 0 12px 26px -14px rgba(200, 16, 46, .8); } body.pwn .btn-primary:hover { background: var(--red-dark); color: #fff !important; } body.pwn .btn-secondary { color: var(--ink) !important; border-color: var(--ink); background: var(--white); } body.pwn .btn-secondary:hover { background: var(--ink); color: #fff !important; } body.pwn .btn-gold { background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: var(--black) !important; } body.pwn .btn-ghost { color: var(--red) !important; padding-inline: 4px; border-radius: 6px; } body.pwn .btn-ghost:hover { transform: none; color: var(--red-dark) !important; } body.pwn .btn-ghost i { transition: transform .25s var(--ease); } body.pwn .btn-ghost:hover i, body.pwn a:hover .btn-ghost i { transform: translateX(4px); } body.pwn .btn-icon { width: 42px; height: 42px; padding: 0; } body.pwn .tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; line-height: 1.4; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; } body.pwn .tag-accent { background: var(--red); color: #fff; } body.pwn .tag-neutral { background: var(--white); color: var(--ink); box-shadow: 0 0 0 1px var(--line); } body.pwn .tag-outline { border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); color: var(--gold); background: var(--gold-soft); } body.pwn .card-kicker { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); } body.pwn .card-title { font-family: var(--font-head); font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--ink); } body.pwn .card-title.sm { font-size: 16px; } .pwn-wrap { max-width: 1240px; margin-inline: auto; padding-inline: 24px; box-sizing: border-box; width: 100%; } .pwn-page { position: relative; z-index: 1; color: var(--ink); font-family: var(--font); overflow-x: clip; } .pwn-page *, .pwn-page *::before, .pwn-page *::after { box-sizing: border-box; } .pwn-page p { margin: 0; } .pwn-page img { display: block; } .pwn-sec { padding-block: 56px; } .pwn-last { padding-bottom: 96px; } /* Encabezados de sección centrados */ .pwn-kick { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 12px; } .pwn-kick > span:first-child, .pwn-kick::after { content: ""; width: 34px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold)); flex: none; } .pwn-kick::after { background: linear-gradient(90deg, var(--gold), transparent); } body.pwn .pwn-h2 { margin: 0 auto 14px; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; letter-spacing: -.025em; text-align: center; max-width: 820px; text-wrap: balance; } .pwn-h2::after { content: ""; display: block; width: 56px; height: 3px; border-radius: 3px; background: var(--red); margin: 16px auto 0; } .pwn-sub { margin: 0 auto 32px !important; color: var(--muted); max-width: 620px; text-align: center; } .pwn-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; margin-bottom: 28px; } .pwn-head .pwn-h2 { margin-bottom: 12px; } .pwn-head .pwn-sub { margin-bottom: 8px !important; } .pwn-head > .btn { order: 3; } .pwn-lead { font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 560px; text-wrap: pretty; } .pwn-muted-sm { font-size: 13px; color: var(--muted); } .pwn-mono { font: 700 12px var(--font); color: var(--gold); letter-spacing: .14em; } .pwn-tx { color: var(--ink); font-weight: 600; } .pwn-actions { display: flex; gap: 12px; flex-wrap: wrap; } .pwn-glow { color: var(--red); position: relative; white-space: nowrap; } .pwn-glow::after { content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .12em; background: linear-gradient(90deg, var(--gold-2), var(--gold)); border-radius: 4px; transform-origin: left; animation: pwnUnderline 1.1s .5s var(--ease) both; } .pwn-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(200, 16, 46, .5); animation: pwnPing 2.2s infinite; } .pwn-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--red-soft); color: var(--red); font-size: 23px; transition: background .3s, color .3s, transform .4s var(--ease); } /* Grillas y tarjetas */ .pwn-grid { display: grid; gap: 20px; } .pwn-grid-240 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); } .pwn-grid-280 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } .pwn-grid-300 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); } .pwn-grid-340 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); } .pwn-card { display: flex; flex-direction: column; border-radius: var(--r); background: var(--white); box-shadow: var(--sh-2); overflow: hidden; color: var(--ink) !important; text-decoration: none !important; transition: box-shadow .35s var(--ease), transform .35s var(--ease); } a.pwn-card:hover { box-shadow: var(--sh-hover); transform: translateY(-6px); } .pwn-card-img { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--cream-2); } .pwn-card-img.r43 { aspect-ratio: 4 / 3; } .pwn-card-img.r11 { aspect-ratio: 1 / 1; } .pwn-card-img.r169 { aspect-ratio: 16 / 10; } .pwn-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); } a.pwn-card:hover .pwn-card-img img { transform: scale(1.07); } .pwn-card-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15, 14, 13, .35), transparent 45%); pointer-events: none; } .pwn-ph { font: 600 12px var(--font); color: var(--muted); text-align: center; padding: 0 16px; } .pwn-tl { position: absolute; top: 14px; left: 14px; z-index: 1; } .pwn-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .pwn-card-tx { margin: 0; font-size: 14px; color: var(--muted); flex: 1; } .pwn-card-foot { display: flex; align-items: flex-end; justify-content: space-between; margin-top: auto; padding-top: 12px; gap: 8px; border-top: 1px dashed var(--line); } .pwn-card-foot small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .pwn-card-foot b, .pwn-price { font-family: var(--font-head); font-size: 19px; font-weight: 800; color: var(--ink); } .pwn-price del { font-size: 13px; color: var(--muted); margin-right: 4px; } .pwn-price ins { text-decoration: none; } .pwn-play { position: relative; z-index: 1; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; box-shadow: 0 0 0 8px rgba(255, 255, 255, .35); font-size: 22px; transition: transform .35s var(--ease); } .pwn-card:hover .pwn-play { transform: scale(1.1); } /* 3) Cabecera, pie y WhatsApp ------------------------------------------------ */ body.pwn header.wp-block-template-part, body.pwn footer.wp-block-template-part, body.pwn .pwhdrWrap { display: none !important; } .pwn-hdr { position: sticky; top: 0; z-index: 50; font-family: var(--font); color: var(--ink); background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); transition: box-shadow .3s; } .pwn-hdr.is-scrolled { box-shadow: 0 10px 30px -18px rgba(20, 18, 16, .35); } body.admin-bar .pwn-hdr { top: 32px; } .pwn-hdr-in { max-width: 1240px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 24px; box-sizing: border-box; transition: padding .3s; } .pwn-hdr.is-scrolled .pwn-hdr-in { padding-block: 6px; } .pwn-brand { display: flex; align-items: center; flex: none; text-decoration: none !important; } /* El PNG trae mucho margen transparente: se recorta con márgenes negativos. */ .pwn-brand img { height: 74px; width: auto; margin: -20px 0 -20px -12px; display: block; transition: height .3s, margin .3s; } .pwn-hdr.is-scrolled .pwn-brand img { height: 64px; margin-block: -17px; } .pwn-nav { display: flex; justify-content: center; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; } .pwn-nav a { position: relative; font-size: 14.5px; font-weight: 600; padding: 9px 14px; white-space: nowrap; color: var(--ink) !important; text-decoration: none !important; } .pwn-nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); } .pwn-nav a:hover::after, .pwn-nav a.is-on::after { transform: scaleX(1); } .pwn-nav a.is-on { color: var(--red) !important; } .pwn-hdr-wa { flex: none; } .pwn-burger { display: none !important; margin-left: auto; font-size: 22px; color: var(--ink) !important; border-color: var(--line) !important; } .pwn-mnav { display: flex; flex-direction: column; padding: 4px 24px 20px; gap: 2px; background: var(--white); } .pwn-mnav[hidden] { display: none; } .pwn-mnav a:not(.btn) { display: flex; justify-content: space-between; align-items: center; padding: 14px 4px; color: var(--ink) !important; text-decoration: none !important; font-size: 16px; font-weight: 600; border-bottom: 1px solid var(--line); } .pwn-mnav a.is-on { color: var(--red) !important; } .pwn-mnav .btn { margin-top: 14px; } .pwn-rule { height: 3px; background: linear-gradient(90deg, var(--red) 0 33%, var(--gold) 33% 66%, var(--black) 66%); } /* Pie de página: banda de llamada (carbón cálido) + pie claro con el logotipo real */ .pwn-ftr { position: relative; z-index: 1; font: 14.5px/1.6 var(--font); color: var(--ink-2); background: #f7f2e9; } .pwn-ftr-cta { background: radial-gradient(600px 240px at 85% 0%, rgba(37, 211, 102, .16), transparent 70%), radial-gradient(500px 240px at 0% 100%, rgba(217, 182, 94, .16), transparent 70%), #1d1a17; color: #fff; } .pwn-ftr-cta-in { max-width: 1240px; margin: 0 auto; padding: 34px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; box-sizing: border-box; } .pwn-ftr-cta b { display: block; font: 700 clamp(20px, 2.2vw, 26px) var(--font-head); letter-spacing: -.02em; color: #fff; } .pwn-ftr-cta span { color: rgba(255, 255, 255, .7); } .pwn-ftr-in { max-width: 1240px; margin: 0 auto; padding: 56px 24px 40px; display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 48px; box-sizing: border-box; } .pwn-ftr-cta::after { content: ""; display: block; height: 3px; background: linear-gradient(90deg, var(--red), var(--gold-2), var(--gold)); } .pwn-ftr-brand { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; } .pwn-ftr-logo img { height: 84px; width: auto; margin: -22px 0 -22px -14px; display: block; } .pwn-ftr-brand p { margin: 0; max-width: 340px; } .pwn-social { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; } .pwn-social a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; color: var(--ink) !important; background: #fff; box-shadow: 0 0 0 1px var(--line); text-decoration: none !important; transition: transform .3s var(--ease), background .3s, color .3s, box-shadow .3s; } .pwn-social a:hover { transform: translateY(-3px); color: #fff !important; box-shadow: none; } .pwn-social .is-wa:hover { background: #25d366; } .pwn-social .is-facebook:hover { background: #1877f2; } .pwn-social .is-instagram:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); } .pwn-social .is-tiktok:hover { background: #111; } .pwn-social .is-youtube:hover { background: #ff0000; } .pwn-social .is-linkedin:hover { background: #0a66c2; } .pwn-ftr-col { display: flex; flex-direction: column; gap: 10px; } body.pwn .pwn-ftr-col h4 { margin: 0 0 6px; font: 700 12px var(--font) !important; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep, #a8822a); } .pwn-ftr-col a, .pwn-ftr-col span { display: inline-flex; align-items: flex-start; gap: 10px; color: var(--ink-2) !important; text-decoration: none !important; transition: color .2s, transform .2s; } .pwn-ftr-col a:hover { color: var(--red) !important; transform: translateX(3px); } .pwn-ftr-col i { font-size: 18px; color: var(--red); margin-top: 2px; } .pwn-ftr-col a .ph-whatsapp-logo { color: #1fa855; } .pwn-ftr-low { max-width: 1240px; margin: 0 auto; padding: 20px 24px 28px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); box-sizing: border-box; } .pwn-ftr-low div { display: flex; gap: 18px; } .pwn-ftr-low a { color: var(--muted) !important; text-decoration: none; } .pwn-ftr-low a:hover { color: var(--red) !important; } /* WhatsApp: siempre verde con blanco (color de la marca WhatsApp) */ body.pwn .btn-wa, body.pwn a.btn[href*="wa.me"], body.pwn a.pv-btn[href*="wa.me"], body.pwn .pww-btn-wa, body.pwn .pww-btn-wa-o { background: #25d366 !important; color: #fff !important; border-color: #25d366 !important; box-shadow: 0 12px 26px -14px rgba(37, 211, 102, .9) !important; font-weight: 700; } body.pwn .btn-wa:hover, body.pwn a.btn[href*="wa.me"]:hover, body.pwn a.pv-btn[href*="wa.me"]:hover, body.pwn .pww-btn-wa:hover, body.pwn .pww-btn-wa-o:hover { background: #1ebe5a !important; color: #fff !important; border-color: #1ebe5a !important; } body.pwn .btn-wa::after, body.pwn a.btn[href*="wa.me"]::after { background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .3) 50%, transparent 70%); } .pwn-wa-float { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff !important; text-decoration: none !important; box-shadow: 0 16px 34px -12px rgba(37, 211, 102, .9); font-size: 30px; transition: transform .3s var(--ease), background .3s; } .pwn-wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: pwnRing 2.4s infinite; } .pwn-wa-float:hover { transform: scale(1.08); background: #1ebe5a; } body.pwn .pww-wa-flota { display: none !important; } /* 4) Páginas propias ----------------------------------------------------------- */ body.pwn-tpl-home main.wp-block-group, body.pwn-tpl-academia main.wp-block-group, body.pwn-tpl-servicios main.wp-block-group, body.pwn-tpl-tienda main.wp-block-group { padding: 0 !important; margin: 0 !important; } body.pwn[class*="pwn-tpl-"] .entry-content, body.pwn[class*="pwn-tpl-"] .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; } body.pwn[class*="pwn-tpl-"] .entry-content > .pwn-page { max-width: none !important; width: 100%; margin: 0 !important; } body.pwn[class*="pwn-tpl-"] .wp-block-post-title { display: none; } body.pwn[class*="pwn-tpl-"] main .alignfull, body.pwn[class*="pwn-tpl-"] main .has-global-padding { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; } body.pwn[class*="pwn-tpl-"] main > .wp-block-group { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; } /* Hero del Inicio */ .pwn-hero { padding-top: 72px; padding-bottom: 64px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 56px; align-items: center; } .pwn-hero-txt { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; } body.pwn .pwn-hero h1, body.pwn .pwn-pagehead h1 { font-size: clamp(38px, 5.6vw, 68px); font-weight: 800 !important; line-height: 1.04; letter-spacing: -.035em; margin: 0; text-wrap: balance; color: var(--ink); } .pwn-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 18px; width: 100%; margin-top: 18px; } .pwn-stats div { display: flex; flex-direction: column; gap: 2px; padding-left: 14px; border-left: 3px solid var(--gold); } .pwn-stats div:nth-child(odd) { border-left-color: var(--red); } .pwn-stats b { font: 800 28px var(--font-head); letter-spacing: -.02em; color: var(--ink); } .pwn-stats span { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .pwn-hero-media { position: relative; } .pwn-hero-halo { position: absolute; inset: 24px -24px -24px 24px; border-radius: 26px; background: linear-gradient(135deg, var(--gold-2), var(--red)); opacity: .9; pointer-events: none; } .pwn-hero-card { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; color: var(--ink) !important; text-decoration: none !important; background: var(--white); box-shadow: 0 40px 80px -40px rgba(20, 18, 16, .55); transition: transform .45s var(--ease); } .pwn-hero-card:hover { transform: translate(-6px, -6px); } .pwn-hero-img { aspect-ratio: 16 / 11; overflow: hidden; background: var(--cream-2); } .pwn-hero-img img { width: 100%; height: 100%; object-fit: cover; animation: pwnKen 18s ease-in-out infinite alternate; } .pwn-hero-foot { padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .pwn-hero-name { font: 800 22px var(--font-head); margin-top: 2px; } .pwn-hero-tags { position: absolute; top: 18px; left: -16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .pwn-hero-tags .tag { box-shadow: 0 12px 24px -12px rgba(20, 18, 16, .5); animation: pwnFloat 5s ease-in-out infinite; } .pwn-hero-tags .tag:nth-child(2) { animation-delay: -2.5s; } /* Encabezado de páginas internas (centrado) */ .pwn-pagehead { padding-top: 72px; padding-bottom: 24px; display: flex; flex-direction: column; gap: 20px; align-items: center; text-align: center; } body.pwn .pwn-pagehead h1 { font-size: clamp(34px, 4.8vw, 58px); max-width: 900px; } .pwn-pagehead .pwn-lead { margin-inline: auto; } .pwn-chipline { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } /* Mosaicos (ecosistema / servicios) */ .pwn-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 18px; } .pwn-tile { position: relative; padding: 26px; border-radius: var(--r); min-height: 210px; overflow: hidden; background: var(--white); box-shadow: var(--sh-2); display: flex; flex-direction: column; gap: 10px; color: var(--ink) !important; text-decoration: none !important; transition: box-shadow .35s var(--ease), transform .35s var(--ease); } .pwn-tile::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--red), var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); } .pwn-tile:hover { box-shadow: var(--sh-hover); transform: translateY(-6px); } .pwn-tile:hover::before { transform: scaleX(1); } .pwn-tile:hover .pwn-ic { background: var(--red); color: #fff; transform: rotate(-6deg) scale(1.05); } .pwn-tile-t { font: 700 19px var(--font-head); margin-top: 6px; } .pwn-tile p { font-size: 14px; color: var(--muted); flex: 1; text-wrap: pretty; } .pwn-tile-f { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; color: var(--red); } .pwn-tile-f i { transition: transform .3s var(--ease); } .pwn-tile:hover .pwn-tile-f i { transform: translateX(5px); } /* Banda oscura (negro + dorado) */ .pwn-band { margin: 56px 0; background: radial-gradient(700px 300px at 85% 0%, rgba(217, 182, 94, .22), transparent 70%), var(--black); color: #fff; position: relative; overflow: hidden; } .pwn-band > .pwn-wrap { padding-top: 72px; padding-bottom: 72px; } body.pwn .pwn-band .pwn-h2 { color: #fff; } .pwn-band .pwn-h2::after { background: var(--gold); } .pwn-band .pwn-sub, .pwn-band .pwn-note { color: rgba(255, 255, 255, .72); } .pwn-band .pwn-note { text-align: center; } .pwn-band .pwn-note a { color: var(--gold-2); } .pwn-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 28px; } .pwn-steps > div { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--r); background: rgba(255, 255, 255, .04); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); transition: background .3s, box-shadow .3s; } .pwn-steps > div:hover { background: rgba(255, 255, 255, .07); box-shadow: 0 0 0 1px rgba(217, 182, 94, .5); } .pwn-step-t { display: flex; align-items: center; gap: 10px; font: 700 20px var(--font-head); color: #fff; } .pwn-step-t i { color: var(--gold-2); } .pwn-steps p { color: rgba(255, 255, 255, .72); font-size: 15px; text-wrap: pretty; } .pwn-band .pwn-mono { color: var(--gold-2); } /* Aliados */ .pwn-allies { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-block: 28px; border-block: 1px solid var(--line); } .pwn-allies-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 44px; } .pwn-allies-row img { height: 52px; width: auto; max-width: 170px; object-fit: contain; filter: grayscale(1); opacity: .55; transition: opacity .3s, filter .3s; } .pwn-allies-row img:hover { opacity: 1; filter: none; } /* Collage de clientes */ .pwn-collage { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 14px; } .pwn-collage figure { margin: 0; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-2); background: var(--cream-2); position: relative; } .pwn-collage figure.big { grid-column: span 2; grid-row: span 2; } .pwn-collage figure.wide { grid-column: span 2; } .pwn-collage img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); } .pwn-collage figure::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 0 var(--gold); transition: box-shadow .35s var(--ease); pointer-events: none; } .pwn-collage figure:hover img { transform: scale(1.06); } .pwn-collage figure:hover::after { box-shadow: inset 0 0 0 3px var(--gold); } /* Videos (Wistia) */ .pwn-videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1040px; margin-inline: auto; } .pwn-video { border-radius: var(--r); overflow: hidden; background: var(--black); box-shadow: 0 24px 50px -26px rgba(20, 18, 16, .6), 0 0 0 1px var(--line); } .pwn-video wistia-player { display: block; width: 100%; } /* Reseñas */ .pwn-rev-head { display: flex; flex-direction: column; align-items: center; gap: 0; margin-bottom: 28px; text-align: center; } .pwn-rev-head .pwn-h2 { margin-bottom: 10px; } .pwn-rev-head span { color: var(--muted); } .pwn-review { position: relative; margin: 0; padding: 28px 26px 24px; border-radius: var(--r); background: var(--white); box-shadow: var(--sh-2); display: flex; flex-direction: column; gap: 14px; transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .pwn-review::before { content: "“"; position: absolute; top: -6px; right: 20px; font: 800 96px/1 var(--font-head); color: var(--gold-soft); } .pwn-review:hover { transform: translateY(-6px); box-shadow: var(--sh-hover); } .pwn-stars { color: var(--gold); letter-spacing: 3px; font-size: 17px; } .pwn-review blockquote { position: relative; margin: 0; padding: 0; border: 0; font-size: 17px; line-height: 1.55; flex: 1; color: var(--ink); font-style: normal; } .pwn-review figcaption { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 13px; color: var(--muted); } .pwn-review figcaption img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--gold); } /* Visítanos / CTA */ .pwn-visit { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); border-radius: var(--r-lg); overflow: hidden; background: var(--black); box-shadow: 0 40px 80px -40px rgba(20, 18, 16, .6); } .pwn-visit-solo { grid-template-columns: 1fr; text-align: center; } .pwn-visit-solo .pwn-visit-tx { align-items: center; } .pwn-visit-tx { padding: 44px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; color: #fff; background: radial-gradient(500px 260px at 0% 0%, rgba(200, 16, 46, .28), transparent 70%); } .pwn-visit .pwn-kick { justify-content: flex-start; } .pwn-visit .pwn-kick > span:first-child { display: block; } .pwn-visit .pwn-kick::after { display: none; } .pwn-visit-solo .pwn-kick { justify-content: center; } .pwn-visit .card-kicker { color: var(--gold-2); } body.pwn .pwn-visit h2 { margin: 0; font-size: 32px; color: #fff; } .pwn-visit p { color: rgba(255, 255, 255, .72); } .pwn-visit .pwn-actions { margin-top: 8px; } .pwn-visit .btn-secondary { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, .55); } .pwn-visit .btn-secondary:hover { background: #fff; color: var(--ink) !important; } .pwn-visit iframe { border: 0; width: 100%; min-height: 320px; height: 100%; display: block; filter: grayscale(.25); } .pwn-visit-img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; } /* Academia */ .pwn-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 18px; } .pwn-feature { position: relative; padding: 32px; border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; gap: 12px; justify-content: flex-end; min-height: 280px; color: #fff; background: radial-gradient(500px 260px at 100% 0%, rgba(217, 182, 94, .28), transparent 70%), var(--black); } body.pwn .pwn-feature h3 { margin: 0; font-size: 26px; line-height: 1.2; max-width: 22ch; color: #fff; } .pwn-feature p { color: rgba(255, 255, 255, .75); max-width: 46ch; } .pwn-feature .card-kicker { color: var(--gold-2); } .pwn-feature-ic { position: absolute; top: 24px; right: 24px; font-size: 64px; color: var(--red); } .pwn-list { display: flex; flex-direction: column; gap: 12px; } .pwn-list > div { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 12px; background: var(--white); box-shadow: var(--sh-2); font-weight: 600; transition: transform .3s var(--ease), box-shadow .3s; } .pwn-list > div:hover { transform: translateX(6px); box-shadow: var(--sh-hover); } .pwn-list i { color: var(--red); font-size: 22px; } .pwn-list span:nth-child(2) { flex: 1; } .pwn-path { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 30px; border-radius: var(--r); background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); color: #fff !important; text-decoration: none !important; transition: box-shadow .35s, transform .35s var(--ease), background .35s; } .pwn-path:hover { background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 1px var(--gold-2); transform: translateY(-5px); } .pwn-path .pwn-ic { background: rgba(217, 182, 94, .15); color: var(--gold-2); } body.pwn .pwn-path h3 { margin: 4px 0 0; font-size: 22px; color: #fff; } .pwn-path p { color: rgba(255, 255, 255, .72); flex: 1; } .pwn-path .btn { margin-top: 6px; } /* Bloques del plugin puruwahome-web incrustados en páginas propias */ .pwn-embed:empty { display: none; } .pwn-embed > .pww-bloque, .pwn-embed .pww-bloque { width: 100% !important; max-width: 1240px !important; padding: 56px 24px !important; margin-inline: auto !important; } /* 5) Plugin puruwahome-web (ya usa crema, rojo y dorado: solo se unifica tipografía y forma) */ body.pwn .pww { --ink: #141210; --ink2: #0f0e0d; --muted: #6f6860; --crema: #faf7f2; --crema2: #fdfbf7; --linea: #ebe4d8; --rojo: #c8102e; --rojo2: #a50d26; --oro: #b8902f; --r: 16px; --rs: 12px; --sh: 0 18px 44px -24px rgba(20, 18, 16, .35), 0 0 0 1px #ebe4d8; --sh2: 0 12px 30px -18px rgba(20, 18, 16, .35); font-family: var(--font) !important; } body.pwn .pww h1, body.pwn .pww h2, body.pwn .pww h3, body.pwn .pww h4 { font-family: var(--font-head) !important; } body.pwn .pww-wrap { width: 100%; max-width: 1240px; padding-inline: 24px; box-sizing: border-box; } body.pwn .pww-eyebrow { color: var(--gold); } body.pwn .pww-bloque-cab { align-items: center; text-align: center; } body.pwn .pww-bloque-cab p { margin-inline: auto; } body.pwn .pww-btn { font-family: var(--font); font-weight: 600; } body.pwn .pww-dots button.activo { background: var(--gold); } /* Market: el botón Filtros (pantallas < 980 px) debe verse claro */ body.pwn .pww-filtros-btn { background: var(--white) !important; color: var(--ink) !important; border: 1.5px solid var(--ink) !important; font-weight: 700; box-shadow: 0 10px 24px -16px rgba(20, 18, 16, .5); } body.pwn .pww-filtros-btn:hover { background: var(--ink) !important; color: #fff !important; } body.pwn .pww-filtros { background: var(--white); border-color: var(--line); box-shadow: 0 18px 44px -28px rgba(20, 18, 16, .35); } body.pwn .pww-cat.activo .pww-cat-ic { border-color: var(--red); } body.pwn .pww-cat:hover .pww-cat-ic { border-color: var(--gold); } body.pwn .pww-card, body.pwn .pww-prod { border: 0 !important; box-shadow: var(--sh-2); } body.pwn .pww-card:hover, body.pwn .pww-prod:hover { box-shadow: var(--sh-hover); } body.pwn .pww .pgo { color: var(--red) !important; } body.pwn .pww-ticker { background: var(--black) !important; color: var(--gold-2); } body.pwn .pww-ticker i { color: var(--red); opacity: 1; } body.pwn .pww-final { background: radial-gradient(700px 300px at 85% 0%, rgba(217, 182, 94, .22), transparent 70%), var(--black) !important; } body.pwn .pww-final::before { background: radial-gradient(circle, rgba(200, 16, 46, .35), transparent 70%); } body.pwn .pww-pasos li:last-child > span { background: var(--red); } body.pwn .pww-pasos li > span { background: var(--black); color: var(--gold-2); } body.pwn .pww-kpi-ic { background: var(--red-soft); } body.pwn .pww-hov-ic { background: var(--red); } body.pwn .pww-barra-movil b { font-family: var(--font-head); } /* Tienda: secciones Importaciones / Ropa / Ferretería */ .pwn-shop .pwn-chipline .tag { text-decoration: none !important; font-size: 12px; padding: 8px 14px; transition: background .25s, color .25s, box-shadow .25s; } .pwn-shop .pwn-chipline .tag:hover { background: var(--ink); color: #fff; box-shadow: none; } .pwn-shop-sec { scroll-margin-top: 90px; border-top: 1px solid var(--line); } .pwn-shop-sec:first-of-type { border-top: 0; } .pwn-shop-head { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; flex-wrap: wrap; } body.pwn .pwn-shop-head h2 { margin: 0; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.02em; } .pwn-shop-head p { margin: 2px 0 0; color: var(--muted); } .pwn-shop-head > div { flex: 1; min-width: 220px; } .pwn-count { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); background: var(--gold-soft); padding: 6px 12px; border-radius: 999px; } .pwn-prod .card-title { text-decoration: none !important; color: var(--ink) !important; } .pwn-prod .card-title:hover { color: var(--red) !important; } .pwn-prod .pwn-card-body { gap: 8px; } .pwn-prod .pwn-price { margin-top: auto; } .pwn-sku { align-self: flex-start; font: 700 11px ui-monospace, Menlo, monospace; letter-spacing: .06em; color: var(--muted); background: var(--cream-2); border-radius: 6px; padding: 3px 8px; } .pwn-prod-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; } .pwn-prod-btns .btn { padding: 10px 12px; font-size: 13.5px; } .pwn-prod-btns .btn:only-child { grid-column: 1 / -1; } .pwn-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 44px 20px; border-radius: var(--r); border: 1.5px dashed var(--line); background: var(--cream); } body.pwn .pwn-empty > i.ph { font-size: 40px; color: var(--gold); } .pwn-empty p { margin: 0; color: var(--muted); max-width: 420px; } /* 6) WooCommerce y tema --------------------------------------------------------- */ body.pwn .wp-element-button, body.pwn .wp-block-button__link, body.pwn .woocommerce button.button, body.pwn .woocommerce a.button, body.pwn .wc-block-components-button:not(.is-link), body.pwn .single_add_to_cart_button { background: var(--red) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; font: 600 14px/1.2 var(--font) !important; padding: 13px 22px !important; box-shadow: 0 12px 26px -14px rgba(200, 16, 46, .8) !important; transition: background .25s, transform .25s var(--ease); } body.pwn .wp-element-button:hover, body.pwn .wp-block-button__link:hover, body.pwn .woocommerce button.button:hover, body.pwn .woocommerce a.button:hover, body.pwn .wc-block-components-button:not(.is-link):hover { background: var(--red-dark) !important; transform: translateY(-2px); } body.pwn input[type=text], body.pwn input[type=email], body.pwn input[type=tel], body.pwn input[type=number], body.pwn input[type=password], body.pwn input[type=search], body.pwn textarea, body.pwn select { border: 1px solid var(--line) !important; border-radius: 10px !important; background: var(--white); } body.pwn input:focus, body.pwn textarea:focus, body.pwn select:focus { border-color: var(--gold) !important; } body.pwn .wc-block-components-product-price, body.pwn .woocommerce .price { color: var(--ink) !important; font-weight: 700; } body.pwn .woocommerce-message, body.pwn .woocommerce-info, body.pwn .wc-block-components-notice-banner { border-top-color: var(--gold) !important; } body.pwn .wp-block-woocommerce-product-image-gallery img, body.pwn .woocommerce-product-gallery img, body.pwn .wc-block-components-product-image img { border-radius: var(--r); } /* 7) Animaciones ------------------------------------------------------------------ */ @keyframes pwnPing { 0% { box-shadow: 0 0 0 0 rgba(200, 16, 46, .55); } 80%, 100% { box-shadow: 0 0 0 9px rgba(200, 16, 46, 0); } } @keyframes pwnRing { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.55); opacity: 0; } } @keyframes pwnFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes pwnKen { from { transform: scale(1); } to { transform: scale(1.08) translate(-1%, -1%); } } @keyframes pwnUnderline { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes pwnRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } /* Entrada del hero al cargar */ .pwn-hero-txt > *, .pwn-pagehead > * { animation: pwnRise .8s var(--ease) both; } .pwn-hero-txt > :nth-child(2), .pwn-pagehead > :nth-child(2) { animation-delay: .08s; } .pwn-hero-txt > :nth-child(3), .pwn-pagehead > :nth-child(3) { animation-delay: .16s; } .pwn-hero-txt > :nth-child(4), .pwn-pagehead > :nth-child(4) { animation-delay: .24s; } .pwn-hero-txt > :nth-child(5) { animation-delay: .32s; } .pwn-hero-media { animation: pwnRise 1s .2s var(--ease) both; } /* Aparición al hacer scroll (la clase la pone nocturne.js solo a lo que está fuera de pantalla) */ .pwn-rv { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); } .pwn-rv.is-in { opacity: 1; transform: none; } .pwn-kick.pwn-rv > span:first-child, .pwn-kick.pwn-rv::after { transform: scaleX(0); transition: transform .9s .2s var(--ease); } .pwn-kick.pwn-rv > span:first-child { transform-origin: right; } .pwn-kick.pwn-rv::after { transform-origin: left; } .pwn-kick.pwn-rv.is-in > span:first-child, .pwn-kick.pwn-rv.is-in::after { transform: scaleX(1); } .pwn-h2.pwn-rv::after { transform: scaleX(0); transition: transform .9s .35s var(--ease); } .pwn-h2.pwn-rv.is-in::after { transform: scaleX(1); } /* 8) Responsivo ------------------------------------------------------------------- */ @media (max-width: 960px) { .pwn-nav, .pwn-hdr-wa { display: none !important; } .pwn-burger { display: inline-flex !important; } .pwn-collage { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; } .pwn-hero-tags { left: 10px; } } @media (max-width: 782px) { body.admin-bar .pwn-hdr { top: 46px; } } @media (max-width: 640px) { .pwn-wrap, .pwn-hdr-in, body.pwn .pww-wrap { padding-inline: 16px; } .pwn-mnav { padding-inline: 16px; } .pwn-brand img { height: 62px; margin-block: -17px; } .pwn-sec { padding-block: 44px; } .pwn-hero { padding-top: 40px; gap: 44px; } .pwn-hero-halo { inset: 14px -10px -14px 14px; } .pwn-pagehead { padding-top: 44px; } .pwn-lead { font-size: 16px; } .pwn-stats { grid-template-columns: 1fr 1fr; } .pwn-collage { grid-auto-rows: 140px; gap: 8px; } .pwn-videos { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; } .pwn-video { scroll-snap-align: start; } .pwn-visit-tx { padding: 30px 22px; } body.pwn .pwn-visit h2 { font-size: 26px; } .pwn-wa-float { right: 16px; bottom: 16px; } body.pwn.pww-pagina-propiedad .pwn-wa-float { display: none; } .pwn-ftr-in { grid-template-columns: 1fr; gap: 32px; padding-top: 44px; } .pwn-ftr-cta-in { flex-direction: column; align-items: flex-start; } .pwn-ftr-low { flex-direction: column; } } @media (prefers-reduced-motion: reduce) { body.pwn *, body.pwn *::before, body.pwn *::after { animation: none !important; transition: none !important; } .pwn-rv { opacity: 1; transform: none; } } /* v1.4.0 — el contenido nunca queda oculto por animaciones */ .pwn-rv, [data-rv], .pv-pillar, .pv-intro, .pv-split-tx, .pv-split-media { opacity: 1 !important; transform: none !important; } .pwn-tag-play, .pwn-play { display: none !important; } /* WhatsApp: verde oficial con texto blanco */ body.pwn a[href*="wa.me"], body.pwn .pwn-hdr-wa, body.pwn .pww-btn-wa-o { background: #25d366 !important; color: #fff !important; border-color: #25d366 !important; } body.pwn a[href*="wa.me"]:hover { background: #1ebe5a !important; border-color: #1ebe5a !important; } body.pwn a[href*="wa.me"] i { color: #fff !important; } /* ============================================================ v1.5.0 * Paleta de marca (blanco, negro, rojo; oro solo para resaltar) y * tipografía Poppins + Montserrat. El verde queda SOLO en el ícono * de WhatsApp y en la burbuja flotante. * ============================================================ */ body.pwn { --font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; --font-head: "Montserrat", "Poppins", system-ui, sans-serif; } /* Toque de cursiva elegante en los realces dorados de títulos */ body.pwn .pv-hero h1 span, body.pwn .pwn-glow, body.pwn .pwn-accent-ital { font-style: italic; } /* Botones de WhatsApp: fondo tinta + texto blanco + ícono verde (no todo verde) */ body.pwn .btn-wa, body.pwn a.btn[href*="wa.me"], body.pwn a.pv-btn[href*="wa.me"], body.pwn .pww-btn-wa, body.pwn .pww-btn-wa-o, body.pwn .pwn-hdr-wa, body.pwn .pwn-pdp-wa { background: #141210 !important; color: #fff !important; border-color: #141210 !important; box-shadow: 0 14px 30px -16px rgba(20, 18, 16, .55) !important; } body.pwn .btn-wa:hover, body.pwn a.btn[href*="wa.me"]:hover, body.pwn a.pv-btn[href*="wa.me"]:hover, body.pwn .pww-btn-wa:hover, body.pwn .pww-btn-wa-o:hover, body.pwn .pwn-hdr-wa:hover, body.pwn .pwn-pdp-wa:hover { background: #000 !important; border-color: #000 !important; } body.pwn .btn-wa i, body.pwn a.btn[href*="wa.me"] i, body.pwn a.pv-btn[href*="wa.me"] i, body.pwn .pww-btn-wa i, body.pwn .pww-btn-wa-o i, body.pwn .pwn-hdr-wa i, body.pwn .pwn-pdp-wa i { color: #25d366 !important; } /* Footer CTA: sin brillo verde — oro y rojo sobre carbón */ .pwn-ftr-cta { background: radial-gradient(600px 240px at 85% 0%, rgba(200, 16, 46, .14), transparent 70%), radial-gradient(500px 240px at 0% 100%, rgba(184, 144, 47, .20), transparent 70%), #141210 !important; } /* La burbuja flotante de WhatsApp sí es un ícono: se mantiene verde */ .pwn-wa-float { background: #25d366 !important; color: #fff !important; } .pwn-wa-float:hover { background: #1ebe5a !important; } /* Animación suave de los íconos sociales y de WhatsApp */ @keyframes pwnFloatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .pwn-social a i { transition: transform .3s var(--ease); } .pwn-social a:hover i { transform: scale(1.15) rotate(-6deg); } .pwn-pdp-wa i, .pwn-ftr-cta .btn-wa i { animation: pwnFloatY 2.4s var(--ease) infinite; } /* -------- Marketplace: grilla de propiedades (datos de la app vía WooCommerce) -------- */ .pwn-pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; max-width: 1240px; margin: 0 auto; padding: 8px 0 12px; } .pwn-pc { background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2); display: flex; flex-direction: column; transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .pwn-pc:hover { transform: translateY(-6px); box-shadow: var(--sh-hover); } .pwn-pc-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream-2); } .pwn-pc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .pwn-pc:hover .pwn-pc-media img { transform: scale(1.06); } .pwn-pc-ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 40px; color: var(--line); } .pwn-pc-tag { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; background: rgba(20, 18, 16, .80); color: #fff; font: 700 12px var(--font-head); letter-spacing: .03em; padding: 6px 12px; border-radius: 999px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .pwn-pc-tag i { font-size: 13px; } .pwn-pc-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; } body.pwn .pwn-pc-title { margin: 0; font: 700 19px/1.25 var(--font-head) !important; color: var(--ink); letter-spacing: -.01em; } .pwn-pc-loc { margin: 0; font-size: 13.5px; color: var(--muted); display: flex; gap: 6px; align-items: flex-start; } .pwn-pc-loc i { color: var(--red); margin-top: 2px; font-size: 15px; } .pwn-pc-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); flex-wrap: wrap; } .pwn-pc-price { font: 800 20px var(--font-head); color: var(--ink); } .pwn-pc-price del { color: var(--muted); font-weight: 500; font-size: 13px; margin-right: 4px; } .pwn-pc-price ins { text-decoration: none; } .pwn-pc-btns { display: flex; gap: 8px; } .pwn-pc-btns .btn { padding: 9px 14px; font-size: 13.5px; } .pwn-empty { text-align: center; color: var(--muted); padding: 48px 20px; font-size: 16px; } .pwn-pdp-wa { display: inline-flex; margin-top: 14px; } /* -------- Marketplace: barra de buscador + filtros (v1.6.0) -------- */ .pwn-mkt { max-width: 1240px; margin: 0 auto; } .pwn-mkt-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 26px; padding: 14px; background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-2); position: sticky; top: 84px; z-index: 20; } body.admin-bar .pwn-mkt-bar { top: 116px; } .pwn-mkt-search { flex: 1 1 240px; display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: var(--cream); border-radius: 999px; border: 1px solid var(--line); } .pwn-mkt-search i { font-size: 18px; color: var(--muted); } .pwn-mkt-search input { flex: 1; border: 0; background: transparent; font: 15px var(--font); color: var(--ink); outline: none; } .pwn-mkt-chips { display: flex; gap: 6px; flex-wrap: wrap; } .pwn-mkt-chips button { font: 600 14px var(--font); padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); cursor: pointer; transition: all .25s var(--ease); } .pwn-mkt-chips button:hover { border-color: var(--ink); } .pwn-mkt-chips button.is-on { background: var(--ink); color: #fff; border-color: var(--ink); } .pwn-mkt-sel { font: 600 14px var(--font); padding: 11px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); cursor: pointer; outline: none; } .pwn-mkt-sel:focus { border-color: var(--ink); } .pwn-mkt-none { text-align: center; color: var(--muted); padding: 40px 20px; font-size: 16px; } .pwn-mkt-none a { color: var(--red); font-weight: 600; } @media (max-width: 720px) { .pwn-mkt-bar { position: static; } .pwn-mkt-search { flex: 1 1 100%; } } /* ============================================================ v1.6.2 * WhatsApp verde de marca (fondo verde, texto e ícono blancos) y SOLO en * los botones marcados .btn-wa. Menos botones, más amigable. * ============================================================ */ body.pwn .btn-wa, body.pwn .pww-btn-wa, body.pwn .pww-btn-wa-o, body.pwn .pwn-hdr-wa, body.pwn .pwn-pdp-wa { background: #25d366 !important; color: #fff !important; border-color: #25d366 !important; box-shadow: 0 12px 26px -14px rgba(37, 211, 102, .8) !important; font-weight: 700; } body.pwn .btn-wa:hover, body.pwn .pww-btn-wa:hover, body.pwn .pww-btn-wa-o:hover, body.pwn .pwn-hdr-wa:hover, body.pwn .pwn-pdp-wa:hover { background: #1ebe5a !important; border-color: #1ebe5a !important; color: #fff !important; } body.pwn .btn-wa i, body.pwn .pww-btn-wa i, body.pwn .pwn-hdr-wa i, body.pwn .pwn-pdp-wa i { color: #fff !important; } .pwn-wa-float { background: #25d366 !important; color: #fff !important; } .pwn-wa-float:hover { background: #1ebe5a !important; } /* Botón sutil (outline) — para CTAs secundarios como "Iniciar como asesor" */ body.pwn .btn-line { background: transparent !important; color: var(--ink) !important; border: 1.5px solid var(--ink) !important; box-shadow: none !important; font-weight: 600; } body.pwn .btn-line:hover { background: var(--ink) !important; color: #fff !important; } body.pwn .btn-line i { color: inherit !important; } /* Tarjeta de propiedad: CTA de ancho completo */ .pwn-pc-cta { width: 100%; justify-content: center; margin-top: 2px; } /* Academia: video destacado, podcast y banda de asesores */ .pwn-video-feat { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: stretch; } .pwn-video-ph { position: relative; aspect-ratio: 16/9; border-radius: var(--r-lg); display: grid; place-items: center; gap: 10px; color: #fff; background: linear-gradient(135deg, #1c1a18, #141210); box-shadow: var(--sh-2); overflow: hidden; } .pwn-video-ph::after { content: ""; position: absolute; inset: 0; background: radial-gradient(400px 200px at 70% 10%, rgba(200,16,46,.22), transparent 70%), radial-gradient(360px 200px at 0% 100%, rgba(184,144,47,.22), transparent 70%); } .pwn-video-ph i { font-size: 68px; position: relative; opacity: .95; } .pwn-video-ph span { position: relative; font: 600 14px var(--font); letter-spacing: .04em; color: rgba(255,255,255,.75); } .pwn-video-side { display: flex; flex-direction: column; justify-content: center; gap: 14px; } body.pwn .pwn-video-side h3 { font: 800 clamp(22px,2.6vw,30px) var(--font-head) !important; margin: 0; color: var(--ink); } .pwn-video-side h3 em { color: var(--gold); font-style: italic; } .pwn-video-side p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.6; } .pwn-podcast-ph { display: flex; align-items: center; gap: 18px; padding: 30px; border-radius: var(--r-lg); border: 1.5px dashed var(--line); background: var(--cream); color: var(--ink-2); } .pwn-podcast-ph i { font-size: 40px; color: var(--gold); flex: none; } .pwn-podcast-ph p { margin: 0; font-size: 16px; } .pwn-asesor { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .pwn-asesor .pwn-sub { margin: 6px 0 0; } @media (max-width: 760px) { .pwn-video-feat { grid-template-columns: 1fr; } } /* v1.7.0 — Badge rojo "lotes disponibles" (dato de la app vía stock) */ .pwn-pc-lotes { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; background: var(--red); color: #fff; font: 800 12px/1 var(--font-head); letter-spacing: .02em; padding: 7px 12px; border-radius: 999px; box-shadow: 0 8px 20px -8px rgba(200, 16, 46, .7); } .pwn-pc-lotes::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.25); animation: pwPulse 2s infinite; } /* ============================================================ v1.8.0 — Landing de ventas (calentador solar) */ .pwn-land { background: var(--cream); } .pwn-land-bar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 24px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); } body.admin-bar .pwn-land-bar { top: 32px; } .pwn-land-logo img { height: 56px; width: auto; margin: -12px 0 -12px -8px; display: block; } .pwn-cal { max-width: 1100px; margin: 0 auto; } .pwn-cal-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: 56px 24px; } .pwn-cal-hero-tx .tag { margin-bottom: 14px; } body.pwn .pwn-cal-hero-tx h1 { font: 800 clamp(32px,5vw,56px)/1.03 var(--font-head) !important; letter-spacing: -.02em; margin: 0 0 16px; color: var(--ink); } .pwn-cal-hero-tx h1 em { color: var(--gold); font-style: italic; } .pwn-cal-hero-tx > p { font-size: 18px; line-height: 1.6; color: var(--ink-2); margin: 0 0 22px; } .pwn-cal-price { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; } .pwn-cal-now { font: 800 44px var(--font-head); color: var(--ink); } .pwn-cal-old { font: 600 22px var(--font-head); color: var(--muted); text-decoration: line-through; } .pwn-cal-cta { display: flex; gap: 12px; flex-wrap: wrap; } .pwn-cal-trust { margin: 16px 0 0; font-size: 13.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; } .pwn-cal-trust i { color: var(--gold); } .pwn-cal-hero-media { display: flex; } .pwn-cal-ph { width: 100%; aspect-ratio: 4/5; border-radius: var(--r-lg); display: grid; place-items: center; gap: 10px; color: #fff; background: linear-gradient(145deg,#1c1a18,#141210); box-shadow: var(--sh-2); position: relative; overflow: hidden; } .pwn-cal-ph::after { content:""; position:absolute; inset:0; background: radial-gradient(300px 220px at 70% 15%, rgba(232,119,34,.35), transparent 70%); } .pwn-cal-ph i { font-size: 80px; position: relative; } .pwn-cal-ph span { position: relative; color: rgba(255,255,255,.7); font: 600 13px var(--font); } .pwn-cal-sec { padding: 48px 24px; } body.pwn .pwn-cal-sec h2, body.pwn .pwn-cal-final h2 { font: 800 clamp(26px,3.4vw,38px) var(--font-head) !important; text-align: center; margin: 0 0 32px; color: var(--ink); } .pwn-cal-benef { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 20px; } .pwn-cal-card { background: #fff; border-radius: var(--r-lg); padding: 28px 22px; box-shadow: var(--sh-2); text-align: center; transition: transform .35s var(--ease); } .pwn-cal-card:hover { transform: translateY(-5px); } .pwn-cal-ic { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; background: var(--gold-soft); color: var(--gold); font-size: 30px; margin-bottom: 14px; } body.pwn .pwn-cal-card h3 { font: 700 18px var(--font-head) !important; margin: 0 0 6px; color: var(--ink); } .pwn-cal-card p { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.55; } .pwn-cal-ahorro { background: #141210; color: #fff; } .pwn-cal-ahorro-in { max-width: 1000px; margin: 0 auto; padding: 44px 24px; display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; text-align: center; } .pwn-cal-ahorro-in > div { display: flex; flex-direction: column; gap: 6px; } .pwn-cal-big { font: 800 clamp(30px,4vw,46px) var(--font-head); color: var(--gold-2); } .pwn-cal-ahorro-in span:last-child { color: rgba(255,255,255,.75); font-size: 14px; } .pwn-cal-pasos { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 20px; } .pwn-cal-paso { background: #fff; border-radius: var(--r-lg); padding: 26px; box-shadow: var(--sh-2); position: relative; } .pwn-cal-num { font: 800 34px var(--font-head); color: var(--gold); opacity: .4; } body.pwn .pwn-cal-paso h3 { font: 700 18px var(--font-head) !important; margin: 6px 0; color: var(--ink); } .pwn-cal-paso p { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.55; } .pwn-cal-faq { max-width: 760px; margin: 0 auto; } .pwn-cal-faq details { background: #fff; border-radius: var(--r); box-shadow: var(--sh-2); padding: 4px 20px; margin-bottom: 12px; } .pwn-cal-faq summary { cursor: pointer; font: 600 16px var(--font); padding: 16px 0; list-style: none; color: var(--ink); } .pwn-cal-faq summary::-webkit-details-marker { display: none; } .pwn-cal-faq details[open] summary { color: var(--red); } .pwn-cal-faq p { margin: 0 0 16px; color: var(--ink-2); line-height: 1.6; } .pwn-cal-final { text-align: center; padding: 56px 24px 24px; } .pwn-cal-final .pwn-cal-cta { justify-content: center; } .pwn-land-ftr { text-align: center; padding: 36px 24px; color: var(--muted); font-size: 13.5px; } .pwn-land-ftr .pwn-social { justify-content: center; margin-bottom: 16px; } @media (max-width: 820px) { .pwn-cal-hero { grid-template-columns: 1fr; } .pwn-cal-ahorro-in { grid-template-columns: 1fr; } } /* ============================================================ v1.9.0 — Simulador de financiamiento */ .pwn-sim { background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: 26px; margin: 24px 0; } .pwn-sim-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; } .pwn-sim-head .pwn-ic { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--gold-soft); color: var(--gold); font-size: 26px; } body.pwn .pwn-sim-head h3 { font: 800 20px var(--font-head) !important; margin: 0; color: var(--ink); } .pwn-sim-head p { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); } .pwn-sim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 20px; } .pwn-sim-grid label { display: flex; flex-direction: column; gap: 8px; font: 600 13.5px var(--font); color: var(--ink-2); } .pwn-sim-grid label b { color: var(--red); } .pwn-sim-inp { display: flex; align-items: center; gap: 6px; background: var(--cream); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; } .pwn-sim-inp span { color: var(--muted); font-weight: 700; } .pwn-sim-inp input { border: 0; background: transparent; width: 100%; font: 700 17px var(--font-head); color: var(--ink); outline: none; } .pwn-sim-grid select { background: var(--cream); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; font: 600 14px var(--font); color: var(--ink); outline: none; cursor: pointer; } .pwn-sim-entrada { width: 100%; accent-color: var(--red); } .pwn-sim-entrada-val { font: 700 15px var(--font-head); color: var(--ink); } .pwn-sim-out { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 22px; border-radius: var(--r); background: linear-gradient(135deg,#1c1a18,#141210); color: #fff; margin-bottom: 16px; } .pwn-sim-cuota { font: 800 clamp(30px,5vw,42px) var(--font-head); color: var(--gold-2); display: block; line-height: 1; } .pwn-sim-out small { color: rgba(255,255,255,.7); font-size: 13px; } .pwn-sim-detail { color: rgba(255,255,255,.85); font-size: 14px; text-align: right; } .pwn-sim-cta { width: 100%; justify-content: center; } .pwn-sim-legal { margin: 12px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; } @media (max-width: 560px) { .pwn-sim-grid { grid-template-columns: 1fr; } .pwn-sim-detail { text-align: left; } } /* ============================================================ v2.0.0 — Ficha de propiedad (infografía de datos) */ body.pwn.single-product .pwn-fic-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 18px 0 22px; } .pwn-fic-item { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--sh-2); } .pwn-fic-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--gold-soft); color: var(--gold); font-size: 22px; } .pwn-fic-item small { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } body.pwn .pwn-fic-item b { font: 800 17px var(--font-head) !important; color: var(--ink); } .pwn-fic-item b .amount, .pwn-fic-item b del, .pwn-fic-item b ins { font-family: var(--font-head); } /* Ficha más limpia: ocultar migas de "Tienda" y cantidad en propiedades */ body.pwn.single-product .pwn-fic-info ~ form.cart, body.pwn.single-product .product_meta, body.pwn.single-product .woocommerce-tabs { } /* ============================================================ v2.1.0 — Landing de venta de terreno */ .pwn-prop .pwn-prop-sec { max-width: 1040px; margin: 0 auto; padding: 46px 24px; } body.pwn .pwn-prop-sec h2 { font: 800 clamp(24px,3.2vw,36px) var(--font-head) !important; text-align: center; margin: 0 0 28px; color: var(--ink); } /* Hero */ .pwn-prop-hero { background: #141210 center/cover no-repeat; color: #fff; } .pwn-prop-hero-in { max-width: 1040px; margin: 0 auto; padding: clamp(60px,10vw,120px) 24px clamp(48px,7vw,90px); } .pwn-prop-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--red); color: #fff; font: 800 13px var(--font-head); padding: 8px 16px; border-radius: 999px; margin-bottom: 18px; } .pwn-prop-badge .pwn-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pwPulse 2s infinite; } body.pwn .pwn-prop-hero h1 { font: 800 clamp(34px,6vw,64px)/1.02 var(--font-head) !important; letter-spacing: -.02em; margin: 0 0 12px; color: #fff; } .pwn-prop-loc { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.82); font-size: 17px; margin: 0 0 26px; } .pwn-prop-loc i { color: var(--gold-2); } .pwn-prop-hero-stats { display: flex; gap: 40px; flex-wrap: wrap; margin-bottom: 30px; } .pwn-prop-hero-stats span { display: flex; flex-direction: column; } .pwn-prop-hero-stats b { font: 800 clamp(20px,2.6vw,28px) var(--font-head); color: var(--gold-2); } .pwn-prop-hero-stats small { color: rgba(255,255,255,.65); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; } .pwn-prop-cta { display: flex; gap: 12px; flex-wrap: wrap; } body.pwn .btn-ivory { background: var(--ivory,#faf7f2) !important; color: var(--ink) !important; border-color: var(--ivory,#faf7f2) !important; } /* Beneficios */ .pwn-prop-benef { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 20px; } .pwn-prop-benef > div { background: #fff; border-radius: var(--r-lg); padding: 26px 22px; box-shadow: var(--sh-2); text-align: center; } .pwn-prop-benef .pwn-ic { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 15px; background: var(--gold-soft); color: var(--gold); font-size: 28px; margin-bottom: 12px; } body.pwn .pwn-prop-benef b { display: block; font: 700 17px var(--font-head) !important; color: var(--ink); margin-bottom: 4px; } .pwn-prop-benef p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.5; } /* Video, mapa, plano, galería */ .pwn-prop-video, .pwn-prop-map { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2); } .pwn-prop-map { height: 380px; } .pwn-ph-box { aspect-ratio: 16/9; border-radius: var(--r-lg); display: grid; place-items: center; gap: 10px; color: #fff; background: linear-gradient(135deg,#1c1a18,#141210); box-shadow: var(--sh-2); } .pwn-ph-box i { font-size: 56px; opacity: .85; } .pwn-ph-box span { color: rgba(255,255,255,.7); font: 600 14px var(--font); } .pwn-prop-gal { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 12px; } .pwn-prop-gal img { width: 100%; height: 180px; object-fit: cover; border-radius: var(--r); box-shadow: var(--sh-2); transition: transform .3s var(--ease); } .pwn-prop-gal a:hover img { transform: scale(1.03); } .pwn-prop-plano img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--sh-2); } .pwn-prop-pasos-sec .pwn-cal-paso .pwn-ic { display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 13px; background: var(--gold-soft); color: var(--gold); font-size: 24px; margin-bottom: 10px; } /* ============================================================ v2.3.0 — Pie de página sutil (solo redes + autoría) */ .pwn-ftr-min { background: var(--cream); border-top: 1px solid var(--line); padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; } .pwn-ftr-min .pwn-social { justify-content: center; margin: 0; } .pwn-ftr-min .pwn-social a { width: 40px; height: 40px; font-size: 18px; } .pwn-ftr-copy { color: var(--muted); font-size: 12.5px; letter-spacing: .04em; } .pwn-land-ftr { border-top: 1px solid var(--line); } /* ============================================================ v2.6.0 — Landings sin encabezado/título del tema */ body.pwn-landing header.wp-block-template-part, body.pwn-landing .wp-block-template-part.site-header, body.pwn-landing .wp-site-blocks > header, body.pwn-landing .wp-block-site-title, body.pwn-landing .wp-block-site-tagline, body.pwn-landing .wp-block-post-title, body.pwn-landing .entry-header, body.pwn-landing .page-title { display: none !important; } /* Todos los botones de WhatsApp: verde con texto e ícono blancos, también en hero */ body.pwn .pwn-prop-cta .btn-wa, body.pwn .pwn-cal-cta .btn-wa, body.pwn .pwn-land-bar .btn-wa { background: #25d366 !important; color: #fff !important; border-color: #25d366 !important; } body.pwn .pwn-prop-cta .btn-wa i, body.pwn .pwn-cal-cta .btn-wa i, body.pwn .pwn-land-bar .btn-wa i { color: #fff !important; } /* ============================================================ v2.7.0 — Botones grandes, Netflix, lightbox, chat, centrado */ /* Botones más grandes */ body.pwn .btn { padding: 13px 24px; font-size: 15.5px; border-radius: 999px; } body.pwn .btn-lg { padding: 18px 34px !important; font-size: 17.5px !important; } body.pwn .pv-btn { padding: 16px 30px; font-size: 16.5px; } /* Texto centrado */ body.pwn .pv-hero-in { text-align: center; align-items: center; } body.pwn .pv-actions { justify-content: center; } body.pwn .pwn-pc-body, body.pwn .pwn-card-body { text-align: center; } body.pwn .pwn-pc-loc { justify-content: center; } body.pwn .pwn-pc-foot { justify-content: center; } body.pwn .pwn-prop-hero-in { text-align: center; } body.pwn .pwn-prop-hero-stats, body.pwn .pwn-prop-cta { justify-content: center; } body.pwn .pwn-prop-loc { justify-content: center; } body.pwn .pwn-cal-hero-tx { text-align: center; } body.pwn .pwn-cal-price, body.pwn .pwn-cal-cta { justify-content: center; } /* Marketplace estilo Netflix (filas con scroll horizontal) */ .pwn-nf-row { margin: 0 auto 32px; max-width: 1240px; } body.pwn .pwn-nf-title { font: 800 20px var(--font-head) !important; color: var(--ink); margin: 0 0 14px; text-align: left; } .pwn-nf-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 290px); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 14px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; } .pwn-nf-track > .pwn-pc { scroll-snap-align: start; } .pwn-nf-track::-webkit-scrollbar { height: 8px; } .pwn-nf-track::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; } /* Lightbox */ .pwn-lb { position: fixed; inset: 0; z-index: 9999; background: rgba(15,14,13,.92); display: none; align-items: center; justify-content: center; padding: 24px; } .pwn-lb.is-on { display: flex; } .pwn-lb img { max-width: 94vw; max-height: 90vh; border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.6); } .pwn-lb-x { position: fixed; top: 18px; right: 22px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 28px; cursor: pointer; } .pwn-lb-x:hover { background: rgba(255,255,255,.26); } /* Botón flotante + chat de bienvenida */ .pwn-wa-wrap { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } .pwn-wa-float { position: static; width: 64px; height: 64px; font-size: 32px; } .pwn-wa-chat { max-width: 300px; background: #fff; border-radius: 18px; box-shadow: 0 20px 50px -16px rgba(20,18,16,.5); padding: 16px; position: relative; opacity: 0; transform: translateY(14px) scale(.96); pointer-events: none; transition: opacity .4s var(--ease), transform .4s var(--ease); } .pwn-wa-chat.is-on { opacity: 1; transform: none; pointer-events: auto; } .pwn-wa-chat-x { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; } .pwn-wa-chat-row { display: flex; gap: 12px; } .pwn-wa-chat-ava { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; font-size: 22px; } body.pwn .pwn-wa-chat-bub strong { display: block; font: 700 14px var(--font-head) !important; color: var(--ink); margin-bottom: 2px; } .pwn-wa-chat-bub p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); } .pwn-wa-chat-bub .btn-wa { width: 100%; justify-content: center; } @media (max-width: 480px) { .pwn-wa-chat { max-width: 76vw; } } /* Landing de terreno más compacta (tipo infografía) */ .pwn-prop .pwn-prop-sec { padding: 32px 24px; } body.pwn .pwn-prop-sec h2 { margin-bottom: 20px; } .pwn-prop-map { height: 320px; } /* ============================================================ v2.8.0 — Landings ancho completo + venta */ /* Ancho completo en landings (rompe el contenedor del tema) y oculta títulos sueltos del editor */ body.pwn-landing .wp-site-blocks, body.pwn-landing main, body.pwn-landing .is-layout-constrained, body.pwn-landing .entry-content, body.pwn-landing .wp-block-post-content { max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } body.pwn-landing .wp-block-heading, body.pwn-landing .wp-block-post-title { display: none !important; } /* Calentador: full-bleed con contenido centrado */ .pwn-cal { max-width: none; } .pwn-cal-hero { max-width: 1180px; margin: 0 auto; } .pwn-cal-foto img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--sh-2); object-fit: cover; aspect-ratio: 4/5; } .pwn-cal-offer { background: var(--ink); color: #fff; text-align: center; padding: 14px 24px; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 10px; } .pwn-cal-offer i { color: var(--gold-2); font-size: 22px; } .pwn-cal-offer strong { color: var(--gold-2); } /* Ahorro: Antes vs Ahora */ .pwn-cal-save { background: var(--cream-2); padding: 52px 24px; } .pwn-cal-save h2 { text-align: center; font: 800 clamp(24px,3.2vw,34px) var(--font-head); margin: 0 0 30px; color: var(--ink); } .pwn-cal-save-grid { max-width: 820px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; } .pwn-cal-save-box { background: #fff; border-radius: var(--r-lg); padding: 28px 22px; text-align: center; box-shadow: var(--sh-2); } .pwn-cal-save-box.is-after { box-shadow: 0 0 0 2px var(--red), var(--sh-2); } .pwn-cal-save-ic { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font-size: 28px; margin-bottom: 10px; } .is-before .pwn-cal-save-ic { background: #f3e7e1; color: #b5542f; } .is-after .pwn-cal-save-ic { background: var(--gold-soft); color: var(--gold); } body.pwn .pwn-cal-save-box b { display: block; font: 800 18px var(--font-head) !important; color: var(--ink); margin-bottom: 6px; } .pwn-cal-save-box p { margin: 0 0 12px; font-size: 14px; color: var(--ink-2); line-height: 1.5; } .pwn-cal-save-amt { font: 800 22px var(--font-head); } .is-before .pwn-cal-save-amt { color: #b5542f; } .is-after .pwn-cal-save-amt { color: #1a7a4a; } .pwn-cal-save-arrow { font-size: 28px; color: var(--muted); } .pwn-cal-save-note { text-align: center; color: var(--muted); font-size: 13.5px; margin: 20px 0 0; } /* Fila de confianza */ .pwn-cal-trustrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; } .pwn-cal-trustrow > div { display: flex; align-items: center; gap: 10px; font: 600 15px var(--font); color: var(--ink); } .pwn-cal-trustrow i { font-size: 24px; color: var(--gold); } /* Propiedad: galería en slider horizontal (menos scroll vertical) */ .pwn-prop-gal { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 280px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; } .pwn-prop-gal a { scroll-snap-align: start; } .pwn-prop-gal img { height: 200px; } @media (max-width: 680px) { .pwn-cal-save-grid { grid-template-columns: 1fr; } .pwn-cal-save-arrow { transform: rotate(90deg); } } /* ============================================================ v2.9.0 */ /* WhatsApp SIEMPRE verde (gana al estilo viejo) */ html body.pwn a.btn-wa, html body.pwn a.btn[href*="wa.me"]:not(.btn-line), html body.pwn .pv-btn.btn-wa, html body.pwn .pwn-hdr-wa, html body.pwn .pwn-pdp-wa, html body.pwn .pwn-sim-cta { background: #25d366 !important; color: #fff !important; border-color: #25d366 !important; } html body.pwn a.btn-wa i, html body.pwn a.btn[href*="wa.me"] i, html body.pwn .pv-btn.btn-wa i { color: #fff !important; } /* Home hero: logo chip + centrado */ body.pwn .pv-hero-in { text-align: center; align-items: center; } body.pwn .pv-actions { justify-content: center; } .pv-hero-logo { background: rgba(255,255,255,.95); border-radius: 14px; padding: 12px 20px; display: inline-block; margin-bottom: 22px; box-shadow: 0 12px 34px -14px rgba(0,0,0,.45); } .pv-hero-logo img { height: 48px; width: auto; display: block; } /* Float sin anillo raro */ .pwn-wa-float::before { display: none !important; } /* Netflix: cabecera con flechas (deslizar en PC) */ .pwn-nf-head { display: flex; align-items: center; justify-content: space-between; max-width: 1240px; margin: 0 auto 12px; gap: 16px; } .pwn-nf-nav { display: flex; gap: 8px; } .pwn-nf-nav button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; display: grid; place-items: center; font-size: 18px; transition: all .2s; } .pwn-nf-nav button:hover { background: var(--ink); color: #fff; border-color: var(--ink); } /* Calentador: oferta más grande */ .pwn-cal-now { font-size: clamp(42px,7vw,62px) !important; } .pwn-cal-old { font-size: clamp(20px,3vw,28px) !important; } .pwn-cal-offer { font-size: 16px; font-weight: 600; padding: 16px 24px; } .pwn-cal-offer strong { font-weight: 800; } /* ============================================================ v2.10.0 — Tarjetas estilo Haven + logo tienda */ /* Tarjeta de propiedad más elegante */ body.pwn .pwn-pc-body { text-align: left; gap: 8px; padding: 16px 18px 18px; } .pwn-pc-status { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; background: rgba(20,18,16,.72); color: #fff; font: 700 11.5px var(--font-head); letter-spacing: .03em; padding: 6px 11px; border-radius: 999px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .pwn-pc-status .pwn-dot { width: 7px; height: 7px; border-radius: 50%; background: #25d366; box-shadow: 0 0 0 3px rgba(37,211,102,.3); } body.pwn .pwn-pc-loc { justify-content: flex-start; margin: 0; } .pwn-pc-specs { display: flex; flex-wrap: wrap; gap: 14px; padding: 12px 0; margin: 2px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .pwn-pc-specs span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); font-weight: 500; } .pwn-pc-specs i { font-size: 16px; color: var(--gold); } body.pwn .pwn-pc-foot { justify-content: space-between; align-items: center; border-top: 0; padding-top: 10px; flex-wrap: wrap; gap: 10px; } .pwn-pc-cta { padding: 10px 18px !important; font-size: 14px !important; } /* Logo en la Tienda */ .pwn-shop-brand { text-align: center; padding: 26px 24px 4px; } .pwn-shop-brand img { height: 56px; width: auto; } /* ============================================================ v2.11.0 — Home a pantalla completa, fondo en movimiento, chat */ /* Hero full-screen con fondo animado (Ken Burns) */ body.pwn .pv-hero { min-height: 100vh; } .pv-hero-bg img { animation: pvKen 22s ease-in-out infinite alternate; will-change: transform; } @keyframes pvKen { from { transform: scale(1.06); } to { transform: scale(1.20) translate(-2%, -1.5%); } } @media (prefers-reduced-motion: reduce) { .pv-hero-bg img { animation: none; } } /* Sección SEO (más contenido) */ .pv-seo { background: var(--white); } .pv-seo .pv-wrap { max-width: 920px; text-align: center; padding: 72px 24px; } .pv-seo-kick { display: inline-block; font: 700 12px var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; } body.pwn .pv-seo h2 { font: 800 clamp(26px,3.6vw,40px) var(--font-head) !important; color: var(--ink); margin: 0 0 18px; letter-spacing: -.02em; } .pv-seo p { font-size: 17px; line-height: 1.7; color: var(--ink-2); margin: 0 auto 16px; max-width: 760px; } .pv-seo-points { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 20px; margin-top: 34px; text-align: center; } .pv-seo-points > div { display: flex; flex-direction: column; align-items: center; gap: 4px; } .pv-seo-points i { font-size: 32px; color: var(--red); margin-bottom: 6px; } body.pwn .pv-seo-points b { font: 700 16px var(--font-head) !important; color: var(--ink); } .pv-seo-points span { font-size: 13.5px; color: var(--muted); } /* Botón flotante que se mueve */ @keyframes pwnFloatBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } .pwn-wa-float { animation: pwnFloatBounce 2.4s ease-in-out infinite; } .pwn-wa-float:hover { animation-play-state: paused; } /* ============================================================ v2.11.0b — Barras de scroll visibles en sliders (PC) + más animación */ .pwn-nf-track, .pwn-prop-gal { scrollbar-width: auto; scrollbar-color: var(--gold) var(--line); scroll-behavior: smooth; } .pwn-nf-track::-webkit-scrollbar, .pwn-prop-gal::-webkit-scrollbar { height: 12px; } .pwn-nf-track::-webkit-scrollbar-track, .pwn-prop-gal::-webkit-scrollbar-track { background: var(--line); border-radius: 999px; } .pwn-nf-track::-webkit-scrollbar-thumb, .pwn-prop-gal::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 999px; border: 2px solid var(--cream); } .pwn-nf-track::-webkit-scrollbar-thumb:hover, .pwn-prop-gal::-webkit-scrollbar-thumb:hover { background: var(--gold-deep,#a8822a); } /* Pista para galería con flechas (añadidas por JS) */ .pwn-gal-wrap { position: relative; } .pwn-gal-nav { position: absolute; top: calc(50% - 26px); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(20,18,16,.8); color: #fff; font-size: 20px; cursor: pointer; display: grid; place-items: center; z-index: 3; transition: background .2s; } .pwn-gal-nav:hover { background: var(--ink); } .pwn-gal-prev { left: 6px; } .pwn-gal-next { right: 6px; } /* ============================================================ v2.12.0 — Hero de propiedad dividido (info izq / foto der) */ .pwn-ph2 { display: grid; grid-template-columns: 1fr 1.15fr; min-height: 86vh; align-items: stretch; } .pwn-ph2-tx { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 48px clamp(24px,5vw,72px); background: var(--cream); } .pwn-ph2-logo img { height: 48px; width: auto; margin-bottom: 8px; } body.pwn .pwn-ph2 h1 { font: 800 clamp(34px,5vw,62px)/1.02 var(--font-head) !important; color: var(--ink); letter-spacing: -.02em; margin: 4px 0; } .pwn-ph2-loc { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 16px; margin: 0; } .pwn-ph2-loc i { color: var(--red); } .pwn-ph2-stats { display: flex; gap: 34px; flex-wrap: wrap; margin: 12px 0 6px; } body.pwn .pwn-ph2-stats b { font: 800 clamp(20px,2.4vw,28px) var(--font-head) !important; color: var(--ink); display: block; line-height: 1; } .pwn-ph2-stats small { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; } .pwn-ph2-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; } .pwn-ph2-media { position: relative; min-height: 52vh; overflow: hidden; background: var(--cream-2); } .pwn-ph2-media a, .pwn-ph2-media img { display: block; width: 100%; height: 100%; } .pwn-ph2-media img { object-fit: cover; } .pwn-ph2-media .pwn-ph-box { height: 100%; aspect-ratio: auto; border-radius: 0; } @media (max-width: 860px) { .pwn-ph2 { grid-template-columns: 1fr; min-height: auto; } .pwn-ph2-media { min-height: 44vh; order: -1; } } /* ============================================================ v2.13.0 — Portada cinematográfica */ .pv-hero-brand { position: absolute; top: 24px; left: 28px; z-index: 5; background: rgba(255,255,255,.95); border-radius: 12px; padding: 9px 16px; box-shadow: 0 10px 28px -12px rgba(0,0,0,.4); } .pv-hero-brand img { height: 36px; width: auto; display: block; } body.pwn .pv-hero-in { text-align: center; align-items: center; justify-content: center; } .pv-hero-eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #fff; font: 700 13px var(--font); letter-spacing: .14em; text-transform: uppercase; background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 9px 18px; border-radius: 999px; margin-bottom: 22px; } .pv-hero-eyebrow .pv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 12px var(--red); animation: pwPulse 2s infinite; } body.pwn .pv-hero h1 { font: 800 clamp(48px,9vw,112px)/0.96 var(--font-head) !important; letter-spacing: -.03em; color: #fff; margin: 0 0 18px; text-shadow: 0 6px 40px rgba(0,0,0,.4); } .pv-hero h1 em { color: var(--gold-2); font-style: italic; } .pv-hero-sub { color: rgba(255,255,255,.9); font-size: clamp(16px,2vw,20px); margin: 0 0 30px; text-shadow: 0 2px 20px rgba(0,0,0,.5); } .pv-hero-scroll { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 5; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); color: #fff; display: grid; place-items: center; font-size: 20px; animation: pwnFloatBounce 2s ease-in-out infinite; text-decoration: none; } .pv-hero-scroll:hover { background: rgba(255,255,255,.15); color: #fff; } .pv-hero-shade { background: linear-gradient(180deg, rgba(15,14,13,.35) 0%, rgba(15,14,13,.2) 40%, rgba(15,14,13,.75) 100%) !important; } /* v2.13.0b — Buscador del marketplace sin sticky (no tapa las tarjetas) */ .pwn-mkt-bar { position: static !important; top: auto !important; margin: 0 auto 22px !important; max-width: 1240px; } .pwn-mkt { padding-top: 0; } /* v2.14.0 — Intro/H1 del marketplace (SEO) */ .pwn-mkt-intro { max-width: 1240px; margin: 0 auto 18px; text-align: center; padding: 8px 24px 0; } body.pwn .pwn-mkt-intro h1 { font: 800 clamp(28px,4vw,44px) var(--font-head) !important; color: var(--ink); margin: 0 0 10px; letter-spacing: -.02em; } .pwn-mkt-intro p { color: var(--ink-2); font-size: 16px; line-height: 1.6; max-width: 720px; margin: 0 auto; } /* v2.15.0 — Logotipo del home arriba al centro */ .pv-hero-brand { display: none; } .pv-hero-toplogo { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); z-index: 6; } .pv-hero-toplogo img { height: 60px; width: auto; display: block; filter: drop-shadow(0 6px 18px rgba(0,0,0,.45)); } @media (max-width: 600px) { .pv-hero-toplogo img { height: 46px; } } /* v2.16.0 — Centrar el contenido del hero en la mitad de la pantalla */ body.pwn .pv-hero { align-items: center !important; } body.pwn .pv-hero .pv-hero-in { padding-top: 40px !important; padding-bottom: 40px !important; justify-content: center !important; } /* v2.17.0 — Logotipo (wordmark) en el hero en vez de la etiqueta */ .pv-hero-wordmark { margin-bottom: 20px; display: flex; justify-content: center; } .pv-hero-wordmark img { height: clamp(52px, 9vw, 92px); width: auto; max-width: 92%; display: block; filter: drop-shadow(0 8px 28px rgba(0,0,0,.55)); }