/*! * Glass Glow (Violeta/Azul con halo neón) * Aplica utilidades con clases: gg-* * Autor: Glass Glow */ /* ============================= Variables base ============================= */ :root { --gg-bg: #0b0b0f; --gg-fg: #ffffff; --gg-muted: rgba(255,255,255,0.7); /* Gradiente */ --gg-grad-start: #6366f1; /* indigo-500 */ --gg-grad-mid: #8b5cf6; /* violet-500 */ --gg-grad-end: #22d3ee; /* cyan-400 */ /* Bordes / anillos / brillos */ --gg-border: hsl(214.3 31.8% 91.4%); --gg-ring: rgba(139,92,246,0.60); --gg-glow-strong: 0 0 40px rgba(139,92,246,0.45); --gg-glow-soft: 0 0 24px rgba(139,92,246,0.30); /* Sombra de texto neón (violeta + cian) */ --gg-text-glow: 0 0 18px rgba(139,92,246,0.80), 0 0 36px rgba(6,182,212,0.35); /* Radios y espaciados recomendados */ --gg-radius: 1.25rem; /* 20px aprox */ --gg-radius-lg: 1.75rem; --gg-pad: 1rem; --gg-gap: 1rem; } @supports (color: color-mix(in lab, red, red)) { :root{ --gg-border: color-mix(in oklab, #ffffff 5%, transparent); } } *::selection{ background-color: color-mix(in oklab, #ffffff 10%, transparent); } /* Reset temático opcional (aplicar a o sección contenedora) */ .gg-theme-bg { background: var(--gg-bg); color: var(--gg-fg); } /* ============================= Utilidades de gradiente y brillo ============================= */ .gg-gradient { background-image: linear-gradient(135deg, var(--gg-grad-start), var(--gg-grad-mid), var(--gg-grad-end)); } .gg-gradient-h { background-image: linear-gradient(90deg, var(--gg-grad-start), var(--gg-grad-mid), var(--gg-grad-end)); } .gg-border { border: 1px solid var(--gg-border); } .gg-border-bottom{ border-bottom: 1px solid var(--gg-border); } .gg-ring { box-shadow: 0 0 0 2px var(--gg-ring); } .gg-glow-strong { box-shadow: var(--gg-glow-strong); } .gg-glow-soft { box-shadow: var(--gg-glow-soft); } .gg-text-glow { text-shadow: var(--gg-text-glow); } /* Halos decorativos (útil en secciones Hero) */ .gg-halo, .gg-halo-center { position: relative; overflow: hidden; } .gg-halo .e-con-inner::before, .gg-halo .e-con-inner::after { content: ""; z-index: 0; position: absolute; pointer-events: none; filter: blur(60px); opacity: 0.28; width: 28rem; height: 28rem; border-radius: 50%; background-image: linear-gradient(135deg, var(--gg-grad-start), var(--gg-grad-mid), var(--gg-grad-end)); } .gg-halo .e-con-inner::before { top: -6rem; right: -6rem; } .gg-halo .e-con-inner::after { bottom: -6rem; left: -6rem; opacity: 0.20; } .gg-halo-center .e-con-inner::before { content: ""; z-index: 0; position: absolute; pointer-events: none; filter: blur(60px); opacity: 0.28; width: 28rem; height: 28rem; border-radius: 50%; background-image: linear-gradient(135deg, var(--gg-grad-start), var(--gg-grad-mid), var(--gg-grad-end)); top: -16rem; left: 50%; transform: translateX(-50%); } /* ============================= Tipografía sugerida ============================= */ .gg-h1 { font-weight: 900; line-height: 1.1; font-size: clamp(2.2rem, 5vw, 3.5rem); } .gg-h2 { font-weight: 800; line-height: 1.15; font-size: clamp(1.6rem, 3.5vw, 2.4rem); } .gg-lead { color: var(--gg-muted); font-size: clamp(1rem, 2.2vw, 1.125rem); } /* ============================= Botones ============================= */ .gg-btn .elementor-button, .gform_button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .9rem 1.4rem; border-radius: 9999px; font-weight: 700; text-decoration: none; transition: transform .15s ease, filter .15s ease, box-shadow .15s ease !important; border: none !important; color: #fff; } .gform_button{ box-shadow: var(--gg-glow-soft); } .gg-btn .elementor-button:hover, .gform_button:hover { filter: brightness(1.05); color: #fff; } .gg-btn .elementor-button:active, .gform_button:active { filter: brightness(.98); } .gg-btn-primary .elementor-button, .gform_button { background-image: linear-gradient(90deg, var(--gg-grad-start), var(--gg-grad-mid), var(--gg-grad-end)); box-shadow: var(--gg-glow-strong); color: #fff; } /* Variante “chip” pequeña */ .gg-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .7rem; border-radius: 9999px; font-size: .8rem; border: 1px solid var(--gg-border); background: rgba(255,255,255,0.06); } .gg-icon-bg .elementor-icon{ background-image: linear-gradient(to bottom right in oklab, oklch(58.5% 0.233 277.117) 0%, oklch(60.6% 0.25 292.717) 50%, oklch(78.9% 0.154 211.53) 100%); box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, var(--gg-glow-strong); } .gg-icon-bg-circle svg{ background-image: linear-gradient(to bottom right in oklab, oklch(58.5% 0.233 277.117) 0%, oklch(60.6% 0.25 292.717) 50%, oklch(78.9% 0.154 211.53) 100%); border-radius: 50%; padding: 4px; } /* ============================= Tarjetas / contenedores “glass” ============================= */ .gg-header{ background: rgba(255,255,255,0.05); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-color: var(--gg-border); border-bottom-width: 1px; border-bottom-style: solid; } .gg-card { background: rgba(255,255,255,0.05); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: var(--gg-radius-lg); padding: calc(var(--gg-pad) * 1.5); border: 1px solid var(--gg-border); } .gg-card:hover { background: rgba(255,255,255,0.07); } .gg-bg-gray{ background-color: color-mix(in srgb, #fff 5%, transparent) } .gg-bg-gray-hover:hover{ background-color: color-mix(in srgb, #ffffff 7%, transparent); } .gg-border-violet, .gg-img-border-2 img { border-color: color-mix(in oklab, oklch(60.6% 0.25 292.717) 30%, transparent); border-style: solid; border-width: 1px; } .gg-img-border .e-gallery-item, .gg-img-border-2 img{ border-color: color-mix(in oklab, oklch(60.6% 0.25 292.717) 30%, transparent); border-style: solid; border-width: 1px; box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, var(--gg-glow-strong); border-radius: 1rem; } .gg-border-shadow{ box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, var(--gg-glow-strong); } .gg-backdrop-blur{ -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } @supports (color: color-mix(in lab, red, red)){ .gg-bg-gray{ background-color: color-mix(in oklab, #ffffff 5%, transparent); } .gg-bg-gray-hover:hover{ background-color: color-mix(in oklab, #ffffff 7%, transparent); } } /* ============================= Secciones ============================= */ .gg-section { padding-block: clamp(3rem, 6vw, 6rem); border-top: 1px solid rgba(255,255,255,0.05); } /* ============================= Helpers de espaciado ============================= */ .gg-stack > * + * { margin-top: var(--gg-gap); } .gg-inline > * + * { margin-left: var(--gg-gap); } /* ============================= Formularios (inputs minimal) ============================= */ .gg-input, .gg-textarea, .gg-select { width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: #fff; border-radius: 0.75rem; padding: 0.85rem 1rem; outline: none; transition: border-color .15s ease, box-shadow .15s ease; } .gg-input::placeholder, .gg-textarea::placeholder { color: rgba(255,255,255,0.55); } .gg-input:focus, .gg-textarea:focus, .gg-select:focus { border-color: rgba(255,255,255,0.3); box-shadow: 0 0 0 2px rgba(255,255,255,0.08); } /* ============================= Varios ============================= */ .gg-muted { color: var(--gg-muted); } .gg-round { border-radius: var(--gg-radius); } .gg-round-lg { border-radius: var(--gg-radius-lg); } .gg-center { text-align: center; } .gg-shadow { box-shadow: var(--gg-glow-soft); } /* Forms */ .gform-theme--framework .gfield:where(.gfield--type-multiselect,.gfield--input-type-multiselect) .chosen-container-multi:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework .gfield:where(.gfield--type-select,.gfield--input-type-select) .chosen-search input[type=text]:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework .gfield:where(.gfield--type-select,.gfield--input-type-select) .chosen-single:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework .gform-theme-field-control:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework input[type]:where(:not(.gform-text-input-reset):not([type=hidden])):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework select:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework select[multiple]:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework textarea:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework.gform-theme.gform_wrapper .button:where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework.gform-theme.gform_wrapper .gform-theme-button:where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework.gform-theme.gform_wrapper :where(:not(.mce-splitbtn))>button:not([id*=mceu_]):not(.mce-open):where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework.gform-theme.gform_wrapper button.button:where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework.gform-theme.gform_wrapper input:is([type=submit],[type=button],[type=reset]).button:where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework.gform-theme.gform_wrapper input:is([type=submit],[type=button],[type=reset]):where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework.gform-theme.gform_wrapper input[type=submit].button.gform_button:where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)) { background-color: color-mix(in oklab, #fff 6%, transparent); border-color: color-mix(in oklab, #fff 10%, transparent); border-radius: 0.75rem; padding: 12px 16px; min-height: 50px; color: #fff; outline: none !important; } .gform-theme--foundation .gform_fields { row-gap: 1rem; } .gform-theme--foundation input::placeholder, .gform-theme--foundation textarea::placeholder { color: rgba(255, 255, 255, 0.5) !important; } input.datepicker { width: 100% !important; } .gform-theme--framework.ui-datepicker select.ui-datepicker-month, .gform-theme--framework.ui-datepicker select.ui-datepicker-year { color: #000; padding: 0 10px; min-height: unset !important; }