/* ═══════════════════════════════════════════════════════════════════════════ IPSOO Builder — Public Design System The visual foundation for all public-facing business websites. ═══════════════════════════════════════════════════════════════════════════ */ /* ─── 1. RESET & BASE ────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } body { font-family: var(--font-body); color: var(--color-text); background-color: var(--color-bg); line-height: 1.65; font-size: 1rem; overflow-x: hidden; min-height: 100vh; /* Container query context — descendants use cqw and @container queries to size relative to the page width. En producción == viewport. En el editor, .ie-canvas-frame anida un container más cercano que gana, así el preview móvil (375px) iguala al móvil real. */ container-type: inline-size; container-name: page; } .pb-body--hero-bleed { padding-top: 0; } /* ── Modo embed (iframe del editor móvil) ────────────────────── Cuando el sitio se carga con ?embed=1 (dentro del iframe de vista previa del editor móvil), el navbar NO debe ser fijo — ocupa espacio en el flujo y al hacer scroll desaparece con el contenido. Así el título del hero nunca queda tapado. */ .pb-body--embed .pb-nav { position: absolute !important; box-shadow: none !important; } .pb-body--embed .pb-nav--scrolled { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; } /* El hero full-bleed ya empieza en top:0 y el navbar va sobre él, pero al no ser fixed, scrollea con el contenido — sin problema. */ .pb-body--embed.pb-body--hero-bleed { padding-top: 0 !important; } /* Sin hero-bleed: el navbar absolute ocupa la altura efectiva del navbar al principio del flujo (--nav-h se inyecta en desde layout.php). */ .pb-body--embed:not(.pb-body--hero-bleed) { padding-top: var(--nav-h, 72px) !important; } body:not(.pb-body--hero-bleed):not(.pb-body--editor) { padding-top: var(--nav-h, 72px); } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-base); } a:hover { color: var(--color-primary-dark); } ::selection { background-color: var(--color-primary); color: #fff; } /* ─── 2. TYPOGRAPHY ──────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--color-text); text-wrap: balance; } h1 { font-size: clamp(2.25rem, 5cqw, 4rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; } h2 { font-size: clamp(1.75rem, 4cqw, 3rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; } h3 { font-size: clamp(1.35rem, 3cqw, 2rem); font-weight: 700; letter-spacing: -0.02em; } h4 { font-size: clamp(1.125rem, 2cqw, 1.5rem); font-weight: 600; letter-spacing: -0.015em; } h5 { font-size: clamp(1rem, 1.5cqw, 1.25rem); font-weight: 600; } h6 { font-size: clamp(0.875rem, 1.2cqw, 1.1rem); font-weight: 600; } p { max-width: 65ch; margin-bottom: 1rem; } p:last-child { margin-bottom: 0; } .pb-section-label { display: inline-block; font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 0.75rem; padding: 0.35rem 1rem; background: rgba(var(--color-primary-rgb), 0.08); border-radius: var(--radius-full); } .pb-lead { font-size: clamp(1.1rem, 1.5cqw, 1.35rem); line-height: 1.7; color: var(--color-text-light); max-width: 58ch; } strong, b { font-weight: 600; } small { font-size: 0.875rem; } /* ─── 3. LAYOUT ──────────────────────────────────────────────────────────── */ .pb-container { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: clamp(1rem, 4cqw, 2rem); padding-right: clamp(1rem, 4cqw, 2rem); } .pb-container--narrow { max-width: 900px; } .pb-container--wide { max-width: 1400px; } .pb-section { position: relative; overflow: hidden; padding-top: var(--spacing-section); padding-bottom: var(--spacing-section); } .pb-section--alt { background-color: var(--color-bg-alt); } .pb-section-header { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; margin-bottom: clamp(2rem, 4cqw, 3.5rem); } .pb-section-header h2 { margin-bottom: 1rem; } .pb-section-header p { margin-left: auto; margin-right: auto; color: var(--color-text-light); font-size: 1.1rem; } /* Grid utilities */ .pb-grid { display: grid; gap: 1.5rem; } .pb-grid--2 { grid-template-columns: repeat(1, 1fr); } .pb-grid--3 { grid-template-columns: repeat(1, 1fr); } .pb-grid--4 { grid-template-columns: repeat(1, 1fr); } @container page (min-width: 640px) { .pb-grid--2 { grid-template-columns: repeat(2, 1fr); } .pb-grid--3 { grid-template-columns: repeat(2, 1fr); } .pb-grid--4 { grid-template-columns: repeat(2, 1fr); } } @container page (min-width: 1024px) { .pb-grid--3 { grid-template-columns: repeat(3, 1fr); } .pb-grid--4 { grid-template-columns: repeat(4, 1fr); } } .pb-flex { display: flex; flex-wrap: wrap; gap: 1rem; } .pb-text-center { text-align: center; } .pb-text-left { text-align: left; } .pb-text-right { text-align: right; } .pb-mx-auto { margin-left: auto; margin-right: auto; } /* ─── 4. BUTTONS ─────────────────────────────────────────────────────────── */ .pb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 1.75rem; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; line-height: 1; border: 2px solid transparent; border-radius: var(--radius-md); cursor: pointer; transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1), background-color 200ms ease, border-color 200ms ease, color 200ms ease; text-decoration: none; white-space: nowrap; user-select: none; -webkit-tap-highlight-color: transparent; position: relative; overflow: hidden; } .pb-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 100%); pointer-events: none; opacity: 0; transition: opacity 200ms ease; } .pb-btn:hover::after { opacity: 1; } .pb-btn:hover { transform: translateY(-2px); } .pb-btn:active { transform: translateY(0); } .pb-btn:focus-visible { outline: 3px solid rgba(var(--color-primary-rgb), 0.4); outline-offset: 2px; } /* Primary */ .pb-btn--primary { background-color: var(--color-primary); color: #fff; border-color: var(--color-primary); box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.25), 0 1px 3px rgba(0,0,0,0.08); } .pb-btn--primary:hover { background-color: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.35), 0 3px 8px rgba(0,0,0,0.1); } .pb-btn--primary:active { box-shadow: 0 2px 6px rgba(var(--color-primary-rgb), 0.2); } /* Secondary */ .pb-btn--secondary { background-color: var(--color-secondary); color: #fff; border-color: var(--color-secondary); box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .pb-btn--secondary:hover { filter: brightness(0.92); color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,0.15); } /* Outline */ .pb-btn--outline { background-color: transparent; color: var(--color-primary); border-color: var(--color-primary); } .pb-btn--outline:hover { background-color: var(--color-primary); color: #fff; box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), 0.25); } /* Ghost */ .pb-btn--ghost { background-color: transparent; color: var(--color-primary); border-color: transparent; padding-left: 0.5rem; padding-right: 0.5rem; } .pb-btn--ghost:hover { background-color: rgba(var(--color-primary-rgb), 0.06); color: var(--color-primary-dark); box-shadow: none; } /* White (for dark backgrounds) */ .pb-btn--white { background-color: #fff; color: var(--color-primary); border-color: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.15); } .pb-btn--white:hover { background-color: rgba(255,255,255,0.92); color: var(--color-primary-dark); box-shadow: 0 6px 24px rgba(0,0,0,0.2); } .pb-btn--dark { background-color: #111827; color: #fff; border-color: #111827; box-shadow: 0 2px 12px rgba(0,0,0,0.15); } .pb-btn--dark:hover { background-color: #1f2937; color: #fff; box-shadow: 0 6px 24px rgba(0,0,0,0.2); } /* CTA with light/bright background - override text color */ .pb-cta--light-bg { color: #111827; } .pb-cta--light-bg .pb-cta__title, .pb-cta--light-bg .pb-cta__text { color: #111827; } /* Sizes */ .pb-btn--sm { padding: 0.6rem 1.25rem; font-size: 0.8125rem; } .pb-btn--lg { padding: 1rem 2.25rem; font-size: 1.0625rem; } .pb-btn--xl { padding: 1.125rem 2.75rem; font-size: 1.125rem; } .pb-btn--icon { width: 2.75rem; height: 2.75rem; padding: 0; border-radius: var(--radius-full); } /* ─── 5. CARDS ───────────────────────────────────────────────────────────── */ .pb-card { background: var(--color-bg-alt, var(--color-bg)); border-radius: var(--radius-md); overflow: hidden; border: 1px solid rgba(var(--color-text-rgb),0.06); box-shadow: 0 1px 3px rgba(var(--color-text-rgb),0.04), 0 4px 20px rgba(var(--color-text-rgb),0.04); transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1); position: relative; } .pb-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(var(--color-primary-rgb), 0.1), 0 4px 12px rgba(0,0,0,0.06); } .pb-card__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; } .pb-card__body { padding: 1.5rem; } .pb-card__title { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.5rem; letter-spacing: -0.01em; } .pb-card__text { color: var(--color-text-light); font-size: 0.9375rem; line-height: 1.6; } .pb-card__footer { padding: 1rem 1.5rem; border-top: 1px solid rgba(var(--color-text-rgb),0.08); display: flex; align-items: center; justify-content: space-between; } /* Card with border variation */ .pb-card--bordered { box-shadow: none; border: 1px solid rgba(var(--color-text-rgb),0.1); } .pb-card--bordered:hover { border-color: rgba(var(--color-primary-rgb), 0.25); box-shadow: 0 8px 30px rgba(var(--color-primary-rgb), 0.08); } /* Card with glass effect */ .pb-card--glass { background: rgba(255,255,255,0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.3); } /* ─── 6. NAVIGATION ──────────────────────────────────────────────────────── */ .pb-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--color-bg); transition: background-color 400ms ease, box-shadow 400ms ease, backdrop-filter 400ms ease; height: 72px; } .pb-nav--transparent { background: transparent; box-shadow: none; } .pb-nav--scrolled { background: rgba(var(--color-bg-rgb), 0.92); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); box-shadow: 0 1px 0 rgba(var(--color-text-rgb),0.06), 0 4px 20px rgba(var(--color-text-rgb),0.05); } /* Dark text fallback when on transparent nav with dark bg */ .pb-nav--transparent:not(.pb-nav--scrolled) .pb-nav__link, .pb-nav--transparent:not(.pb-nav--scrolled) .pb-nav__logo-text { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.3); } .pb-nav--transparent:not(.pb-nav--scrolled) .pb-nav__hamburger-line { background-color: #fff; } .pb-nav__inner { display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 0 clamp(1rem, 4cqw, 2rem); height: 100%; } .pb-nav__logo { display: flex; align-items: center; flex-shrink: 1; min-width: 0; max-width: 70%; text-decoration: none; z-index: 2; } .pb-nav__logo-img { height: 36px; width: auto; object-fit: contain; } .pb-nav__logo-text { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700; color: var(--color-text); letter-spacing: -0.02em; transition: color var(--transition-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* Shrink brand text on narrow viewports to leave room for the hamburger */ @container page (max-width: 480px) { .pb-nav__logo-text { font-size: 1.05rem; max-width: 62cqw; } } /* Desktop Links */ .pb-nav__links { display: none; align-items: center; gap: 0.25rem; } @container page (min-width: 768px) { .pb-nav__links { display: flex; } } .pb-nav__link { display: inline-flex; align-items: center; padding: 0.5rem 1rem; font-size: 0.9375rem; font-weight: 500; color: var(--color-text); text-decoration: none; border-radius: var(--radius-sm); transition: color var(--transition-base), background-color var(--transition-base); position: relative; } .pb-nav__link::after { content: ''; position: absolute; bottom: 0.25rem; left: 1rem; right: 1rem; height: 2px; background: var(--color-primary); border-radius: 1px; transform: scaleX(0); transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: center; } .pb-nav__link:hover { color: var(--color-primary); } .pb-nav__link:hover::after { transform: scaleX(1); } .pb-nav__cta { margin-left: 0.75rem; } /* Hamburger */ .pb-nav__hamburger { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; background: none; border: none; cursor: pointer; padding: 0; z-index: 1001; -webkit-tap-highlight-color: transparent; } @container page (min-width: 768px) { .pb-nav__hamburger { display: none; } } .pb-nav__hamburger-line { display: block; width: 22px; height: 2px; background-color: var(--color-text); border-radius: 2px; transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease, background-color 200ms ease; } .pb-nav__hamburger--active .pb-nav__hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); } .pb-nav__hamburger--active .pb-nav__hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); } .pb-nav__hamburger--active .pb-nav__hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Ocultar el hamburger cuando el drawer movil esta abierto (evita doble X) */ .pb-nav__hamburger--active { visibility: hidden; opacity: 0; pointer-events: none; } /* Mobile Overlay */ .pb-nav__mobile-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 998; opacity: 0; visibility: hidden; transition: opacity 300ms ease, visibility 300ms ease; } .pb-nav__mobile-overlay--visible { opacity: 1; visibility: visible; } /* Mobile Menu */ .pb-nav__mobile { position: fixed; top: 0; right: 0; width: min(85cqw, 380px); height: 100vh; height: 100dvh; background: var(--color-bg); z-index: 999; transform: translateX(100%); transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; box-shadow: -10px 0 40px rgba(0,0,0,0.15); overflow-y: auto; overscroll-behavior: contain; } .pb-nav__mobile--open { transform: translateX(0); } .pb-nav__mobile-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid rgba(var(--color-text-rgb),0.08); flex-shrink: 0; } .pb-nav__mobile-close { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: none; background: rgba(var(--color-text-rgb),0.06); border-radius: var(--radius-full); cursor: pointer; font-size: 1.1rem; color: var(--color-text); transition: background-color var(--transition-base); } .pb-nav__mobile-close:hover { background: rgba(var(--color-text-rgb),0.12); } .pb-nav__mobile-body { flex: 1; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.25rem; } .pb-nav__mobile-link { display: flex; align-items: center; padding: 0.875rem 1rem; font-size: 1.0625rem; font-weight: 500; color: var(--color-text); border-radius: var(--radius-sm); transition: background-color var(--transition-base), color var(--transition-base); text-decoration: none; } .pb-nav__mobile-link:hover, .pb-nav__mobile-link:focus { background: rgba(var(--color-primary-rgb), 0.06); color: var(--color-primary); } .pb-nav__mobile-cta { margin-top: 1rem; text-align: center; } .pb-nav__mobile-social { display: flex; gap: 0.75rem; padding: 1.5rem; border-top: 1px solid rgba(var(--color-text-rgb),0.08); flex-shrink: 0; } .pb-nav__mobile-social-link { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(var(--color-text-rgb),0.06); border-radius: var(--radius-full); color: var(--color-text-light); transition: background-color var(--transition-base), color var(--transition-base); font-size: 1rem; } .pb-nav__mobile-social-link:hover { background: var(--color-primary); color: #fff; } /* ─── 6.b NAVIGATION VARIANTS ───────────────────────────────────────────── Variantes editables desde el panel de Diseño del builder. Las clases las genera tanto BuilderRenderer::buildNavbarClasses (PHP, render público) como NavbarPreview.tsx::buildNavClasses (React, editor) — mantener ambos en sync. ────────────────────────────────────────────────────────────────────────── */ /* Color overrides via inline style: --nav-bg / --nav-text */ .pb-nav[style*="--nav-bg"] { background: var(--nav-bg) !important; } .pb-nav[style*="--nav-text"] .pb-nav__logo-text, .pb-nav[style*="--nav-text"] .pb-nav__link { color: var(--nav-text); } .pb-nav[style*="--nav-text"] .pb-nav__hamburger-line { background-color: var(--nav-text); } /* ── Heights ────────────────────────────────────────────── */ .pb-nav--height-compact { height: 56px; } .pb-nav--height-balanced { height: 72px; } .pb-nav--height-spacious { height: 88px; } /* Editor preview wrapper height matches nav height */ .pb-body--editor .pb-nav--height-compact { height: 56px; } .pb-body--editor .pb-nav--height-balanced { height: 72px; } .pb-body--editor .pb-nav--height-spacious { height: 88px; } /* ── Layouts ────────────────────────────────────────────── */ /* split: default — flex space-between (no override needed) */ /* logo_left_links_center: links centrados, CTA empujado a la derecha. Usamos max-content en las columnas 1 y 3 para que el logo y el CTA ocupen el ancho real de su contenido (en vez de quedarse en min-content y forzar el ellipsis del logo-text). */ @container page (min-width: 768px) { .pb-nav--layout-logo_left_links_center .pb-nav__inner { display: grid; grid-template-columns: max-content 1fr max-content; gap: 1.5rem; } .pb-nav--layout-logo_left_links_center .pb-nav__links { justify-content: center; grid-column: 2; min-width: 0; } /* CTA va al final */ .pb-nav--layout-logo_left_links_center .pb-nav__cta { grid-column: 3; margin-left: 0; } /* Logo libre del max-width 70% global y del ellipsis: este layout reserva su columna por max-content, así que mostramos el título entero. Si fuese exageradamente largo, los enlaces (1fr) se comprimen antes que el logo. */ .pb-nav--layout-logo_left_links_center .pb-nav__logo { max-width: none; } .pb-nav--layout-logo_left_links_center .pb-nav__logo-text { overflow: visible; text-overflow: clip; } } /* centered_stack: logo arriba, enlaces debajo, todo centrado */ @container page (min-width: 768px) { .pb-nav--layout-centered_stack { height: auto !important; min-height: 96px; padding-top: 0.75rem; padding-bottom: 0.5rem; } .pb-nav--layout-centered_stack .pb-nav__inner { flex-direction: column; gap: 0.4rem; height: auto; align-items: center; justify-content: center; } .pb-nav--layout-centered_stack .pb-nav__logo { max-width: 100%; justify-content: center; } .pb-nav--layout-centered_stack .pb-nav__links { justify-content: center; } } /* ── Background modes ──────────────────────────────────── */ .pb-nav--bg-solid { background: var(--nav-bg, var(--color-bg)); } .pb-nav--bg-glass { background: rgba(var(--color-bg-rgb), 0.72); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); } .pb-nav--bg-gradient { background: linear-gradient(180deg, var(--nav-bg, var(--color-bg)) 0%, rgba(var(--color-bg-rgb), 0.78) 100%); } /* ── Logo sizes ────────────────────────────────────────── */ .pb-nav--logo-sm .pb-nav__logo-img { height: 28px; } .pb-nav--logo-md .pb-nav__logo-img { height: 36px; } /* default */ .pb-nav--logo-lg .pb-nav__logo-img { height: 48px; } .pb-nav--logo-sm .pb-nav__logo-text { font-size: 1.1rem; } .pb-nav--logo-md .pb-nav__logo-text { font-size: 1.35rem; } /* default */ .pb-nav--logo-lg .pb-nav__logo-text { font-size: 1.6rem; } /* ── Auto-responsive: el navbar escala SOLO en móvil ────────────────── El usuario configura una sola vez en desktop (logo grande, height espacioso, layout centered_stack, etc.). En móvil, sus elecciones se adaptan automáticamente para que la barra nunca quede desproporcionada — logos gigantes se vuelven medianos, alturas amplias se ajustan, etc. Sin que el usuario tenga que duplicar configuración. Layouts especiales (centered_stack, logo_left_links_center) ya revierten al default flex space-between en móvil porque sus reglas están envueltas en `@container page (min-width: 768px)` — eso ya funciona, no hace falta tocarlo. */ @container page (max-width: 767px) { /* Logo images — los tamaños grandes bajan a "medianos cómodos" para móvil. Si quieres un logo realmente pequeño en mobile, elige sm. */ .pb-nav--logo-md .pb-nav__logo-img { height: 30px; } .pb-nav--logo-lg .pb-nav__logo-img { height: 34px; } /* sm = 28px se mantiene */ /* Logo text — escala proporcional. Mantiene la jerarquía visual entre sm/md/lg pero todos ocupan menos espacio horizontal. */ .pb-nav--logo-sm .pb-nav__logo-text { font-size: 1rem; } .pb-nav--logo-md .pb-nav__logo-text { font-size: 1.15rem; } .pb-nav--logo-lg .pb-nav__logo-text { font-size: 1.3rem; } /* Heights — en móvil no necesitamos el aire de "spacious" porque el contenido es solo logo+hamburger. Todos los heights convergen hacia valores que se sienten naturales en una pantalla pequeña. */ .pb-nav--height-spacious { min-height: 64px; height: 64px; } .pb-nav--height-default, .pb-nav:not([class*="--height-"]) { min-height: 60px; height: 60px; } .pb-nav--height-compact { min-height: 52px; height: 52px; } /* Padding interior — clamp ya reduce con vw, lo hacemos explícito en móvil para que el logo y el hamburger no se peguen a los bordes. */ .pb-nav__inner { padding: 0 1rem; } /* Logo letter-spacing wide en móvil se queda muy ancho y empuja el hamburger. Lo neutralizamos en móvil. */ .pb-nav--logosp-wide .pb-nav__logo-text { letter-spacing: 0.04em; } /* Uppercase + tracking + font-size combinados pueden hacer que los items del menú móvil (cuando hamburger se abre) ocupen demasiado espacio. Mantenemos uppercase pero acortamos el tracking. */ .pb-nav--uppercase .pb-nav__link { letter-spacing: 0.04em; font-size: 0.875rem; } /* En móvil el navbar transparente sobre un hero puede tener el logo en blanco con sombra (ya está en CSS). Asegurar que el hamburger (que ahora es el único control visible) sea suficientemente grande y contraste — ya cumple con 44×44 px. */ } /* iPhone SE y similares (≤ 380px): un poco más compacto aún para que el logo + hamburger no toquen los bordes. */ @container page (max-width: 380px) { .pb-nav--logo-md .pb-nav__logo-img { height: 26px; } .pb-nav--logo-lg .pb-nav__logo-img { height: 28px; } .pb-nav--logo-md .pb-nav__logo-text { font-size: 1.05rem; } .pb-nav--logo-lg .pb-nav__logo-text { font-size: 1.1rem; } .pb-nav__inner { padding: 0 0.75rem; } } /* Sincronizar --nav-h en móvil para que el padding-top del body (linea 62/66 arriba) coincida con la nueva altura del navbar y NO quede un gap encima del primer bloque. layout.php inyecta --nav-h con el valor desktop; aquí lo redefinimos para móvil. La media (min-width: 768px) "and not" no funciona en todos los navegadores viejos, así que usamos max-width igual que el resto del bloque. */ @container page (max-width: 767px) { body:not(.pb-body--editor) { /* fallback 60px = altura nav default móvil. Si el navbar es spacious o compact, las reglas con clase pb-nav--height-* arriba lo ajustan visualmente, pero como --nav-h afecta al body y necesita un valor único, usamos el default (60px) que es el más común. Un pequeño gap de ≤4px en spacious/compact es invisible. */ --nav-h: 60px; } } /* ── Editor mobile preview ───────────────────────────────────────────── El viewport switcher del editor (Canvas.tsx) cambia el ANCHO del frame pero NO el ancho del browser. Las media queries `@container page (max-width: 767px)` miran `window.innerWidth` (1272px en desktop con editor abierto), así que NO se activan al pasar a vista móvil en el editor. Resultado: el usuario ve el navbar a desktop dentro del viewport mobile del editor, y se queja "no se ve igual que en producción". Solución: replicar las mismas reglas mobile bajo el selector explícito `.ie-canvas-frame.mobile` (clase aplicada por React cuando viewport='mobile'). Así el editor refleja con precisión lo que verá el visitante real en mobile. */ .ie-canvas-frame.mobile .pb-nav--logo-md .pb-nav__logo-img { height: 30px; } .ie-canvas-frame.mobile .pb-nav--logo-lg .pb-nav__logo-img { height: 34px; } .ie-canvas-frame.mobile .pb-nav--logo-sm .pb-nav__logo-text { font-size: 1rem; } .ie-canvas-frame.mobile .pb-nav--logo-md .pb-nav__logo-text { font-size: 1.15rem; } .ie-canvas-frame.mobile .pb-nav--logo-lg .pb-nav__logo-text { font-size: 1.3rem; } .ie-canvas-frame.mobile .pb-nav--height-spacious { min-height: 64px; height: 64px; } .ie-canvas-frame.mobile .pb-nav--height-default, .ie-canvas-frame.mobile .pb-nav:not([class*="--height-"]) { min-height: 60px; height: 60px; } .ie-canvas-frame.mobile .pb-nav--height-compact { min-height: 52px; height: 52px; } .ie-canvas-frame.mobile .pb-nav__inner { padding: 0 1rem; } .ie-canvas-frame.mobile .pb-nav--logosp-wide .pb-nav__logo-text { letter-spacing: 0.04em; } .ie-canvas-frame.mobile .pb-nav--uppercase .pb-nav__link { letter-spacing: 0.04em; font-size: 0.875rem; } /* Sincronizar --nav-h en el frame mobile del editor también. Canvas.tsx inyecta --nav-h via inline style; necesitamos !important para overrider ese inline cuando estamos en mobile preview. */ .ie-canvas-frame.mobile { --nav-h: 60px !important; } /* También cuando layouts especiales están activos, en mobile colapsan a default. Las reglas originales de centered_stack / logo_left_links_center están envueltas en @container page (min-width: 768px) — para el editor mobile necesitamos forzar override explícito. */ .ie-canvas-frame.mobile .pb-nav--layout-centered_stack { min-height: auto !important; } .ie-canvas-frame.mobile .pb-nav--layout-centered_stack .pb-nav__inner { flex-direction: row; justify-content: space-between; align-items: center; gap: 0; } .ie-canvas-frame.mobile .pb-nav--layout-centered_stack .pb-nav__logo { justify-content: flex-start; max-width: 70%; } .ie-canvas-frame.mobile .pb-nav--layout-logo_left_links_center .pb-nav__inner { display: flex; grid-template-columns: none; justify-content: space-between; } /* ── Logo typography ──────────────────────────────────── */ .pb-nav--logofont-heading .pb-nav__logo-text { font-family: var(--font-heading); } .pb-nav--logofont-body .pb-nav__logo-text { font-family: var(--font-body); } .pb-nav--logow-regular .pb-nav__logo-text { font-weight: 400; } .pb-nav--logow-medium .pb-nav__logo-text { font-weight: 500; } .pb-nav--logow-semibold .pb-nav__logo-text { font-weight: 600; } .pb-nav--logow-bold .pb-nav__logo-text { font-weight: 700; } /* default */ .pb-nav--logow-extrabold .pb-nav__logo-text { font-weight: 800; } .pb-nav--logosp-tight .pb-nav__logo-text { letter-spacing: -0.02em; } /* default */ .pb-nav--logosp-normal .pb-nav__logo-text { letter-spacing: 0; } .pb-nav--logosp-wide .pb-nav__logo-text { letter-spacing: 0.08em; } /* Inline color overrides (set on the

via inline style): - --nav-logo-color → only the logo text - --nav-link-color → only the links (CTA keeps brand primary unless overridden separately) */ .pb-nav[style*="--nav-logo-color"] .pb-nav__logo-text { color: var(--nav-logo-color); text-shadow: none; } .pb-nav[style*="--nav-link-color"] .pb-nav__link { color: var(--nav-link-color); text-shadow: none; } /* ── Link styles ───────────────────────────────────────── */ /* underline_hover (default — already styled at .pb-nav__link::after) */ /* pill: pastilla con fondo al hacer hover */ .pb-nav--link-pill .pb-nav__link::after { display: none; } .pb-nav--link-pill .pb-nav__link { border-radius: 999px; padding: 0.5rem 1.1rem; } .pb-nav--link-pill .pb-nav__link:hover { background: rgba(var(--color-primary-rgb), 0.10); color: var(--color-primary); } /* boxed: recuadro con borde sutil al hover */ .pb-nav--link-boxed .pb-nav__link::after { display: none; } .pb-nav--link-boxed .pb-nav__link { border: 1px solid transparent; padding: 0.5rem 1rem; } .pb-nav--link-boxed .pb-nav__link:hover { border-color: rgba(var(--color-text-rgb), 0.18); background: rgba(var(--color-text-rgb), 0.04); color: var(--color-primary); } /* minimal: solo cambio de color al hover, sin nada más */ .pb-nav--link-minimal .pb-nav__link::after { display: none; } .pb-nav--link-minimal .pb-nav__link:hover { color: var(--color-primary); background: transparent; } /* ── Link weight ───────────────────────────────────────── */ .pb-nav--lw-normal .pb-nav__link { font-weight: 400; } .pb-nav--lw-medium .pb-nav__link { font-weight: 500; } /* default */ .pb-nav--lw-semibold .pb-nav__link { font-weight: 600; } .pb-nav--lw-bold .pb-nav__link { font-weight: 700; } /* ── Uppercase ────────────────────────────────────────── */ .pb-nav--uppercase .pb-nav__link { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8125rem; } /* ── CTA variants ─────────────────────────────────────── */ /* filled = default (pb-btn pb-btn--primary already filled) */ .pb-nav--cta-outline .pb-nav__cta.pb-btn--primary { background: transparent !important; color: var(--color-primary) !important; border: 2px solid var(--color-primary) !important; } .pb-nav--cta-outline .pb-nav__cta.pb-btn--primary:hover { background: var(--color-primary) !important; color: #fff !important; } .pb-nav--cta-ghost .pb-nav__cta.pb-btn--primary { background: transparent !important; color: var(--color-primary) !important; border: none !important; } .pb-nav--cta-ghost .pb-nav__cta.pb-btn--primary:hover { background: rgba(var(--color-primary-rgb), 0.10) !important; } /* ── CTA radius ───────────────────────────────────────── */ .pb-nav--ctar-sharp .pb-nav__cta { border-radius: 4px !important; } .pb-nav--ctar-rounded .pb-nav__cta { border-radius: var(--radius-md) !important; } /* default */ .pb-nav--ctar-pill .pb-nav__cta { border-radius: 999px !important; } /* ── Shadow ──────────────────────────────────────────── */ .pb-nav--shadow-none { box-shadow: none; } .pb-nav--shadow-sm { box-shadow: 0 1px 3px rgba(var(--color-text-rgb), 0.06); } .pb-nav--shadow-md { box-shadow: 0 4px 16px rgba(var(--color-text-rgb), 0.08); } /* ── Border bottom ───────────────────────────────────── */ .pb-nav--bordered { border-bottom: 1px solid rgba(var(--color-text-rgb), 0.08); } /* Dark text fallback when nav is transparent over a dark hero must keep working for the new background_mode='auto' path. The legacy CSS already handles .pb-nav--transparent:not(.pb-nav--scrolled). */ /* ─── 7. FOOTER ──────────────────────────────────────────────────────────── */ .pb-footer { background: var(--color-footer-bg, #111827); color: rgba(255,255,255,0.7); position: relative; overflow: visible; /* allow the back-to-top button to overflow above */ } /* ── Background style modifiers ─────────────────────────────────── */ .pb-footer--bg-dark { background: #1f2937; color: rgba(255, 255, 255, 0.65); --pb-footer-text: #f9fafb; --pb-footer-muted: rgba(255, 255, 255, 0.65); --pb-footer-border: rgba(255, 255, 255, 0.10); --pb-footer-input-bg: rgba(255, 255, 255, 0.08); --pb-footer-btn-bg: #f9fafb; --pb-footer-btn-text: #1f2937; } .pb-footer--bg-light { background: #f8fafc; color: rgba(15, 23, 42, 0.7); --pb-footer-text: #0f172a; --pb-footer-muted: rgba(15, 23, 42, 0.65); --pb-footer-border: rgba(15, 23, 42, 0.10); --pb-footer-input-bg: #ffffff; --pb-footer-btn-bg: #0f172a; --pb-footer-btn-text: #ffffff; } .pb-footer--bg-brand { background: var(--color-primary, #14b8a6); color: rgba(255, 255, 255, 0.85); --pb-footer-text: #ffffff; --pb-footer-muted: rgba(255, 255, 255, 0.78); --pb-footer-border: rgba(255, 255, 255, 0.20); --pb-footer-input-bg: rgba(255, 255, 255, 0.12); --pb-footer-btn-bg: #ffffff; --pb-footer-btn-text: var(--color-primary, #14b8a6); } .pb-footer--bg-gradient { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); color: rgba(255, 255, 255, 0.65); --pb-footer-text: #f9fafb; --pb-footer-muted: rgba(255, 255, 255, 0.65); --pb-footer-border: rgba(255, 255, 255, 0.10); --pb-footer-input-bg: rgba(255, 255, 255, 0.08); --pb-footer-btn-bg: #f9fafb; --pb-footer-btn-text: #0f172a; } /* Override descendant text colours so they match the new palette */ .pb-footer .pb-footer__brand-text, .pb-footer .pb-footer__heading { color: var(--pb-footer-text, #f9fafb); } .pb-footer .pb-footer__description, .pb-footer .pb-footer__copy, .pb-footer .pb-footer__powered, .pb-footer .pb-footer__link, .pb-footer .pb-footer__schedule-day, .pb-footer .pb-footer__schedule-time, .pb-footer .pb-footer__contact-item, .pb-footer .pb-footer__contact-item a, .pb-footer .pb-footer__tagline { color: var(--pb-footer-muted, rgba(255,255,255,0.65)); } .pb-footer .pb-footer__link:hover, .pb-footer .pb-footer__contact-item a:hover { color: var(--pb-footer-text, #f9fafb); } .pb-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--color-primary-rgb), 0.3), transparent); pointer-events: none; } /* Compact modifier reduces padding */ .pb-footer--compact .pb-footer__top { padding: 2rem 0 1.5rem; } /* Back-to-top floating button */ .pb-footer__back-to-top { position: absolute; top: -24px; right: max(24px, calc((100% - 1200px) / 2 + 24px)); width: 48px; height: 48px; border-radius: 50%; background: var(--pb-footer-text, #f9fafb); color: var(--pb-footer-btn-text, #1f2937); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.20); text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; z-index: 2; } .pb-footer__back-to-top:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.28); } .pb-footer__back-to-top svg { stroke: currentColor; } .pb-footer__top { padding: clamp(3rem, 6cqw, 5rem) 0; } .pb-footer__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @container page (min-width: 640px) { .pb-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } } @container page (min-width: 1024px) { .pb-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; } } .pb-footer__col--info { padding-right: 1rem; } .pb-footer__brand { margin-bottom: 1.25rem; } .pb-footer__logo { height: 40px; width: auto; max-width: 220px; object-fit: contain; /* No filter applied — preserve the user's real brand colors. If their logo is monochrome dark and clashes with the dark footer, they should upload a version designed for dark backgrounds. */ } .pb-footer__brand-text { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; } .pb-footer__description { font-size: 0.9375rem; line-height: 1.7; color: rgba(255,255,255,0.55); margin-bottom: 1.5rem; max-width: 320px; } .pb-footer__heading { font-family: var(--font-heading); font-size: 0.9375rem; font-weight: 600; color: #fff; margin-bottom: 1.25rem; letter-spacing: -0.01em; } .pb-footer__links { list-style: none; padding: 0; } .pb-footer__links li { margin-bottom: 0.625rem; } .pb-footer__link { color: rgba(255,255,255,0.55); font-size: 0.9375rem; transition: color var(--transition-base), padding-left var(--transition-base); text-decoration: none; } .pb-footer__link:hover { color: var(--color-primary-light); padding-left: 4px; } /* Schedule in footer */ .pb-footer__schedule { list-style: none; padding: 0; } .pb-footer__schedule-item { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; font-size: 0.875rem; border-bottom: 1px solid rgba(255,255,255,0.06); } .pb-footer__schedule-item:last-child { border-bottom: none; } .pb-footer__schedule-day { color: rgba(255,255,255,0.55); font-weight: 500; } .pb-footer__schedule-time { color: rgba(255,255,255,0.75); font-variant-numeric: tabular-nums; } .pb-footer__schedule-item--closed .pb-footer__schedule-time { color: rgba(255,255,255,0.3); font-style: italic; } /* Contact in footer */ .pb-footer__contact { list-style: none; padding: 0; } .pb-footer__contact-item { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.875rem; font-size: 0.9375rem; } .pb-footer__contact-item i { color: var(--color-primary-light); font-size: 0.875rem; margin-top: 0.25rem; flex-shrink: 0; width: 1rem; text-align: center; } .pb-footer__contact-item a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color var(--transition-base); } .pb-footer__contact-item a:hover { color: var(--color-primary-light); } /* Social in footer */ .pb-footer__social { display: flex; gap: 0.625rem; flex-wrap: wrap; } .pb-footer__social-link { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); font-size: 0.9rem; transition: background-color 300ms ease, color 300ms ease, transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1); text-decoration: none; } .pb-footer__social-link:hover { background: var(--color-primary); color: #fff; transform: translateY(-2px); } /* Footer bottom */ .pb-footer__bottom { border-top: 1px solid var(--pb-footer-border, rgba(255,255,255,0.08)); padding: 1.5rem 0; } .pb-footer--compact .pb-footer__bottom { padding: 1rem 0; } /* ── Variant: MINIMAL (single row) ───────────────────────────── */ .pb-footer--variant-minimal .pb-footer__top { padding: 2rem 0 1.5rem; } .pb-footer__minimal-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; } .pb-footer__minimal-brand { display: flex; align-items: center; gap: 0.875rem; } .pb-footer__tagline { font-size: 0.875rem; color: var(--pb-footer-muted); } /* ── Variant: CENTERED ───────────────────────────────────────── */ .pb-footer__centered { text-align: center; max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .pb-footer__centered-brand { margin-bottom: 0.25rem; } .pb-footer__centered .pb-footer__description { max-width: 560px; margin: 0; } .pb-footer__centered .pb-footer__links { flex-direction: row; justify-content: center; } .pb-footer__centered-newsletter { width: 100%; max-width: 420px; margin-top: 0.5rem; } /* Inline links variant (used by minimal + centered) */ .pb-footer__links--inline { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; } .pb-footer__links--inline li { margin: 0; } /* ── Variant: CTA TOP (banner) ────────────────────────────────── */ .pb-footer__cta-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 2rem 2.25rem; margin-bottom: 2.5rem; border: 1px solid var(--pb-footer-border); border-radius: 16px; background: rgba(255, 255, 255, 0.04); } .pb-footer--bg-light .pb-footer__cta-banner { background: #ffffff; box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06); } .pb-footer__cta-text { flex: 1 1 60%; min-width: 220px; } .pb-footer__cta-title { margin: 0 0 0.35rem; font-size: 1.4rem; font-weight: 700; color: var(--pb-footer-text); } .pb-footer__cta-body { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--pb-footer-muted); } .pb-footer__cta-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.5rem; border-radius: 999px; background: var(--pb-footer-btn-bg); color: var(--pb-footer-btn-text); text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: transform 0.2s, box-shadow 0.2s; } .pb-footer__cta-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16); } .pb-footer__cta-btn svg { stroke: currentColor; } /* ── Variant: BRAND FOCUS ─────────────────────────────────────── */ .pb-footer__brand-focus { display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @container page (min-width: 768px) { .pb-footer__brand-focus { grid-template-columns: minmax(280px, 1.6fr) 1fr 1fr; } } .pb-footer__brand--large .pb-footer__logo { height: 56px; } .pb-footer__brand--large .pb-footer__brand-text { font-size: 1.75rem; font-weight: 700; } .pb-footer__tagline--large { font-size: 1.0625rem; font-weight: 500; color: var(--pb-footer-text); line-height: 1.55; margin: 0.875rem 0 0; max-width: 420px; } /* ── Newsletter form ─────────────────────────────────────────── */ .pb-footer__newsletter { margin-top: 1.25rem; } .pb-footer__nl-title { font-size: 0.875rem; font-weight: 600; color: var(--pb-footer-text); margin-bottom: 0.5rem; } .pb-footer__nl-row { display: flex; gap: 0.4rem; align-items: stretch; max-width: 360px; } .pb-footer__nl-input { flex: 1; padding: 0.55rem 0.85rem; border-radius: 6px; border: 1px solid var(--pb-footer-border); background: var(--pb-footer-input-bg); color: var(--pb-footer-text); font-size: 0.875rem; outline: none; transition: border-color 0.15s; } .pb-footer__nl-input:focus { border-color: var(--color-primary, #14b8a6); } .pb-footer__nl-input::placeholder { color: var(--pb-footer-muted); } .pb-footer__nl-btn { padding: 0.55rem 1rem; border-radius: 6px; border: none; background: var(--pb-footer-btn-bg); color: var(--pb-footer-btn-text); font-size: 0.875rem; font-weight: 600; cursor: pointer; } .pb-footer__nl-msg { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--color-primary, #14b8a6); } .pb-footer__bottom-inner { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; } @container page (min-width: 640px) { .pb-footer__bottom-inner { flex-direction: row; justify-content: space-between; text-align: left; } } .pb-footer__copy { font-size: 0.8125rem; color: rgba(255,255,255,0.35); margin: 0; } .pb-footer__powered { font-size: 0.8125rem; color: rgba(255,255,255,0.3); text-decoration: none; transition: color var(--transition-base); } .pb-footer__powered:hover { color: rgba(255,255,255,0.5); } .pb-footer__powered-brand { font-weight: 700; color: rgba(var(--color-primary-rgb), 0.7); transition: color var(--transition-base); } .pb-footer__powered:hover .pb-footer__powered-brand { color: var(--color-primary-light); } /* ─── 8. ANIMATIONS ──────────────────────────────────────────────────────── */ /* * Animaciones de scroll desactivadas para garantizar visibilidad robusta. * El antiguo sistema (opacity:0 inicial + IntersectionObserver para fade-in) * provocaba bloques permanentemente invisibles cuando el browser quedaba * atrapado en un estado de transition (especialmente reproducible en pages * con bloques sobre fondos oscuros y muchos elementos animados). * * Mantenemos las clases para no romper estilos heredados, pero forzamos * opacity:1 y transform:none. El fade-up sutil al hacer scroll se podra * reintroducir mas adelante con CSS @keyframes (no IntersectionObserver). */ .pb-animate, .pb-animate--visible { opacity: 1 !important; transform: none !important; } /* Stagger delays for grid children */ .pb-stagger-1 { transition-delay: 100ms; } .pb-stagger-2 { transition-delay: 200ms; } .pb-stagger-3 { transition-delay: 300ms; } .pb-stagger-4 { transition-delay: 400ms; } .pb-stagger-5 { transition-delay: 500ms; } .pb-stagger-6 { transition-delay: 600ms; } .pb-stagger-7 { transition-delay: 700ms; } .pb-stagger-8 { transition-delay: 800ms; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .pb-animate { opacity: 1; transform: none !important; transition: none !important; } .pb-btn:hover, .pb-card:hover { transform: none; } } /* ─── 9. STAR RATINGS ────────────────────────────────────────────────────── */ .pb-stars { display: inline-flex; gap: 2px; align-items: center; } .pb-star { color: #e2e8f0; font-size: 1rem; line-height: 1; transition: color 200ms ease; } .pb-star--filled { color: #fbbf24; } .pb-star--half { position: relative; color: #e2e8f0; } .pb-star--half::before { content: '\f005'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; top: 0; width: 50%; overflow: hidden; color: #fbbf24; } .pb-stars-value { font-weight: 600; font-size: 0.9375rem; margin-left: 0.5rem; color: var(--color-text); } .pb-stars-count { font-size: 0.8125rem; color: var(--color-text-light); margin-left: 0.25rem; } /* ─── 10. BACK TO TOP ────────────────────────────────────────────────────── */ .pb-back-to-top { position: fixed; bottom: 2rem; right: 2rem; z-index: 900; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-full); cursor: pointer; box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), 0.3); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 300ms ease, visibility 300ms ease, transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1); font-size: 1rem; } .pb-back-to-top--visible { opacity: 1; visibility: visible; transform: translateY(0); } .pb-back-to-top:hover { transform: translateY(-3px); box-shadow: 0 6px 24px rgba(var(--color-primary-rgb), 0.4); } /* ═══════════════════════════════════════════════════════════════════════════ HERO VIDEO BACKGROUND ═══════════════════════════════════════════════════════════════════════════ */ .pb-hero__video { width: 100%; height: 100%; object-fit: cover; } /* ═══════════════════════════════════════════════════════════════════════════ BEFORE / AFTER COMPARISON SLIDER ═══════════════════════════════════════════════════════════════════════════ */ .pb-ba__wrapper { position: relative; margin: 0 auto; overflow: hidden; aspect-ratio: 16 / 10; cursor: col-resize; user-select: none; touch-action: none; background: var(--color-surface, #f1f5f9); } .pb-ba__img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .pb-ba__img--after { position: absolute; inset: 0; } .pb-ba__before { position: absolute; inset: 0; z-index: 1; } .pb-ba__label { position: absolute; top: 1rem; z-index: 3; background: rgba(0, 0, 0, 0.6); color: #fff; padding: 0.25rem 0.75rem; border-radius: 6px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; backdrop-filter: blur(4px); } .pb-ba__label--before { left: 1rem; } .pb-ba__label--after { right: 1rem; } .pb-ba__handle { position: absolute; top: 0; bottom: 0; z-index: 2; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; } .pb-ba__handle-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; transform: translateX(-50%); background: #fff; box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); } .pb-ba__handle-grip { position: relative; width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: center; gap: 0; color: var(--color-primary, #14b8a6); transition: transform 200ms ease, box-shadow 200ms ease; } .pb-ba__wrapper:hover .pb-ba__handle-grip { transform: scale(1.1); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); } @container page (max-width: 639px) { .pb-ba__wrapper { aspect-ratio: 4 / 3; border-radius: 12px !important; } .pb-ba__handle-grip { width: 36px; height: 36px; } .pb-ba__handle-grip svg { width: 12px; height: 12px; } .pb-ba__label { font-size: 0.6875rem; padding: 0.2rem 0.5rem; } } @media print { .pb-ba__handle { display: none; } .pb-ba__before { clip-path: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ WHATSAPP FLOATING BUTTON ═══════════════════════════════════════════════════════════════════════════ */ .pb-whatsapp-float { position: fixed; bottom: 2rem; right: 2rem; z-index: 910; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: #25D366; border-radius: 50%; box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4); transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 300ms ease; text-decoration: none; cursor: pointer; } .pb-whatsapp-float:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 6px 24px rgba(37, 211, 102, 0.5); } /* ── Variante "pulse": anillo animado ── */ .pb-whatsapp-float--pulse::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #25D366; opacity: 0.6; z-index: -1; animation: pbWaPulse 1.8s infinite ease-out; } @keyframes pbWaPulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.7); opacity: 0; } } /* ── Variante "label": pill con texto ── */ .pb-whatsapp-float--label { width: auto; padding: 0 20px 0 14px; gap: 8px; border-radius: 999px; } .pb-whatsapp-float--label .pb-whatsapp-float__label { color: #fff; font-weight: 700; font-size: 14px; letter-spacing: 0.02em; font-family: inherit; white-space: nowrap; } .pb-whatsapp-float--label svg { width: 22px; height: 22px; } /* ── Variante "bubble": mensaje emergente + botón ── */ .pb-whatsapp-float--bubble { position: fixed; bottom: 2rem; right: 2rem; z-index: 910; width: auto; height: auto; background: transparent; border-radius: 0; box-shadow: none; display: flex; align-items: flex-end; gap: 10px; pointer-events: none; } .pb-whatsapp-float--bubble:hover { transform: none; box-shadow: none; } .pb-whatsapp-float--bubble .pb-whatsapp-bubble { background: #fff; color: #0f172a; padding: 10px 16px; border-radius: 14px 14px 2px 14px; font-size: 13.5px; font-weight: 600; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); border: 1px solid rgba(15, 23, 42, 0.06); margin-bottom: 6px; animation: pbWaBubbleIn 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s both; pointer-events: auto; cursor: default; max-width: 220px; } .pb-whatsapp-float--bubble .pb-whatsapp-float__btn { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: #25D366; border-radius: 50%; box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4); transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 300ms ease; text-decoration: none; pointer-events: auto; flex-shrink: 0; } .pb-whatsapp-float--bubble .pb-whatsapp-float__btn:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 6px 24px rgba(37, 211, 102, 0.5); } @keyframes pbWaBubbleIn { 0% { opacity: 0; transform: translateY(8px) scale(0.92); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .pb-body--has-whatsapp .pb-back-to-top { bottom: calc(2rem + 56px + 0.75rem); } @media print { .pb-whatsapp-float { display: none !important; } } @container page (max-width: 560px) { .pb-whatsapp-float--bubble .pb-whatsapp-bubble { display: none; } .pb-whatsapp-float--label .pb-whatsapp-float__label { display: none; } .pb-whatsapp-float--label { padding: 0; width: 56px; border-radius: 50%; } } /* ═══════════════════════════════════════════════════════════════════════════ BLOCK STYLES — HERO ═══════════════════════════════════════════════════════════════════════════ */ .pb-hero { position: relative; display: flex; align-items: center; justify-content: center; min-height: 90vh; overflow: hidden; /* Top padding must always clear the navbar (which floats over the hero when full-bleed). Using max() so a tall layout like centered_stack doesn't end up with the navbar on top of the hero content. */ padding: max(clamp(4rem, 10cqw, 8rem), calc(var(--nav-h, 72px) + 1.5rem)) 0 clamp(4rem, 10cqw, 8rem); color: #fff; } .pb-hero--short { min-height: 60vh; } .pb-hero--full { min-height: 100vh; } .pb-hero__bg { position: absolute; inset: 0; z-index: 0; } .pb-hero__bg img, .pb-hero__bg video { width: 100%; height: 100%; object-fit: cover; } /* Responsive image variants: desktop image visible by default; mobile image takes over below 768px when the wrapper is flagged with --has-mobile. */ .pb-hero__bg-img { position: absolute; inset: 0; } .pb-hero__bg-img--mobile { display: none; } @container page (max-width: 767px) { .pb-hero__bg--has-mobile .pb-hero__bg-img--desktop { display: none; } .pb-hero__bg--has-mobile .pb-hero__bg-img--mobile { display: block; } } .pb-hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient( 135deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.55) 100% ); } .pb-hero__overlay--gradient { background: linear-gradient( 135deg, rgba(var(--color-primary-rgb), 0.85), rgba(var(--color-primary-rgb), 0.4) 50%, var(--color-secondary) 100% ); } .pb-hero__content { position: relative; z-index: 2; text-align: center; max-width: 800px; margin: 0 auto; padding: 0 clamp(1rem, 4cqw, 2rem); } .pb-hero__content--left { text-align: left; margin: 0; max-width: 640px; } .pb-hero__badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.25rem; background: rgba(255,255,255,0.15); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-full); font-size: 0.8125rem; font-weight: 500; color: #fff; margin-bottom: 1.5rem; } .pb-hero__title { font-size: clamp(2.5rem, 6cqw, 4.5rem); font-weight: 800; letter-spacing: -0.04em; color: #fff; margin-bottom: 1.25rem; line-height: 1.05; text-shadow: 0 2px 20px rgba(0,0,0,0.15); } /* When the title/subtitle content is rich text (TipTap wraps it in

), neutralise the inner

