/* =========================================================================== CONTIGO 50+ · Inicio de MiPortal Prefijo .c50- en todas las clases para aislarlas del CSS del portal. NOTA DE INTEGRACIÓN: si el portal no carga Open Sans, agregar el link a la fuente en el de home.htm, o descomentar: @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap"); DESVIACIÓN DECLARADA: el manual sugiere interlineado de 110-120% para cuerpo. Aquí se usa ~155% y cuerpo de 17px porque el público objetivo llega a los 80 años. El propio manual (p. 46) autoriza ajustar tamaño e interlineado según la plataforma y advierte no limitar la accesibilidad. =========================================================================== */ .c50-wrap { font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.55; color: #001f45; -webkit-font-smoothing: antialiased; } .c50-wrap p { margin: 0 0 16px; font-weight: 400; } .c50-wrap p:last-child { margin-bottom: 0; } /* --- Bloques ------------------------------------------------------------ */ .c50-section { padding: 60px 0; background: #fff; } .c50-section--tint { background: #f2f4f7; } /* --- Tipografía --------------------------------------------------------- */ .c50-eyebrow { display: block; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #007bc3; margin: 0 0 14px; } .c50-eyebrow--light { color: #14d6e0; } .c50-h2 { font-size: 32px; line-height: 1.15; font-weight: 700; letter-spacing: -0.005em; text-transform: uppercase; color: #001f45; margin: 0 0 20px; } .c50-h2 em { font-style: normal; color: #007bc3; } .c50-sub { font-size: 18px; line-height: 1.45; font-weight: 600; color: #405773; margin: 0 0 18px; } .c50-measure { max-width: 820px; } /* =========================================================================== 1 · HERO El banner trae el titular, la bajada y el botón incrustados en la imagen, por lo que todo el bloque es un solo enlace. La imagen se muestra completa como a ancho total: la altura se ajusta sola según la proporción del archivo (2876 x 976 px, ratio 2.947:1), sin recortes en ningún ancho de pantalla. =========================================================================== */ .c50-hero { display: block; position: relative; width: 100%; background-color: #001f45; text-decoration: none; } .c50-hero-img { display: block; width: 100%; height: auto; } .c50-hero:focus-visible { outline: 4px solid #ffd200; outline-offset: -4px; } /* Versión móvil: se oculta el banner completo (el texto incrustado resulta ilegible por debajo de 768 px), se encuadra solo la fotografía como fondo y el mensaje se rearma con texto real. */ .c50-hero-mob { display: none; } @media (max-width: 767px) { .c50-hero { background-image: url('images/hero-mobile.png'); background-size: cover; background-position: center center; background-repeat: no-repeat; } .c50-hero-img { display: none; } .c50-hero-mob { display: block; padding: 30px 22px 34px; background-image: linear-gradient( 180deg, rgba(0, 31, 69, 0.2) 0%, rgba(0, 31, 69, 0.55) 46%, rgba(0, 31, 69, 0.85) 100% ); } .c50-hero-mob .c50-hero-eyebrow { display: block; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #007bc3; margin: 110px 0 10px; } .c50-hero-mob .c50-hero-t { display: block; font-size: 27px; line-height: 1.1; font-weight: 700; text-transform: uppercase; color: #fff; margin: 0 0 14px; } .c50-hero-mob .c50-hero-s { display: block; font-size: 17px; line-height: 1.45; color: #bfc7d1; margin: 0 0 22px; } .c50-hero-mob .c50-hero-b { display: inline-block; background: #ffd200; color: #001f45; font-size: 16px; font-weight: 700; line-height: 1.2; padding: 15px 26px; border-radius: 999px; } } /* --- Rejilla ------------------------------------------------------------ */ .c50-cols { display: flex; flex-wrap: wrap; margin: 0 -16px; } .c50-col { padding: 0 16px; width: 100%; } @media (min-width: 768px) { .c50-col--half { width: 50%; } } /* --- Tarjetas de cobertura --------------------------------------------- */ .c50-covers { display: flex; flex-wrap: wrap; align-items: stretch; margin: 34px -10px 0; padding: 0; list-style: none; } .c50-cover { width: 100%; padding: 0 10px 20px; display: flex; } @media (min-width: 600px) { .c50-cover { width: 50%; } } @media (min-width: 992px) { .c50-cover { width: 25%; } } .c50-cover-in { display: flex; flex-direction: column; width: 100%; background: #fff; border: 1px solid #bfc7d1; padding: 24px 22px; height: 100%; } .c50-cover-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(0, 123, 195, 0.1); color: #007bc3; margin: 0 0 16px; } .c50-cover-icon svg { width: 24px; height: 24px; } .c50-cover-in h3 { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #001f45; margin: 0 0 10px; } .c50-cover-in p { font-size: 15px; line-height: 1.5; font-weight: 400; color: #405773; margin: 0; } /* --- Doble audiencia ---------------------------------------------------- */ .c50-who { display: flex; flex-wrap: wrap; align-items: stretch; margin: 34px -12px 0; padding: 0; list-style: none; } .c50-whocard { width: 100%; padding: 0 12px 24px; display: flex; } @media (min-width: 768px) { .c50-whocard { width: 50%; } } .c50-whocard-in { display: flex; flex-direction: column; width: 100%; background: #fff; border: 1px solid #bfc7d1; border-left: 6px solid #14d6e0; padding: 30px 28px; height: 100%; } .c50-whocard--b .c50-whocard-in { border-left-color: #ffd200; } .c50-whocard-in h3 { font-size: 17px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #001f45; margin: 0 0 12px; line-height: 1.15; } .c50-whocard-in p { font-size: 15px; line-height: 1.55; font-weight: 400; color: #405773; margin: 0 0 12px; } .c50-whocard-in p:last-child { margin-bottom: 0; } .c50-whocard-in strong { font-weight: 700; color: #001f45; } /* --- Planes ------------------------------------------------------------- */ .c50-plans { display: flex; flex-wrap: wrap; align-items: stretch; margin: 34px -10px 0; padding: 0; list-style: none; } .c50-plan { width: 100%; padding: 0 10px 20px; display: flex; } @media (min-width: 600px) { .c50-plan { width: 50%; } } @media (min-width: 992px) { .c50-plan { width: 25%; } } .c50-plan-in { display: flex; flex-direction: column; width: 100%; background: #fff; border: 1px solid #e4e8ee; border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 31, 69, 0.08); padding: 0 0 22px; height: 100%; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } .c50-plan-in:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 31, 69, 0.14); } .c50-plan-in h3 { font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #001f45; margin: 0; min-height: 56px; display: flex; align-items: center; padding: 24px 22px 16px; } .c50-plan-desc { font-size: 15px; line-height: 1.5; font-weight: 400; color: #405773; padding: 0 22px 16px; margin: 0; min-height: 84px; } .c50-plan-label { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #007bc3; padding: 0 22px 8px; margin: 0; } .c50-serv { list-style: none; padding: 0 22px; margin: 0; } .c50-serv li { position: relative; padding: 7px 0 7px 26px; font-size: 15px; font-weight: 400; line-height: 1.45; color: #001f45; border-bottom: 1px solid #e4e8ee; } .c50-serv li:last-child { border-bottom: none; } .c50-serv li:before { content: '›'; position: absolute; left: 4px; top: 6px; color: #14d6e0; font-weight: 700; font-size: 15px; } /* --- Botones ------------------------------------------------------------ */ .c50-actions { margin: 32px 0 0; } .c50-btn { display: inline-block; font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; padding: 15px 32px; text-decoration: none; border: 2px solid transparent; border-radius: 999px; margin: 0 12px 14px 0; } /* Secundarios — contorno sobre fondo claro */ .c50-btn--outline { background: transparent; border-color: #007bc3; color: #007bc3 !important; } .c50-btn--outline:hover, .c50-btn--outline:focus { background: #007bc3; border-color: #007bc3; color: #fff !important; text-decoration: none; } .c50-btn:focus-visible { outline: 3px solid #001f45; outline-offset: 3px; } /* --- Banner de cierre --------------------------------------------------- */ .c50-close { background: #001f45; color: #fff; padding: 76px 0; text-align: center; } .c50-close .c50-h2 { color: #fff; margin-left: auto; margin-right: auto; max-width: 820px; } .c50-close .c50-h2 em { color: #14d6e0; } .c50-close .c50-sub { color: #bfc7d1; max-width: 640px; margin-left: auto; margin-right: auto; margin-bottom: 30px; } /* CTA de cierre: es una frase, no un botón */ .c50-close-cta { display: block; font-size: 21px; line-height: 1.3; font-weight: 700; color: #ffd200; margin: 0; } /* --- Responsive --------------------------------------------------------- */ @media (max-width: 767px) { .c50-wrap { font-size: 15px; } .c50-eyebrow { font-size: 17px; } .c50-h2 { font-size: 24px; } .c50-sub { font-size: 17px; } .c50-section { padding: 44px 0; } .c50-close { padding: 52px 0; } .c50-btn { display: block; text-align: center; margin-right: 0; } .c50-close-cta { font-size: 19px; } } /* Desplazamiento suave hacia la sección al usar el enlace del hero. El offset compensa la cabecera fija del portal. */ .c50-anchor { scroll-margin-top: 130px; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } @media (prefers-reduced-motion: reduce) { .c50-wrap *, .c50-wrap *:before, .c50-wrap *:after { transition: none !important; animation: none !important; } }