/* ═══════════════════════════════════════════════════════════ Liquid Glass — capa de estilo OPCIONAL y REVERSIBLE. Para ACTIVAR: incluir este archivo en el DESPUÉS de styles.css: Para REVERTIR: quitar esa línea. No modifica styles.css. ═══════════════════════════════════════════════════════════ */ /* Fondo con manchas de color para que el vidrio tenga algo que refractar */ body { background: radial-gradient(42rem 42rem at 8% -5%, #E39D3C26, transparent 60%), radial-gradient(46rem 46rem at 95% 12%, #AF2D7626, transparent 60%), radial-gradient(40rem 40rem at 50% 110%, #6a9bd81f, transparent 60%), var(--bg) !important; background-attachment: fixed !important; } /* ---- Mixin visual del vidrio (aplicado a superficies clave) ---- */ .header, .card, .stats-bar, .presencia, .robotica, .caso, .list-item, .legal-table, .sol-filtro, .pais-chip, .aws-badge-item { background: rgba(255, 255, 255, 0.5) !important; backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.6) !important; box-shadow: 0 8px 32px rgba(43, 43, 43, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 0 rgba(255, 255, 255, 0.2) !important; position: relative; } /* Reflejo "líquido" superior en las tarjetas y superficies grandes */ .card::after, .stats-bar::after, .presencia::after, .robotica::after, .caso::after, .cta-final::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 42%); z-index: 0; } /* Mantener el contenido por encima del reflejo */ .card > *, .caso > *, .presencia > *, .robotica > *, .cta-final > * { position: relative; z-index: 1; } /* Header: fijo arriba, translúcido con blur (barra flotante) */ .header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 1000 !important; background: rgba(251, 244, 247, 0.72) !important; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); } /* La CTA final (con gradiente) se queda con su color pero gana el brillo */ .cta-final { position: relative; box-shadow: 0 16px 40px rgba(175, 45, 118, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important; } /* Botón "ghost" como vidrio */ .btn-ghost { background: rgba(255, 255, 255, 0.5) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.6) !important; } /* Filtros de soluciones (pestañas) como vidrio */ .sol-filtro { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .sol-filtro.active { background: var(--accent-gradient) !important; border-color: transparent !important; } /* Filtros de soluciones (panel lateral): acordeón y pills como vidrio */ .sol-acc { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .sol-acc-ico, .sol-pill { background: var(--accent-gradient) !important; } /* Carrusel: la tarjeta central ya tiene su media; el glow se intensifica */ .hc-glow { opacity: 0.9; } /* Suaviza bordes de los íconos de capacidades */ .card .icon { background: rgba(175, 45, 118, 0.12) !important; } /* ═══════════════════════════════════════════════════════════ Liquid Glass — CMS (/cms/). Superficies del panel admin. ═══════════════════════════════════════════════════════════ */ .cms-body { background: radial-gradient(42rem 42rem at 8% -5%, #E39D3C26, transparent 60%), radial-gradient(46rem 46rem at 95% 12%, #AF2D7626, transparent 60%), radial-gradient(40rem 40rem at 50% 110%, #6a9bd81f, transparent 60%), var(--bg) !important; background-attachment: fixed !important; } .cms-auth-card, .cms-header, .cms-side, .cms-item, .cms-modal, .cms-reorder-item, .cms-media-box, .cms-check { background: rgba(255, 255, 255, 0.55) !important; backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.6) !important; box-shadow: 0 8px 32px rgba(43, 43, 43, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important; } /* Header y sidebar del CMS un poco más translúcidos */ .cms-header { background: rgba(255, 255, 255, 0.5) !important; } .cms-side { background: rgba(255, 255, 255, 0.4) !important; } /* Fondo del modal con blur para efecto de profundidad */ .cms-modal-bg { background: rgba(43, 43, 43, 0.35) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* Inputs con un toque de vidrio */ .cms-input { background: rgba(255, 255, 255, 0.65) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* ═══════════════════════════════════════════════════════════ GLOW AL HOVER — estilo AWS (halo difuso naranja + lila + rosa) Solo en cajas. El halo irradia por FUERA del borde al pasar el cursor. Usamos box-shadow (no la recorta el overflow de la caja) con varias capas de color y blur amplio para el degradado suave. Reversible: vive solo en este archivo. ═══════════════════════════════════════════════════════════ */ .card, .caso, .list-item, .stats-bar, .presencia, .robotica, .aws-badge-item { transition: transform 0.3s ease, box-shadow 0.3s ease !important; } /* Halo multicolor difuso que irradia hacia afuera (naranja→rosa→lila) */ .card:hover, .caso:hover, .list-item:hover, .stats-bar:hover, .presencia:hover, .robotica:hover, .aws-badge-item:hover { transform: translateY(-6px) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), -14px -6px 40px -8px rgba(227, 157, 60, 0.55), /* naranja (sup-izq) */ 14px -6px 40px -8px rgba(240, 96, 154, 0.55), /* rosa (sup-der) */ -14px 16px 44px -8px rgba(175, 45, 118, 0.55), /* lila (inf-izq) */ 14px 16px 44px -8px rgba(227, 157, 60, 0.45), /* naranja (inf-der) */ 0 10px 36px rgba(175, 45, 118, 0.30) !important; /* base de profundidad */ } /* Bajar un poco el carrusel hero (más aire bajo el header fijo) */ .hero-carousel { padding-top: 64px !important; } /* Carrusel de logos de clientes +50% (texto de respaldo + separación) */ .marquee .logo-item { font-size: 6.3rem !important; } .marquee-track { gap: 140px !important; }