/* ============================================================ SerLinkLabs · Página de producto (landing de cada curso) Cargar DESPUÉS de reset.css, styles.css y responsive.css Scopeado a Sirve para las 5 landings: solo hay que añadir la clase. Recuerda: 1rem = 10px (html { font-size: 10px }) ============================================================ */ .page-producto { --pr-violet: #5419f9; --pr-violet-soft: #ece7ff; --pr-blue: #272595; --pr-green: #00a352; --pr-card: #ffffff; --pr-line: #e2dff2; --pr-text: #1c1a2e; --pr-muted: #5f5b7d; background: #f6f5fb; } /* ============================================================ 1 · Cabecera de producto ============================================================ */ .page-producto .rate-serlinklabs { align-items: start; gap: 5rem; height: auto; margin: 0; padding: 5rem max(2rem, calc((100% - 128rem) / 2)) 6rem; } /* ---------- Columna izquierda: compra ---------- */ .page-producto .rate-serlinklabs__rate-left { position: sticky; top: 3rem; width: 38rem; max-width: 100%; flex-shrink: 0; gap: 0; padding: 2rem; border: 1px solid var(--pr-line); border-radius: 2rem; overflow: visible; background: var(--pr-card); box-shadow: 0 1.4rem 4rem rgba(39, 37, 149, 0.10); } .page-producto .rate-left__image { width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: 1.4rem; } .page-producto .image__rate { width: 100%; height: 100%; object-fit: cover; border-radius: 1.4rem; } .page-producto .rate-left__precio { display: flex; align-items: baseline; justify-content: center; gap: 1rem; margin-top: 2.5rem; font-family: Arial, Helvetica, sans-serif; font-size: 5rem; line-height: 1; color: var(--pr-text); } .page-producto .precio__nota { font-size: 1.2rem; font-weight: bold; letter-spacing: 0.1rem; text-transform: uppercase; color: var(--pr-muted); } /* Garantías bajo el precio */ .page-producto .compra__garantias { display: flex; flex-direction: column; gap: 1rem; margin: 2.5rem 0 0; padding-top: 2rem; border-top: 1px solid var(--pr-line); } .page-producto .compra__garantia { display: flex; align-items: flex-start; gap: 1rem; font-family: Arial, Helvetica, sans-serif; font-size: 1.35rem; line-height: 1.5; color: var(--pr-muted); } .page-producto .compra__garantia .emoji { margin-top: 0.1rem; font-size: 1.6rem; } /* ---------- Botón de compra ---------- */ .page-producto .serlinklabs--button { width: 100%; height: 5.6rem; gap: 1rem; margin-top: 2.5rem; padding: 1rem 2rem; border-radius: 1.2rem; background: var(--pr-violet); color: #ffffff; font-size: 1.7rem; letter-spacing: 0.1rem; box-shadow: 0 1rem 2.6rem rgba(84, 25, 249, 0.35); } .page-producto .serlinklabs--button:hover { background: #4312cc; transform: translateY(-0.2rem); } .page-producto .serlinklabs--button svg { width: 2.2rem !important; height: 2.2rem !important; } /* ---------- Columna derecha: información ---------- */ .page-producto .rate-serlinklabs__rate-right { width: auto; height: auto; min-height: 0; margin-top: 0; flex: 1 1 auto; min-width: 0; gap: 0; } .page-producto .rate-right__title { text-align: left; font-size: 3.6rem; line-height: 1.2; color: var(--pr-text); } .page-producto .rate-right__subtitle { margin-top: 1.2rem; text-align: left; font-size: 1.6rem; line-height: 1.6; color: var(--pr-violet); } .page-producto .rate-right__content { width: 100%; max-width: 72rem; margin: 2rem 0 0; font-family: Arial, Helvetica, sans-serif !important; font-size: 1.5rem; line-height: 1.8; font-weight: normal; color: #3a3752; } /* ---------- "Lo que obtendrás" ---------- Las cajitas de 7rem con letra de 1.1rem no daban para el texto: ahora es una lista a dos columnas. */ .page-producto .rate-right__features-rates { width: 100%; margin: 3.5rem 0 0; padding: 3rem; border: 1px solid var(--pr-line); border-radius: 1.6rem; background: var(--pr-card); } .page-producto .features-rates__title { margin-bottom: 2rem; } .page-producto .features__ventajas { font-size: 1.3rem; font-weight: bold; letter-spacing: 0.18rem; text-transform: uppercase; color: var(--pr-violet); } .page-producto .features-rates__features { display: grid; grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr)); gap: 1.8rem 3rem; align-items: start; justify-items: stretch; text-align: left; } .page-producto .feature { display: flex; align-items: flex-start; justify-content: flex-start; gap: 1.2rem; flex-basis: auto; width: auto; height: auto; padding: 0; border: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 1.45rem; line-height: 1.5; font-weight: normal; color: var(--pr-text); cursor: default; } .page-producto .feature:hover { filter: none; background: transparent; color: var(--pr-violet); } .page-producto .emoji { flex-shrink: 0; font-size: 1.8rem; line-height: 1.3; font-style: normal; } /* ============================================================ 2 · Bloque de texto largo ============================================================ */ .page-producto .python-serlinklabs--all { margin-top: 0 !important; } .page-producto .python-serlinklabs__content-python { max-width: 84rem; margin: 0 auto; padding: 5rem 2rem 3rem; } .page-producto .content-python__header-container { margin-top: 0 !important; margin-bottom: 2.5rem; } .page-producto .content-python__header { font-size: 3rem; line-height: 1.25; color: var(--pr-text); } .page-producto .content-python__p { margin-bottom: 2rem; font-family: Arial, Helvetica, sans-serif !important; font-size: 1.55rem; line-height: 1.8; font-weight: normal; color: #3a3752; } .page-producto .content-python__features { margin: 0 0 2.5rem; padding: 2.5rem 3rem; border-left: 3px solid var(--pr-violet); border-radius: 0 1.2rem 1.2rem 0; background: var(--pr-violet-soft); list-style: none; font-family: Arial, Helvetica, sans-serif !important; font-size: 1.5rem; } .page-producto .content-python__feature { position: relative; padding: 0 0 0 2.6rem; margin-bottom: 1.2rem; line-height: 1.6; font-weight: normal; color: var(--pr-text); } .page-producto .content-python__feature:last-child { margin-bottom: 0; } .page-producto .content-python__feature::before { content: "\25B8"; position: absolute; left: 0.4rem; top: 0; font-size: 1.6rem; line-height: 1.5; color: var(--pr-violet); } /* ============================================================ 3 · Tarjetas de características ============================================================ */ .page-producto .python-serlinklabs__features { display: grid; grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); align-items: stretch; gap: 2rem; width: 100%; max-width: 132rem; margin: 0 auto; padding: 2rem clamp(2rem, 4vw, 3rem) 5rem; } .page-producto .features__python { width: auto; height: auto; gap: 1.6rem; padding: 2.8rem 2.4rem; border: 1px solid var(--pr-line); border-radius: 1.6rem; background: var(--pr-card); text-align: center; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } .page-producto .features__python:hover { background: var(--pr-card); transform: translateY(-0.6rem); border-color: var(--pr-violet); box-shadow: 0 1.6rem 3.6rem rgba(84, 25, 249, 0.18); } .page-producto .features__python:hover .features__title, .page-producto .features__python:hover .features__content { color: inherit; } .page-producto .python__top { height: auto; width: auto; flex-shrink: 0; } /* El icono dentro de un círculo violeta */ .page-producto .curso-image { display: flex; align-items: center; justify-content: center; width: 6rem; height: 6rem; border-radius: 50%; background: var(--pr-violet-soft); color: var(--pr-violet); font-size: 2.4rem; } .page-producto .features__python:hover .curso-image { background: var(--pr-violet); color: #ffffff; } .page-producto .python__bottom { height: auto; display: flex; flex-direction: column; gap: 0.8rem; } .page-producto .features__title { font-size: 1.5rem; line-height: 1.45; color: var(--pr-text); } .page-producto .features__content { font-size: 1.35rem !important; line-height: 1.6; color: var(--pr-muted); } /* ============================================================ 4 · Otros cursos ============================================================ */ .page-producto .labs-formaciones { width: 100%; max-width: 128rem; margin: 0 auto; padding: 4rem 2rem 6rem; border-top: 1px solid var(--pr-line); } .page-producto .labs-formaciones__header { text-align: center; font-size: 2.8rem; color: var(--pr-text); } .page-producto .labs-formaciones__cursos { flex-wrap: wrap; gap: 2.5rem; margin-top: 3.5rem; } .page-producto .cursos__curso { width: 26rem; height: auto; padding: 3rem 2rem; gap: 1.5rem; border-radius: 1.6rem; background: linear-gradient(160deg, var(--pr-blue), #200f48); transition: transform 0.22s ease, box-shadow 0.22s ease; } .page-producto .cursos__curso:hover { filter: none; transform: translateY(-0.6rem); box-shadow: 0 1.6rem 3.6rem rgba(39, 37, 149, 0.3); } .page-producto .curso-icon { font-size: 4rem; } .page-producto .curso__title { font-size: 1.5rem; line-height: 1.4; } .page-producto .curso__precio { font-size: 2.6rem; } .page-producto .labs-formaciones__footer { margin-top: 4rem; font-size: 1.6rem; color: var(--pr-muted); } /* ============================================================ Responsive ============================================================ */ @media (max-width: 1200px) { .page-producto .python-serlinklabs__features { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* tablet: la cabecera sigue a dos columnas, con la tarjeta de compra más estrecha. responsive.css la apila ya en 1180px, hay que revertirlo */ .page-producto .rate-serlinklabs { flex-direction: row; align-items: start; gap: 3.5rem; padding: 4rem 2.5rem 5rem; } .page-producto .rate-serlinklabs__rate-right { width: auto; flex: 1 1 auto; } .page-producto .rate-serlinklabs__rate-left { width: 32rem; padding: 1.6rem; } .page-producto .rate-right__title { font-size: 3rem; } } @media (max-width: 940px) { .page-producto .rate-serlinklabs__rate-right { width: 100%; height: auto; margin-top: 0; } .page-producto .rate-serlinklabs { flex-direction: column; align-items: center; padding: 4rem 2rem 5rem; } .page-producto .rate-serlinklabs__rate-left { position: static; width: 100%; max-width: 46rem; } .page-producto .rate-serlinklabs__rate-right { width: 100%; max-width: 72rem; } .page-producto .rate-right__title { text-align: center; font-size: 3rem; } .page-producto .rate-right__subtitle { text-align: center; } } @media (max-width: 560px) { .page-producto .python-serlinklabs__features { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .page-producto .rate-right__title { font-size: 2.4rem; } .page-producto .rate-right__features-rates, .page-producto .content-python__features { padding: 2rem; } .page-producto .content-python__header { font-size: 2.2rem; } .page-producto .cursos__curso { width: 100%; max-width: 32rem; } } @media (prefers-reduced-motion: reduce) { .page-producto * { transition: none !important; } } /* Emojis dentro de los círculos y las tarjetas de otros cursos */ .page-producto .curso-image.emoji { font-size: 2.8rem; font-style: normal; } .page-producto .curso-icon.emoji { display: block; font-size: 4rem; font-style: normal; line-height: 1; } /* ============================================================ Modal de SellAuth Sus estilos vienen en rem, y como el del sitio está a 10px (en vez de los 16px que asume la librería), todo el embed se quedaba al 62,5% de su tamaño. Se corrige fijando las medidas en px, que no dependen del tamaño de raíz. ============================================================ */ #sellauth-modal { /* centrado explícito: no depende de inset + margin auto */ position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; /* Por debajo de 640px el checkout usa su diseño compacto. Justo en 640 salta al punto de ruptura "sm" de Tailwind y reordena pasos y métodos de pago en dos columnas. */ width: min(600px, 94vw) !important; max-width: 94vw !important; height: min(860px, 92vh) !important; max-height: 92vh !important; margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 16px !important; background: transparent !important; overflow: visible !important; } #sellauth-modal::backdrop { background: rgba(6, 3, 18, 0.72); backdrop-filter: blur(2px); } #sellauth-modal > [role="alertdialog"] { display: block !important; box-sizing: border-box !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; /* si el wrapper trae padding o margen en rem, desplaza el iframe y el recorte se ve solo por un lado */ margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 16px !important; overflow: hidden !important; } #sellauth-modal iframe { display: block !important; box-sizing: border-box !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; /* max-width al 100%: así no puede ser más ancho que su caja */ max-width: 100% !important; max-height: 100% !important; margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 16px !important; } /* Botón de cerrar: también le afectaba el rem */ #sellauth-modal > button.close { position: absolute !important; top: 12px !important; right: 12px !important; z-index: 100000 !important; display: flex !important; align-items: center; justify-content: center; width: 36px !important; height: 36px !important; padding: 0 !important; border: none !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.14) !important; color: #ffffff !important; cursor: pointer; } #sellauth-modal > button.close:hover { background: rgba(255, 255, 255, 0.26) !important; } #sellauth-modal > button.close svg { width: 20px !important; height: 20px !important; } @media (max-width: 620px) { #sellauth-modal { top: 0 !important; left: 0 !important; transform: none !important; width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important; border-radius: 0 !important; } #sellauth-modal > [role="alertdialog"], #sellauth-modal iframe { border-radius: 0 !important; } #sellauth-modal > button.close { top: 10px !important; right: 10px !important; background: rgba(0, 0, 0, 0.55) !important; } }