so the styling on the wrapper prevails. */ .pb-hero__title p, .pb-hero__subtitle p, .pb-hero__badge p, .pb-section-header h2 p, .pb-section-title p, .pb-section-subtitle p, .pb-lead p, .pb-cta__title p, .pb-cta__subtitle p, .pb-services__title p, .pb-services__subtitle p, .pb-faq__title p, .pb-faq__subtitle p, .pb-pricing__title p, .pb-pricing__subtitle p, .pb-team__title p, .pb-team__subtitle p, .pb-reviews__title p, .pb-reviews__subtitle p, .pb-banner__title p, .pb-banner__subtitle p, .pb-promo__title p, .pb-promo__subtitle p, .pb-counter__title p, .pb-countdown__title p, .pb-newsletter__title p, .pb-newsletter__subtitle p, .pb-location__title p, .pb-location__subtitle p, .pb-contact__title p, .pb-contact__subtitle p, .pb-steps__title p, .pb-schedule__title p, .pb-video__title p, .pb-before-after__title p { margin: 0; padding: 0; font: inherit; line-height: inherit; color: inherit; letter-spacing: inherit; text-align: inherit; } .pb-hero__subtitle { font-size: clamp(1.1rem, 2cqw, 1.4rem); color: rgba(255,255,255,0.85); line-height: 1.6; margin-bottom: 2.5rem; max-width: 560px; } .pb-hero__content--center .pb-hero__subtitle { margin-left: auto; margin-right: auto; } .pb-hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; } .pb-hero__content--center .pb-hero__actions { justify-content: center; } /* Force high-contrast CTAs inside the hero regardless of brand palette. Fixes the "primary/white button text same color as hero gradient -> invisible" bug. */ .pb-hero .pb-btn--primary, .pb-hero .pb-btn--white { background-color: #fff; color: var(--color-accent, var(--color-primary-dark, #111)); border-color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.12); font-weight: 600; } .pb-hero .pb-btn--primary:hover, .pb-hero .pb-btn--white:hover { background-color: var(--color-accent, var(--color-primary-dark)); color: #fff; border-color: var(--color-accent, var(--color-primary-dark)); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.30), 0 4px 10px rgba(0, 0, 0, 0.15); } .pb-hero .pb-btn--outline, .pb-hero .pb-btn--secondary { background-color: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.85); border-width: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .pb-hero .pb-btn--outline:hover, .pb-hero .pb-btn--secondary:hover { background-color: rgba(255, 255, 255, 0.18); color: #fff; border-color: #fff; } /* Decorative shapes */ .pb-hero__decoration { position: absolute; z-index: 1; pointer-events: none; } .pb-hero__decoration--circle { width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--color-primary-rgb), 0.2), transparent 70%); top: -100px; right: -100px; } .pb-hero__decoration--dots { width: 200px; height: 200px; background-image: radial-gradient(circle, rgba(255,255,255,0.15) 1px, transparent 1px); background-size: 20px 20px; bottom: 10%; left: 5%; } /* Preview mode banner (shown when ?preview=1) */ .pb-preview-banner { position: sticky; top: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 16px; background: linear-gradient(90deg, #f97316, #ea580c); color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 2px 6px rgba(0,0,0,0.12); flex-wrap: wrap; } .pb-preview-banner__live { color: #fff; text-decoration: underline; font-weight: 700; margin-left: 8px; } .pb-preview-banner__live:hover { color: #ffedd5; } /* Offset the fixed navbar (if any) so it doesn't overlap the banner */ .pb-body--preview .pb-nav { top: auto; } /* Perf: let the browser skip rendering of blocks that are off-screen. Hero is excluded — it's always above the fold and content-visibility would cause flicker on navigation. Same for sticky_bar which is always visible. */ section.pb-section-wrap, .pb-services, .pb-team, .pb-reviews, .pb-faq, .pb-pricing, .pb-gallery, .pb-counter, .pb-schedule, .pb-location, .pb-contact, .pb-steps, .pb-promo, .pb-banner, .pb-newsletter, .pb-countdown, .pb-logo-cloud, .pb-before-after, .pb-columns, .pb-video, .pb-image, .pb-text, .pb-cta { content-visibility: auto; contain-intrinsic-size: auto 600px; } /* Wave divider at bottom — supports both and */ .pb-hero__wave { position: absolute; bottom: -1px; left: 0; right: 0; z-index: 3; line-height: 0; display: block; width: calc(100% + 2px); margin-left: -1px; height: 60px; pointer-events: none; } .pb-hero__wave svg { width: 100%; height: 100%; display: block; } /* Trust bar — small row of social-proof metrics shown between the subtitle and the CTA buttons. Inline flex with wrap so it breaks gracefully on mobile. */ .pb-hero__trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: inherit; gap: 0.5rem 1.25rem; margin: 0.5rem 0 1.5rem; font-size: 0.95rem; color: inherit; opacity: 0.92; } .pb-hero__content--center .pb-hero__trust { justify-content: center; } .pb-hero__content--left .pb-hero__trust { justify-content: flex-start; } .pb-hero__trust-item { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 500; line-height: 1.2; } .pb-hero__trust-glyph { display: inline-flex; align-items: center; justify-content: center; color: var(--color-primary); font-size: 1.05em; line-height: 1; } /* In split/minimal variants use the brand text color for the metric text */ .pb-hero--variant-split_right .pb-hero__trust, .pb-hero--variant-split_left .pb-hero__trust, .pb-hero--variant-minimal .pb-hero__trust { color: var(--color-text-light, #475569); opacity: 1; } /* Sticky CTA mobile — fixed bar at the bottom of the viewport (phone widths only) with the hero's primary CTA. Significantly increases conversion in services/e-commerce sites. Hidden by default; shows only when style.sticky_cta_mobile is true. */ .pb-hero__sticky-cta { display: none; /* hidden on desktop / tablet */ position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom)); background: rgba(var(--color-bg-rgb), 0.92); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); box-shadow: 0 -2px 14px rgba(var(--color-text-rgb), 0.06), 0 -1px 0 rgba(var(--color-text-rgb), 0.04); pointer-events: auto; } .pb-hero__sticky-cta-btn { display: flex !important; width: 100%; justify-content: center; text-align: center; } /* Only show on phone widths. Tablet onwards keep desktop CTA. */ @container page (max-width: 767px) { .pb-hero__sticky-cta { display: block; } /* Avoid the floating WhatsApp button overlapping the sticky CTA */ .pb-body--has-whatsapp .pb-floating-whatsapp { bottom: calc(env(safe-area-inset-bottom, 0px) + 5rem) !important; } } @media (prefers-reduced-motion: reduce) { .pb-hero__sticky-cta { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--color-bg); } } /* Scroll indicator — animated chevron at the bottom of the hero that invites the visitor to scroll. Only renders in the centered (full-bleed) variant. Z-index above the wave (3) so it sits over the curve. */ .pb-hero__scroll-indicator { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 4; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; color: currentColor; opacity: 0.85; animation: pbHeroChevronBounce 1.8s ease-in-out infinite; pointer-events: none; } .pb-hero__scroll-indicator svg { width: 28px; height: 28px; display: block; } @keyframes pbHeroChevronBounce { 0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.85; } 50% { transform: translateX(-50%) translateY(8px); opacity: 0.55; } } /* Si el hero tiene wave, el chevron sube para no quedar sobre la curva */ .pb-hero--variant-centered:has(.pb-hero__wave) .pb-hero__scroll-indicator { bottom: 4.5rem; } @media (prefers-reduced-motion: reduce) { .pb-hero__scroll-indicator { animation: none; } } /* ── Hero content vertical alignment ─────────────────────────────────── */ .pb-hero__content--v-top { align-self: flex-start; padding-top: clamp(1rem, 4cqw, 3rem); } .pb-hero__content--v-center { align-self: center; } .pb-hero__content--v-bottom { align-self: flex-end; padding-bottom: clamp(1rem, 4cqw, 3rem); } /* Split variants override the default centered layout: when the hero is split, align-self on .pb-hero__content needs to stretch so the column layout works. The vertical positioning then applies to the inner stack via flex. */ .pb-hero--variant-split_left .pb-hero__content, .pb-hero--variant-split_right .pb-hero__content { align-self: stretch; display: flex; flex-direction: column; } .pb-hero--variant-split_left .pb-hero__content--v-top, .pb-hero--variant-split_right .pb-hero__content--v-top { justify-content: flex-start; } .pb-hero--variant-split_left .pb-hero__content--v-center, .pb-hero--variant-split_right .pb-hero__content--v-center { justify-content: center; } .pb-hero--variant-split_left .pb-hero__content--v-bottom, .pb-hero--variant-split_right .pb-hero__content--v-bottom { justify-content: flex-end; } /* ── Hero buttons layout ─────────────────────────────────────────────── */ .pb-hero__actions--row { flex-direction: row; flex-wrap: wrap; } .pb-hero__actions--column { flex-direction: column; align-items: stretch; } .pb-hero__content--center .pb-hero__actions--column { align-items: center; } .pb-hero__actions--column .pb-btn { width: max-content; } .pb-hero__content--center .pb-hero__actions--column .pb-btn { min-width: 200px; } .pb-hero__actions--column_mobile { flex-direction: row; flex-wrap: wrap; } @container page (max-width: 600px) { .pb-hero__actions--column_mobile { flex-direction: column; align-items: stretch; } .pb-hero__actions--column_mobile .pb-btn { width: 100%; } } /* ── Button: medium size + radius variants + shadow variants ───────────── */ .pb-btn--md { /* default size — explicit so variants compose predictably */ padding: 0.75rem 1.5rem; font-size: 0.95rem; } .pb-btn--radius-sharp { border-radius: 0; } .pb-btn--radius-rounded { border-radius: 8px; } .pb-btn--radius-pill { border-radius: 999px; } .pb-btn--shadow-none { box-shadow: none; } .pb-btn--shadow-sm { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10); } .pb-btn--shadow-md { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); } .pb-btn--shadow-lg { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22); } /* When a hero button has an explicit shadow class, don't let the .pb-hero override (line 1648) clobber it. */ .pb-hero .pb-btn--shadow-none { box-shadow: none !important; } /* ═══════════════════════════════════════════════════════════════════════════ BLOCK STYLES — SERVICES ═══════════════════════════════════════════════════════════════════════════ */ .pb-services { padding-top: var(--spacing-section); padding-bottom: var(--spacing-section); } .pb-services__grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1.5rem; } @container page (min-width: 640px) { .pb-services__grid { grid-template-columns: repeat(2, 1fr); } } @container page (min-width: 1024px) { .pb-services__grid { grid-template-columns: repeat(3, 1fr); } } /* Column-count variants (used by builder blocks instead of inline styles) */ .pb-services__grid--cols-1 { grid-template-columns: 1fr; } .pb-services__grid--cols-2, .pb-services__grid--cols-3, .pb-services__grid--cols-4 { grid-template-columns: 1fr; } @container page (min-width: 640px) { .pb-services__grid--cols-2 { grid-template-columns: repeat(2, 1fr); } .pb-services__grid--cols-3 { grid-template-columns: repeat(2, 1fr); } .pb-services__grid--cols-4 { grid-template-columns: repeat(2, 1fr); } } @container page (min-width: 1024px) { .pb-services__grid--cols-3 { grid-template-columns: repeat(3, 1fr); } .pb-services__grid--cols-4 { grid-template-columns: repeat(4, 1fr); } } .pb-services__card { position: relative; background: var(--color-bg-alt, var(--color-bg)); border-radius: var(--radius-md); overflow: hidden; border: 1px solid rgba(var(--color-text-rgb),0.12); box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 4px 20px rgba(0,0,0,0.08); transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 400ms ease; display: flex; flex-direction: column; } .pb-services__card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(var(--color-primary-rgb), 0.1), 0 4px 12px rgba(0,0,0,0.06); } .pb-services__card-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; } .pb-services__card-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1 1 auto; } .pb-services__card-name { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--color-text); } .pb-services__card-desc-wrap { margin-bottom: 1rem; } .pb-services__card-desc { font-size: 0.9375rem; color: var(--color-text-light); line-height: 1.6; margin-bottom: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .pb-services__card-desc-wrap.expanded .pb-services__card-desc { -webkit-line-clamp: unset; display: block; overflow: visible; } .pb-services__card-desc-toggle { background: none; border: 0; color: var(--color-primary); font-size: 0.875rem; font-weight: 600; padding: 0; margin-top: 0.35rem; cursor: pointer; text-align: left; line-height: 1.4; } .pb-services__card-desc-toggle:hover { text-decoration: underline; } .pb-services__card-meta { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; border-top: 1px solid rgba(var(--color-text-rgb),0.1); margin-top: auto; } .pb-services__card-body:not(:has(.pb-services__card-meta)) > .pb-services__card-btn { margin-top: auto; } .pb-services__card-price { font-size: 1.25rem; font-weight: 700; color: var(--color-primary); } .pb-services__card-price small { font-size: 0.8125rem; font-weight: 400; color: var(--color-text-light); } /* Variantes "Gratis" para servicios sin coste */ .pb-services__card-price--free, .pb-services__list-price--free, .pb-services__minimal-price--free, .pb-services__showcase-price--free, .pb-services__showcase-item-price--free { color: #059669; background: #ecfdf5; padding: 0.25rem 0.625rem; border-radius: 0.375rem; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.025em; } .pb-services__card-btn { display: block; text-align: center; margin-top: 1.25rem; padding: 0.75rem 1.5rem; background: var(--color-primary); color: #fff; border-radius: var(--radius-md, 8px); font-weight: 600; font-size: 0.9375rem; text-decoration: none; transition: opacity 200ms ease, transform 200ms ease; } .pb-services__card-btn:hover { opacity: 0.9; transform: translateY(-1px); } .pb-services__card-duration { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--color-text-light); } .pb-services__card-duration i { font-size: 0.75rem; } /* Service badge */ .pb-services__card-badge { position: absolute; top: 1rem; right: 1rem; padding: 0.3rem 0.75rem; background: var(--color-primary); color: #fff; font-size: 0.75rem; font-weight: 600; border-radius: var(--radius-full); z-index: 2; box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.3); } /* Icon-style service cards */ .pb-services__card--icon { text-align: center; padding: 2rem 1.5rem; } .pb-services__card-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; background: rgba(var(--color-primary-rgb), 0.08); color: var(--color-primary); border-radius: var(--radius-md); font-size: 1.5rem; transition: background-color var(--transition-base), transform var(--transition-spring); } .pb-services__card--icon:hover .pb-services__card-icon { background: var(--color-primary); color: #fff; transform: scale(1.08); } /* ─── Section-level visual modifiers (Phase 2) ───────────────── Apply with classes on .pb-services container: pb-services--gap-{compact|normal|spacious} pb-services--radius-{none|sm|md|lg|xl} pb-services--aspect-{landscape|standard|square|portrait|tall} pb-services--hover-{none|lift|zoom|glow|border} pb-services--btn-{filled|outlined|ghost|arrow} */ /* gap — applies to every variant's grid/list container */ .pb-services--gap-compact .pb-services__grid, .pb-services--gap-compact .pb-services__list, .pb-services--gap-compact .pb-services__pricing, .pb-services--gap-compact .pb-services__imgbg, .pb-services--gap-compact .pb-services__compact, .pb-services--gap-compact .pb-services__showcase-rest { gap: 0.75rem; } .pb-services--gap-normal .pb-services__grid, .pb-services--gap-normal .pb-services__list, .pb-services--gap-normal .pb-services__pricing, .pb-services--gap-normal .pb-services__imgbg, .pb-services--gap-normal .pb-services__compact, .pb-services--gap-normal .pb-services__showcase-rest { gap: 1.5rem; } .pb-services--gap-spacious .pb-services__grid, .pb-services--gap-spacious .pb-services__list, .pb-services--gap-spacious .pb-services__pricing, .pb-services--gap-spacious .pb-services__imgbg, .pb-services--gap-spacious .pb-services__compact, .pb-services--gap-spacious .pb-services__showcase-rest { gap: 2.5rem; } /* card radius — applies to every card-like container (and its image where it sits at the top of the card). */ .pb-services--radius-none .pb-services__card, .pb-services--radius-none .pb-services__card-img, .pb-services--radius-none .pb-services__list-item, .pb-services--radius-none .pb-services__list-img, .pb-services--radius-none .pb-services__pricing-card, .pb-services--radius-none .pb-services__imgbg-card, .pb-services--radius-none .pb-services__compact-item, .pb-services--radius-none .pb-services__showcase-featured, .pb-services--radius-none .pb-services__showcase-img, .pb-services--radius-none .pb-services__showcase-item, .pb-services--radius-none .pb-services__showcase-item-img { border-radius: 0; } .pb-services--radius-sm .pb-services__card, .pb-services--radius-sm .pb-services__list-item, .pb-services--radius-sm .pb-services__pricing-card, .pb-services--radius-sm .pb-services__imgbg-card, .pb-services--radius-sm .pb-services__compact-item, .pb-services--radius-sm .pb-services__showcase-featured, .pb-services--radius-sm .pb-services__showcase-item { border-radius: 4px; } .pb-services--radius-sm .pb-services__card-img, .pb-services--radius-sm .pb-services__list-img, .pb-services--radius-sm .pb-services__showcase-img, .pb-services--radius-sm .pb-services__showcase-item-img { border-radius: 4px; } .pb-services--radius-md .pb-services__card, .pb-services--radius-md .pb-services__list-item, .pb-services--radius-md .pb-services__pricing-card, .pb-services--radius-md .pb-services__imgbg-card, .pb-services--radius-md .pb-services__compact-item, .pb-services--radius-md .pb-services__showcase-featured, .pb-services--radius-md .pb-services__showcase-item { border-radius: 10px; } .pb-services--radius-md .pb-services__card-img, .pb-services--radius-md .pb-services__list-img, .pb-services--radius-md .pb-services__showcase-img, .pb-services--radius-md .pb-services__showcase-item-img { border-radius: 10px 10px 0 0; } .pb-services--radius-lg .pb-services__card, .pb-services--radius-lg .pb-services__list-item, .pb-services--radius-lg .pb-services__pricing-card, .pb-services--radius-lg .pb-services__imgbg-card, .pb-services--radius-lg .pb-services__compact-item, .pb-services--radius-lg .pb-services__showcase-featured, .pb-services--radius-lg .pb-services__showcase-item { border-radius: 20px; } .pb-services--radius-lg .pb-services__card-img, .pb-services--radius-lg .pb-services__list-img, .pb-services--radius-lg .pb-services__showcase-img, .pb-services--radius-lg .pb-services__showcase-item-img { border-radius: 20px 20px 0 0; } .pb-services--radius-xl .pb-services__card, .pb-services--radius-xl .pb-services__list-item, .pb-services--radius-xl .pb-services__pricing-card, .pb-services--radius-xl .pb-services__imgbg-card, .pb-services--radius-xl .pb-services__compact-item, .pb-services--radius-xl .pb-services__showcase-featured, .pb-services--radius-xl .pb-services__showcase-item { border-radius: 32px; } .pb-services--radius-xl .pb-services__card-img, .pb-services--radius-xl .pb-services__list-img, .pb-services--radius-xl .pb-services__showcase-img, .pb-services--radius-xl .pb-services__showcase-item-img { border-radius: 32px 32px 0 0; } /* image aspect ratio — applies to every variant that exposes a service image */ .pb-services--aspect-landscape .pb-services__card-img, .pb-services--aspect-landscape .pb-services__list-img, .pb-services--aspect-landscape .pb-services__showcase-img { aspect-ratio: 16 / 9; } .pb-services--aspect-standard .pb-services__card-img, .pb-services--aspect-standard .pb-services__list-img, .pb-services--aspect-standard .pb-services__showcase-img { aspect-ratio: 4 / 3; } .pb-services--aspect-square .pb-services__card-img, .pb-services--aspect-square .pb-services__list-img, .pb-services--aspect-square .pb-services__showcase-img { aspect-ratio: 1 / 1; } .pb-services--aspect-portrait .pb-services__card-img, .pb-services--aspect-portrait .pb-services__list-img, .pb-services--aspect-portrait .pb-services__showcase-img { aspect-ratio: 3 / 4; } .pb-services--aspect-tall .pb-services__card-img, .pb-services--aspect-tall .pb-services__list-img, .pb-services--aspect-tall .pb-services__showcase-img { aspect-ratio: 2 / 3; } /* hover effects (override default card hover) */ .pb-services--hover-none .pb-services__card { transition: none; } .pb-services--hover-none .pb-services__card:hover { transform: none; box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 4px 20px rgba(0,0,0,0.08); } .pb-services--hover-lift .pb-services__card { transition: transform 300ms ease, box-shadow 300ms ease; } .pb-services--hover-lift .pb-services__card:hover { transform: translateY(-6px); box-shadow: 0 14px 40px rgba(var(--color-primary-rgb), 0.14), 0 4px 12px rgba(0,0,0,0.08); } .pb-services--hover-zoom .pb-services__card { transition: transform 350ms ease; overflow: hidden; } .pb-services--hover-zoom .pb-services__card:hover { transform: scale(1.025); box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 4px 20px rgba(0,0,0,0.08); } .pb-services--hover-zoom .pb-services__card-img { transition: transform 500ms ease; } .pb-services--hover-zoom .pb-services__card:hover .pb-services__card-img { transform: scale(1.06); } .pb-services--hover-glow .pb-services__card { transition: box-shadow 300ms ease; } .pb-services--hover-glow .pb-services__card:hover { transform: none; box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.35), 0 8px 24px rgba(var(--color-primary-rgb), 0.18); } .pb-services--hover-border .pb-services__card { transition: border-color 250ms ease, box-shadow 250ms ease; } .pb-services--hover-border .pb-services__card:hover { transform: none; border-color: var(--color-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 4px 20px rgba(var(--color-primary-rgb),0.10); } /* button variants — primary-based buttons (grid_cards / list / showcase / pricing) */ .pb-services--btn-outlined .pb-services__card-btn, .pb-services--btn-outlined .pb-services__list-btn, .pb-services--btn-outlined .pb-services__showcase-btn, .pb-services--btn-outlined .pb-services__pricing-btn { background: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); padding-top: calc(0.75rem - 2px); padding-bottom: calc(0.75rem - 2px); } .pb-services--btn-outlined .pb-services__card-btn:hover, .pb-services--btn-outlined .pb-services__list-btn:hover, .pb-services--btn-outlined .pb-services__showcase-btn:hover, .pb-services--btn-outlined .pb-services__pricing-btn:hover { background: var(--color-primary); color: #fff; opacity: 1; } /* Featured pricing card uses inverted scheme (white-on-primary) */ .pb-services--btn-outlined .pb-services__pricing-card--featured .pb-services__pricing-btn { background: transparent; color: #fff; border: 2px solid #fff; } .pb-services--btn-outlined .pb-services__pricing-card--featured .pb-services__pricing-btn:hover { background: #fff; color: var(--color-primary); } .pb-services--btn-ghost .pb-services__card-btn, .pb-services--btn-ghost .pb-services__list-btn, .pb-services--btn-ghost .pb-services__showcase-btn, .pb-services--btn-ghost .pb-services__pricing-btn { background: rgba(var(--color-primary-rgb), 0.08); color: var(--color-primary); border: none; } .pb-services--btn-ghost .pb-services__card-btn:hover, .pb-services--btn-ghost .pb-services__list-btn:hover, .pb-services--btn-ghost .pb-services__showcase-btn:hover, .pb-services--btn-ghost .pb-services__pricing-btn:hover { background: rgba(var(--color-primary-rgb), 0.15); opacity: 1; } .pb-services--btn-ghost .pb-services__pricing-card--featured .pb-services__pricing-btn { background: rgba(255,255,255,0.18); color: #fff; } .pb-services--btn-ghost .pb-services__pricing-card--featured .pb-services__pricing-btn:hover { background: rgba(255,255,255,0.28); } .pb-services--btn-arrow .pb-services__card-btn, .pb-services--btn-arrow .pb-services__list-btn, .pb-services--btn-arrow .pb-services__showcase-btn, .pb-services--btn-arrow .pb-services__pricing-btn { background: transparent; color: var(--color-primary); padding: 0.5rem 0; text-align: left; border: none; border-radius: 0; box-shadow: none; } .pb-services--btn-arrow .pb-services__pricing-card--featured .pb-services__pricing-btn { color: #fff; } .pb-services--btn-arrow .pb-services__card-btn::after, .pb-services--btn-arrow .pb-services__list-btn::after, .pb-services--btn-arrow .pb-services__showcase-btn::after, .pb-services--btn-arrow .pb-services__pricing-btn::after { content: ' →'; display: inline-block; transition: transform 200ms ease; } .pb-services--btn-arrow .pb-services__card-btn:hover::after, .pb-services--btn-arrow .pb-services__list-btn:hover::after, .pb-services--btn-arrow .pb-services__showcase-btn:hover::after, .pb-services--btn-arrow .pb-services__pricing-btn:hover::after { transform: translateX(4px); } .pb-services--btn-arrow .pb-services__card-btn:hover, .pb-services--btn-arrow .pb-services__list-btn:hover, .pb-services--btn-arrow .pb-services__showcase-btn:hover, .pb-services--btn-arrow .pb-services__pricing-btn:hover { opacity: 1; transform: none; background: transparent; } /* button variants — image-bg (white-on-overlay) */ .pb-services--btn-outlined .pb-services__imgbg-btn { background: transparent; color: #fff; border: 2px solid #fff; } .pb-services--btn-outlined .pb-services__imgbg-btn:hover { background: #fff; color: var(--color-text); } .pb-services--btn-ghost .pb-services__imgbg-btn { background: rgba(255,255,255,0.18); color: #fff; border: none; } .pb-services--btn-ghost .pb-services__imgbg-btn:hover { background: rgba(255,255,255,0.30); color: #fff; } .pb-services--btn-arrow .pb-services__imgbg-btn { background: transparent; color: #fff; padding: 0.4rem 0; border-radius: 0; box-shadow: none; } .pb-services--btn-arrow .pb-services__imgbg-btn::after { content: ' →'; display: inline-block; transition: transform 200ms ease; } .pb-services--btn-arrow .pb-services__imgbg-btn:hover::after { transform: translateX(4px); } .pb-services--btn-arrow .pb-services__imgbg-btn:hover { background: transparent; color: #fff; transform: none; } /* ─── Card style: elevated · bordered · flat · gradient ───────── Mirrors ServicesBlock.tsx so the editor preview and the public page render the same look. Defaults to elevated. */ .pb-services--card-elevated .pb-services__card { background: var(--color-bg); border: 1px solid transparent; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 14px rgba(15, 23, 42, 0.06); } .pb-services--card-elevated .pb-services__card:hover { box-shadow: 0 6px 22px rgba(15, 23, 42, 0.10), 0 12px 32px rgba(15, 23, 42, 0.08); } .pb-services--card-bordered .pb-services__card { background: var(--color-bg); border: 1px solid rgba(var(--color-text-rgb), 0.12); box-shadow: none; } .pb-services--card-bordered .pb-services__card:hover { border-color: rgba(var(--color-primary-rgb), 0.45); } .pb-services--card-flat .pb-services__card { background: var(--color-bg-alt, #f8fafc); border: 1px solid transparent; box-shadow: none; } .pb-services--card-flat .pb-services__card:hover { background: rgba(var(--color-primary-rgb), 0.05); } .pb-services--card-gradient .pb-services__card { background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.06), rgba(var(--color-primary-rgb), 0.12)); border: 1px solid rgba(var(--color-primary-rgb), 0.18); box-shadow: none; } .pb-services--card-gradient .pb-services__card:hover { border-color: rgba(var(--color-primary-rgb), 0.35); } /* ─── Variant: pricing_table ─────────────────────────────────── Each service rendered as a tall card with huge price up top */ .pb-services__pricing { display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 1100px; margin: 0 auto; align-items: stretch; } @container page (min-width: 640px) { .pb-services__pricing--cols-2, .pb-services__pricing--cols-3, .pb-services__pricing--cols-4 { grid-template-columns: repeat(2, 1fr); } } @container page (min-width: 1024px) { .pb-services__pricing--cols-3 { grid-template-columns: repeat(3, 1fr); } .pb-services__pricing--cols-4 { grid-template-columns: repeat(4, 1fr); } } .pb-services__pricing-card { position: relative; background: var(--color-bg-alt, var(--color-bg)); border: 1px solid rgba(var(--color-text-rgb), 0.12); border-radius: var(--radius-md); padding: 2rem 1.75rem 1.75rem; display: flex; flex-direction: column; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.06); transition: transform 300ms ease, box-shadow 300ms ease; } .pb-services__pricing-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(var(--color-primary-rgb), 0.15); } .pb-services__pricing-card--featured { background: var(--color-primary); color: #fff; border: none; box-shadow: 0 20px 40px -10px rgba(var(--color-primary-rgb), 0.4); transform: scale(1.02); } .pb-services__pricing-card--featured .pb-services__pricing-name, .pb-services__pricing-card--featured .pb-services__pricing-price, .pb-services__pricing-card--featured .pb-services__pricing-duration, .pb-services__pricing-card--featured .pb-services__pricing-desc { color: #fff; } .pb-services__pricing-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #f59e0b; color: #1a0f00; padding: 0.3rem 0.85rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; } .pb-services__pricing-name { font-size: 1.05rem; font-weight: 600; color: var(--color-text); margin-bottom: 0.75rem; } .pb-services__pricing-price-wrap { margin-bottom: 1rem; } .pb-services__pricing-price { font-size: 2.5rem; font-weight: 800; color: var(--color-text); letter-spacing: -0.02em; line-height: 1; display: inline-block; } .pb-services__pricing-price--quote { font-size: 1.5rem; font-weight: 700; } .pb-services__pricing-price--free { font-size: 2.5rem; color: #10b981; } .pb-services__pricing-duration { font-size: 0.8125rem; color: var(--color-text-light); margin-top: 0.4rem; } .pb-services__pricing-desc { border-top: 1px solid rgba(var(--color-text-rgb), 0.1); padding-top: 1rem; font-size: 0.875rem; color: var(--color-text-light); line-height: 1.6; flex: 1 1 auto; margin-bottom: 1.25rem; } .pb-services__pricing-card--featured .pb-services__pricing-desc { border-top-color: rgba(255,255,255,0.18); } .pb-services__pricing-btn { display: block; text-align: center; padding: 0.85rem 1.5rem; background: var(--color-primary); color: #fff; border-radius: var(--radius-md); font-weight: 600; font-size: 0.9375rem; text-decoration: none; transition: opacity 200ms ease, transform 200ms ease; margin-top: auto; } .pb-services__pricing-card--featured .pb-services__pricing-btn { background: #fff; color: var(--color-primary); } .pb-services__pricing-btn:hover { opacity: 0.92; transform: translateY(-1px); } /* ─── Variant: cards_image_bg ────────────────────────────────── Image fills the entire card with overlay + text on top */ .pb-services__imgbg { display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 1100px; margin: 0 auto; } @container page (min-width: 640px) { .pb-services__imgbg--cols-2, .pb-services__imgbg--cols-3, .pb-services__imgbg--cols-4 { grid-template-columns: repeat(2, 1fr); } } @container page (min-width: 1024px) { .pb-services__imgbg--cols-3 { grid-template-columns: repeat(3, 1fr); } .pb-services__imgbg--cols-4 { grid-template-columns: repeat(4, 1fr); } } .pb-services__imgbg-card { position: relative; aspect-ratio: 4 / 5; min-height: 280px; border-radius: var(--radius-md); overflow: hidden; background-size: cover; background-position: center; background-color: var(--color-primary); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; box-shadow: 0 4px 16px rgba(0,0,0,0.12); transition: transform 400ms ease, box-shadow 400ms ease; } .pb-services__imgbg-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); } .pb-services__imgbg-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.32) 50%, rgba(0,0,0,0.05) 100%); pointer-events: none; transition: opacity 300ms ease; } .pb-services__imgbg-card:hover .pb-services__imgbg-overlay { background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.1) 100%); } .pb-services__imgbg-badge { position: absolute; top: 14px; right: 14px; z-index: 2; background: #f59e0b; color: #1a0f00; padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .pb-services__imgbg-content { position: relative; z-index: 1; padding: 1.5rem 1.5rem 1.4rem; } .pb-services__imgbg-name { font-size: 1.35rem; font-weight: 700; color: #fff; margin-bottom: 0.4rem; text-shadow: 0 2px 8px rgba(0,0,0,0.4); line-height: 1.25; } .pb-services__imgbg-desc { font-size: 0.875rem; color: rgba(255,255,255,0.92); margin-bottom: 0.75rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pb-services__imgbg-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.85rem; } .pb-services__imgbg-price { font-weight: 700; color: #fff; font-size: 1.45rem; text-shadow: 0 2px 8px rgba(0,0,0,0.4); } .pb-services__imgbg-price--quote { font-size: 1rem; } .pb-services__imgbg-price--free { color: #fde68a; } .pb-services__imgbg-duration { font-size: 0.78rem; color: rgba(255,255,255,0.85); } .pb-services__imgbg-btn { display: inline-block; padding: 0.55rem 1.2rem; background: #fff; color: var(--color-text); border-radius: var(--radius-md); font-weight: 600; font-size: 0.875rem; text-decoration: none; transition: background-color 200ms ease, transform 200ms ease; } .pb-services__imgbg-btn:hover { background: var(--color-primary); color: #fff; transform: translateY(-1px); } /* ─── Variant: compact_grid ──────────────────────────────────── Dense grid, name + price only. The whole card is the link. */ .pb-services__compact { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; max-width: 1100px; margin: 0 auto; } @container page (min-width: 640px) { .pb-services__compact--cols-2 { grid-template-columns: repeat(2, 1fr); } .pb-services__compact--cols-3, .pb-services__compact--cols-4, .pb-services__compact--cols-5 { grid-template-columns: repeat(3, 1fr); } } @container page (min-width: 1024px) { .pb-services__compact--cols-4 { grid-template-columns: repeat(4, 1fr); } .pb-services__compact--cols-5 { grid-template-columns: repeat(5, 1fr); } } .pb-services__compact-item { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 0.3rem; padding: 0.85rem 1rem; border-radius: var(--radius-md); background: var(--color-bg-alt, var(--color-bg)); border: 1px solid rgba(var(--color-text-rgb), 0.12); color: var(--color-text); text-decoration: none; min-height: 70px; transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; } a.pb-services__compact-item:hover { border-color: var(--color-primary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.12); } .pb-services__compact-badge { position: absolute; top: -7px; right: 10px; background: #f59e0b; color: #1a0f00; padding: 0.15rem 0.4rem; border-radius: 999px; font-size: 0.65rem; font-weight: 700; } .pb-services__compact-name { font-size: 0.9rem; font-weight: 600; color: var(--color-text); margin: 0; line-height: 1.3; } .pb-services__compact-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .pb-services__compact-price { font-weight: 700; color: var(--color-primary); font-size: 0.95rem; } .pb-services__compact-price--quote { font-size: 0.78rem; } .pb-services__compact-price--free { color: #10b981; } .pb-services__compact-duration { font-size: 0.7rem; color: var(--color-text-light); white-space: nowrap; } /* ═══════════════════════════════════════════════════════════════════════════ BLOCK STYLES — TEAM ═══════════════════════════════════════════════════════════════════════════ */ .pb-team { padding-top: var(--spacing-section); padding-bottom: var(--spacing-section); } .pb-team__grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 2rem; } @container page (min-width: 640px) { .pb-team__grid { grid-template-columns: repeat(2, 1fr); } } @container page (min-width: 1024px) { .pb-team__grid { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } } .pb-team__member { text-align: center; padding: 2rem 1.5rem; background: var(--color-bg-alt, var(--color-bg)); border-radius: var(--radius-md); transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 400ms ease; } .pb-team__member:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(var(--color-primary-rgb), 0.08); } .pb-team__avatar { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin: 0 auto 1.25rem; border: 4px solid rgba(var(--color-primary-rgb), 0.1); transition: border-color 300ms ease; } .pb-team__member:hover .pb-team__avatar { border-color: rgba(var(--color-primary-rgb), 0.3); } .pb-team__avatar-placeholder { width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 1.25rem; background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.08), rgba(var(--color-primary-rgb), 0.16)); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--color-primary); } .pb-team__name { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.35rem; } .pb-team__role { display: inline-block; font-size: 0.8125rem; font-weight: 500; color: var(--color-primary); background: rgba(var(--color-primary-rgb), 0.06); padding: 0.25rem 0.75rem; border-radius: var(--radius-full); margin-bottom: 0.75rem; } .pb-team__bio { font-size: 0.9375rem; color: var(--color-text-light); line-height: 1.6; max-width: 300px; margin: 0 auto; } /* ═══════════════════════════════════════════════════════════════════════════ BLOCK STYLES — REVIEWS ═══════════════════════════════════════════════════════════════════════════ */ .pb-reviews { padding-top: var(--spacing-section); padding-bottom: var(--spacing-section); } .pb-reviews__grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1.5rem; } @container page (min-width: 640px) { .pb-reviews__grid { grid-template-columns: repeat(2, 1fr); } } @container page (min-width: 1024px) { .pb-reviews__grid { grid-template-columns: repeat(3, 1fr); } } .pb-reviews__card { background: var(--color-bg-alt, var(--color-bg)); border-radius: var(--radius-md); padding: 2rem; position: relative; border: 1px solid rgba(var(--color-text-rgb),0.1); box-shadow: 0 1px 3px rgba(var(--color-text-rgb),0.04), 0 4px 20px rgba(var(--color-text-rgb),0.04); transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 400ms ease; } .pb-reviews__card:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(var(--color-primary-rgb), 0.08); } .pb-reviews__quote-icon { position: absolute; top: 1.25rem; right: 1.5rem; font-size: 3rem; color: rgba(var(--color-primary-rgb), 0.06); font-family: Georgia, serif; line-height: 1; pointer-events: none; } .pb-reviews__stars { margin-bottom: 1rem; } .pb-reviews__text { font-size: 0.9375rem; color: var(--color-text); line-height: 1.7; margin-bottom: 1.25rem; font-style: italic; position: relative; } .pb-reviews__author { display: flex; align-items: center; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid rgba(0,0,0,0.06); } .pb-reviews__author-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .pb-reviews__author-avatar-placeholder { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.1), rgba(var(--color-primary-rgb), 0.2)); display: flex; align-items: center; justify-content: center; color: var(--color-primary); font-weight: 600; font-size: 1rem; flex-shrink: 0; } .pb-reviews__author-name { font-weight: 600; font-size: 0.9375rem; color: var(--color-text); } .pb-reviews__author-date { font-size: 0.8125rem; color: var(--color-text-light); } /* Response from business */ .pb-reviews__response { margin-top: 1rem; padding: 1rem; background: var(--color-bg-alt); border-radius: var(--radius-sm); border-left: 3px solid var(--color-primary); } .pb-reviews__response-label { font-size: 0.75rem; font-weight: 600; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.375rem; } .pb-reviews__response-text { font-size: 0.875rem; color: var(--color-text-light); line-height: 1.6; font-style: normal; } /* Reviews carousel */ .pb-reviews__carousel { position: relative; overflow: hidden; } .pb-reviews__carousel-track { display: flex; gap: 1.5rem; transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1); } .pb-reviews__carousel-track .pb-reviews__card { flex: 0 0 calc(100% - 1rem); min-width: 0; } @container page (min-width: 640px) { .pb-reviews__carousel-track .pb-reviews__card { flex: 0 0 calc(50% - 0.75rem); } } @container page (min-width: 1024px) { .pb-reviews__carousel-track .pb-reviews__card { flex: 0 0 calc(33.333% - 1rem); } } .pb-reviews__carousel-nav { display: flex; justify-content: center; gap: 0.5rem; margin-top: 2rem; } .pb-reviews__carousel-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(var(--color-primary-rgb), 0.2); cursor: pointer; padding: 0; transition: background-color var(--transition-base), transform var(--transition-base); } .pb-reviews__carousel-dot--active { background: var(--color-primary); transform: scale(1.3); } /* ═══════════════════════════════════════════════════════════════════════════ BLOCK STYLES — FAQ ═══════════════════════════════════════════════════════════════════════════ */ .pb-faq { padding-top: var(--spacing-section); padding-bottom: var(--spacing-section); } .pb-faq__list { max-width: 800px; margin: 0 auto; } .pb-faq__item { background: var(--color-bg-alt, var(--color-bg)); border-radius: var(--radius-md); margin-bottom: 0.75rem; overflow: hidden; box-shadow: 0 1px 4px rgba(var(--color-text-rgb),0.08); border: 1px solid rgba(var(--color-text-rgb),0.08); transition: border-color var(--transition-base), box-shadow var(--transition-base); } .pb-faq__item--open { border-color: rgba(var(--color-primary-rgb), 0.2); box-shadow: 0 2px 12px rgba(var(--color-primary-rgb), 0.06); } details.pb-faq__item { display: block; } details.pb-faq__item > summary.pb-faq__trigger { list-style: none; cursor: pointer; } details.pb-faq__item > summary.pb-faq__trigger::-webkit-details-marker { display: none; } details.pb-faq__item > summary.pb-faq__trigger::marker { content: ''; } .pb-faq__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; background: none; border: none; cursor: pointer; font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--color-text); text-align: left; transition: color var(--transition-base); } .pb-faq__trigger:hover { color: var(--color-primary); } .pb-faq__icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: var(--radius-full); background: rgba(var(--color-primary-rgb), 0.06); color: var(--color-primary); font-size: 0.75rem; transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), background-color var(--transition-base); } .pb-faq__item--open .pb-faq__icon { transform: rotate(180deg); background: var(--color-primary); color: #fff; } .pb-faq__answer { max-height: 0; overflow: hidden; transition: max-height 400ms cubic-bezier(0.4, 0, 0.2, 1); } .pb-faq__answer-inner { padding: 0 1.5rem 1.5rem; font-size: 0.9375rem; color: var(--color-text-light); line-height: 1.7; } /* ═══════════════════════════════════════════════════════════════════════════ BLOCK STYLES — GALLERY ═══════════════════════════════════════════════════════════════════════════ */ .pb-gallery { padding-top: var(--spacing-section); padding-bottom: var(--spacing-section); } .pb-gallery__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } @container page (min-width: 640px) { .pb-gallery__grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } } @container page (min-width: 1024px) { .pb-gallery__grid { grid-template-columns: repeat(4, 1fr); } } /* Column-count variants (used by builder blocks instead of inline styles) */ .pb-gallery__grid--cols-1 { grid-template-columns: 1fr; } .pb-gallery__grid--cols-2, .pb-gallery__grid--cols-3, .pb-gallery__grid--cols-4 { grid-template-columns: repeat(2, 1fr); } @container page (min-width: 640px) { .pb-gallery__grid--cols-2 { grid-template-columns: repeat(2, 1fr); } .pb-gallery__grid--cols-3 { grid-template-columns: repeat(3, 1fr); } .pb-gallery__grid--cols-4 { grid-template-columns: repeat(3, 1fr); } } @container page (min-width: 1024px) { .pb-gallery__grid--cols-3 { grid-template-columns: repeat(3, 1fr); } .pb-gallery__grid--cols-4 { grid-template-columns: repeat(4, 1fr); } } /* Masonry-like grid */ .pb-gallery__grid--masonry { grid-template-columns: repeat(2, 1fr); } @container page (min-width: 768px) { .pb-gallery__grid--masonry { grid-template-columns: repeat(3, 1fr); } .pb-gallery__grid--masonry .pb-gallery__item:nth-child(4n+1) { grid-row: span 2; } } .pb-gallery__item { position: relative; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; aspect-ratio: 1; } .pb-gallery__grid--masonry .pb-gallery__item { aspect-ratio: auto; min-height: 200px; } .pb-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1); } .pb-gallery__item:hover img { transform: scale(1.06); } .pb-gallery__item-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.6) 100%); opacity: 0; transition: opacity 300ms ease; display: flex; align-items: flex-end; padding: 1rem; /* Decorative — never absorb clicks; the underlying needs them */ pointer-events: none; } .pb-gallery__item-caption, .pb-gallery__item-zoom { pointer-events: none; } .pb-gallery__item:hover .pb-gallery__item-overlay { opacity: 1; } .pb-gallery__item-caption { color: #fff; font-size: 0.875rem; font-weight: 500; } .pb-gallery__item-zoom { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.9); border-radius: 50%; color: var(--color-text); font-size: 1rem; opacity: 0; transition: opacity 300ms ease, transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1); } .pb-gallery__item:hover .pb-gallery__item-zoom { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* ── Hover effects ──────────────────────────────────────────────────── */ /* Disable the default scale-on-hover when an explicit hover effect is set */ .pb-gallery__item--hover-none img, .pb-gallery__item--hover-lift img, .pb-gallery__item--hover-tilt img, .pb-gallery__item--hover-gray img, .pb-gallery__item--hover-fade img { transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1), filter 350ms ease, opacity 350ms ease; } .pb-gallery__item--hover-none:hover img { transform: none; } .pb-gallery__item--hover-lift { transition: transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 350ms ease; } .pb-gallery__item--hover-lift:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18); } .pb-gallery__item--hover-lift:hover img { transform: none; } .pb-gallery__item--hover-tilt { transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1); } .pb-gallery__item--hover-tilt:hover { transform: rotate(-1.5deg) scale(1.02); } .pb-gallery__item--hover-tilt:hover img { transform: none; } /* Gray: all gray, hovered image is colored */ .pb-gallery--hover-gray .pb-gallery__item img, .pb-gallery__item--hover-gray img { filter: grayscale(100%); } .pb-gallery__item--hover-gray:hover img { filter: none; transform: none; } /* When ANY item is hovered, dim the rest. Implement via group hover on container. */ .pb-gallery--hover-gray:hover .pb-gallery__item:not(:hover) img { filter: grayscale(100%); } .pb-gallery--hover-gray .pb-gallery__item:hover img { filter: none; } /* Fade: dim non-hovered when one is hovered */ .pb-gallery--hover-fade:hover .pb-gallery__item:not(:hover) img { opacity: 0.5; } .pb-gallery__item--hover-fade:hover img { transform: none; } /* ── Lazy blur-up loading ──────────────────────────────────────────── */ .pb-gallery__item--lazyblur img { transition: filter 600ms ease, opacity 400ms ease; } .pb-gallery__item--lazyblur img:not(.is-loaded) { filter: blur(14px) saturate(80%); opacity: 0.85; } .pb-gallery__item--lazyblur img.is-loaded { /* keep author-provided filters by leaving blur off; opacity full */ opacity: 1; } /* ── Filter buttons row ────────────────────────────────────────────── */ .pb-gallery__filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0 0 2rem; } .pb-gallery__filter { background: transparent; border: 1px solid rgba(0, 0, 0, 0.12); color: var(--color-text, #0f172a); padding: 0.45rem 1rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; transition: all 0.18s ease; } .pb-gallery__filter:hover { border-color: var(--color-primary, #14b8a6); color: var(--color-primary, #14b8a6); } .pb-gallery__filter.is-active { background: var(--color-primary, #14b8a6); border-color: var(--color-primary, #14b8a6); color: #fff; } /* Hide items that don't match active filter */ .pb-gallery__item--filtered-out { display: none !important; } /* ── Before/after items inside gallery (compact wrapper) ───────────── */ .pb-gallery__item--ba { overflow: hidden; position: relative; } .pb-gallery__item--ba .pb-ba__wrapper { width: 100%; height: 100%; border-radius: inherit; aspect-ratio: 1 / 1; /* fits the grid square; CSS aspect_ratio still wins outside */ } .pb-gallery--variant-grid .pb-gallery__item--ba .pb-ba__wrapper { aspect-ratio: inherit; } .pb-gallery__item--ba .pb-ba__img { object-fit: cover; } .pb-gallery__item--ba:hover img { transform: none; } .pb-gallery__item--ba .pb-ba__handle { cursor: ew-resize; } /* ── Justified mosaic (Flickr / Unsplash style) ───────────────────── */ .pb-gallery__justified { display: flex; flex-wrap: wrap; gap: var(--pb-gallery-gap, 1rem); } .pb-gallery__justified .pb-gallery__item { flex: 1 1 auto; height: 240px; min-width: 200px; max-width: 100%; overflow: hidden; border-radius: 0.75rem; position: relative; } .pb-gallery__justified .pb-gallery__item img { height: 100%; width: auto; min-width: 100%; object-fit: cover; display: block; } /* Last-row spacer to prevent the final row from stretching weirdly */ .pb-gallery__justified::after { content: ''; flex: 999 0 0; min-width: 0; } @container page (max-width: 600px) { .pb-gallery__justified .pb-gallery__item { height: 180px; min-width: 140px; } } /* ── Video items (gallery & lightbox) ──────────────────────────────── */ .pb-gallery__item--video { cursor: pointer; background: #0f172a; } .pb-gallery__item--video img { opacity: 0.9; } .pb-gallery__item--video:hover img { opacity: 1; } .pb-gallery__video-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #1e293b, #0f172a); } .pb-gallery__video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.95); border-radius: 50%; color: #0f172a; font-size: 22px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4); z-index: 4; pointer-events: none; transition: transform 0.18s; } .pb-gallery__item--video:hover .pb-gallery__video-play { transform: translate(-50%, -50%) scale(1.08); } /* ── Pinned items badge ────────────────────────────────────────────── */ .pb-gallery__item--pinned::before { content: '★'; position: absolute; top: 8px; left: 8px; width: 24px; height: 24px; background: rgba(250, 204, 21, 0.95); color: #422006; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; z-index: 5; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); } /* ── Multi-tag filter row (active button styling extends single-tag) ─ */ .pb-gallery--multitag .pb-gallery__filter.is-active { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25) inset; } /* ══════════════════════════════════════════════════════════════════ GALLERY LAYOUT — BENTO (asymmetric grid, Apple/Notion style) ══════════════════════════════════════════════════════════════════ */ /* * Layout editorial estilo magazine: 3 filas con proporciones distintas que * crean ritmo visual sin dejar huecos. Cada bloque de 8 imagenes ocupa una * unidad completa; si hay mas, el patron se repite. * * Fila 1 (h alta): [ 1 (2/3) ][ 2 (1/3) ] * Fila 2 (h media): [ 3 ][ 4 (1/2) ][ 5 ] * Fila 3 (h media): [ 6 ][ 7 ][ 8 ] * * Implementado con flexbox por filas (estructura HTML adaptada en gallery.php * para envolver cada fila en .pb-gallery__bento-row). Es un patron tipo * editorial que mantiene foco visual y profesionalidad. */ .pb-gallery__bento { display: flex; flex-direction: column; gap: var(--pb-gallery-gap, 0.625rem); max-width: 1100px; margin: 0 auto; } .pb-gallery__bento-row { display: flex; gap: var(--pb-gallery-gap, 0.625rem); } /* Alturas distintas por fila para crear ritmo editorial */ .pb-gallery__bento-row--p0 { height: clamp(240px, 30cqw, 360px); } .pb-gallery__bento-row--p1 { height: clamp(200px, 24cqw, 280px); } .pb-gallery__bento-row--p2 { height: clamp(200px, 24cqw, 280px); } .pb-gallery__bento .pb-gallery__bento-cell { overflow: hidden; min-height: 0; min-width: 0; border-radius: 0.75rem; position: relative; } .pb-gallery__bento .pb-gallery__bento-cell img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Pesos flex para repartir ancho en cada fila */ .pb-gallery__bento-cell--w1 { flex: 1 1 0; } .pb-gallery__bento-cell--w2 { flex: 2 1 0; } .pb-gallery__bento-cell--w3 { flex: 3 1 0; } /* Tablet: ajustar alturas */ @container page (max-width: 1024px) { .pb-gallery__bento-row--p0 { height: clamp(200px, 30cqw, 280px); } .pb-gallery__bento-row--p1, .pb-gallery__bento-row--p2 { height: clamp(160px, 22cqw, 220px); } } /* Movil: cada fila se vuelve columna apilada con aspect-ratio */ @container page (max-width: 640px) { .pb-gallery__bento-row { flex-direction: column; height: auto; } .pb-gallery__bento-cell { aspect-ratio: 16 / 10; flex: none; } /* La primera celda de la primera fila destaca como hero panoramico */ .pb-gallery__bento-row--p0 .pb-gallery__bento-cell--w2 { aspect-ratio: 16 / 11; } } /* ══════════════════════════════════════════════════════════════════ GALLERY LAYOUT — HERO + GRID (cover + grid below) ══════════════════════════════════════════════════════════════════ */ .pb-gallery__hero-grid { display: flex; flex-direction: column; gap: var(--pb-gallery-gap, 1rem); max-width: 1100px; margin: 0 auto; } .pb-gallery__hero-grid-cover { width: 100%; aspect-ratio: 21 / 9; overflow: hidden; border-radius: 1rem; } .pb-gallery__hero-grid-cover .pb-gallery__item { width: 100%; height: 100%; } .pb-gallery__hero-grid-cover img { width: 100%; height: 100%; object-fit: cover; } .pb-gallery__hero-grid-rest { display: grid; gap: var(--pb-gallery-gap, 1rem); } .pb-gallery__hero-grid-rest.pb-gallery__grid--cols-2 { grid-template-columns: repeat(2, 1fr); } .pb-gallery__hero-grid-rest.pb-gallery__grid--cols-3 { grid-template-columns: repeat(3, 1fr); } .pb-gallery__hero-grid-rest.pb-gallery__grid--cols-4 { grid-template-columns: repeat(4, 1fr); } .pb-gallery__hero-grid-rest .pb-gallery__item { aspect-ratio: 1 / 1; border-radius: 0.75rem; overflow: hidden; } @container page (max-width: 700px) { .pb-gallery__hero-grid-cover { aspect-ratio: 16 / 10; } .pb-gallery__hero-grid-rest.pb-gallery__grid--cols-3, .pb-gallery__hero-grid-rest.pb-gallery__grid--cols-4 { grid-template-columns: repeat(2, 1fr); } } /* ══════════════════════════════════════════════════════════════════ GALLERY LAYOUT — MARQUEE (auto-scroll horizontal infinite) ══════════════════════════════════════════════════════════════════ */ .pb-gallery__marquee { overflow: hidden; width: 100%; margin: 0 auto; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); } .pb-gallery__marquee-track { display: flex; width: max-content; animation: pb-marquee-scroll 40s linear infinite; gap: 1rem; } .pb-gallery__marquee:hover .pb-gallery__marquee-track, .pb-gallery__marquee:focus-within .pb-gallery__marquee-track { animation-play-state: paused; } .pb-gallery__marquee-item { flex: 0 0 auto; width: 240px; height: 240px; border-radius: 0.75rem; overflow: hidden; position: relative; } .pb-gallery__marquee-item img { width: 100%; height: 100%; object-fit: cover; } @keyframes pb-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .pb-gallery__marquee-track { animation: none; } .pb-gallery__marquee { overflow-x: auto; } } @container page (max-width: 600px) { .pb-gallery__marquee-item { width: 180px; height: 180px; } .pb-gallery__marquee-track { animation-duration: 28s; } } /* ══════════════════════════════════════════════════════════════════ GALLERY LAYOUT — FILMSTRIP (horizontal scroll-snap, manual) ══════════════════════════════════════════════════════════════════ */ .pb-gallery__filmstrip { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; background: #0a0e1a; padding: 32px 12px; border-radius: 0.75rem; /* Film perforations top/bottom */ background-image: radial-gradient(circle at 12px 16px, rgba(255,255,255,0.7) 0 2px, transparent 2px), radial-gradient(circle at 12px calc(100% - 16px), rgba(255,255,255,0.7) 0 2px, transparent 2px); background-size: 22px 100%, 22px 100%; background-repeat: repeat-x, repeat-x; } .pb-gallery__filmstrip::-webkit-scrollbar { height: 6px; } .pb-gallery__filmstrip::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 4px; } .pb-gallery__filmstrip-frame { flex: 0 0 auto; width: 380px; height: 240px; scroll-snap-align: start; border-radius: 4px; overflow: hidden; position: relative; } .pb-gallery__filmstrip-frame img { width: 100%; height: 100%; object-fit: cover; } @container page (max-width: 700px) { .pb-gallery__filmstrip-frame { width: 280px; height: 180px; } } /* ══════════════════════════════════════════════════════════════════ GALLERY LAYOUT — POLAROID (white border + slight rotation) ══════════════════════════════════════════════════════════════════ */ .pb-gallery__polaroid { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; padding: 24px 0; } .pb-gallery__polaroid-card { background: #ffffff; padding: 12px 12px 50px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.12); width: 240px; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s; position: relative; } .pb-gallery__polaroid-card > img, .pb-gallery__polaroid-card .pb-gallery__item-overlay, .pb-gallery__polaroid-card .pb-gallery__watermark { border-radius: 0; } .pb-gallery__polaroid-card img { width: 100%; height: 220px; object-fit: cover; display: block; } .pb-gallery__polaroid-card .pb-gallery__item-caption { position: absolute; bottom: 16px; left: 12px; right: 12px; color: #1f2937; font-family: 'Caveat', 'Comic Sans MS', cursive; font-size: 18px; text-align: center; opacity: 1 !important; background: transparent !important; } .pb-gallery__polaroid-card .pb-gallery__item-overlay { background: transparent; opacity: 1; pointer-events: none; inset: auto 0 0 0; height: 50px; padding: 0; } /* Subtle deterministic rotation per pattern (1..5) */ .pb-gallery__polaroid-card--1 { transform: rotate(-2.5deg); } .pb-gallery__polaroid-card--2 { transform: rotate(1.8deg); } .pb-gallery__polaroid-card--3 { transform: rotate(-1.2deg); } .pb-gallery__polaroid-card--4 { transform: rotate(2.6deg); } .pb-gallery__polaroid-card--5 { transform: rotate(-3.1deg); } .pb-gallery__polaroid-card:hover { transform: rotate(0deg) scale(1.04); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25); z-index: 5; } @container page (max-width: 600px) { .pb-gallery__polaroid-card { width: 180px; } .pb-gallery__polaroid-card img { height: 160px; } } /* ── Premium lightbox extras (zoom controls, slideshow toggle) ─────── */ .pb-lightbox__toolbar { position: absolute; top: 16px; left: 16px; display: flex; gap: 8px; z-index: 5; } .pb-lightbox__tool { background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; border: 0; border-radius: 999px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s; font-size: 16px; } .pb-lightbox__tool:hover { background: rgba(15, 23, 42, 0.9); } .pb-lightbox__tool.is-active { background: var(--color-primary, #14b8a6); } .pb-lightbox__img { transition: transform 0.18s ease-out; will-change: transform; user-select: none; -webkit-user-drag: none; } .pb-lightbox--zooming .pb-lightbox__img { cursor: grab; } .pb-lightbox--panning .pb-lightbox__img { cursor: grabbing; transition: none; } /* ── Lightbox thumbnails strip (bottom) ───────────────────────────── */ .pb-lightbox__thumbs { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; padding: 6px 10px; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 999px; max-width: calc(100% - 32px); overflow-x: auto; z-index: 4; scrollbar-width: thin; } .pb-lightbox__thumbs::-webkit-scrollbar { height: 4px; } .pb-lightbox__thumbs::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 4px; } .pb-lightbox__thumb { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 6px; overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: all 0.15s; background: #1e293b; padding: 0; } .pb-lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .pb-lightbox__thumb.is-active { border-color: #fff; transform: scale(1.05); } .pb-lightbox__thumb:hover { border-color: rgba(255,255,255,0.5); } @container page (max-width: 600px) { .pb-lightbox__thumb { width: 44px; height: 44px; } } /* ── Lightbox share menu ──────────────────────────────────────────── */ .pb-lightbox__share-wrap { position: relative; display: inline-block; } .pb-lightbox__share-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 8px; background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(8px); border-radius: 8px; padding: 8px; display: none; flex-direction: column; gap: 4px; min-width: 180px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4); z-index: 6; } .pb-lightbox__share-menu.is-open { display: flex; } .pb-lightbox__share-link { color: #fff; text-decoration: none; background: transparent; border: 0; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; text-align: left; display: flex; align-items: center; gap: 10px; transition: background 0.12s; } .pb-lightbox__share-link:hover { background: rgba(255, 255, 255, 0.1); } .pb-lightbox__share-icon { width: 16px; text-align: center; } /* ── Lightbox video container ─────────────────────────────────────── */ .pb-lightbox__video { width: 90cqw; max-width: 1100px; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; } .pb-lightbox__video iframe, .pb-lightbox__video video { width: 100%; height: 100%; border: 0; display: block; } .pb-lightbox--video .pb-lightbox__img { display: none; } .pb-lightbox:not(.pb-lightbox--video) .pb-lightbox__video { display: none; } /* ═══════════════════════════════════════════════════════════════════════════ BLOCK STYLES — SCHEDULE ═══════════════════════════════════════════════════════════════════════════ */ .pb-schedule { padding-top: var(--spacing-section); padding-bottom: var(--spacing-section); } .pb-schedule__list { max-width: 560px; margin: 0 auto; list-style: none; padding: 0; } .pb-schedule__item { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-radius: var(--radius-sm); transition: background-color var(--transition-base); } .pb-schedule__item:nth-child(odd) { background: var(--color-bg-alt); } .pb-schedule__item:hover { background: rgba(var(--color-primary-rgb), 0.04); } .pb-schedule__day { font-weight: 600; font-size: 0.9375rem; color: var(--color-text); display: flex; align-items: center; gap: 0.75rem; } .pb-schedule__day-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: rgba(var(--color-primary-rgb), 0.08); color: var(--color-primary); border-radius: var(--radius-sm); font-size: 0.75rem; } .pb-schedule__time { font-size: 0.9375rem; color: var(--color-text-light); font-variant-numeric: tabular-nums; font-weight: 500; } .pb-schedule__item--closed .pb-schedule__time { color: rgba(var(--color-primary-rgb), 0.3); font-style: italic; } .pb-schedule__item--today { background: rgba(var(--color-primary-rgb), 0.06); border-left: 3px solid var(--color-primary); } .pb-schedule__item--today .pb-schedule__day { color: var(--color-primary); } .pb-schedule__now-badge { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.15rem 0.5rem; background: var(--color-primary); color: #fff; border-radius: var(--radius-full); margin-left: 0.5rem; } /* ═══════════════════════════════════════════════════════════════════════════ BLOCK STYLES — LOCATION / MAP ═══════════════════════════════════════════════════════════════════════════ */ .pb-location { padding-top: var(--spacing-section); padding-bottom: var(--spacing-section); --pb-location-map-height: 350px; } /* Section header alignment per variant — split keeps it left-aligned */ .pb-location__split + .pb-section-header, .pb-location .pb-section-header--left { text-align: left; } /* ── Map container (height + filters + radius + shadow) ─────────────── */ .pb-location__map { height: var(--pb-location-map-height, 350px); background: var(--color-bg-alt); overflow: hidden; position: relative; } .pb-location__map iframe { width: 100%; height: 100%; border: 0; display: block; transition: filter 0.3s ease; } .pb-location__map--full { width: 100%; } .pb-location__map-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--color-text-light); text-align: center; background: var(--color-bg-alt); padding: 1rem; } .pb-location__map-empty svg { opacity: 0.55; } .pb-location__map-empty p { font-size: 0.95rem; margin: 0.6rem 0 0; max-width: 320px; } .pb-location__map-empty p strong { color: var(--color-text); font-weight: 600; } .pb-location__map-empty-hint { font-size: 0.825rem !important; opacity: 0.85; line-height: 1.5; margin-top: 0.35rem !important; } /* For split + card_overlay we want the header on the left, not centred. */ .pb-location--variant-split .pb-section-header, .pb-location--variant-card_overlay .pb-section-header { text-align: left; max-width: 1100px; margin-left: auto; margin-right: auto; } /* Radius modifiers (no border-radius for card_overlay — handled by wrapper) */ .pb-location--radius-none .pb-location__map { border-radius: 0; } .pb-location--radius-sm .pb-location__map { border-radius: 6px; } .pb-location--radius-md .pb-location__map { border-radius: 12px; } .pb-location--radius-lg .pb-location__map { border-radius: 20px; } .pb-location--radius-xl .pb-location__map { border-radius: 32px; } .pb-location--variant-card_overlay .pb-location__map { border-radius: 0; } /* Shadow modifiers — split, stacked, centered */ .pb-location--variant-split .pb-location__map, .pb-location--variant-stacked .pb-location__map, .pb-location--variant-centered .pb-location__map { box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08); } .pb-location--shadow-none.pb-location--variant-split .pb-location__map, .pb-location--shadow-none.pb-location--variant-stacked .pb-location__map, .pb-location--shadow-none.pb-location--variant-centered .pb-location__map { box-shadow: none; } .pb-location--shadow-md.pb-location--variant-split .pb-location__map, .pb-location--shadow-md.pb-location--variant-stacked .pb-location__map, .pb-location--shadow-md.pb-location--variant-centered .pb-location__map { box-shadow: 0 14px 40px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.08); } /* Map filters */ .pb-location--filter-grayscale .pb-location__map iframe { filter: grayscale(0.9) contrast(1.05); } .pb-location--filter-sepia .pb-location__map iframe { filter: sepia(0.6) saturate(1.1); } .pb-location--filter-muted .pb-location__map iframe { filter: saturate(0.55) brightness(1.02); } /* ── Info items (used by split, stacked, card_overlay) ──────────────── */ .pb-location__info { display: flex; flex-direction: column; gap: 1rem; } .pb-location__info-item { display: flex; gap: 0.875rem; align-items: flex-start; } .pb-location__info-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--color-primary-rgb), 0.10); color: var(--color-primary); border-radius: 10px; flex-shrink: 0; } .pb-location__info-icon svg { width: 18px; height: 18px; stroke: currentColor; } .pb-location__info-body { min-width: 0; } .pb-location__info-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-light); margin-bottom: 0.15rem; } .pb-location__info-value { font-size: 0.95rem; color: var(--color-text); font-weight: 500; word-break: break-word; } .pb-location__info-value a { color: inherit; text-decoration: none; } .pb-location__info-value a:hover { color: var(--color-primary); } /* Align modifier (center option) */ .pb-location--align-center .pb-location__info, .pb-location--align-center .pb-location__info-item { text-align: center; } .pb-location--align-center .pb-location__info-item { justify-content: center; } /* ── Transit info block ─────────────────────────────────────────────── */ .pb-location__transit { margin-top: 1rem; padding: 0.75rem 1.125rem; background: rgba(var(--color-primary-rgb), 0.05); border: 1px solid rgba(var(--color-primary-rgb), 0.16); border-radius: 8px; font-size: 0.875rem; color: var(--color-text-light); line-height: 1.5; } /* ── Action buttons ─────────────────────────────────────────────────── */ .pb-location__actions { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.25rem; } .pb-location--align-center .pb-location__actions { justify-content: center; } .pb-location__btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.125rem; border-radius: 8px; font-size: 0.875rem; font-weight: 600; text-decoration: none; cursor: pointer; border: none; transition: transform 0.15s, box-shadow 0.15s, background 0.15s; } .pb-location__btn svg { stroke: currentColor; } .pb-location__btn--primary { background: var(--color-primary); color: #fff; box-shadow: 0 4px 14px rgba(var(--color-primary-rgb), 0.25); } .pb-location__btn--primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(var(--color-primary-rgb), 0.32); } .pb-location__btn--ghost { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); } .pb-location__btn--ghost:hover { background: rgba(var(--color-primary-rgb), 0.08); } /* Pill / square button styles inherit from brand */ .pb-button-pill .pb-location__btn { border-radius: 999px; } .pb-button-square .pb-location__btn { border-radius: 0; } /* ── Variant: SPLIT (default — map left + info right) ────────────────── */ .pb-location__split { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; max-width: 1100px; margin: 0 auto; } @container page (min-width: 768px) { .pb-location__split { grid-template-columns: 1.1fr 1fr; gap: 2.5rem; } } /* ── Variant: STACKED (map full + info below) ───────────────────────── */ .pb-location--variant-stacked .pb-location__info--stacked { margin-top: 2rem; display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 900px; margin-left: auto; margin-right: auto; } @container page (min-width: 640px) { .pb-location--variant-stacked .pb-location__info--stacked { grid-template-columns: repeat(2, 1fr); gap: 1rem 2rem; } } .pb-location--variant-stacked .pb-location__transit, .pb-location--variant-stacked .pb-location__actions { grid-column: 1 / -1; } /* ── Variant: CARD OVERLAY (info card floats over the map) ──────────── */ .pb-location__overlay-wrap { position: relative; max-width: 1100px; margin: 0 auto; border-radius: 16px; overflow: hidden; } .pb-location--variant-card_overlay .pb-location__map { box-shadow: none; border-radius: 0; } .pb-location__overlay-card { background: var(--color-bg); padding: 1.75rem; border-radius: 14px; box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18), 0 8px 24px rgba(15, 23, 42, 0.10); width: calc(100% - 2rem); margin: -6rem 1rem 1rem; position: relative; z-index: 2; } @container page (min-width: 768px) { /* Pin to the top-left corner of the map so we cover the Google Maps info window that auto-opens with the address. The top-left corner of the card is squared (no radius) so it blends with the map edge; the other three corners stay rounded for the floating-card look. */ .pb-location__overlay-card { position: absolute; top: 0; left: 0; right: auto; width: min(440px, 50%); margin: 0; border-radius: 0 14px 14px 14px; padding: 1.875rem 1.75rem; } } /* ── Variant: CENTERED (map full, info centred, CTAs) ──────────────── */ .pb-location--variant-centered .pb-location__info--centered { margin-top: 2.25rem; max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; } .pb-location--variant-centered .pb-location__info-row { display: flex; flex-wrap: wrap; gap: 1.75rem; justify-content: center; margin-bottom: 1rem; } .pb-location--variant-centered .pb-location__info-row .pb-location__info-item { flex: 0 1 auto; text-align: left; } .pb-location--variant-centered .pb-location__actions { justify-content: center; } /* ── Variant: INFO ONLY (grid of icon cards, no map) ───────────────── */ .pb-location__cards { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 1100px; margin: 0 auto; } @container page (min-width: 640px) { .pb-location__cards--cols-2 { grid-template-columns: repeat(2, 1fr); } .pb-location__cards--cols-3 { grid-template-columns: repeat(2, 1fr); } .pb-location__cards--cols-4 { grid-template-columns: repeat(2, 1fr); } } @container page (min-width: 1024px) { .pb-location__cards--cols-3 { grid-template-columns: repeat(3, 1fr); } .pb-location__cards--cols-4 { grid-template-columns: repeat(4, 1fr); } } .pb-location__card { display: block; background: var(--color-bg); padding: 1.5rem 1.25rem; border-radius: 12px; border: 1px solid rgba(var(--color-text-rgb), 0.08); box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04); text-align: center; color: inherit; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; } a.pb-location__card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08); } .pb-location__card-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(var(--color-primary-rgb), 0.10); color: var(--color-primary); margin-bottom: 0.875rem; } .pb-location__card-icon svg { width: 26px; height: 26px; stroke: currentColor; } .pb-location__card-label { font-size: 0.8rem; font-weight: 600; color: var(--color-text); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.25rem; } .pb-location__card-value { font-size: 0.95rem; color: var(--color-text-light); word-break: break-word; } .pb-location--variant-info_only .pb-location__transit { max-width: 720px; margin: 1.5rem auto 0; text-align: center; } .pb-location--variant-info_only .pb-location__actions { justify-content: center; margin-top: 1.25rem; } /* ═══════════════════════════════════════════════════════════════════════════ BLOCK STYLES — CONTACT FORM ═══════════════════════════════════════════════════════════════════════════ */ .pb-contact { padding-top: var(--spacing-section); padding-bottom: var(--spacing-section); } .pb-contact__layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @container page (min-width: 768px) { .pb-contact__layout { grid-template-columns: 1fr 1.2fr; gap: 3.5rem; } } /* * Variante "solo": cuando el negocio no tiene direccion/telefono/email, * la columna izquierda (info side) se omite. El form se centra a una sola * columna con max-width controlada para no quedar a tope de ancho. * * Tambien aplicamos :has() como red de seguridad para casos en que el * renderer React (editor) omite la info side: si el layout solo contiene * un form como unico hijo, lo centramos automaticamente. */ .pb-contact__layout--solo, .pb-contact__layout:has(> .pb-contact__form:only-child) { grid-template-columns: 1fr !important; max-width: 640px; margin: 0 auto; } @container page (min-width: 768px) { .pb-contact__layout--solo, .pb-contact__layout:has(> .pb-contact__form:only-child) { grid-template-columns: 1fr !important; } } .pb-contact__form { display: flex; flex-direction: column; gap: 1.25rem; } .pb-contact__form-row { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @container page (min-width: 640px) { .pb-contact__form-row--2 { grid-template-columns: repeat(2, 1fr); } } .pb-contact__field { position: relative; } .pb-contact__label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--color-text); margin-bottom: 0.5rem; } .pb-contact__input, .pb-contact__textarea { width: 100%; padding: 0.875rem 1rem; font-family: var(--font-body); font-size: 0.9375rem; color: var(--color-text); background: var(--color-bg-alt); border: 2px solid rgba(var(--color-text-rgb),0.1); border-radius: var(--radius-sm); outline: none; transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease; -webkit-appearance: none; appearance: none; } .pb-contact__input::placeholder, .pb-contact__textarea::placeholder { color: rgba(var(--color-text-rgb),0.35); } .pb-contact__input:hover, .pb-contact__textarea:hover { border-color: rgba(var(--color-text-rgb),0.2); } .pb-contact__input:focus, .pb-contact__textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1); background: var(--color-bg-alt); } .pb-contact__textarea { resize: vertical; min-height: 140px; } .pb-contact__submit { margin-top: 0.5rem; align-self: flex-start; } /* Success / error states */ .pb-contact__success { padding: 1rem 1.25rem; background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.3); border-radius: var(--radius-sm); color: #34d399; font-size: 0.9375rem; display: flex; align-items: center; gap: 0.75rem; } .pb-contact__error { padding: 1rem 1.25rem; background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: var(--radius-sm); color: #f87171; font-size: 0.9375rem; } /* ═══════════════════════════════════════════════════════════════════════════ BLOCK STYLES — PRICING ═══════════════════════════════════════════════════════════════════════════ */ .pb-pricing { padding-top: var(--spacing-section); padding-bottom: var(--spacing-section); } .pb-pricing__grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1.5rem; align-items: stretch; } @container page (min-width: 640px) { .pb-pricing__grid { grid-template-columns: repeat(2, 1fr); } } @container page (min-width: 1024px) { .pb-pricing__grid { grid-template-columns: repeat(3, 1fr); } } .pb-pricing__card { background: var(--color-bg-alt, var(--color-bg)); border-radius: var(--radius-md); padding: 2.5rem 2rem; text-align: center; position: relative; overflow: hidden; border: 2px solid rgba(var(--color-text-rgb),0.08); transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 400ms ease, border-color 300ms ease; display: flex; flex-direction: column; } .pb-pricing__card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(var(--color-text-rgb),0.1); } .pb-pricing__card--featured { border-color: var(--color-primary); box-shadow: 0 8px 30px rgba(var(--color-primary-rgb), 0.12); transform: scale(1.03); } .pb-pricing__card--featured:hover { transform: scale(1.03) translateY(-4px); } .pb-pricing__card-badge { position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 0.35rem 1.25rem; background: var(--color-primary); color: #fff; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 0 0 var(--radius-sm) var(--radius-sm); } .pb-pricing__name { font-size: 1.1rem; font-weight: 600; color: var(--color-text); margin-bottom: 0.5rem; margin-top: 0.5rem; } .pb-pricing__description { font-size: 0.875rem; color: var(--color-text-light); margin-bottom: 1.5rem; line-height: 1.6; } .pb-pricing__price { margin-bottom: 2rem; } .pb-pricing__amount { font-size: 3rem; font-weight: 800; color: var(--color-text); letter-spacing: -0.04em; line-height: 1; } .pb-pricing__currency { font-size: 1.5rem; font-weight: 600; vertical-align: super; } .pb-pricing__period { font-size: 0.9375rem; color: var(--color-text-light); font-weight: 400; margin-left: 0.25rem; } .pb-pricing__features { list-style: none; padding: 0; margin-bottom: 2rem; text-align: left; flex: 1; } .pb-pricing__feature { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.5rem 0; font-size: 0.9375rem; color: var(--color-text); } .pb-pricing__feature i { color: var(--color-primary); font-size: 0.8125rem; margin-top: 0.3rem; flex-shrink: 0; } .pb-pricing__feature--disabled { color: var(--color-text-light); opacity: 0.5; } .pb-pricing__feature--disabled i { color: var(--color-text-light); } .pb-pricing__action { margin-top: auto; } /* ═══════════════════════════════════════════════════════════════════════════ BLOCK STYLES — COUNTER / STATS ═══════════════════════════════════════════════════════════════════════════ */ .pb-counter { padding-top: var(--spacing-section); padding-bottom: var(--spacing-section); } .pb-counter__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } @container page (min-width: 768px) { .pb-counter__grid { grid-template-columns: repeat(4, 1fr); } } .pb-counter__item { text-align: center; padding: 1.5rem 1rem; } .pb-counter__number { font-family: var(--font-heading); font-size: clamp(2.5rem, 5cqw, 3.5rem); font-weight: 800; color: var(--color-primary); letter-spacing: -0.04em; line-height: 1.1; margin-bottom: 0.5rem; } .pb-counter__suffix { font-size: 0.6em; font-weight: 600; opacity: 0.8; } .pb-counter__label { font-size: 0.9375rem; color: var(--color-text-light); font-weight: 500; } .pb-counter__icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: rgba(var(--color-primary-rgb), 0.08); color: var(--color-primary); border-radius: var(--radius-md); font-size: 1.25rem; margin: 0 auto 1rem; } /* Divider between stats */ .pb-counter__grid--divided .pb-counter__item { position: relative; } .pb-counter__grid--divided .pb-counter__item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 20%; height: 60%; width: 1px; background: rgba(var(--color-text-rgb),0.1); } /* ═══════════════════════════════════════════════════════════════════════════ BLOCK STYLES — STEPS / PROCESS ═══════════════════════════════════════════════════════════════════════════ */ .pb-steps { padding-top: var(--spacing-section); padding-bottom: var(--spacing-section); } .pb-steps__list { display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: 900px; margin: 0 auto; position: relative; } @container page (min-width: 768px) { .pb-steps__list { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } } @container page (min-width: 1024px) { .pb-steps__list { grid-template-columns: repeat(4, 1fr); } } /* Connector line */ .pb-steps__list--connected { position: relative; } @container page (min-width: 768px) { .pb-steps__list--connected::before { content: ''; position: absolute; top: 32px; left: calc(50px + 1rem); right: calc(50px + 1rem); height: 2px; background: linear-gradient(90deg, var(--color-primary), rgba(var(--color-primary-rgb), 0.2)); z-index: 0; } } .pb-steps__item { text-align: center; position: relative; z-index: 1; } .pb-steps__number { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; border-radius: var(--radius-full); background: var(--color-primary); color: #fff; font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), 0.25); } .pb-steps__icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; border-radius: var(--radius-md); background: rgba(var(--color-primary-rgb), 0.08); color: var(--color-primary); font-size: 1.35rem; } .pb-steps__title { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--color-text); } .pb-steps__desc { font-size: 0.9375rem; color: var(--color-text-light); line-height: 1.6; max-width: 260px; margin: 0 auto; } /* Vertical layout — when registry style.style = 'vertical'. Mirrors StepsBlock.tsx: items stacked, connector becomes a vertical line. */ .pb-steps--vertical .pb-steps__list, .pb-steps__list--vertical { grid-template-columns: 1fr; max-width: 640px; gap: 2rem; } @container page (min-width: 768px) { .pb-steps--vertical .pb-steps__list, .pb-steps__list--vertical { grid-template-columns: 1fr; /* override the horizontal media query */ gap: 2.25rem; } } @container page (min-width: 1024px) { .pb-steps--vertical .pb-steps__list, .pb-steps__list--vertical { grid-template-columns: 1fr; } } .pb-steps--vertical .pb-steps__item, .pb-steps__list--vertical .pb-steps__item { display: grid; /* The PHP template renders 3 children (number, title, desc) directly inside .pb-steps__item with no wrapper. Use grid-template-areas so number spans both rows and title/desc stack in column 2 — avoids the desc wrapping into column 1 with a narrow 64px column. */ grid-template-columns: 64px 1fr; grid-template-areas: "number title" "number desc"; column-gap: 1.25rem; row-gap: 4px; align-items: start; text-align: left; } .pb-steps--vertical .pb-steps__number, .pb-steps--vertical .pb-steps__icon, .pb-steps__list--vertical .pb-steps__number, .pb-steps__list--vertical .pb-steps__icon { margin: 0; grid-area: number; align-self: start; } .pb-steps--vertical .pb-steps__title, .pb-steps__list--vertical .pb-steps__title { grid-area: title; margin: 0; } .pb-steps--vertical .pb-steps__desc, .pb-steps__list--vertical .pb-steps__desc { grid-area: desc; max-width: none; margin: 0; } /* Vertical connector — visible only when both vertical + connected */ .pb-steps--vertical .pb-steps__list--connected::before, .pb-steps__list--vertical.pb-steps__list--connected::before { content: ''; position: absolute; top: 52px; bottom: 52px; left: 25px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--pb-steps-connector, var(--color-primary)), rgba(var(--color-primary-rgb), 0.2)); z-index: 0; } /* If author set a custom connector color, also paint the horizontal variant */ .pb-steps__list--connected::before { background: linear-gradient(90deg, var(--pb-steps-connector, var(--color-primary)), rgba(var(--color-primary-rgb), 0.2)); } /* ═══════════════════════════════════════════════════════════════════════════ BLOCK STYLES — CTA ═══════════════════════════════════════════════════════════════════════════ */ .pb-cta { position: relative; padding: clamp(4rem, 8cqw, 7rem) 0; overflow: hidden; } .pb-cta--primary { background: var(--color-primary); color: #fff; } .pb-cta--gradient { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); color: #fff; } .pb-cta--dark { background: var(--color-footer-bg, #111827); color: #fff; } .pb-cta--image { color: #fff; } .pb-cta__bg { position: absolute; inset: 0; z-index: 0; } .pb-cta__bg img { width: 100%; height: 100%; object-fit: cover; } .pb-cta__bg-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.55); } .pb-cta__content { position: relative; z-index: 1; text-align: center; max-width: 700px; margin: 0 auto; } .pb-cta__title { font-size: clamp(1.75rem, 4cqw, 2.75rem); font-weight: 700; margin-bottom: 1rem; color: inherit; } .pb-cta__text { font-size: 1.1rem; opacity: 0.85; line-height: 1.7; margin-bottom: 2rem; max-width: 540px; margin-left: auto; margin-right: auto; } .pb-cta__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* Decorative pattern */ .pb-cta__decoration { position: absolute; pointer-events: none; z-index: 0; } .pb-cta__decoration--circles { width: 300px; height: 300px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.1); top: -80px; right: -80px; } .pb-cta__decoration--circles::after { content: ''; position: absolute; inset: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.08); } /* ═══════════════════════════════════════════════════════════════════════════ BLOCK STYLES — VIDEO ═══════════════════════════════════════════════════════════════════════════ */ .pb-video { padding-top: var(--spacing-section); padding-bottom: var(--spacing-section); } .pb-video__wrapper { max-width: 900px; margin: 0 auto; position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); } /* El wrapper ya define el aspect-ratio con padding-top, asi que el embed debe rellenarlo en position:absolute. Los !important anulan inline styles del JS antiguo que algun navegador pueda tener cacheado (creaba el div con position:relative + padding-bottom:56.25% y duplicaba la altura). */ .pb-video__embed { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; padding-bottom: 0 !important; overflow: hidden; } .pb-video__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } .pb-video__thumbnail { position: relative; cursor: pointer; aspect-ratio: 16 / 9; } .pb-video__thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; } .pb-video__thumbnail:hover img { transform: scale(1.03); } .pb-video__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.95); border-radius: 50%; box-shadow: 0 4px 24px rgba(0,0,0,0.2); transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 300ms ease; color: var(--color-primary); font-size: 1.5rem; padding-left: 4px; /* visual center for play icon */ } .pb-video__thumbnail:hover .pb-video__play { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 8px 36px rgba(0,0,0,0.25); } /* ═══════════════════════════════════════════════════════════════════════════ BLOCK STYLES — BANNER ═══════════════════════════════════════════════════════════════════════════ */ .pb-banner { padding: 1.25rem 0; } .pb-banner__inner { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1rem 1.5rem; border-radius: var(--radius-md); font-size: 0.9375rem; font-weight: 500; text-align: center; flex-wrap: wrap; /* Left accent bar for visual weight */ border-left: 4px solid currentColor; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .pb-banner--info { background: rgba(59, 130, 246, 0.14); color: #1e40af; border: 1px solid rgba(59, 130, 246, 0.35); border-left: 4px solid #3b82f6; } .pb-banner--success { background: rgba(16, 185, 129, 0.14); color: #065f46; border: 1px solid rgba(16, 185, 129, 0.35); border-left: 4px solid #10b981; } .pb-banner--warning { background: rgba(245, 158, 11, 0.16); color: #92400e; border: 1px solid rgba(245, 158, 11, 0.4); border-left: 4px solid #f59e0b; } .pb-banner--primary { background: rgba(var(--color-primary-rgb), 0.14); color: var(--color-primary-dark); border: 1px solid rgba(var(--color-primary-rgb), 0.35); border-left: 4px solid var(--color-primary); } .pb-banner--solid { background: var(--color-primary); color: #fff; border: none; } .pb-banner__icon { font-size: 1.1rem; flex-shrink: 0; } .pb-banner__text { flex: 1; min-width: 0; } /* ═══════════════════════════════════════════════════════════════════════════ BLOCK STYLES — PROMO ═══════════════════════════════════════════════════════════════════════════ */ .pb-promo { padding-top: var(--spacing-section); padding-bottom: var(--spacing-section); } .pb-promo__card { display: grid; grid-template-columns: 1fr; gap: 0; background: var(--color-bg); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); } @container page (min-width: 768px) { .pb-promo__card { grid-template-columns: 1fr 1fr; } /* Variante sin imagen: contenido a 1 columna centrada */ .pb-promo__card--no-image { grid-template-columns: 1fr !important; max-width: 720px; margin-left: auto; margin-right: auto; } } .pb-promo__image { aspect-ratio: 16 / 10; overflow: hidden; } @container page (min-width: 768px) { .pb-promo__image { aspect-ratio: auto; min-height: 360px; } } .pb-promo__image img { width: 100%; height: 100%; object-fit: cover; } .pb-promo__content { padding: clamp(2rem, 4cqw, 3.5rem); display: flex; flex-direction: column; justify-content: center; } .pb-promo__label { display: inline-block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-primary); margin-bottom: 1rem; } .pb-promo__title { font-size: clamp(1.5rem, 3cqw, 2.25rem); font-weight: 700; margin-bottom: 1rem; letter-spacing: -0.02em; } .pb-promo__text { font-size: 1rem; color: var(--color-text-light); line-height: 1.7; margin-bottom: 2rem; } .pb-promo__price { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 2rem; } .pb-promo__price-current { font-size: 2rem; font-weight: 800; color: var(--color-primary); letter-spacing: -0.03em; } .pb-promo__price-old { font-size: 1.1rem; color: var(--color-text-light); text-decoration: line-through; } .pb-promo__price-badge { padding: 0.25rem 0.75rem; background: rgba(239, 68, 68, 0.1); color: #dc2626; font-size: 0.8125rem; font-weight: 600; border-radius: var(--radius-full); } /* ═══════════════════════════════════════════════════════════════════════════ BLOCK STYLES — DIVIDER ═══════════════════════════════════════════════════════════════════════════ */ .pb-divider { padding: 1.5rem 0; } .pb-divider__line { border: none; height: 0; margin: 0; } .pb-divider--solid .pb-divider__line { border-top: 1px solid rgba(var(--color-text-rgb),0.1); } .pb-divider--dashed .pb-divider__line { border-top: 2px dashed rgba(var(--color-text-rgb),0.12); } .pb-divider--dotted .pb-divider__line { border-top: 3px dotted rgba(var(--color-text-rgb),0.12); } .pb-divider--gradient .pb-divider__line { height: 2px; background: linear-gradient(90deg, transparent, var(--color-primary), transparent); } .pb-divider--wave { position: relative; overflow: hidden; height: 20px; } .pb-divider--wave svg { position: absolute; width: 100%; height: 100%; } .pb-divider--thick .pb-divider__line { height: 4px; background: var(--color-primary); border-radius: 2px; max-width: 80px; } .pb-divider--center .pb-divider__line { margin-left: auto; margin-right: auto; } .pb-divider--icon { display: flex; align-items: center; gap: 1rem; } .pb-divider--icon::before, .pb-divider--icon::after { content: ''; flex: 1; height: 1px; background: rgba(0,0,0,0.08); } .pb-divider__icon { color: var(--color-primary); font-size: 1rem; flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════════════════ BLOCK STYLES — COLUMNS ═══════════════════════════════════════════════════════════════════════════ */ .pb-columns { padding-top: var(--spacing-section); padding-bottom: var(--spacing-section); } .pb-columns__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; } @container page (min-width: 768px) { .pb-columns__grid--2 { grid-template-columns: repeat(2, 1fr); } .pb-columns__grid--3 { grid-template-columns: repeat(3, 1fr); } .pb-columns__grid--4 { grid-template-columns: repeat(2, 1fr); } .pb-columns__grid--1-2 { grid-template-columns: 1fr 2fr; } .pb-columns__grid--2-1 { grid-template-columns: 2fr 1fr; } } @container page (min-width: 1024px) { .pb-columns__grid--4 { grid-template-columns: repeat(4, 1fr); } } .pb-columns__col { min-width: 0; } /* ═══════════════════════════════════════════════════════════════════════════ BLOCK STYLES — TEXT (Rich text) ═══════════════════════════════════════════════════════════════════════════ */ .pb-text { padding-top: var(--spacing-section); padding-bottom: var(--spacing-section); } .pb-text__content { max-width: 800px; } .pb-text__content--center { margin-left: auto; margin-right: auto; text-align: center; } .pb-text__content h1, .pb-text__content h2, .pb-text__content h3, .pb-text__content h4, .pb-text__content h5, .pb-text__content h6 { margin-top: 2em; margin-bottom: 0.75em; } .pb-text__content h1:first-child, .pb-text__content h2:first-child, .pb-text__content h3:first-child { margin-top: 0; } .pb-text__content p { margin-bottom: 1.25em; line-height: 1.75; } .pb-text__content ul, .pb-text__content ol { margin-bottom: 1.25em; padding-left: 1.5em; } .pb-text__content li { margin-bottom: 0.5em; line-height: 1.65; } .pb-text__content blockquote { margin: 1.5em 0; padding: 1.25rem 1.5rem; border-left: 4px solid var(--color-primary); background: rgba(var(--color-primary-rgb), 0.04); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-style: italic; color: var(--color-text-light); } .pb-text__content img { border-radius: var(--radius-md); margin: 1.5em 0; } .pb-text__content a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; } .pb-text__content a:hover { color: var(--color-primary-dark); } .pb-text__content hr { margin: 2em 0; border: none; height: 1px; background: rgba(0,0,0,0.08); } .pb-text__content code { font-size: 0.875em; padding: 0.15em 0.4em; background: rgba(0,0,0,0.04); border-radius: 4px; font-family: 'SFMono-Regular', Consolas, monospace; } .pb-text__content pre { margin: 1.5em 0; padding: 1.25rem; background: #1e293b; color: #e2e8f0; border-radius: var(--radius-sm); overflow-x: auto; } .pb-text__content pre code { background: none; padding: 0; color: inherit; } /* ═══════════════════════════════════════════════════════════════════════════ BLOCK STYLES — IMAGE ═══════════════════════════════════════════════════════════════════════════ */ .pb-image { padding-top: var(--spacing-section); padding-bottom: var(--spacing-section); } .pb-image__wrapper { position: relative; border-radius: var(--radius-md); overflow: hidden; line-height: 0; } .pb-image__wrapper--shadow { box-shadow: var(--shadow-lg); } .pb-image__wrapper img { width: 100%; height: auto; display: block; transition: transform 500ms ease; } .pb-image__wrapper--zoom:hover img { transform: scale(1.03); } .pb-image__caption { text-align: center; padding: 0.75rem 0 0; font-size: 0.875rem; color: var(--color-text-light); line-height: 1.5; } /* Full-bleed image */ .pb-image--fullbleed { padding-left: 0; padding-right: 0; } .pb-image--fullbleed .pb-image__wrapper { border-radius: 0; } /* ═══════════════════════════════════════════════════════════════════════════ BLOCK STYLES — SPACER ═══════════════════════════════════════════════════════════════════════════ */ .pb-spacer { /* Height is set inline by the block */ } /* ═══════════════════════════════════════════════════════════════════════════ BLOCK STYLES — CUSTOM HTML ═══════════════════════════════════════════════════════════════════════════ */ .pb-custom-html { padding-top: var(--spacing-section); padding-bottom: var(--spacing-section); } .pb-custom-html__content { /* Allow custom HTML to have its own styling */ } .pb-custom-html__content iframe { max-width: 100%; border: none; } /* ═══════════════════════════════════════════════════════════════════════════ LIGHTBOX ═══════════════════════════════════════════════════════════════════════════ */ .pb-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 300ms ease, visibility 300ms ease; cursor: zoom-out; } .pb-lightbox--open { opacity: 1; visibility: visible; } .pb-lightbox__content { max-width: 90cqw; max-height: 85vh; position: relative; } .pb-lightbox__img { max-width: 90cqw; max-height: 85vh; object-fit: contain; border-radius: 4px; cursor: default; transform: scale(0.95); transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1); } .pb-lightbox--open .pb-lightbox__img { transform: scale(1); } .pb-lightbox__close { position: absolute; top: 1.25rem; right: 1.25rem; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.1); border: none; border-radius: 50%; color: #fff; font-size: 1.25rem; cursor: pointer; transition: background-color 200ms ease, transform 200ms ease; z-index: 10; } .pb-lightbox__close:hover { background: rgba(255,255,255,0.2); transform: scale(1.1); } .pb-lightbox__prev, .pb-lightbox__next { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.1); border: none; border-radius: 50%; color: #fff; font-size: 1.1rem; cursor: pointer; transition: background-color 200ms ease, transform 200ms ease; z-index: 10; } .pb-lightbox__prev { left: 1rem; } .pb-lightbox__next { right: 1rem; } .pb-lightbox__prev:hover, .pb-lightbox__next:hover { background: rgba(255,255,255,0.2); transform: translateY(-50%) scale(1.1); } .pb-lightbox__counter { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.6); font-size: 0.875rem; font-variant-numeric: tabular-nums; } /* ═══════════════════════════════════════════════════════════════════════════ UTILITIES — COLOR VARIANTS (for blocks with dark/colored backgrounds) ═══════════════════════════════════════════════════════════════════════════ */ .pb-section--dark { background: var(--color-footer-bg, #111827); color: rgba(255,255,255,0.85); } .pb-section--dark h1, .pb-section--dark h2, .pb-section--dark h3, .pb-section--dark h4, .pb-section--dark h5, .pb-section--dark h6 { color: #fff; } .pb-section--dark .pb-section-label { background: rgba(255,255,255,0.08); color: var(--color-primary-light); } .pb-section--dark .pb-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); } .pb-section--dark .pb-card:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.12); } .pb-section--dark .pb-card__text, .pb-section--dark .pb-footer__link, .pb-section--dark .pb-lead { color: rgba(255,255,255,0.6); } /* Counter */ .pb-section--dark .pb-counter__number, .pb-section--dark .pb-counter__suffix { color: #fff; } .pb-section--dark .pb-counter__label { color: rgba(255,255,255,0.65); } .pb-section--dark .pb-counter__icon { color: rgba(255,255,255,0.85); } .pb-section--dark .pb-counter__grid--divided > .pb-counter__item + .pb-counter__item { border-color: rgba(255,255,255,0.12); } /* Steps */ .pb-section--dark .pb-steps__title, .pb-section--dark .pb-steps__step-title, .pb-section--dark .pb-steps__number { color: #fff; } .pb-section--dark .pb-steps__description, .pb-section--dark .pb-steps__step-description, .pb-section--dark .pb-steps__desc, .pb-section--dark .pb-steps__connector { color: rgba(255,255,255,0.65); } .pb-section--dark .pb-steps__icon { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.08); } /* FAQ */ .pb-section--dark .pb-faq__item { border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); } .pb-section--dark .pb-faq__question { color: #fff; } .pb-section--dark .pb-faq__answer, .pb-section--dark .pb-faq__icon { color: rgba(255,255,255,0.7); } /* Contact / Quote form */ .pb-section--dark .pb-contact__label { color: rgba(255,255,255,0.85); } .pb-section--dark .pb-location__info-label { color: rgba(255,255,255,0.55); } .pb-section--dark .pb-location__info-value, .pb-section--dark .pb-location__info-value a { color: rgba(255,255,255,0.92); } .pb-section--dark .pb-location__info-icon { color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.08); } .pb-section--dark .pb-contact__success { color: #d1fae5; background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.4); } .pb-section--dark .pb-contact__error { color: #fecaca; background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.4); } /* CTA */ .pb-section--dark .pb-cta__title { color: #fff; } .pb-section--dark .pb-cta__subtitle { color: rgba(255,255,255,0.7); } /* Reviews */ .pb-section--dark .pb-reviews__name, .pb-section--dark .pb-reviews__rating, .pb-section--dark .pb-reviews__stat-value { color: #fff; } .pb-section--dark .pb-reviews__text, .pb-section--dark .pb-reviews__date, .pb-section--dark .pb-reviews__stat-label { color: rgba(255,255,255,0.7); } .pb-section--dark .pb-reviews__card, .pb-section--dark .pb-reviews__stats { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); } /* Team */ .pb-section--dark .pb-team__name { color: #fff; } .pb-section--dark .pb-team__specialty, .pb-section--dark .pb-team__description { color: rgba(255,255,255,0.7); } /* Services */ .pb-section--dark .pb-services__name, .pb-section--dark .pb-services__price { color: #fff; } .pb-section--dark .pb-services__description, .pb-section--dark .pb-services__duration { color: rgba(255,255,255,0.7); } .pb-section--dark .pb-services__card { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); } .pb-section--dark .pb-services__card:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); } /* Text block */ .pb-section--dark .pb-text-block, .pb-section--dark .pb-text-block p, .pb-section--dark .pb-text-block li { color: rgba(255,255,255,0.85); } /* Coverage areas */ .pb-section--dark .pb-coverage__chip, .pb-section--dark .pb-coverage__card { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.92); } .pb-section--dark .pb-coverage__card-name { color: #fff; } .pb-section--dark .pb-coverage__card-desc, .pb-section--dark .pb-coverage__list-desc, .pb-section--dark .pb-coverage__note { color: rgba(255,255,255,0.65); } /* Section header subtitle inside dark blocks */ .pb-section--dark .pb-section-header p { color: rgba(255,255,255,0.7); } /* Services variants: descriptions, durations y small price text en bloques dark */ .pb-section--dark .pb-services__card-desc, .pb-section--dark .pb-services__card-duration, .pb-section--dark .pb-services__list-desc, .pb-section--dark .pb-services__list-duration, .pb-section--dark .pb-services__pricing-desc, .pb-section--dark .pb-services__pricing-duration, .pb-section--dark .pb-services__compact-duration, .pb-section--dark .pb-services__showcase-desc, .pb-section--dark .pb-services__showcase-duration, .pb-section--dark .pb-services__showcase-item-duration, .pb-section--dark .pb-services__minimal-desc, .pb-section--dark .pb-services__minimal-duration { color: rgba(255,255,255,0.7); } .pb-section--dark .pb-services__card-price small { color: rgba(255,255,255,0.6); } /* Otros bloques con texto secundario */ .pb-section--dark .pb-team__bio, .pb-section--dark .pb-team__list-bio, .pb-section--dark .pb-reviews__author-date, .pb-section--dark .pb-reviews__response-text, .pb-section--dark .pb-reviews__featured-date, .pb-section--dark .pb-promo__text, .pb-section--dark .pb-promo__price-old, .pb-section--dark .pb-stars-count, .pb-section--dark .pb-schedule__time, .pb-section--dark .pb-newsletter__subtitle, .pb-section--dark .pb-logocloud__subtitle { color: rgba(255,255,255,0.65); } /* Generic typography fallback (anything we forgot) */ .pb-section--dark p, .pb-section--dark li, .pb-section--dark span:not(.pb-section-label):not([class*="badge"]):not([class*="btn"]):not([class*="chip"]) { color: inherit; } .pb-section--primary { background: var(--color-primary); color: rgba(255,255,255,0.9); } .pb-section--primary h1, .pb-section--primary h2, .pb-section--primary h3, .pb-section--primary h4 { color: #fff; } .pb-section--gradient { background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); color: rgba(255,255,255,0.9); } .pb-section--gradient h1, .pb-section--gradient h2, .pb-section--gradient h3, .pb-section--gradient h4 { color: #fff; } /* ═══════════════════════════════════════════════════════════════════════════ UTILITIES — MISC ═══════════════════════════════════════════════════════════════════════════ */ /* Decorative blob shapes */ .pb-decoration-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.08; pointer-events: none; z-index: 0; } .pb-decoration-blob--1 { width: 400px; height: 400px; background: var(--color-primary); top: -10%; right: -5%; } .pb-decoration-blob--2 { width: 300px; height: 300px; background: var(--color-secondary); bottom: -10%; left: -5%; } /* Gradient text */ .pb-text-gradient { background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Truncate text */ .pb-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pb-line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pb-line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Aspect ratio helpers */ .pb-aspect-video { aspect-ratio: 16 / 9; } .pb-aspect-square { aspect-ratio: 1; } .pb-aspect-portrait { aspect-ratio: 3 / 4; } /* Visually hidden but accessible */ .pb-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* No scroll when modal/lightbox open */ .pb-no-scroll { overflow: hidden !important; } /* Skeleton loading placeholder */ .pb-skeleton { background: linear-gradient(90deg, var(--color-bg-alt) 25%, rgba(0,0,0,0.04) 50%, var(--color-bg-alt) 75%); background-size: 200% 100%; animation: pbSkeleton 1.5s ease-in-out infinite; border-radius: var(--radius-sm); } @keyframes pbSkeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Badge / tag */ .pb-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.75rem; font-size: 0.75rem; font-weight: 600; border-radius: var(--radius-full); background: rgba(var(--color-primary-rgb), 0.08); color: var(--color-primary); white-space: nowrap; } .pb-badge--solid { background: var(--color-primary); color: #fff; } /* Overlay (for modals, drawers) */ .pb-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity 300ms ease, visibility 300ms ease; } .pb-overlay--visible { opacity: 1; visibility: visible; } /* ═══════════════════════════════════════════════════════════════════════════ RESPONSIVE ADJUSTMENTS ═══════════════════════════════════════════════════════════════════════════ */ /* Ensure touch targets are at least 44px */ @media (pointer: coarse) { .pb-nav__link { min-height: 44px; } .pb-faq__trigger { min-height: 48px; } .pb-btn { min-height: 44px; } } /* ── Mobile improvements (max-width: 639px) ── */ @container page (max-width: 639px) { /* Hero: stack buttons and scale decorations */ .pb-hero { min-height: 75vh; } .pb-hero--full { min-height: 90vh; } .pb-hero__actions { flex-direction: column; align-items: center; } .pb-hero__actions .pb-btn { width: 100%; max-width: 320px; } .pb-hero__subtitle { margin-bottom: 1.75rem; } .pb-hero__decoration--circle { width: 200px; height: 200px; top: -50px; right: -50px; } .pb-hero__decoration--dots { width: 100px; height: 100px; } /* Counter: hide dividers on mobile, tighter padding */ .pb-counter__grid--divided .pb-counter__item::after { display: none; } .pb-counter__item { padding: 1rem 0.5rem; } /* Pricing: reduce padding */ .pb-pricing__card { padding: 2rem 1.5rem; } .pb-pricing__amount { font-size: 2.5rem; } /* Steps: hide connector line on mobile */ .pb-steps__list--connected::before { display: none; } /* Back-to-top: smaller and closer to edge */ .pb-back-to-top { bottom: 1.25rem; right: 1.25rem; width: 40px; height: 40px; font-size: 0.875rem; } /* WhatsApp: smaller on mobile */ .pb-whatsapp-float { bottom: 1.25rem; right: 1.25rem; width: 48px; height: 48px; } .pb-whatsapp-float svg { width: 24px; height: 24px; } .pb-body--has-whatsapp .pb-back-to-top { bottom: calc(1.25rem + 48px + 0.5rem); } /* Reduce section spacing on mobile */ .pb-services, .pb-team, .pb-reviews, .pb-faq, .pb-pricing, .pb-counter, .pb-steps, .pb-location, .pb-contact, .pb-gallery, .pb-text, .pb-promo, .pb-image { padding-top: clamp(2.5rem, 5cqw, 4rem); padding-bottom: clamp(2.5rem, 5cqw, 4rem); } /* CTA: reduce padding and decorations */ .pb-cta { padding: clamp(3rem, 6cqw, 5rem) 0; } .pb-cta__decoration--circles { width: 150px; height: 150px; top: -40px; right: -40px; } /* Footer schedule: smaller font on mobile */ .pb-footer__schedule-item { font-size: 0.8125rem; gap: 0.5rem; } /* Reviews: less padding */ .pb-reviews__card { padding: 1.5rem; } .pb-reviews__quote-icon { font-size: 2rem; top: 0.75rem; right: 1rem; } /* Section headers: less bottom margin */ .pb-section-header { margin-bottom: clamp(1.5rem, 3cqw, 2.5rem); } /* Team: smaller avatars and tighter layout */ .pb-team__avatar, .pb-team__avatar-placeholder { width: 100px; height: 100px; } .pb-team__avatar-placeholder { font-size: 2rem; } .pb-team__member { padding: 1.5rem 1rem; } /* Contact form: full-width button */ .pb-contact__submit { width: 100%; align-self: stretch; } /* Promo: less padding */ .pb-promo__content { padding: clamp(1.5rem, 3cqw, 2.5rem); } /* FAQ: tighter padding */ .pb-faq__trigger { padding: 1rem 1.25rem; } .pb-faq__answer-inner { padding: 0 1.25rem 1.25rem; } /* Cards: less hover displacement on touch */ .pb-card:hover, .pb-services__card:hover, .pb-team__member:hover, .pb-reviews__card:hover, .pb-pricing__card:hover { transform: none; } /* Location layout: stack vertically */ .pb-location__map { aspect-ratio: 4 / 3; } } /* Small phones */ @container page (max-width: 374px) { .pb-hero__title { font-size: 2rem; } .pb-hero__actions .pb-btn { max-width: 100%; } .pb-counter__grid { grid-template-columns: 1fr; } .pb-pricing__card { padding: 1.5rem 1rem; } .pb-footer__grid { gap: 2rem; } .pb-btn--lg { padding: 0.875rem 1.75rem; font-size: 1rem; } } /* Tablet adjustments */ @container page (min-width: 768px) and (max-width: 1023px) { .pb-hero { min-height: 70vh; } .pb-footer__grid { grid-template-columns: repeat(2, 1fr); } } /* Desktop+ */ @container page (min-width: 1280px) { .pb-container { padding-left: 2.5rem; padding-right: 2.5rem; } .pb-hero { min-height: 92vh; } .pb-nav__inner { padding: 0 2.5rem; } } /* Safe area for notched devices (iPhone X+) */ @supports (padding: env(safe-area-inset-top)) { .pb-nav { padding-top: env(safe-area-inset-top); } .pb-nav__mobile { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } .pb-footer { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); } .pb-back-to-top { bottom: calc(1.25rem + env(safe-area-inset-bottom)); } } /* Improve mobile touch targets */ @container page (max-width: 639px) { .pb-nav__mobile-link { min-height: 48px; display: flex; align-items: center; } .pb-services__card .pb-btn, .pb-services__card [class*="btn"] { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } } /* ═══════════════════════════════════════════════════════════════════════════ PRINT STYLES ═══════════════════════════════════════════════════════════════════════════ */ @media print { *, *::before, *::after { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; } body { font-size: 12pt; line-height: 1.5; padding: 0; } .pb-nav, .pb-footer, .pb-back-to-top, .pb-lightbox, .pb-nav__hamburger { display: none !important; } .pb-main { padding-top: 0; } .pb-hero { min-height: auto; padding: 2rem 0; color: #000; } .pb-hero__overlay { display: none; } .pb-section { page-break-inside: avoid; padding: 1.5rem 0; } .pb-card { border: 1px solid #ddd; page-break-inside: avoid; } a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; } .pb-btn::after { content: none; } img { max-width: 100% !important; page-break-inside: avoid; } .pb-animate { opacity: 1 !important; transform: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ EDITOR PREVIEW OVERRIDES ═══════════════════════════════════════════════════════════════════════════ */ .pb-body--editor { padding-top: 0; } .pb-body--editor .pb-section { position: relative; } .pb-body--editor .builder-block-hidden { opacity: 0.35; pointer-events: none; position: relative; } .pb-body--editor .builder-block-hidden::after { content: 'Oculto'; position: absolute; top: 0.5rem; right: 0.5rem; padding: 0.2rem 0.6rem; background: rgba(0,0,0,0.6); color: #fff; font-size: 0.6875rem; border-radius: 4px; z-index: 10; } /* ══════════════════════════════════════════════════════════════ HERO — Variantes (split_right / split_left / minimal) Estilos profesionales v1 ══════════════════════════════════════════════════════════════ */ /* ── Base split layout ────────────────────────────────────── */ .pb-hero--variant-split_right, .pb-hero--variant-split_left { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; align-items: stretch; min-height: 560px; padding: 0 !important; overflow: hidden; position: relative; } .pb-hero--variant-split_right > .pb-hero__content, .pb-hero--variant-split_left > .pb-hero__content { display: flex !important; flex-direction: column; justify-content: center; padding: clamp(2.5rem, 5cqw, 5.5rem) clamp(1.5rem, 4cqw, 4.5rem); align-items: flex-start !important; text-align: left !important; max-width: none; grid-column: 1; grid-row: 1; z-index: 2; gap: 1.25rem; } .pb-hero--variant-split_left > .pb-hero__content { grid-column: 2; } .pb-hero--variant-split_right > .pb-hero__media, .pb-hero--variant-split_left > .pb-hero__media { grid-column: 2; grid-row: 1; position: relative; min-height: 100%; overflow: hidden; } .pb-hero--variant-split_left > .pb-hero__media { grid-column: 1; } /* ── Color fixes: en split & minimal, texto siempre usa colores del tema ── */ .pb-hero--variant-split_right .pb-hero__title, .pb-hero--variant-split_left .pb-hero__title, .pb-hero--variant-minimal .pb-hero__title { color: var(--color-text, #0f172a) !important; text-shadow: none !important; } .pb-hero--variant-split_right .pb-hero__subtitle, .pb-hero--variant-split_left .pb-hero__subtitle, .pb-hero--variant-minimal .pb-hero__subtitle { color: var(--color-text-light, #64748b) !important; opacity: 1 !important; text-shadow: none !important; } .pb-hero--variant-split_right .pb-hero__badge, .pb-hero--variant-split_left .pb-hero__badge, .pb-hero--variant-minimal .pb-hero__badge { background: rgba(var(--color-primary-rgb, 20, 184, 166), 0.10); color: var(--color-primary, #14b8a6) !important; border: 1px solid rgba(var(--color-primary-rgb, 20, 184, 166), 0.18); } /* ── CTA en split / minimal: primary button con color del tema, no blanco ── */ .pb-hero--variant-split_right .pb-btn--white, .pb-hero--variant-split_left .pb-btn--white, .pb-hero--variant-minimal .pb-btn--white { background: var(--color-primary, #14b8a6) !important; color: #fff !important; box-shadow: 0 8px 24px -8px rgba(var(--color-primary-rgb, 20, 184, 166), 0.45) !important; border: none; } .pb-hero--variant-split_right .pb-btn--white:hover, .pb-hero--variant-split_left .pb-btn--white:hover, .pb-hero--variant-minimal .pb-btn--white:hover { background: var(--color-primary-dark, #0f9480) !important; transform: translateY(-1px); } .pb-hero--variant-split_right .pb-btn--outline, .pb-hero--variant-split_left .pb-btn--outline, .pb-hero--variant-minimal .pb-btn--outline { border: 1.5px solid var(--color-text, #0f172a) !important; color: var(--color-text, #0f172a) !important; background: transparent !important; } .pb-hero--variant-split_right .pb-btn--outline:hover, .pb-hero--variant-split_left .pb-btn--outline:hover, .pb-hero--variant-minimal .pb-btn--outline:hover { background: var(--color-text, #0f172a) !important; color: var(--color-bg, #fff) !important; } /* ══════════════════════════════════════════════════════════════ ESTILO DE IMAGEN (image_style) ══════════════════════════════════════════════════════════════ */ /* === plain: full-bleed, ocupa todo sin margen === */ .pb-hero--img-plain > .pb-hero__media > img, .pb-hero--img-plain > .pb-hero__media > video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; } .pb-hero--img-plain > .pb-hero__media:empty { background: radial-gradient(circle at 30% 20%, rgba(var(--color-primary-rgb, 20, 184, 166), 0.35), transparent 55%), radial-gradient(circle at 80% 75%, rgba(245, 158, 11, 0.25), transparent 55%), linear-gradient(135deg, var(--color-primary, #14b8a6), var(--color-secondary, #0f9480)); } /* === rounded: con padding y radius grande === */ .pb-hero--img-rounded > .pb-hero__media { padding: clamp(1.5rem, 3cqw, 2.5rem); background: transparent; display: flex; } .pb-hero--img-rounded > .pb-hero__media > img, .pb-hero--img-rounded > .pb-hero__media > video { width: 100%; height: 100%; object-fit: cover; border-radius: clamp(1rem, 1.8cqw, 1.75rem); display: block; } .pb-hero--img-rounded > .pb-hero__media:empty { background: linear-gradient(135deg, var(--color-primary, #14b8a6), var(--color-secondary, #0f9480)); border-radius: clamp(1rem, 1.8cqw, 1.75rem); margin: clamp(1.5rem, 3cqw, 2.5rem); padding: 0; } /* === floating: shadow grande + ligero tilt === */ .pb-hero--img-floating > .pb-hero__media { padding: clamp(2rem, 3.5cqw, 3rem) clamp(1.5rem, 3cqw, 2.5rem); background: transparent; display: flex; } .pb-hero--img-floating > .pb-hero__media > img, .pb-hero--img-floating > .pb-hero__media > video { width: 100%; height: 100%; object-fit: cover; border-radius: clamp(0.75rem, 1.5cqw, 1.25rem); display: block; transform: rotate(-1.5deg); box-shadow: 0 40px 80px -24px rgba(15, 23, 42, 0.28), 0 20px 40px -18px rgba(var(--color-primary-rgb, 20, 184, 166), 0.22); transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1); } .pb-hero--img-floating > .pb-hero__media:hover > img, .pb-hero--img-floating > .pb-hero__media:hover > video { transform: rotate(0deg) translateY(-6px); } .pb-hero--variant-split_left.pb-hero--img-floating > .pb-hero__media > img, .pb-hero--variant-split_left.pb-hero--img-floating > .pb-hero__media > video { transform: rotate(1.5deg); } /* === decorated: imagen redondeada + blobs animados en toda la sección === */ .pb-hero--img-decorated { position: relative; isolation: isolate; } .pb-hero--img-decorated::before { content: ""; position: absolute; top: -8%; right: 32%; width: clamp(200px, 28cqw, 360px); aspect-ratio: 1; background: radial-gradient(circle, rgba(var(--color-primary-rgb, 20, 184, 166), 0.45), transparent 65%); border-radius: 50%; filter: blur(16px); z-index: 0; animation: pbHeroFloat 10s ease-in-out infinite; pointer-events: none; } .pb-hero--img-decorated::after { content: ""; position: absolute; bottom: -10%; left: 22%; width: clamp(180px, 24cqw, 300px); aspect-ratio: 1; background: radial-gradient(circle, rgba(251, 146, 60, 0.40), transparent 65%); border-radius: 50%; filter: blur(18px); z-index: 0; animation: pbHeroFloat 13s ease-in-out infinite reverse; pointer-events: none; } .pb-hero--img-decorated > .pb-hero__content, .pb-hero--img-decorated > .pb-hero__media { position: relative; z-index: 1; } .pb-hero--img-decorated > .pb-hero__media { padding: clamp(2rem, 3.5cqw, 3rem) clamp(1.5rem, 3cqw, 2.5rem); background: transparent; display: flex; overflow: visible; } .pb-hero--img-decorated > .pb-hero__media > img, .pb-hero--img-decorated > .pb-hero__media > video { width: 100%; height: 100%; object-fit: cover; border-radius: clamp(1rem, 1.8cqw, 1.75rem); display: block; position: relative; z-index: 1; box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.22), 0 10px 25px -8px rgba(var(--color-primary-rgb, 20, 184, 166), 0.25); } @keyframes pbHeroFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-10px, -18px) scale(1.06); } } /* ══════════════════════════════════════════════════════════════ Responsive: apilar en móvil ══════════════════════════════════════════════════════════════ */ @container page (max-width: 860px) { .pb-hero--variant-split_right, .pb-hero--variant-split_left { grid-template-columns: 1fr; grid-template-rows: auto 320px; min-height: auto; } .pb-hero--variant-split_right > .pb-hero__content, .pb-hero--variant-split_left > .pb-hero__content { grid-column: 1; grid-row: 1; padding: clamp(2.5rem, 7cqw, 3.5rem) 1.5rem; } .pb-hero--variant-split_right > .pb-hero__media, .pb-hero--variant-split_left > .pb-hero__media { grid-column: 1; grid-row: 2; min-height: 320px; } .pb-hero--img-floating > .pb-hero__media > img, .pb-hero--img-floating > .pb-hero__media > video { transform: rotate(0deg) !important; } } /* ══════════════════════════════════════════════════════════════ MINIMAL variant (sin imagen, tipografía grande) ══════════════════════════════════════════════════════════════ */ .pb-hero--variant-minimal { background: var(--color-bg, #fff) !important; padding: clamp(5rem, 12cqw, 10rem) clamp(1.5rem, 4cqw, 4rem) !important; min-height: auto !important; display: flex; align-items: center; justify-content: center; } .pb-hero--variant-minimal .pb-hero__bg, .pb-hero--variant-minimal .pb-hero__overlay, .pb-hero--variant-minimal .pb-hero__decoration, .pb-hero--variant-minimal .pb-hero__wave { display: none !important; } .pb-hero--variant-minimal .pb-hero__content { max-width: 920px; margin: 0 auto; } .pb-hero--variant-minimal .pb-hero__title { font-size: clamp(2.75rem, 8cqw, 5.75rem) !important; line-height: 1.02 !important; letter-spacing: -0.035em !important; font-weight: 800 !important; } .pb-hero--variant-minimal .pb-hero__subtitle { font-size: clamp(1.05rem, 1.4cqw, 1.3rem) !important; margin-top: 1.75rem; max-width: 640px; } /* ══════════════════════════════════════════════════════════════ SERVICES — Variantes ══════════════════════════════════════════════════════════════ */ /* ── list_horizontal ─────────────────────────────────────── */ .pb-services--variant-list_horizontal .pb-services__list { display: flex; flex-direction: column; gap: 0.875rem; max-width: 820px; margin: 0 auto; } .pb-services--variant-list_horizontal .pb-services__list-item { display: grid; grid-template-columns: 130px 1fr auto; gap: 1.25rem; align-items: center; padding: 1rem; border-radius: var(--radius-md, 12px); background: var(--color-bg, #fff); border: 1px solid rgba(var(--color-text-rgb, 15, 23, 42), 0.08); transition: box-shadow 0.25s, transform 0.25s; } .pb-services--variant-list_horizontal .pb-services__list-item:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .pb-services--variant-list_horizontal .pb-services__list-img { width: 130px; /* Height comes from aspect-ratio (set by pb-services--aspect-*). Falls back to a reasonable default if the modifier classes aren't applied. */ aspect-ratio: 4 / 3; border-radius: 8px; background: var(--color-bg-alt, #f1f5f9) center/cover no-repeat; flex-shrink: 0; } .pb-services--variant-list_horizontal .pb-services__list-name { font-size: 1.05rem; font-weight: 600; color: var(--color-text); margin: 0 0 0.25rem; } .pb-services--variant-list_horizontal .pb-services__list-desc { font-size: 0.875rem; color: var(--color-text-light); line-height: 1.5; margin: 0 0 0.375rem; } .pb-services--variant-list_horizontal .pb-services__list-duration { font-size: 0.8rem; color: var(--color-text-light); display: inline-flex; align-items: center; gap: 0.25rem; } .pb-services--variant-list_horizontal .pb-services__list-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; } .pb-services--variant-list_horizontal .pb-services__list-price { font-weight: 700; color: var(--color-primary); font-size: 1.125rem; white-space: nowrap; } .pb-services--variant-list_horizontal .pb-services__list-btn { display: inline-block; background: var(--color-primary); color: #fff; text-decoration: none; padding: 0.5rem 1rem; border-radius: var(--radius-md, 8px); font-size: 0.8rem; font-weight: 600; white-space: nowrap; transition: background 0.2s; } .pb-services--variant-list_horizontal .pb-services__list-btn:hover { background: var(--color-primary-dark); } /* ── showcase_focus ──────────────────────────────────────── */ .pb-services--variant-showcase_focus .pb-services__showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: 1060px; margin: 0 auto; align-items: stretch; } .pb-services--variant-showcase_focus .pb-services__showcase-featured { background: var(--color-bg, #fff); border: 1px solid rgba(var(--color-text-rgb, 15, 23, 42), 0.08); border-radius: 16px; padding: 1.5rem; box-shadow: var(--shadow-md); text-align: left; } .pb-services--variant-showcase_focus .pb-services__showcase-badge { display: inline-block; background: var(--color-primary); color: #fff; padding: 0.25rem 0.75rem; border-radius: 10px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 0.75rem; } .pb-services--variant-showcase_focus .pb-services__showcase-img { width: 100%; /* Default aspect; overridden by pb-services--aspect-* if present. */ aspect-ratio: 16 / 9; border-radius: 10px; margin-bottom: 1rem; background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.25), rgba(var(--color-primary-rgb), 0.55)) center/cover; } /* Aspect overrides need to win against the variant default above */ .pb-services--variant-showcase_focus.pb-services--aspect-standard .pb-services__showcase-img { aspect-ratio: 4 / 3; } .pb-services--variant-showcase_focus.pb-services--aspect-square .pb-services__showcase-img { aspect-ratio: 1 / 1; } .pb-services--variant-showcase_focus.pb-services--aspect-portrait .pb-services__showcase-img { aspect-ratio: 3 / 4; } .pb-services--variant-showcase_focus.pb-services--aspect-tall .pb-services__showcase-img { aspect-ratio: 2 / 3; } .pb-services--variant-showcase_focus .pb-services__showcase-name { font-size: 1.35rem; font-weight: 700; margin: 0 0 0.375rem; color: var(--color-text); } .pb-services--variant-showcase_focus .pb-services__showcase-desc { font-size: 0.95rem; color: var(--color-text-light); line-height: 1.55; margin: 0 0 1rem; } .pb-services--variant-showcase_focus .pb-services__showcase-meta { display: flex; gap: 0.875rem; align-items: center; margin-bottom: 1rem; } .pb-services--variant-showcase_focus .pb-services__showcase-price { font-weight: 800; color: var(--color-primary); font-size: 1.5rem; } .pb-services--variant-showcase_focus .pb-services__showcase-duration { font-size: 0.9rem; color: var(--color-text-light); } .pb-services--variant-showcase_focus .pb-services__showcase-btn { display: inline-block; background: var(--color-primary); color: #fff; text-decoration: none; padding: 0.7rem 1.4rem; border-radius: var(--radius-md, 8px); font-size: 0.95rem; font-weight: 600; transition: background 0.2s, transform 0.2s; } .pb-services--variant-showcase_focus .pb-services__showcase-btn:hover { background: var(--color-primary-dark); transform: translateY(-1px); } .pb-services--variant-showcase_focus .pb-services__showcase-rest { display: flex; flex-direction: column; gap: 0.625rem; } .pb-services--variant-showcase_focus .pb-services__showcase-item { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 0.875rem; padding: 0.75rem; border-radius: 10px; background: var(--color-bg, #fff); border: 1px solid rgba(var(--color-text-rgb, 15, 23, 42), 0.08); transition: transform 0.2s, box-shadow 0.2s; } .pb-services--variant-showcase_focus .pb-services__showcase-item:hover { transform: translateX(2px); box-shadow: var(--shadow-sm); } .pb-services--variant-showcase_focus .pb-services__showcase-item-img { width: 70px; height: 58px; border-radius: 6px; background: var(--color-bg-alt) center/cover no-repeat; } .pb-services--variant-showcase_focus .pb-services__showcase-item-name { font-size: 0.95rem; font-weight: 600; color: var(--color-text); margin: 0 0 0.125rem; } .pb-services--variant-showcase_focus .pb-services__showcase-item-duration { font-size: 0.75rem; color: var(--color-text-light); } .pb-services--variant-showcase_focus .pb-services__showcase-item-price { font-weight: 700; color: var(--color-primary); font-size: 1rem; white-space: nowrap; } /* ── minimal_list ────────────────────────────────────────── */ .pb-services--variant-minimal_list .pb-services__minimal { max-width: 720px; margin: 0 auto; } .pb-services--variant-minimal_list .pb-services__minimal-item { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 1.125rem 0.25rem; align-items: baseline; border-top: 1px solid rgba(var(--color-text-rgb, 15, 23, 42), 0.1); text-align: left; } .pb-services--variant-minimal_list .pb-services__minimal-item:first-child { border-top: none; } .pb-services--variant-minimal_list .pb-services__minimal-name { font-size: 1.1rem; font-weight: 600; color: var(--color-text); margin: 0 0 0.25rem; } .pb-services--variant-minimal_list .pb-services__minimal-desc { font-size: 0.875rem; color: var(--color-text-light); line-height: 1.55; margin: 0 0 0.125rem; } .pb-services--variant-minimal_list .pb-services__minimal-duration { font-size: 0.8rem; color: var(--color-text-light); } .pb-services--variant-minimal_list .pb-services__minimal-price { font-weight: 700; color: var(--color-primary); font-size: 1.1rem; white-space: nowrap; } /* Responsive services variants */ @container page (max-width: 720px) { .pb-services--variant-list_horizontal .pb-services__list-item { grid-template-columns: 90px 1fr; grid-template-rows: auto auto; } .pb-services--variant-list_horizontal .pb-services__list-img { width: 90px; /* aspect-ratio inherited from the parent block; no fixed height. */ grid-row: 1 / span 2; } .pb-services--variant-list_horizontal .pb-services__list-meta { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; margin-top: 0.5rem; } .pb-services--variant-showcase_focus .pb-services__showcase { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════════════ TEAM — Variantes ══════════════════════════════════════════════════════════════ */ /* ── grid_rectangles ─────────────────────────────────────── */ .pb-team--variant-grid_rectangles .pb-team__rects { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; max-width: 1060px; margin: 0 auto; } .pb-team--variant-grid_rectangles .pb-team__rect { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 3 / 4; background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.35), rgba(var(--color-primary-rgb), 0.65)) center/cover no-repeat; box-shadow: var(--shadow-md); transition: transform 0.3s, box-shadow 0.3s; } .pb-team--variant-grid_rectangles .pb-team__rect:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .pb-team--variant-grid_rectangles .pb-team__rect-initial { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 4.5rem; font-weight: 700; } .pb-team--variant-grid_rectangles .pb-team__rect-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 2.5rem 1rem 1rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); color: #fff; } .pb-team--variant-grid_rectangles .pb-team__rect-name { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.2rem; line-height: 1.2; color: #fff; } .pb-team--variant-grid_rectangles .pb-team__rect-role { font-size: 0.8rem; opacity: 0.9; font-weight: 500; } /* ── list_detail ─────────────────────────────────────────── */ .pb-team--variant-list_detail .pb-team__list { display: flex; flex-direction: column; gap: 0.875rem; max-width: 820px; margin: 0 auto; } .pb-team--variant-list_detail .pb-team__list-item { display: grid; grid-template-columns: 100px 1fr; gap: 1.25rem; padding: 1.125rem; border-radius: var(--radius-md, 12px); background: var(--color-bg, #fff); border: 1px solid rgba(var(--color-text-rgb, 15, 23, 42), 0.08); align-items: center; transition: box-shadow 0.2s, transform 0.2s; } .pb-team--variant-list_detail .pb-team__list-item:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .pb-team--variant-list_detail .pb-team__list-avatar { width: 100px; height: 100px; border-radius: 50%; background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.25), rgba(var(--color-primary-rgb), 0.55)) center/cover no-repeat; display: flex; align-items: center; justify-content: center; color: var(--color-primary); font-size: 2rem; font-weight: 700; border: 3px solid rgba(var(--color-primary-rgb), 0.15); flex-shrink: 0; } .pb-team--variant-list_detail .pb-team__list-name { font-size: 1.2rem; font-weight: 700; margin: 0 0 0.25rem; color: var(--color-text); } .pb-team--variant-list_detail .pb-team__list-role { display: inline-block; font-size: 0.85rem; color: var(--color-primary); font-weight: 600; margin-bottom: 0.5rem; } .pb-team--variant-list_detail .pb-team__list-bio { font-size: 0.9rem; color: var(--color-text-light); line-height: 1.6; margin: 0; } /* ── minimal_names ───────────────────────────────────────── */ .pb-team--variant-minimal_names .pb-team__minimal { max-width: 640px; margin: 0 auto; text-align: center; } .pb-team--variant-minimal_names .pb-team__minimal-item { padding: 1.25rem 0; border-top: 1px solid rgba(var(--color-text-rgb, 15, 23, 42), 0.1); } .pb-team--variant-minimal_names .pb-team__minimal-item:first-child { border-top: none; } .pb-team--variant-minimal_names .pb-team__minimal-name { font-size: clamp(1.75rem, 3cqw, 2.25rem); font-weight: 700; margin: 0 0 0.4rem; letter-spacing: -0.01em; color: var(--color-text); line-height: 1.1; } .pb-team--variant-minimal_names .pb-team__minimal-role { font-size: 0.85rem; color: var(--color-primary); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } /* Responsive team variants */ @container page (max-width: 720px) { .pb-team--variant-list_detail .pb-team__list-item { grid-template-columns: 72px 1fr; gap: 0.875rem; } .pb-team--variant-list_detail .pb-team__list-avatar { width: 72px; height: 72px; font-size: 1.5rem; } } /* ══════════════════════════════════════════════════════════════ REVIEWS — Variantes ══════════════════════════════════════════════════════════════ */ /* ── slider ──────────────────────────────────────────────── */ .pb-reviews--variant-slider .pb-reviews__slider { display: flex; gap: 1rem; overflow-x: auto; padding: 0.5rem 0.25rem 1.5rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(var(--color-primary-rgb, 20, 184, 166), 0.3) transparent; } .pb-reviews--variant-slider .pb-reviews__slider::-webkit-scrollbar { height: 6px; } .pb-reviews--variant-slider .pb-reviews__slider::-webkit-scrollbar-thumb { background: rgba(var(--color-primary-rgb, 20, 184, 166), 0.3); border-radius: 3px; } .pb-reviews--variant-slider .pb-reviews__slide { flex: 0 0 320px; scroll-snap-align: start; } .pb-reviews--variant-slider .pb-reviews__slide .pb-reviews__card { height: 100%; } /* ── masonry ─────────────────────────────────────────────── */ .pb-reviews--variant-masonry .pb-reviews__masonry { column-count: 3; column-gap: 1.125rem; max-width: 1060px; margin: 0 auto; } .pb-reviews--variant-masonry .pb-reviews__card { break-inside: avoid; margin-bottom: 1.125rem; display: inline-block; width: 100%; } @container page (max-width: 900px) { .pb-reviews--variant-masonry .pb-reviews__masonry { column-count: 2; } } @container page (max-width: 600px) { .pb-reviews--variant-masonry .pb-reviews__masonry { column-count: 1; } } /* ── single_featured ─────────────────────────────────────── */ .pb-reviews--variant-single_featured .pb-reviews__featured { max-width: 760px; margin: 0 auto; padding: 3rem 3rem; background: var(--color-bg, #fff); border: 1px solid rgba(var(--color-text-rgb, 15, 23, 42), 0.08); border-radius: 18px; box-shadow: var(--shadow-md); text-align: center; position: relative; } .pb-reviews--variant-single_featured .pb-reviews__featured-quote { position: absolute; top: 1rem; left: 1.75rem; font-size: 6rem; line-height: 1; color: var(--color-primary); opacity: 0.18; font-family: Georgia, serif; pointer-events: none; } .pb-reviews--variant-single_featured .pb-reviews__featured-stars { font-size: 1.25rem; margin-bottom: 1.25rem; position: relative; z-index: 1; } .pb-reviews--variant-single_featured .pb-reviews__featured-text { font-size: 1.35rem; font-weight: 500; color: var(--color-text); margin: 0 auto 1.75rem; line-height: 1.55; max-width: 620px; position: relative; z-index: 1; } .pb-reviews--variant-single_featured .pb-reviews__featured-author { display: inline-flex; align-items: center; gap: 0.75rem; text-align: left; } .pb-reviews--variant-single_featured .pb-reviews__featured-avatar { width: 44px; height: 44px; border-radius: 50%; background: rgba(var(--color-primary-rgb, 20, 184, 166), 0.15); color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 1.125rem; font-weight: 700; } .pb-reviews--variant-single_featured .pb-reviews__featured-name { font-size: 0.95rem; font-weight: 700; color: var(--color-text); } .pb-reviews--variant-single_featured .pb-reviews__featured-date { font-size: 0.8rem; color: var(--color-text-light); } /* ══════════════════════════════════════════════════════════════ CTA — Nuevas variantes ══════════════════════════════════════════════════════════════ */ /* ── split_card (tarjeta flotante centrada) ───────────────── */ .pb-cta--variant-split_card { background: linear-gradient( 135deg, rgba(var(--color-primary-rgb, 20, 184, 166), 0.08), rgba(var(--color-primary-rgb, 20, 184, 166), 0.02) ) !important; position: relative; overflow: hidden; } .pb-cta--variant-split_card::before, .pb-cta--variant-split_card::after { content: ''; position: absolute; border-radius: 50%; filter: blur(14px); pointer-events: none; z-index: 0; } .pb-cta--variant-split_card::before { top: -30%; right: 10%; width: 260px; aspect-ratio: 1; background: radial-gradient(circle, rgba(var(--color-primary-rgb, 20, 184, 166), 0.25), transparent 70%); } .pb-cta--variant-split_card::after { bottom: -25%; left: 8%; width: 220px; aspect-ratio: 1; background: radial-gradient(circle, rgba(251, 146, 60, 0.18), transparent 70%); } .pb-cta--variant-split_card .pb-cta__card { max-width: 680px; margin: 0 auto; background: #ffffff; border-radius: 20px; padding: clamp(2.5rem, 4cqw, 3.25rem) clamp(1.75rem, 3cqw, 2.75rem); box-shadow: 0 40px 80px -20px rgba(15, 23, 42, 0.18), 0 20px 40px -18px rgba(var(--color-primary-rgb, 20, 184, 166), 0.22); text-align: center; border: 1px solid rgba(15, 23, 42, 0.06); color: #0f172a; position: relative; z-index: 1; } .pb-cta--variant-split_card .pb-cta__card-label { display: inline-block; background: rgba(var(--color-primary-rgb, 20, 184, 166), 0.1); color: var(--color-primary); padding: 0.25rem 1rem; border-radius: 20px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 1rem; } .pb-cta--variant-split_card .pb-cta__card-title { font-size: clamp(1.75rem, 3cqw, 2.25rem); font-weight: 700; margin: 0 0 0.75rem; line-height: 1.2; color: #0f172a; } .pb-cta--variant-split_card .pb-cta__card-text { font-size: 1rem; color: #64748b; margin: 0 auto 1.75rem; max-width: 480px; line-height: 1.6; } .pb-cta--variant-split_card .pb-cta__card-actions { display: flex; gap: 0.625rem; justify-content: center; flex-wrap: wrap; } .pb-cta--variant-split_card .pb-btn--primary { background: var(--color-primary) !important; color: #fff !important; box-shadow: 0 8px 24px -8px rgba(var(--color-primary-rgb, 20, 184, 166), 0.5) !important; border: none !important; } .pb-cta--variant-split_card .pb-btn--outline { border: 1.5px solid #0f172a !important; color: #0f172a !important; background: transparent !important; } /* ── minimal (flat clean) ─────────────────────────────────── */ .pb-cta--variant-minimal { background: var(--color-bg, #fafafa) !important; color: var(--color-text, #0f172a) !important; text-align: center; } .pb-cta--variant-minimal .pb-cta__title { font-size: clamp(2rem, 4cqw, 2.75rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: var(--color-text) !important; } .pb-cta--variant-minimal .pb-cta__text { color: var(--color-text-light) !important; opacity: 1 !important; } .pb-cta--variant-minimal .pb-btn--dark { background: var(--color-text, #0f172a) !important; color: var(--color-bg, #fff) !important; border: none !important; } .pb-cta--variant-minimal .pb-btn--outline { border: 1.5px solid var(--color-text, #0f172a) !important; color: var(--color-text, #0f172a) !important; background: transparent !important; } .pb-cta--variant-minimal .pb-section-label { background: rgba(var(--color-primary-rgb, 20, 184, 166), 0.1) !important; color: var(--color-primary) !important; } /* Responsive split_card */ @container page (max-width: 600px) { .pb-cta--variant-split_card .pb-cta__card { padding: 2rem 1.5rem; } } /* ══════════════════════════════════════════════════════════════ GALLERY — Variantes ══════════════════════════════════════════════════════════════ */ /* ── carousel ────────────────────────────────────────────── */ .pb-gallery--variant-carousel .pb-gallery__carousel { display: flex; gap: 1rem; overflow-x: auto; padding: 0.25rem 0.25rem 1rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(var(--color-primary-rgb, 20, 184, 166), 0.3) transparent; } .pb-gallery--variant-carousel .pb-gallery__carousel-item { flex: 0 0 300px; aspect-ratio: 4 / 5; border-radius: 0.875rem; overflow: hidden; scroll-snap-align: start; cursor: zoom-in; } .pb-gallery--variant-carousel .pb-gallery__carousel-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1); } .pb-gallery--variant-carousel .pb-gallery__carousel-item:hover img { transform: scale(1.05); } /* ── masonry ─────────────────────────────────────────────── */ .pb-gallery--variant-masonry .pb-gallery__masonry { column-count: 3; column-gap: 1rem; max-width: 1000px; margin: 0 auto; } .pb-gallery--variant-masonry .pb-gallery__masonry .pb-gallery__item { break-inside: avoid; margin-bottom: 1rem; display: block; width: 100%; position: relative; overflow: hidden; border-radius: 0.875rem; } .pb-gallery--variant-masonry .pb-gallery__masonry .pb-gallery__item img { width: 100%; height: auto; display: block; transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1); } .pb-gallery--variant-masonry .pb-gallery__masonry .pb-gallery__item:hover img { transform: scale(1.03); } @container page (max-width: 900px) { .pb-gallery--variant-masonry .pb-gallery__masonry { column-count: 2; } } @container page (max-width: 600px) { .pb-gallery--variant-masonry .pb-gallery__masonry { column-count: 1; } } /* ── showcase ────────────────────────────────────────────── */ .pb-gallery--variant-showcase .pb-gallery__showcase { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; max-width: 1060px; margin: 0 auto; } .pb-gallery--variant-showcase .pb-gallery__showcase-main { border-radius: 0.875rem; overflow: hidden; aspect-ratio: 4 / 3; cursor: zoom-in; } .pb-gallery--variant-showcase .pb-gallery__showcase-main img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1); } .pb-gallery--variant-showcase .pb-gallery__showcase-main:hover img { transform: scale(1.04); } .pb-gallery--variant-showcase .pb-gallery__showcase-side { display: flex; flex-direction: column; gap: 1rem; } .pb-gallery--variant-showcase .pb-gallery__showcase-thumb { flex: 1; border-radius: 0.75rem; overflow: hidden; cursor: zoom-in; } .pb-gallery--variant-showcase .pb-gallery__showcase-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1); } .pb-gallery--variant-showcase .pb-gallery__showcase-thumb:hover img { transform: scale(1.06); } @container page (max-width: 720px) { .pb-gallery--variant-showcase .pb-gallery__showcase { grid-template-columns: 1fr; } .pb-gallery--variant-showcase .pb-gallery__showcase-side { flex-direction: row; gap: 0.5rem; } /* CRÍTICO mobile: en flex-direction row, los hijos sin `flex: 1` ni `min-width: 0` desbordan el viewport (las imagenes intrinsecas son 1500px+). Cubre AMBOS casos: con wrapper .pb-gallery__showcase-thumb (PHP nuevo + editor React) y sin wrapper (HTML legacy cacheado). */ .pb-gallery--variant-showcase .pb-gallery__showcase-side > .pb-gallery__showcase-thumb, .pb-gallery--variant-showcase .pb-gallery__showcase-side > .pb-gallery__item { flex: 1 1 0; min-width: 0; } /* Asegurar que el item interno conserva su aspect-ratio 1:1 y llena el wrapper */ .pb-gallery--variant-showcase .pb-gallery__showcase-thumb > .pb-gallery__item { width: 100%; height: auto; } } /* Replicar en editor cuando el frame esta en mobile (las @media no se activan por el viewport switcher porque el browser sigue siendo desktop). */ .ie-canvas-frame.mobile .pb-gallery--variant-showcase .pb-gallery__showcase { grid-template-columns: 1fr !important; } .ie-canvas-frame.mobile .pb-gallery--variant-showcase .pb-gallery__showcase-side { flex-direction: row !important; gap: 0.5rem; } .ie-canvas-frame.mobile .pb-gallery--variant-showcase .pb-gallery__showcase-side > .pb-gallery__showcase-thumb, .ie-canvas-frame.mobile .pb-gallery--variant-showcase .pb-gallery__showcase-side > .pb-gallery__item { flex: 1 1 0 !important; min-width: 0 !important; } .ie-canvas-frame.mobile .pb-gallery--variant-showcase .pb-gallery__showcase-thumb > .pb-gallery__item { width: 100%; height: auto; } /* ══════════════════════════════════════════════════════════════ PRICING — Variantes ══════════════════════════════════════════════════════════════ */ /* ── minimal (list) ──────────────────────────────────────── */ .pb-pricing--variant-minimal .pb-pricing__minimal { max-width: 680px; margin: 0 auto; } .pb-pricing--variant-minimal .pb-pricing__minimal-row { display: grid; grid-template-columns: 1fr auto auto; gap: 1.25rem; align-items: center; padding: 1.25rem 0.25rem; border-top: 1px solid rgba(var(--color-text-rgb, 15, 23, 42), 0.1); text-align: left; } .pb-pricing--variant-minimal .pb-pricing__minimal-row:first-child { border-top: none; } .pb-pricing--variant-minimal .pb-pricing__minimal-row.is-featured { position: relative; background: rgba(var(--color-primary-rgb, 20, 184, 166), 0.06); border-left: 3px solid var(--color-primary); border-radius: 8px; padding-left: 1rem; padding-right: 1rem; } .pb-pricing--variant-minimal .pb-pricing__minimal-row.is-featured .pb-pricing__minimal-name::after { content: 'Recomendado'; display: inline-block; margin-left: 0.5rem; font-size: 0.7rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 10px; background: var(--color-primary); color: #fff; vertical-align: middle; letter-spacing: 0.02em; text-transform: uppercase; } .pb-pricing--variant-minimal .pb-pricing__minimal-name { font-size: 1.1rem; font-weight: 600; color: var(--color-text); margin: 0 0 0.25rem; } .pb-pricing--variant-minimal .pb-pricing__minimal-desc { font-size: 0.875rem; color: var(--color-text-light); line-height: 1.5; margin: 0; } .pb-pricing--variant-minimal .pb-pricing__minimal-price { font-size: 1.35rem; font-weight: 800; color: var(--color-primary); white-space: nowrap; line-height: 1; } .pb-pricing--variant-minimal .pb-pricing__minimal-price .pb-pricing__period, .pb-pricing--variant-minimal .pb-pricing__minimal-price .pb-pricing__currency { font-size: 0.85rem; font-weight: 500; color: var(--color-text-light); } .pb-pricing--variant-minimal .pb-pricing__minimal-btn { white-space: nowrap; padding: 0.625rem 1.25rem; font-size: 0.85rem; text-decoration: none; } @container page (max-width: 620px) { .pb-pricing--variant-minimal .pb-pricing__minimal-row { grid-template-columns: 1fr auto; row-gap: 0.5rem; } .pb-pricing--variant-minimal .pb-pricing__minimal-btn { grid-column: 1 / -1; justify-self: stretch; text-align: center; } } /* ── comparison (table) ──────────────────────────────────── */ .pb-pricing--variant-comparison .pb-pricing__comparison { max-width: 1060px; margin: 0 auto; background: var(--color-bg, #fff); border-radius: 16px; border: 1px solid rgba(var(--color-text-rgb, 15, 23, 42), 0.1); overflow: hidden; } .pb-pricing--variant-comparison .pb-pricing__comparison-head { display: grid; align-items: center; background: var(--color-bg-alt, #f8fafc); padding: 1.25rem 1.5rem; gap: 1rem; } .pb-pricing--variant-comparison .pb-pricing__comparison-col { text-align: center; } .pb-pricing--variant-comparison .pb-pricing__comparison-col.is-featured .pb-pricing__comparison-name { color: var(--color-primary); } .pb-pricing--variant-comparison .pb-pricing__comparison-name { font-size: 0.95rem; font-weight: 600; color: var(--color-text); margin-bottom: 0.25rem; } .pb-pricing--variant-comparison .pb-pricing__comparison-price { font-size: 1.5rem; font-weight: 800; color: var(--color-primary); line-height: 1; } .pb-pricing--variant-comparison .pb-pricing__comparison-price .pb-pricing__period, .pb-pricing--variant-comparison .pb-pricing__comparison-price .pb-pricing__currency { font-size: 0.7rem; font-weight: 500; color: var(--color-text-light); } .pb-pricing--variant-comparison .pb-pricing__comparison-row { display: grid; align-items: center; padding: 1rem 1.5rem; border-top: 1px solid rgba(var(--color-text-rgb, 15, 23, 42), 0.08); gap: 1rem; } .pb-pricing--variant-comparison .pb-pricing__comparison-feat { font-size: 0.9rem; color: var(--color-text); text-align: left; } .pb-pricing--variant-comparison .pb-pricing__comparison-cell { text-align: center; } .pb-pricing--variant-comparison .pb-pricing__comparison-check { color: #10b981; font-size: 1.2rem; font-weight: 700; } .pb-pricing--variant-comparison .pb-pricing__comparison-dash { color: rgba(var(--color-text-rgb, 15, 23, 42), 0.3); font-size: 1rem; } .pb-pricing--variant-comparison .pb-pricing__comparison-actions { display: grid; align-items: center; padding: 1.25rem 1.5rem; border-top: 1px solid rgba(var(--color-text-rgb, 15, 23, 42), 0.08); gap: 1rem; } .pb-pricing--variant-comparison .pb-pricing__comparison-action { text-align: center; } .pb-pricing--variant-comparison .pb-pricing__comparison-action .pb-btn { padding: 0.5rem 1rem; font-size: 0.8rem; } @container page (max-width: 720px) { .pb-pricing--variant-comparison .pb-pricing__comparison { overflow-x: auto; } .pb-pricing--variant-comparison .pb-pricing__comparison-head, .pb-pricing--variant-comparison .pb-pricing__comparison-row, .pb-pricing--variant-comparison .pb-pricing__comparison-actions { min-width: 560px; } } /* ── featured_highlight (central grande) ─────────────────── */ .pb-pricing--variant-featured_highlight .pb-pricing__featured-grid { display: grid; gap: 1rem; max-width: 980px; margin: 0 auto; align-items: stretch; } .pb-pricing--variant-featured_highlight .pb-pricing__featured-card { background: var(--color-bg, #fff); border: 1px solid rgba(var(--color-text-rgb, 15, 23, 42), 0.1); border-radius: 16px; padding: 1.75rem 1.5rem; color: var(--color-text); position: relative; transition: transform 0.3s; } .pb-pricing--variant-featured_highlight .pb-pricing__featured-card.is-featured { background: var(--color-primary); color: #fff; border: none; padding: 2.5rem 1.75rem; box-shadow: 0 24px 48px -16px rgba(var(--color-primary-rgb, 20, 184, 166), 0.5); transform: scale(1.04); z-index: 1; } .pb-pricing--variant-featured_highlight .pb-pricing__featured-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: #fff; color: var(--color-primary); font-size: 0.7rem; font-weight: 700; padding: 3px 14px; border-radius: 12px; letter-spacing: 0.05em; white-space: nowrap; } .pb-pricing--variant-featured_highlight .pb-pricing__featured-name { font-size: 1.05rem; font-weight: 600; margin: 0 0 0.5rem; opacity: 0.92; } .pb-pricing--variant-featured_highlight .pb-pricing__featured-card.is-featured .pb-pricing__featured-name { color: #fff; font-size: 1.2rem; opacity: 1; } .pb-pricing--variant-featured_highlight .pb-pricing__featured-price { font-size: 2.25rem; font-weight: 800; color: var(--color-primary); margin-bottom: 0.375rem; line-height: 1; } .pb-pricing--variant-featured_highlight .pb-pricing__featured-card.is-featured .pb-pricing__featured-price { color: #fff; font-size: 2.75rem; } .pb-pricing--variant-featured_highlight .pb-pricing__featured-price .pb-pricing__period, .pb-pricing--variant-featured_highlight .pb-pricing__featured-price .pb-pricing__currency { font-size: 0.9rem; font-weight: 500; opacity: 0.75; } .pb-pricing--variant-featured_highlight .pb-pricing__featured-desc { font-size: 0.875rem; color: var(--color-text-light); margin: 0 0 1.25rem; line-height: 1.5; } .pb-pricing--variant-featured_highlight .pb-pricing__featured-card.is-featured .pb-pricing__featured-desc { color: rgba(255, 255, 255, 0.88); } .pb-pricing--variant-featured_highlight .pb-pricing__featured-features { list-style: none; padding: 0; margin: 0 0 1.5rem; text-align: left; } .pb-pricing--variant-featured_highlight .pb-pricing__featured-feature { font-size: 0.875rem; padding: 0.375rem 0; color: var(--color-text); display: flex; align-items: flex-start; gap: 0.5rem; } .pb-pricing--variant-featured_highlight .pb-pricing__featured-feature.is-disabled { text-decoration: line-through; opacity: 0.55; } .pb-pricing--variant-featured_highlight .pb-pricing__featured-feature i { color: var(--color-primary); font-style: normal; font-weight: 700; flex-shrink: 0; } .pb-pricing--variant-featured_highlight .pb-pricing__featured-card.is-featured .pb-pricing__featured-feature { color: rgba(255, 255, 255, 0.95); } .pb-pricing--variant-featured_highlight .pb-pricing__featured-card.is-featured .pb-pricing__featured-feature i { color: #fff; } .pb-pricing--variant-featured_highlight .pb-pricing__featured-btn { display: block; width: 100%; padding: 0.75rem 1rem; border-radius: var(--radius-md, 8px); font-size: 0.875rem; font-weight: 700; text-align: center; text-decoration: none; background: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); transition: background 0.2s, color 0.2s; } .pb-pricing--variant-featured_highlight .pb-pricing__featured-btn:hover { background: var(--color-primary); color: #fff; } .pb-pricing--variant-featured_highlight .pb-pricing__featured-card.is-featured .pb-pricing__featured-btn { background: #fff; color: var(--color-primary); border: none; } .pb-pricing--variant-featured_highlight .pb-pricing__featured-card.is-featured .pb-pricing__featured-btn:hover { background: rgba(255, 255, 255, 0.92); } @container page (max-width: 780px) { .pb-pricing--variant-featured_highlight .pb-pricing__featured-grid { grid-template-columns: 1fr !important; } .pb-pricing--variant-featured_highlight .pb-pricing__featured-card.is-featured { transform: none; } } /* ══════════════════════════════════════════════════════════════ EDITOR — Density picker (1C) ══════════════════════════════════════════════════════════════ */ .ie-density-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .ie-density-chip { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border-radius: 10px; border: 1.5px solid var(--ie-border, #e2e8f0); background: var(--ie-surface, #fff); transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; text-align: center; } .ie-density-chip:hover { border-color: var(--ie-primary, #15ab92); transform: translateY(-1px); } .ie-density-chip.is-active { border-color: var(--ie-primary, #15ab92); box-shadow: 0 0 0 2px rgba(21, 171, 146, 0.18); background: #f0fdfa; } .ie-density-chip__bars { display: flex; align-items: center; gap: 3px; height: 22px; margin-bottom: 2px; } .ie-density-chip__bars > span { width: 6px; background: var(--ie-primary, #15ab92); border-radius: 3px; opacity: 0.75; } .ie-density-chip.is-active .ie-density-chip__bars > span { opacity: 1; } .ie-density-chip__label { font-size: 12px; font-weight: 600; color: var(--ie-text, #0f172a); } .ie-density-chip__hint { font-size: 10.5px; color: var(--ie-text-muted, #64748b); line-height: 1.4; } /* ══════════════════════════════════════════════════════════════ PUBLIC — Per-device block visibility (1D) ══════════════════════════════════════════════════════════════ */ /* Public site: mobile at ≤768px, desktop at ≥769px */ @container page (max-width: 768px) { .pb-hidden-mobile { display: none !important; } } @container page (min-width: 769px) { .pb-hidden-desktop { display: none !important; } } /* Editor preview: still show the blocks but with a hint/outline so the user can keep editing them. The `.pb-body--editor` body class is added by layout.php when rendering inside the iframe. */ .pb-body--editor .pb-hidden-mobile, .pb-body--editor .pb-hidden-desktop { display: block !important; } .pb-body--editor .pb-hidden-mobile { outline: 1.5px dashed rgba(244, 114, 182, 0.55); outline-offset: -4px; } .pb-body--editor .pb-hidden-desktop { outline: 1.5px dashed rgba(96, 165, 250, 0.55); outline-offset: -4px; } .pb-body--editor .pb-hidden-mobile::before, .pb-body--editor .pb-hidden-desktop::before { content: attr(data-device-hint); position: absolute; top: 10px; right: 10px; background: rgba(15, 23, 42, 0.85); color: #fff; font-size: 10px; padding: 3px 8px; border-radius: 6px; z-index: 20; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; pointer-events: none; } /* ══════════════════════════════════════════════════════════════ NEWSLETTER ══════════════════════════════════════════════════════════════ */ .pb-newsletter { text-align: center; } .pb-newsletter__inner { max-width: 640px; margin: 0 auto; padding: 0 1.5rem; } .pb-newsletter--variant-card .pb-newsletter__inner { background: var(--color-bg, #fff); border: 1px solid rgba(var(--color-text-rgb, 15, 23, 42), 0.08); border-radius: 18px; padding: 2.25rem clamp(1.25rem, 3cqw, 2.5rem); box-shadow: var(--shadow-md); } .pb-newsletter--variant-accent .pb-newsletter__inner { background: var(--color-primary); border-radius: 18px; padding: 2.5rem clamp(1.25rem, 3cqw, 2.5rem); color: #fff; } .pb-newsletter__label { display: inline-block; background: rgba(var(--color-primary-rgb, 20, 184, 166), 0.1); color: var(--color-primary); padding: 0.25rem 1rem; border-radius: 20px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 0.875rem; } .pb-newsletter--variant-accent .pb-newsletter__label { background: rgba(255, 255, 255, 0.18); color: #fff; } .pb-newsletter__title { font-size: clamp(1.4rem, 2.5cqw, 1.75rem); font-weight: 700; margin: 0 0 0.625rem; color: var(--color-text); line-height: 1.2; } .pb-newsletter--variant-accent .pb-newsletter__title { color: #fff; } .pb-newsletter__subtitle { color: var(--color-text-light); font-size: 0.95rem; margin: 0 0 1.5rem; line-height: 1.55; } .pb-newsletter--variant-accent .pb-newsletter__subtitle { color: rgba(255, 255, 255, 0.92); } .pb-newsletter__form { display: flex; gap: 0.5rem; max-width: 460px; margin: 0 auto; } .pb-newsletter--variant-accent .pb-newsletter__form { background: rgba(255, 255, 255, 0.1); padding: 0.375rem; border-radius: 999px; } .pb-newsletter__input { flex: 1; padding: 0.75rem 1rem; font-size: 0.9rem; border: 1px solid rgba(var(--color-text-rgb, 15, 23, 42), 0.15); border-radius: var(--radius-md, 8px); background: var(--color-bg, #fff); color: var(--color-text); outline: none; font-family: inherit; transition: border-color 0.2s; } .pb-newsletter__input:focus { border-color: var(--color-primary); } .pb-newsletter--variant-accent .pb-newsletter__input { border: none; border-radius: 999px; background: #fff; } .pb-newsletter__button { background: var(--color-primary); color: #fff; border: none; padding: 0.75rem 1.5rem; border-radius: var(--radius-md, 8px); font-size: 0.9rem; font-weight: 600; cursor: pointer; white-space: nowrap; font-family: inherit; transition: background 0.2s, transform 0.2s; } .pb-newsletter__button:hover:not(:disabled) { background: var(--color-primary-dark); transform: translateY(-1px); } .pb-newsletter__button:disabled { opacity: 0.6; cursor: wait; } .pb-newsletter--variant-accent .pb-newsletter__button { background: var(--color-text, #0f172a); color: #fff; border-radius: 999px; } .pb-newsletter__legal { font-size: 0.7rem; color: rgba(var(--color-text-rgb, 15, 23, 42), 0.55); margin: 0.875rem 0 0; line-height: 1.5; } .pb-newsletter--variant-accent .pb-newsletter__legal { color: rgba(255, 255, 255, 0.72); } .pb-newsletter__result { margin-top: 1rem; padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.875rem; } .pb-newsletter__result.is-success { background: rgba(16, 185, 129, 0.12); color: #059669; } .pb-newsletter__result.is-error { background: rgba(239, 68, 68, 0.12); color: #dc2626; } @container page (max-width: 560px) { .pb-newsletter__form { flex-direction: column; } .pb-newsletter--variant-accent .pb-newsletter__form { border-radius: 18px; } } /* ══════════════════════════════════════════════════════════════ COUNTDOWN ══════════════════════════════════════════════════════════════ */ .pb-countdown { text-align: center; } .pb-countdown__empty { max-width: 460px; margin: 0 auto; padding: 1.75rem; border: 2px dashed rgba(var(--color-text-rgb, 15, 23, 42), 0.2); border-radius: 10px; color: var(--color-text-light); font-size: 0.875rem; } .pb-countdown__grid { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; max-width: 640px; margin: 0 auto; } .pb-countdown__cell { display: flex; flex-direction: column; align-items: center; min-width: 82px; padding: 1.125rem 0.625rem; border-radius: 14px; background: var(--color-bg, #fff); color: var(--color-text); border: 1px solid rgba(var(--color-text-rgb, 15, 23, 42), 0.08); box-shadow: var(--shadow-md); } .pb-countdown__value { font-size: 2rem; font-weight: 800; line-height: 1; color: var(--color-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .pb-countdown__label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.5rem; color: var(--color-text-light); } .pb-countdown__sep { display: none; font-size: 2.125rem; font-weight: 300; color: var(--color-primary); align-self: center; } .pb-countdown__cta { margin-top: 1.75rem; } /* Variant: minimal */ .pb-countdown--variant-minimal .pb-countdown__grid { gap: 1.25rem; align-items: center; } .pb-countdown--variant-minimal .pb-countdown__cell { background: transparent; border: none; box-shadow: none; min-width: 70px; padding: 0.5rem 0; } .pb-countdown--variant-minimal .pb-countdown__value { font-size: clamp(2.25rem, 5cqw, 3rem); color: var(--color-text); } .pb-countdown--variant-minimal .pb-countdown__sep { display: inline-block; } /* Variant: accent */ .pb-countdown--variant-accent .pb-countdown__cell { background: var(--color-primary); color: #fff; box-shadow: 0 8px 24px -10px rgba(var(--color-primary-rgb, 20, 184, 166), 0.55); border: none; } .pb-countdown--variant-accent .pb-countdown__value { color: #fff; } .pb-countdown--variant-accent .pb-countdown__label { color: rgba(255, 255, 255, 0.88); } /* ══════════════════════════════════════════════════════════════ STICKY BAR ══════════════════════════════════════════════════════════════ */ .pb-stickybar { width: 100%; padding: 0; font-size: 0.875rem; font-weight: 500; } .pb-stickybar--sticky { position: sticky; /* Sit below the fixed .pb-nav (height: 72px) so they don't overlap when scrolled. */ top: 72px; /* Above regular navbar (1000), below Bootstrap modals (1050+) */ z-index: 1040; } .pb-stickybar.is-dismissed { display: none !important; } .pb-stickybar__inner { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0.75rem 1.5rem; max-width: 1200px; margin: 0 auto; flex-wrap: wrap; text-align: center; } .pb-stickybar__message { flex: 1 1 auto; min-width: 0; } .pb-stickybar__cta { display: inline-block; padding: 0.375rem 0.875rem; border-radius: 6px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; } .pb-stickybar__cta:hover { transform: translateY(-1px); } .pb-stickybar__close { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); border: none; color: inherit; font-size: 0.95rem; font-weight: 700; cursor: pointer; line-height: 1; padding: 0; transition: background 0.2s; } .pb-stickybar__close:hover { background: rgba(255, 255, 255, 0.32); } /* Variants */ .pb-stickybar--variant-primary { background: var(--color-primary); color: #fff; } .pb-stickybar--variant-primary .pb-stickybar__cta { background: #fff; color: var(--color-primary); } .pb-stickybar--variant-dark { background: #1f2937; color: #fff; } .pb-stickybar--variant-dark .pb-stickybar__cta { background: #fff; color: #1f2937; } .pb-stickybar--variant-warn { background: #fbbf24; color: #1a0f00; } .pb-stickybar--variant-warn .pb-stickybar__cta { background: #1f2937; color: #fff; } .pb-stickybar--variant-warn .pb-stickybar__close { background: rgba(0, 0, 0, 0.1); } .pb-stickybar--variant-warn .pb-stickybar__close:hover { background: rgba(0, 0, 0, 0.2); } .pb-stickybar--variant-accent { background: #10b981; color: #fff; } .pb-stickybar--variant-accent .pb-stickybar__cta { background: #fff; color: #059669; } @container page (max-width: 640px) { .pb-stickybar__inner { gap: 0.5rem; padding: 0.625rem 0.875rem; font-size: 0.8rem; } .pb-stickybar__cta { padding: 0.3rem 0.625rem; font-size: 0.75rem; } } /* ══════════════════════════════════════════════════════════════ LOGO CLOUD ══════════════════════════════════════════════════════════════ */ .pb-logocloud { text-align: center; } .pb-logocloud__header { text-align: center; margin-bottom: 1.75rem; } .pb-logocloud__title { font-size: 0.875rem; font-weight: 600; color: var(--color-text-light); letter-spacing: 0.05em; text-transform: uppercase; margin: 0 0 0.5rem; } .pb-logocloud__subtitle { color: var(--color-text-light); font-size: 0.9rem; margin: 0; } .pb-logocloud__item { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 10px 16px; } .pb-logocloud__img { max-width: 140px; max-height: 52px; width: auto; height: auto; object-fit: contain; display: block; transition: filter 0.25s, opacity 0.25s; } .pb-logocloud--grayscale .pb-logocloud__img { filter: grayscale(100%) opacity(0.65); } .pb-logocloud--grayscale .pb-logocloud__item:hover .pb-logocloud__img { filter: grayscale(0%) opacity(1); } .pb-logocloud__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; max-width: 960px; margin: 0 auto; } .pb-logocloud__row { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 2.5rem; max-width: 960px; margin: 0 auto; } .pb-logocloud__marquee-wrap { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); mask: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); } .pb-logocloud__marquee { display: flex; gap: 3rem; width: max-content; animation: pbLogoMarquee 28s linear infinite; } .pb-logocloud__marquee:hover { animation-play-state: paused; } @keyframes pbLogoMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ══════════════════════════════════════════════════════════════ HERO carousel (extra_images) ══════════════════════════════════════════════════════════════ */ .pb-hero__bg--carousel { position: relative; } .pb-hero__bg--carousel .pb-hero__bg-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.8s ease-in-out; display: block; } .pb-hero__bg--carousel .pb-hero__bg-slide.is-active { opacity: 1; } /* For split variants, the media column uses static positioning itself, so we place slides absolutely within it. Each slide fills the column. */ .pb-hero__media.pb-hero__bg--carousel { position: relative; } .pb-hero__media.pb-hero__bg--carousel > .pb-hero__bg-slide { position: absolute; inset: 0; } /* ══════════════════════════════════════════════════════════════ SERVICES — Per-service icon + badge (DB-driven) ══════════════════════════════════════════════════════════════ */ /* Icon chip to the left of the service name */ .pb-services__sicon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: rgba(var(--color-primary-rgb, 20, 184, 166), 0.10); color: var(--color-primary); font-size: 20px; line-height: 1; margin-right: 0.5rem; flex-shrink: 0; vertical-align: middle; } /* Per-service badge in top-right corner of the item */ .pb-services__sbadge { position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: 12px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; z-index: 2; white-space: nowrap; line-height: 1; } .pb-services__sbadge--primary { background: var(--color-primary); color: #fff; } .pb-services__sbadge--accent { background: #f59e0b; color: #1a0f00; } .pb-services__sbadge--warn { background: #ef4444; color: #fff; } .pb-services__sbadge--dark { background: #0f172a; color: #fff; } /* Make card + list items relative so badge positions correctly */ .pb-services__card, .pb-services__list-item, .pb-services__showcase-item, .pb-services__minimal-item { position: relative; } /* Name should allow icon alignment */ .pb-services__card-name, .pb-services__list-name, .pb-services__minimal-name { display: flex; align-items: center; gap: 0.5rem; } /* ══════════════════════════════════════════════════════════════════ EDITOR PREVIEW — Fix de centrado de cabeceras de bloque ────────────────────────────────────────────────────────────────── El bundle React envuelve la cabecera de cada bloque (badge, h2, subtitulo) en un div con `style="padding: 0 24px; text-align: center;"` SIN max-width. Eso deja los textos largos extendidos a todo el ancho del container, y aunque estan matematicamente centrados parecen descentrados visualmente. La web publica usa el wrapper .pb-section-header con max-width:720px que evita esto. Aqui aplicamos max-width a cualquier h1/h2/h3/p cuyo padre tenga text-align:center inline (patron que usa React) DENTRO del editor. Asi el preview coincide visualmente con la web real. ══════════════════════════════════════════════════════════════════ */ .ie-canvas-frame [style*="text-align: center"] > h1, .ie-canvas-frame [style*="text-align: center"] > h2, .ie-canvas-frame [style*="text-align: center"] > h3 { max-width: 720px; margin-left: auto; margin-right: auto; } .ie-canvas-frame [style*="text-align: center"] > p:first-of-type { max-width: 640px; margin-left: auto; margin-right: auto; } /* Excepcion: el hero tiene su propio sistema de centrado (pb-hero__content). No queremos limitar su ancho aqui — mantener su comportamiento original. */ .ie-canvas-frame .pb-hero [style*="text-align: center"] > h1, .ie-canvas-frame .pb-hero [style*="text-align: center"] > h2, .ie-canvas-frame .pb-hero [style*="text-align: center"] > h3, .ie-canvas-frame .pb-hero [style*="text-align: center"] > p:first-of-type { max-width: none; }