/* Landing de PortalGlam (spec 2026-10-09 §4.3). CSS propio, separado de Tailwind/Preline: solo lo carga
layouts/marketing.html.erb. Clases mk-*, variables --mk-* (la Task 2 completa tokens y fuentes con lo extraído del
original). */
/* fuentes: inicio (generado por script/landing_assets.rb) */
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/marketing/jost-500-16fbc9c4.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/marketing/jost-500-16fbc9c4.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/marketing/jost-500-16fbc9c4.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Khand"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/marketing/khand-600-7279f395.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/marketing/poppins-300-1be42b80.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/marketing/poppins-400-f3f0f5ee.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/marketing/poppins-500-ce788af2.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/marketing/poppins-600-1f3eca1a.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto Slab"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/marketing/roboto-slab-400-7f6e5263.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto Slab"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/marketing/roboto-slab-400-7f6e5263.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/marketing/roboto-400-e71a8ea2.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/marketing/roboto-400-e71a8ea2.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/marketing/roboto-400-e71a8ea2.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/marketing/roboto-400-e71a8ea2.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* fuentes: fin */
:root {
color-scheme: light;
/* Tokens (Task 2): valores de docs/landing (original-*-1440/390.json, palette.json) y del kit de Elementor (post-5.css). */
--mk-color-dark: #101010; /* hero: background-color de [data-id=3d833846] (rgb 16,16,16); el pie (sección de
[data-elementor-id=256]) y el botón «Solicita Demo Gratis» de la cabecera son #131313 */
--mk-color-gold: #c5ad71; /* pricing: background-color de a.elementor-button «Contratar Plan» (rgb 197,173,113); también los
íconos de beneficios y la caja interior del blog. «Disponible para todos los dispositivos» es
una imagen (hero/boton-todos-los-dispositivos-portalglam4) */
/* Contraste (WCAG): blanco sobre el dorado 2,19:1 y el dorado sobre blanco igual; no llega a 4,5:1 (spec §6). Ajuste mínimo:
el mismo tono oscurecido (rgb × 0,675) hasta 4,52:1. Se usa para texto dorado sobre blanco y como fondo de los botones
dorados con texto blanco. #30373e sobre el dorado da 5,51:1. */
--mk-color-gold-text: #85754c;
--mk-color-text: #30373e; /* color del body del tema Sinatra (rgb 48,55,62), el más usado en palette.json */
--mk-color-muted: #7a7a7a; /* --e-global-color-text del kit; lista de cada plan en pricing (span, rgb 122,122,122) */
/* #7a7a7a sobre blanco da 4,29:1: ajuste mínimo a #767676 (4,54:1) para texto. */
--mk-color-muted-text: #767676;
--mk-color-light: #f6f6f6; /* video: background-color de [data-id=1aad3cf2]; testimonios va de #fff a #f4f4f4 */
--mk-color-white: #ffffff;
--mk-font-heading: "Roboto", sans-serif; /* h1 del hero (700, 36px) y h2 de las secciones (600); kit: primary Roboto 600 */
/* body del tema Sinatra: pila del sistema (texto corrido, listas de los planes) */
--mk-font-body: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
--mk-font-accent: "Poppins", sans-serif; /* botones «Contratar Plan», «Quiero que me contacten», textos de planes y pie.
Además: Jost (títulos del pie, «Nuestro blog», titular de contacto), Khand
(títulos de las tarjetas del blog) y Roboto Slab (subtítulos h2/h5 de soluciones,
precios y testimonios) */
--mk-container: 1335px; /* max-width de .elementor-container de video, testimonios y contacto a 1440 (el más repetido;
cabecera y beneficios 1380, hero 1290, soluciones 1305, blog 1400, pie 1300; el kit, 1140) */
--mk-gutter: 20px; /* x de la caja a 390: beneficios y pie 20, hero 21, blog 15, cabecera/precios/testimonios 10 */
/* Cabecera, pie y burbuja (Task 3): post-73.css, post-256.css y joinchat-btn.min.css del original. */
--mk-color-charcoal: #131313; /* pie (412d45c9) y fondo del botón «Solicita Demo Gratis» (a41d16f) */
--mk-color-black: #000000; /* «Solicita Demo Gratis» con :hover/:focus */
--mk-color-bar: #f9f9f9; /* fondo de la barra de la cabecera (columna 330a3075) */
--mk-color-nav: #1e1e1e; /* enlaces de la cabecera (bf331f5 .elementor-item) */
--mk-color-dropdown: #f8f8f8; /* fondo de los desplegables y del menú del teléfono (.elementor-nav-menu--dropdown) */
--mk-color-dropdown-text: #151515; /* sus enlaces y el botón del menú del teléfono */
--mk-color-dropdown-hover: #0f0f0f; /* fondo de un enlace del desplegable con :hover (texto blanco) */
--mk-color-footer-text: #e7e7e7; /* texto y listas del pie (6ebd42f, .elementor-icon-list-text) */
--mk-color-footer-bottom: #fbfbfb; /* barra inferior del pie (2742ba8a) */
--mk-color-footer-bottom-text: #171717; /* «PortalGlam © …» (53573c73) */
--mk-color-whatsapp: #25d366; /* joinchat__button del original */
/* El ícono blanco sobre #25d366 da 1,98:1; un ícono que identifica el control pide 3:1 (WCAG 1.4.11). Ajuste mínimo: el
mismo tono × 0,805 (3,03:1). El texto blanco sobre verde (botón de contacto, Task 7) pide 4,5:1: × 0,645 (4,53:1). */
--mk-color-whatsapp-ui: #1eaa52;
--mk-color-whatsapp-text: #188842;
--mk-color-whatsapp-hover: #128c7e; /* joinchat__button:hover (4,14:1 con el ícono blanco) */
--mk-font-title: "Jost", sans-serif; /* títulos de las columnas del pie (500, 30px, line-height 1em) */
/* Home, parte 1 (Task 4): post-1034.css del original. */
--mk-color-card-title: #353535; /* textos de los beneficios (3204d39 .elementor-icon-box-title) y títulos de las tarjetas de
soluciones (262673d .elementor-image-box-title) */
--mk-color-card-text: #6a6a6a; /* descripciones de las tarjetas de soluciones (5,4:1 sobre blanco) */
--mk-color-kicker: #4f4d45; /* «Software para Salones de Belleza» (57f31a4d) */
--mk-color-title: #151515; /* «Solucionamos los problemas de gestión…» (74e0130e) */
--mk-shadow-card: 0 0 50px 14px rgba(55.5, 55.5, 55.5, 0.16); /* tarjeta de beneficios (21ccb825) */
--mk-font-subtitle: "Roboto Slab", serif; /* --e-global-typography-secondary del kit (subtítulo de soluciones) */
/* Home, parte 2 (Task 5): post-1034.css del original. */
--mk-color-button-hover: #252525; /* «Contratar Plan» con :hover/:focus (26a424e) */
--mk-color-testimonials-end: #f4f4f4; /* final del degradé de los testimonios (1369b9dd) */
--mk-color-testimonial-name: #333333; /* nombre del referente (e87c6c6), 12,6:1 sobre blanco */
--mk-color-star: rgba(218, 165, 32, 0.96); /* estrellas (a92adcc); decorativas, la valoración va en el aria-label */
/* Blog y artículos (Task 6): post-1034.css (57bdbf11), Elementor Pro (skin «cards») y el tema Sinatra. */
--mk-color-post-title: #414141; /* títulos de las tarjetas (10,2:1) */
--mk-color-post-rule: #eaeaea; /* filete sobre la fecha de la tarjeta */
--mk-color-badge: #70777d; /* píldora de categoría: #818a91 del original × 0,865 (texto blanco 4,54:1) */
--mk-color-heading: #23282d; /* títulos del tema Sinatra (h1–h6, autor, «View All Posts») */
--mk-color-link: #3857f1; /* acento del tema Sinatra: enlaces del cuerpo y borde de las categorías (5,52:1) */
--mk-color-meta: rgb(48 55 62 / 73%); /* «By Portaglam» y la fecha del artículo (5,2:1) */
--mk-color-demo: #d93b3b; /* «Solicita tu Demo Gratis»: #f04141 del original × 0,905 (texto blanco 4,53:1) */
/* Contacto y formulario (Task 7): post-1034.css (861a4d6), post-608.css (/contactanos/), post-553.css (popup) y los
formularios de Elementor Pro. */
--mk-color-field: #ededed; /* fondo de los campos (2fd91f5, 50e819d) */
--mk-color-field-text: #373a3c; /* texto de los campos (.elementor-field-textual) */
/* El placeholder del original es el texto al 60% (≈ #828282 sobre #ededed, 3,3:1) y es la única etiqueta visible. Ajuste
mínimo para 4,5:1 sobre el campo: #6b6b6b (4,55:1). */
--mk-color-placeholder: #6b6b6b;
--mk-color-contact-title: #151515; /* titular de contacto (350bca0, texto fijo) */
--mk-color-contact-highlight: #1d1d1d; /* su parte subrayada (--dynamic-text-color) */
--mk-color-contact-lead: #757575; /* párrafo (dec3c9e), 4,61:1 */
--mk-color-contact-page-title: #282828; /* «Te asesoramos…» (5bc6ee27) */
--mk-color-contact-list: #5d5d5d; /* lista de /contactanos/ (4b24f5c .elementor-icon-list-text), 6,6:1 */
--mk-color-error: #b3261e; /* errores junto a cada campo (texto nuevo: el original los muestra en un aviso), 6,5:1 */
--mk-color-success: #2e7d32; /* «¡Gracias!…» (.elementor-message-success es #5cb85c, 2,5:1; ajuste a 5,1:1) */
--mk-color-backdrop: rgb(0 0 0 / 80%); /* fondo del popup (#elementor-popup-modal-553) */
--mk-color-popup-title: #090909; /* título del popup (5c28d227) */
--mk-color-popup-button: #171717; /* «Solicitar Demo Portalglam» (7c6d17bd); #000000 con hover */
--mk-color-popup-field-text: #2b2b2b; /* texto de sus campos */
--mk-color-popup-close: #373a3c; /* cruz del popup (.dialog-close-button svg) */
--mk-shadow-popup: -12px 12px 57px 10px rgb(16 45 94 / 17%); /* columna del formulario del popup (19ba9a1f) */
}
.mk-sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* Base (body del tema Sinatra: 15px, line-height 25,995px; Elementor usa border-box). */
.mk-body {
margin: 0;
font-family: var(--mk-font-body);
font-size: 15px;
line-height: 1.733;
color: var(--mk-color-text);
background: var(--mk-color-white);
}
.mk-body *,
.mk-body *::before,
.mk-body *::after {
box-sizing: border-box;
}
:where(.mk-body) img {
max-width: 100%;
height: auto;
}
/* Foco visible (spec §6): el dorado de contraste (≥ 4,1:1 sobre la barra, los desplegables y el pie). */
.mk-body :focus-visible {
outline: 2px solid var(--mk-color-gold-text);
outline-offset: 2px;
}
.mk-skip {
position: absolute;
top: 16px;
left: -9999px;
z-index: 10000;
padding: 8px 16px;
background: var(--mk-color-white);
color: var(--mk-color-text);
}
.mk-skip:focus {
left: 16px;
}
/* Cabecera (plantilla 73): flota sobre el principio de la página (margin-top 25px, margin-bottom -130px de 1c234f45). La barra
es la columna 330a3075 (fondo #f9f9f9, radio 30px) con el relleno de la sección interior 3cd730c2 (15px 20px 15px 15px). */
.mk-header {
position: relative;
z-index: 10;
margin: 25px 0 -130px;
padding: 0;
}
.mk-header__bar {
display: grid;
grid-template-columns: 27.978% 55.517% 16.171%;
align-items: center;
max-width: 1380px;
margin: 0 auto;
padding: 15px 20px 15px 15px;
background: var(--mk-color-bar);
border-radius: 30px;
}
.mk-header__logo {
justify-self: start;
margin-left: 20px;
}
.mk-header__toggle {
display: none;
}
.mk-header__cta {
justify-self: start;
padding: 15px 31px;
font-family: var(--mk-font-heading);
font-size: 15px;
font-weight: 600;
line-height: 15px;
color: var(--mk-color-white);
background: var(--mk-color-charcoal);
border-radius: 20px;
}
.mk-header__cta:hover,
.mk-header__cta:focus {
background: var(--mk-color-black);
}
/* Logo: ícono + palabra en la proporción de Portalsalon_222.png (356×78 a 1440): el ícono ocupa el 96,45% del alto, la palabra
el 39,8% (alto de las mayúsculas) y empieza a 0,339 del alto después del ícono. font-size = alto de la imagen original. */
.mk-logo {
display: inline-flex;
align-items: center;
height: 1em;
font-size: 78.39px;
line-height: 1;
color: var(--mk-color-dark);
}
.mk-logo__icon {
width: auto;
height: 0.9645em;
margin-left: 0.0242em;
}
.mk-logo__word {
display: block;
width: auto;
height: 0.398em;
margin-left: 0.3393em;
}
/* Menú (bf331f5): Poppins 600 15px #1e1e1e, padding 13px 20px; subrayado de 3px #101010 al pasar o abrir (e--pointer-underline
e--animation-fade). Desplegables de Elementor Pro: #f8f8f8, mínimo 130px, enlaces Poppins 500 13px/20px #151515 con 13px 20px y
borde izquierdo transparente de 8px; con :hover, #0f0f0f y blanco. */
.mk-nav {
margin-top: -10px;
}
.mk-nav__list,
.mk-nav__sub {
margin: 0;
padding: 0;
list-style: none;
}
.mk-nav__list {
display: flex;
justify-content: center;
}
.mk-nav__item {
position: relative;
display: flex;
}
.mk-nav__trigger {
position: relative;
display: flex;
align-items: center;
min-height: 58px;
padding: 13px 20px;
font-family: var(--mk-font-accent);
font-size: 15px;
font-weight: 600;
line-height: 20px;
color: var(--mk-color-nav);
text-decoration: none;
white-space: nowrap;
background: none;
border: 0;
cursor: pointer;
}
.mk-nav__caret {
flex: none;
width: 32px;
height: 32px;
margin-right: 10px;
padding: 4.8px 6.2px;
}
.mk-nav__sub {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 1;
min-width: 130px;
background: var(--mk-color-dropdown);
}
.mk-nav__item.is-open > .mk-nav__sub {
display: block;
}
.mk-nav__link {
display: block;
padding: 13px 20px;
font-family: var(--mk-font-accent);
font-size: 13px;
font-weight: 500;
line-height: 20px;
color: var(--mk-color-dropdown-text);
text-decoration: none;
white-space: nowrap;
border-left: 8px solid transparent;
}
.mk-nav__link:hover,
.mk-nav__link:focus-visible {
color: var(--mk-color-white);
background: var(--mk-color-dropdown-hover);
}
@media (min-width: 1025px) {
.mk-nav__trigger::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: var(--mk-color-dark);
opacity: 0;
transition: opacity 0.3s;
}
.mk-nav__trigger:hover,
.mk-nav__trigger:focus-visible,
.mk-nav__trigger[aria-expanded="true"] {
color: var(--mk-color-dark);
}
.mk-nav__trigger:hover::after,
.mk-nav__trigger:focus-visible::after,
.mk-nav__trigger[aria-expanded="true"]::after,
.mk-nav__item:hover > .mk-nav__trigger::after {
opacity: 1;
}
}
@media (hover: hover) and (min-width: 1025px) {
.mk-nav__item:hover > .mk-nav__sub {
display: block;
}
}
/* Tableta y teléfono (elementor-nav-menu--dropdown-tablet): botón de menú (22px, padding .25em, fondo rgba(0,0,0,.05), radio
3px) en la columna del 30% y la navegación a todo el ancho, 10px debajo del botón. El botón de la demo se oculta
(elementor-hidden-tablet/phone). */
@media (max-width: 1024px) {
.mk-header {
padding: 0 20px;
}
/* La columna del menú (64b2e815, oculta) baja a una segunda fila de 1px: la barra del original mide 1px más. */
.mk-header__bar {
grid-template-columns: 70% 30%;
padding-bottom: 16px;
}
.mk-header__logo {
margin-left: 15px;
font-size: calc(((100vw - 75px) * 0.7 - 15px) * 0.22);
}
.mk-header__toggle {
display: flex;
justify-self: center;
align-items: center;
justify-content: center;
padding: 0.25em;
font-size: 22px;
color: var(--mk-color-dropdown-text);
background: rgb(0 0 0 / 5%);
border: 0;
border-radius: 3px;
cursor: pointer;
}
.mk-header__toggle svg {
width: 1em;
height: 1em;
}
.mk-header__toggle[aria-expanded="true"] .mk-header__toggle-open,
.mk-header__toggle[aria-expanded="false"] .mk-header__toggle-close {
display: none;
}
.mk-header .mk-header__cta {
display: none;
}
.mk-nav {
position: absolute;
top: calc(50% + 26.5px);
right: 0;
left: 0;
margin: 0;
background: var(--mk-color-dropdown);
}
.mk-js .mk-nav {
display: none;
}
.mk-js .mk-nav.is-open {
display: block;
}
/* Sin JS, la navegación queda a la vista con los submenús abiertos (el botón Menú no hace nada). */
html:not(.mk-js) .mk-nav__sub {
display: block;
}
.mk-nav__list,
.mk-nav__item {
display: block;
}
.mk-nav__trigger {
width: 100%;
min-height: 0;
padding: 10px 20px;
font-size: 13px;
font-weight: 500;
color: var(--mk-color-dropdown-text);
}
.mk-nav__trigger:hover {
color: var(--mk-color-white);
background: var(--mk-color-dropdown-hover);
}
.mk-nav__sub {
position: static;
}
.mk-nav__link {
padding: 10px 20px;
}
}
@media (max-width: 767px) {
.mk-header {
padding: 0 10px;
}
.mk-header__logo {
font-size: calc(((100vw - 55px) * 0.7 - 15px) * 0.22);
}
}
.mk-button {
display: inline-block;
text-align: center;
text-decoration: none;
border: 1px solid transparent;
cursor: pointer;
}
/* Anclas del menú (docs/landing/anchors.json, ruling S9): el id va al principio de la sección que nombra el enlace. En el
original el ancla está al final de la sección anterior, así que el salto deja ver un trozo de ella: a 1440, 190px de
beneficios sobre soluciones (#pg1) y 155px de soluciones sobre el video (#pg2); a 390, 80px sobre el video. scroll-margin
repite ese lugar. A 390 #pg1 del original cae en medio de los beneficios (442px antes): la copia baja a soluciones. */
.mk-anchor {
display: block;
height: 0;
}
@media (min-width: 1025px) {
.mk-anchor--solutions {
scroll-margin-top: 190px;
}
.mk-anchor--video {
scroll-margin-top: 155px;
}
}
@media (max-width: 767px) {
.mk-anchor--video {
scroll-margin-top: 80px;
}
}
/* El contenido empieza bajo la cabecera flotante: el margen negativo del hero no colapsa con el -130px de la cabecera (en el
original se suman: hero en y=-22 a 1440). */
.mk-main {
display: flow-root;
}
/* Fondos restaurados (diferencia aceptada 8, docs/landing/README.md): post-1034.css pide el efecto del hero
(top-banner-effext), el fondo de los teléfonos (bg-vectore11) y el ícono del video (icono-portalglam-back) a
https://portalglam.cl/…, que hoy redirige a otro sitio con 404; por eso el EC2 no los muestra. Son parte del diseño: la copia
los pone con la posición, el tamaño y la repetición de post-1034.css. */
/* Hero (3d833846): #101010 con radio 0 0 150px 150px, margin-top -25px (empieza bajo la cabecera, que flota con -130px) y
padding-top 60px; el efecto de luz (top-banner-effext, sin repetir, en 0 0 a su tamaño) es la capa
.elementor-background-overlay. Contenedor de 1290px, alto mínimo 85vh, columnas de 45,525% (texto) y 54,431% (equipos, con margen
0 -20px 0 -85px). */
.mk-hero {
position: relative;
z-index: 0;
overflow: hidden;
margin-top: -25px;
padding: 60px 0 0;
background: var(--mk-color-dark);
border: 1px solid transparent;
border-radius: 0 0 150px 150px;
}
.mk-hero::before {
position: absolute;
inset: 0;
content: "";
background: url("/assets/marketing/hero/top-banner-effext-812-e246dea4.webp") no-repeat;
border-radius: inherit;
}
.mk-hero__inner {
position: relative;
display: flex;
align-items: center;
max-width: 1290px;
min-height: 85vh;
margin: 0 auto;
}
.mk-hero__text {
width: 45.525%;
padding-right: 5px;
}
/* h1 (82a0c6f): Roboto 700 36px/1.2 blanco; texto (d022746): Poppins 300 blanco. Entre bloques, los 20px de
.elementor-widget:not(:last-child) más el margen de 15px del párrafo. */
.mk-hero__title {
margin: 0;
padding: 0 23px 15px 0;
font-family: var(--mk-font-heading);
font-size: 36px;
font-weight: 700;
line-height: 1.2;
color: var(--mk-color-white);
}
.mk-hero__lead {
margin: 35px 0;
padding-right: 50px;
font-family: var(--mk-font-accent);
font-weight: 300;
color: var(--mk-color-white);
}
.mk-hero__lead strong {
font-weight: 600;
}
/* «Disponible para todos los dispositivos» (140c34ee): imagen al 70% con 20px arriba. */
.mk-hero__devices {
padding-top: 20px;
}
.mk-hero__devices-image {
display: block;
width: 70%;
}
.mk-hero__media {
width: 54.431%;
}
.mk-hero__image {
display: block;
width: calc(100% + 105px);
max-width: none;
margin: 0 -20px 0 -85px;
}
/* Beneficios (3daad68d): la columna sube 90px (margin -90px y 10px de relleno) y la tarjeta blanca 21ccb825 queda 80px sobre el
hero: radio 50px, sombra 0 0 50px 14px, relleno 30px 0 25px y 5 columnas del 20% en 1270px. Ícono SVG dorado de 70px y texto
Roboto 600 18px/22,5px #353535, 30,5px más abajo (el original lo baja 100,49px desde el ícono). */
.mk-benefits {
position: relative;
display: flow-root; /* el -80px de la tarjeta no colapsa con el margen de la sección (≤1024: -58px) */
max-width: 1380px;
margin: 0 auto;
padding: 0 10px 10px;
}
.mk-benefits__card {
margin-top: -80px;
padding: 30px 0 25px;
background: var(--mk-color-white);
border-radius: 50px;
box-shadow: var(--mk-shadow-card);
}
.mk-benefits__list {
display: flex;
flex-wrap: wrap;
max-width: 1270px;
margin: 0 auto;
padding: 0;
list-style: none;
}
/* Cada columna: 10px de relleno, 15px del widget y los 13,5px de margen inferior del título. La tercera columna del original
lleva además el ancla #pg1 (un widget con margin-bottom de 20px): esa columna es 20px más alta. */
.mk-benefits__item {
width: 20%;
padding: 10px 25px 23.5px;
text-align: center;
}
.mk-benefits__item:nth-child(3) {
padding-bottom: 43.5px;
}
.mk-benefits__icon {
display: block;
width: 70px;
height: 70px;
margin: 0 auto;
color: var(--mk-color-gold);
}
.mk-benefits__text {
margin: 30.5px 0 0;
font-family: var(--mk-font-heading);
font-size: 18px;
font-weight: 600;
line-height: 1.25;
color: var(--mk-color-card-title);
}
/* Soluciones (482f5663): margin-top 75px, padding-bottom 475px (el video sube 400px sobre él), contenedor de 1305px. Columna de
los teléfonos 49,847% (imagen al 100% hasta 37vw, 35px abajo, sobre el fondo bg-vectore11 en 1px 66px al 92%) y columna de texto 50,153% (margen 0 25px 0 20px más 10px de
relleno). */
.mk-solutions {
position: relative;
z-index: 1;
overflow: hidden;
margin-top: 75px;
padding-bottom: 475px;
}
.mk-solutions__inner {
display: flex;
flex-wrap: wrap;
max-width: 1305px;
margin: 0 auto;
}
.mk-solutions__media {
width: 49.847%;
padding: 45px 10px 10px;
background: url("/assets/marketing/solutions/bg-vectore11-573-22767923.webp") no-repeat 1px 66px / 92% auto content-box;
}
/* elementor-animation-grow con transition-duration 2s. */
.mk-solutions__phone {
display: block;
width: 100%;
max-width: 37vw;
transition: transform 2s;
}
.mk-solutions__phone:hover {
transform: scale(1.1);
}
.mk-solutions__content {
width: 50.153%;
padding: 10px 35px 10px 30px;
}
.mk-solutions__kicker {
margin: 0 0 12px;
font-family: var(--mk-font-subtitle);
font-size: 30px;
font-weight: 400;
line-height: 1;
color: var(--mk-color-kicker);
}
.mk-solutions__title {
margin: 0 0 20px;
padding: 0 20px 10px 0;
font-family: var(--mk-font-heading);
font-size: 35px;
font-weight: 600;
line-height: 1.2;
color: var(--mk-color-title);
}
/* Tarjetas (image-box): dos filas como dos secciones internas del original: 7385fdc3 con columnas de 49,802% y 50,198% (la
segunda con 5px de relleno a la izquierda) y 63560fba con columnas iguales. La grilla es de 50/50 y la primera fila se corre
con márgenes (el % del margen de un ítem de grilla se mide contra su celda: 0,396% de la mitad = 0,198% del total). 10px de
relleno más 15px del widget; la primera fila con 10px abajo. Ícono al 45% (máximo su tamaño natural), título Roboto 700
23px/28,75px #353535 y texto #6a6a6a. */
.mk-solutions__cards {
display: grid;
grid-template-columns: 50% 50%;
}
.mk-solutions__card {
padding: 10px 25px;
}
.mk-solutions__card:nth-child(-n + 2) {
margin-bottom: 10px;
}
.mk-solutions__card:nth-child(1) {
margin-right: 0.396%;
}
.mk-solutions__card:nth-child(2) {
margin-left: calc(5px - 0.396%);
}
.mk-solutions__icon {
display: block;
width: 45%;
max-width: 129px;
}
.mk-solutions__card-title {
margin: 28.75px 0 17.25px;
font-family: var(--mk-font-heading);
font-size: 23px;
font-weight: 700;
line-height: 1.25;
color: var(--mk-color-card-title);
}
.mk-solutions__card-text {
margin: 0;
color: var(--mk-color-card-text);
}
/* Video (1aad3cf2): #f6f6f6, sube 400px sobre soluciones (margin-top -400px), padding-bottom 60px; curva blanca de Elementor
arriba (shape divider «curve», 100px) y el ícono de PortalGlam al 60% de opacidad a la izquierda (center left, contain).
Contenedor de 1335px; el video (16:9) con 75px a los lados y 20px abajo; botón de 215px blanco al 80%. Los puntos (dots2-1)
son un widget absoluto a -449px del principio de la columna. */
/* overflow-x: clip: los puntos decorativos asoman 2px por la derecha entre 768 y 1024 (en el original también: 1028 a 1024);
clip, no hidden, para no cortar lo que sube sobre la sección anterior. */
.mk-video {
position: relative;
z-index: 1;
margin-top: -400px;
padding: 0 0 60px;
overflow-x: clip;
background: var(--mk-color-light);
}
.mk-video::before {
position: absolute;
inset: 0;
content: "";
background: url("/assets/marketing/video/icono-portalglam-back-1440-b62a4521.webp") no-repeat center left / contain;
opacity: 0.6;
}
.mk-video__shape {
position: absolute;
top: -1px;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}
.mk-video__shape svg {
position: relative;
left: 50%;
display: block;
width: calc(100% + 1.3px);
height: 100px;
transform: translateX(-50%);
fill: var(--mk-color-white);
}
.mk-video__inner {
position: relative;
max-width: 1335px;
margin: 0 auto;
padding: 10px;
}
.mk-video__frame {
margin-bottom: 20px;
padding: 0 75px;
}
.mk-video__player {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 9;
}
.mk-video__play {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
padding: 0;
background: none;
border: 0;
cursor: pointer;
}
.mk-video__poster {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.mk-video__icon {
position: absolute;
top: 50%;
left: 50%;
width: 215px;
height: 215px;
color: var(--mk-color-white);
opacity: 0.8;
transform: translate(-50%, -50%);
}
/* Foco (spec §6): el reproductor recorta lo que sale del botón (overflow hidden), así que el anillo va por dentro: una banda
#101010 de 3px en el borde y el blanco de 3px pegado a ella (contraste 18,9:1 entre las dos, sobre cualquier parte de la
portada). */
.mk-video__play:focus-visible {
outline: 3px solid var(--mk-color-white);
outline-offset: -6px;
}
.mk-video__play:focus-visible::after {
position: absolute;
inset: 0;
content: "";
border: 3px solid var(--mk-color-dark);
}
.mk-video__play:hover .mk-video__icon,
.mk-video__play:focus-visible .mk-video__icon {
opacity: 1;
}
.mk-video__iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.mk-video__dots {
position: absolute;
top: -449px;
right: -1.594px;
width: 51px;
}
@media (prefers-reduced-motion: reduce) {
.mk-solutions__phone {
transition: none;
}
.mk-solutions__phone:hover {
transform: none;
}
}
/* Tableta (≤1024): hero sin relleno y con radio 30px; beneficios suben 58px; soluciones en una columna centrada. */
@media (max-width: 1024px) {
.mk-hero {
padding: 0;
border-radius: 0 0 30px 30px;
}
.mk-hero__text {
padding-right: 0;
margin-left: 20px;
}
.mk-hero__title {
padding: 0;
}
.mk-hero__lead {
margin-top: 27px;
}
.mk-hero__devices-image {
max-width: 95%;
}
.mk-hero__image {
width: 100%;
max-width: 67%;
margin: 0 auto;
}
.mk-benefits {
margin-top: -58px;
padding: 0 30px 10px;
}
.mk-benefits__card {
padding: 25px 0;
}
.mk-solutions {
padding-bottom: 460px;
}
.mk-solutions__media,
.mk-solutions__content {
width: 100%;
}
.mk-solutions__media {
background-position: 106px 62px;
background-size: 450px auto;
}
.mk-solutions__phone {
margin: 0 auto;
max-width: 52vw;
height: 457px;
}
.mk-solutions__content {
padding: 50px 20px 0;
}
.mk-solutions__kicker,
.mk-solutions__title {
text-align: center;
}
.mk-video__frame {
padding: 0 0 20px;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.mk-hero__text {
width: 53%;
}
.mk-hero__media {
width: 47%;
}
}
/* Teléfono (≤767): el hero empieza en y=0 bajo la cabecera (medido en el original) con relleno 0 20px 50px, alto mínimo 672px,
texto centrado y sin la imagen de los equipos; todo en una columna. */
@media (max-width: 767px) {
.mk-hero {
margin-top: 25.7px; /* 130 - 25 - 79,3 de la cabecera */
padding: 0 20px 50px;
}
.mk-hero__inner {
min-height: 672px;
}
.mk-hero__text {
width: 100%;
margin-left: 0;
text-align: center;
}
.mk-hero__title {
padding-top: 50px;
font-size: 27px;
}
.mk-hero__lead {
margin-top: 35px;
padding: 0 15px;
}
.mk-hero__devices {
padding: 0 0 30px;
}
.mk-hero__devices-image {
width: 100%;
max-width: 100%;
}
.mk-hero__media {
display: none;
}
.mk-benefits__item {
width: 100%;
}
.mk-solutions {
margin-top: -31px;
padding-bottom: 10px;
}
.mk-solutions__media {
background-image: url("/assets/marketing/solutions/bg-vectore11-390-0c8d8ac1.webp");
background-position: 12px 74px;
background-size: 313px auto;
}
.mk-video::before {
background-image: url("/assets/marketing/video/icono-portalglam-back-768-904a9b36.webp");
}
.mk-solutions__phone {
max-width: 100%;
height: 59vh;
object-fit: contain;
}
.mk-solutions__content {
padding: 20px 0 0;
}
.mk-solutions__title {
padding: 0 30px;
}
.mk-solutions__cards {
grid-template-columns: 100%;
}
/* Cada columna con 30px abajo; entre la primera y la segunda fila, 10px de relleno y -30px de margen (63560fba). */
.mk-solutions__card,
.mk-solutions__card:nth-child(-n + 2) {
margin: 0 0 30px;
text-align: center;
}
.mk-solutions__card:nth-child(2) {
margin: 0 0 10px;
}
.mk-solutions__card:last-child {
margin-bottom: 0;
}
.mk-solutions__icon {
margin: 0 auto;
}
.mk-video {
margin-top: 0;
padding: 10px 0 0;
}
.mk-video__frame {
padding: 15px;
}
.mk-video__icon {
width: 88px;
height: 88px;
}
.mk-video__dots {
top: -407px;
right: 10.391px;
}
}
/* Precios (37ce41b3): padding 90px 0 70px, contenedor de 1514px con 10px de relleno, overflow hidden. Fondo overly-bg (sin
repetir, en 68vw -296px al 38%) bajo una capa blanca al 70% (.elementor-background-overlay); también lo pedía a
portalglam.cl (diferencia aceptada 8). Entre widgets, los 20px de Elementor. */
.mk-pricing {
position: relative;
overflow: hidden;
padding: 90px 0 70px;
background: url("/assets/marketing/pricing/overly-bg-696-12754cc1.webp") no-repeat 68vw -296px / 38% auto;
}
.mk-pricing::before {
position: absolute;
inset: 0;
content: "";
background: var(--mk-color-white);
opacity: 0.7;
}
.mk-pricing__inner {
position: relative;
max-width: 1514px;
margin: 0 auto;
padding: 10px;
}
/* Título (1f9e51f): Roboto 400 45px/1.3 #151515 con 200px a los lados; la línea dorada (8b6db85) solo en el teléfono. */
.mk-pricing__title {
margin: 0 0 20px;
padding: 0 200px;
font-family: var(--mk-font-heading);
font-size: 45px;
font-weight: 400;
line-height: 1.3;
color: var(--mk-color-title);
text-align: center;
}
.mk-pricing__divider {
display: none;
}
/* Subtítulo (577f9fb): Roboto Slab 15px/1em #4f4d45; 20px de relleno, el espaciador de 10px (b768146) y sus márgenes. */
.mk-pricing__lead {
margin: 0 0 70px;
font-family: var(--mk-font-subtitle);
font-size: 15px;
line-height: 1;
color: var(--mk-color-kicker);
text-align: center;
}
/* Cuatro columnas del 25% (5c34234c) con la tarjeta a 15px de cada lado: 325px a 1440. */
.mk-pricing__cards {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 30px;
margin: 0 15px;
}
/* Tarjeta (70611c10 y hermanas): blanca, radio 8px, sombra 0 0 24px 10px, relleno 25px; todas del alto de la más larga. */
.mk-plan {
padding: 25px;
text-align: center;
background: var(--mk-color-white);
border-radius: 8px;
box-shadow: 0 0 24px 10px rgba(0, 0, 0, 0.07);
}
/* Ícono (704e7f0d): 123px con relleno 35px 0 20px. */
.mk-plan__icon {
display: block;
margin: 35px auto 40px;
}
/* Nombre (6f4c53c1) y precio (69bcb87a, con 10px abajo): Roboto 600 a 26px y 30px, line-height 1em, #151515. */
.mk-plan__name,
.mk-plan__price {
margin: 0 0 20px;
font-family: var(--mk-font-heading);
font-size: 26px;
font-weight: 600;
line-height: 1;
color: var(--mk-color-title);
}
/* Los 15px de arriba de la línea van en el margen del precio (si no, colapsan con él). */
.mk-plan__price {
margin-bottom: 45px;
font-size: 30px;
}
/* Línea (69d03dd): 30% del ancho, 3,5px dorada, 15px arriba y abajo. Decorativa: el dorado del original. */
.mk-plan__divider,
.mk-pricing__divider {
width: 30%;
margin: 0 auto 35px;
border-top: 3.5px solid var(--mk-color-gold);
}
.mk-plan__divider {
display: block;
}
/* Lista (a2a3263): texto del cuerpo, 10px entre ítems (18px en ≤1024), 25px de relleno abajo. #7a7a7a pasa a #767676 (AA). */
.mk-plan__features {
margin: 0 0 45px;
padding: 0;
color: var(--mk-color-muted-text);
list-style: none;
}
.mk-plan__features li {
display: flex;
align-items: center;
justify-content: center;
}
.mk-plan__features li:not(:last-child) {
padding-bottom: 5px;
}
.mk-plan__features li:not(:first-child) {
margin-top: 5px;
}
/* «Contratar Plan» (26a424e): Poppins 500 15px/1em, relleno 18px 28px, radio 50px; el dorado de contraste (blanco 4,52:1);
#252525 con hover/focus; elementor-animation-grow (scale 1,1 en 0,3s). Después, el espaciador de 20px (447684e). */
.mk-plan__cta {
display: block;
width: fit-content;
margin: 0 auto 40px;
padding: 18px 28px;
font-family: var(--mk-font-accent);
font-size: 15px;
font-weight: 500;
line-height: 1;
color: var(--mk-color-white);
background: var(--mk-color-gold-text);
border: 0;
border-radius: 50px;
transition: background-color 0.3s, transform 0.3s;
}
.mk-plan__cta:hover,
.mk-plan__cta:focus-visible {
background: var(--mk-color-button-hover);
transform: scale(1.1);
}
/* Testimonios (1369b9dd): degradé de #fff a #f4f4f4, padding 20px 0 50px, contenedor de 1335px (alto mínimo 390px, centrado en
vertical) con 10px de relleno. */
.mk-testimonials {
position: relative;
padding: 20px 0 50px;
background-image: linear-gradient(180deg, var(--mk-color-white) 0%, var(--mk-color-testimonials-end) 100%);
}
.mk-testimonials__inner {
display: flex;
flex-direction: column;
justify-content: center;
max-width: var(--mk-container);
min-height: 390px;
margin: 0 auto;
padding: 10px;
}
/* Título (b986c57): Roboto 600 45px/1em #151515; subtítulo (939f25a): Roboto Slab 16px/1em #4f4d45 con 25px abajo. */
.mk-testimonials__title {
margin: 0 0 20px;
font-family: var(--mk-font-heading);
font-size: 45px;
font-weight: 600;
line-height: 1;
color: var(--mk-color-title);
text-align: center;
}
.mk-testimonials__lead {
margin: 0 0 45px;
font-family: var(--mk-font-subtitle);
font-size: 16px;
line-height: 1;
color: var(--mk-color-kicker);
text-align: center;
}
/* Dos columnas del 50% (f5f8a3b) con la tarjeta a 16px de cada lado. */
.mk-testimonials__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
padding: 16px;
}
/* Tarjeta (5f3910d, 0c81ae1): blanca, radio 4px, sombra 0 0 30px 6px (0 4px 8px con hover), relleno 45px 45px 50px. La
primera mide 20px más porque el original le suma el ancla #pg6 (margin -40px): las dos quedan de ese alto. */
.mk-testimonial {
margin: 0;
padding: 45px 45px 50px;
background: var(--mk-color-white);
border-radius: 4px;
box-shadow: 0 0 30px 6px rgba(0, 0, 0, 0.07);
transition: box-shadow 0.3s;
}
.mk-testimonial:first-child {
padding-bottom: 70px;
}
.mk-testimonial:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.07);
}
/* Cabecera (234775f): columnas de 14,035% (foto de 64px, redonda y centrada), 52,412% (16px a la izquierda; nombre y lugar
con 8px entre ellos) y 33,543% (estrellas a la derecha), centradas en vertical, con 40px abajo. */
.mk-testimonial__header {
display: flex;
align-items: center;
padding-bottom: 40px;
}
.mk-testimonial__photo {
flex: 0 0 auto;
width: 64px;
margin: 0 calc(7.0175% - 32px);
border-radius: 50%;
}
.mk-testimonial__who {
display: flex;
flex: 0 0 52.412%;
flex-direction: column;
gap: 8px;
padding-left: 16px;
}
/* Nombre (e87c6c6): un span Roboto 600 1,6rem/1em #333 dentro de la línea del cuerpo (15px/25,995px): 29px de alto. */
.mk-testimonial__name {
display: block;
}
.mk-testimonial__name span {
font-family: var(--mk-font-heading);
font-size: 25.6px;
font-weight: 600;
line-height: 1;
color: var(--mk-color-testimonial-name);
}
/* Lugar (c79b8f5): Roboto 16px/1em; #999 pasa a #767676 (AA). */
.mk-testimonial__place {
display: block;
font-family: var(--mk-font-heading);
font-size: 16px;
line-height: 1;
color: var(--mk-color-muted-text);
}
/* Estrellas (a92adcc): fa-star de 16px (18×16) con letter-spacing 4,1px, rgba(218,165,32,0,96), a la derecha. Decorativas: el
texto de la valoración va en el aria-label. */
.mk-testimonial__stars {
display: flex;
flex: 0 0 33.543%;
justify-content: flex-end;
height: 17px;
color: var(--mk-color-star);
}
.mk-testimonial__stars svg {
width: 18px;
height: 16px;
margin-right: 4.1px;
}
/* Texto (9ebd8e7): Roboto 16px; #777 pasa a #767676 (AA). Los
del original son una línea en blanco. El original usa
line-height 1,617 (25,872px) en un solo h2 con
; la copia separa párrafos y cada uno redondea su alto hacia abajo, así
que 1,6172 (25,875px, la línea que mide Chrome en el original) iguala el alto total. */
.mk-testimonial__quote {
margin: 0;
font-family: var(--mk-font-heading);
font-size: 16px;
line-height: 1.6172;
color: var(--mk-color-muted-text);
}
.mk-testimonial__quote p {
margin: 0;
}
.mk-testimonial__quote p + p {
margin-top: 1.617em;
}
/* Anclas: a 1440 el salto deja ver 250px (#pg3) y 90px (#pg4) antes de los precios y 130px antes de los testimonios; a 390,
190, 140 y 90px. Van en el borde de arriba de la sección, no después de su relleno (también #pg2: a 390 el video tiene
10px de relleno arriba). */
.mk-video > .mk-anchor,
.mk-pricing > .mk-anchor,
.mk-testimonials > .mk-anchor {
position: absolute;
top: 0;
}
@media (min-width: 1025px) {
.mk-anchor--pricing-3 {
scroll-margin-top: 250px;
}
.mk-anchor--pricing {
scroll-margin-top: 90px;
}
.mk-anchor--testimonials {
scroll-margin-top: 130px;
}
}
/* Tableta (≤1024): precios con relleno 70px 0, fondo en 0 0, tarjetas a 20px de cada lado, ícono al 40% con 13px abajo y 18px
entre ítems; testimonios con relleno 50px 0 40px. */
@media (max-width: 1024px) {
.mk-pricing {
padding: 70px 0;
background-position: 0 0;
}
.mk-pricing__cards {
gap: 40px;
margin: 0 20px;
}
.mk-plan__icon {
max-width: 40%;
margin: 0 auto 33px;
}
.mk-plan__features li:not(:last-child) {
padding-bottom: 9px;
}
.mk-plan__features li:not(:first-child) {
margin-top: 9px;
}
.mk-testimonials {
padding: 50px 0 40px;
}
}
/* Teléfono (≤767): precios con relleno 35px 10px 25px y 15px en la columna; título a 30px sin relleno lateral, con la línea
dorada debajo; subtítulo con line-height 1,9em; tarjetas en una columna, juntas las dos primeras y 50px antes de la tercera y la
cuarta (como el original); ícono sin relleno. Testimonios: relleno 50px 10px 0, título a 30px con 30px a los lados,
cabecera en una columna centrada; la primera tarjeta con relleno 20px (40px abajo con el ancla), la segunda conserva 45px. */
@media (max-width: 767px) {
.mk-pricing {
padding: 35px 10px 25px;
}
.mk-pricing__inner {
padding: 15px;
}
.mk-pricing__title {
margin-bottom: 35px;
padding: 0;
font-size: 30px;
}
.mk-pricing__divider {
display: block;
}
.mk-pricing__lead {
line-height: 1.9;
}
.mk-pricing__cards {
grid-template-columns: minmax(0, 1fr);
gap: 0;
margin: 0;
}
.mk-plan:nth-child(n + 3) {
margin-top: 50px;
}
.mk-plan__icon {
margin-bottom: 20px;
}
.mk-anchor--pricing-3 {
scroll-margin-top: 190px;
}
.mk-anchor--pricing {
scroll-margin-top: 140px;
}
.mk-anchor--testimonials {
scroll-margin-top: 90px;
}
.mk-testimonials {
padding: 50px 10px 0;
}
.mk-testimonials__title {
margin: 0 30px 20px;
font-size: 30px;
}
.mk-testimonials__lead {
margin-bottom: 20px;
}
.mk-testimonials__list {
grid-template-columns: minmax(0, 1fr);
}
.mk-testimonial:first-child {
padding: 20px 20px 40px;
}
.mk-testimonial__header {
flex-direction: column;
text-align: center;
}
.mk-testimonial__photo {
margin: 0 auto 8px;
}
.mk-testimonial__who {
flex-basis: auto;
align-self: stretch;
padding: 0 0 8px;
}
.mk-testimonial__stars {
flex-basis: auto;
justify-content: center;
}
.mk-testimonial__quote {
text-align: center;
}
}
@media (prefers-reduced-motion: reduce) {
.mk-plan__cta,
.mk-testimonial {
transition: none;
}
.mk-plan__cta:hover,
.mk-plan__cta:focus-visible {
transform: none;
}
}
/* Blog (7a6049dc): padding 50px 0 70px, contenedor de 1400px con 10px de relleno. Fondo Bg8 restaurado (diferencia 8: el
original lo pide a portalglam.cl, que hoy da 404). */
.mk-blog {
position: relative;
padding: 50px 0 70px;
background: url("/assets/marketing/blog/bg8-1440-d161335a.webp") no-repeat center / cover;
}
.mk-blog__inner {
max-width: 1400px;
margin: 0 auto;
padding: 10px;
}
/* Barra (5e799d17): dorado con relleno 15px 0 15px 39px; título (2728c4cc) en una columna del 20,283% con 10px de relleno,
Jost 600 25px/1 en mayúsculas con 1,6px de espaciado; línea blanca de 2px (3ef6d8db) en el 96% de la otra columna (79,717%).
El blanco sobre el dorado da 2,19:1: la barra usa el dorado de contraste (4,52:1, AA). */
.mk-blog__bar {
display: flex;
align-items: center;
padding: 15px 0 15px 39px;
background: var(--mk-color-gold-text);
}
.mk-blog__title {
flex: 0 0 20.283%;
margin: 0;
padding: 10px;
font-family: var(--mk-font-title);
font-size: 25px;
font-weight: 600;
line-height: 1;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--mk-color-white);
}
.mk-blog__divider {
flex: 0 0 calc(79.717% * 0.96);
border-top: 2px solid var(--mk-color-white);
}
/* Tarjetas (57bdbf11, skin «cards»): 3 columnas con 40px entre ellas y 25px arriba; cada una del alto de su contenido
(masonry). */
.mk-blog__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 40px;
align-items: start;
margin-top: 25px;
}
/* Tarjeta: blanca, radio 3px, sombra 0 0 10px (30px con hover), centrada. */
.mk-post-card {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
text-align: center;
background: var(--mk-color-white);
border-radius: 3px;
box-shadow: 0 0 10px 0 rgb(0 0 0 / 15%);
transition: box-shadow 0.25s;
}
.mk-post-card:hover {
box-shadow: 0 0 30px 0 rgb(0 0 0 / 15%);
}
/* Portada con el degradé de «hover-gradient» (más suave con hover) y 25px abajo (con avatar). */
.mk-post-card a,
.mk-pagination a {
color: inherit;
text-decoration: none;
}
.mk-post-card__thumb {
position: relative;
display: block;
margin-bottom: 25px;
}
.mk-post-card__thumb img {
display: block;
width: calc(100% + 1px);
max-width: none;
}
.mk-post-card__thumb::after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
background-image: linear-gradient(0deg, rgb(0 0 0 / 35%), transparent 75%);
transition: opacity 0.3s ease-out;
}
.mk-post-card:hover .mk-post-card__thumb::after {
opacity: 0.5;
}
/* Categoría: píldora arriba a la derecha, 12px en mayúsculas. #818a91 con texto blanco da 3,51:1: el mismo tono × 0,865
(#70777d, 4,54:1, AA). */
.mk-post-card__badge {
position: absolute;
top: 0;
right: 0;
margin: 20px;
padding: 0.6em 1.2em;
font-size: 12px;
font-weight: 400;
line-height: 1;
text-transform: uppercase;
color: var(--mk-color-white);
background: var(--mk-color-badge);
border-radius: 999px;
}
/* Avatar de 60px, redondo, centrado sobre el borde inferior de la portada. */
.mk-post-card__avatar {
position: relative;
top: -25px;
width: 100%;
height: 0;
padding: 0 30px;
pointer-events: none;
}
.mk-post-card__avatar img {
width: 60px;
border-radius: 50%;
transform: translateY(-50%);
}
.mk-post-card__text {
flex-grow: 1;
margin: 30px 0 15px;
padding: 0 30px;
}
/* Título: Khand 600 20px/1,25 #414141 con 30px abajo. */
.mk-post-card__title {
margin: 0 0 30px;
font-family: "Khand", sans-serif;
font-size: 20px;
font-weight: 600;
line-height: 1.25;
color: var(--mk-color-post-title);
}
/* Extracto: 14px/1,5em; #777 pasa a #767676 (AA). */
.mk-post-card__excerpt {
margin: 0 0 14px;
font-size: 14px;
line-height: 1.5;
color: var(--mk-color-muted-text);
}
.mk-post-card__more {
display: inline-block;
margin-bottom: 15px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
}
/* Fecha y «No Comments»: 12px/1,3em con un punto entre ellos y un filete de #eaeaea arriba; #adadad (2,24:1) pasa a
#767676 (AA). */
.mk-post-card__meta {
margin: 0;
padding: 15px 30px;
font-size: 12px;
line-height: 1.3;
color: var(--mk-color-muted-text);
border-top: 1px solid var(--mk-color-post-rule);
}
.mk-post-card__meta span + span::before {
margin: 0 5px;
content: "•";
}
/* Paginación (Elementor «numbers»): centrada, 10px entre números. */
.mk-pagination {
padding-bottom: 20px;
text-align: center;
}
.mk-pagination__item:not(:first-child) {
margin-left: 5px;
}
.mk-pagination__item:not(:last-child) {
margin-right: 5px;
}
/* /blog: la sección empieza bajo la cabecera flotante. */
.mk-blog-page {
padding-top: 108px;
}
/* #pg6 («Blogs»): a 1440 el salto deja ver 166px de los testimonios; a 390, 90px (el original cae 868px antes). */
.mk-blog > .mk-anchor {
position: absolute;
top: 0;
}
@media (min-width: 1025px) {
.mk-anchor--blog {
scroll-margin-top: 166px;
}
}
/* Tableta (≤1024): relleno 60px 10px; 2 columnas. */
@media (max-width: 1024px) {
.mk-blog {
padding: 60px 10px;
}
.mk-blog__title {
flex-basis: 44%;
padding: 0 10px;
}
.mk-blog__divider {
flex-basis: calc(28% * 0.96);
}
.mk-blog__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Teléfono (≤767): relleno 10px 15px 20px, la barra con 15px arriba y abajo y el título centrado a 18px (sin la línea:
elementor-hidden-phone); una columna. */
@media (max-width: 767px) {
.mk-blog {
padding: 10px 15px 20px;
background-image: url("/assets/marketing/blog/bg8-768-fb11d96c.webp");
}
.mk-blog__bar {
padding: 15px 0;
}
.mk-blog__title {
flex-basis: 100%;
padding: 0;
font-size: 18px;
text-align: center;
}
.mk-blog__divider {
display: none;
}
.mk-blog__grid {
grid-template-columns: minmax(0, 1fr);
}
.mk-blog-page {
padding-top: 79px;
}
.mk-anchor--blog {
scroll-margin-top: 90px;
}
}
/* Artículo (tema Sinatra, #primary): contenedor de 1100px con 50px arriba y 70px abajo; cabecera, cuerpo y navegación en
700px (narrow-content), la portada a todo el ancho y la caja del autor en 770px. */
.mk-article {
max-width: 1100px;
margin: 104px auto 70px;
}
.mk-article__header,
.mk-article__body,
.mk-article__nav {
max-width: 700px;
margin-right: auto;
margin-left: auto;
}
/* Categorías: borde de 2px en el azul del tema (#3857f1, 5,5:1), 14px 500, relleno 6px 8px. */
.mk-article__categories {
display: flex;
flex-wrap: wrap;
margin: 0 0 3px;
}
.mk-article__category {
display: inline-flex;
margin: 0 4px 8px 0;
padding: 6px 8px;
font-size: 14px;
font-weight: 500;
line-height: 1;
color: var(--mk-color-link);
border: 2px solid var(--mk-color-link);
border-radius: 2px;
}
.mk-article__title {
margin: 0;
font-size: 38px;
font-weight: 600;
line-height: 1.1;
color: var(--mk-color-heading);
}
/* «By Portaglam | September 10, 2021»: 14px, el color del texto al 73% y un filete de 1px entre los dos. */
.mk-article__meta {
display: flex;
align-items: center;
margin: 14px 0 0;
font-size: 14px;
line-height: 1.733;
color: var(--mk-color-meta);
}
.mk-article__meta > * + * {
position: relative;
margin-left: 11px;
padding-left: 12px;
}
.mk-article__meta > * + *::before {
position: absolute;
top: calc(50% - 0.5em);
left: 0;
width: 1px;
height: 1em;
content: "";
background: rgb(0 0 0 / 25%);
}
.mk-article__cover {
display: block;
width: 100%;
margin: 40px 0;
border-radius: 3px;
}
/* Cuerpo: 16px/1,733, párrafos con 1,25em arriba y abajo, subtítulos 500 #23282d con 1,25em/0,75em. Se justifican los
bloques que el original justifica (style en línea → «{.justificado}» en el Markdown → .mk-justificado). Los enlaces van subrayados: el azul del tema contra el texto da menos de 3:1 (AA). */
.mk-article__body {
font-size: 16px;
line-height: 1.733;
}
.mk-article__body > :first-child {
margin-top: 0;
}
.mk-article__body > :last-child {
margin-bottom: 0;
}
.mk-article__body p {
margin: 1.25em 0;
}
.mk-article__body .mk-justificado {
text-align: justify;
}
.mk-article__body h2,
.mk-article__body h3,
.mk-article__body h4 {
margin: 1.25em 0 0.75em;
font-weight: 500;
line-height: 1.25;
color: var(--mk-color-heading);
}
.mk-article__body h2 {
font-size: 30px;
}
.mk-article__body h3 {
font-size: 26px;
}
.mk-article__body h4 {
font-size: 20px;
line-height: 1.5;
}
.mk-article__body ul,
.mk-article__body ol {
margin: 1.5em 0 1.5em 2.5em;
padding: 0;
}
.mk-article__body li {
margin-bottom: 0.4em;
}
.mk-article__body li:last-child {
margin-bottom: 0;
}
.mk-article__body strong {
font-weight: 600;
}
.mk-article__body a {
color: var(--mk-color-link);
text-decoration: underline;
}
.mk-article__body a:hover {
color: var(--mk-color-heading);
}
.mk-article__body img {
display: inline-block;
vertical-align: text-bottom;
}
/* «Solicita tu Demo Gratis» (mb-button del original, fondo #f04141 en línea): el mismo rojo × 0,905 (#d93b3b) con texto
blanco llega a 4,5:1 (AA). Se reconoce por el destino porque el Markdown no lleva clases. */
.mk-article__body a[href^="https://api.whatsapp.com/"] {
display: inline-block;
padding: 0 4px;
color: var(--mk-color-white);
text-decoration: none;
background: var(--mk-color-demo);
}
/* Autor (author-box): borde de 1px rgba(0,0,0,.086), radio 3px, relleno 40px, 50px arriba y 30px abajo; avatar de 75px a 25px
del texto; nombre 20px 500/30px y «View All Posts» 15px 500 con la línea de btn-text-1. */
.mk-article__author {
display: flex;
align-items: flex-start;
max-width: 770px;
margin: 50px auto 30px;
padding: 40px;
border: 1px solid rgb(0 0 0 / 8.6%);
border-radius: 3px;
}
.mk-article__avatar {
flex-shrink: 0;
width: 75px;
margin-right: 25px;
border-radius: 50%;
}
.mk-article__author-name {
margin: 0 0 16.5px;
font-size: 20px;
font-weight: 500;
line-height: 30px;
color: var(--mk-color-heading);
}
.mk-article__all {
display: inline-block;
text-decoration: none;
font-size: 15px;
font-weight: 500;
line-height: 21px;
color: var(--mk-color-heading);
}
.mk-article__all span {
position: relative;
display: inline-block;
padding: 3px 0;
}
.mk-article__all span::after {
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 2px;
content: "";
background: currentcolor;
border-radius: 6px;
opacity: 0.2;
}
.mk-article__all:hover span::after {
opacity: 1;
}
/* Navegación: dos mitades; título h6 11px 500 en mayúsculas con 2px de espaciado y 16px abajo; enlace 15px 500/1,5 con la
miniatura de 75px (radio 2px) a 20px. */
.mk-article__nav {
display: flex;
align-items: flex-start;
}
.mk-article__nav-item {
flex: 0 0 50%;
}
.mk-article__nav-item--next {
margin-left: auto;
text-align: right;
}
.mk-article__nav-title {
margin: 0 0 16px;
font-size: 11px;
font-weight: 500;
line-height: 1.72;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--mk-color-heading);
}
.mk-article__nav-link {
display: flex;
color: inherit;
text-decoration: none;
align-items: center;
font-weight: 500;
line-height: 1.5;
}
.mk-article__nav-item--next .mk-article__nav-link {
justify-content: flex-end;
}
.mk-article__nav-item--prev span {
padding-right: 20px;
}
.mk-article__nav-item--next span {
padding-left: 20px;
}
.mk-article__nav-image {
flex-shrink: 0;
width: 75px;
height: 75px;
object-fit: cover;
border-radius: 2px;
}
.mk-article__nav-item--prev .mk-article__nav-image {
margin-right: 20px;
}
.mk-article__nav-item--next .mk-article__nav-image {
margin-left: 20px;
}
/* ≤960 sin miniaturas en la navegación; ≤768 contenedor con 30px a los lados, 40px arriba y la portada a todo el ancho;
≤599 caja del autor con 25px de relleno y sin avatar. */
@media (max-width: 960px) {
.mk-article__nav-image {
display: none;
}
}
@media (max-width: 768px) {
.mk-article {
margin: 116.5px 30px 70px;
}
.mk-article__cover {
width: calc(100% + 60px);
max-width: none;
margin: 40px -30px;
border-radius: 0;
}
}
@media (max-width: 599px) {
.mk-article__author {
padding: 25px;
}
.mk-article__avatar {
display: none;
}
.mk-article__author-name {
margin-bottom: 15px;
}
}
/* Pie (plantilla 256): fondo #131313, padding 70px 0 80px, contenedor de 1300px (alto mínimo 290px, columnas centradas en
vertical) con columnas de 30,857 / 21,681 / 25,18 / 22,282% y 10px de relleno; la marca deja 50px a la derecha. */
.mk-footer__main {
padding: 70px 0 80px;
background: var(--mk-color-charcoal);
}
.mk-footer__columns {
display: flex;
align-items: center;
max-width: 1300px;
min-height: 290px;
margin: 0 auto;
}
.mk-footer__brand {
flex: 0 0 30.857%;
padding: 10px 60px 10px 10px;
}
.mk-footer__logo {
display: block;
height: 35px;
margin: -27px 0 0 -10px;
font-size: 35px;
color: var(--mk-color-white);
}
/* Portalsalon_2-02.png a 290×35: la palabra ocupa el 95% del alto. */
.mk-footer__word {
display: block;
width: auto;
height: 0.95em;
margin-top: 0.019em;
}
.mk-footer__brand p {
margin: 23px 0 13px;
font-family: var(--mk-font-accent);
font-size: 13px;
line-height: 22.529px;
color: var(--mk-color-footer-text);
}
.mk-footer__column {
padding: 10px;
}
.mk-footer__column--portalglam {
flex: 0 0 21.681%;
}
.mk-footer__column--independientes {
flex: 0 0 25.18%;
}
.mk-footer__column--contacto {
flex: 0 0 22.282%;
margin-top: -30px;
}
.mk-footer__title {
margin: 0;
padding-bottom: 14px;
font-family: var(--mk-font-title);
font-size: 30px;
font-weight: 500;
line-height: 1;
color: var(--mk-color-white);
}
.mk-footer__column--contacto .mk-footer__title {
margin-top: 20px;
}
/* Listas con ícono (elementor-icon-list): ícono blanco de 15px con 3,75px a la derecha, texto Poppins 13px #e7e7e7 con 20px a
la izquierda, 8px entre ítems. */
.mk-footer__list {
margin: 20px 0 0;
padding: 0;
list-style: none;
font-family: var(--mk-font-accent);
font-size: 13px;
line-height: 22.529px;
color: var(--mk-color-footer-text);
}
.mk-footer__list li {
display: flex;
align-items: center;
}
.mk-footer__list li:not(:last-child) {
padding-bottom: 4px;
}
.mk-footer__list li:not(:first-child) {
margin-top: 4px;
}
.mk-footer__list a {
display: flex;
align-items: center;
color: inherit;
text-decoration: none;
}
.mk-footer__list svg {
flex: none;
width: 15px;
height: 15px;
margin-right: 3.75px;
color: var(--mk-color-white);
}
.mk-footer__list span {
padding-left: 20px;
}
.mk-footer__list span a {
display: inline;
}
/* Barra inferior (2742ba8a): #fbfbfb, alto mínimo 50px, columnas de 40,179% (texto Poppins 500 11px/34px #171717), 3,539% (vacía)
y 55,615% (logos). */
.mk-footer__bottom {
background: var(--mk-color-footer-bottom);
}
.mk-footer__bottom-inner {
display: flex;
align-items: center;
max-width: 1300px;
min-height: 50px;
margin: 0 auto;
}
.mk-footer__bottom p {
flex: 0 0 40.179%;
margin: 0;
padding: 10px;
font-family: var(--mk-font-accent);
font-size: 11px;
font-weight: 500;
line-height: 34px;
color: var(--mk-color-footer-bottom-text);
}
.mk-footer__legal {
display: none;
}
.mk-footer__logos {
display: block;
flex: 0 0 auto;
width: calc(55.615% - 20px);
margin: 10px 10px 10px calc(3.539% + 10px);
}
@media (max-width: 1024px) {
.mk-footer__main {
padding: 50px 20px;
}
/* El 15% del original es de la columna (30%), no del pie: 4,5% del pie. Con el 15% del pie y el logo de 290px sin achicar,
la marca crecía a 441px y el pie se desbordaba 125px a 1024. */
.mk-footer__brand {
flex-basis: 30%;
padding-right: calc(4.5% + 10px);
}
/* El logo del original tiene max-width 85% (205×25 a 1024). */
.mk-footer__logo {
height: auto;
}
.mk-footer__word {
width: 85%;
height: auto;
}
/* Sin min-width: auto, una palabra larga no ensancha la columna más allá de su porcentaje (a 768, «independientes»). */
.mk-footer__column {
min-width: 0;
padding: 0;
overflow-wrap: anywhere;
}
/* 30px a 1024 como el original; más angosto, el título baja con el ancho para no partir «Independientes». */
.mk-footer__title {
font-size: min(30px, 3vw);
}
.mk-footer__column--portalglam {
flex-basis: 22%;
}
.mk-footer__column--independientes {
flex-basis: 25%;
}
.mk-footer__column--contacto {
flex-basis: 23%;
}
.mk-footer__bottom-inner {
padding: 10px 20px;
}
.mk-footer__bottom p {
font-size: 14px;
}
}
/* Teléfono: solo la marca, centrada (las columnas de enlaces son elementor-hidden-phone), y la barra inferior en una columna. */
@media (max-width: 767px) {
.mk-footer__main {
padding: 35px 20px 20px;
}
.mk-footer__brand {
flex-basis: 100%;
margin-bottom: 21px;
padding: 0;
text-align: center;
}
.mk-footer__logo {
display: flex;
justify-content: center;
height: 37px;
font-size: 37px;
}
.mk-footer__word {
width: auto;
height: 0.95em;
}
.mk-footer__brand p {
margin-top: 25px;
padding: 0 15px;
}
.mk-footer__column {
display: none;
}
/* 40px más abajo: al final de la página, la burbuja de WhatsApp (fija, 88px desde abajo) taparía el enlace a Privacidad. */
.mk-footer__bottom-inner {
display: block;
padding-bottom: 50px;
}
.mk-footer__bottom p {
padding: 10px 0;
font-size: 11px;
line-height: 2.7em;
text-align: center;
}
/* Enlaces legales (no están en el original: sus columnas se ocultan en el teléfono). Mismo texto que la barra, con 48px
de alto de toque. */
.mk-footer__legal {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0 20px;
margin: -10px 0 10px;
font-family: var(--mk-font-accent);
font-size: 11px;
font-weight: 500;
}
.mk-footer__legal a {
display: inline-flex;
align-items: center;
min-height: 48px;
color: var(--mk-color-footer-bottom-text);
}
.mk-footer__logos {
width: 100%;
margin: -4px 0 20px;
}
}
/* Burbuja de WhatsApp (joinchat): 60px, a 28px de la esquina inferior derecha (20px + 8px), sombra 1px 6px 24px
rgba(7,94,84,.24); el ícono al 60%. */
.mk-whatsapp {
position: fixed;
right: 28px;
bottom: 28px;
z-index: 9000;
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
color: var(--mk-color-white);
background: var(--mk-color-whatsapp-ui);
border-radius: 50%;
box-shadow: 1px 6px 24px 0 rgb(7 94 84 / 24%);
transition: background-color 0.2s linear;
}
.mk-whatsapp:hover {
background: var(--mk-color-whatsapp-hover);
}
.mk-whatsapp svg {
width: 36px;
height: 36px;
}
/* Botón de WhatsApp de contacto (481eb6c en la home, acf9ec2 en /contactanos/): fuente del cuerpo 600, ícono a 12px del texto.
El verde #1fd363 del original con texto blanco da 2,0:1: el verde de contraste (4,53:1, ruling de la Task 3). */
.mk-button--whatsapp {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 12px 24px;
font-size: 15px;
font-weight: 600;
line-height: 15px;
color: var(--mk-color-white);
background: var(--mk-color-whatsapp-text);
border: 0;
border-radius: 3px;
}
.mk-button--whatsapp svg {
flex: none;
width: 13.125px;
height: 15px;
}
.mk-button--whatsapp-md {
padding: 15px 30px 16px; /* 49px de alto: el ícono de 18px ocupa 19px en el original */
font-size: 18px;
line-height: 18px;
border-radius: 4px;
}
.mk-button--whatsapp-md svg {
width: 15.75px;
height: 18px;
}
/* Formulario (Elementor Pro, 2fd91f5 y 50e819d): campos #ededed con radio 7px y sin borde, 19px entre columnas y 24px entre
filas; 42px de alto (el select 45px y el mensaje 100px); botón dorado Poppins 600 15px de 40px con radio 3px (el dorado de
contraste: blanco 4,52:1). La trampa queda fuera de la vista, nunca con display: none. */
.mk-form__form {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px 19px;
}
.mk-form__field {
grid-column: 1 / -1;
min-width: 0;
}
.mk-form__input {
display: block;
width: 100%;
height: 42px;
margin: 0;
padding: 9px 16px;
font: inherit;
font-size: 15px;
line-height: 15px;
color: var(--mk-color-field-text);
background: var(--mk-color-field);
border: 0;
border-radius: 7px;
}
.mk-form__input::placeholder {
color: var(--mk-color-placeholder);
opacity: 1;
}
.mk-form__input:focus {
box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%);
}
textarea.mk-form__input {
height: 100px;
padding: 5px 14px;
line-height: 22.5px;
resize: vertical;
}
.mk-form__select {
position: relative;
}
select.mk-form__input {
height: 45px;
padding: 5px 20px 5px 14px;
line-height: 26px;
color: var(--mk-color-text);
appearance: none;
}
.mk-form__caret {
position: absolute;
top: 50%;
right: 10px;
width: 10.86px;
height: 19px;
color: var(--mk-color-text);
pointer-events: none;
transform: translateY(-50%);
}
.mk-form__input[aria-invalid="true"] {
box-shadow: inset 0 0 0 1px var(--mk-color-error);
}
.mk-form__error {
margin: 6px 0 0;
font-size: 14px;
line-height: 1.4;
color: var(--mk-color-error);
}
.mk-form__notice,
.mk-form__alert {
margin: 0 0 16px;
font-family: var(--mk-font-accent);
font-size: 15px;
line-height: 1.5;
}
.mk-form__notice {
color: var(--mk-color-success);
}
.mk-form__alert {
color: var(--mk-color-error);
}
.mk-form__submit {
min-height: 40px;
padding: 0 24px;
font-family: var(--mk-font-accent);
font-size: 15px;
font-weight: 600;
line-height: 15px;
color: var(--mk-color-white);
background: var(--mk-color-gold-text);
border: 0;
border-radius: 3px;
}
.mk-trap {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* Home: nombre y correo, teléfono y plan en dos columnas; el botón a su ancho (button-align-start). /contactanos/: nombre a todo
el ancho, correo y teléfono, y el botón a todo el ancho (button-align-stretch). El popup: nombre y correo y lo demás a todo
el ancho, con 10px entre campos. */
.mk-form--home .mk-form__field--name,
.mk-form--home .mk-form__field--email,
.mk-form--home .mk-form__field--phone,
.mk-form--home .mk-form__field--plan,
.mk-form--contacto .mk-form__field--email,
.mk-form--contacto .mk-form__field--phone,
.mk-form--popup .mk-form__field--name,
.mk-form--popup .mk-form__field--email {
grid-column: auto;
}
.mk-form--contacto .mk-form__submit,
.mk-form--popup .mk-form__submit {
width: 100%;
}
/* Popup (7c6d17bd): campos #f6f6f6 a 14px con texto #2b2b2b; botón #171717 Poppins 500 14px, relleno 14px 34px. */
.mk-form--popup .mk-form__form {
gap: 10px;
}
.mk-form--popup .mk-form__input {
font-size: 14px;
color: var(--mk-color-popup-field-text);
background: var(--mk-color-light);
}
.mk-form--popup .mk-form__submit {
padding: 14px 34px;
font-size: 14px;
font-weight: 500;
background: var(--mk-color-popup-button);
}
.mk-form--popup .mk-form__submit:hover {
background: var(--mk-color-black);
}
@media (max-width: 767px) {
.mk-form__field,
.mk-form--home .mk-form__field--name,
.mk-form--home .mk-form__field--email,
.mk-form--home .mk-form__field--phone,
.mk-form--home .mk-form__field--plan,
.mk-form--contacto .mk-form__field--email,
.mk-form--contacto .mk-form__field--phone {
grid-column: 1 / -1;
}
.mk-form--home .mk-form__submit {
width: 100%;
}
}
/* Contacto de la home (861a4d6): padding 70px 0 y borde inferior dorado de 10px (decorativo); contenedor de 1335px con 10px de
relleno y dos columnas: el texto con 25px a la izquierda (1db443f) y el formulario con relleno 0 40px 40px (fbcc94b),
centrado en vertical. */
.mk-contact {
position: relative;
padding: 70px 0;
border-bottom: 10px solid var(--mk-color-gold);
}
.mk-contact > .mk-anchor {
position: absolute;
top: 0;
}
.mk-contact__inner {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: var(--mk-container);
min-height: 390px;
margin: 0 auto;
padding: 10px;
}
.mk-contact__text {
margin-left: 25px;
padding: 10px 10px 40px;
}
/* Titular (350bca0): Jost 700 43px/1.2 con el margen de un h3 del tema (1.25em arriba, .75em abajo) y el contenedor a -40px. El
subrayado: trazo dorado de 10px, redondeado, 20px más ancho y alto que el texto. */
.mk-contact__title {
margin: 13.75px 0 47.25px; /* 32.25px + los 15px del párrafo (en Elementor son widgets aparte: no se colapsan) */
font-family: var(--mk-font-title);
font-size: 43px;
font-weight: 700;
line-height: 1.2;
color: var(--mk-color-contact-title);
}
.mk-contact__highlight {
position: relative;
display: inline-block;
color: var(--mk-color-contact-highlight);
vertical-align: bottom;
}
.mk-contact__marker {
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
width: calc(100% + 20px);
height: calc(100% + 20px);
overflow: visible;
transform: translate(-50%, -50%);
}
.mk-contact__marker path {
fill: none;
stroke: var(--mk-color-gold);
stroke-width: 10px;
stroke-linecap: round;
stroke-linejoin: round;
}
.mk-contact__lead {
margin: 0 0 15px;
font-family: var(--mk-font-accent);
font-size: 15px;
line-height: 1.9;
color: var(--mk-color-contact-lead);
}
.mk-contact__text .mk-button--whatsapp {
margin-top: 21px;
}
/* El original centra la columna en vertical, pero el formulario (con el reCAPTCHA) es lo más alto y queda arriba; sin el
reCAPTCHA (diferencia 3) se deja arriba para que los campos no bajen 40px. */
.mk-contact__form {
padding: 15px 40px 40px;
}
@media (min-width: 1025px) {
.mk-anchor--contact {
scroll-margin-top: 150px;
}
}
/* Tableta (≤1024): sin relleno arriba y 40px abajo; el texto sube 11px con 20px a la izquierda y el titular a 25px. */
@media (max-width: 1024px) {
.mk-contact {
padding: 0 0 40px;
}
.mk-contact__inner {
margin-top: -11px;
}
.mk-contact__text {
margin: 5px 0 0;
padding: 0 0 40px 20px;
}
.mk-contact__title {
margin-bottom: 25.75px; /* .75em del h3 − 8px del contenedor del párrafo + 15px del párrafo */
font-size: 25px;
}
.mk-contact__form {
padding: 15px 0 0;
}
}
/* Teléfono (≤767): una columna centrada, relleno 10px 0 50px, titular de 20px y párrafo con 20px 15px de relleno. */
@media (max-width: 767px) {
.mk-contact {
padding: 10px 0 50px;
}
.mk-contact__inner {
grid-template-columns: minmax(0, 1fr);
margin-top: 0;
padding: 10px 30px;
}
.mk-contact__text {
margin: 30px 0 0;
padding: 0 0 30px;
text-align: center;
}
.mk-contact__title {
margin: -15px 0 15px;
font-size: 20px;
}
.mk-contact__lead {
margin: 42px 15px 15px; /* 15px del h3 − 8px + 20px de relleno + 15px del párrafo */
}
.mk-anchor--contact {
scroll-margin-top: 100px;
}
}
/* /contacto (3331c825): Bg8 restaurado (diferencia 8) bajo un degradé blanco (20% → transparente); contenedor de 1300px y
650px de alto mínimo, centrado; columnas del 50,571% (relleno 13% 10% 16% 5% de su ancho) y 49,429% (14% 5% 14% 3%). Los
porcentajes van sobre el contenedor (padding en % se mide en el bloque padre): 13% × 0,50571 = 6,574%, etc. */
.mk-contact-page {
position: relative;
z-index: 1;
margin-top: 100px;
padding: 0 0 10px;
background: var(--mk-color-white) url("/assets/marketing/blog/bg8-1440-d161335a.webp") no-repeat center / cover;
}
.mk-contact-page::before {
position: absolute;
inset: 0;
content: "";
background-image: linear-gradient(180deg, var(--mk-color-white) 20%, rgb(255 255 255 / 0%) 100%);
}
.mk-contact-page__inner {
position: relative;
display: flex;
align-items: center;
max-width: 1300px;
min-height: 650px;
margin: 0 auto;
}
/* La fila (sección interior 6b7da9e8) se centra en los 650px y sus dos columnas se estiran a la más alta. */
.mk-contact-page__row {
display: flex;
width: 100%;
}
/* En el escritorio la fila del original mide 624,91px (la columna del formulario con el reCAPTCHA, diferencia 3). Sin él, la
fila centrada bajaría 7,5px el título y «Contáctanos:»; el alto mínimo los deja donde están. */
@media (min-width: 1025px) {
.mk-contact-page__row {
min-height: 624.91px;
}
}
.mk-contact-page__info {
flex: 0 0 50.571%;
padding: 6.574% 5.057% 8.091% 2.529%;
}
.mk-contact-page__form {
flex: 0 0 49.429%;
padding: 6.92% 2.471% 6.92% 1.483%;
}
.mk-contact-page__title {
margin: 10px 0 28px;
font-family: var(--mk-font-heading);
font-size: 39px;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.2px;
color: var(--mk-color-contact-page-title);
}
.mk-contact-page__intro {
margin: 0 0 8px;
font-family: var(--mk-font-heading);
font-size: 20px;
font-weight: 600;
line-height: 26px;
letter-spacing: 0.7px;
}
.mk-contact-page__list {
margin: 0 0 8px;
padding: 10px 0 0;
list-style: none;
}
.mk-contact-page__list li {
display: flex;
align-items: center;
font-family: var(--mk-font-accent);
font-size: 15px;
font-weight: 500;
line-height: 26px;
color: var(--mk-color-contact-list);
}
.mk-contact-page__list li:not(:last-child) {
padding-bottom: 4px;
}
.mk-contact-page__list li:not(:first-child) {
margin-top: 4px;
}
.mk-contact-page__list svg {
flex: none;
width: 18.75px;
height: 15px;
color: var(--mk-color-gold);
}
.mk-contact-page__list span {
padding-left: 20px;
}
.mk-contact-page__list a {
color: inherit;
text-decoration: none;
}
.mk-contact-page__list a:hover {
text-decoration: underline;
}
.mk-contact-page__info .mk-button--whatsapp {
margin-top: 20px;
}
.mk-contact-page__subtitle {
margin: 0 0 20px;
font-family: var(--mk-font-heading);
font-size: 30px;
font-weight: 500;
line-height: 1;
color: var(--mk-color-heading);
}
.mk-contact-page__form .mk-form {
padding-top: 15px;
}
/* Respuesta sin Turbo: solo el formulario, centrado. */
.mk-contact-page--result .mk-contact-page__inner {
justify-content: center;
}
/* Tableta (768–1024): las dos columnas a todo el ancho. */
@media (min-width: 768px) and (max-width: 1024px) {
.mk-contact-page__row {
flex-wrap: wrap;
}
.mk-contact-page__info,
.mk-contact-page__form {
flex-basis: 100%;
}
}
/* Teléfono (≤767): margen 55px arriba y relleno 30px 20px 20px; título de 24px centrado; sin «Puedes comunicarte…» ni la
lista (elementor-hidden-mobile); el botón y «Contáctanos:» centrados. */
@media (max-width: 767px) {
.mk-contact-page {
margin-top: 120.7px; /* 55px del original + lo que la cabecera del teléfono deja sobre el contenido */
padding: 30px 20px 20px;
background-image: url("/assets/marketing/blog/bg8-768-fb11d96c.webp");
}
.mk-contact-page__row {
flex-direction: column;
}
.mk-contact-page__info {
flex-basis: auto;
padding: 0;
text-align: center;
}
.mk-contact-page__form {
flex-basis: auto;
padding: 14% 5% 14% 3%;
}
.mk-contact-page__title {
margin: 0 0 8px;
font-size: 24px;
}
.mk-contact-page__intro,
.mk-contact-page__list {
display: none;
}
.mk-contact-page__subtitle {
text-align: center;
}
}
/* Mapa (1c1057e3, DR-L1): en vez del iframe de Google Maps, un bloque del mismo alto (240px; 340px en el teléfono) con la
dirección y el enlace. El pie empieza 5px más abajo, como en el original. */
.mk-map {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
height: 240px;
margin-bottom: 5px; /* -65px del original más los 70px de relleno inferior del contenido del tema */
background: var(--mk-color-light);
}
.mk-map__address {
margin: 0;
font-family: var(--mk-font-accent);
font-size: 18px;
font-weight: 500;
color: var(--mk-color-heading);
}
.mk-map__link {
padding: 12px 24px;
font-family: var(--mk-font-accent);
font-size: 15px;
font-weight: 600;
line-height: 15px;
color: var(--mk-color-white);
background: var(--mk-color-gold-text);
border: 0;
border-radius: 3px;
}
@media (max-width: 767px) {
.mk-map {
height: 340px;
}
}
/* Popup «Solicita Demo Gratis» (553): 850px de ancho (315px en el teléfono) sobre un fondo negro al 80%, con sombra 2px 8px 23px
3px; dos columnas: el teléfono sobre el ícono de PortalGlam (74777df5; oculta en el teléfono) y el formulario en blanco con
radio 3px, sombra y relleno 45px 30px (19ba9a1f). Título Roboto 700 28px/1.1 #090909; texto Poppins 14px/26px (el gris
#7c7c7c da 4,18:1: el gris de contraste). Cruz a 20px de la esquina. */
.mk-dialog {
width: 850px;
max-width: calc(100vw - 32px);
max-height: calc(100dvh - 32px);
padding: 0;
overflow: auto;
background: var(--mk-color-white);
border: 0;
box-shadow: 2px 8px 23px 3px rgb(0 0 0 / 20%);
}
.mk-dialog::backdrop {
background: var(--mk-color-backdrop);
}
.mk-dialog__panel {
position: relative;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mk-dialog__media {
display: flex;
align-items: center;
padding: 10px;
background: url("/assets/marketing/video/icono-portalglam-back-768-904a9b36.webp") no-repeat -149px -99px / cover;
}
.mk-dialog__phone {
position: relative;
z-index: 1;
width: calc(100% + 40px);
max-width: none;
margin-right: -40px;
padding: 25px 0;
}
.mk-dialog__body {
display: flex;
flex-direction: column;
justify-content: center;
padding: 45px 30px;
background: var(--mk-color-white);
border-radius: 3px;
box-shadow: var(--mk-shadow-popup);
}
.mk-dialog__title {
margin: 0 0 20px;
padding-right: 23px;
font-family: var(--mk-font-heading);
font-size: 28px;
font-weight: 700;
line-height: 1.1;
color: var(--mk-color-popup-title);
text-align: center;
}
.mk-dialog__text {
margin: 0 0 20px;
font-family: var(--mk-font-accent);
font-size: 14px;
line-height: 26px;
color: var(--mk-color-muted-text);
text-align: center;
}
.mk-dialog__body .mk-form {
padding: 15px;
}
.mk-dialog__close {
position: absolute;
top: 20px;
right: 20px;
display: flex;
padding: 4px;
color: var(--mk-color-popup-close);
background: transparent;
border: 0;
cursor: pointer;
}
.mk-dialog__close svg {
width: 15px;
height: 15px;
}
@media (max-width: 1024px) {
.mk-dialog__media {
background-position: 0 0;
}
.mk-dialog__title {
padding-right: 0;
font-size: 26px;
}
}
@media (max-width: 767px) {
.mk-dialog {
width: 315px;
}
.mk-dialog__panel {
grid-template-columns: minmax(0, 1fr);
}
.mk-dialog__media {
display: none;
}
.mk-dialog__body .mk-form {
padding: 0;
}
}
/* Independientes (Task 8; spec §4.4, U7): página sin original. Usa las secciones de la home (hero, tarjeta de beneficios,
soluciones, precios y contacto) con modificadores, y dos bloques propios (beneficios adicionales y pasos) con los mismos
tokens y escalas. Las anclas #pgi* quedan bajo la cabecera flotante, como #pg7. */
@media (min-width: 1025px) {
.mk-anchor--indie {
scroll-margin-top: 150px;
}
}
@media (max-width: 767px) {
.mk-anchor--indie {
scroll-margin-top: 100px;
}
}
/* Hero: más bajo que el de la home (sin la imagen «todos los dispositivos») y con dos botones; abajo deja los 80px que sube la
tarjeta de funcionalidades. */
.mk-hero--compact .mk-hero__inner {
min-height: 0;
padding: 90px 0 130px;
}
.mk-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: center;
}
.mk-hero__actions .mk-hero__cta {
margin: 0;
}
/* Funcionalidades: la tarjeta blanca de los beneficios con título y tres columnas con descripción. */
.mk-benefits--indie .mk-benefits__title {
margin: 20px 20px 10px;
font-family: var(--mk-font-heading);
font-size: 35px;
font-weight: 600;
line-height: 1.2;
color: var(--mk-color-title);
text-align: center;
}
.mk-benefits--indie .mk-benefits__item,
.mk-benefits--indie .mk-benefits__item:nth-child(3) {
width: 33.333%;
padding: 20px 35px;
}
.mk-benefits--indie .mk-benefits__text {
margin-top: 25px;
}
.mk-benefits__detail {
margin: 12px 0 0;
color: var(--mk-color-card-text);
}
/* ¿Por qué escogernos?: soluciones sin el hueco del video y con las tarjetas en una columna (ícono a la izquierda). */
.mk-solutions--indie {
padding-bottom: 70px;
}
.mk-solutions__cards--list {
grid-template-columns: minmax(0, 1fr);
gap: 10px;
}
.mk-solutions__cards--list .mk-solutions__card {
display: flex;
gap: 25px;
align-items: flex-start;
margin: 0;
}
.mk-solutions__cards--list .mk-solutions__icon {
flex: none;
width: 80px;
}
.mk-solutions__cards--list .mk-solutions__card-title {
margin: 0 0 10px;
}
/* Beneficios adicionales: franja #f6f6f6 (la del video) con los checks dorados del pie. */
.mk-extras {
position: relative;
padding: 60px 0;
background: var(--mk-color-light);
}
.mk-extras__inner,
.mk-steps__inner {
max-width: var(--mk-container);
margin: 0 auto;
padding: 10px 20px;
}
.mk-extras__title,
.mk-steps__title {
margin: 0 0 40px;
font-family: var(--mk-font-heading);
font-size: 35px;
font-weight: 600;
line-height: 1.2;
color: var(--mk-color-title);
text-align: center;
}
.mk-extras__list,
.mk-steps__list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 30px;
margin: 0;
padding: 0;
list-style: none;
}
.mk-extras__item {
display: flex;
gap: 15px;
align-items: flex-start;
padding: 25px;
background: var(--mk-color-white);
border-radius: 8px;
box-shadow: 0 0 24px 10px rgba(0, 0, 0, 0.04);
}
.mk-extras__icon {
flex: none;
width: 22px;
height: 22px;
margin-top: 2px;
color: var(--mk-color-gold-text);
}
.mk-extras__item p {
margin: 0;
font-family: var(--mk-font-accent);
font-size: 16px;
line-height: 1.5;
color: var(--mk-color-text);
}
/* Nuestros planes: la tarjeta del Plan Independientes sola, centrada. */
.mk-pricing--indie {
padding-top: 70px;
}
.mk-pricing__cards--single {
grid-template-columns: minmax(0, 360px);
justify-content: center;
}
/* ¿Cómo empezar?: tres pasos numerados con el número en dorado de contraste. */
.mk-steps {
position: relative;
padding: 60px 0 40px;
}
.mk-steps__list {
counter-reset: mk-step;
}
.mk-steps__item {
counter-increment: mk-step;
text-align: center;
}
.mk-steps__item::before {
display: block;
margin-bottom: 15px;
font-family: var(--mk-font-title);
font-size: 60px;
font-weight: 700;
line-height: 1;
color: var(--mk-color-gold-text);
content: counter(mk-step);
}
.mk-steps__item-title {
margin: 0 0 10px;
font-family: var(--mk-font-heading);
font-size: 23px;
font-weight: 700;
line-height: 1.25;
color: var(--mk-color-card-title);
}
.mk-steps__item-text {
margin: 0;
color: var(--mk-color-card-text);
}
.mk-contact--indie .mk-contact__title {
margin-bottom: 25px;
}
/* Tableta: la cabecera flotante llega hasta y≈200 (el hero de la home la salva con su alto mínimo de 85vh). */
@media (max-width: 1024px) {
.mk-hero--compact .mk-hero__inner {
padding: 190px 0 170px; /* y los 138px que sube la tarjeta (−58px − 80px) */
}
.mk-benefits--indie .mk-benefits__title {
font-size: 28px;
}
.mk-benefits--indie .mk-benefits__item,
.mk-benefits--indie .mk-benefits__item:nth-child(3) {
padding: 15px 20px;
}
.mk-solutions--indie {
padding-bottom: 50px;
}
}
/* Teléfono: el título del hero baja bajo la cabecera flotante (78px desde y=25). */
@media (max-width: 767px) {
.mk-hero--compact .mk-hero__inner {
padding: 85px 0 60px;
}
.mk-hero__actions {
flex-direction: column;
}
.mk-benefits--indie {
margin-top: 30px;
}
.mk-benefits--indie .mk-benefits__card {
margin-top: 0;
}
.mk-benefits--indie .mk-benefits__title,
.mk-extras__title,
.mk-steps__title {
font-size: 26px;
}
.mk-benefits--indie .mk-benefits__item,
.mk-benefits--indie .mk-benefits__item:nth-child(3) {
width: 100%;
}
.mk-solutions--indie {
margin-top: 30px;
}
.mk-solutions__cards--list .mk-solutions__card {
flex-direction: column;
align-items: center;
text-align: center;
}
.mk-contact--indie .mk-contact__title {
margin: 0 0 15px;
font-size: 26px;
}
.mk-contact--indie .mk-contact__lead {
margin-top: 15px;
}
.mk-extras__list,
.mk-steps__list {
grid-template-columns: minmax(0, 1fr);
gap: 20px;
}
.mk-extras {
padding: 40px 0;
}
.mk-pricing--indie {
padding-top: 40px;
}
}
/* «Ingresar» (Task 8, U8): página nueva. El fondo de /contacto (Bg8 bajo el degradé blanco) y una tarjeta blanca como las de
precios, con el campo y el botón del formulario de contacto. */
.mk-sign-in {
position: relative;
z-index: 1;
margin-top: 100px;
padding: 100px 20px 120px;
background: var(--mk-color-white) url("/assets/marketing/blog/bg8-1440-d161335a.webp") no-repeat center / cover;
}
.mk-sign-in::before {
position: absolute;
inset: 0;
content: "";
background-image: linear-gradient(180deg, var(--mk-color-white) 20%, rgb(255 255 255 / 0%) 100%);
}
.mk-sign-in__card {
position: relative;
max-width: 480px;
margin: 0 auto;
padding: 45px 40px;
background: var(--mk-color-white);
border-radius: 8px;
box-shadow: 0 0 24px 10px rgba(0, 0, 0, 0.07);
}
.mk-sign-in__title {
margin: 0 0 15px;
font-family: var(--mk-font-heading);
font-size: 39px;
font-weight: 600;
line-height: 1.3;
color: var(--mk-color-title);
}
.mk-sign-in__lead {
margin: 0 0 25px;
font-family: var(--mk-font-accent);
font-size: 15px;
line-height: 1.9;
color: var(--mk-color-contact-lead);
}
.mk-sign-in .mk-form__label {
display: block;
margin-bottom: 8px;
font-family: var(--mk-font-accent);
font-size: 15px;
font-weight: 500;
color: var(--mk-color-text);
}
.mk-sign-in .mk-form__submit {
grid-column: 1 / -1;
}
@media (max-width: 767px) {
.mk-sign-in {
margin-top: 121px;
padding: 30px 20px 60px;
background-image: url("/assets/marketing/blog/bg8-768-fb11d96c.webp");
}
.mk-sign-in__card {
padding: 30px 20px;
}
.mk-sign-in__title {
font-size: 28px;
}
}