@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap'); /* ========================================================================== FACE — Sistema de diseño minimalista (face.css) Federación Argentina de Cooperativas de Electricidad Enlazar en el : ========================================================================== */ :root { /* Marca */ --face-accent: #00968F; --face-accent-dark: #007A70; --face-accent-soft: #EAF5F4; /* Neutros minimalistas */ --face-light: #FFFFFF; --face-gray: #F7F8F9; /* bandas suaves */ --face-border: #ECEEF0; /* hairline */ --text-dark: #1A1D1F; --text-muted: #6B7280; --radius: 12px; --radius-sm: 8px; --font-base: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-head: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --bs-body-font-family: var(--font-base); } * { box-sizing: border-box; } body { font-family: var(--font-base); background: var(--face-light); color: var(--text-dark); line-height: 1.65; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, .navbar-brand { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; color: var(--text-dark); } a { color: var(--face-accent); text-decoration: none; } a:hover { color: var(--face-accent-dark); } /* ------------------------------------------------------------------ Navbar */ .navbar { background: rgba(255,255,255,.92); -webkit-backdrop-filter: saturate(160%) blur(8px); backdrop-filter: saturate(160%) blur(8px); box-shadow: none; border-bottom: 1px solid var(--face-border); padding-top: .3rem; padding-bottom: .3rem; } /* FIX menú móvil: el backdrop-filter del navbar crea un "stacking context" que deja el menú desplegable (offcanvas) atrapado DETRÁS de su capa oscura, por eso en el celular el menú no se podía tocar. Lo desactivamos sólo por debajo del breakpoint lg (992px), donde se usa el menú hamburguesa. En escritorio el efecto vidrio se mantiene intacto. */ @media (max-width: 991.98px) { .navbar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* El panel del menú (offcanvas) debe ser opaco en el celular; en iOS/WebKit quedaba transparente y los enlaces (texto oscuro) no se veían sobre el fondo oscuro del hero. Forzamos fondo blanco y que quede por encima. */ .navbar .offcanvas { background-color: #fff !important; z-index: 1046; } } .navbar-brand img { height: 34px; } .navbar .nav-link { font-weight: 500; font-size: .9rem; color: var(--text-dark) !important; padding: .4rem .7rem !important; transition: color .2s ease; } .navbar .nav-link i { font-size: .82rem; opacity: .7; } .navbar .nav-link:hover { color: var(--face-accent) !important; } .navbar .nav-link.active { color: var(--face-accent) !important; } .dropdown-menu { border: 1px solid var(--face-border); border-radius: var(--radius-sm); box-shadow: 0 8px 28px rgba(16,24,32,.08); padding: .35rem; } .dropdown-item { border-radius: 6px; padding: .5rem .7rem; font-weight: 500; font-size: .9rem; } .dropdown-item.active, .dropdown-item:active { background: var(--face-accent); } .dropdown-item:hover { background: var(--face-accent-soft); color: var(--face-accent-dark); } /* ------------------------------------------------- Encabezados de página */ header.page-header { height: 52vh; min-height: 340px; display: flex; align-items: center; justify-content: center; color: #fff; text-align: center; position: relative; background-size: cover; background-position: center; } header.page-header .overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,22,24,.32), rgba(12,22,24,.55)); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; } header.page-header h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 700; color: #fff; position: relative; z-index: 2; letter-spacing: -0.02em; } header.page-header p { max-width: 620px; font-size: 1.1rem; position: relative; z-index: 2; opacity: .92; margin-top: .5rem; } /* ---------------------------------------------------- Títulos de sección */ .section-title { text-align: center; margin: 64px 0 40px; color: var(--text-dark); font-weight: 600; font-size: clamp(1.5rem, 3vw, 1.95rem); letter-spacing: -0.02em; } .section-title::after { content: ""; display: block; width: 36px; height: 2px; background: var(--face-accent); margin: 16px auto 0; border-radius: 2px; } /* ------------------------------------------------------------- Tarjetas */ .content-card, .magazine-card, .contact-card, .content-section { background: var(--face-light); padding: 30px; border: 1px solid var(--face-border); border-radius: var(--radius); box-shadow: none; transition: transform .2s ease, border-color .2s ease; } .card-hover:hover, .content-card.card-hover:hover { transform: translateY(-3px); border-color: #cfe6e4; } .benefit-item { text-align: center; padding: 22px 18px; } .benefit-item i { font-size: 2.1rem; color: var(--face-accent); margin-bottom: 14px; } .benefit-item h5 { font-weight: 600; font-size: 1.08rem; } .benefit-item p { color: var(--text-muted); } .badge-face { background: var(--face-accent-soft); color: var(--face-accent-dark); font-weight: 600; border-radius: 999px; padding: .3em .8em; font-size: .82rem; } /* -------------------------------------------------------------- Botones */ .btn-face { background: var(--face-accent); color: var(--face-light); border: none; padding: 11px 26px; border-radius: var(--radius-sm); font-size: 1rem; font-weight: 600; box-shadow: none; transition: background-color .2s ease, transform .08s ease; } .btn-face:hover { background: var(--face-accent-dark); color: #fff; } .btn-face:active { transform: translateY(1px); } .btn-face-outline { background: transparent; color: var(--face-accent); border: 1.5px solid var(--face-accent); padding: 9px 24px; border-radius: var(--radius-sm); font-weight: 600; transition: all .2s ease; } .btn-face-outline:hover { background: var(--face-accent); color: #fff; } /* ----------------------------------------------------------- Formularios */ .form-control, .form-select { border-radius: var(--radius-sm); border: 1px solid var(--face-border); padding: .7rem .9rem; background: #fff; } .form-control:focus, .form-select:focus { border-color: var(--face-accent); box-shadow: 0 0 0 3px rgba(0,150,143,.12); } .form-label { font-weight: 600; color: var(--text-dark); } /* --------------------------------------------------------------- Footer */ footer { background: var(--face-light); color: var(--text-muted); padding: 36px 20px; text-align: center; border-top: 1px solid var(--face-border); margin-top: 48px; font-size: .95rem; } /* ---------------------------------------------------------- Utilidades */ .text-face { color: var(--face-accent) !important; } .bg-face-soft { background: var(--face-accent-soft) !important; } .lead { color: var(--text-muted); font-weight: 400; } .nav-spacer { height: 60px; }