/* ========================================================= WALAREFORMAS - TEMA NEÓN Este CSS se aplica solo a este tenant (ruta propia), así que podemos ir sin prefijos raros. ========================================================= */ /* Paleta neón propia (además de las brand-*) */ /*:root {*/ /* --walare-neon-pink: #ff2cdf;*/ /* --walare-neon-orange: #ff7a00;*/ /* --walare-neon-yellow: #facc15;*/ /* --walare-neon-green: #22c55e;*/ /* --walare-neon-cyan: #22d3ee;*/ /* --walare-neon-blue: #3b82f6;*/ /*}*/ :root { --walare-neon-pink: #f472b6; /* rosa pastel intenso (rose-400) */ --walare-neon-orange: #fb923c; /* naranja suave (orange-400) */ --walare-neon-yellow: #facc15; /* amarillo sigue vivo pero no fluorescente */ --walare-neon-green: #4ade80; /* verde lima más suave (green-400) */ --walare-neon-cyan: #38bdf8; /* azul cielo (sky-400) */ --walare-neon-blue: #60a5fa; /* azul medio (blue-400) */ } /* Fondo general ligeramente “galaxia” pero suave */ :root { --walare-neon-pink: #db2777; /* tipo pink-600 */ --walare-neon-orange: #ea580c; /* orange-600 */ --walare-neon-yellow: #eab308; /* amber-500/600 */ --walare-neon-green: #16a34a; /* green-600 */ --walare-neon-cyan: #0891b2; /* cyan-600 */ --walare-neon-blue: #2563eb; /* blue-600 */ } /* ============================ MENÚ / HEADER SOBRE HERO ============================ */ /* Estado inicial: encima del hero, fondo transparente y texto blanco */ header.site-header--over-hero { border-bottom-color: transparent; background: transparent; backdrop-filter: blur(0px); transition: background-color 160ms ease-out, border-color 160ms ease-out, box-shadow 160ms ease-out, backdrop-filter 160ms ease-out; } /* Links del menú: BLANCOS al inicio */ header.site-header--over-hero .menu-link { color: #ffffff !important; } /* Marca sin logo: también blanca al inicio */ header.site-header--over-hero .brand-title { color: #ffffff !important; } /* Botón móvil (iconos del hamburguesa / cerrar) en blanco al inicio */ header.site-header--over-hero #menuToggle { color: #ffffff; } /* Subrayado chulo en hover (funciona tanto arriba como con scroll) */ header .menu-link { position: relative; } header .menu-link::after { content: ""; position: absolute; left: 0; bottom: 0.2rem; width: 0; height: 2px; background: linear-gradient( 90deg, #ff2cdf, #22d3ee ); border-radius: 999px; transition: width 150ms ease-out; } header .menu-link:hover::after { width: 100%; } /* ========================================== Estado SCROLLED: fondo con “colorines” y texto vuelve al color original ========================================== */ header.site-header--over-hero.scrolled { /* Fondo neón en vez de negro plano */ background: radial-gradient(circle at 0% 0%, rgba(255, 44, 223, 0.35), transparent 55%), radial-gradient(circle at 100% 0%, rgba(34, 211, 238, 0.30), transparent 55%), radial-gradient(circle at 50% 100%, rgba(34, 197, 94, 0.28), transparent 55%), rgba(2, 6, 23, 0.95); border-bottom-color: rgba(148, 163, 184, 0.4); box-shadow: 0 18px 45px rgba(15, 23, 42, 0.95), 0 0 18px rgba(59, 130, 246, 0.5); backdrop-filter: blur(14px); } /* Cuando ya has hecho scroll: devolvemos el color de texto "normal" del tenant */ header.site-header--over-hero.scrolled .menu-link { color: #ffffff !important; } header.site-header--over-hero.scrolled .brand-title { color: #ffffff !important; } header.site-header--over-hero.scrolled #menuToggle { color: #ffffff; } /* ========================================================= HERO NEÓN (primer
del
, que es tu hero) Estructura basada en hero.html ========================================================= */ /* Capa neón animada encima del fondo (imagen del cubo) */ main > section.scroll-mt-16:first-of-type .relative.bg-cover.bg-center > .absolute.inset-0 { background: /* mismos colores, pero con mucha menos opacidad y algo más de transparencia */ radial-gradient(circle at 0% 0%, rgba(255, 44, 223, 0.22), transparent 60%), radial-gradient(circle at 100% 0%, rgba(34, 211, 238, 0.20), transparent 60%), radial-gradient(circle at 50% 100%, rgba(34, 197, 94, 0.24), transparent 60%), /* base oscura menos intensa */ linear-gradient(145deg, rgba(15, 23, 42, 0.70), rgba(15, 23, 42, 0.55) ) !important; background-size: 180% 180%; animation: walare-hero-flow 22s ease-in-out infinite; } /* Título principal del hero con degradado arcoíris */ main > section.scroll-mt-16:first-of-type h1 { background-image: linear-gradient( 90deg, var(--walare-neon-pink), var(--walare-neon-orange), var(--walare-neon-yellow), var(--walare-neon-green), var(--walare-neon-cyan), var(--walare-neon-blue) ); -webkit-background-clip: text; background-clip: text; color: #ffffff !important; letter-spacing: 0.03em; text-shadow: 0 0 10px rgba(15, 23, 42, 0.75), 0 0 26px rgba(59, 130, 246, 0.9); } /* Subtítulo un poco más suave, pero con halo */ main > section.scroll-mt-16:first-of-type p { text-shadow: 0 0 16px rgba(15, 23, 42, 0.95); } /* Botón principal del hero (el que sale con bg-white text-gray-900) */ main > section.scroll-mt-16:first-of-type .flex.gap-3 a.bg-white { background-image: radial-gradient(circle at 0 0, rgba(255, 44, 223, 0.8), rgba(59, 130, 246, 0.95) ); color: var(--text-on-primary); border-radius: 9999px; border: 1px solid rgba(248, 250, 252, 0.5); box-shadow: 0 0 14px rgba(129, 140, 248, 0.8), 0 12px 32px rgba(15, 23, 42, 0.95); text-shadow: 0 0 8px rgba(15, 23, 42, 0.9); transition: transform 120ms ease-out, box-shadow 120ms ease-out, filter 120ms ease-out; } main > section.scroll-mt-16:first-of-type .flex.gap-3 a.bg-white:hover { transform: translateY(-1px) scale(1.02); box-shadow: 0 0 20px rgba(129, 140, 248, 0.95), 0 18px 40px rgba(15, 23, 42, 0.98); filter: brightness(1.05); } /* Botón secundario (el que viene con bg-white/10, texto blanco y ring) */ main > section.scroll-mt-16:first-of-type .flex.gap-3 a[class*="bg-white/10"] { border-radius: 9999px; border: 1px solid rgba(148, 163, 184, 0.7); background: radial-gradient(circle at 100% 0, rgba(34, 211, 238, 0.30), transparent 55% ); box-shadow: 0 0 12px rgba(34, 211, 238, 0.65); } /* Animación suave del fondo del hero */ @keyframes walare-hero-flow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ========================================================= SECCIONES TEXTO-FOTO (texto-foto.html) ========================================================= */ /* Títulos de bloques (Quiénes somos, etc.) con toque de color */ /* Títulos super coloridos para TODAS las secciones */ /*section.scroll-mt-16 h1,*/ /*section.scroll-mt-16 h2*/ /*!*section.scroll-mt-16 h3 {*!*/ /*{*/ /* background-image: linear-gradient(*/ /* 90deg,*/ /* var(--walare-neon-pink),*/ /* var(--walare-neon-orange),*/ /* var(--walare-neon-yellow),*/ /* var(--walare-neon-green),*/ /* var(--walare-neon-cyan),*/ /* var(--walare-neon-blue)*/ /* );*/ /* -webkit-background-clip: text;*/ /* background-clip: text;*/ /* color: transparent !important; !* clave para vencer text-gray-* de Tailwind *!*/ /*}*/ /* Texto dentro de .prose algo más contrastado sobre fondo claro */ section.scroll-mt-16 .prose { color: var(--text-primary); } /* ========================================================= CATÁLOGO / CARDS (ventajas, cómo trabajamos) (catalogo.html) ========================================================= */ section.scroll-mt-16 article.group.relative.rounded-2xl { position: relative; border-radius: 1.5rem; background: radial-gradient(circle at 0 0, rgba(148, 163, 184, 0.18), transparent 60%), var(--brand-surface, #020617); border: 1px solid rgba(148, 163, 184, 0.45); box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.85), 0 20px 45px rgba(15, 23, 42, 0.95); overflow: hidden; backdrop-filter: blur(6px); } /* Línea superior que ya tenías, la reforzamos un poco */ section.scroll-mt-16 article.group.relative.rounded-2xl > div.absolute.inset-x-0.-top-px.h-px { opacity: 0.9; } /* Iconos Lucide en color acento con glow */ section.scroll-mt-16 article.group.relative.rounded-2xl i[data-lucide] { color: var(--brand-acento); filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.7)); } /* Hover: levantamos la tarjeta y la iluminamos */ section.scroll-mt-16 article.group.relative.rounded-2xl:hover { transform: translateY(-4px); border-color: rgba(96, 165, 250, 0.95); box-shadow: 0 0 24px rgba(96, 165, 250, 0.8), 0 24px 55px rgba(15, 23, 42, 0.98); } /* Títulos y texto de las cards */ section.scroll-mt-16 article.group.relative.rounded-2xl h3 { color: var(--text-primary); } section.scroll-mt-16 article.group.relative.rounded-2xl p { color: var(--text-muted); } /* ========================================================= FORMULARIO DE CONTACTO (formulario.html) ========================================================= */ /* Contenedor principal del formulario (la “tarjeta”) */ section.scroll-mt-16 form.grid.rounded-xl { position: relative; border-radius: 1.25rem; background: linear-gradient( 135deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.94) ) !important; border: 1px solid rgba(148, 163, 184, 0.6) !important; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.9), 0 24px 55px rgba(15, 23, 42, 1); color: var(--text-on-primary, #f9fafb) !important; } /* Halo de borde neón alrededor del formulario */ section.scroll-mt-16 form.grid.rounded-xl::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; background: conic-gradient( from 140deg, var(--walare-neon-pink), var(--walare-neon-orange), var(--walare-neon-yellow), var(--walare-neon-green), var(--walare-neon-cyan), var(--walare-neon-blue), var(--walare-neon-pink) ); opacity: 0.35; filter: blur(6px); z-index: -1; } /* Inputs y textareas */ section.scroll-mt-16 form.grid.rounded-xl input[type="text"], section.scroll-mt-16 form.grid.rounded-xl input[type="email"], section.scroll-mt-16 form.grid.rounded-xl input[type="tel"], section.scroll-mt-16 form.grid.rounded-xl textarea { background-color: rgba(15, 23, 42, 0.92); border-radius: 0.75rem; border: 1px solid rgba(75, 85, 99, 0.9); color: #e5e7eb; transition: border-color 130ms ease-out, box-shadow 130ms ease-out, background-color 130ms ease-out; } section.scroll-mt-16 form.grid.rounded-xl input::placeholder, section.scroll-mt-16 form.grid.rounded-xl textarea::placeholder { color: rgba(148, 163, 184, 0.85); } /* Focus con glow neón */ section.scroll-mt-16 form.grid.rounded-xl input:focus, section.scroll-mt-16 form.grid.rounded-xl textarea:focus { outline: none; border-color: var(--walare-neon-cyan); box-shadow: 0 0 0 1px rgba(8, 47, 73, 0.9), 0 0 18px rgba(34, 211, 238, 0.95); background-color: rgba(15, 23, 42, 1); } /* Botón enviar con estilo neón redondo */ section.scroll-mt-16 form.grid.rounded-xl button[type="submit"] { border-radius: 9999px; background-image: radial-gradient(circle at 0 0, rgba(255, 44, 223, 0.85), rgba(59, 130, 246, 1)); color: #f9fafb !important; border: 1px solid rgba(248, 250, 252, 0.4); box-shadow: 0 0 14px rgba(129, 140, 248, 0.85), 0 12px 30px rgba(15, 23, 42, 0.98); text-shadow: 0 0 8px rgba(15, 23, 42, 0.9); transition: transform 120ms ease-out, box-shadow 120ms ease-out, filter 120ms ease-out; } section.scroll-mt-16 form.grid.rounded-xl button[type="submit"]:hover { transform: translateY(-1px) scale(1.02); box-shadow: 0 0 22px rgba(129, 140, 248, 0.95), 0 18px 38px rgba(15, 23, 42, 0.98); filter: brightness(1.05); } /* ========================================================= ANIMACIÓN DE ENTRADA (reveal-on-scroll) ========================================================= */ .reveal-on-scroll.opacity-100.translate-y-0 { filter: drop-shadow(0 0 18px rgba(15, 23, 42, 0.3)); transition-property: opacity, transform, filter; } /* ========================================================= FOOTER - ligera integración con el tema ========================================================= */ footer { background: radial-gradient(circle at 0 0, rgba(15, 23, 42, 0.9), var(--brand-surface, #020617)); color: var(--text-primary); } /* Quitar borde, anillo y sombras de la imagen en "Quiénes somos" */ section#quienes-somos img { box-shadow: none !important; /* anula shadow-*, ring (que usa box-shadow) */ border: none !important; outline: none !important; } /* Por si el contenedor de la imagen lleva sombras/bordes también */ section#quienes-somos .shadow, section#quienes-somos [class*="shadow-"], section#quienes-somos [class*="ring-"] { box-shadow: none !important; border-color: transparent !important; }