/* ========================================================= TBS - TEMPLATE EVENTO / SELECTOR / ELEMENTOR 97810 Archivo: /wp-content/themes/lovebite/assets/css/tbs-template-evento.css Versión MOBILE + IMÁGENES ADAPTATIVAS --------------------------------------------------------- Objetivo: - Desktop y móvil con calibración diferenciada. - Soporte para imagen hero/fondo desktop y móvil: --tbs-theme-hero --tbs-theme-fondo --tbs-theme-hero-mobile --tbs-theme-fondo-mobile - Escalable para futuros diseños usando variables. - [tbs_template_evento_styles] debe inyectar las URLs dinámicas. ========================================================= */ /* ========================================================= 0) FUENTES ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800;900&family=Cormorant+Garamond:wght@500;600;700&family=Libre+Baskerville:wght@400;700&family=Nunito+Sans:wght@400;500;600;700;800;900&family=Quicksand:wght@500;600;700;800&family=Marcellus&display=swap'); /* ========================================================= 1) VARIABLES BASE --------------------------------------------------------- Para futuros diseños: body.tbs-template-nuevo_diseno { --tbs-mobile-hero-position: center top; --tbs-mobile-hero-size: cover; --tbs-mobile-title-size: ...; } ========================================================= */ :root, body { --tbs-theme-color-base: #f9a8d4; --tbs-theme-color-acento: #93c5fd; --tbs-theme-title-color: #c85f8f; --tbs-theme-subtitle-color: #9b6b7f; --tbs-theme-text-color: #6f5b66; --tbs-theme-button-text-color: #ffffff; /* Desktop: inyectadas por [tbs_template_evento_styles] */ --tbs-theme-hero: none; --tbs-theme-fondo: none; /* Mobile: inyectadas por [tbs_template_evento_styles]. Si no existen imágenes mobile, se usa la misma desktop. */ --tbs-theme-hero-mobile: var(--tbs-theme-hero); --tbs-theme-fondo-mobile: var(--tbs-theme-fondo); --tbs-theme-font-title: "Playfair Display", Georgia, serif; --tbs-theme-font-body: "Nunito Sans", Inter, Arial, sans-serif; --tbs-theme-font-accent: "Quicksand", Inter, Arial, sans-serif; --tbs-theme-title-weight: 800; --tbs-theme-body-weight: 500; --tbs-theme-accent-weight: 800; --tbs-theme-title-letter: -0.035em; --tbs-theme-body-letter: 0em; --tbs-theme-accent-letter: .055em; --tbs-theme-title-transform: none; --tbs-theme-title-style: normal; --tbs-theme-title-line: .96; --tbs-theme-h2-line: 1.08; --tbs-theme-body-line: 1.65; /* Desktop */ --tbs-desktop-hero-min-height: clamp(520px, 78vh, 760px); --tbs-desktop-hero-radius: 0 0 36px 36px; --tbs-desktop-hero-position: center center; --tbs-desktop-hero-size: cover; --tbs-desktop-root-padding: 0px; --tbs-desktop-title-size: clamp(46px, 8.2vw, 84px); --tbs-desktop-h2-size: clamp(30px, 4.4vw, 50px); --tbs-desktop-h3-size: clamp(22px, 3vw, 32px); --tbs-desktop-body-size: clamp(15.5px, 1.35vw, 17px); --tbs-desktop-small-size: clamp(13px, 1.1vw, 14px); --tbs-desktop-button-size: clamp(14px, 1.1vw, 15px); --tbs-desktop-title-max-width: 980px; --tbs-desktop-title-margin-top: 0px; --tbs-desktop-title-margin-left: 0px; /* Mobile */ --tbs-mobile-hero-min-height: 560px; --tbs-mobile-hero-radius: 0 0 26px 26px; --tbs-mobile-hero-position: center top; --tbs-mobile-hero-size: cover; --tbs-mobile-root-padding: 0px; --tbs-mobile-title-size: clamp(36px, 11vw, 60px); --tbs-mobile-h2-size: clamp(26px, 7vw, 40px); --tbs-mobile-h3-size: clamp(20px, 5.4vw, 28px); --tbs-mobile-body-size: 15px; --tbs-mobile-small-size: 12.5px; --tbs-mobile-button-size: 13.5px; --tbs-mobile-title-line: 1.02; --tbs-mobile-title-letter: -0.025em; --tbs-mobile-title-max-width: 92vw; --tbs-mobile-title-margin-top: 0px; --tbs-mobile-title-margin-left: 0px; --tbs-theme-section-bg: rgba(255, 247, 251, .86); --tbs-theme-card-bg: rgba(255, 255, 255, .90); --tbs-theme-border-color: rgba(246, 205, 224, .78); --tbs-theme-shadow-color: rgba(198, 120, 160, .22); --tbs-theme-soft-1: rgba(255, 221, 238, .85); --tbs-theme-soft-2: rgba(206, 232, 255, .75); --tbs-hero-overlay-top: rgba(255,255,255,.20); --tbs-hero-overlay-mid: rgba(255,255,255,.05); --tbs-hero-overlay-bottom: rgba(255,255,255,.32); } /* ========================================================= 2) VARIABLES POR DISEÑO ========================================================= */ /* BabyShower Dulce Llegada */ body.tbs-template-babyshower_dulce_llegada, .tbs-template-babyshower_dulce_llegada { --tbs-theme-color-base: #f39abc; --tbs-theme-color-acento: #93c5fd; --tbs-theme-title-color: #d96c9f; --tbs-theme-subtitle-color: #9b6b7f; --tbs-theme-text-color: #6f5b66; --tbs-theme-font-title: "Playfair Display", Georgia, serif; --tbs-theme-font-body: "Nunito Sans", Inter, Arial, sans-serif; --tbs-theme-font-accent: "Quicksand", Inter, Arial, sans-serif; --tbs-theme-title-weight: 900; --tbs-theme-body-weight: 500; --tbs-theme-accent-weight: 800; --tbs-theme-title-letter: -0.048em; --tbs-theme-body-letter: 0em; --tbs-theme-accent-letter: .075em; --tbs-theme-title-style: normal; --tbs-theme-title-line: .91; --tbs-theme-h2-line: 1.02; --tbs-theme-body-line: 1.68; --tbs-desktop-hero-min-height: clamp(520px, 76vh, 740px); --tbs-desktop-hero-position: center center; --tbs-desktop-hero-size: cover; --tbs-desktop-title-size: clamp(52px, 9.2vw, 96px); --tbs-desktop-h2-size: clamp(32px, 4.7vw, 56px); --tbs-desktop-h3-size: clamp(22px, 3vw, 32px); --tbs-desktop-body-size: clamp(15.8px, 1.34vw, 17.5px); --tbs-desktop-button-size: clamp(14px, 1.1vw, 15px); --tbs-desktop-title-max-width: 1050px; --tbs-mobile-hero-min-height: 500px; --tbs-mobile-hero-position: center top; --tbs-mobile-hero-size: cover; --tbs-mobile-title-size: clamp(34px, 11.8vw, 56px); --tbs-mobile-h2-size: clamp(27px, 7vw, 42px); --tbs-mobile-h3-size: clamp(20px, 5.4vw, 28px); --tbs-mobile-title-line: .98; --tbs-mobile-title-letter: -0.035em; --tbs-mobile-title-max-width: 94vw; --tbs-theme-section-bg: rgba(255, 247, 251, .90); --tbs-theme-card-bg: rgba(255, 255, 255, .92); --tbs-theme-border-color: rgba(246, 205, 224, .84); --tbs-theme-shadow-color: rgba(198, 120, 160, .22); --tbs-theme-soft-1: rgba(255, 221, 238, .92); --tbs-theme-soft-2: rgba(206, 232, 255, .82); } /* Dulce Cielo */ body.tbs-template-dulce_cielo, .tbs-template-dulce_cielo { --tbs-theme-color-base: #60a5fa; --tbs-theme-color-acento: #bae6fd; --tbs-theme-title-color: #4f9fe8; --tbs-theme-subtitle-color: #6f94b8; --tbs-theme-text-color: #536b7e; --tbs-theme-font-title: "Cormorant Garamond", Georgia, serif; --tbs-theme-font-body: "Quicksand", Inter, Arial, sans-serif; --tbs-theme-font-accent: "Nunito Sans", Inter, Arial, sans-serif; --tbs-theme-title-weight: 600; --tbs-theme-body-weight: 600; --tbs-theme-accent-weight: 800; --tbs-theme-title-letter: -0.014em; --tbs-theme-body-letter: .012em; --tbs-theme-accent-letter: .11em; --tbs-theme-title-style: italic; --tbs-theme-title-line: .98; --tbs-theme-h2-line: 1.08; --tbs-theme-body-line: 1.76; --tbs-desktop-hero-min-height: clamp(540px, 80vh, 780px); --tbs-desktop-hero-position: center center; --tbs-desktop-hero-size: cover; --tbs-desktop-title-size: clamp(58px, 10vw, 104px); --tbs-desktop-h2-size: clamp(34px, 5vw, 58px); --tbs-desktop-h3-size: clamp(21px, 2.8vw, 30px); --tbs-desktop-body-size: clamp(15.5px, 1.32vw, 17px); --tbs-desktop-button-size: clamp(13.5px, 1.05vw, 14.5px); --tbs-desktop-title-max-width: 1080px; --tbs-mobile-hero-min-height: 510px; --tbs-mobile-hero-position: center top; --tbs-mobile-hero-size: cover; --tbs-mobile-title-size: clamp(38px, 13.2vw, 62px); --tbs-mobile-h2-size: clamp(28px, 7.4vw, 44px); --tbs-mobile-h3-size: clamp(20px, 5.2vw, 27px); --tbs-mobile-title-line: 1.02; --tbs-mobile-title-letter: -0.018em; --tbs-mobile-title-max-width: 96vw; --tbs-mobile-title-margin-top: -4px; --tbs-theme-section-bg: rgba(241, 249, 255, .92); --tbs-theme-card-bg: rgba(255, 255, 255, .92); --tbs-theme-border-color: rgba(147, 197, 253, .55); --tbs-theme-shadow-color: rgba(96, 165, 250, .20); --tbs-theme-soft-1: rgba(219, 234, 254, .94); --tbs-theme-soft-2: rgba(240, 249, 255, .92); --tbs-hero-overlay-top: rgba(255,255,255,.12); --tbs-hero-overlay-mid: rgba(255,255,255,.03); --tbs-hero-overlay-bottom: rgba(255,255,255,.22); } /* Osito Premium */ body.tbs-template-osito_premium, .tbs-template-osito_premium { --tbs-theme-color-base: #c4872d; --tbs-theme-color-acento: #f3b6c8; --tbs-theme-title-color: #b87818; --tbs-theme-subtitle-color: #9a6a35; --tbs-theme-text-color: #665142; --tbs-theme-font-title: "Libre Baskerville", Georgia, serif; --tbs-theme-font-body: "Nunito Sans", Inter, Arial, sans-serif; --tbs-theme-font-accent: "Marcellus", "Quicksand", Inter, Arial, sans-serif; --tbs-theme-title-weight: 700; --tbs-theme-body-weight: 600; --tbs-theme-accent-weight: 400; --tbs-theme-title-letter: -0.01em; --tbs-theme-body-letter: .004em; --tbs-theme-accent-letter: .055em; --tbs-theme-title-style: normal; --tbs-theme-title-line: 1.02; --tbs-theme-h2-line: 1.12; --tbs-theme-body-line: 1.68; --tbs-desktop-hero-min-height: clamp(520px, 76vh, 740px); --tbs-desktop-hero-position: center center; --tbs-desktop-hero-size: cover; --tbs-desktop-title-size: clamp(42px, 7.1vw, 76px); --tbs-desktop-h2-size: clamp(28px, 4.1vw, 48px); --tbs-desktop-h3-size: clamp(21px, 2.7vw, 29px); --tbs-desktop-body-size: clamp(15.7px, 1.25vw, 16.8px); --tbs-desktop-button-size: clamp(13.5px, 1.05vw, 14.5px); --tbs-desktop-title-max-width: 980px; --tbs-mobile-hero-min-height: 500px; --tbs-mobile-hero-position: center top; --tbs-mobile-hero-size: cover; --tbs-mobile-title-size: clamp(30px, 10.5vw, 48px); --tbs-mobile-h2-size: clamp(25px, 6.6vw, 38px); --tbs-mobile-h3-size: clamp(19px, 5vw, 26px); --tbs-mobile-title-line: 1.08; --tbs-mobile-title-letter: -0.012em; --tbs-mobile-title-max-width: 92vw; --tbs-theme-section-bg: rgba(255, 248, 238, .92); --tbs-theme-card-bg: rgba(255, 255, 255, .93); --tbs-theme-border-color: rgba(220, 169, 82, .42); --tbs-theme-shadow-color: rgba(181, 126, 46, .22); --tbs-theme-soft-1: rgba(255, 237, 213, .90); --tbs-theme-soft-2: rgba(254, 226, 226, .80); } /* ========================================================= 3) CONTENEDOR GENERAL ========================================================= */ body[data-tbs-template-evento], body[data-tbs-template-evento] .tbs-evento-publico, body[data-tbs-template-evento] .tbs-template-root, body[data-tbs-template-evento] .elementor-location-single, .tbs-evento-publico, .tbs-template-root { font-family: var(--tbs-theme-font-body) !important; color: var(--tbs-theme-text-color) !important; font-weight: var(--tbs-theme-body-weight) !important; letter-spacing: var(--tbs-theme-body-letter) !important; } .tbs-evento-publico, .tbs-template-root, body[data-tbs-template-evento] .tbs-evento-publico, body[data-tbs-template-evento] .tbs-template-root, body[data-tbs-template-evento] .elementor-location-single .tbs-evento-publico { position: relative !important; overflow: hidden !important; padding: var(--tbs-desktop-root-padding) !important; background-image: var(--tbs-theme-fondo) !important; background-size: cover !important; background-position: center top !important; background-repeat: no-repeat !important; background-attachment: scroll !important; } .tbs-evento-publico::before, .tbs-template-root::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; background: radial-gradient(circle at top right, rgba(255,255,255,.48), transparent 34%), radial-gradient(circle at bottom left, rgba(255,255,255,.38), transparent 36%), linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.12)) !important; } .tbs-evento-publico > *, .tbs-template-root > * { position: relative !important; z-index: 2 !important; } /* ========================================================= 4) HERO / HEADER ========================================================= */ .tbs-hero, .tbs-evento-hero, .tbs-template-hero, [data-tbs-section="hero"], .elementor-section.tbs-hero, .elementor-section.tbs-evento-hero, .elementor-element.tbs-hero, .elementor-element.tbs-evento-hero, .e-con.tbs-hero, .e-con.tbs-evento-hero, body[data-tbs-template-evento] .tbs-hero, body[data-tbs-template-evento] .tbs-evento-hero, body[data-tbs-template-evento] .elementor-element.tbs-hero, body[data-tbs-template-evento] .elementor-element.tbs-evento-hero, body[data-tbs-template-evento] .e-con.tbs-hero, body[data-tbs-template-evento] .e-con.tbs-evento-hero { position: relative !important; overflow: hidden !important; min-height: var(--tbs-desktop-hero-min-height) !important; background-image: var(--tbs-theme-hero) !important; background-size: var(--tbs-desktop-hero-size) !important; background-position: var(--tbs-desktop-hero-position) !important; background-repeat: no-repeat !important; background-color: transparent !important; border-radius: var(--tbs-desktop-hero-radius) !important; box-shadow: 0 28px 70px var(--tbs-theme-shadow-color) !important; } .tbs-hero::before, .tbs-evento-hero::before, .tbs-template-hero::before, .elementor-element.tbs-hero::before, .elementor-element.tbs-evento-hero::before, .e-con.tbs-hero::before, .e-con.tbs-evento-hero::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; background: linear-gradient( 180deg, var(--tbs-hero-overlay-top) 0%, var(--tbs-hero-overlay-mid) 46%, var(--tbs-hero-overlay-bottom) 100% ) !important; } .tbs-hero > *, .tbs-evento-hero > *, .tbs-template-hero > *, .elementor-element.tbs-hero > *, .elementor-element.tbs-evento-hero > *, .e-con.tbs-hero > *, .e-con.tbs-evento-hero > *, .tbs-hero > .e-con-inner, .tbs-evento-hero > .e-con-inner { position: relative !important; z-index: 2 !important; } /* ========================================================= 5) TIPOGRAFÍA ========================================================= */ body[data-tbs-template-evento] .tbs-template-title, body[data-tbs-template-evento] .tbs-nombre-bebe, body[data-tbs-template-evento] .tbs-template-title .elementor-heading-title, body[data-tbs-template-evento] .tbs-nombre-bebe .elementor-heading-title, body[data-tbs-template-evento] .tbs-hero .elementor-widget-heading:first-of-type .elementor-heading-title, body[data-tbs-template-evento] .tbs-evento-hero .elementor-widget-heading:first-of-type .elementor-heading-title, body[data-tbs-template-evento] .tbs-hero h1, body[data-tbs-template-evento] .tbs-evento-hero h1, body[data-tbs-template-evento] .tbs-evento-publico h1, body[data-tbs-template-evento] .tbs-template-root h1 { max-width: var(--tbs-desktop-title-max-width) !important; margin-top: var(--tbs-desktop-title-margin-top) !important; margin-left: var(--tbs-desktop-title-margin-left) !important; font-family: var(--tbs-theme-font-title) !important; font-size: var(--tbs-desktop-title-size) !important; font-weight: var(--tbs-theme-title-weight) !important; font-style: var(--tbs-theme-title-style) !important; line-height: var(--tbs-theme-title-line) !important; letter-spacing: var(--tbs-theme-title-letter) !important; text-transform: var(--tbs-theme-title-transform) !important; color: var(--tbs-theme-title-color) !important; text-wrap: balance !important; text-shadow: 0 2px 0 rgba(255,255,255,.78), 0 14px 30px var(--tbs-theme-shadow-color) !important; } body[data-tbs-template-evento] .tbs-evento-publico h2, body[data-tbs-template-evento] .tbs-template-root h2, body[data-tbs-template-evento] .tbs-template-section h2, body[data-tbs-template-evento] .tbs-template-section .elementor-heading-title, body[data-tbs-template-evento] .tbs-evento-publico .elementor-widget-heading:not(:first-of-type) .elementor-heading-title, body[data-tbs-template-evento] .tbs-template-root .elementor-widget-heading:not(:first-of-type) .elementor-heading-title { font-family: var(--tbs-theme-font-title) !important; font-size: var(--tbs-desktop-h2-size) !important; font-weight: var(--tbs-theme-title-weight) !important; font-style: var(--tbs-theme-title-style) !important; line-height: var(--tbs-theme-h2-line) !important; letter-spacing: calc(var(--tbs-theme-title-letter) * .65) !important; color: var(--tbs-theme-title-color) !important; text-shadow: 0 2px 0 rgba(255,255,255,.72), 0 10px 22px var(--tbs-theme-shadow-color) !important; } body[data-tbs-template-evento] .tbs-template-subtitle, body[data-tbs-template-evento] .tbs-evento-publico h3, body[data-tbs-template-evento] .tbs-evento-publico h4, body[data-tbs-template-evento] .tbs-template-root h3, body[data-tbs-template-evento] .tbs-template-root h4 { font-family: var(--tbs-theme-font-accent) !important; font-size: var(--tbs-desktop-h3-size) !important; font-weight: var(--tbs-theme-accent-weight) !important; color: var(--tbs-theme-subtitle-color) !important; letter-spacing: var(--tbs-theme-accent-letter) !important; line-height: 1.25 !important; } body[data-tbs-template-evento] .tbs-template-text, body[data-tbs-template-evento] .tbs-evento-publico p, body[data-tbs-template-evento] .tbs-template-root p, body[data-tbs-template-evento] .tbs-evento-publico li, body[data-tbs-template-evento] .tbs-template-root li, body[data-tbs-template-evento] .tbs-evento-publico .elementor-widget-text-editor, body[data-tbs-template-evento] .tbs-template-root .elementor-widget-text-editor, body[data-tbs-template-evento] .tbs-evento-publico .elementor-widget-text-editor *, body[data-tbs-template-evento] .tbs-template-root .elementor-widget-text-editor * { font-family: var(--tbs-theme-font-body) !important; font-size: var(--tbs-desktop-body-size) !important; font-weight: var(--tbs-theme-body-weight) !important; line-height: var(--tbs-theme-body-line) !important; letter-spacing: var(--tbs-theme-body-letter) !important; color: var(--tbs-theme-text-color) !important; } body[data-tbs-template-evento] .tbs-template-label, body[data-tbs-template-evento] .tbs-evento-publico small, body[data-tbs-template-evento] .tbs-template-root small, body[data-tbs-template-evento] .tbs-evento-publico .elementor-icon-list-text, body[data-tbs-template-evento] .tbs-template-root .elementor-icon-list-text { font-family: var(--tbs-theme-font-accent) !important; font-size: var(--tbs-desktop-small-size) !important; font-weight: var(--tbs-theme-accent-weight) !important; letter-spacing: var(--tbs-theme-accent-letter) !important; color: var(--tbs-theme-subtitle-color) !important; } /* ========================================================= 6) VARIACIONES EXTRA ========================================================= */ body.tbs-template-babyshower_dulce_llegada .tbs-template-title, body.tbs-template-babyshower_dulce_llegada .tbs-template-title .elementor-heading-title, body.tbs-template-babyshower_dulce_llegada .tbs-nombre-bebe, body.tbs-template-babyshower_dulce_llegada .tbs-nombre-bebe .elementor-heading-title, body.tbs-template-babyshower_dulce_llegada .tbs-hero .elementor-heading-title, body.tbs-template-babyshower_dulce_llegada .tbs-evento-hero .elementor-heading-title { font-family: "Playfair Display", Georgia, serif !important; font-style: normal !important; font-weight: 900 !important; } body.tbs-template-dulce_cielo .tbs-template-title, body.tbs-template-dulce_cielo .tbs-template-title .elementor-heading-title, body.tbs-template-dulce_cielo .tbs-nombre-bebe, body.tbs-template-dulce_cielo .tbs-nombre-bebe .elementor-heading-title, body.tbs-template-dulce_cielo .tbs-hero .elementor-heading-title, body.tbs-template-dulce_cielo .tbs-evento-hero .elementor-heading-title { font-family: "Cormorant Garamond", Georgia, serif !important; font-style: italic !important; font-weight: 600 !important; } body.tbs-template-osito_premium .tbs-template-title, body.tbs-template-osito_premium .tbs-template-title .elementor-heading-title, body.tbs-template-osito_premium .tbs-nombre-bebe, body.tbs-template-osito_premium .tbs-nombre-bebe .elementor-heading-title, body.tbs-template-osito_premium .tbs-hero .elementor-heading-title, body.tbs-template-osito_premium .tbs-evento-hero .elementor-heading-title { font-family: "Libre Baskerville", Georgia, serif !important; font-style: normal !important; font-weight: 700 !important; } /* ========================================================= 7) BOTONES ========================================================= */ .tbs-btn, .tbs-template-button, .tbs-evento-publico a.elementor-button, .tbs-template-root a.elementor-button, .tbs-evento-publico .elementor-button, .tbs-template-root .elementor-button, body[data-tbs-template-evento] .elementor-button { font-family: var(--tbs-theme-font-accent) !important; font-size: var(--tbs-desktop-button-size) !important; font-weight: 900 !important; letter-spacing: .04em !important; color: var(--tbs-theme-button-text-color) !important; border: none !important; border-radius: 18px !important; background: linear-gradient( 135deg, var(--tbs-theme-color-base), var(--tbs-theme-color-acento) ) !important; box-shadow: 0 16px 34px var(--tbs-theme-shadow-color), inset 0 1px 0 rgba(255,255,255,.34) !important; transition: transform .22s ease, box-shadow .22s ease, filter .22s ease !important; } .tbs-btn:hover, .tbs-template-button:hover, .tbs-evento-publico a.elementor-button:hover, .tbs-template-root a.elementor-button:hover, .tbs-evento-publico .elementor-button:hover, .tbs-template-root .elementor-button:hover { transform: translateY(-2px) !important; filter: brightness(1.04) !important; box-shadow: 0 22px 44px var(--tbs-theme-shadow-color), inset 0 1px 0 rgba(255,255,255,.38) !important; } body.tbs-template-dulce_cielo .tbs-btn, body.tbs-template-dulce_cielo .tbs-template-button, body.tbs-template-dulce_cielo .elementor-button { border-radius: 999px !important; letter-spacing: .08em !important; } body.tbs-template-osito_premium .tbs-btn, body.tbs-template-osito_premium .tbs-template-button, body.tbs-template-osito_premium .elementor-button { border-radius: 14px !important; letter-spacing: .06em !important; } /* ========================================================= 8) SECCIONES INTERNAS ========================================================= */ .tbs-template-section, .tbs-section-rsvp, .tbs-section-guestbook, .tbs-section-regalos, .tbs-section-regalos-virtuales { border-radius: 30px !important; background: var(--tbs-theme-section-bg) !important; box-shadow: 0 18px 46px var(--tbs-theme-shadow-color) !important; backdrop-filter: blur(10px) !important; } .tbs-template-card, .tbs-evento-publico .elementor-widget-container, .tbs-template-root .elementor-widget-container { border-radius: inherit; } /* ========================================================= 9) FALLBACK DESKTOP ========================================================= */ body.tbs-template-babyshower_dulce_llegada .tbs-evento-publico, body.tbs-template-babyshower_dulce_llegada .tbs-template-root { background-image: url("/wp-content/uploads/DisenosEvento/babyshower-dulce-llegada-fondo.jpg") !important; } body.tbs-template-dulce_cielo .tbs-evento-publico, body.tbs-template-dulce_cielo .tbs-template-root { background-image: url("/wp-content/uploads/DisenosEvento/dulce-cielo-fondo.jpg") !important; } body.tbs-template-osito_premium .tbs-evento-publico, body.tbs-template-osito_premium .tbs-template-root { background-image: url("/wp-content/uploads/DisenosEvento/osito-premium-fondo.jpg") !important; } body.tbs-template-babyshower_dulce_llegada .tbs-hero, body.tbs-template-babyshower_dulce_llegada .tbs-evento-hero, body.tbs-template-babyshower_dulce_llegada .e-con.tbs-hero, body.tbs-template-babyshower_dulce_llegada .e-con.tbs-evento-hero { background-image: url("/wp-content/uploads/DisenosEvento/babyshower-dulce-llegada-hero.jpg") !important; } body.tbs-template-dulce_cielo .tbs-hero, body.tbs-template-dulce_cielo .tbs-evento-hero, body.tbs-template-dulce_cielo .e-con.tbs-hero, body.tbs-template-dulce_cielo .e-con.tbs-evento-hero { background-image: url("/wp-content/uploads/DisenosEvento/dulce-cielo-hero.jpg") !important; } body.tbs-template-osito_premium .tbs-hero, body.tbs-template-osito_premium .tbs-evento-hero, body.tbs-template-osito_premium .e-con.tbs-hero, body.tbs-template-osito_premium .e-con.tbs-evento-hero { background-image: url("/wp-content/uploads/DisenosEvento/osito-premium-hero.jpg") !important; } /* ========================================================= 10) PANEL / SELECTOR ========================================================= */ body.tbs-template-babyshower_dulce_llegada .evento-saas, body.tbs-template-babyshower_dulce_llegada .mi-evento-form, body.tbs-template-babyshower_dulce_llegada .tbs-template-selector { background: radial-gradient(circle at 10% 0%, var(--tbs-theme-soft-1), transparent 34%), radial-gradient(circle at 92% 14%, var(--tbs-theme-soft-2), transparent 34%), linear-gradient(180deg, #ffffff 0%, #fff8fc 100%) !important; } body.tbs-template-dulce_cielo .evento-saas, body.tbs-template-dulce_cielo .mi-evento-form, body.tbs-template-dulce_cielo .tbs-template-selector { background: radial-gradient(circle at 12% 0%, var(--tbs-theme-soft-1), transparent 34%), radial-gradient(circle at 92% 14%, var(--tbs-theme-soft-2), transparent 34%), linear-gradient(180deg, #ffffff 0%, #f3fbff 100%) !important; border-color: var(--tbs-theme-border-color) !important; } body.tbs-template-osito_premium .evento-saas, body.tbs-template-osito_premium .mi-evento-form, body.tbs-template-osito_premium .tbs-template-selector { background: radial-gradient(circle at 10% 0%, var(--tbs-theme-soft-1), transparent 34%), radial-gradient(circle at 92% 14%, var(--tbs-theme-soft-2), transparent 34%), linear-gradient(180deg, #ffffff 0%, #fff8f1 100%) !important; border-color: var(--tbs-theme-border-color) !important; } body.tbs-template-babyshower_dulce_llegada .evento-info h3, body.tbs-template-babyshower_dulce_llegada .tbs-plan-badge-text strong, body.tbs-template-dulce_cielo .evento-info h3, body.tbs-template-dulce_cielo .tbs-plan-badge-text strong, body.tbs-template-osito_premium .evento-info h3, body.tbs-template-osito_premium .tbs-plan-badge-text strong { color: var(--tbs-theme-title-color) !important; } body.tbs-template-dulce_cielo .tbs-plan-badge-icon, body.tbs-template-dulce_cielo .tbs-upgrade-icon, body.tbs-template-osito_premium .tbs-plan-badge-icon, body.tbs-template-osito_premium .tbs-upgrade-icon { background: linear-gradient(135deg, var(--tbs-theme-color-base), var(--tbs-theme-color-acento), #c8a7ff) !important; } /* ========================================================= 11) SELECTOR VISUAL ========================================================= */ .tbs-template-selector { position: relative !important; overflow: hidden !important; margin: 0 auto 26px !important; padding: 26px !important; border-radius: 30px !important; background: radial-gradient(circle at 8% 0%, var(--tbs-theme-soft-1), transparent 34%), radial-gradient(circle at 94% 10%, var(--tbs-theme-soft-2), transparent 32%), linear-gradient(180deg, #ffffff 0%, #fff8fc 100%) !important; border: 1px solid var(--tbs-theme-border-color) !important; box-shadow: 0 22px 55px var(--tbs-theme-shadow-color), inset 0 1px 0 rgba(255,255,255,.95) !important; } .tbs-template-selector-head { text-align: center !important; margin-bottom: 22px !important; } .tbs-template-selector-head span { display: inline-flex !important; margin-bottom: 7px !important; color: var(--tbs-theme-title-color) !important; font-size: 12px !important; font-weight: 950 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } .tbs-template-selector-head h3 { margin: 0 !important; color: var(--tbs-theme-title-color) !important; font-family: var(--tbs-theme-font-title) !important; font-size: clamp(24px, 3.2vw, 34px) !important; line-height: 1.1 !important; font-weight: 950 !important; } .tbs-template-selector-head p { margin: 8px auto 0 !important; max-width: 660px !important; color: var(--tbs-theme-subtitle-color) !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.45 !important; } .tbs-template-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px !important; align-items: stretch !important; } .tbs-template-card { appearance: none !important; -webkit-appearance: none !important; position: relative !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; width: 100% !important; min-height: 390px !important; padding: 0 !important; border: 2px solid var(--tbs-theme-border-color) !important; border-radius: 26px !important; background: var(--tbs-theme-card-bg) !important; color: inherit !important; box-shadow: 0 14px 32px var(--tbs-theme-shadow-color) !important; cursor: pointer !important; text-align: left !important; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, filter .22s ease !important; } .tbs-template-card:hover { transform: translateY(-5px) !important; border-color: var(--tbs-theme-color-acento) !important; box-shadow: 0 22px 46px var(--tbs-theme-shadow-color) !important; } .tbs-template-card.is-active { border-color: var(--tbs-theme-color-base) !important; box-shadow: 0 22px 48px var(--tbs-theme-shadow-color), 0 0 0 4px rgba(249, 168, 212, .18) !important; } .tbs-template-card::after { content: "✓" !important; position: absolute !important; top: 14px !important; right: 14px !important; z-index: 8 !important; width: 36px !important; height: 36px !important; border-radius: 50% !important; background: linear-gradient(135deg, var(--tbs-theme-color-base) 0%, var(--tbs-theme-color-acento) 100%) !important; color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; font-weight: 950 !important; box-shadow: 0 10px 22px var(--tbs-theme-shadow-color) !important; opacity: 0 !important; transform: scale(.76) !important; transition: all .22s ease !important; } .tbs-template-card.is-active::after { opacity: 1 !important; transform: scale(1) !important; } .tbs-template-preview { width: 100% !important; height: 285px !important; min-height: 285px !important; aspect-ratio: auto !important; background-size: cover !important; background-position: center top !important; background-repeat: no-repeat !important; transition: transform .35s ease !important; } .tbs-template-card:hover .tbs-template-preview { transform: scale(1.035) !important; } .tbs-template-info { flex: 1 !important; padding: 16px 16px 12px !important; background: linear-gradient(180deg, #ffffff 0%, var(--tbs-theme-section-bg) 100%) !important; } .tbs-template-info strong { display: block !important; color: var(--tbs-theme-title-color) !important; font-family: var(--tbs-theme-font-accent) !important; font-size: 16px !important; font-weight: 950 !important; line-height: 1.15 !important; margin-bottom: 6px !important; } .tbs-template-info span { display: block !important; color: var(--tbs-theme-text-color) !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.4 !important; } .tbs-template-check { margin: 0 16px 16px !important; min-height: 36px !important; border-radius: 999px !important; background: var(--tbs-theme-section-bg) !important; color: var(--tbs-theme-title-color) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 12px !important; font-weight: 950 !important; } .tbs-template-card.is-active .tbs-template-check { background: linear-gradient(135deg, var(--tbs-theme-color-base) 0%, var(--tbs-theme-color-acento) 100%) !important; color: #ffffff !important; } .tbs-template-message { margin-top: 16px !important; padding: 12px 14px !important; border-radius: 16px !important; font-weight: 850 !important; font-size: 13px !important; text-align: center !important; } .tbs-template-message.is-success { background: #ecfdf5 !important; color: #047857 !important; } .tbs-template-message.is-error { background: #fff1f2 !important; color: #be123c !important; } .tbs-template-selector.is-saving, .tbs-template-card.is-loading { opacity: .72 !important; pointer-events: none !important; } /* ========================================================= 12) MOBILE / TABLET ========================================================= */ @media (max-width: 900px) { .tbs-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 768px) { .tbs-evento-publico, .tbs-template-root { padding: var(--tbs-mobile-root-padding) !important; background-image: var(--tbs-theme-fondo-mobile) !important; background-size: cover !important; background-position: center top !important; } .tbs-hero, .tbs-evento-hero, .tbs-template-hero, .elementor-element.tbs-hero, .elementor-element.tbs-evento-hero, .e-con.tbs-hero, .e-con.tbs-evento-hero { min-height: var(--tbs-mobile-hero-min-height) !important; background-image: var(--tbs-theme-hero-mobile) !important; background-position: var(--tbs-mobile-hero-position) !important; background-size: var(--tbs-mobile-hero-size) !important; border-radius: var(--tbs-mobile-hero-radius) !important; } body[data-tbs-template-evento] .tbs-template-title, body[data-tbs-template-evento] .tbs-nombre-bebe, body[data-tbs-template-evento] .tbs-template-title .elementor-heading-title, body[data-tbs-template-evento] .tbs-nombre-bebe .elementor-heading-title, body[data-tbs-template-evento] .tbs-hero .elementor-widget-heading:first-of-type .elementor-heading-title, body[data-tbs-template-evento] .tbs-evento-hero .elementor-widget-heading:first-of-type .elementor-heading-title, body[data-tbs-template-evento] .tbs-hero h1, body[data-tbs-template-evento] .tbs-evento-hero h1, body[data-tbs-template-evento] .tbs-evento-publico h1, body[data-tbs-template-evento] .tbs-template-root h1 { max-width: var(--tbs-mobile-title-max-width) !important; margin-top: var(--tbs-mobile-title-margin-top) !important; margin-left: var(--tbs-mobile-title-margin-left) !important; font-size: var(--tbs-mobile-title-size) !important; line-height: var(--tbs-mobile-title-line) !important; letter-spacing: var(--tbs-mobile-title-letter) !important; } body[data-tbs-template-evento] .tbs-evento-publico h2, body[data-tbs-template-evento] .tbs-template-root h2, body[data-tbs-template-evento] .tbs-template-section h2, body[data-tbs-template-evento] .tbs-template-section .elementor-heading-title, body[data-tbs-template-evento] .tbs-evento-publico .elementor-widget-heading:not(:first-of-type) .elementor-heading-title, body[data-tbs-template-evento] .tbs-template-root .elementor-widget-heading:not(:first-of-type) .elementor-heading-title { font-size: var(--tbs-mobile-h2-size) !important; line-height: 1.12 !important; } body[data-tbs-template-evento] .tbs-template-subtitle, body[data-tbs-template-evento] .tbs-evento-publico h3, body[data-tbs-template-evento] .tbs-evento-publico h4, body[data-tbs-template-evento] .tbs-template-root h3, body[data-tbs-template-evento] .tbs-template-root h4 { font-size: var(--tbs-mobile-h3-size) !important; } body[data-tbs-template-evento] .tbs-template-text, body[data-tbs-template-evento] .tbs-evento-publico p, body[data-tbs-template-evento] .tbs-template-root p, body[data-tbs-template-evento] .tbs-evento-publico li, body[data-tbs-template-evento] .tbs-template-root li, body[data-tbs-template-evento] .tbs-evento-publico .elementor-widget-text-editor, body[data-tbs-template-evento] .tbs-template-root .elementor-widget-text-editor, body[data-tbs-template-evento] .tbs-evento-publico .elementor-widget-text-editor *, body[data-tbs-template-evento] .tbs-template-root .elementor-widget-text-editor * { font-size: var(--tbs-mobile-body-size) !important; line-height: 1.62 !important; } body[data-tbs-template-evento] .tbs-template-label, body[data-tbs-template-evento] .tbs-evento-publico small, body[data-tbs-template-evento] .tbs-template-root small, body[data-tbs-template-evento] .tbs-evento-publico .elementor-icon-list-text, body[data-tbs-template-evento] .tbs-template-root .elementor-icon-list-text { font-size: var(--tbs-mobile-small-size) !important; } .tbs-btn, .tbs-template-button, .tbs-evento-publico a.elementor-button, .tbs-template-root a.elementor-button, .tbs-evento-publico .elementor-button, .tbs-template-root .elementor-button, body[data-tbs-template-evento] .elementor-button { font-size: var(--tbs-mobile-button-size) !important; min-height: 46px !important; padding-left: 18px !important; padding-right: 18px !important; } .tbs-template-section, .tbs-section-rsvp, .tbs-section-guestbook, .tbs-section-regalos, .tbs-section-regalos-virtuales { border-radius: 22px !important; box-shadow: 0 14px 34px var(--tbs-theme-shadow-color) !important; } } /* Fallback mobile: si tienes archivos mobile con estos nombres, se usarán aunque falte la variable PHP. */ @media (max-width: 768px) { body.tbs-template-babyshower_dulce_llegada .tbs-evento-publico, body.tbs-template-babyshower_dulce_llegada .tbs-template-root { background-image: url("/wp-content/uploads/DisenosEvento/babyshower-dulce-llegada-fondo-mobile.jpg") !important; } body.tbs-template-dulce_cielo .tbs-evento-publico, body.tbs-template-dulce_cielo .tbs-template-root { background-image: url("/wp-content/uploads/DisenosEvento/dulce-cielo-fondo-mobile.jpg") !important; } body.tbs-template-osito_premium .tbs-evento-publico, body.tbs-template-osito_premium .tbs-template-root { background-image: url("/wp-content/uploads/DisenosEvento/osito-premium-fondo-mobile.jpg") !important; } body.tbs-template-babyshower_dulce_llegada .tbs-hero, body.tbs-template-babyshower_dulce_llegada .tbs-evento-hero, body.tbs-template-babyshower_dulce_llegada .e-con.tbs-hero, body.tbs-template-babyshower_dulce_llegada .e-con.tbs-evento-hero { background-image: url("/wp-content/uploads/DisenosEvento/babyshower-dulce-llegada-hero-mobile.jpg") !important; } body.tbs-template-dulce_cielo .tbs-hero, body.tbs-template-dulce_cielo .tbs-evento-hero, body.tbs-template-dulce_cielo .e-con.tbs-hero, body.tbs-template-dulce_cielo .e-con.tbs-evento-hero { background-image: url("/wp-content/uploads/DisenosEvento/dulce-cielo-hero-mobile.jpg") !important; } body.tbs-template-osito_premium .tbs-hero, body.tbs-template-osito_premium .tbs-evento-hero, body.tbs-template-osito_premium .e-con.tbs-hero, body.tbs-template-osito_premium .e-con.tbs-evento-hero { background-image: url("/wp-content/uploads/DisenosEvento/osito-premium-hero-mobile.jpg") !important; } } @media (max-width: 600px) { .tbs-template-selector { padding: 20px !important; border-radius: 22px !important; } .tbs-template-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .tbs-template-card { min-height: 350px !important; border-radius: 22px !important; } .tbs-template-preview { height: 270px !important; min-height: 270px !important; } } @media (max-width: 420px) { body.tbs-template-babyshower_dulce_llegada { --tbs-mobile-title-size: clamp(32px, 12vw, 52px); --tbs-mobile-hero-min-height: 490px; } body.tbs-template-dulce_cielo { --tbs-mobile-title-size: clamp(36px, 13vw, 58px); --tbs-mobile-hero-min-height: 500px; } body.tbs-template-osito_premium { --tbs-mobile-title-size: clamp(29px, 10.2vw, 46px); --tbs-mobile-hero-min-height: 490px; --tbs-mobile-hero-position: center top; } }