/* ====================================================================== brand-overrides.css ---------------------------------------------------------------------- Aplica la identidad visual de "Enrique Proyectos de Iluminacion" cuando . Incluye paleta + tipografias del Manual de Identidad: - Tipografia principal: Outfit (alternativa libre a Campton Bold, sans-serif geometrica, sobria, legible) - Tipografia secundaria: Caveat (trazo manual para acentos calidos) - Rojo coral primario: #CA404D (sustituye verde #00A63F) - Variante oscura: #A03540 (sustituye #008530) - Variante clara: #FCEEEF - Amarillo calido: #F0C93E (acento secundario) - Azul intenso: #006F7C (acento secundario) - Negro ceniza: #1c1c1c (no negro intenso) ====================================================================== */ /* ---------- Variables CSS (consumibles desde inline style) ---------- */ html[data-brand="enrique"] { --c-primary: #CA404D; --c-primary-dark: #A03540; --c-primary-soft: #FCEEEF; --c-primary-rgb: 202, 64, 77; --c-accent-warm: #F0C93E; --c-accent-cool: #006F7C; --c-onsurface: #1c1c1c; --font-main: 'Outfit', 'Helvetica Neue', Arial, sans-serif; --font-script: 'Caveat', 'Brush Script MT', cursive; } /* ---------------------------------------------------------------------- Tipografia: aplicar Outfit en todo (modo Enrique) ---------------------------------------------------------------------- */ html[data-brand="enrique"] body { font-family: var(--font-main) !important; letter-spacing: -0.01em; } html[data-brand="enrique"] .font-headline, html[data-brand="enrique"] .font-body, html[data-brand="enrique"] .font-label, html[data-brand="enrique"] [class*="font-['Epilogue']"], html[data-brand="enrique"] [class*="font-['Manrope']"], html[data-brand="enrique"] [class*="font-['Space_Grotesk']"] { font-family: var(--font-main) !important; } /* Headlines mas geometricas y sobrias en modo Enrique (el manual habla de "sobriedad, claridad y rigor tecnico") */ html[data-brand="enrique"] h1, html[data-brand="enrique"] h2, html[data-brand="enrique"] h3, html[data-brand="enrique"] .font-headline { font-weight: 800; letter-spacing: -0.025em; } /* Body text con leading mas generoso (estilo arquitectonico) */ html[data-brand="enrique"] p, html[data-brand="enrique"] .font-body { line-height: 1.65; } /* Labels pequenas en mayusculas (uppercase + tracking-widest) → Caveat sin uppercase, mas calidas. El manual indica: "tipografia complementaria de trazo manual para mensajes secundarios, slogans o anotaciones, aportando calidez y naturalidad" */ html[data-brand="enrique"] .font-label.text-primary.uppercase, html[data-brand="enrique"] [class*="font-label"][class*="text-primary"][class*="uppercase"][class*="tracking-[0.3em]"], html[data-brand="enrique"] [class*="font-['Space_Grotesk']"][class*="text-[#00A63F]"][class*="uppercase"] { font-family: var(--font-script) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 700; font-size: 1.5em; line-height: 1; } /* ---------------------------------------------------------------------- Color overrides — texto / fondo / borde / fill / stroke / gradientes ---------------------------------------------------------------------- */ /* Color (texto) */ html[data-brand="enrique"] .text-primary, html[data-brand="enrique"] [class*="text-[#00A63F]"] { color: #CA404D !important; } html[data-brand="enrique"] [class*="text-[#008530]"] { color: #A03540 !important; } html[data-brand="enrique"] [class*="text-[#00C24A]"] { color: #CA404D !important; } /* Color (hover de texto) */ html[data-brand="enrique"] [class*="hover:text-[#00A63F]"]:hover { color: #CA404D !important; } html[data-brand="enrique"] [class*="hover:text-[#008530]"]:hover { color: #A03540 !important; } html[data-brand="enrique"] .hover\:text-primary:hover { color: #CA404D !important; } /* Cuando un boton/enlace tiene text-[#00A63F] y hover:text-white, en hover el texto debe ser BLANCO (mi override de text-[#00A63F] ganaria por !important si no le doy prioridad a hover:text-white). */ html[data-brand="enrique"] .hover\:text-white:hover { color: #ffffff !important; } /* Mismo motivo: las tarjetas de servicios usan En modo Enrique mi !important sobre .text-primary bloqueaba el hover dorado. Forzamos el dorado cuando el grupo esta hovered. */ html[data-brand="enrique"] .group:hover .group-hover\:text-secondary-fixed { color: #ffe080 !important; } html[data-brand="enrique"] .group:hover .group-hover\:fill-\[\#ffe080\] { fill: #ffe080 !important; } /* Background — usar prefijo-espacio o inicio para NO capturar `hover:bg-[#00A63F]` (substring match capturaba la clase de hover y aplicaba el bg rojo siempre, bug visible en el boton "Ver todos los servicios" del menu desplegable). */ html[data-brand="enrique"] .bg-primary, html[data-brand="enrique"] [class*=" bg-[#00A63F]"], html[data-brand="enrique"] [class^="bg-[#00A63F]"] { background-color: #CA404D !important; } html[data-brand="enrique"] [class*=" bg-[#008530]"], html[data-brand="enrique"] [class^="bg-[#008530]"] { background-color: #A03540 !important; } html[data-brand="enrique"] [class*=" bg-[#00C24A]"], html[data-brand="enrique"] [class^="bg-[#00C24A]"] { background-color: #CA404D !important; } /* Background hover */ html[data-brand="enrique"] [class*="hover:bg-[#00A63F]"]:hover { background-color: #CA404D !important; } html[data-brand="enrique"] [class*="hover:bg-[#008530]"]:hover { background-color: #A03540 !important; } html[data-brand="enrique"] .hover\:bg-primary:hover { background-color: #CA404D !important; } /* Border */ html[data-brand="enrique"] .border-primary, html[data-brand="enrique"] [class*="border-[#00A63F]"] { border-color: #CA404D !important; } html[data-brand="enrique"] [class*="border-[#008530]"] { border-color: #A03540 !important; } html[data-brand="enrique"] [class*="hover:border-[#00A63F]"]:hover { border-color: #CA404D !important; } /* Fill / Stroke (SVG) */ html[data-brand="enrique"] [class*="fill-[#00A63F]"] { fill: #CA404D !important; } html[data-brand="enrique"] .fill-primary { fill: #CA404D !important; } html[data-brand="enrique"] [class*="stroke-[#00A63F]"] { stroke: #CA404D !important; } html[data-brand="enrique"] .stroke-primary { stroke: #CA404D !important; } /* Gradientes Tailwind */ html[data-brand="enrique"] [class*="from-[#00A63F]"] { --tw-gradient-from: #CA404D !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(202,64,77,0)) !important; } html[data-brand="enrique"] [class*="from-[#00C24A]"] { --tw-gradient-from: #CA404D !important; } html[data-brand="enrique"] [class*="to-[#00A63F]"] { --tw-gradient-to: #CA404D !important; } html[data-brand="enrique"] [class*="to-[#008530]"] { --tw-gradient-to: #A03540 !important; } html[data-brand="enrique"] [class*="to-[#00C24A]"] { --tw-gradient-to: #A03540 !important; } html[data-brand="enrique"] [class*="via-[#00A63F]"] { --tw-gradient-stops: var(--tw-gradient-from), #CA404D var(--tw-gradient-via-position, 50%), var(--tw-gradient-to) !important; } /* Gradientes radiales inline (rgba(0,166,63,…)) — emulan el "halo de luz" del manual */ html[data-brand="enrique"] [class*="rgba(0,166,63"] { background-image: radial-gradient(circle at 70% 50%, rgba(202,64,77,0.15) 0%, transparent 50%) !important; } /* Focus ring (ring-primary/20) */ html[data-brand="enrique"] [class*="ring-primary"]:focus, html[data-brand="enrique"] [class*="focus:ring-primary"]:focus { --tw-ring-color: rgba(202,64,77,0.2) !important; box-shadow: 0 0 0 3px rgba(202,64,77,0.2) !important; } /* Focus border + outline */ html[data-brand="enrique"] .focus\:border-primary:focus { border-color: #CA404D !important; } html[data-brand="enrique"] [class*="outline-[#00A63F]"] { outline-color: #CA404D !important; } /* Acentos secundarios del manual (amarillo calido / azul intenso) */ html[data-brand="enrique"] [class*="bg-[#F0C93E]"] { background-color: #F0C93E !important; } html[data-brand="enrique"] [class*="text-[#F0C93E]"] { color: #F0C93E !important; } html[data-brand="enrique"] [class*="bg-[#006F7C]"] { background-color: #006F7C !important; } html[data-brand="enrique"] [class*="text-[#006F7C]"] { color: #006F7C !important; } /* ---------------------------------------------------------------------- Variantes de opacidad del primary (Tailwind: text-primary/40, bg-primary/10, etc.) El selector .text-primary\/X exige escapar la barra; rgba(202,64,77,X) preserva el matiz translucido del verde original pero en rojo coral. ---------------------------------------------------------------------- */ /* TEXT primary con opacidad */ html[data-brand="enrique"] .text-primary\/5 { color: rgba(202, 64, 77, 0.05) !important; } html[data-brand="enrique"] .text-primary\/10 { color: rgba(202, 64, 77, 0.10) !important; } html[data-brand="enrique"] .text-primary\/15 { color: rgba(202, 64, 77, 0.15) !important; } html[data-brand="enrique"] .text-primary\/20 { color: rgba(202, 64, 77, 0.20) !important; } html[data-brand="enrique"] .text-primary\/30 { color: rgba(202, 64, 77, 0.30) !important; } html[data-brand="enrique"] .text-primary\/40 { color: rgba(202, 64, 77, 0.40) !important; } html[data-brand="enrique"] .text-primary\/50 { color: rgba(202, 64, 77, 0.50) !important; } html[data-brand="enrique"] .text-primary\/60 { color: rgba(202, 64, 77, 0.60) !important; } html[data-brand="enrique"] .text-primary\/70 { color: rgba(202, 64, 77, 0.70) !important; } html[data-brand="enrique"] .text-primary\/80 { color: rgba(202, 64, 77, 0.80) !important; } html[data-brand="enrique"] .text-primary\/90 { color: rgba(202, 64, 77, 0.90) !important; } /* BG primary con opacidad */ html[data-brand="enrique"] .bg-primary\/5 { background-color: rgba(202, 64, 77, 0.05) !important; } html[data-brand="enrique"] .bg-primary\/10 { background-color: rgba(202, 64, 77, 0.10) !important; } html[data-brand="enrique"] .bg-primary\/15 { background-color: rgba(202, 64, 77, 0.15) !important; } html[data-brand="enrique"] .bg-primary\/20 { background-color: rgba(202, 64, 77, 0.20) !important; } html[data-brand="enrique"] .bg-primary\/30 { background-color: rgba(202, 64, 77, 0.30) !important; } html[data-brand="enrique"] .bg-primary\/40 { background-color: rgba(202, 64, 77, 0.40) !important; } html[data-brand="enrique"] .bg-primary\/50 { background-color: rgba(202, 64, 77, 0.50) !important; } html[data-brand="enrique"] .bg-primary\/60 { background-color: rgba(202, 64, 77, 0.60) !important; } html[data-brand="enrique"] .bg-primary\/70 { background-color: rgba(202, 64, 77, 0.70) !important; } html[data-brand="enrique"] .bg-primary\/80 { background-color: rgba(202, 64, 77, 0.80) !important; } html[data-brand="enrique"] .bg-primary\/90 { background-color: rgba(202, 64, 77, 0.90) !important; } /* BORDER primary con opacidad */ html[data-brand="enrique"] .border-primary\/10 { border-color: rgba(202, 64, 77, 0.10) !important; } html[data-brand="enrique"] .border-primary\/20 { border-color: rgba(202, 64, 77, 0.20) !important; } html[data-brand="enrique"] .border-primary\/30 { border-color: rgba(202, 64, 77, 0.30) !important; } html[data-brand="enrique"] .border-primary\/40 { border-color: rgba(202, 64, 77, 0.40) !important; } html[data-brand="enrique"] .border-primary\/50 { border-color: rgba(202, 64, 77, 0.50) !important; } /* RING primary con opacidad (focus rings) */ html[data-brand="enrique"] .ring-primary\/20 { --tw-ring-color: rgba(202, 64, 77, 0.20) !important; box-shadow: 0 0 0 3px rgba(202, 64, 77, 0.20) !important; } html[data-brand="enrique"] .ring-primary\/30 { --tw-ring-color: rgba(202, 64, 77, 0.30) !important; box-shadow: 0 0 0 3px rgba(202, 64, 77, 0.30) !important; } /* Hover variants */ html[data-brand="enrique"] .hover\:bg-primary\/5:hover { background-color: rgba(202, 64, 77, 0.05) !important; } html[data-brand="enrique"] .hover\:bg-primary\/10:hover { background-color: rgba(202, 64, 77, 0.10) !important; } html[data-brand="enrique"] .hover\:bg-primary\/20:hover { background-color: rgba(202, 64, 77, 0.20) !important; } html[data-brand="enrique"] .hover\:border-primary:hover { border-color: #CA404D !important; } html[data-brand="enrique"] .hover\:text-primary:hover { color: #CA404D !important; } html[data-brand="enrique"] .focus\:ring-primary\/20:focus { --tw-ring-color: rgba(202, 64, 77, 0.20) !important; box-shadow: 0 0 0 3px rgba(202, 64, 77, 0.20) !important; } html[data-brand="enrique"] .focus\:ring-primary\/30:focus { --tw-ring-color: rgba(202, 64, 77, 0.30) !important; box-shadow: 0 0 0 3px rgba(202, 64, 77, 0.30) !important; } /* primary-container y on-primary-container (Tailwind config) */ html[data-brand="enrique"] .bg-primary-container { background-color: #CA404D !important; } html[data-brand="enrique"] .text-primary-container { color: #CA404D !important; } html[data-brand="enrique"] .border-primary-container { border-color: #CA404D !important; } html[data-brand="enrique"] .text-on-primary-container { color: #FCEEEF !important; } html[data-brand="enrique"] .bg-on-primary-container { background-color: #FCEEEF !important; } /* on-primary-fixed-variant (#008530 verde oscuro) -> rojo oscuro */ html[data-brand="enrique"] .text-on-primary-fixed-variant { color: #A03540 !important; } html[data-brand="enrique"] .bg-on-primary-fixed-variant { background-color: #A03540 !important; } /* Tambien las variantes con --tw-bg-opacity de Tailwind v3 que generan background-color: rgb(0 166 63 / var(--tw-bg-opacity)) — se respetan gracias a los selectores anteriores con !important. */ /* Negro ceniza (no negro intenso) */ html[data-brand="enrique"] [class*="bg-[#1c1b1b]"] { background-color: var(--c-onsurface) !important; } /* ---------------------------------------------------------------------- TOP BAR — texto a NEGRO en modo Enrique (excepto el CTA verde/coral) Los enlaces del nav usan text-stone-600 dark:text-stone-400 por default. ---------------------------------------------------------------------- */ html[data-brand="enrique"] nav .text-stone-600, html[data-brand="enrique"] nav .dark\:text-stone-400 { color: var(--c-onsurface) !important; } /* Dropdowns "Servicios" y "Zonas": nombres (h4) en negro siempre — sin cambio en hover. Aplica al menu desktop y al drawer movil. */ html[data-brand="enrique"] nav h4, html[data-brand="enrique"] nav .group:hover h4, html[data-brand="enrique"] nav .group\/item:hover h4 { color: #1c1c1c !important; } /* ---------------------------------------------------------------------- FOOTER — texto a BLANCO PURO en modo Enrique (default es text-white/70) ---------------------------------------------------------------------- */ html[data-brand="enrique"] footer.bg-\[\#1c1b1b\], html[data-brand="enrique"] footer[class*="bg-[#1c1b1b]"] { color: #ffffff !important; } /* Tailwind genera text-white/70 como rgba(255,255,255,0.7); forzamos solido */ html[data-brand="enrique"] footer [class*="text-white\/"] { color: #ffffff !important; } /* Copyright + redes sociales con opacity-50 -> opacidad completa */ html[data-brand="enrique"] footer .opacity-50 { opacity: 1 !important; } /* ---------------------------------------------------------------------- Logos: mostrar el correcto segun la marca activa ---------------------------------------------------------------------- */ html[data-brand="anix"] .logo-enrique { display: none !important; } html[data-brand="enrique"] .logo-anix { display: none !important; } /* ---------------------------------------------------------------------- Toggle FLOATING ABAJO-DERECHA (FAB) Reemplaza al pill antiguo de top-bar y drawer movil. ---------------------------------------------------------------------- */ .brand-toggle { position: fixed; bottom: 20px; right: 20px; z-index: 60; display: inline-flex; align-items: center; gap: 4px; background: #ffffff; border: 1px solid #e5e5e5; border-radius: 999px; padding: 4px; box-shadow: 0 10px 30px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.10); user-select: none; font-family: 'Manrope', 'Outfit', Arial, sans-serif; transition: box-shadow .2s, transform .2s; } .brand-toggle:hover { box-shadow: 0 14px 40px rgba(0,0,0,0.22), 0 4px 10px rgba(0,0,0,0.12); transform: translateY(-1px); } .brand-toggle button { cursor: pointer; background: transparent; border: 0; padding: 8px 14px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #737373; white-space: nowrap; transition: background-color .2s, color .2s; } html[data-brand="anix"] .brand-toggle [data-brand-set="anix"] { background: #00A63F; color: #fff; } html[data-brand="enrique"] .brand-toggle [data-brand-set="enrique"] { background: #CA404D; color: #fff; } .brand-toggle [data-brand-set]:hover:not([data-brand-set="anix"][style]):not([data-brand-set="enrique"][style]) { color: #1c1c1c; } html[data-brand="anix"] .brand-toggle [data-brand-set="anix"]:hover { color: #fff; opacity: .92; } html[data-brand="enrique"] .brand-toggle [data-brand-set="enrique"]:hover { color: #fff; opacity: .92; } /* En movil — toggle un pelin mas pequeno y arriba del cookie banner si se solapa */ @media (max-width: 640px) { .brand-toggle { bottom: 16px; right: 16px; } .brand-toggle button { padding: 6px 10px; font-size: 10px; } } /* No mostrar al imprimir */ @media print { .brand-toggle { display: none !important; } } /* ---------------------------------------------------------------------- Reglas inline de cada pagina con #00A63F hardcoded (no se cazaban con [class*=...] porque viven en