/* ============================================================================= MediLine — micrositio de planes (/planes) Orden: overrides de SweetAlert2, fuentes, reset y variables, landing (hero, banner, beneficios, planes), flujo de contratación (.ml-step), responsive, layout, header y footer. Dos convenciones que conviene conocer antes de tocar algo: - `* { font-family: Gotham !important }` fuerza la tipografía en todo, incluidos los modales de SweetAlert2. De ahí que muchas reglas usen !important para poder competir contra esa cascada. - `html.direct-plan` y `body.contracting-flow` son las dos clases que ocultan la landing cuando se está en el formulario. La primera la pone un script inline del para evitar el destello de la landing al entrar por un link directo a un plan. ============================================================================= */ /* Utilidad: oculta sin sacar del DOM. La alterna el JS para cambiar entre tarjeta y CBU en el paso de pago, así el markup no lleva style inline. */ .is-hidden { display: none !important; } /* Botón de confirmación de SweetAlert2 (modales de error / éxito) */ .swal2-confirm { background-color: #1A2F50 !important; } .swal2-confirm:hover { background-color: #2a4a78 !important; } /* ================================ IMPORTAR FUENTE GOTHAM ================================ */ @font-face { font-family: 'Gotham'; src: url('images/gotham-book-webfont.woff2') format('woff2'), url('images/gotham-book-webfont.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Gotham'; src: url('images/gotham-bold-webfont.woff2') format('woff2'), url('images/gotham-bold-webfont.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Gotham'; src: url('images/gotham-black-webfont.woff2') format('woff2'), url('images/gotham-black-webfont.woff') format('woff'); font-weight: 900; font-style: normal; font-display: swap; } /* ================================ RESET + BASE ================================ */ :root { --primary: #254469; --color-blue: #009FE3; --secondary: #3A96EB; --color-blue-dark: #0677ad; --color-green: #4CC63F; --color-green-dark: #3ba631; --color-red: #FF3B30; --color-red-dark: #d63229; --color-gray: #666; --color-lightgray: #f4f4f4; --font-main: 'Gotham', sans-serif; } /* Forzar Gotham en todos los elementos */ * { font-family: 'Gotham', sans-serif !important; } body, html { margin: 0; padding: 0; font-family: 'Gotham', sans-serif !important; scroll-behavior: smooth; } .hero-title { color: #254469; font-size: 3.13rem !important; font-weight: bolder !important; line-height: 2 !important; margin: 0 !important; padding-top: 20px; } .hero-subtitle { color: #3B96EB; font-size: 1.7rem !important; font-weight: 700 !important; line-height: 2 !important; } img { max-width: 100%; } /* ================================ HERO ================================ */ .hero { display: flex; justify-content: center; background: #ffffff; padding: 0 0 32px; } .hero-inner { display: flex; align-items: center; gap: 24px; width: 100%; } .hero-content { flex: 1; } .hero-content p { font-size: 20px; margin: 10px 0; color: #444; } .hero-list { /* display: flex; flex-direction: column; align-items: flex-start; padding-top: 15px; padding-bottom: 16px; */ display: grid; grid-template-columns: 40px 1fr; /* 40px para el check, el resto para texto */ gap: 30px 14px; /* fila 16px, columna 14px */ margin: 24px 0; max-width: 800px; margin-bottom: 70px; } .hero-list-item { /* display: flex; align-items: center; gap: 14px; */ display: contents; } .hero-list-item p { color: var(--primary) !important; margin: 0 !important; } .hero-list-item span { font-weight: 900 !important; } .check-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: #3BDB7F; color: white; border-radius: 50%; font-size: 18px; flex-shrink: 0; font-weight: bold; /* */ grid-column: 1; } .hero-img { flex: 1; display: flex; justify-content: center; } .hero-img img { width: 520px; object-fit: contain; } .btn-call-to-action { background: #4ED88A; border: none; padding: 16px 28px; font-size: 18px; color: white; font-size: 1.8rem !important; font-weight: 700; border-radius: 40px; width: 100%; cursor: pointer; transition: .2s; } .btn-call-to-action:hover { background: #3CC876 } /* ================================ CONSULTATION BANNER ================================ */ .consultation-banner { display: flex; justify-content: flex-end; flex-wrap: nowrap; flex-direction: row; align-items: center; gap: 24px; } .consultation-banner img { height: 330px; max-width: 330px; margin-left: 50px; margin-top: 5px; } .consultation-banner-title { font-size: 3.2rem !important; color: var(--secondary) !important; font-weight: 600 !important; margin-bottom: 10px !important; } .consultation-banner-description { font-size: 1.8rem !important; color: var(--primary); } .consultation-banner-description span { font-weight: bolder !important; } /* ================================ benefits (6 ÍCONOS) ================================ */ .benefits { padding: 0; } .benefits-title { font-size: 2.8rem !important; font-weight: bolder !important; color: var(--primary) !important; padding-bottom: 50px; text-align: center; } .benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; } .benefit-item { background: #EFEFEF !important; padding: 15px; border-radius: 40px; display: flex; gap: 10px; justify-content: start; align-items: center; transition: background-color 0.3s ease, transform 0.25s ease, color 0.25s ease; cursor: pointer; height: 150px; } .benefit-item * { transition: color 0.25s ease, fill 0.25s ease; } .benefit-item:hover { background: var(--secondary) !important; font-weight: 800; transform: scale(1.02); color: white !important; } .benefit-item:hover p { font-size: 1.2rem !important; } .benefit-item:hover * { color: white !important; } .benefit-item:hover img { filter: brightness(0) invert(1); } .benefit-item img { height: 100px; } .benefit-item p { font-size: 1.1rem !important; color: var(--primary); margin: 0px !important; line-height: 1.4 !important; } /* ================================ PLANES (tarjetas mp-) ================================ */ #plans { padding-bottom: 0; } /* Beneficios extra de cada plan: los despliega el botón "Ver más". La transición necesita un max-height concreto, no `auto`. */ .additional-content { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 500ms ease-in-out, opacity 500ms ease-in-out; } .additional-content.expanded { max-height: 500px; /* Ajusta según el contenido */ opacity: 1; } .mp-plans-header { text-align: center; margin-bottom: 40px; } .mp-plans-header h2 { font-size: 2rem; font-weight: 800; color: #1a2a4a; margin: 0; } .mp-plans-header p { color: #6b7280; margin-top: 12px; font-size: 1rem; } .mp-plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1100px; margin: 0 auto; } .mp-plan { display: flex; flex-direction: column; } .mp-plan-card { flex: 1; border-radius: 24px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); overflow: hidden; background: #fff; display: flex; flex-direction: column; } .mp-plan-head { position: relative; height: 192px; overflow: hidden; } .mp-plan-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mp-plan-overlay { position: absolute; inset: 0; pointer-events: none; } .mp-plan-ico { position: absolute; top: 16px; right: 16px; width: 70px; height: 70px; z-index: 2; } .mp-plan-titles { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; } .mp-plan-titles .mp-membership { color: rgba(255, 255, 255, .85); font-size: .9rem; font-weight: 500; } .mp-plan-titles h3 { color: #fff; font-weight: 800; font-size: 1.9rem; letter-spacing: 1px; margin: 0; } .mp-plan-body { display: flex; flex-direction: column; flex: 1; padding: 24px 24px 20px; gap: 12px; } .mp-benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .mp-benefits li { display: flex; align-items: flex-start; gap: 12px; } .mp-check { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 2px; } .mp-check svg { width: 14px; height: 14px; color: #fff; } .mp-benefit-text { color: #1a2a4a; font-size: 1rem; font-weight: 500; line-height: 1.3; } /* Beneficio con nota al pie debajo (el "miembro adicional" de Premium) */ .mp-benefit-stack { display: flex; flex-direction: column; } .mp-benefit-row { display: flex; align-items: flex-start; gap: 12px; } .mp-benefit-note { padding-left: 36px; font-size: .75rem; color: #9ca3af; font-weight: 500; margin: 4px 0 0; } .mp-benefits .additional-content { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; padding-top: 14px; border-top: 1px dashed #d1d5db; } .mp-seemore-wrap { margin-top: auto; padding-top: 8px; display: flex; justify-content: center; } .mp-seemore { font-size: .875rem; font-weight: 600; padding: 8px 24px; border-radius: 9999px; border: none; color: #fff; cursor: pointer; transition: background .2s; } .mp-price { text-align: center; font-size: 1.85rem; font-weight: 800; margin: 8px 0 0; } .mp-contract-wrap { display: flex; justify-content: center; margin-top: 16px; } .mp-contract { color: #fff; font-weight: 600; font-size: .9rem; padding: 12px 40px; border-radius: 9999px; border: none; cursor: pointer; transition: background .2s; } /* --- Classic (teal) --- */ .mp-classic .mp-plan-overlay { background: linear-gradient(to top, rgb(34, 211, 179) 0%, rgba(34, 211, 179, .4) 40%, transparent 100%); } .mp-classic .mp-plan-ico { filter: brightness(0) saturate(100%) invert(72%) sepia(43%) saturate(520%) hue-rotate(122deg) brightness(97%); } .mp-classic .mp-check { background: #22d3b3; } .mp-classic .mp-benefit-text b { color: #22d3b3; } .mp-classic .mp-seemore { background: #22d3b3; } .mp-classic .mp-seemore:hover { background: #1ab89f; } .mp-classic .mp-price { color: #22d3b3; } .mp-classic .mp-contract { background: #22d3b3; } .mp-classic .mp-contract:hover { background: #1ab89f; } /* --- Plus (blue) --- */ .mp-plus .mp-plan-overlay { background: linear-gradient(to top, rgb(56, 182, 232) 0%, rgba(56, 182, 232, .4) 40%, transparent 100%); } .mp-plus .mp-plan-ico { filter: brightness(0) saturate(100%) invert(63%) sepia(61%) saturate(480%) hue-rotate(175deg) brightness(98%); } .mp-plus .mp-check { background: #38b6e8; } .mp-plus .mp-benefit-text b { color: #38b6e8; } .mp-plus .mp-seemore { background: #38b6e8; } .mp-plus .mp-seemore:hover { background: #26a2d6; } .mp-plus .mp-price { color: #38b6e8; } .mp-plus .mp-contract { background: #38b6e8; } .mp-plus .mp-contract:hover { background: #26a2d6; } /* --- Premium (navy) --- */ .mp-premium .mp-plan-overlay { background: linear-gradient(to top, rgb(26, 42, 108) 0%, rgba(26, 42, 108, .4) 40%, transparent 100%); } .mp-premium .mp-plan-ico { filter: brightness(0) saturate(100%) invert(28%) sepia(78%) saturate(1400%) hue-rotate(222deg) brightness(88%); } .mp-premium .mp-check { background: #2d4a9e; } .mp-premium .mp-benefit-text b { color: #2d4a9e; } .mp-premium .mp-seemore { background: #1a2a6c; } .mp-premium .mp-seemore:hover { background: #0f1a4a; } .mp-premium .mp-price { color: #2d4a9e; } .mp-premium .mp-contract { background: #1a2a6c; } .mp-premium .mp-contract:hover { background: #0f1a4a; } /* --- Botón "Ver menos" (expandido): estilo outline --- */ .mp-seemore.is-open { border: 2px solid currentColor; } .mp-classic .mp-seemore.is-open { background: #fff; color: #22d3b3; } .mp-classic .mp-seemore.is-open:hover { background: #f9fafb; } .mp-plus .mp-seemore.is-open { background: #fff; color: #38b6e8; } .mp-plus .mp-seemore.is-open:hover { background: #f9fafb; } .mp-premium .mp-seemore.is-open { background: #fff; color: #1a2a6c; } .mp-premium .mp-seemore.is-open:hover { background: #f9fafb; } @media (max-width: 900px) { .mp-plans-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .mp-plans-grid { grid-template-columns: 1fr; } } /* ================================ STEPS ================================ */ .ml-step { display: none; padding: 16px 0 40px; } .ml-step .container-6xl { max-width: 720px; } .ml-step.active { display: block; scroll-margin-top: 96px; } /* Oculta todas las secciones cuando se muestra el formulario de contratación (también con html.direct-plan para evitar destello antes del JS) */ html.direct-plan .hero, html.direct-plan .consultation-banner, html.direct-plan .benefits, html.direct-plan #plans, body.contracting-flow .hero, body.contracting-flow .consultation-banner, body.contracting-flow .benefits, body.contracting-flow #plans { display: none; } /* Reduce el espacio entre el encabezado y el título en los formularios */ html.direct-plan .site-main, body.contracting-flow .site-main { padding-top: 8px; } .ml-step h2 { font-size: 30px; font-weight: 800; margin-top: 0; margin-bottom: 20px; } /* Badge del plan seleccionado en step1 */ #summary-plan { display: inline-block; padding: 6px 16px; border-radius: 20px; font-weight: 600; font-size: 0.85em; margin-left: 8px; vertical-align: middle; } /* Colores según el plan */ #summary-plan.plan-classic { background-color: #22d3b3; color: white; } #summary-plan.plan-plus { background-color: var(--secondary); color: white; } #summary-plan.plan-premium { background-color: var(--primary); color: white; } .ml-step .form-group { margin-bottom: 18px; } /* Etiquetas de campos (no afecta a las opciones de sexo) */ .ml-step .form-group>label { display: block; font-weight: 400; /* sin negrita para las etiquetas de los campos */ margin-bottom: 4px; } /* El grupo de sexo es un fieldset (rotula 3 radios, no un input suelto). Estas reglas lo dejan idéntico a un .form-group con