/* CONTENEDOR PRINCIPAL DEL BANNER (Ancho completo) */ .manual-funciones-banner { position: relative; width: 100vw; left: 50%; margin-left: -50vw; /* Degradado verde institucional */ background: linear-gradient(140deg, #44AF35 60%, #5ec94e 100%); padding: 60px 20px; text-align: center; overflow: hidden; /* Necesario para los círculos decorativos */ } /* CÍRCULOS DECORATIVOS SUTILES (Usando pseudoelementos) */ .manual-funciones-banner::before, .manual-funciones-banner::after { content: ''; position: absolute; border-radius: 50%; opacity: 0.08; /* Muy sutil */ background: #ffffff; pointer-events: none; /* No interfieren con clics */ } /* Círculo superior izquierdo */ .manual-funciones-banner::before { width: 420px; height: 420px; top: -160px; left: -100px; } /* Círculo inferior derecho */ .manual-funciones-banner::after { width: 300px; height: 300px; bottom: -120px; right: -60px; } /* CONTENEDOR INTERIOR (Limita el ancho del texto) */ .manual-funciones-inner { position: relative; max-width: 900px; margin: 0 auto; z-index: 1; /* Por encima de los círculos */ } /* ESTILOS DEL TÍTULO H1 */ .manual-funciones-titulo { /* Forzamos estilos para evitar conflictos con el tema de la web */ font-family: 'Nunito Sans', sans-serif !important; font-size: 36px !important; font-weight: 700 !important; color: #ffffff !important; margin: 0; line-height: 1.2; text-transform: none !important; /* Evita mayúsculas automáticas */ } /* AJUSTES RESPONSIVE PARA MÓVILES */ @media (max-width: 600px){ .manual-funciones-titulo { font-size: 26px !important; /* Texto más pequeño en pantallas chicas */ } }