/* ============================================================ SerLinkLabs · Página de cursos (tarifas) Cargar DESPUÉS de reset.css, styles.css y responsive.css Scopeado a Recuerda: 1rem = 10px (html { font-size: 10px }) ============================================================ */ .page-cursos { --ct-violet: #5419f9; --ct-blue: #272595; --ct-green: #00c75d; --ct-green-dark: #00a34b; --ct-card-1: #200f48; --ct-card-2: #51096a; --ct-text: #ffffff; --ct-muted: #c8c2e8; background: #f6f5fb; } /* ---------- Sección ---------- */ .page-cursos .labs-tarifas { padding: 6rem max(3rem, calc((100% - 132rem) / 2)) 8rem; } /* Cabecera de la sección (no la de cada tarjeta) */ .page-cursos .labs-tarifas > .labs-tarifas__header { flex-direction: column; gap: 1rem; margin-bottom: 5rem; } .page-cursos .labs-tarifas__title { margin-bottom: 0; font-size: 4.6rem; color: #14122b; } .page-cursos .tarifas__subtitulo { max-width: 62rem; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 1.6rem; line-height: 1.6; color: #5f5b7d; } /* ---------- Rejilla de tarjetas ---------- */ .page-cursos .labs-tarifas__content { align-items: stretch; gap: 3rem; overflow: visible; } .page-cursos .labs-tarifas__tarifa { flex: 0 0 auto; width: 36rem; max-width: 100%; height: auto; min-height: 0; padding: 3.5rem 3rem 3rem; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 2.4rem; background: linear-gradient(160deg, var(--ct-card-1), var(--ct-card-2)); box-shadow: 0 1.6rem 4rem rgba(32, 15, 72, 0.22); transition: transform 0.25s ease, box-shadow 0.25s ease; } .page-cursos .labs-tarifas__tarifa:hover { transform: translateY(-0.8rem); box-shadow: 0 2.4rem 5.5rem rgba(84, 25, 249, 0.35); } /* Tarjeta destacada */ .page-cursos .labs-tarifas__tarifa--destacada { border: 2px solid var(--ct-green); box-shadow: 0 2rem 5rem rgba(0, 199, 93, 0.25); } .page-cursos .tarifa__badge { position: absolute; top: -1.4rem; left: 50%; transform: translateX(-50%); padding: 0.6rem 1.8rem; border-radius: 999px; background: var(--ct-green); color: #062814; font-family: Arial, Helvetica, sans-serif; font-size: 1.2rem; font-weight: bold; letter-spacing: 0.12rem; text-transform: uppercase; white-space: nowrap; } /* ---------- Nombre y precio ---------- */ .page-cursos .labs-tarifas__tarifa .labs-tarifas__header { flex-basis: auto; min-height: 8rem; align-items: flex-start; } .page-cursos .labs-tarifas__name { font-size: 2.1rem; line-height: 1.3; } .page-cursos .labs-tarifas__price { height: auto; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; margin: 1.5rem 0 0; padding-bottom: 2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .page-cursos .labs-tarifas__precio { flex-basis: auto; font-size: 5.6rem; line-height: 1; } .page-cursos .precio__nota { font-family: Arial, Helvetica, sans-serif; font-size: 1.2rem; letter-spacing: 0.1rem; text-transform: uppercase; color: var(--ct-muted); } /* ---------- Resumen ---------- */ .page-cursos .labs-tarifas__resumen { height: auto; min-height: 9rem; } .page-cursos .labs-tarifas__pregunta { margin: 2rem 0 0; font-size: 1.5rem; line-height: 1.6; color: var(--ct-muted); } /* ---------- Lista de características ---------- flex: 1 empuja el botón al fondo, así todas las tarjetas alinean el COMPRAR aunque tengan distinto número de puntos. */ .page-cursos .labs-tarifas__features { flex: 1; height: auto; align-items: flex-start; padding: 2.5rem 0 1rem; } .page-cursos .labs-tarifas__descripcion { width: 100%; gap: 1.4rem; list-style: none; } .page-cursos .labs-tarifas__feature { position: relative; padding-left: 2.8rem; font-size: 1.5rem; line-height: 1.55; color: var(--ct-text); } /* La palomita sustituye al bullet: con sangría francesa, el texto que se parte ya no se mete debajo del punto. */ .page-cursos .labs-tarifas__feature::before { content: "\2713"; font-family: Arial, Helvetica, sans-serif; font-weight: bold; position: absolute; left: 0.2rem; top: 0; font-size: 1.5rem; line-height: 1.55; color: var(--ct-green); } /* ---------- Botón ---------- */ .page-cursos .labs-tarifas__boton-container { height: auto; margin-top: 2.5rem; } .page-cursos .labs-tarifas__comprar { width: 100%; height: 5rem; border-radius: 1.2rem; background: var(--ct-green); color: #062814; font-size: 1.6rem; letter-spacing: 0.15rem; } .page-cursos .labs-tarifas__comprar:hover { background: var(--ct-green-dark); color: #ffffff; transform: none; } /* ---------- Responsive ---------- */ @media (max-width: 1100px) { .page-cursos .labs-tarifas__content { flex-direction: row; flex-wrap: wrap; } } @media (max-width: 780px) { .page-cursos .labs-tarifas__content { flex-direction: column; align-items: center; } } @media (max-width: 640px) { .page-cursos .labs-tarifas { padding: 4rem 2rem 5rem; } .page-cursos .labs-tarifas__title { font-size: 3.4rem; } .page-cursos .labs-tarifas__tarifa { width: 100%; padding: 3rem 2.2rem 2.5rem; } .page-cursos .labs-tarifas__tarifa .labs-tarifas__header, .page-cursos .labs-tarifas__resumen { min-height: 0; } } @media (prefers-reduced-motion: reduce) { .page-cursos * { transition: none !important; } }