/* ========================================================================== MARKETING — landing, precio, demo, contacto y pantallas de autenticación Requiere base.css cargado antes. Acá la marca es NUESTRA y es fija (DISENO §1): el cliente no configura nada de esta superficie. Los cuatro colores del showroom no se usan; el acento sale de --mk-acento, y se mapea sobre --p/--p-txt para que los componentes comunes de base.css (botones, insignias, foco) se pinten con la marca del producto sin duplicar código. El producto que estas páginas describen es: recorrido 360 jerárquico, animaciones y presentación configurables, e informe de avance de obra. Las unidades son un extra OPCIONAL (AJUSTES §4): si un bloque las nombra, va en la sección de extras, nunca en el titular. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Marca del producto -------------------------------------------------------------------------- */ /* El azul es el que eligió el dueño para la portada (§B del ESTADO): #0E4FD1, el color que más aparece en el diseño que aprobó. Se declara acá y no solo en portada.css para que /precio, /demo, /contacto y las legales queden del mismo color que la portada: es la misma marca. */ .mk { --mk-acento: #0E4FD1; --mk-acento-txt: #ffffff; --mk-acento-2: #2F73E6; /* Los componentes de base.css leen --p: se les presta la marca nuestra. */ --p: var(--mk-acento); --p-txt: var(--mk-acento-txt); --fg: var(--sup-1); --fg-txt: var(--txt); background: var(--sup-0); color: var(--txt); } /* Sin variante oscura a propósito: el sitio público va SIEMPRE en blanco. El layout manda `data-tema="claro"` en el y base.css deja de cambiar las superficies, así que un acento oscuro acá solo produciría un azul claro sobre fondo blanco, que no contrasta. Ver views/layout/publico.php. */ /* -------------------------------------------------------------------------- 2. Barra superior -------------------------------------------------------------------------- */ .mk-nav { position: sticky; top: 0; z-index: 100; background: color-mix(in oklab, var(--sup-0) 88%, transparent); backdrop-filter: saturate(1.2) blur(12px); -webkit-backdrop-filter: saturate(1.2) blur(12px); border-bottom: var(--b-fino) solid var(--borde); padding-top: env(safe-area-inset-top); } @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { .mk-nav { background: var(--sup-0); } } .mk-nav-inner { display: flex; align-items: center; gap: var(--e-4); min-height: 64px; } .mk-logo { display: inline-flex; align-items: center; gap: var(--e-2); font-weight: var(--peso-titulo); font-size: var(--t-h3); letter-spacing: -.01em; text-decoration: none; color: var(--txt); } .mk-logo-marca { color: var(--mk-acento); } .mk-nav-links { display: flex; align-items: center; gap: var(--e-1); margin-left: auto; } .mk-nav-link { position: relative; display: inline-flex; align-items: center; min-height: var(--tactil); padding: 0 var(--e-3); border-radius: var(--r-md); color: var(--txt-2); font-size: var(--t-sm); font-weight: var(--peso-enfasis); text-decoration: none; transition: color var(--ms-instantaneo), background var(--ms-instantaneo); } .mk-nav-link:hover { color: var(--txt); background: var(--sup-2); } .mk-nav-link[aria-current="page"] { color: var(--mk-acento); } /* Menú de navegación en móvil: el detalle nativo evita JS y es accesible. */ .mk-nav-menu { display: none; } @media (max-width: 767.98px) { .mk-nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: var(--e-2); background: var(--sup-0); border-bottom: var(--b-fino) solid var(--borde); box-shadow: var(--sombra-2); } .mk-nav:not([data-abierto="1"]) .mk-nav-links { display: none; } .mk-nav-menu { display: inline-flex; margin-left: auto; } .mk-nav-link { min-height: var(--tactil); } } /* -------------------------------------------------------------------------- 3. Secciones y ritmo vertical -------------------------------------------------------------------------- */ .mk-seccion { padding-block: clamp(var(--e-7), 6vw, var(--e-8)); } .mk-seccion-alt { background: var(--sup-1); border-block: var(--b-fino) solid var(--borde); } .mk-cabecera { max-width: 62ch; margin-inline: auto; text-align: center; display: flex; flex-direction: column; gap: var(--e-3); margin-bottom: var(--e-6); } .mk-cabecera p { color: var(--txt-2); } .mk-etiqueta { align-self: center; display: inline-flex; align-items: center; gap: var(--e-1); padding: var(--e-1) var(--e-3); border-radius: var(--r-full); border: var(--b-fino) solid color-mix(in oklab, var(--mk-acento) 34%, transparent); background: color-mix(in oklab, var(--mk-acento) 10%, transparent); color: var(--mk-acento); font-size: var(--t-xs); font-weight: var(--peso-enfasis); letter-spacing: .04em; text-transform: uppercase; } /* -------------------------------------------------------------------------- 4. Héroe -------------------------------------------------------------------------- */ .mk-hero { position: relative; overflow: hidden; padding-block: clamp(var(--e-7), 8vw, 96px); } /* Resplandor de marca. Va detrás del texto y no lo toca: el contraste del titular no depende de un gradiente. */ .mk-hero::before { content: ""; position: absolute; inset: -30% -10% auto -10%; height: 70%; z-index: 0; background: radial-gradient(ellipse at 50% 0%, color-mix(in oklab, var(--mk-acento) 22%, transparent) 0%, transparent 70%); pointer-events: none; } .mk-hero > * { position: relative; z-index: 1; } .mk-hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--e-6); align-items: center; } @media (min-width: 900px) { .mk-hero-grid { grid-template-columns: 1.05fr .95fr; gap: var(--e-7); } } .mk-hero-texto { display: flex; flex-direction: column; gap: var(--e-4); align-items: flex-start; } .mk-hero h1 { font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: -.02em; max-width: 18ch; } .mk-hero-sub { font-size: clamp(1rem, .95rem + .3vw, 1.25rem); color: var(--txt-2); max-width: 52ch; } .mk-hero-acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); } .mk-hero-nota { font-size: var(--t-xs); color: var(--txt-3); } /* Marco del recorrido de ejemplo. aspect-ratio evita el salto de layout cuando entra la imagen o el iframe. */ .mk-marco { position: relative; border-radius: var(--r-lg); border: var(--b-fino) solid var(--borde); background: var(--n-950); overflow: hidden; box-shadow: var(--sombra-3); aspect-ratio: 16 / 10; } .mk-marco > img, .mk-marco > iframe, .mk-marco > video { width: 100%; height: 100%; border: 0; object-fit: cover; display: block; } .mk-marco-barra { position: absolute; inset-inline: 0; top: 0; height: 28px; display: flex; align-items: center; gap: 6px; padding-inline: var(--e-3); background: rgb(0 0 0 / .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .mk-marco-barra i { width: 8px; height: 8px; border-radius: 50%; background: rgb(255 255 255 / .28); } /* -------------------------------------------------------------------------- 5. Rejillas de contenido -------------------------------------------------------------------------- */ .mk-grid { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } .mk-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); } .mk-tarjeta { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-5); border-radius: var(--r-md); border: var(--b-fino) solid var(--borde); background: var(--sup-0); box-shadow: var(--sombra-1); transition: border-color var(--ms-rapido) var(--ease-ambos), transform var(--ms-rapido) var(--ease-ambos); } .mk-tarjeta:hover { border-color: var(--borde-fuerte); transform: translateY(-2px); } .mk-tarjeta p { color: var(--txt-2); font-size: var(--t-sm); } .mk-tarjeta-icono { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-md); background: color-mix(in oklab, var(--mk-acento) 12%, transparent); color: var(--mk-acento); } .mk-tarjeta-icono > svg { width: 22px; height: 22px; } /* Pasos numerados: el número es dato, va en cifras monoespaciadas. */ .mk-pasos { counter-reset: paso; } .mk-paso { position: relative; padding-left: var(--e-7); } .mk-paso::before { counter-increment: paso; content: counter(paso); position: absolute; left: 0; top: 0; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--mk-acento); color: var(--mk-acento-txt); font-family: var(--fuente-num); font-weight: var(--peso-cifra); } /* -------------------------------------------------------------------------- 6. Precio Una sola suscripción. El cobro es de la constructora al dueño del SaaS, en app.: nada de esto vive dentro de un showroom (AJUSTES §2). -------------------------------------------------------------------------- */ .mk-precio { max-width: 460px; margin-inline: auto; padding: var(--e-6); border-radius: var(--r-lg); border: var(--b-grueso) solid color-mix(in oklab, var(--mk-acento) 40%, transparent); background: var(--sup-0); box-shadow: var(--sombra-2); display: flex; flex-direction: column; gap: var(--e-4); text-align: center; } .mk-precio-cifra { font-family: var(--fuente-num); font-size: clamp(2.5rem, 2rem + 2vw, 3.25rem); font-weight: var(--peso-cifra); line-height: 1; letter-spacing: -.02em; } .mk-precio-periodo { font-size: var(--t-sm); color: var(--txt-2); font-family: var(--fuente); } .mk-lista { display: flex; flex-direction: column; gap: var(--e-2); text-align: left; } .mk-lista li { display: flex; align-items: flex-start; gap: var(--e-2); font-size: var(--t-sm); } /* La marca de verificación es decorativa; el hecho lo comunica el texto. Va en el azul de la marca y no en el verde de --ok: la portada pinta sus vistos en azul y dos páginas de precios del mismo sitio no pueden usar dos colores distintos para decir "incluido". */ .mk-lista li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: color-mix(in oklab, var(--mk-acento) 16%, transparent); border: var(--b-grueso) solid var(--mk-acento); } .mk-lista li[data-extra]::before { background: transparent; border-color: var(--n-400); border-style: dashed; } /* Nota para lo opcional (unidades): se nombra como extra, nunca como titular */ .mk-nota-extra { font-size: var(--t-xs); color: var(--txt-3); } /* -------------------------------------------------------------------------- 6-bis. Escalera de tres peldaños (Gratis · Básico · Agencia) .mk-precio de arriba sirve para UNA tarjeta centrada; esto es la rejilla. -------------------------------------------------------------------------- */ .mk-planes { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; } .mk-plan { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-5); border-radius: var(--r-lg); border: var(--b-fino) solid var(--borde); background: var(--sup-0); box-shadow: var(--sombra-1); } /* El peldaño recomendado se marca con borde y elevación, NO con escala: un transform aquí desalinea las tarjetas vecinas en el tramo de 2 columnas. */ .mk-plan-destacado { border: var(--b-grueso) solid color-mix(in oklab, var(--mk-acento) 40%, transparent); box-shadow: var(--sombra-2); } .mk-plan-nombre { font-size: var(--t-h3, var(--t-base)); font-weight: var(--peso-titulo); } .mk-plan-lema { font-size: var(--t-sm); color: var(--txt-2); min-height: 3em; } .mk-plan-cifra { font-family: var(--fuente-num); font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); font-weight: var(--peso-cifra); line-height: 1; letter-spacing: -.02em; } .mk-plan-periodo { font-size: var(--t-sm); color: var(--txt-2); font-family: var(--fuente); } /* El precio anual es dato secundario: se dice, no se grita. */ .mk-plan-anual { font-size: var(--t-xs); color: var(--txt-3); } /* La cinta se apoya en el borde superior de la tarjeta destacada. */ .mk-plan-cinta { align-self: flex-start; padding: 2px var(--e-2); border-radius: var(--r-sm); background: var(--mk-acento); color: var(--mk-acento-txt); font-size: var(--t-xs); font-weight: var(--peso-enfasis); text-transform: uppercase; letter-spacing: .08em; } /* El botón se pega abajo para que las tres tarjetas lo alineen aunque las listas tengan distinto largo. */ .mk-plan .btn { margin-top: auto; width: 100%; justify-content: center; } /* Lo que un peldaño NO trae se marca en gris y tachado suave: se entiende de un vistazo sin depender solo del color (DISENO §2 contraste). */ .mk-lista li[data-no] { color: var(--txt-3); } .mk-lista li[data-no]::before { background: transparent; border-color: var(--n-400); border-style: dotted; } @media (max-width: 639.98px) { .mk-plan { padding: var(--e-4); } /* Sin altura mínima: apiladas, el hueco del lema es aire desperdiciado. */ .mk-plan-lema { min-height: 0; } } @media (max-width: 379.98px) { .mk-lista li[data-no] { display: none; } } /* -------------------------------------------------------------------------- 7. Preguntas frecuentes —
/ nativo: teclado gratis -------------------------------------------------------------------------- */ .mk-faq { max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--e-2); } .mk-faq details { border: var(--b-fino) solid var(--borde); border-radius: var(--r-md); background: var(--sup-0); overflow: hidden; } .mk-faq summary { display: flex; align-items: center; gap: var(--e-3); min-height: var(--tactil); padding: var(--e-3) var(--e-4); font-weight: var(--peso-titulo); font-size: var(--t-base); cursor: pointer; list-style: none; } .mk-faq summary::-webkit-details-marker { display: none; } .mk-faq summary::after { content: ""; margin-left: auto; flex: none; width: 10px; height: 10px; border-right: var(--b-grueso) solid var(--txt-3); border-bottom: var(--b-grueso) solid var(--txt-3); transform: rotate(45deg); transition: transform var(--ms-rapido) var(--ease-ambos); } .mk-faq details[open] summary::after { transform: rotate(-135deg); } .mk-faq summary:hover { background: var(--sup-2); } .mk-faq-cuerpo { padding: 0 var(--e-4) var(--e-4); color: var(--txt-2); font-size: var(--t-sm); } /* -------------------------------------------------------------------------- 8. Llamado final y pie -------------------------------------------------------------------------- */ .mk-cta { border-radius: var(--r-lg); padding: clamp(var(--e-6), 5vw, var(--e-8)) var(--e-5); text-align: center; color: #fff; background: radial-gradient(ellipse at 20% 0%, color-mix(in oklab, var(--mk-acento-2) 70%, transparent) 0%, transparent 60%), linear-gradient(135deg, oklch(38% .13 258), oklch(28% .10 258)); display: flex; flex-direction: column; align-items: center; gap: var(--e-4); } .mk-cta h2 { font-size: var(--t-h1); max-width: 22ch; } .mk-cta p { color: rgb(255 255 255 / .82); max-width: 54ch; } .mk-cta .btn-primario { background: #fff; color: oklch(30% .12 258); } .mk-cta .btn-primario:hover { background: rgb(255 255 255 / .88); } .mk-pie { border-top: var(--b-fino) solid var(--borde); background: var(--sup-1); padding-block: var(--e-6); padding-bottom: calc(var(--e-6) + env(safe-area-inset-bottom)); font-size: var(--t-sm); color: var(--txt-2); } .mk-pie-grid { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); } .mk-pie h3 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--txt-3); margin-bottom: var(--e-2); } .mk-pie a { display: inline-flex; align-items: center; min-height: 32px; color: var(--txt-2); text-decoration: none; } .mk-pie a:hover { color: var(--txt); text-decoration: underline; } .mk-pie-legal { margin-top: var(--e-5); padding-top: var(--e-4); border-top: var(--b-fino) solid var(--borde); display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; font-size: var(--t-xs); color: var(--txt-3); } /* Fila superior del pie: marca, dónde estamos y los enlaces reales. Es la que el diseño de la portada pide; el resto del sitio la hereda igual. */ .mk-pie-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4); } .mk-pie-marca { display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--t-base); font-weight: var(--peso-titulo); letter-spacing: -.02em; color: var(--txt); } .mk-pie-marca svg { flex: none; } .mk-pie-lugar { font-size: var(--t-sm); color: var(--txt-3); } .mk-pie-nav { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-5); margin-left: auto; } @media (max-width: 639.98px) { /* Apilado, `margin-left: auto` deja los enlaces pegados al borde derecho. */ .mk-pie-nav { margin-left: 0; gap: var(--e-2) var(--e-4); } /* En un celular, la línea de la ciudad es lo primero que sobra. */ .mk-pie-lugar { display: none; } } /* Selector de idioma (es/en desde el día uno) */ .mk-idiomas { display: inline-flex; gap: var(--e-1); margin-left: auto; } .mk-idioma { min-width: 44px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--e-2); border-radius: var(--r-sm); border: var(--b-fino) solid var(--borde); font-size: var(--t-xs); font-weight: var(--peso-enfasis); text-decoration: none; color: var(--txt-2); } .mk-idioma[aria-current="true"] { background: var(--sup-2); color: var(--txt); border-color: var(--borde-fuerte); } /* -------------------------------------------------------------------------- 9. Formularios de marketing y de autenticación El layout de auth vive en este host, así que su tarjeta va acá y no en panel.css: el visitante que se registra todavía no tiene panel. -------------------------------------------------------------------------- */ .mk-form { max-width: 560px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--e-4); } /* Columna del formulario: el
Y todo lo que lo acompaña. El aviso de éxito y la nota del correo directo tienen que compartir el ancho del formulario. Sueltos dentro de .contenedor miden los 1140px del contenedor, así que en un escritorio se veía un cartel verde de ancho completo encima de un formulario de 560 centrado, y la nota del correo alineada a la izquierda del todo mientras el formulario quedaba al medio: se leían como tres bloques sin relación en vez de una sola pieza. */ .mk-columna { max-width: 560px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--e-4); } .mk-auth { min-height: 100dvh; display: grid; place-items: center; padding: var(--e-5) var(--e-4); padding-top: calc(var(--e-5) + env(safe-area-inset-top)); padding-bottom: calc(var(--e-5) + env(safe-area-inset-bottom)); background: var(--sup-1); } .mk-auth-tarjeta { width: min(420px, 100%); display: flex; flex-direction: column; gap: var(--e-4); padding: var(--e-6) var(--e-5); border-radius: var(--r-lg); border: var(--b-fino) solid var(--borde); background: var(--sup-0); box-shadow: var(--sombra-2); } /* Trampa para robots del formulario de contacto. Se esconde de verdad y del lector de pantalla: un humano no debe verla NI oírla. No usar .oculto-visual acá, que esa deja el campo audible y un lector lo anunciaría como un campo más que rellenar. */ .mk-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .mk-auth-tarjeta h1 { font-size: var(--t-h2); } .mk-auth-pie { text-align: center; font-size: var(--t-sm); color: var(--txt-2); } .mk-auth-pie a { color: var(--mk-acento); } /* Aviso de formulario (éxito, error del servidor, verificación pendiente) */ .mk-aviso { display: flex; align-items: flex-start; gap: var(--e-2); padding: var(--e-3); border-radius: var(--r-md); border: var(--b-fino) solid var(--borde); background: var(--sup-2); font-size: var(--t-sm); } .mk-aviso-ok { border-color: var(--ok); background: var(--ok-suave); } .mk-aviso-error { border-color: var(--error); background: var(--error-suave); } .mk-aviso-info { border-color: var(--info); background: var(--info-suave); } /* -------------------------------------------------------------------------- 10. Texto largo (términos, privacidad, artículos) -------------------------------------------------------------------------- */ .mk-prosa { max-width: 68ch; margin-inline: auto; display: flex; flex-direction: column; gap: var(--e-4); } .mk-prosa h2 { margin-top: var(--e-5); } .mk-prosa ul, .mk-prosa ol { padding-left: var(--e-5); display: flex; flex-direction: column; gap: var(--e-2); } .mk-prosa li { list-style: disc; } .mk-prosa ol li { list-style: decimal; } .mk-prosa a { color: var(--mk-acento); } .mk-prosa code { background: var(--sup-2); padding: 2px 6px; border-radius: var(--r-sm); } /* Tabla comparativa: se convierte en tarjetas bajo 640px. Una tabla ancha con scroll horizontal en un celular es inutilizable (DISENO §4.7). */ .mk-tabla { width: 100%; font-size: var(--t-sm); } .mk-tabla th, .mk-tabla td { padding: var(--e-3); border-bottom: var(--b-fino) solid var(--borde); text-align: left; vertical-align: top; } .mk-tabla th { font-weight: var(--peso-titulo); color: var(--txt); } .mk-tabla td.num { text-align: right; font-family: var(--fuente-num); } @media (max-width: 639.98px) { .mk-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .mk-tabla tr { display: block; margin-bottom: var(--e-3); border: var(--b-fino) solid var(--borde); border-radius: var(--r-md); background: var(--sup-0); padding: var(--e-2); } .mk-tabla td { display: flex; gap: var(--e-3); justify-content: space-between; border-bottom: 0; padding: var(--e-2); } .mk-tabla td::before { content: attr(data-etiqueta); font-weight: var(--peso-enfasis); color: var(--txt-2); } .mk-tabla td.num { text-align: right; } } /* -------------------------------------------------------------------------- 11. Tramos chicos Mismo criterio que el showroom: se quita contenido, no se encoge la letra. -------------------------------------------------------------------------- */ @media (max-width: 639.98px) { .mk-hero-acciones { width: 100%; } .mk-hero-acciones > .btn { width: 100%; } .mk-tarjeta { padding: var(--e-4); } .mk-precio { padding: var(--e-5) var(--e-4); } } @media (max-width: 379.98px) { .contenedor { padding-inline: var(--e-3); } /* Lo decorativo se va: en 360px cada bloque tiene que ganarse el espacio. */ .mk-secundario { display: none !important; } .mk-paso { padding-left: var(--e-6); } .mk-paso::before { width: 32px; height: 32px; } /* Ningún texto por debajo de 13px, tampoco acá. */ .mk-tarjeta p, .mk-lista li, .mk-faq-cuerpo, .mk-pie { font-size: var(--t-xs); } }