/* ============================================================ SerLinkLabs · Página principal Cargar DESPUÉS de reset.css, styles.css y responsive.css El lleva dos clases: "page-home page-cursos" (la segunda reaprovecha las mejoras de la sección de cursos) Recuerda: 1rem = 10px (html { font-size: 10px }) ============================================================ */ .page-home { --hm-violet: #5419f9; --hm-violet-soft: #ece7ff; --hm-blue: #272595; --hm-green: #01ff76; --hm-line: #e2dff2; --hm-text: #1c1a2e; --hm-muted: #5f5b7d; } /* ============================================================ 1 · Hero ============================================================ */ .page-home .main-labs { align-items: stretch; } .page-home .main-labs__left { height: auto; min-height: 58rem; justify-content: center; padding: 6rem clamp(2rem, 5vw, 6rem); } .page-home .main-labs__container-labs { gap: 2.4rem; width: 100%; max-width: 58rem; } .page-home .container-labs__title { width: 100%; margin: 0; text-align: left; font-size: 4.6rem; line-height: 1.15; color: var(--hm-text); } .page-home .container-labs__content { width: 100%; margin: 0; text-align: left; font-size: 1.8rem; line-height: 1.6; color: var(--hm-muted); } .page-home .container-labs__span { color: var(--hm-violet); } .page-home .main-labs__button-info { justify-content: flex-start; gap: 1.5rem; flex-wrap: wrap; } .page-home .container-labs__more-info { width: auto; min-width: 20rem; height: 5.4rem; padding: 0 3rem; font-size: 1.6rem; box-shadow: 0 1rem 2.6rem rgba(1, 255, 118, 0.35); } /* Enlace secundario junto al botón verde */ .page-home .hero__link { display: inline-flex; align-items: center; height: 5.4rem; padding: 0 2.4rem; border: 1px solid var(--hm-line); border-radius: 5rem; font-family: Arial, Helvetica, sans-serif; font-size: 1.5rem; font-weight: bold; color: var(--hm-text); transition: border-color 0.2s ease, color 0.2s ease; } .page-home .hero__link:hover { border-color: var(--hm-violet); color: var(--hm-violet); } /* Fila de datos de confianza */ .page-home .hero__chips { display: flex; flex-wrap: wrap; gap: 1rem 2.4rem; margin-top: 0.5rem; padding-top: 2.4rem; border-top: 1px solid var(--hm-line); list-style: none; } .page-home .hero__chip { display: flex; align-items: center; gap: 0.8rem; font-family: Arial, Helvetica, sans-serif; font-size: 1.4rem; color: var(--hm-muted); } .page-home .hero__chip .emoji { font-size: 1.7rem; font-style: normal; } .page-home .main-labs__right { height: auto; min-height: 58rem; } /* ============================================================ 2 · Banda oscura + tarjetas de ventajas ============================================================ */ .page-home .header-info__top-info { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2rem; padding: 3rem clamp(2rem, 5vw, 8rem); } .page-home .top-info__labs { width: 30rem; margin-left: 0; } /* El eslogan estaba en una caja blanca flotante encima de la banda */ .page-home .header-info__eslogan { position: static; width: auto; height: auto; padding: 0; border-radius: 0; background: transparent; color: #ffffff; font-size: 2.2rem; text-align: right; } .page-home .labs-info__content-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); gap: 2.4rem; align-items: stretch; width: 100%; max-width: 138rem; margin: 0 auto; padding: 5rem clamp(2rem, 5vw, 3rem) 0; } .page-home .content-info__content-item { display: flex; flex-direction: column; gap: 1.2rem; flex-basis: auto; margin-top: 0; padding: 3rem 2.6rem; border: 1px solid var(--hm-line); border-radius: 1.8rem; background: #ffffff; box-shadow: 0 1rem 3rem rgba(39, 37, 149, 0.07); transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } .page-home .content-info__content-item:hover { transform: translateY(-0.6rem); border-color: var(--hm-violet); box-shadow: 0 1.6rem 3.6rem rgba(84, 25, 249, 0.16); } .page-home .bottom-info__icon { width: 6rem; height: 6rem; object-fit: contain; } .page-home .content-item__title { font-size: 1.9rem; line-height: 1.3; color: var(--hm-violet); } .page-home .content-item__contenido { font-family: Arial, Helvetica, sans-serif !important; font-size: 1.45rem; line-height: 1.7; font-weight: normal; color: var(--hm-muted); } .page-home .labs-info__button-info { height: auto; padding: 4rem 2rem 0; } .page-home .button-info { width: auto; min-width: 20rem; margin: 0; padding: 1.6rem 3rem; font-size: 1.6rem !important; box-shadow: 0 1rem 2.6rem rgba(1, 255, 118, 0.35); } /* ============================================================ 3 · Sección de la poción ============================================================ */ .page-home .labs-information { align-items: center; gap: 5rem; width: 100%; max-width: 138rem; margin: 0 auto 6rem; padding: 6rem clamp(2rem, 5vw, 3rem) 0; } .page-home .labs-information__left-lab { flex-basis: 40%; } .page-home .labs-information__icon { width: 100%; max-width: 34rem; } .page-home .labs-information__right-lab { flex-basis: 60%; gap: 2.5rem; } .page-home .right-lab__block-lab { gap: 2rem; padding: 2.4rem 2.6rem; border: 1px solid var(--hm-line); border-radius: 1.6rem; background: #ffffff; transition: border-color 0.22s ease, box-shadow 0.22s ease; } .page-home .right-lab__block-lab:hover { border-color: var(--hm-violet); box-shadow: 0 1.2rem 3rem rgba(84, 25, 249, 0.14); } .page-home .block-lab__lab-left { flex-basis: auto; flex-shrink: 0; justify-content: flex-start; width: 6rem; font-family: chonburi, serif; font-size: 3.4rem; line-height: 1; color: var(--hm-violet); opacity: 0.45; } .page-home .block-lab__lab-right { flex-basis: auto; flex: 1; min-width: 0; } .page-home .lab-right__title { margin-bottom: 0.6rem; font-size: 2rem; color: var(--hm-text); } .page-home .lab-right__content { font-family: Arial, Helvetica, sans-serif !important; font-size: 1.45rem; line-height: 1.7; font-weight: normal; color: var(--hm-muted); } /* ============================================================ 4 · Contacto ============================================================ */ .page-home .labs-more-info { width: 100%; max-width: 126rem; margin: 6rem auto; padding: 0 clamp(2rem, 5vw, 3rem); } .page-home .labs-more-info__header { flex-basis: auto; width: 100%; } .page-home .labs-more-info__title { font-size: 3.4rem; font-weight: normal; color: var(--hm-text); } .page-home .labs-more-info__content { margin-top: 1rem; font-family: Arial, Helvetica, sans-serif !important; font-size: 1.6rem; font-weight: normal; color: var(--hm-muted); } .page-home .labs-more-info__block-info { align-items: flex-start; gap: 4rem; margin-top: 4rem; } /* ---------- Columna izquierda ---------- */ .page-home .block-info__left-info { flex-basis: 40%; align-self: flex-start; align-items: flex-start; justify-content: flex-start; gap: 1.4rem; padding: 3rem 2.8rem; border: 1px solid var(--hm-line); border-radius: 1.8rem; background: #ffffff; box-shadow: 0 1rem 3rem rgba(39, 37, 149, 0.07); } .page-home .left-info__header { font-family: chonburi, serif !important; font-size: 2rem; line-height: 1.35; font-weight: normal; color: var(--hm-text); } .page-home .left-info__content { display: flex; align-items: center; gap: 1rem; font-family: Arial, Helvetica, sans-serif !important; font-size: 1.5rem; font-weight: normal; color: var(--hm-muted); } .page-home .left-info__content .emoji { font-size: 1.7rem; font-style: normal; } .page-home .left-info__icons { flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem; } /* Redes como enlaces con texto: los iconos dependían de FontAwesome y no se estaban viendo. */ .page-home .left-info__social { display: inline-flex; align-items: center; gap: 0.8rem; padding: 0.9rem 1.8rem; border: 1px solid var(--hm-line); border-radius: 5rem; font-family: Arial, Helvetica, sans-serif; font-size: 1.4rem; font-weight: bold; color: var(--hm-text); transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .page-home .left-info__social:hover { background: var(--hm-violet-soft); border-color: var(--hm-violet); color: var(--hm-violet); } /* ---------- Formulario ---------- */ .page-home .block-info__contact-labs { flex-basis: 60%; gap: 1.6rem; padding-top: 0; } .page-home .contact-labs__name, .page-home .contact-labs__email, .page-home .contact-labs__number, .page-home .contact-labs__message { width: 100%; padding: 1.6rem 1.8rem; border: 1px solid var(--hm-line); border-radius: 1.2rem; background: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 1.5rem; color: var(--hm-text); box-shadow: none; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .page-home .contact-labs__message { height: 14rem; line-height: 1.6; } .page-home .contact-labs__name:hover, .page-home .contact-labs__email:hover, .page-home .contact-labs__number:hover, .page-home .contact-labs__message:hover { transform: none; border-color: #c9c2ee; box-shadow: none; } .page-home .contact-labs__name:focus, .page-home .contact-labs__email:focus, .page-home .contact-labs__number:focus, .page-home .contact-labs__message:focus { border-color: var(--hm-violet); box-shadow: 0 0 0 3px rgba(84, 25, 249, 0.15); } .page-home .contact-labs__name::placeholder, .page-home .contact-labs__email::placeholder, .page-home .contact-labs__number::placeholder, .page-home .contact-labs__message::placeholder { color: #9a94bd; } .page-home .contact-labs__button { width: 100%; max-width: 24rem; height: 5.2rem; border-radius: 1.2rem; font-size: 1.6rem !important; box-shadow: 0 1rem 2.6rem rgba(84, 25, 249, 0.3); } .page-home .contact-labs__button:hover { background: #4312cc; transform: none; } /* ============================================================ Responsive ============================================================ */ @media (max-width: 1100px) { .page-home .main-labs__left { padding: 5rem 3rem; } .page-home .container-labs__title { font-size: 3.4rem; } .page-home .labs-information { flex-direction: column; padding: 4rem 3rem 0; } .page-home .labs-information__left-lab, .page-home .labs-information__right-lab { flex-basis: auto; width: 100%; } .page-home .labs-more-info__block-info { flex-direction: column; } .page-home .block-info__left-info, .page-home .block-info__contact-labs { flex-basis: auto; width: 100%; } .page-home .header-info__top-info { justify-content: center; } .page-home .header-info__eslogan { width: 100%; text-align: center; font-size: 1.8rem; } } @media (max-width: 640px) { .page-home .container-labs__title { font-size: 2.6rem; } .page-home .main-labs__button-info { flex-direction: column; align-items: stretch; } .page-home .container-labs__more-info, .page-home .hero__link { width: 100%; justify-content: center; } .page-home .labs-more-info__title { font-size: 2.6rem; } .page-home .contact-labs__button { max-width: none; } } @media (prefers-reduced-motion: reduce) { .page-home * { transition: none !important; } }