:root { --fedesub-blue-950: #032d4a; --fedesub-blue-900: #06466f; --fedesub-blue-700: #0874ac; --fedesub-blue-500: #16a1cf; --fedesub-blue-200: #bcecf8; --fedesub-blue-100: #e9f9fd; --fedesub-ink: #173042; --fedesub-muted: #647784; --fedesub-border: #dce9ef; --fedesub-bg: #f5fafc; --fedesub-white: #ffffff; --fedesub-success: #1a7f50; --fedesub-danger: #b33a3a; --fedesub-shadow: 0 14px 36px rgba(4, 58, 91, 0.09); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } .fedesub-contact-page { margin: 0; color: var(--fedesub-ink); background: var(--fedesub-bg); font-family: 'Montserrat', Arial, sans-serif; line-height: 1.55; font-size: 16px; } /* El header compartido abre antes de cargar este módulo. Por eso la tipografía debe aplicarse al contenedor del módulo, no al body. */ .fedesub-contact-page h1, .fedesub-contact-page h2, .fedesub-contact-page h3, .fedesub-contact-page p, .fedesub-contact-page a, .fedesub-contact-page span, .fedesub-contact-page li, .fedesub-contact-page label, .fedesub-contact-page input, .fedesub-contact-page select, .fedesub-contact-page textarea, .fedesub-contact-page button { font-family: 'Montserrat', Arial, sans-serif; } .fedesub-contact-page h1, .fedesub-contact-page h2, .fedesub-contact-page h3 { font-weight: 800; } .fedesub-contact-page a { color: inherit; } .fedesub-contact-shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; } .fedesub-contact-topbar { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.96); border-bottom: 1px solid rgba(220,233,239,.9); backdrop-filter: blur(12px); } .fedesub-contact-topbar-inner { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .fedesub-contact-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; } .fedesub-contact-brand-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(145deg, var(--fedesub-blue-900), var(--fedesub-blue-500)); color: #fff; box-shadow: 0 10px 20px rgba(8,116,172,.18); } .fedesub-contact-brand strong { display: block; font-size: 18px; letter-spacing: .08em; color: var(--fedesub-blue-950); } .fedesub-contact-brand small { display: block; color: var(--fedesub-muted); font-size: 10px; margin-top: -2px; } .fedesub-contact-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .fedesub-contact-nav a { text-decoration: none; padding: 10px 12px; font-size: 13px; font-weight: 600; border-radius: 9px; color: #395567; } .fedesub-contact-nav a:hover, .fedesub-contact-nav a.is-active { color: var(--fedesub-blue-900); background: var(--fedesub-blue-100); } .fedesub-contact-hero { position: relative; overflow: hidden; min-height: 430px; display: flex; align-items: center; color: #fff; background: radial-gradient(circle at 82% 30%, rgba(89,217,239,.25), transparent 23%), linear-gradient(125deg, #032d4a 0%, #056698 52%, #13a6cd 100%); } .fedesub-contact-hero::after { content: ''; position: absolute; left: -5%; right: -5%; bottom: -70px; height: 140px; background: var(--fedesub-bg); border-radius: 50% 50% 0 0 / 45% 45% 0 0; } .fedesub-contact-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 52px; padding: 78px 0 110px; } .fedesub-contact-eyebrow, .fedesub-contact-kicker { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; } .fedesub-contact-eyebrow { color: #c6f3fb; } .fedesub-contact-hero h1 { font-size: clamp(42px, 6vw, 68px); line-height: 1; margin: 18px 0 20px; letter-spacing: -.045em; } .fedesub-contact-hero p { max-width: 680px; font-size: 18px; color: rgba(255,255,255,.88); margin: 0 0 30px; } .fedesub-contact-hero-button { display: inline-flex; align-items: center; gap: 10px; padding: 13px 18px; background: #fff; color: var(--fedesub-blue-900)!important; text-decoration: none; border-radius: 12px; font-weight: 800; box-shadow: 0 14px 28px rgba(1,29,47,.18); } .fedesub-contact-hero-visual { position: relative; height: 280px; } .fedesub-contact-diver { position: absolute; inset: 0; display: grid; place-items: center; transform: rotate(-8deg); } .fedesub-contact-diver i { font-size: 128px; color: rgba(255,255,255,.95); filter: drop-shadow(0 18px 22px rgba(1,35,55,.22)); } .fedesub-contact-water-ring { position: absolute; border: 2px solid rgba(255,255,255,.22); border-radius: 50%; } .ring-one { width: 210px; height: 210px; right: 12%; top: 8%; } .ring-two { width: 280px; height: 280px; right: 2%; top: -5%; border-style: dashed; } .fedesub-contact-wave { position: absolute; height: 3px; border-radius: 50%; background: rgba(255,255,255,.42); transform: rotate(-10deg); } .wave-one { width: 130px; right: 4%; bottom: 50px; } .wave-two { width: 85px; left: 8%; top: 70px; } .fedesub-contact-bubbles span { position: absolute; border: 2px solid rgba(255,255,255,.20); border-radius: 50%; z-index: 1; } .fedesub-contact-bubbles span:nth-child(1){width:16px;height:16px;left:8%;top:20%;} .fedesub-contact-bubbles span:nth-child(2){width:28px;height:28px;left:16%;top:64%;} .fedesub-contact-bubbles span:nth-child(3){width:11px;height:11px;right:15%;top:12%;} .fedesub-contact-bubbles span:nth-child(4){width:20px;height:20px;right:7%;top:60%;} .fedesub-contact-bubbles span:nth-child(5){width:8px;height:8px;right:32%;top:25%;} .fedesub-contact-section { padding: 58px 0 88px; } .fedesub-contact-section-heading { max-width: 760px; margin-bottom: 34px; } .fedesub-contact-kicker { color: var(--fedesub-blue-700); } .fedesub-contact-section-heading h2, .fedesub-contact-form-intro h2 { margin: 10px 0 12px; color: var(--fedesub-blue-950); font-size: clamp(28px, 4vw, 39px); line-height: 1.15; letter-spacing: -.025em; } .fedesub-contact-section-heading p, .fedesub-contact-form-intro > p { color: var(--fedesub-muted); margin: 0; font-size: 16px; } .fedesub-contact-alert { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: 13px; margin: 0 0 26px; font-size: 14px; } .fedesub-contact-alert i { margin-top: 3px; } .fedesub-contact-alert-success { background: #eaf8f1; border: 1px solid #bde7d2; color: #176342; } .fedesub-contact-alert-error { background: #fff0f0; border: 1px solid #f0c7c7; color: #943232; } .fedesub-contact-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .fedesub-contact-card { position: relative; display: flex; flex-direction: column; min-height: 315px; padding: 25px; background: #fff; border: 1px solid var(--fedesub-border); border-radius: 18px; box-shadow: 0 8px 22px rgba(4,58,91,.045); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; overflow: hidden; } .fedesub-contact-card::before { content:''; position:absolute; left:0; right:0; top:0; height:4px; background: linear-gradient(90deg, var(--fedesub-blue-700), var(--fedesub-blue-500)); opacity:.75; } .fedesub-contact-card:hover { transform: translateY(-3px); border-color: #bdd9e5; box-shadow: var(--fedesub-shadow); } .fedesub-contact-card.is-featured { border-color: #8ddbea; background: linear-gradient(180deg, #f9feff 0%, #fff 58%); } .fedesub-contact-badge { position: absolute; right: 16px; top: 16px; padding: 5px 9px; border-radius: 999px; background: var(--fedesub-blue-100); color: var(--fedesub-blue-900); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } .fedesub-contact-card-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 15px; background: var(--fedesub-blue-100); color: var(--fedesub-blue-700); font-size: 21px; margin-bottom: 18px; } .fedesub-contact-card h3 { margin: 0 0 7px; color: var(--fedesub-blue-950); font-size: 18px; line-height: 1.25; } .fedesub-contact-person { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: #405e70; } .fedesub-contact-card-description { margin: 0 0 18px; font-size: 13px; color: var(--fedesub-muted); flex: 1; } .fedesub-contact-email { display: flex; align-items: flex-start; gap: 8px; color: var(--fedesub-blue-700)!important; font-size: 12px; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; margin-bottom: 15px; } .fedesub-contact-email:hover { text-decoration: underline; } .fedesub-contact-card-action { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; text-decoration: none; color: var(--fedesub-blue-900)!important; } .fedesub-contact-form-section { position: relative; padding: 86px 0; background: #fff; border-top: 1px solid var(--fedesub-border); } .fedesub-contact-form-section::before { content:''; position:absolute; top:0; left:0; right:0; height:6px; background: linear-gradient(90deg, var(--fedesub-blue-950), var(--fedesub-blue-500), #69d8e7); } .fedesub-contact-form-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; } .fedesub-contact-form-intro { position: sticky; top: 100px; } .fedesub-contact-form-intro ul { list-style: none; padding: 0; margin: 28px 0; display: grid; gap: 11px; } .fedesub-contact-form-intro li { display: flex; gap: 10px; color: #365466; font-size: 14px; } .fedesub-contact-form-intro li i { color: var(--fedesub-success); margin-top: 4px; } .fedesub-contact-help-note { display: flex; gap: 13px; align-items: flex-start; padding: 17px; border-radius: 14px; background: var(--fedesub-blue-100); color: #2e5368; font-size: 13px; } .fedesub-contact-help-note > i { width: 34px; height: 34px; display:grid;place-items:center; flex:0 0 34px; border-radius:10px; background:#fff; color:var(--fedesub-blue-700); } .fedesub-contact-help-note a { color: var(--fedesub-blue-900); font-weight: 800; } .fedesub-contact-form { position: relative; padding: 32px; border: 1px solid var(--fedesub-border); border-radius: 20px; background: var(--fedesub-bg); box-shadow: var(--fedesub-shadow); } .fedesub-contact-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .fedesub-contact-field { margin-bottom: 17px; } .fedesub-contact-field label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 800; color: #29495c; } .fedesub-contact-field label span, .fedesub-contact-consent strong { color: #be3d3d; } .fedesub-contact-field input, .fedesub-contact-field select, .fedesub-contact-field textarea { width: 100%; border: 1px solid #cbdde5; border-radius: 11px; background: #fff; padding: 12px 13px; font: inherit; font-size: 14px; color: var(--fedesub-ink); outline: none; transition: border-color .18s ease, box-shadow .18s ease; } .fedesub-contact-field textarea { resize: vertical; min-height: 150px; } .fedesub-contact-field input:focus, .fedesub-contact-field select:focus, .fedesub-contact-field textarea:focus { border-color: var(--fedesub-blue-500); box-shadow: 0 0 0 3px rgba(22,161,207,.12); } .fedesub-contact-field input.is-invalid, .fedesub-contact-field select.is-invalid, .fedesub-contact-field textarea.is-invalid { border-color: #c64b4b; box-shadow: 0 0 0 3px rgba(198,75,75,.08); } .fedesub-contact-field small { display:block; margin-top:6px; color:#81919b; font-size:11px; } .fedesub-contact-consent { display:flex; align-items:flex-start; gap:10px; margin: 4px 0 19px; font-size:12px; color:#556d7b; cursor:pointer; } .fedesub-contact-consent input { margin-top:4px; accent-color: var(--fedesub-blue-700); } .fedesub-contact-consent input.is-invalid { outline: 2px solid #c64b4b; outline-offset: 2px; } .fedesub-contact-submit { width: 100%; border: 0; border-radius: 12px; padding: 14px 18px; display:flex;justify-content:center;align-items:center;gap:10px; background: linear-gradient(100deg, var(--fedesub-blue-900), var(--fedesub-blue-500)); color:#fff; font:inherit; font-weight:800; cursor:pointer; box-shadow:0 12px 22px rgba(8,116,172,.19); } .fedesub-contact-submit:hover { filter: brightness(1.035); } .fedesub-contact-required { text-align:center; margin:10px 0 0; color:#81919b; font-size:11px; } .fedesub-contact-hp { position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important; overflow:hidden!important; } .fedesub-contact-footer { background: var(--fedesub-blue-950); color: rgba(255,255,255,.82); padding: 35px 0; } .fedesub-contact-footer-inner { display:flex; justify-content:space-between; gap:30px; align-items:flex-start; } .fedesub-contact-footer strong { color:#fff; } .fedesub-contact-footer p { margin:6px 0 0; font-size:12px; max-width:550px; } .fedesub-contact-footer-links { display:flex; gap:16px; flex-wrap:wrap; } .fedesub-contact-footer-links a { color:#fff; font-size:12px; font-weight:700; text-decoration:none; } .fedesub-contact-footer-links a:hover { text-decoration:underline; } @media (max-width: 980px) { .fedesub-contact-topbar-inner { align-items:flex-start; padding:14px 0; flex-direction:column; } .fedesub-contact-nav { justify-content:flex-start; } .fedesub-contact-hero-grid { grid-template-columns:1fr; } .fedesub-contact-hero-visual { display:none; } .fedesub-contact-cards { grid-template-columns: repeat(2, minmax(0,1fr)); } .fedesub-contact-form-grid { grid-template-columns:1fr; gap:36px; } .fedesub-contact-form-intro { position:static; } } @media (max-width: 650px) { .fedesub-contact-shell { width:min(100% - 26px, 1180px); } .fedesub-contact-topbar { position:static; } .fedesub-contact-nav { width:100%; display:grid; grid-template-columns:1fr 1fr; } .fedesub-contact-nav a { background:#f7fbfd; } .fedesub-contact-hero { min-height:390px; } .fedesub-contact-hero-grid { padding:58px 0 95px; } .fedesub-contact-hero h1 { font-size:42px; } .fedesub-contact-hero p { font-size:16px; } .fedesub-contact-section { padding-top:42px; } .fedesub-contact-cards { grid-template-columns:1fr; } .fedesub-contact-card { min-height:0; } .fedesub-contact-form-section { padding:62px 0; } .fedesub-contact-form { padding:22px 17px; } .fedesub-contact-field-row { grid-template-columns:1fr; gap:0; } .fedesub-contact-footer-inner { flex-direction:column; } }