@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); backdrop-filter: saturate(160%) blur(8px); box-shadow: none; border-bottom: 1px solid var(--face-border); padding-top: .3rem; padding-bottom: .3rem; } .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; }