/* ========================================================= BÚHO · Marcas a color + piezas gráficas humanizadas --------------------------------------------------------- Complementa logos-marcas.css (siluetas oficiales en máscara) y logos-servicios.css (presentación de logos raster). Aquí vive: 1. .mk-* → color oficial de cada marca sobre la máscara 2. .bchip → chip redondeado con tinte de marca (icono humanizado) 3. .apps → rejilla de aplicaciones instalables en un clic 4. .tchip → etiqueta de tecnología con logo, para tablas y barras 5. .human → banda de acompañamiento con rostros del equipo Los logos siguen siendo propiedad de sus titulares. ========================================================= */ /* ── 1 · Color oficial por marca ───────────────────────── Las máscaras heredan currentColor, así que basta con pintar el color. Uso: ------------------------------------------------------- */ .mk { color: var(--mk, currentColor); } .mk-wordpress { --mk: #21759B; --mk-soft: rgba(33,117,155,.11); } .mk-woocommerce { --mk: #96588A; --mk-soft: rgba(150,88,138,.12); } .mk-joomla { --mk: #5091CD; --mk-soft: rgba(80,145,205,.13); } .mk-drupal { --mk: #0678BE; --mk-soft: rgba(6,120,190,.11); } .mk-moodle { --mk: #F98012; --mk-soft: rgba(249,128,18,.13); } .mk-prestashop { --mk: #DF0067; --mk-soft: rgba(223,0,103,.10); } .mk-magento { --mk: #EE672F; --mk-soft: rgba(238,103,47,.13); } .mk-laravel { --mk: #FF2D20; --mk-soft: rgba(255,45,32,.10); } .mk-elementor { --mk: #92003B; --mk-soft: rgba(146,0,59,.10); } .mk-php { --mk: #6C74B4; --mk-soft: rgba(108,116,180,.14); } .mk-mysql { --mk: #00618A; --mk-soft: rgba(0,97,138,.11); } .mk-postgresql { --mk: #336791; --mk-soft: rgba(51,103,145,.11); } .mk-letsencrypt { --mk: #003A70; --mk-soft: rgba(0,58,112,.10); } .mk-apache { --mk: #C7211C; --mk-soft: rgba(199,33,28,.10); } .mk-cloudflare { --mk: #F38020; --mk-soft: rgba(243,128,32,.13); } .mk-cpanel { --mk: #FF6C2C; --mk-soft: rgba(255,108,44,.13); } .mk-litespeed { --mk: #0B6FBA; --mk-soft: rgba(11,111,186,.11); } .mk-whatsapp { --mk: #1FA855; --mk-soft: rgba(31,168,85,.12); } .mk-git { --mk: #F05032; --mk-soft: rgba(240,80,50,.12); } .mk-ubuntu { --mk: #E95420; --mk-soft: rgba(233,84,32,.12); } /* Sobre fondo navy los colores oscuros no leen: se aclaran. */ .sec--navy .mk-letsencrypt, .phband .mk-letsencrypt, .closer .mk-letsencrypt { --mk: #7FB2E5; } .sec--navy .mk-mysql, .phband .mk-mysql { --mk: #79C4E0; } .sec--navy .mk-wordpress, .phband .mk-wordpress { --mk: #7BB9D4; } .sec--navy .mk-litespeed, .phband .mk-litespeed { --mk: #6FB6EE; } .bento .dark .mk-wordpress { --mk: #8CC7E0; } /* ── 2 · Chip de marca ─────────────────────────────────── El cuadrado navy de siempre pasa a ser una pastilla con el tinte de la propia marca. Es lo que da el aire amable. ------------------------------------------------------- */ .bchip { --bc: 48px; width: var(--bc); height: var(--bc); border-radius: calc(var(--bc) * .32); display: inline-grid; place-items: center; background: var(--mk-soft, rgba(0,17,68,.06)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mk, #001144) 16%, transparent); flex-shrink: 0; transition: transform var(--dur-base, .2s) var(--ease-out, ease), box-shadow var(--dur-base, .2s) var(--ease-out, ease); } .bchip .logo-marca { --lm: calc(var(--bc) * .54); color: var(--mk, var(--buho-navy-950)); } .bchip .product-logo { --pl: calc(var(--bc) * .58); } .bchip--lg { --bc: 60px; } .bchip--sm { --bc: 38px; } *:hover > .bchip, .bchip:hover { transform: translateY(-2px) rotate(-2deg); } /* Sobre fondo oscuro el tinte se invierte a vidrio claro. */ .sec--navy .bchip, .bento .dark .bchip, .phband .bchip, .closer .bchip { background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); } .bento .accent .bchip { background: rgba(255,255,255,.20); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); } .bento .accent .bchip .logo-marca { color: #fff; } /* El chip reemplaza a .ico dentro del bento y del explorador. */ .bento .ico.bchip, .explore .ico.bchip { width: var(--bc); height: var(--bc); } /* ── 3 · Rejilla de aplicaciones de un clic ────────────── Patrón de la competencia: el logo real de cada CMS, no un icono genérico de "aplicación". ------------------------------------------------------- */ .apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; } .apps__it { display: flex; align-items: center; gap: 11px; padding: 14px 15px; background: #fff; border: 1px solid rgba(0,17,68,.07); border-radius: 16px; text-decoration: none; color: inherit; transition: transform var(--dur-base, .2s) var(--ease-out, ease), box-shadow var(--dur-base, .2s) var(--ease-out, ease), border-color var(--dur-base, .2s) var(--ease-out, ease); } .apps__it:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--mk, #001144) 34%, transparent); box-shadow: 0 18px 34px rgba(0,17,68,.10); } .apps__it .logo-marca { --lm: 26px; color: var(--mk, var(--buho-navy-950)); } .apps__it .product-logo { --pl: 26px; } .apps__it b { font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; } .apps__it small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--color-text-muted); font-weight: 500; } .apps__more { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 15px; border-radius: 16px; border: 1px dashed rgba(0,17,68,.18); font-size: 13px; font-weight: 700; color: var(--color-text-muted); background: transparent; } /* ── 4 · Etiqueta de tecnología con logo ───────────────── Para celdas de tabla, etiquetas de barras y listas de plan. ------------------------------------------------------- */ .tchip { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .tchip .logo-marca { --lm: 18px; color: var(--mk, currentColor); } .tchip .product-logo { --pl: 18px; } .tchip--wide .logo-marca { width: 62px; height: 17px; } .cmp .tchip { font-weight: inherit; } .bars__lb .tchip { gap: 6px; } .bars__lb .tchip .logo-marca { --lm: 16px; } .plan__feats .logo-marca { --lm: 17px; color: var(--mk, var(--buho-blue-600)); flex-shrink: 0; margin-top: 1px; } .plan__feats .tchip { display: inline-flex; } .checks .logo-marca { --lm: 17px; color: var(--mk, var(--buho-blue-600)); flex-shrink: 0; margin-top: 2px; } .guar .logo-marca { --lm: 22px; color: var(--mk, var(--buho-blue-600)); flex-shrink: 0; } .techrow .logo-marca.mk { color: var(--mk, currentColor); } .closer__fine .logo-marca { --lm: 16px; color: currentColor; } /* ── 5 · Banda de acompañamiento humano ────────────────── Rostros reales frente al diagrama: quien migra tu web es un equipo, no una tubería. ------------------------------------------------------- */ .human { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 20px 24px; background: #fff; border: 1px solid rgba(0,17,68,.07); border-radius: 22px; box-shadow: 0 14px 34px rgba(0,17,68,.06); } .human__faces { display: inline-flex; } .human__faces img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0,17,68,.14); } .human__faces img + img { margin-left: -15px; } .human__txt { flex: 1 1 220px; min-width: 0; } .human__txt b { display: block; font-size: 15px; letter-spacing: -.01em; } .human__txt span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.55; color: var(--color-text-muted); } .human .btn { flex-shrink: 0; } .sec--navy .human, .phband .human { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); box-shadow: none; } .sec--navy .human__txt span, .phband .human__txt span { color: rgba(255,255,255,.72); } /* ── 6 · Franja de confianza con logos oficiales ───────── Los logos van juntos, del mismo alto óptico y en gris, y toman color al pasar el cursor. ------------------------------------------------------- */ .trustlogos { display: flex; flex-wrap: wrap; align-items: center; gap: 30px 44px; justify-content: center; } .trustlogos > * { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; letter-spacing: -.01em; color: var(--color-text-muted); filter: grayscale(1); opacity: .62; transition: filter var(--dur-base, .2s) var(--ease-out, ease), opacity var(--dur-base, .2s) var(--ease-out, ease); } .trustlogos > *:hover { filter: none; opacity: 1; } .trustlogos .logo-marca { --lm: 26px; color: var(--mk, var(--buho-navy-950)); } .trustlogos .logo-marca--wide { width: 92px; height: 26px; } .trustlogos img { height: 26px; width: auto; max-width: 116px; object-fit: contain; } .trustlogos img.on-ink { filter: brightness(0); opacity: .78; } @media (max-width: 700px) { .apps { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 9px; } .apps__it { padding: 12px; gap: 9px; } .trustlogos { gap: 22px 28px; } .human { padding: 17px 18px; gap: 14px; } } @media (prefers-reduced-motion: reduce) { .bchip, .apps__it { transition: none; } *:hover > .bchip, .bchip:hover { transform: none; } } /* ── 7 · Remates ───────────────────────────────────────── Detalles que aparecen al mezclar logos con el kit previo. ------------------------------------------------------- */ /* Iconos Tabler dentro de un chip: mismo peso óptico que un logo. */ .bchip .ti { font-size: calc(var(--bc) * .46); color: var(--mk, var(--buho-navy-950)); line-height: 1; } .sec--navy .bchip .ti, .bento .dark .bchip .ti, .phband .bchip .ti { color: #fff; } /* Wordmarks raster pensados en blanco, usados sobre fondo claro. */ .tchip img.on-ink, .apps__it img.on-ink, .plan__feats img.on-ink, .cmp img.on-ink { filter: brightness(0); opacity: .82; } .tchip img.on-ink { height: 15px; width: auto; max-width: 84px; } .apps__it img.on-ink { height: 20px; width: auto; max-width: 96px; } /* Wordmarks a color con proporción propia (cPanel, LiteSpeed, Woo). */ .tchip .product-logo--cpanel { width: 46px; height: 15px; } .tchip .product-logo--litespeed { width: 20px; height: 20px; } .tchip .product-logo--lscache { width: 20px; height: 20px; } .apps__it .product-logo--woo { width: 44px; height: 26px; } .bchip .product-logo--cpanel { width: calc(var(--bc) * .62); height: auto; } /* Sello del CMS en cada testimonio: dice sobre qué corre esa web. */ .quote footer .tchip { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--color-text-muted); white-space: nowrap; } .quote footer .tchip .logo-marca { --lm: 16px; } /* Encabezado de sección con logo delante (Por qué NVMe, etc.). */ .brand-heading .bchip { --bc: 40px; } /* ── 8 · Máscaras que no genera descargar-logos.mjs ────── Siluetas oficiales que viven en logos-servicios/hosting/. Se declaran aquí para no tocar la hoja autogenerada. ------------------------------------------------------- */ .logo-phpmyadmin { -webkit-mask-image: url("logos-servicios/hosting/phpmyadmin.svg"); mask-image: url("logos-servicios/hosting/phpmyadmin.svg"); } .logo-roundcube { -webkit-mask-image: url("logos-servicios/hosting/roundcube.svg"); mask-image: url("logos-servicios/hosting/roundcube.svg"); } .mk-phpmyadmin { --mk: #6C78AF; --mk-soft: rgba(108,120,175,.13); } .mk-roundcube { --mk: #1A93CE; --mk-soft: rgba(26,147,206,.12); } /* ── 9 · Convivencia con el kit anterior ───────────────── El kit ya pintaba .ico en navy y .brand-heading .logo-marca como wordmark. Aquí se ceden esos casos al chip de marca. ------------------------------------------------------- */ /* El chip gana al cuadrado navy del bento y del explorador. */ .bento .ico.bchip, .explore .ico.bchip, .explore > button.on .ico.bchip { background: var(--mk-soft, rgba(0,17,68,.06)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mk, #001144) 18%, transparent); color: var(--mk, var(--buho-navy-950)); } /* Sobre la tarjeta activa (navy) el tinte se vuelve vidrio claro. */ .explore > button.on .ico.bchip, .bento .dark .ico.bchip { background: rgba(255,255,255,.13); box-shadow: inset 0 0 0 1px rgba(255,255,255,.20); } .explore > button.on .ico.bchip .logo-marca, .bento .dark .ico.bchip .logo-marca { color: #fff; } .explore > button.on .ico.bchip img { filter: brightness(0) invert(1); } /* En .brand-heading el logo suelto es wordmark; dentro del chip, no. */ .brand-heading .bchip .logo-marca { width: calc(var(--bc) * .54); height: calc(var(--bc) * .54); color: var(--mk, var(--buho-navy-950)); } .brand-heading .bchip .product-logo--cpanel { width: calc(var(--bc) * .64); height: auto; } /* Etiquetas de las barras comparativas: cabe el logo y el texto. */ .bars__row { grid-template-columns: 168px 1fr 76px; } .bars__lb .tchip .logo-marca { --lm: 19px; } @media (max-width: 900px) { .bars__row { grid-template-columns: 148px 1fr 64px; } } @media (max-width: 560px) { .bars__row { grid-template-columns: 1fr; } } /* Los logos de Simple Icons traen mucho detalle: piden algo más de cuerpo. */ .checks .logo-marca { --lm: 20px; } .plan__feats .logo-marca { --lm: 19px; } .tchip .logo-marca { --lm: 19px; } /* Rejilla de apps: que ningún nombre se corte. */ .apps { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); } .apps__it { align-items: center; min-height: 62px; } .apps__it > span { min-width: 0; } .apps__it b { overflow-wrap: anywhere; } .apps__it .logo-marca { --lm: 26px; width: 26px; height: 26px; } .apps__it .logo-woocommerce { width: 38px; height: 26px; } .apps__it .logo-mysql, .apps__it .logo-php { width: 34px; height: 26px; } /* ── 10 · Compensación del lienzo cuadrado ────────────── Las siluetas de Simple Icons vienen centradas en un lienzo 24×24 aunque su tinta sea ancha y baja. Con mask-size:contain el navegador ajusta el LIENZO, no la tinta, así que PHP o MySQL salían diminutos al lado de WordPress. Solución: la caja sigue siendo cuadrada, pero se agranda por 1/altura-de-tinta para que todas las marcas tengan la misma altura óptica. Factores medidos con getBBox() sobre cada SVG. ------------------------------------------------------- */ .logo-marca { --lmb: 1; width: calc(var(--lm, 22px) * var(--lmb)); height: calc(var(--lm, 22px) * var(--lmb)); } .logo-marca.logo-php { --lmb: 1.90; } /* tinta 24 × 12.6 */ .logo-marca.logo-mysql { --lmb: 1.47; } /* tinta 24 × 16.3 */ .logo-marca.logo-phpmyadmin { --lmb: 1.41; } /* tinta 24 × 17.1 */ .logo-marca.logo-prestashop { --lmb: 1.09; } .logo-marca.logo-litespeedwebservericon { --lmb: 1.06; } /* apache, drupal, joomla, laravel, letsencrypt, moodle, whatsapp, wordpress: su tinta ya llena el alto del lienzo. */ /* cPanel (4.7:1), Woo (3.9:1) y el wordmark de LiteSpeed no caben en este modelo: para ellos se usa el archivo oficial como imagen, con .brandimg, que sí conserva la proporción real. */ /* ── 11 · Logotipo oficial como imagen ─────────────────── width:auto + height fija = proporción exacta del archivo. ------------------------------------------------------- */ .brandimg { display: inline-block; width: auto; height: var(--bh, 17px); object-fit: contain; flex: 0 0 auto; vertical-align: middle; } .brandimg--ink { filter: brightness(0); opacity: .86; } /* blanco → tinta */ .brandimg--light { filter: brightness(0) invert(1); } /* oscuro → blanco */ .specband__track .brandimg { --bh: 20px; } .tchip .brandimg { --bh: 16px; } .cmp .tchip .brandimg { --bh: 17px; } .plan__feats .brandimg, .checks .brandimg { --bh: 15px; margin-top: 2px; } .bchip .brandimg { --bh: calc(var(--bc) * .42); } .brand-heading .bchip .brandimg { --bh: calc(var(--bc) * .42); } .apps__it .brandimg { --bh: 19px; } .quote footer .tchip .brandimg { --bh: 15px; } .mock-product .brandimg { --bh: 11px; } .fpill .brandimg { --bh: 15px; } /* ── 12 · Columna de iconos alineada en las listas ─────── Cada silueta ocupa un ancho distinto; si va suelta, el texto de cada viñeta arranca en una x diferente. ------------------------------------------------------- */ .checks .logo-marca, .plan__feats .logo-marca, .closer__fine .logo-marca { flex: 0 0 auto; -webkit-mask-position: center; mask-position: center; margin-top: 1px; } .checks li, .plan__feats li { align-items: center; } .checks .logo-marca, .plan__feats .logo-marca { --lm: 17px; } .checks .brandimg, .plan__feats .brandimg { margin-top: 0; } .guar .logo-marca { --lm: 21px; } .tchip .logo-marca { --lm: 17px; } .bars__lb .tchip .logo-marca { --lm: 17px; } .quote footer .tchip .logo-marca { --lm: 16px; } .apps__it .logo-marca { --lm: 25px; } .trustlogos .logo-marca { --lm: 24px; } .bchip .logo-marca { --lm: calc(var(--bc) * .48); } .brand-heading .bchip .logo-marca { --lm: calc(var(--bc) * .48); } .explore .ico.bchip .logo-marca, .bento .ico.bchip .logo-marca { --lm: calc(var(--bc) * .48); } /* Etiquetas de las barras comparativas: cabe el logo y el texto. */ .bars__row { grid-template-columns: 172px 1fr 76px; } @media (max-width: 900px) { .bars__row { grid-template-columns: 150px 1fr 64px; } } @media (max-width: 560px) { .bars__row { grid-template-columns: 1fr; } } /* Rejilla de apps: que ningún nombre se parta en dos líneas. */ .apps { grid-template-columns: repeat(auto-fill, minmax(174px, 1fr)); } .apps__it { align-items: center; min-height: 64px; } .apps__it > span { min-width: 0; flex: 1 1 auto; } .apps__it b { overflow-wrap: normal; } .apps__it--mark { flex-direction: column; align-items: flex-start; justify-content: center; gap: 7px; } .apps__it--mark .brandimg { --bh: 20px; } .apps__it--mark small { display: block; font-size: 11.5px; color: var(--color-text-muted); font-weight: 500; } /* El sello del testimonio y la cinta superior. */ .quote footer { flex-wrap: wrap; row-gap: 10px; } .quote footer .tchip--solo { gap: 0; } .specband__track .logo-marca { --lm: 21px; } /* Softaculous es caligráfico: pide algo más de cuerpo que un icono. */ .specband__track .logo-oficial-img--softaculous { height: 20px; width: auto; max-width: none; } .tchip img.on-ink { height: 21px; width: auto; max-width: 112px; opacity: .9; } /* ── 15 · Móvil ──────────────────────────────────────────*/ @media (max-width: 640px) { .cmp .tchip { flex-wrap: wrap; gap: 5px; } .cmp .tchip .brandimg { --bh: 14px; } .cmp .tchip .logo-marca { --lm: 14px; } .cmp .tchip img.on-ink { height: 16px; } .quote footer .tchip { margin-left: 0; } .apps__it--mark .brandimg { --bh: 18px; } } .specband__track .logo-oficial-img--softaculous { height: 22px; } /* ========================================================= 16 · UNA SOLA LÍNEA DE ICONO --------------------------------------------------------- La rejilla del instalador (.apps) fijó el criterio: pastilla redondeada, logotipo real, mismo alto óptico. Todo lo demás se alinea a estas dos medidas y no se inventa una tercera. --ico-tile logotipo dentro de una pastilla o tarjeta --ico-inline logotipo en línea con el texto ========================================================= */ :root { --ico-tile: 26px; --ico-inline: 18px; --chip: 48px; } /* ── Pastilla: una sola forma, un solo tamaño ─────────────*/ .bchip { --bc: var(--chip); border-radius: 15px; } .bchip--lg, .bchip--sm { --bc: var(--chip); } .bchip .logo-marca, .bento .ico.bchip .logo-marca, .explore .ico.bchip .logo-marca, .brand-heading .bchip .logo-marca { --lm: var(--ico-tile); } .bchip .brandimg, .brand-heading .bchip .brandimg { --bh: calc(var(--ico-tile) * .74); } .bchip .ti { font-size: calc(var(--ico-tile) * .92); } .apps__it .logo-marca { --lm: var(--ico-tile); } .apps__it .brandimg { --bh: calc(var(--ico-tile) * .74); } /* ── En línea con texto: una sola medida ──────────────────*/ .checks .logo-marca, .plan__feats .logo-marca, .tchip .logo-marca, .closer__fine .logo-marca, .quote footer .tchip .logo-marca, .bars__lb .tchip .logo-marca { --lm: var(--ico-inline); } .checks .brandimg, .plan__feats .brandimg, .tchip .brandimg, .quote footer .tchip .brandimg { --bh: calc(var(--ico-inline) * .82); } .checks li i.ti, .plan__feats li i.ti { font-size: var(--ico-inline); } /* ── Garantías: mismo lenguaje que el instalador ──────────*/ .grid-guar { gap: 14px; } .guar { gap: 15px; align-items: center; border-radius: 16px; padding: 18px 20px; } .guar .bchip .ti { color: var(--mk, var(--buho-navy-950)); } /* ========================================================= 18 · CINTA — solo logotipos, sin una sola letra ========================================================= */ .specband--logos { padding: 22px 0; } .specband--logos .specband__track { gap: 56px; } .specband--logos .specband__track > span { display: inline-flex; align-items: center; height: 30px; opacity: .88; transition: opacity var(--dur-base, .2s) var(--ease-out, ease); } /* sin realce al pasar el ratón: la marquesina no es interactiva */ .specband--logos .logo-marca { --lm: 30px; color: #fff; width: calc(var(--lm) * var(--lmb)); height: calc(var(--lm) * var(--lmb)); } .specband--logos .brandimg { --bh: 26px; } @media (max-width: 700px) { .specband--logos .specband__track { gap: 38px; } .specband--logos .specband__track > span { height: 26px; } .specband--logos .logo-marca { --lm: 26px; } .specband--logos .brandimg { --bh: 22px; } } /* ========================================================= 19 · MAQUETA DEL INSTALADOR (card oscuro del bento) Reemplaza el diagrama animado: enseña la pantalla real. ========================================================= */ .install { margin-top: auto; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; overflow: hidden; } .install__bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: rgba(0,17,68,.45); border-bottom: 1px solid rgba(255,255,255,.08); } .install__dots { display: inline-flex; gap: 5px; } .install__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.22); } .install__url { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.55); } .install__body { padding: 16px; display: flex; flex-direction: column; gap: 14px; } .install__app { display: flex; align-items: center; gap: 13px; } .install__logo { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: rgba(255,255,255,.12); flex-shrink: 0; } .install__logo .logo-marca { --lm: var(--ico-tile); color: #fff; } .install__meta { flex: 1 1 auto; min-width: 0; } .install__meta b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: #fff; } .install__meta small { display: block; margin-top: 2px; font-size: 11.5px; color: rgba(255,255,255,.55); } .install__btn { flex-shrink: 0; background: var(--motif-a, var(--buho-pink-600)); color: #fff; font-size: 12.5px; font-weight: 700; padding: 9px 16px; border-radius: 999px; } .install__steps { display: flex; flex-direction: column; gap: 7px; } .install__steps span { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255,255,255,.72); } .install__steps .ti { font-size: 15px; color: #34D399; } .install__done { display: flex; align-items: baseline; gap: 10px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.08); } .install__time { font-family: var(--font-mono); font-size: 22px; font-weight: 600; letter-spacing: -.03em; color: #fff; } .install__lb { font-size: 11.5px; color: rgba(255,255,255,.55); line-height: 1.4; } @media (max-width: 560px) { .install__app { flex-wrap: wrap; } .install__btn { order: 3; width: 100%; text-align: center; } } /* ── 20 · Equilibrio óptico de la cinta ────────────────── Un wordmark ancho pesa más que un icono a la misma altura, así que los wordmarks van algo más bajos para que la fila se lea como un solo bloque. ------------------------------------------------------- */ .specband--logos .logo-marca { --lm: 28px; } .specband--logos .brandimg { --bh: 19px; } .specband--logos .logo-php, .specband--logos .logo-mysql, .specband--logos .logo-phpmyadmin { --lm: 24px; } @media (max-width: 700px) { .specband--logos .logo-marca { --lm: 24px; } .specband--logos .brandimg { --bh: 16px; } } /* El hero no recorta sus tarjetas flotantes. */ .phero__vis--art { position: relative; } .phero__vis--art .fpill, .phero__vis--art .fcard { z-index: 3; } @media (max-width: 900px) { .phero__vis--art .fpill { left: 0 !important; top: 0 !important; } .phero__vis--art .fcard { right: 0 !important; bottom: 0 !important; } } /* .pupila devuelve position:relative y sacaba la tarjeta del flujo absoluto: dentro del hero mandan las coordenadas de la ilustración. */ .hero-art .fpill, .hero-art .fcard { position: absolute; } @media (max-width: 900px) { .hero-art .fpill { left: 0 !important; top: -12px !important; } .hero-art .fcard { right: 0 !important; bottom: -12px !important; } } /* ── 21 · Logotipo suelto en el bento ──────────────────── Cuando la tarjeta lleva el logotipo de una marca, el logotipo se basta solo: sin pastilla, sin fondo, apoyado en una altura común para que los títulos sigan alineados. ------------------------------------------------------- */ .bento .ico.ico--bare { width: auto; height: 32px; background: none; box-shadow: none; border-radius: 0; display: inline-flex; align-items: center; padding: 0; } .bento .ico--bare .brandimg { --bh: 21px; } /* Webmail y cPanel: wordmarks anchos, van más bajos */ .bento .ico--bare .brandimg--buho { --bh: 30px; } .bento .ico--bare .logo-marca { --lm: 30px; } /* ========================================================= 22 · HERO · tarjeta con foto del equipo --------------------------------------------------------- La promesa de la página no es un diagrama: es que alguien mueve tu web y te avisa. Por eso el hero enseña personas, con los logos de lo que viene incluido encima de la foto. ========================================================= */ .phero__vis--card { display: block; } .hcard { position: relative; background: var(--buho-navy-950); border-radius: 26px; overflow: hidden; box-shadow: 0 34px 70px rgba(0, 17, 68, .22); animation: hfSlide 520ms var(--ease-out) both; } @media (prefers-reduced-motion: reduce) { .hcard { animation: none; } } .hcard__media { position: relative; } .hcard__media > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } /* La foto se funde con el navy del cuerpo: sin corte duro. */ .hcard__media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 38%; background: linear-gradient(to bottom, transparent, var(--buho-navy-950)); pointer-events: none; } /* Tres pastillas blancas: lo que viene incluido, sin decirlo. */ .hcard__logos { position: absolute; left: 20px; top: 20px; z-index: 2; display: inline-flex; gap: 10px; } .hcard__logos > span { width: 52px; height: 52px; border-radius: 16px; background: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(0, 17, 68, .28); } .hcard__logos .brandimg { --bh: 17px; } .hcard__logos .logo-marca { --lm: 27px; color: var(--buho-navy-950); } /* Aviso: lo que más pregunta quien va a migrar. Cuelga de la esquina superior derecha, por fuera de la tarjeta —dentro lo recortaba el `overflow: hidden` de `.hcard`— y respira como el resto de lo que flota en el sitio. */ .hcard__note { position: absolute; right: -16px; top: -18px; z-index: 4; max-width: 226px; background: #fff; border-radius: 16px; padding: 13px 16px; box-shadow: 0 18px 42px rgba(0, 17, 68, .22), 0 0 0 1px rgba(0, 17, 68, .05); animation: hfFloat 5.6s var(--ease-in-out, ease-in-out) infinite; } @media (prefers-reduced-motion: reduce) { .hcard__note { animation: none; } } /* Al pasar a una columna la tarjeta ocupa todo el ancho, así que el aviso deja de sobresalir: si no, se comería el margen lateral de la página. */ @media (max-width: 980px) { .hcard__note { right: 0; top: -14px; } } .hcard__note .k { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--color-text-muted); } .hcard__note .k .ti { font-size: 16px; color: #16A34A; } .hcard__note b { display: block; margin-top: 5px; font-size: 14.5px; font-weight: 800; line-height: 1.35; letter-spacing: -.01em; color: var(--buho-navy-950); } .hcard__pill { position: absolute; left: 20px; bottom: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 9px; background: rgba(0, 17, 68, .74); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(8px); border-radius: 999px; padding: 9px 16px; font: 700 11.5px/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: #fff; } .hcard__pill .logo-marca { --lm: 16px; color: #25D366; } .hcard__body { padding: 4px 30px 32px; } .hcard__body h2 { margin: 0; font-size: clamp(26px, 2.5vw, 34px); font-weight: 800; letter-spacing: -.025em; line-height: 1.12; color: #fff; } .hcard__body p { margin: 14px 0 0; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, .74); } /* ── Rostros bajo las cifras del hero ────────────────────*/ .hpeople { display: flex; align-items: center; gap: 14px; margin-top: 26px; } .hpeople__faces { display: inline-flex; flex-shrink: 0; } .hpeople__faces img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2.5px solid #fff; box-shadow: 0 4px 12px rgba(0, 17, 68, .16); } .hpeople__faces img + img { margin-left: -13px; } .hpeople > span:last-child { font-size: 14px; line-height: 1.5; color: var(--color-text-muted); } .hpeople b { color: var(--color-text); } @media (max-width: 760px) { .hcard__note { max-width: 184px; right: -10px; top: -14px; padding: 11px 13px; } .hcard__note b { font-size: 13px; } .hcard__logos { left: 14px; top: 14px; gap: 8px; } .hcard__logos > span { width: 44px; height: 44px; border-radius: 14px; } .hcard__pill { left: 14px; bottom: 12px; font-size: 10px; padding: 8px 13px; } .hcard__body { padding: 4px 20px 24px; } } /* ── Kingston, el disco que hay debajo ───────────────────*/ .logo-kingstontechnology { -webkit-mask-image: url("logos-servicios/hosting/kingston.svg"); mask-image: url("logos-servicios/hosting/kingston.svg"); } .mk-kingston { --mk: #C8102E; --mk-soft: rgba(200,16,46,.10); } .logo-marca.logo-kingstontechnology { width: calc(var(--lm, 22px) * .72); } /* ── 23 · Remates del hero tras revisión ─────────────────*/ /* Los wordmarks no caben a la altura de un icono: mandan por ancho. */ .hcard__logos .brandimg { width: 30px; height: auto; --bh: auto; } .hcard__logos .brandimg[src*="litespeed"] { width: 27px; } /* El aviso bajaba al 50 % para no taparle la cara a nadie en la foto. Ya no hace falta: desde §24 cuelga por fuera de la esquina, donde no hay foto que tapar. */ /* ── 24 · La tarjeta del hero en pantalla estrecha ─────── A 390 px el aviso y la pastilla se pisaban encima de la foto. Ahí dejan de flotar y pasan a apilarse debajo. ------------------------------------------------------- */ @media (max-width: 640px) { .hcard__media { background: var(--buho-navy-950); padding-bottom: 4px; } .hcard__media::after { display: none; } .hcard__note { position: static; max-width: none; margin: 14px 0 0; animation: none; } .hcard__note b { font-size: 14.5px; } .hcard__pill { position: static; margin: 12px 0 0 16px; } .hcard__body { padding-top: 18px; } } /* ========================================================= 25 · EXPLORADOR DE SEGURIDAD · logotipos sueltos --------------------------------------------------------- Las cuatro tarjetas llevan el logotipo real de lo que hay detrás, sin pastilla. Dos son símbolos (candado SSL, escudo ModSecurity) y dos son wordmarks (JetBackup, Imunify360): un wordmark ancho pesa más, así que va más bajo. Misma altura de caja para que los títulos queden alineados. ========================================================= */ .explore .ico.ico--bare { width: auto; height: 36px; background: none !important; box-shadow: none !important; border-radius: 0; display: inline-flex; align-items: center; padding: 0; } .explore .ico--bare .brandimg { --bh: 21px; } /* wordmarks */ .explore .ico--bare .brandimg--sym { --bh: 34px; } /* símbolos */ /* Tarjeta seleccionada: el fondo es navy, así que la tinta oscura de Imunify360 y del escudo desaparecería. Ahí los logotipos pasan a blanco, como estado de selección. */ .explore > button.on .ico--bare .brandimg { filter: brightness(0) invert(1); } /* …salvo los que ya traen su color y se leen sobre el navy. El candado SSL (verde + gris) y el imagotipo de Cloudflare (nube naranja) no necesitan el blanqueo: forzarlos borraría justo lo que se pidió, que es el color original. Para Cloudflare, además, la palabra es negra sobre claro y blanca sobre navy, así que van dos archivos y se alterna cuál se muestra —es la versión reversa de la marca, no un recoloreado nuestro—. */ .explore .ico--bare .brandimg--nofilter, .explore > button.on .ico--bare .brandimg--nofilter { filter: none; } .explore .ico--bare .brandimg--ondark { display: none; } .explore > button.on .ico--bare .brandimg--onlight { display: none; } .explore > button.on .ico--bare .brandimg--ondark { display: inline-block; } /* Los cuatro son imagotipos —símbolo + palabra— con formas muy distintas: un candado casi cuadrado (1.88 : 1), dos lockups apaisados (4.66 y 6.74 : 1) y una palabra sola (6.70 : 1). A la misma altura de caja no pesan igual, y con 21 px para todos JetBackup dominaba la fila. Ninguna de las dos medidas habituales sirve sola: · masa de caja √(ancho × alto) deja a JetBackup en 53.5 contra 43.9 de Cloudflare, porque su palabra ocupa el lienzo entero mientras que en los otros el alto lo marca un símbolo pequeño y la palabra va por debajo; · masa de cobertura √(píxeles con tinta) se va al otro extremo: Imunify360, que es de trazo fino, pediría 33 px de caja y se comería a los demás. Se igualan por la media geométrica de las dos, que es lo que el ojo acaba comparando —bloque y densidad a la vez—. Medido sobre los archivos reales, rasterizados a 600 px: archivo k(caja) k(tinta) k(mezcla) caja ssl-encryption 1.3705 0.9216 1.1239 32.5 px jetbackup 2.5500 1.6695 2.0632 17.8 px imunify360 2.1525 0.8972 1.3893 26.4 px cloudflare 2.5847 1.4394 1.9288 19.0 px `caja = 36.65 / k(mezcla)`. El ancla es Cloudflare a 19 px, elegida para que la fila conserve la presencia que ya tenía. Los cuatro van con selector de archivo: los cuatro ficheros solo se usan aquí. */ .explore .ico--bare .brandimg[src$="ssl-encryption.png"] { --bh: 32.5px; } .explore .ico--bare .brandimg[src$="jetbackup.svg"] { --bh: 17.8px; } .explore .ico--bare .brandimg[src$="imunify360-color.png"] { --bh: 26.4px; } .explore .ico--bare .brandimg[src*="cloudflare-color"] { --bh: 19px; } @media (max-width: 700px) { .explore .ico.ico--bare { height: 32px; } .explore .ico--bare .brandimg { --bh: 18px; } .explore .ico--bare .brandimg--sym { --bh: 30px; } /* Misma proporción, la caja del icono baja de 36 a 32 px. */ .explore .ico--bare .brandimg[src$="ssl-encryption.png"] { --bh: 28px; } .explore .ico--bare .brandimg[src$="jetbackup.svg"] { --bh: 15.3px; } .explore .ico--bare .brandimg[src$="imunify360-color.png"] { --bh: 22.7px; } .explore .ico--bare .brandimg[src*="cloudflare-color"] { --bh: 16.3px; } } /* ── 26 · Cloudflare en la cuarta tarjeta ──────────────── La nube es ancha y baja (tinta 24 × 10.85 en el lienzo de 24), así que necesita el mismo tratamiento que PHP: caja cuadrada agrandada para igualar la altura óptica. ------------------------------------------------------- */ .logo-marca.logo-cloudflare { --lmb: 2.21; } .explore .ico--bare .logo-marca { --lm: 20px; color: var(--mk, var(--buho-navy-950)); } /* En la tarjeta seleccionada, también las máscaras van a blanco. */ .explore > button.on .ico--bare .logo-marca { color: #fff; } @media (max-width: 700px) { .explore .ico--bare .logo-marca { --lm: 17px; } } /* ========================================================= 27 · MIGRACIÓN · cuatro escenas tranquilas --------------------------------------------------------- Antes eran cuatro diagramas SVG animados: mucho ruido para una idea sencilla por paso. Ahora cada paso es una tarjeta con el dato justo, en la misma línea que el instalador. ========================================================= */ .mig { background: #fff; border: 1px solid rgba(0, 17, 68, .07); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 46px rgba(0, 17, 68, .07); } .mig__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 20px; border-bottom: 1px solid rgba(0, 17, 68, .06); } .mig__lb { font: 700 10.5px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); } .mig__top .brandimg { --bh: 15px; } .mig__tag { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; color: var(--color-text-muted); } .mig__tag--ok { color: #15803D; } .mig__tag .ti { font-size: 14px; } .mig__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--motif-a, var(--buho-pink-600)); animation: migPulse 1.8s ease-in-out infinite; } @keyframes migPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } @media (prefers-reduced-motion: reduce) { .mig__dot { animation: none; } } /* Filas de dato ------------------------------------------ */ .mig__rows { margin: 0; padding: 6px 20px; } .mig__rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(0, 17, 68, .05); } .mig__rows > div:last-child { border-bottom: 0; } .mig__rows dt { font-size: 13.5px; color: var(--color-text-muted); } .mig__rows dd { margin: 0; font-size: 13.5px; font-weight: 600; text-align: right; } .mig__rows dd.ok { display: inline-flex; align-items: center; gap: 6px; color: #15803D; } .mig__rows dd.ok .ti { font-size: 16px; } /* Lista de lo que se copia -------------------------------- */ .mig__list { list-style: none; margin: 0; padding: 6px 20px; } .mig__list li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(0, 17, 68, .05); font-size: 13.5px; } .mig__list li:last-child { border-bottom: 0; } .mig__list span { flex: 1 1 auto; color: var(--color-text-muted); } .mig__list b { font-size: 13px; font-weight: 600; } .mig__list .ti { font-size: 17px; color: #16A34A; flex-shrink: 0; } /* Las dos direcciones conviviendo -------------------------- */ .mig__pair { padding: 16px 20px 4px; display: grid; gap: 11px; } .mig__addr { padding: 15px 17px; border: 1px solid rgba(0, 17, 68, .08); border-radius: 14px; } .mig__addr b { display: block; margin: 7px 0 5px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; } .mig__addr .sub { display: block; font-size: 12.5px; line-height: 1.5; color: var(--color-text-muted); } .mig__addr--new { border-color: rgba(3, 48, 204, .22); background: rgba(3, 48, 204, .045); } .mig__addr--new b { color: var(--buho-blue-600); } .mig__addr .st { display: inline-flex; align-items: center; gap: 7px; font: 700 10px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; } .mig__addr .st i { width: 7px; height: 7px; border-radius: 50%; } .st--live { color: #15803D; } .st--live i { background: #16A34A; animation: migPulse 2.2s ease-in-out infinite; } .st--new { color: var(--buho-blue-600); } .st--new i { background: var(--buho-blue-600); } @media (prefers-reduced-motion: reduce) { .st--live i { animation: none; } } /* Cambio de servidores de nombre --------------------------- */ .mig__swap { padding: 20px 20px 6px; text-align: center; } .mig__swap > div { padding: 12px 14px; border-radius: 12px; } .mig__swap span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); } .mig__swap b { display: block; margin-top: 5px; font-size: 14px; font-weight: 600; } .mig__swap .was { background: rgba(0, 17, 68, .04); } .mig__swap .was b { color: var(--color-text-muted); text-decoration: line-through; text-decoration-thickness: 1px; } .mig__swap .now { background: rgba(3, 48, 204, .07); } .mig__swap .now b { color: var(--buho-blue-600); } .mig__swap > .ti { display: block; margin: 8px 0; font-size: 19px; color: rgba(0, 17, 68, .28); } .mig__zero { display: flex; align-items: center; gap: 16px; margin: 14px 20px 20px; padding: 16px 18px; background: var(--buho-cream, #F7F4EF); border-radius: 14px; } .mig__zero .n { font-family: var(--font-mono); font-size: 34px; font-weight: 600; letter-spacing: -.04em; line-height: 1; background: linear-gradient(120deg, var(--buho-pink-600, #FF006F), var(--buho-blue-600, #0330CC)); -webkit-background-clip: text; background-clip: text; color: transparent; } .mig__zero .l { font-size: 12.5px; line-height: 1.5; color: var(--color-text-muted); } /* Pie de cada escena --------------------------------------- */ .mig__foot { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 14px 20px 17px; border-top: 1px solid rgba(0, 17, 68, .06); font-size: 12.5px; line-height: 1.55; color: var(--color-text-muted); } .mig__foot .ti { font-size: 16px; color: var(--buho-blue-600); flex-shrink: 0; margin-top: 1px; } .mig__foot b { color: var(--color-text); font-weight: 700; } @media (max-width: 700px) { .mig__top, .mig__rows, .mig__list, .mig__foot { padding-left: 16px; padding-right: 16px; } .mig__zero { margin: 12px 16px 16px; } .mig__zero .n { font-size: 28px; } } /* ── 28 · Garantías · marca suelta, sin pastilla ───────── Mismo criterio que el bento y el explorador: donde hay marca real va la marca; donde no la hay, el icono a secas. El icono se alinea con el título, no con el centro del párrafo, que era lo que lo hacía flotar. ------------------------------------------------------- */ .guar { align-items: flex-start; gap: 14px; } .guar__ic { flex: 0 0 auto; height: 30px; display: inline-flex; align-items: center; margin-top: 1px; } .guar__ic .ti { font-size: 27px; color: var(--t-ink, var(--buho-blue-600)); line-height: 1; } .guar__ic .logo-marca { --lm: 28px; color: var(--mk, var(--buho-navy-950)); } .guar__ic img { height: 30px; width: auto; display: block; } @media (max-width: 700px) { .guar__ic { height: 26px; } .guar__ic .ti { font-size: 23px; } .guar__ic .logo-marca { --lm: 24px; } .guar__ic img { height: 26px; } } /* ========================================================= 29 · GOOGLE WORKSPACE --------------------------------------------------------- Los iconos de Google son un set diseñado en conjunto: ya vienen equilibrados entre sí por área, no por altura (el sobre de Gmail es ancho y bajo, el de Docs alto y estrecho). Por eso aquí NO se aplica la compensación de lienzo: todos a la misma caja cuadrada, como los presenta Google. ========================================================= */ .specband--gw .specband__track { gap: 46px; } .specband--gw .specband__track > span { height: 34px; } .specband--gw img { width: 34px; height: 34px; object-fit: contain; display: block; } /* El conmutador de aplicaciones de la maqueta del hero. */ .mock-apps { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; } .mock-apps img { width: 20px; height: 20px; object-fit: contain; display: block; } .mock-safe { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 0 20px 20px; font-size: 12px; line-height: 1.5; color: var(--color-text-muted); } .mock-safe .ti { font-size: 15px; color: var(--buho-blue-600); flex-shrink: 0; margin-top: 1px; } @media (max-width: 700px) { .specband--gw .specband__track { gap: 32px; } .specband--gw .specband__track > span { height: 28px; } .specband--gw img { width: 28px; height: 28px; } .mock-apps { display: none; } } /* ── 30 · Iconos de Google en tarjetas y rejilla ─────────*/ .gw-ico { width: 30px; height: 30px; object-fit: contain; display: block; flex-shrink: 0; } .gw-ico--sm { width: 20px; height: 20px; display: inline-block; vertical-align: -4px; } .gw-ico--xs { width: 15px; height: 15px; display: inline-block; vertical-align: -2px; } .apps--gw .apps__it { gap: 13px; } .apps--gw .apps__it small { line-height: 1.35; } /* ── 31 · Gemini · maqueta de «ayúdame a escribir» ───────*/ .gem { background: #fff; border: 1px solid rgba(0, 17, 68, .07); border-radius: 22px; overflow: hidden; box-shadow: 0 24px 54px rgba(0, 17, 68, .08); } .gem__bar { display: flex; align-items: center; gap: 11px; padding: 14px 18px; border-bottom: 1px solid rgba(0, 17, 68, .06); font-size: 13px; font-weight: 700; } .gem__chip { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--buho-navy-950); background: linear-gradient(120deg, rgba(66,133,244,.14), rgba(217,48,37,.10) 55%, rgba(251,188,4,.14)); box-shadow: inset 0 0 0 1px rgba(0, 17, 68, .07); } .gem__body { padding: 18px; } .gem__ask { margin: 0; padding: 13px 15px; background: var(--buho-cream, #F7F4EF); border-radius: 13px; font-size: 13.5px; line-height: 1.5; color: var(--color-text-muted); } .gem__out { margin-top: 14px; padding: 16px; border: 1px solid rgba(0, 17, 68, .08); border-radius: 13px; } .gem__out b { display: block; font-size: 14px; margin-bottom: 11px; } .gem__out span { display: block; height: 9px; border-radius: 5px; background: rgba(0, 17, 68, .075); margin-bottom: 8px; } .gem__out span:last-child { margin-bottom: 0; } .gem__acts { display: flex; gap: 9px; margin-top: 14px; } .gem__acts span { padding: 9px 17px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--color-text-muted); box-shadow: inset 0 0 0 1px rgba(0, 17, 68, .1); } .gem__acts .on { background: var(--buho-navy-950); color: #fff; box-shadow: none; } /* ── 32 · Escalera de espacio por plan ───────────────────*/ .gwbars { list-style: none; margin: 0; padding: 14px 20px 4px; } .gwbars li { display: grid; grid-template-columns: 78px 1fr 58px; gap: 12px; align-items: center; padding: 9px 0; } .gwbars .pl { font-size: 13px; font-weight: 700; } .gwbars .tr { height: 10px; border-radius: 999px; background: rgba(0, 17, 68, .07); overflow: hidden; } .gwbars .fl { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--buho-pink-600, #FF006F), var(--buho-blue-600, #0330CC)); } .gwbars b { font-size: 12.5px; font-weight: 600; text-align: right; } /* ── 33 · La tarjeta .mig sobre fondo navy ───────────────*/ .mig--dark { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .13); box-shadow: none; } .mig--dark .mig__top, .mig--dark .mig__list li { border-color: rgba(255, 255, 255, .09); } .mig--dark .mig__lb, .mig--dark .mig__list span, .mig--dark .mig__foot { color: rgba(255, 255, 255, .66); } .mig--dark .mig__list b { color: #fff; } .mig--dark .mig__foot { border-color: rgba(255, 255, 255, .09); } .mig--dark .mig__foot b { color: #fff; } .mig--dark .mig__foot .ti { color: #7FB2E5; } .mig--dark .mig__list .gw-ico { margin-right: 2px; } /* El explorador de esta página también lleva el logotipo suelto. */ .explore .ico--bare .gw-ico { width: 30px; height: 30px; } /* Los nombres de las apps de Google necesitan algo más de ancho. */ .apps--gw { grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); } .apps--gw .apps__it { min-height: 72px; align-items: flex-start; } .apps--gw .apps__it > span { padding-top: 2px; } @media (max-width: 700px) { .apps--gw { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } } /* ========================================================= 34 · HERO DE WORKSPACE · el panel de Gemini flotando --------------------------------------------------------- Calcado del hero de workspace.google.com: nada de tarjeta contenedora, los elementos flotan a distintas alturas sobre el fondo. El panel de Gemini manda; alrededor orbitan el logo de Gmail, un rostro y la pregunta escrita. ========================================================= */ .phero__vis--float { display: flex; align-items: center; justify-content: center; } .gwhero { position: relative; width: 100%; max-width: 460px; padding: 58px 0 92px; animation: hfSlide 520ms var(--ease-out) both; } @media (prefers-reduced-motion: reduce) { .gwhero { animation: none; } } /* El destello, arriba del panel y centrado. */ .gwhero__spark { position: absolute; left: 50%; top: 0; z-index: 3; transform: translateX(-50%); width: 54px; height: 54px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 12px 28px rgba(0, 17, 68, .14); } .gwhero__spark img { width: 30px; height: 30px; display: block; } /* El panel: lo único con borde, como en la referencia. */ .gwhero__panel { position: relative; z-index: 2; background: #fff; border: 1px solid rgba(0, 17, 68, .09); border-radius: 18px; padding: 20px 22px 22px; box-shadow: 0 26px 60px rgba(0, 17, 68, .12); } .gwhero__brand { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 700; color: var(--color-text-muted); } .gwhero__brand img { width: 17px; height: 17px; display: block; } .gwhero__hi { margin: 15px 0 18px; font-size: 19px; line-height: 1.35; letter-spacing: -.015em; color: var(--color-text-muted); } .gwhero__hi b { display: block; font-weight: 800; color: var(--buho-blue-600); } .gwhero__sug { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .gwhero__sug li { display: flex; align-items: center; gap: 12px; padding: 11px 13px; background: rgba(3, 48, 204, .045); border-radius: 11px; } .gwhero__sug li:nth-child(2) { opacity: .78; } .gwhero__sug li:nth-child(3) { opacity: .56; } .gwhero__sug .ti { font-size: 19px; color: var(--buho-navy-950); flex-shrink: 0; } .gwhero__sug b { display: block; font-size: 13px; font-weight: 700; letter-spacing: -.01em; } .gwhero__sug small { display: block; margin-top: 1px; font-size: 12px; color: var(--color-text-muted); } /* Piezas que orbitan el panel. */ .gwhero__chip { position: absolute; z-index: 4; width: 52px; height: 52px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 14px 30px rgba(0, 17, 68, .16); } .gwhero__chip img { width: 27px; height: 27px; display: block; } .gwhero__chip--gmail { left: -30px; top: 76px; animation: hfFloat 5.4s ease-in-out infinite; } .gwhero__chip--drive { right: -26px; top: 42px; animation: hfFloat 6.2s ease-in-out infinite .6s; } .gwhero__face { position: absolute; z-index: 4; right: -34px; top: 190px; width: 62px; height: 62px; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: 0 16px 34px rgba(0, 17, 68, .2); animation: hfFloat 5.8s ease-in-out infinite .3s; } .gwhero__face img { width: 100%; height: 100%; object-fit: cover; display: block; } /* La pregunta escrita, debajo y desplazada. */ .gwhero__ask { position: absolute; z-index: 5; left: 26px; right: -14px; bottom: 22px; background: #fff; border: 1px solid rgba(0, 17, 68, .14); border-radius: 13px; padding: 15px 18px; font-size: 14.5px; letter-spacing: -.01em; box-shadow: 0 18px 40px rgba(0, 17, 68, .14); } .gwhero__caret { display: inline-block; width: 1.5px; height: 16px; background: var(--buho-navy-950); vertical-align: -3px; margin-left: 3px; animation: gwCaret 1.05s steps(1) infinite; } @keyframes gwCaret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .gwhero__caret, .gwhero__chip, .gwhero__face { animation: none; } } .gwhero__dom { position: absolute; z-index: 5; left: 0; bottom: -14px; background: var(--buho-navy-950); color: #fff; border-radius: 999px; padding: 8px 15px; font: 600 12.5px/1 var(--font-mono); box-shadow: 0 14px 30px rgba(0, 17, 68, .24); } @media (max-width: 900px) { .gwhero { max-width: 100%; padding: 48px 0 84px; } .gwhero__chip--gmail { left: -8px; } .gwhero__chip--drive { right: -6px; } .gwhero__face { right: -8px; } .gwhero__ask { left: 12px; right: 0; } .gwhero__dom { left: 0; bottom: -8px; } } @media (max-width: 460px) { .gwhero__chip, .gwhero__face { display: none; } .gwhero__ask { left: 0; right: 0; } } /* El chip de Gmail se apoya en la esquina del panel, no encima de la palabra «Gemini». */ .gwhero__chip--gmail { left: -40px; top: 58px; } @media (max-width: 900px) { .gwhero__chip--gmail { left: -14px; top: 46px; } } /* ── 35 · La cinta tiene que cerrar el bucle ───────────── hfMarquee desplaza -50%, así que el bucle solo es continuo si MEDIA cinta es más ancha que la pantalla. Con nueve iconos no llegaba ni a 1440 px y aparecía el hueco. La solución es el número de copias (ver el HTML), no el CSS; aquí solo se evita que el navegador reserve más de la cuenta. ------------------------------------------------------- */ .specband__track { will-change: transform; } /* ========================================================= 36 · CINTA · el nombre al pasar el ratón --------------------------------------------------------- La banda lleva overflow:hidden porque de eso vive el bucle, así que el globo no puede salirse: vive dentro, en el hueco que deja el relleno inferior. Por eso la cinta crece un poco. La animación ya se pausa al pasar el ratón, de modo que el nombre se queda quieto y se puede leer. ========================================================= */ .specband--logos { padding: 26px 0 40px; } .specband__track > .tip { position: relative; } .specband__track > .tip::after { content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 9px); transform: translate(-50%, -5px) scale(.9); transform-origin: top center; white-space: nowrap; padding: 6px 11px; border-radius: 8px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); backdrop-filter: blur(10px); font: 700 10.5px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: #fff; opacity: 0; pointer-events: none; transition: opacity 160ms ease, transform 260ms cubic-bezier(.34, 1.56, .64, 1); } .specband__track > .tip:hover::after, .specband__track > .tip:focus-visible::after { opacity: 1; transform: translate(-50%, 0) scale(1); } /* El icono se levanta y se enciende un poco. */ .specband__track > .tip > img, .specband__track > .tip > .logo-marca { transition: transform 260ms cubic-bezier(.34, 1.56, .64, 1), filter 200ms ease; } .specband__track > .tip:hover > img, .specband__track > .tip:hover > .logo-marca { transform: translateY(-3px) scale(1.12); filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45)); } .specband--logos .specband__track > .tip { opacity: 1; } @media (max-width: 700px) { .specband--logos { padding: 20px 0 20px; } .specband__track > .tip::after { display: none; } /* sin ratón no hay hover */ } @media (prefers-reduced-motion: reduce) { .specband__track > .tip::after, .specband__track > .tip > img, .specband__track > .tip > .logo-marca { transition: none; } .specband__track > .tip:hover > img, .specband__track > .tip:hover > .logo-marca { transform: none; } } /* El recuadro no debe encogerse mientras la frase se escribe. */ .gwhero__ask { min-height: 50px; display: flex; align-items: center; } .gwhero__ask [data-typewriter] { white-space: nowrap; } /* ── 37 · Fila de iconos dentro de una etiqueta ────────── El PNG compuesto de Google trae el fondo blanco pintado, y sobre navy se veía el recuadro. Se sustituye por los cinco SVG sueltos: sin fondo, y además nítidos a cualquier tamaño. ------------------------------------------------------- */ /* .techrow span (0,1,1) pinta TODAS las etiquetas, también las anidadas: de ahí el recuadro más claro detrás de los iconos. Sobre navy manda .sec--navy .techrow span (0,2,1), así que no basta .techrow .approw (0,2,0): hace falta llegar a (0,3,0). */ .approw, .techrow .approw, .sec--navy .techrow .approw { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; background: none; border: 0; padding: 0; box-shadow: none; border-radius: 0; } .approw img { width: 18px; height: 18px; object-fit: contain; display: block; } @media (max-width: 700px) { .approw img { width: 16px; height: 16px; } } /* ── 38 · Franja de confianza · un solo lenguaje ───────── Las 28 páginas que usan .trust llevan cuatro iconos de línea y ningún logotipo. Aquí se afina el trazo para que la fila se lea pareja: mismo cuerpo, mismo color, mismo aire. ------------------------------------------------------- */ .trust__it { gap: 10px; letter-spacing: -.005em; } .trust__it i { font-size: 20px; opacity: .92; } .trust__lb { opacity: .8; } /* ── 39 · Máscaras propias para la familia VPS ─────────── Simple Icons que el generador no trae. Mismo contrato que .logo-marca: lienzo 24×24, tinta plana, color por `color`. La compensación --lmb va aparte, medida sobre la tinta. ------------------------------------------------------- */ .logo-centosstream { -webkit-mask-image: url("logos-servicios/vps/centos-stream.svg"); mask-image: url("logos-servicios/vps/centos-stream.svg"); } .logo-python { -webkit-mask-image: url("logos-servicios/vps/python.svg"); mask-image: url("logos-servicios/vps/python.svg"); } .logo-mariadb { -webkit-mask-image: url("logos-servicios/vps/mariadb.svg"); mask-image: url("logos-servicios/vps/mariadb.svg"); } .logo-plesk { -webkit-mask-image: url("logos-servicios/vps/plesk.svg"); mask-image: url("logos-servicios/vps/plesk.svg"); } .logo-webmin { -webkit-mask-image: url("logos-servicios/vps/webmin.svg"); mask-image: url("logos-servicios/vps/webmin.svg"); } .logo-openjdk { -webkit-mask-image: url("logos-servicios/vps/openjdk.svg"); mask-image: url("logos-servicios/vps/openjdk.svg"); } .logo-windowsserver{ -webkit-mask-image: url("logos-servicios/vps/windows-server.svg");mask-image: url("logos-servicios/vps/windows-server.svg"); } /* Tinta más baja que el lienzo → se agranda para que la altura visible empate con la de un logo cuadrado. 24 / alto de tinta. */ .logo-marca.logo-docker { --lmb: 1.40; } /* tinta 24 × 17.2 */ .logo-marca.logo-mariadb { --lmb: 1.55; } /* tinta 24 × 15.5 */ .logo-marca.logo-plesk { --lmb: 2.41; } /* tinta 24 × 10.0 */ /* ── 40 · Barras de recursos sobre fondo oscuro ────────── Reemplaza el SVG animado del bento: mismo dato, sin ruido. ------------------------------------------------------- */ .dbars { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 11px; width: 100%; max-width: 340px; } .dbars li { display: grid; grid-template-columns: 52px 1fr 62px; gap: 12px; align-items: center; } .dbars .pl { font: 700 12.5px/1 var(--font-sans); color: rgba(255, 255, 255, .72); } .dbars .tr { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; } .dbars .fl { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--buho-pink-600, #FF006F), #7FB2E5); } .dbars b { font: 600 12px/1 var(--font-mono); color: #fff; text-align: right; white-space: nowrap; } /* .mig--dark: las filas dt/dd también viven sobre navy. */ .mig--dark .mig__rows > div { border-color: rgba(255, 255, 255, .09); } .mig--dark .mig__rows dt { color: rgba(255, 255, 255, .62); } .mig--dark .mig__rows dd { color: #fff; } .mig--dark .mig__rows dd.ok, .mig--dark .mig__tag--ok { color: #4ADE80; } .mig--dark .mig__tag { color: rgba(255, 255, 255, .7); } /* ── 41 · Tintes de marca de la familia VPS ────────────── Color oficial de cada marca, para .mk / .bchip / .tchip. ------------------------------------------------------- */ .mk-debian { --mk: #A80030; --mk-soft: rgba(168,0,48,.10); } .mk-almalinux { --mk: #0F4266; --mk-soft: rgba(15,66,102,.10); } .mk-rockylinux { --mk: #10B981; --mk-soft: rgba(16,185,129,.12); } .mk-centosstream { --mk: #262577; --mk-soft: rgba(38,37,119,.10); } .mk-windowsserver { --mk: #0078D4; --mk-soft: rgba(0,120,212,.11); } .mk-docker { --mk: #1D63ED; --mk-soft: rgba(29,99,237,.10); } .mk-nodejs { --mk: #5FA04E; --mk-soft: rgba(95,160,78,.12); } .mk-python { --mk: #3776AB; --mk-soft: rgba(55,118,171,.11); } .mk-mariadb { --mk: #003545; --mk-soft: rgba(0,53,69,.10); } .mk-nginx { --mk: #009639; --mk-soft: rgba(0,150,57,.11); } .mk-plesk { --mk: #52BBE6; --mk-soft: rgba(82,187,230,.14); } .mk-cyberpanel { --mk: #1B3A57; --mk-soft: rgba(27,58,87,.10); } .mk-webmin { --mk: #7D3F97; --mk-soft: rgba(125,63,151,.11); } .mk-openjdk { --mk: #C74634; --mk-soft: rgba(199,70,52,.11); } /* Sobre navy, los tintes oscuros se aclaran para que lean. */ .sec--navy .mk-debian, .phband .mk-debian, .closer .mk-debian { --mk: #F07CA0; } .sec--navy .mk-almalinux, .phband .mk-almalinux { --mk: #7FB2E5; } .sec--navy .mk-centosstream, .phband .mk-centosstream { --mk: #9C9BE8; } .sec--navy .mk-mariadb, .phband .mk-mariadb { --mk: #74C4D8; } .sec--navy .mk-cyberpanel, .phband .mk-cyberpanel { --mk: #8FB6D8; } .sec--navy .mk-webmin, .phband .mk-webmin { --mk: #C79BDA; } .bento .dark .mk-debian { --mk: #F49BB6; } /* ── 42 · La rejilla de apps respeta la compensación ───── `mask-size: contain` escala por el lado MENOR, así que fijar sólo el ancho no agranda la tinta: hay que crecer los dos lados. Sin esto, PHP, MySQL o Docker se ven la mitad de altos que WordPress en la misma fila. El tope de 1.45 evita que un logotipo muy alargado (WooCommerce) desborde la casilla. ------------------------------------------------------- */ .apps__it .logo-marca { width: calc(var(--ico-tile) * min(var(--lmb), 1.45)); height: calc(var(--ico-tile) * min(var(--lmb), 1.45)); } /* ── 43 · .guar: el mismo problema de especificidad ────── kit.css declara `.guar span { display:block }` (0,1,1), que alcanza también a los anidados: el `.text-mono` de una frase se convertía en bloque y partía «El mismo cupo del / E4 / al / S32» en cuatro líneas. Y aplastaba el propio .guar__ic. Se corrige subiendo la especificidad, no tocando kit.css. ------------------------------------------------------- */ .guar > .guar__ic { display: inline-flex; align-items: center; flex: 0 0 auto; height: 30px; margin-top: 1px; font-size: inherit; color: inherit; } .guar span span, .guar b span { display: inline; font-size: inherit; line-height: inherit; color: inherit; margin-top: 0; } .guar span .sr-only { display: block; } @media (max-width: 700px) { .guar > .guar__ic { height: 26px; } } /* ── 44 · Buscador dentro de la tarjeta de foto ────────── El hero de dominios no puede perder su buscador: en vez de sustituirlo por la foto, el buscador se muda al cuerpo navy de la .hcard y los resultados van debajo, en la misma caja. ------------------------------------------------------- */ .hsearch { display: flex; gap: 9px; flex-wrap: wrap; margin: 18px 0 0; } .hsearch input { flex: 1 1 190px; min-width: 0; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; padding: 13px 16px; font: 500 15px/1.2 var(--font-sans); color: #fff; } .hsearch input::placeholder { color: rgba(255, 255, 255, .5); } .hsearch input:focus-visible { outline: none; border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .13); } .hsearch button { flex: 0 0 auto; } .hres { list-style: none; margin: 18px 0 0; padding: 0; } .hres li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .09); font-size: 14.5px; color: #fff; } .hres li:last-child { border-bottom: 0; } .hres .ti { font-size: 18px; color: #4ADE80; flex-shrink: 0; } .hres .nm { flex: 1 1 auto; font-family: var(--font-mono); min-width: 0; } .hres .nm b { font-weight: 700; } .hres .pr { font-weight: 700; white-space: nowrap; } .hres li.libre--no { color: rgba(255, 255, 255, .45); } .hres li.libre--no .ti { color: rgba(255, 255, 255, .3); } .htlds { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 0; } .htlds span { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); font: 600 12.5px/1 var(--font-mono); color: rgba(255, 255, 255, .82); } .mk-outlook { --mk: #0F6CBD; --mk-soft: rgba(15,108,189,.11); } .mk-zoho { --mk: #E42527; --mk-soft: rgba(228,37,39,.10); } .mk-google { --mk: #4285F4; --mk-soft: rgba(66,133,244,.11); } .hsearch .btn-pink { padding: 13px 22px; font-size: 15px; border-radius: 12px; } /* La foto del hero de dominios respira mejor con la cabeza más abajo. */ .hcard__media > img { object-position: center 34%; } /* ── 45 · .mig__foot: el no debe ser una columna ───── Con `display:flex`, cada trozo de texto suelto y cada se vuelven ítems del flex y el párrafo se parte en columnas («El código de | un solo uso | y demuestra…»). Se pasa a bloque y el icono se coloca con float, que sí deja fluir el texto alrededor. ------------------------------------------------------- */ .mig__foot { display: block; } .mig__foot > .ti { float: left; margin: 1px 9px 0 0; } .mig__foot::after { content: ""; display: block; clear: both; } /* ── 46 · Ficha de datos dentro de la tarjeta de foto ──── Para los heros donde el dato es la prueba (un certificado, un buzón, un plan): filas etiqueta/valor sobre el navy. ------------------------------------------------------- */ .hfacts { margin: 18px 0 0; } .hfacts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .09); } .hfacts > div:last-child { border-bottom: 0; } .hfacts dt { font-size: 13.5px; color: rgba(255, 255, 255, .62); } .hfacts dd { margin: 0; font-size: 13.5px; font-weight: 600; color: #fff; text-align: right; } .hfacts dd .ti { font-size: 15px; vertical-align: -2px; color: #4ADE80; } /* ── 47 · Barras de comparación sobre fondo claro ──────── Hermana de .dbars, para tarjetas del bento en blanco. ------------------------------------------------------- */ .lbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; width: 100%; } .lbars li { display: grid; grid-template-columns: 56px 1fr 74px; gap: 12px; align-items: center; } .lbars .pl { font: 700 12.5px/1 var(--font-sans); color: var(--color-text-muted); } .lbars .tr { height: 10px; border-radius: 999px; background: rgba(0, 17, 68, .08); overflow: hidden; } .lbars .fl { display: block; height: 100%; border-radius: 999px; background: var(--buho-blue-600, #0330CC); opacity: .55; } .lbars .fl--ac { opacity: 1; background: linear-gradient(90deg, var(--buho-pink-600, #FF006F), var(--buho-blue-600, #0330CC)); } .lbars b { font: 600 12px/1 var(--font-mono); color: var(--color-text); text-align: right; white-space: nowrap; } /* ── 48 · Medidor de saldo dentro de la tarjeta de foto ──*/ .hmeter { display: flex; gap: 5px; margin: 18px 0 0; } .hmeter span { flex: 1; height: 9px; border-radius: 5px; background: rgba(255, 255, 255, .16); } .hmeter span.on { background: var(--buho-pink-600, #FF006F); } .hmeter__lb { display: flex; justify-content: space-between; margin: 9px 0 0; font: 400 11px/1 var(--font-mono); color: rgba(255, 255, 255, .55); } .dbars .fl--gris { background: rgba(255, 255, 255, .34); } .dbars li { grid-template-columns: 68px 1fr 74px; } /* ── 49 · Fichas de extensión sobre fondo claro ──────────*/ .ltlds { display: flex; flex-wrap: wrap; gap: 7px; } .ltlds span { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; background: rgba(0, 17, 68, .05); box-shadow: inset 0 0 0 1px rgba(0, 17, 68, .08); font: 600 12.5px/1 var(--font-mono); color: var(--color-text); } /* La fila de logotipos del bento: sin pastilla y bien separada. */ .bento .ico--bare.approw { gap: 9px; height: 32px; } .bento .ico--bare.approw .logo-marca { --lm: 26px; } .bento .ico--bare.approw .brandimg { --bh: 17px; } .bento .dark .ico--bare.approw .logo-marca { color: #fff; } .bento .ico--bare .gw-ico { height: 30px; width: auto; } /* ── 50 · Detalles del despliegue en las siete páginas ───*/ /* Dos columnas de garantías sí, pero no en un teléfono. */ .grid-guar--2 { grid-template-columns: 1fr 1fr; } @media (max-width: 860px) { .grid-guar--2 { grid-template-columns: 1fr; } } /* Las barras no deben estirarse con la tabla que tienen al lado. */ .dbars, .lbars { max-width: min(100%, 420px); } /* Detalles finos de las barras: una barra de dos píxeles no se lee, y una etiqueta partida en dos líneas rompe la rejilla. */ .dbars .fl, .lbars .fl { min-width: 9px; } .dbars li, .lbars li { grid-template-columns: 72px 1fr 74px; } .dbars .pl, .lbars .pl { white-space: nowrap; } /* La fila de logotipos del bento, a una altura pareja. */ .bento .ico--bare.approw .brandimg { --bh: 22px; } /* `.approw img` fija 18×18: un wordmark ahí dentro queda en 4 px de alto. Dentro del bento manda la altura común de .brandimg. */ .bento .ico--bare.approw img { width: auto; height: var(--bh, 22px); } /* Compensación de las marcas de correo, medida sobre la tinta. (Google diseñó su juego para leerse junto: sus iconos NO se compensan dentro de las páginas de Workspace, solo aquí, en la cinta, donde conviven con logotipos de otros paquetes.) */ .specband--logos .logo-zoho { --lmb: 2.35; } /* tinta 24 × 10.2 */ .specband--logos .logo-gmail { --lmb: 1.33; } /* tinta 24 × 18.0 */ /* ── 51 · Los hijos de .split pueden encogerse ─────────── Un ítem de grid trae `min-width:auto`: su ancho mínimo es el de su contenido. Una tabla `.cmp` dentro de un `.split` estira la columna a 615 px en un teléfono de 390, y arrastra consigo todo lo que tenga al lado. `.cmp` ya sabe llevar su propio scroll; solo le faltaba permiso para encoger. ------------------------------------------------------- */ .split > *, .fgrid > *, .bento > * { min-width: 0; } /* ── 52 · Los tres lockups de Zoho ─────────────────────── Zoho publica sus logotipos como bloques horizontales (icono + palabra) de proporción 2.25 a 4.13. En la rejilla ocupan la fila entera de la casilla y por eso van más altos que un logotipo cuadrado: la palabra tiene que leerse. ------------------------------------------------------- */ .apps--zoho { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 12px; } .apps--zoho .apps__it { min-height: 100px; padding: 20px 22px; gap: 10px; } .apps--zoho .brandimg { --bh: 38px; max-width: 100%; } .apps--zoho small { font-size: 12.5px; } @media (max-width: 700px) { .apps--zoho { grid-template-columns: 1fr; } .apps--zoho .brandimg { --bh: 30px; } } /* ========================================================= 53 · HERO DE ZOHO MAIL · la consola del buzón --------------------------------------------------------- La referencia es la portada de zoho.com/mail: paneles claros dentro de un marco oscuro, la columna de aplicaciones a la izquierda, y el mismo buzón en un teléfono encima. Aquí está rehecha con la tipografía y los colores de la casa, con datos nuestros. No es una captura de Zoho ni una copia de su interfaz. Se puede recorrer con el ratón: al señalar una fila, una carpeta o una aplicación, la selección de fábrica se apaga y la toma lo que señalas. Todo con CSS; sin JavaScript. ========================================================= */ .zhero { position: relative; padding: 0 40px 62px 44px; animation: hfSlide 520ms var(--ease-out) both; --z-marco: #10131F; /* el chasis oscuro */ --z-panel: #FFFFFF; /* los paneles claros */ --z-suave: #F5F7FB; /* fondos de descanso */ --z-linea: rgba(0, 17, 68, .08); --z-tenue: #64748B; --z-sel: #E5EDFB; /* la fila seleccionada */ --z-azul: var(--buho-blue-600, #0330CC); } @media (prefers-reduced-motion: reduce) { .zhero { animation: none; } } /* Un lienzo cálido detrás, como el de la referencia. */ .zhero::before { content: ""; position: absolute; z-index: 0; left: 10px; right: 4px; top: 26px; bottom: 34px; border-radius: 30px; background: linear-gradient(150deg, #FDF3D2, #FBEFDF 55%, #F7E9E4); box-shadow: 0 18px 44px rgba(0, 17, 68, .10); } /* ── El chasis: marco oscuro, paneles claros dentro ──────*/ .zwin { position: relative; z-index: 1; border-radius: 20px; padding: 0; background: var(--z-marco); box-shadow: 0 30px 68px rgba(0, 17, 68, .30), 0 0 0 1px rgba(255, 255, 255, .05) inset; overflow: hidden; } .zwin > *:not(.sr-only) { position: relative; z-index: 1; } .zwin__body { display: grid; grid-template-columns: 52px 116px 1fr; min-height: 348px; } /* ── Columna de aplicaciones · oscura, como el original ──*/ .zwin__apps { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 11px 5px; background: var(--z-marco); } .zwin__apps-grid { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; margin-bottom: 7px; background: rgba(255, 255, 255, .10); color: #fff; } .zwin__apps-grid .ti { font-size: 17px; } .zwin__apps > span:not(.zwin__apps-grid) { width: 42px; padding: 6px 0 5px; border-radius: 10px; display: grid; justify-items: center; gap: 3px; font: 600 7px/1 var(--font-sans); color: rgba(255, 255, 255, .5); cursor: pointer; transition: color 170ms var(--ease-out, ease), background-color 170ms var(--ease-out, ease); } .zwin__apps > span .ti { font-size: 17px; } /* `:not(.zwin__apps-grid)` suma la clase de su argumento, así que la regla de arriba pesa (0,2,1). La activa tiene que igualarla o se queda con el blanco al 50 % y el azul se lee apagado. */ .zwin__apps > span.on { background: var(--z-azul); color: #fff; } /* Al señalar una aplicación, la activa cede el sitio. */ .zwin__apps:hover > span.on { background: none; color: rgba(255, 255, 255, .5); } .zwin__apps > span:not(.zwin__apps-grid):hover { background: var(--z-azul); color: #fff; } /* ── Columna de carpetas · panel claro ───────────────────*/ .zwin__rail { display: flex; flex-direction: column; padding: 13px 10px; background: var(--z-suave); border-right: 1px solid var(--z-linea); } .zwin__new { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 9px; padding: 9px 10px; background: var(--z-azul); color: #fff; font: 700 11.5px/1 var(--font-sans); white-space: nowrap; box-shadow: 0 6px 16px rgba(3, 48, 204, .26); cursor: pointer; transition: transform 180ms var(--ease-out, ease), box-shadow 180ms var(--ease-out, ease); } .zwin__new:hover { transform: translateY(-1px); box-shadow: 0 11px 22px rgba(3, 48, 204, .34); } .zwin__new .ti { font-size: 14px; } .zwin__nav { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; } .zwin__nav li { position: relative; display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; font: 500 11.5px/1 var(--font-sans); color: var(--z-tenue); cursor: pointer; transition: color 170ms var(--ease-out, ease), background-color 170ms var(--ease-out, ease); } .zwin__nav li .ti { font-size: 15px; } .zwin__nav li b { margin-left: auto; font: 700 10px/1 var(--font-mono); } .zwin__nav li::before { content: ""; position: absolute; left: 2px; top: 50%; width: 2px; height: 0; border-radius: 2px; background: var(--z-azul); transform: translateY(-50%); transition: height 200ms var(--ease-out, ease); } .zwin__nav .on { background: var(--z-panel); color: var(--buho-navy-950); font-weight: 700; box-shadow: 0 1px 3px rgba(0, 17, 68, .10); } .zwin__nav .on::before { height: 15px; } /* Al señalar una carpeta, la activa cede el sitio. */ .zwin__nav:hover .on { background: none; color: var(--z-tenue); font-weight: 500; box-shadow: none; } .zwin__nav:hover .on::before { height: 0; } .zwin__nav li:hover { background: var(--z-panel); color: var(--buho-navy-950); font-weight: 700; box-shadow: 0 1px 3px rgba(0, 17, 68, .10); } .zwin__nav li:hover::before { height: 15px; } .zwin__acct { margin-top: auto; padding-top: 13px; display: flex; align-items: center; gap: 7px; font: 500 9px/1.3 var(--font-mono); color: var(--z-tenue); word-break: break-all; } .zwin__acct i { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; background: var(--buho-pink-600, #FF006F); color: #fff; display: grid; place-items: center; font: 700 9.5px/1 var(--font-sans); font-style: normal; } /* ── Columna de mensajes · panel blanco ──────────────────*/ .zwin__list { background: var(--z-panel); min-width: 0; display: flex; flex-direction: column; } .zwin__bar { display: flex; align-items: center; gap: 4px; padding: 8px 11px; border-bottom: 1px solid var(--z-linea); background: var(--z-suave); } .zwin__tab { border-radius: 7px 7px 0 0; padding: 6px 12px; font: 700 10.5px/1 var(--font-sans); color: var(--z-tenue); cursor: pointer; transition: color 170ms var(--ease-out, ease), background-color 170ms var(--ease-out, ease); } .zwin__tab.on { background: var(--z-panel); color: var(--buho-navy-950); box-shadow: 0 -1px 0 var(--z-azul) inset; } .zwin__bar:hover .zwin__tab.on { background: none; color: var(--z-tenue); box-shadow: none; } .zwin__bar .zwin__tab:hover { background: var(--z-panel); color: var(--buho-navy-950); box-shadow: 0 -1px 0 var(--z-azul) inset; } .zwin__find { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; background: var(--z-panel); box-shadow: inset 0 0 0 1px var(--z-linea); border-radius: 999px; padding: 5px 12px; font: 500 10.5px/1 var(--font-sans); color: var(--z-tenue); } .zwin__find .ti { font-size: 13px; } .zwin__lhead { display: flex; align-items: baseline; gap: 9px; padding: 12px 14px 9px; font: 800 13px/1 var(--font-sans); letter-spacing: -.01em; color: var(--buho-navy-950); } .zwin__lhead span { font: 700 10px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--z-azul); } .zrow { position: relative; display: flex; align-items: center; gap: 10px; margin: 0 8px; padding: 8px 8px; border-radius: 9px; border-bottom: 1px solid var(--z-linea); cursor: pointer; transition: background-color 180ms var(--ease-out, ease), transform 200ms var(--ease-out, ease), box-shadow 180ms var(--ease-out, ease); } .zrow:last-child { border-bottom: 0; } .zrow::before { content: ""; position: absolute; left: 2px; top: 50%; width: 2px; height: 0; border-radius: 2px; background: var(--z-azul); transform: translateY(-50%); transition: height 200ms var(--ease-out, ease); } .zrow .txt { flex: 1 1 auto; min-width: 0; } .zrow .txt b, .zrow .txt > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zrow .txt b { font: 600 12px/1.3 var(--font-sans); color: var(--z-tenue); } .zrow .txt > span { font: 400 11.5px/1.35 var(--font-sans); color: var(--z-tenue); opacity: .78; } .zrow .meta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; font: 500 10px/1 var(--font-mono); color: var(--z-tenue); opacity: .8; transition: opacity 180ms var(--ease-out, ease), color 180ms var(--ease-out, ease); } .zrow .meta .ti { font-size: 12px; } .zrow--new .txt b { font-weight: 800; color: var(--buho-navy-950); } .zrow--new .txt > span { color: var(--color-text); opacity: .9; } .zrow--tenue { opacity: .5; } /* La selección, y cómo se la lleva el ratón. */ .zrow--on, .zwin__list:hover .zrow:hover { background: var(--z-sel); border-bottom-color: transparent; box-shadow: inset 0 0 0 1px rgba(3, 48, 204, .12); } .zrow--on::before, .zwin__list:hover .zrow:hover::before { height: 22px; } .zwin__list:hover .zrow--on { background: none; box-shadow: none; border-bottom-color: var(--z-linea); } .zwin__list:hover .zrow--on::before { height: 0; } .zwin__list:hover .zrow:hover { transform: translateX(2px); opacity: 1; } .zwin__list:hover .zrow:hover .txt b { color: var(--buho-navy-950); font-weight: 800; } .zwin__list:hover .zrow:hover .txt > span { color: var(--color-text); opacity: 1; } .zwin__list:hover .zrow:hover .meta { opacity: 1; color: var(--z-azul); } .av { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font: 700 11px/1 var(--font-sans); color: #fff; } .av--a { background: #D9541F; } .av--b { background: #0330CC; } .av--c { background: #0E8CA8; } .av--d { background: #4F8F2A; } .av--e { background: #8B33C9; } .av--f { background: #64748B; } /* a11y.css se carga DESPUÉS que este archivo y trae `.avatar, .quote .av, .av { color: var(--buho-navy-950) }`. Con la misma especificidad (0,1,0) gana por orden, así que la inicial de cada perfil salía en navy sobre un fondo de color: ilegible. Se corrige subiendo la especificidad aquí, no tocando a11y.css. */ .zrow > .av, .zphone__row > .av, .zwin .av { color: #fff; } /* ── El teléfono, encima de la ventana ───────────────────*/ .zphone { position: absolute; right: -14px; bottom: -6px; z-index: 3; width: 168px; border-radius: 26px; padding: 5px; background: var(--z-marco); box-shadow: 0 28px 54px rgba(0, 17, 68, .34); } .zphone__in { background: var(--z-panel); border-radius: 21px; overflow: hidden; padding: 8px 9px 0; } .zphone__bar { display: flex; justify-content: space-between; align-items: center; font: 700 8.5px/1 var(--font-sans); color: var(--buho-navy-950); padding: 2px 3px 7px; } .zphone__sig { display: inline-flex; gap: 2px; align-items: flex-end; } .zphone__sig i { width: 2.5px; background: var(--buho-navy-950); border-radius: 1px; } .zphone__sig i:nth-child(1) { height: 4px; } .zphone__sig i:nth-child(2) { height: 6px; } .zphone__sig i:nth-child(3) { height: 8px; } .zphone__head { display: flex; align-items: center; gap: 6px; font: 800 13px/1 var(--font-sans); letter-spacing: -.01em; color: var(--buho-navy-950); padding: 0 3px 8px; } .zphone__head b { font: 700 10px/1 var(--font-mono); color: var(--z-azul); } .zphone__head .ti { margin-left: auto; font-size: 14px; color: var(--z-azul); } .zphone__find { display: flex; align-items: center; gap: 5px; background: var(--z-suave); box-shadow: inset 0 0 0 1px var(--z-linea); border-radius: 8px; padding: 5px 8px; margin-bottom: 7px; font: 500 9.5px/1 var(--font-sans); color: var(--z-tenue); } .zphone__find .ti { font-size: 11px; } .zphone__row { display: flex; align-items: center; gap: 7px; padding: 6px 5px; border-radius: 8px; border-bottom: 1px solid var(--z-linea); cursor: pointer; transition: background-color 180ms var(--ease-out, ease), box-shadow 180ms var(--ease-out, ease); } .zphone__row .av { width: 20px; height: 20px; font-size: 9px; } .zphone__row .txt { min-width: 0; } .zphone__row .txt b, .zphone__row .txt > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zphone__row .txt b { font: 700 9.5px/1.3 var(--font-sans); color: var(--buho-navy-950); } .zphone__row .txt > span { font: 400 9px/1.3 var(--font-sans); color: var(--z-tenue); } /* En el teléfono manda igual: el correo señalado es el seleccionado. */ .zphone__row.on, .zphone__in:hover .zphone__row:hover { background: var(--z-sel); border-bottom-color: transparent; box-shadow: inset 0 0 0 1px rgba(3, 48, 204, .14); } .zphone__in:hover .zphone__row.on { background: none; box-shadow: none; border-bottom-color: var(--z-linea); } .zphone__tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 8px -9px 0; padding: 7px 6px 9px; border-top: 1px solid var(--z-linea); background: var(--z-suave); } .zphone__tabs span { display: grid; justify-items: center; gap: 2px; font: 600 7.5px/1 var(--font-sans); color: var(--z-tenue); cursor: pointer; transition: color 170ms var(--ease-out, ease); } .zphone__tabs .ti { font-size: 13px; } .zphone__tabs .on { color: var(--z-azul); } .zphone__tabs:hover .on { color: var(--z-tenue); } .zphone__tabs span:hover { color: var(--z-azul); } /* ── Las tres aplicaciones flotando ──────────────────────*/ .zchip { position: absolute; z-index: 4; display: inline-flex; align-items: center; background: #fff; border-radius: 13px; padding: 7px 12px; box-shadow: 0 16px 34px rgba(0, 17, 68, .18), 0 0 0 1px rgba(0, 17, 68, .05); animation: zFlota 5.5s ease-in-out infinite; transition: transform 220ms var(--ease-out, ease), box-shadow 220ms var(--ease-out, ease); } .zchip img { height: 19px; width: auto; display: block; } .zchip:hover { animation-play-state: paused; transform: translateY(-7px) scale(1.05); box-shadow: 0 22px 44px rgba(0, 17, 68, .26), 0 0 0 1px rgba(3, 48, 204, .35); } .zchip--mail { left: -50px; top: 20px; } .zchip--cal { right: 34px; top: -20px; animation-delay: 1.1s; } .zchip--con { left: -46px; bottom: 118px; animation-delay: 2.2s; } @keyframes zFlota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @media (prefers-reduced-motion: reduce) { .zchip { animation: none; } .zrow, .zphone__row, .zwin__nav li, .zwin__apps > span, .zwin__tab, .zchip, .zwin__new { transition: none; } .zwin__list:hover .zrow:hover { transform: none; } .zchip:hover { transform: none; } } /* La promesa de la página, en una pastilla */ .zdom { position: absolute; left: 44px; bottom: 10px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 9px 16px; background: var(--buho-navy-950); color: #fff; font: 700 11px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 16px 32px rgba(0, 17, 68, .26); } .zdom .ti { font-size: 15px; color: var(--buho-pink-300, #FF7FB5); } /* ── Estrechos ───────────────────────────────────────────*/ @media (max-width: 1180px) { .zhero { padding: 0 28px 62px 30px; } .zhero::before { left: 4px; right: 0; } .zdom { left: 30px; } .zwin__body { grid-template-columns: 46px 106px 1fr; } .zwin__new { font-size: 10.5px; padding: 8px 8px; } .zchip--mail { left: -32px; top: 12px; } .zchip--con { left: -30px; } .zchip--cal { right: 22px; } } @media (max-width: 860px) { .zhero { padding: 0 0 66px; } .zhero::before { left: -14px; right: -14px; top: 14px; bottom: 22px; } .zdom { left: 8px; } .zwin__body { grid-template-columns: 46px 1fr; } .zwin__rail { display: none; } .zphone { right: -6px; width: 158px; } .zchip--mail { left: 8px; top: -18px; } .zchip--cal { right: 8px; top: -18px; } .zchip--con { display: none; } } @media (max-width: 560px) { .zphone { display: none; } .zdom { position: static; margin-top: 14px; display: inline-flex; } .zhero { padding: 0; } .zhero::before { display: none; } .zchip { padding: 7px 10px; } .zchip img { height: 17px; } } /* ── 54 · Los tres logotipos dentro de la tarjeta navy ─── Los lockups de Zoho traen la palabra en tinta negra, así que sobre navy no se leen. Van en pastillas blancas —que además es el uso de marca correcto sobre fondo oscuro— y con el mismo vaivén contenido que los chips del hero. ------------------------------------------------------- */ .zlogos__lb { display: block; margin: 22px 0 10px; font: 700 10.5px/1.45 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .55); } .zlogos { display: flex; flex-wrap: wrap; gap: 10px; } .zlogos > span { display: inline-flex; align-items: center; background: #fff; border-radius: 11px; padding: 8px 13px; box-shadow: 0 8px 20px rgba(0, 17, 68, .22); transition: transform 200ms var(--ease-out, ease), box-shadow 200ms var(--ease-out, ease); } .zlogos > span:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(0, 17, 68, .30); } .zlogos img { height: 20px; width: auto; display: block; } @media (max-width: 700px) { .zlogos > span { padding: 7px 11px; } .zlogos img { height: 17px; } } @media (prefers-reduced-motion: reduce) { .zlogos > span { transition: none; } .zlogos > span:hover { transform: none; } } /* ========================================================= 55 · WAYA · maquetas de producto de la página de la API --------------------------------------------------------- La referencia es chatwoot.com: secciones guiadas por maquetas de producto en vez de diagramas. Aquí hay tres, todas en HTML y con los datos reales de la página. ========================================================= */ /* ── 55.1 · Vinculación por QR, sobre la tarjeta navy ────*/ .wqr { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; margin-top: 18px; padding: 16px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); border-radius: 18px; } .wqr__code { position: relative; overflow: hidden; width: 104px; height: 104px; border-radius: 14px; background: #fff; padding: 9px; display: grid; place-items: center; } .wqr__code svg { display: block; width: 100%; height: 100%; } /* El haz que recorre el código: el gesto de escanear, sin más. */ .wqr__code::after { content: ""; position: absolute; left: 6px; right: 6px; height: 22px; top: 6px; border-radius: 6px; background: linear-gradient(180deg, rgba(255, 0, 111, .34), transparent); box-shadow: 0 1px 0 rgba(255, 0, 111, .75); animation: wqHaz 2.6s ease-in-out infinite; } @keyframes wqHaz { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(66px); } } @media (prefers-reduced-motion: reduce) { .wqr__code::after { animation: none; opacity: .5; } } .wqr__pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .wqr__pasos li { display: flex; align-items: center; gap: 10px; font: 500 13px/1.35 var(--font-sans); color: rgba(255, 255, 255, .8); } .wqr__pasos i:first-child { width: 21px; height: 21px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-style: normal; font: 700 10.5px/1 var(--font-mono); background: rgba(255, 255, 255, .14); color: #fff; } .wqr__pasos .ti { font-size: 17px; color: #4ADE80; margin-left: auto; flex-shrink: 0; } .wqr__foot { grid-column: 1 / -1; margin: 4px 0 0; padding-top: 13px; border-top: 1px solid rgba(255, 255, 255, .12); display: block; font: 500 12.5px/1.5 var(--font-sans); color: rgba(255, 255, 255, .68); } .wqr__foot::after { content: ""; display: block; clear: both; } .wqr__foot .ti { float: left; margin: 1px 9px 0 0; font-size: 16px; color: #4ADE80; } .wqr__foot b { color: #fff; font-weight: 700; } /* ── 55.2 · El concentrador: cuatro sistemas, una línea ──*/ .whub { display: grid; grid-template-columns: 1fr 44px auto; gap: 0 12px; align-items: center; background: #fff; border-radius: 22px; padding: 20px; box-shadow: 0 20px 46px rgba(0, 17, 68, .10), 0 0 0 1px rgba(0, 17, 68, .06); } .whub__src { display: grid; gap: 8px; min-width: 0; } .whub__src > span { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 12px; background: var(--buho-cream, #F7F5EF); font: 600 12.5px/1.2 var(--font-sans); color: var(--color-text); min-width: 0; } .whub__src > span > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .whub__src .logo-marca { --lm: 18px; color: var(--mk, var(--buho-navy-950)); flex-shrink: 0; } .whub__src .brandimg { --bh: 14px; flex-shrink: 0; } /* El nodo de origen es Fastura: quien emite. Su isotipo en vez del glifo de factura de Tabler. */ .whub__out .brandimg { --bh: 26px; } .whub__src .ti { font-size: 17px; color: var(--buho-blue-600, #0330CC); flex-shrink: 0; } /* Las cuatro líneas que confluyen: SVG no, borde sí. */ .whub__via { position: relative; align-self: stretch; } .whub__via::before { content: ""; position: absolute; left: 0; right: 50%; top: 12%; bottom: 12%; border: 1.5px solid rgba(0, 17, 68, .18); border-right: 0; border-radius: 12px 0 0 12px; } .whub__via::after { content: ""; position: absolute; right: 0; top: 50%; width: 50%; border-top: 1.5px solid rgba(0, 17, 68, .18); } .whub__via i { position: absolute; left: 50%; top: 50%; z-index: 1; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--buho-pink-600, #FF006F); box-shadow: 0 0 0 4px rgba(255, 0, 111, .16); } .whub__out { display: grid; justify-items: center; gap: 7px; padding: 16px 14px; border-radius: 16px; background: var(--buho-navy-950); color: #fff; box-shadow: 0 14px 30px rgba(0, 17, 68, .24); } .whub__out .logo-marca { --lm: 30px; color: #25D366; } .whub__out b { font: 800 13px/1.2 var(--font-sans); letter-spacing: -.01em; } .whub__out span { font: 500 10.5px/1.3 var(--font-mono); color: rgba(255, 255, 255, .66); text-align: center; } .whub__foot { grid-column: 1 / -1; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(0, 17, 68, .07); display: block; font: 500 12.5px/1.5 var(--font-sans); color: var(--color-text-muted); } .whub__foot::after { content: ""; display: block; clear: both; } .whub__foot .ti { float: left; margin: 1px 9px 0 0; font-size: 16px; color: var(--buho-blue-600, #0330CC); } .whub__foot b { color: var(--color-text); font-weight: 700; } @media (max-width: 560px) { .whub { grid-template-columns: 1fr; gap: 14px; } .whub__via { display: none; } } /* ── 55.3 · La consola de la API ─────────────────────────*/ .wcode { border-radius: 18px; overflow: hidden; background: #070D24; box-shadow: 0 26px 56px rgba(0, 17, 68, .38), inset 0 0 0 1px rgba(255, 255, 255, .07); } .wcode__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(255, 255, 255, .04); border-bottom: 1px solid rgba(255, 255, 255, .07); } .wcode__dots { display: inline-flex; gap: 5px; } .wcode__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .18); } .wcode__bar b { font: 600 11px/1 var(--font-mono); color: rgba(255, 255, 255, .55); letter-spacing: .02em; } .wcode__bar .met { margin-left: auto; background: rgba(74, 222, 128, .14); color: #4ADE80; box-shadow: inset 0 0 0 1px rgba(74, 222, 128, .3); border-radius: 999px; padding: 4px 10px; font: 700 9.5px/1 var(--font-mono); letter-spacing: .06em; } .wcode pre { margin: 0; padding: 15px 16px; font: 400 11.5px/1.62 var(--font-mono); color: rgba(234, 240, 255, .82); overflow-x: auto; white-space: pre; } .wcode pre + pre { border-top: 1px solid rgba(255, 255, 255, .07); } .wcode .k { color: #7FB2E5; } /* claves y verbos */ .wcode .s { color: #FFB4D2; } /* cadenas */ .wcode .n { color: #A7F3D0; } /* números y estados */ .wcode .c { color: rgba(234, 240, 255, .38); } /* comentarios */ .wcode__foot { display: block; padding: 12px 16px; border-top: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .03); font: 500 12px/1.45 var(--font-sans); color: rgba(255, 255, 255, .66); } .wcode__foot::after { content: ""; display: block; clear: both; } .wcode__foot .ti { float: left; margin: 1px 9px 0 0; font-size: 16px; color: #4ADE80; } .wcode__foot b { color: #fff; font-weight: 700; } /* La «w» de Woo es apaisada (1.85 : 1) y a 14 px de caja pesaba 18.7 de masa, contra 15.6 de Fastura y Waya y 17.1 de los iconos de Tabler. A 12.4 da 16.5 y queda en medio. (Antes aquí iba `woo-color.svg`, el logotipo «woo»; desde esta pasada es el glifo suelto.) */ .whub__src .brandimg[src*="woocommerce-icon"] { --bh: 12.4px; } /* ── 56 · Banda de canales, al estilo de la de Chatwoot ── Pocas marcas, en horizontal, sobre fondo claro y con su color: pastillas de aplicación como las que enseña chatwoot.com en su bloque omnicanal. Los degradados de Instagram y Messenger van en CSS; la silueta es la máscara monocroma de siempre, pintada de blanco encima. ------------------------------------------------------- */ .chband { background: var(--buho-cream, #F7F5EF); padding: 34px 0; } .chband__in { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 20px; } .chband__lb { flex: 0 1 auto; max-width: 34ch; font: 700 11px/1.5 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); } .chband__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .chtile { position: relative; width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; box-shadow: 0 10px 22px rgba(0, 17, 68, .13), 0 0 0 1px rgba(0, 17, 68, .04); transition: transform 200ms var(--ease-out, ease), box-shadow 200ms var(--ease-out, ease); } .chtile:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(0, 17, 68, .20); } .chtile .logo-marca { --lm: 27px; } .chtile img { height: 27px; width: auto; display: block; } /* Pastilla blanca, marca a color */ .chtile--claro { background: #fff; } /* Pastilla del color de la marca, silueta blanca */ .chtile--pleno .logo-marca { color: #fff; } .chtile--waya { background: #fff; } .chtile--waya img { height: 30px; } .chtile--whatsapp { background: #25D366; } .chtile--telegram { background: #26A5E4; } .chtile--messenger { background: linear-gradient(160deg, #00B2FF, #006AFF 45%, #A033FF 78%, #FF5280); } .chtile--instagram { background: linear-gradient(145deg, #F9CE34, #EE2A7B 52%, #6228D7); } .chtile--gmail { background: #fff; } .chtile--gmail .logo-marca { color: #EA4335; } /* El trazo que las une, como en la referencia. */ .chband__row > .chtile + .chtile::before { content: ""; position: absolute; right: 100%; top: 50%; width: 14px; border-top: 2px dashed rgba(0, 17, 68, .16); } @media (max-width: 700px) { .chband { padding: 26px 0; } .chband__in { gap: 12px 14px; } .chband__lb { flex-basis: 100%; text-align: center; max-width: none; } .chtile { width: 44px; height: 44px; border-radius: 13px; } .chtile .logo-marca { --lm: 23px; } .chtile img, .chtile--waya img { height: 24px; } .chband__row > .chtile + .chtile::before { width: 10px; } } @media (prefers-reduced-motion: reduce) { .chtile { transition: none; } .chtile:hover { transform: none; } } /* ========================================================= 57 · WAYA · el hero, la maqueta de app.waya.pe --------------------------------------------------------- El diseño lo dio el cliente: la ventana del navegador con la bandeja a la izquierda y la conversación a la derecha, y cuatro piezas flotando alrededor. Va en la columna derecha del hero, que es la estructura del resto del sitio: texto a la izquierda, maqueta a la derecha. Por eso todo está calibrado para unos 540 px de ancho, no para los 1.120 del diseño original. Se recorre con el ratón: la conversación señalada toma la selección. ========================================================= */ .wapp { position: relative; width: 100%; animation: hfSlide 560ms var(--ease-out) both; --a-linea: #ECECF3; --a-tenue: #7C8398; --a-sel: #F1EFFC; --a-verde: #E9F9EF; --a-verde-ink: #0E8A45; } @media (prefers-reduced-motion: reduce) { .wapp { animation: none; } } /* ── La ventana ──────────────────────────────────────────*/ .wapp__win { position: relative; z-index: 1; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 34px 76px rgba(26, 20, 70, .16), 0 0 0 1px rgba(26, 20, 70, .05); } .wapp__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--a-linea); background: #FCFCFE; } .wapp__dots { display: inline-flex; gap: 5px; } .wapp__dots i { width: 7px; height: 7px; border-radius: 50%; background: #DCDCE6; } .wapp__url { margin: 0 auto; background: #F3F3F8; border-radius: 999px; padding: 4px 16px; font: 500 10.5px/1 var(--font-mono); color: var(--a-tenue); } .wapp__body { display: grid; grid-template-columns: 190px 1fr; min-height: 352px; } /* ── Columna izquierda · la bandeja ──────────────────────*/ .wapp__lista { border-right: 1px solid var(--a-linea); padding: 12px 9px; min-width: 0; } .wapp__lhead { display: flex; align-items: center; gap: 8px; padding: 0 5px 9px; } .wapp__lhead b { font: 800 12px/1 var(--font-sans); letter-spacing: -.02em; color: var(--buho-navy-950); white-space: nowrap; } .wapp__lhead span { margin-left: auto; font: 600 10px/1 var(--font-mono); color: var(--a-tenue); } .wapp__filtros { display: flex; gap: 3px; padding: 0 3px 9px; } .wapp__filtros span { border-radius: 999px; padding: 5px 8px; font: 600 10px/1 var(--font-sans); color: var(--a-tenue); white-space: nowrap; cursor: pointer; transition: background-color 170ms var(--ease-out, ease), color 170ms var(--ease-out, ease); } .wapp__filtros .on { background: var(--a-verde); color: var(--a-verde-ink); } .wapp__filtros:hover .on { background: none; color: var(--a-tenue); } .wapp__filtros span:hover { background: var(--a-verde); color: var(--a-verde-ink); } .wconv { display: grid; grid-template-columns: auto 1fr auto; gap: 1px 6px; align-items: center; padding: 7px 4px; border-radius: 10px; cursor: pointer; transition: background-color 180ms var(--ease-out, ease); } /* Colocación explícita: con `auto-placement`, ocultar la hora recolocaba todo lo demás y el nombre se quedaba en 16 px. */ .wconv .wav { grid-column: 1; grid-row: 1 / span 2; } .wconv b { grid-column: 2; grid-row: 1; } .wconv .hora { grid-column: 3; grid-row: 1; } .wconv .prev { grid-column: 2; grid-row: 2; } .wconv .n { grid-column: 3; grid-row: 2; } .wconv b { font: 700 10.5px/1.35 var(--font-sans); letter-spacing: -.012em; color: var(--buho-navy-950); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .wconv .hora { font: 500 9px/1.3 var(--font-mono); letter-spacing: -.02em; color: var(--a-tenue); white-space: nowrap; } .wconv .prev { display: flex; align-items: center; gap: 4px; min-width: 0; font: 400 10px/1.35 var(--font-sans); color: var(--a-tenue); } .wconv .prev > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wconv .prev .logo-marca { --lm: 11px; flex-shrink: 0; } .wconv .prev .ti { font-size: 12px; flex-shrink: 0; } .wconv .n { justify-self: end; min-width: 16px; height: 16px; border-radius: 999px; padding: 0 4px; display: grid; place-items: center; background: #148A44; color: #fff; font: 700 9px/1 var(--font-sans); } .wconv--on { background: var(--a-sel); } .wapp__lista:hover .wconv--on { background: none; } .wapp__lista .wconv:hover { background: var(--a-sel); } .wav { width: 27px; height: 27px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font: 700 10px/1 var(--font-sans); } .wav--rq { background: #4B3DDB; color: #fff; } .wav--mf { background: #E6E2FB; color: #4B3DDB; } .wav--lc { background: #EDEBFA; color: #5B54A8; } .wav--jr { background: var(--buho-navy-950); color: #fff; } .wav--v { background: #EDEDF3; color: #7C8398; } /* ── Columna derecha · la conversación ───────────────────*/ .wapp__chat { display: flex; flex-direction: column; min-width: 0; } .wapp__chead { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 11px 13px; border-bottom: 1px solid var(--a-linea); } .wapp__chead .wav { width: 24px; height: 24px; font-size: 9.5px; } .wapp__chead > b { font: 700 12px/1 var(--font-sans); color: var(--buho-navy-950); } .wcanal { display: inline-flex; align-items: center; gap: 5px; background: var(--a-verde); border-radius: 999px; padding: 4px 9px; font: 700 10px/1 var(--font-sans); color: var(--a-verde-ink); } .wcanal .logo-marca { --lm: 12px; color: #25D366; } .wetiq { border-radius: 999px; padding: 4px 9px; background: #F3F3F8; font: 600 10px/1 var(--font-sans); color: var(--a-tenue); } .wagente { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 9px 3px 4px; box-shadow: inset 0 0 0 1px var(--a-linea); font: 600 10.5px/1 var(--font-sans); color: var(--buho-navy-950); } .wagente i:first-child { width: 17px; height: 17px; border-radius: 50%; background: #E6E2FB; color: #4B3DDB; display: grid; place-items: center; font-style: normal; font: 700 8.5px/1 var(--font-sans); } .wagente .ti { font-size: 12px; color: var(--a-tenue); } .wapp__chead > .ti { font-size: 16px; color: #C4C7D4; } .wapp__hilo { flex: 1 1 auto; display: flex; flex-direction: column; gap: 11px; padding: 15px 13px; } .wmsg { max-width: 86%; } .wmsg__b { border-radius: 14px; padding: 9px 12px; font: 400 11.5px/1.5 var(--font-sans); } .wmsg__t { display: block; margin-top: 5px; font: 400 9.5px/1 var(--font-mono); } .wmsg--ellos { align-self: flex-start; } .wmsg--ellos .wmsg__b { background: #F8F8FB; color: var(--color-text); box-shadow: inset 0 0 0 1px var(--a-linea); border-bottom-left-radius: 4px; } .wmsg--ellos .wmsg__t { color: var(--a-tenue); } .wmsg--nos { align-self: flex-end; } .wmsg--nos .wmsg__b { background: var(--a-verde); color: var(--color-text); border-bottom-right-radius: 4px; } .wmsg--nos .wmsg__t { color: var(--a-verde-ink); opacity: .85; } .wapp__comp { display: flex; align-items: center; gap: 9px; margin: 0 13px 13px; padding: 8px 9px 8px 11px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--a-linea); } .wapp__comp .mas { font-size: 17px; color: var(--a-tenue); } .wapp__comp .wapp__ph { flex: 1 1 auto; font: 400 11px/1.3 var(--font-sans); color: #848CA0; } .wapp__comp .mic { font-size: 15px; color: var(--a-tenue); } .wapp__comp .env { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: #29C765; color: #fff; box-shadow: 0 5px 12px rgba(41, 199, 101, .34); } .wapp__comp .env .ti { font-size: 15px; } /* La lista de sedes. */ .wlst { display: grid; gap: 9px; margin-top: 11px; } .wlst__f { display: flex; align-items: center; gap: 9px; } .wlst__f b { font: 700 8px/1 var(--font-sans); color: var(--color-text); min-width: 74px; } .wlst__b { flex: 1; height: 5px; border-radius: 999px; background: #EFEFF6; overflow: hidden; } .wlst__b i { display: block; height: 100%; border-radius: 999px; background: var(--buho-blue-600, #0330CC); } .wlst__f--b .wlst__b i { background: var(--buho-blue-400, #6D87E1); } .wlst__f--c .wlst__b i { background: var(--buho-pink-500, #FB136E); } .wlst__f .n { font: 700 8px/1 var(--font-mono); color: var(--buho-navy-950, #001144); min-width: 30px; text-align: right; } .wlst__b i.p75 { width: 75%; } .wlst__b i.p52 { width: 52%; } .wlst__b i.p34 { width: 34%; } /* ── Las piezas que flotan ───────────────────────────────*/ .wflo { position: absolute; z-index: 3; animation: zFlota 6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .wflo { animation: none; } } .wflo--wa { left: -38px; top: 34px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--buho-navy-950); box-shadow: 0 14px 30px rgba(0, 17, 68, .30); } .wflo--wa .logo-marca { --lm: 23px; color: #fff; } .wflo--ig { right: -22px; top: 44px; animation-delay: 1.4s; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: #fff; box-shadow: 0 12px 26px rgba(26, 20, 70, .18), 0 0 0 1px rgba(26, 20, 70, .05); } .wflo--ig .logo-marca { --lm: 23px; color: #D62976; } .wflo--ia { left: -30px; bottom: 88px; animation-delay: 2.6s; display: inline-flex; align-items: center; gap: 7px; background: #fff; border-radius: 999px; padding: 8px 13px; box-shadow: 0 12px 26px rgba(26, 20, 70, .16), 0 0 0 1px rgba(26, 20, 70, .04); font: 600 11px/1 var(--font-sans); color: var(--buho-navy-950); white-space: nowrap; } .wflo--ia i:first-child { width: 7px; height: 7px; border-radius: 50%; background: #29C765; } .wflo--ia small { font: 400 10px/1 var(--font-mono); color: var(--a-tenue); } .wflo--csat { right: -26px; bottom: 168px; animation-delay: 3.4s; background: #fff; border-radius: 14px; padding: 10px 14px; box-shadow: 0 14px 30px rgba(26, 20, 70, .16), 0 0 0 1px rgba(26, 20, 70, .04); text-align: center; } .wflo--csat span { display: block; font: 700 8.5px/1 var(--font-mono); letter-spacing: .12em; color: var(--a-tenue); } .wflo--csat b { display: block; margin-top: 4px; font: 800 19px/1 var(--font-sans); letter-spacing: -.03em; color: var(--buho-navy-950); } .wflo--csat b .ti { font-size: 13px; color: #29C765; vertical-align: 1px; } .wflo--tag { right: 22px; top: -18px; animation-delay: 1.9s; display: inline-flex; align-items: center; gap: 7px; background: #fff; border-radius: 999px; padding: 8px 13px; box-shadow: 0 12px 26px rgba(26, 20, 70, .16), 0 0 0 1px rgba(26, 20, 70, .04); font: 500 11px/1 var(--font-sans); color: var(--a-tenue); white-space: nowrap; } .wflo--tag .ti { font-size: 14px; color: #4B3DDB; } .wflo--tag b { color: var(--buho-navy-950); font-weight: 700; } /* La línea de garantías, bajo los botones del hero */ .wnota { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; margin: 24px 0 0; font: 600 12px/1.6 var(--font-mono); color: var(--color-text-muted); } .wnota i { color: #D4D6E1; margin: 0 9px; font-style: normal; } /* ── Estrechos ───────────────────────────────────────────*/ @media (max-width: 1180px) { .wapp__body { grid-template-columns: 186px 1fr; } /* La columna del hero se estrecha: antes de cortar un nombre, se va la hora, que es el dato menos importante de la fila. */ .wconv .hora { display: none; } .wflo--wa { left: -38px; } .wflo--ig { right: -12px; } .wflo--ia { left: -18px; } .wflo--csat { right: -14px; } .wflo--tag { right: 14px; } } @media (max-width: 900px) { .wapp__body { grid-template-columns: 190px 1fr; } /* Apilado, la maqueta ocupa todo el ancho: los 38 px de desplazamiento se salían del viewport por la izquierda. */ .wflo--wa { left: 16px; top: -22px; } .wflo--ia { bottom: auto; top: -18px; left: 12px; } } @media (max-width: 700px) { .wapp__body { grid-template-columns: 1fr; min-height: 0; } .wapp__lista { display: none; } .wapp__chead { padding: 10px 12px; } .wapp__chead .wetiq, .wapp__chead > .ti { display: none; } .wagente { margin-left: 0; } .wmsg { max-width: 92%; } .wapp__hilo { padding: 14px 12px; gap: 10px; } /* Cuatro piezas flotando no caben en un teléfono sin taparse: se quedan las dos de canal, que son las que dicen algo. */ .wflo--ia, .wflo--csat, .wflo--tag { display: none; } .wflo--wa { width: 42px; height: 42px; left: -12px; top: 42px; } .wflo--wa .logo-marca { --lm: 20px; } .wflo--ig { width: 38px; height: 38px; right: -10px; top: 34px; border-radius: 11px; } .wflo--ig .logo-marca { --lm: 20px; } .wnota { font-size: 11px; } .wnota i { margin: 0 6px; } } /* ========================================================= 58 · MENSAJERÍA · lo que comparten las ocho páginas --------------------------------------------------------- waya.html fijó el sistema. Estas piezas lo extienden a sus páginas hermanas sin tocar nada global: tintes de marca de los canales, la banda de canales ampliada a los once, y las maquetas que sustituyen a los SVG que quedaban. ========================================================= */ /* ── 58.1 · Tintes de los canales ──────────────────────── El color oficial de cada marca, con su versión suave para el fondo de la pastilla. Igual que §41, pero de canales. ------------------------------------------------------- */ .mk-instagram { --mk: #E4405F; --mk-soft: rgba(228,64,95,.12); } .mk-messenger { --mk: #0084FF; --mk-soft: rgba(0,132,255,.11); } .mk-telegram { --mk: #26A5E4; --mk-soft: rgba(38,165,228,.12); } .mk-tiktok { --mk: #111827; --mk-soft: rgba(17,24,39,.08); } .mk-line { --mk: #00B900; --mk-soft: rgba(0,185,0,.12); } .mk-x { --mk: #111827; --mk-soft: rgba(17,24,39,.08); } .mk-gmail { --mk: #EA4335; --mk-soft: rgba(234,67,53,.11); } .mk-facebook { --mk: #0866FF; --mk-soft: rgba(8,102,255,.11); } .mk-meta { --mk: #0081FB; --mk-soft: rgba(0,129,251,.11); } .mk-youtube { --mk: #FF0033; --mk-soft: rgba(255,0,51,.10); } .mk-linkedin { --mk: #0A66C2; --mk-soft: rgba(10,102,194,.11);} .mk-apple { --mk: #111827; --mk-soft: rgba(17,24,39,.08); } .mk-android { --mk: #3DDC84; --mk-soft: rgba(61,220,132,.14);} .mk-hubspot { --mk: #FF7A59; --mk-soft: rgba(255,122,89,.13);} .mk-mailchimp { --mk: #FFE01B; --mk-soft: rgba(255,224,27,.18);} .mk-waya { --mk: #0330CC; --mk-soft: rgba(3,48,204,.10); } /* Sobre navy, los tintes oscuros no se leen: se aclaran igual que se hizo con MySQL y WordPress en §41. */ .sec--navy .mk-tiktok, .sec--navy .mk-x, .sec--navy .mk-apple, .phband .mk-tiktok, .phband .mk-x, .phband .mk-apple, .closer .mk-tiktok, .closer .mk-x, .closer .mk-apple { --mk: #C9D4EA; } .sec--navy .mk-waya, .phband .mk-waya, .closer .mk-waya { --mk: #7FB2E5; } .sec--navy .mk-messenger, .sec--navy .mk-facebook { --mk: #6FB6EE; } /* Compensación de lienzo de la máscara nueva: la tinta de LINE no llega al borde inferior del cuadro de 24. */ .logo-marca.logo-line { --lmb: 1.05; } /* tinta 24 × 22.9 */ /* ── 58.2 · La banda de canales, ampliada ──────────────── §56 nació con seis pastillas de marca. En «Canales» hay once, y cuatro de ellos no son marcas: correo, SMS, chat web y voz. Esos van en pastilla navy con glifo blanco, que es una segunda familia declarada, no una mezcla accidental. ------------------------------------------------------- */ .chtile--tiktok { background: #010101; } .chtile--line { background: #06C755; } .chtile--x { background: #000; } .chtile--gen { background: var(--buho-navy-950, #001144); } .chtile--gen .ti { font-size: 25px; color: #fff; line-height: 1; } /* Once pastillas no caben en una línea recta: la banda se deja envolver y el trazo se dibuja solo entre vecinas. */ .chband--11 .chband__row { max-width: 720px; justify-content: center; } @media (max-width: 700px) { .chtile--gen .ti { font-size: 21px; } } /* ── 58.3 · Bandeja compacta ───────────────────────────── La ventana del navegador de §57, reducida a una lista. Es lo que dibujaban dos de los SVG que quedaban: una bandeja con el canal de entrada, el responsable y la hora. ------------------------------------------------------- */ .mbox { background: #fff; border-radius: 18px; box-shadow: 0 18px 44px rgba(0, 17, 68, .13), 0 0 0 1px rgba(0, 17, 68, .06); overflow: hidden; } .mbox__bar { display: flex; align-items: center; gap: 10px; padding: 11px 15px; background: var(--buho-navy-950, #001144); } .mbox__dots { display: inline-flex; gap: 5px; } .mbox__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.24); } .mbox__bar b { font: 700 12.5px/1 var(--font-sans); color: #fff; letter-spacing: -.01em; } .mbox__bar .tag { margin-left: auto; font: 600 9.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: #A7F3D0; background: rgba(74, 222, 128, .14); border-radius: 999px; padding: 5px 9px; } /* ── 58.3a · (retirado) ────────────────────────────────── Aquí vivía el muro de medios de pago y los cuadros de fila con isologo que se construyeron para el paso 2 de /servicios/tienda-virtual. Esa maqueta se sustituyó por el checkout `.p9win`, que trae sus propias piezas, así que estas reglas se quedaron sin un solo uso en las 39 páginas y se retiran. El color de marca que se averiguó entonces —el amarillo #FAC912 de PagoEfectivo, leído de su propio sitio— vive ahora en §76 junto a `.p9-pay`. ------------------------------------------------------- */ .mrow { display: grid; grid-template-columns: 34px 1fr auto; grid-template-rows: auto auto; column-gap: 11px; row-gap: 3px; align-items: center; padding: 12px 15px; border-top: 1px solid rgba(0, 17, 68, .07); transition: background 160ms var(--ease-out, ease); } .mbox > .mrow:first-of-type { border-top: 0; } /* La selección de fábrica cede y la toma el cursor: la misma regla, sin JavaScript, que ya usan .wconv y .zrow. */ .mrow--on { background: #F1EFFC; } .mbox:hover .mrow--on { background: none; } .mbox:hover .mrow:hover { background: #F1EFFC; } .mrow__ic { grid-column: 1; grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--mk-soft, rgba(0, 17, 68, .06)); color: var(--mk, var(--buho-navy-950)); } .mrow__ic .logo-marca { --lm: 18px; } .mrow__ic .ti { font-size: 17px; } .mrow b { grid-column: 2; grid-row: 1; font: 700 12.5px/1.25 var(--font-sans); letter-spacing: -.01em; } .mrow .sub { grid-column: 2; grid-row: 2; font: 400 11.5px/1.35 var(--font-sans); color: var(--color-text-muted); } .mrow .hora{ grid-column: 3; grid-row: 1; font: 500 9.5px/1 var(--font-mono); color: var(--color-text-muted); } .mrow .asig { grid-column: 3; grid-row: 2; display: inline-flex; align-items: center; gap: 5px; font: 700 10px/1 var(--font-sans); color: var(--color-text-muted); white-space: nowrap; } .mrow .asig i:not(.ti) { width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; background: var(--buho-blue-600, #0330CC); color: #fff; font: 700 8.5px/1 var(--font-sans); font-style: normal; } .mbox__foot { display: block; padding: 12px 15px; border-top: 1px solid rgba(0, 17, 68, .07); background: var(--buho-cream, #F7F5EF); font: 500 11.5px/1.45 var(--font-sans); color: var(--color-text-muted); } /* El mismo defecto de .mig__foot: en flex, el del final se volvía columna y partía la frase. Bloque + icono flotado. */ .mbox__foot::after { content: ""; display: block; clear: both; } .mbox__foot .ti { float: left; margin: 1px 8px 0 0; font-size: 15px; color: var(--buho-blue-600, #0330CC); } .mbox__foot b { color: var(--color-text); font-weight: 700; } @media (max-width: 620px) { .mrow { grid-template-columns: 30px 1fr; padding: 11px 13px; } .mrow__ic { width: 30px; height: 30px; border-radius: 10px; } /* Ocultar una celda sin declarar la posición del resto recolocaría la rejilla: la trampa de .wconv, otra vez. */ .mrow .hora, .mrow .asig { display: none; } } /* ── 58.4 · Panel de marca blanca ──────────────────────── Sustituye al SVG del panel activado: la barra de dirección con el dominio del revendedor y la lista de comprobaciones. ------------------------------------------------------- */ .mpanel { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 44px rgba(0, 17, 68, .13), 0 0 0 1px rgba(0, 17, 68, .06); } .mpanel__url { display: flex; align-items: center; gap: 9px; padding: 12px 15px; background: var(--buho-cream, #F7F5EF); border-bottom: 1px solid rgba(0, 17, 68, .07); font: 500 12px/1 var(--font-mono); color: var(--color-text); overflow: hidden; } .mpanel__url > .ti { font-size: 15px; color: #0E8A45; flex-shrink: 0; } /* La cabecera del panel de despacho lleva el isologo del courier en vez de un camión genérico: Olva es quien mueve el pedido y su logotipo ya vive en el sistema `.marca-color`. */ .mpanel__url > .marca-color { --mc: 17px; flex-shrink: 0; } .mpanel__url > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mpanel__url .eb { margin-left: auto; flex-shrink: 0; } .mpanel__list { list-style: none; margin: 0; padding: 6px 15px 14px; } .mpanel__list li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid rgba(0, 17, 68, .06); font: 500 12.5px/1.45 var(--font-sans); } .mpanel__list li:last-child { border-bottom: 0; } .mpanel__list .ti { font-size: 17px; color: #0E8A45; } /* La última línea habla de WhatsApp, así que lleva su isologo y no un tilde más. Va en su verde de marca, que es el color del propio logotipo y no un acento nuestro. */ .mpanel__list .logo-marca { --lm: 17px; color: var(--mk, #25D366); justify-self: center; } /* ── 58.5 · Identidad del revendedor ───────────────────── Sustituye al SVG de la personalización: el archivo del logotipo, la paleta y la vista previa del acceso. ------------------------------------------------------- */ .mskin { background: #fff; border-radius: 18px; padding: 18px; box-shadow: 0 18px 44px rgba(0, 17, 68, .13), 0 0 0 1px rgba(0, 17, 68, .06); } .mskin__file { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 13px; background: var(--buho-cream, #F7F5EF); } .mskin__mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--buho-blue-600, #0330CC); color: #fff; font: 800 12px/1 var(--font-sans); letter-spacing: -.02em; flex-shrink: 0; } .mskin__file b { display: block; font: 600 12px/1.3 var(--font-mono); } .mskin__file span { display: block; font: 400 11px/1.3 var(--font-sans); color: var(--color-text-muted); } .mskin__file > .ti { margin-left: auto; font-size: 17px; color: #0E8A45; } /* La paleta iba suelta: cuatro cuadros de color sin decir de qué eran ni qué pasaba con ellos. Ahora la encabeza su rótulo, el primer color —el de acento— lleva anillo para que se lea como «este es el elegido», y a la derecha se confirma que ya está puesta. */ .mskin__palrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 9px; } .mskin__pallb { font: 700 10.5px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); } .mskin__palok { display: inline-flex; align-items: center; gap: 5px; font: 600 11px/1 var(--font-sans); color: #0E8A45; } .mskin__palok .ti { font-size: 14px; } .mskin__pal { display: flex; gap: 12px; margin: 0; } .mskin__pal i { width: 30px; height: 30px; border-radius: 9px; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 17, 68, .08); } .mskin__pal i.on { box-shadow: inset 0 0 0 1px rgba(0, 17, 68, .08), 0 0 0 2px #fff, 0 0 0 4px var(--sw); } .mskin__prev { margin-top: 18px; padding: 0 15px 17px; border-radius: 14px; overflow: hidden; background: var(--buho-navy-950, #001144); text-align: center; } /* La pantalla del cliente se sirve desde el dominio del paso 1, así que lleva su barra: ata los dos pasos y deja de ser una caja flotando. Ojo con la especificidad: `.mskin__prev > span` es (0,1,1) —el `>` no suma— y le gana a un `.mskin__bar` o un `.mskin__go` sueltos, que son (0,1,0). Por eso los dos van escritos con el padre delante. */ .mskin__prev > .mskin__bar { display: flex; align-items: center; gap: 7px; margin: 0 -15px 16px; padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, .1); font: 500 11px/1 var(--font-mono); color: rgba(255, 255, 255, .62); } .mskin__prev > .mskin__bar .ti { font-size: 13px; color: rgba(255, 255, 255, .62); } .mskin__prev > .mskin__mark { margin-top: 3px; } .mskin__prev .mskin__mark { margin: 0 auto; } .mskin__prev b { display: block; margin-top: 10px; font: 800 14px/1.2 var(--font-sans); color: #fff; letter-spacing: -.015em; } .mskin__prev > span { display: block; margin-top: 4px; font: 400 11.5px/1.4 var(--font-sans); color: rgba(255, 255, 255, .6); } .mskin__prev em { display: block; margin-top: 13px; padding: 9px 12px; border-radius: 10px; background: rgba(255, 255, 255, .08); font: 400 11.5px/1 var(--font-mono); font-style: normal; color: rgba(255, 255, 255, .5); text-align: left; } /* El botón iba con `.btn--primary`, cuyo fondo es el navy —el mismo del panel—, así que se leía como texto suelto: no parecía un botón. Ahora va en el azul que el revendedor eligió en la paleta, que además es el argumento del paso: el color que subes es el que ve tu cliente. */ .mskin__prev > .mskin__go { display: block; margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: var(--buho-blue-600, #0330CC); font: 700 12.5px/1 var(--font-sans); color: #fff; } /* ── 58.6 · Cifras del revendedor ──────────────────────── Sustituye al SVG del panel financiero. Tres cifras y, bajo ellas, .lbars —que ya existía— para el margen por tramo. ------------------------------------------------------- */ .mfin { background: #fff; border-radius: 18px; padding: 18px; box-shadow: 0 18px 44px rgba(0, 17, 68, .13), 0 0 0 1px rgba(0, 17, 68, .06); } .mfin__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .mfin__c { padding: 13px 12px; border-radius: 13px; background: var(--buho-cream, #F7F5EF); } .mfin__c--hot { background: color-mix(in srgb, var(--buho-blue-600, #0330CC) 9%, #fff); } .mfin__c .l { font: 700 9.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); } .mfin__c .n { display: block; margin: 8px 0 3px; font: 800 clamp(19px, 2.2vw, 24px)/1 var(--font-sans); letter-spacing: -.03em; } .mfin__c .s { font: 400 11px/1.35 var(--font-sans); color: var(--color-text-muted); } .mfin__bars { margin-top: 16px; padding-top: 15px; border-top: 1px solid rgba(0, 17, 68, .07); } @media (max-width: 520px) { .mfin__row { grid-template-columns: 1fr; } } /* ── 58.7 · Mapa de áreas ──────────────────────────────── El índice de «Todas las funciones». Era una rejilla con treinta y cuatro estilos en línea; ahora es una clase. ------------------------------------------------------- */ .mmap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .mmap__it { display: block; padding: 13px 14px; border-radius: 14px; background: var(--buho-cream, #F7F5EF); text-decoration: none; color: inherit; transition: transform 180ms var(--ease-out, ease), box-shadow 180ms var(--ease-out, ease); } .mmap__it:hover, .mmap__it:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 17, 68, .12); } .mmap__it .ti { font-size: 17px; color: var(--motif-a-ink, var(--buho-blue-600)); } .mmap__it b { display: block; margin-top: 7px; font: 700 12.5px/1.25 var(--font-sans); } .mmap__it span { display: block; font: 400 10.5px/1.35 var(--font-sans); color: var(--color-text-muted); } .mmap--min { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 9px; } .mmap--min .mmap__it { background: #fff; border: 1px solid rgba(0, 17, 68, .09); font: 700 11.5px/1 var(--font-sans); padding: 11px 12px; } @media (prefers-reduced-motion: reduce) { .mmap__it:hover, .mmap__it:focus-visible { transform: none; } } @media (max-width: 420px) { .mmap, .mmap--min { grid-template-columns: 1fr; } } /* ── 58.8 · El concentrador, al revés ──────────────────── §55 lo dibujó de muchos a uno: cuatro sistemas y una línea de WhatsApp. En QR Búho la flecha va al contrario —un código impreso, tres destinos—, así que se voltea la rejilla y el trazo, sin duplicar el componente. ------------------------------------------------------- */ .whub--inv { grid-template-columns: auto 44px 1fr; } .whub--inv > .whub__out { grid-column: 1; grid-row: 1; } .whub--inv > .whub__via { grid-column: 2; grid-row: 1; } .whub--inv > .whub__src { grid-column: 3; grid-row: 1; } .whub--inv > .whub__foot { grid-column: 1 / -1; } .whub--inv .whub__via::before { left: 50%; right: 0; border: 1.5px solid rgba(0, 17, 68, .18); border-left: 0; border-radius: 0 12px 12px 0; } .whub--inv .whub__via::after { right: auto; left: 0; } @media (max-width: 620px) { .whub--inv { grid-template-columns: 1fr; } .whub--inv > .whub__out, .whub--inv > .whub__via, .whub--inv > .whub__src { grid-column: 1; } .whub--inv > .whub__out { grid-row: 1; margin-bottom: 12px; } .whub--inv > .whub__via { display: none; } .whub--inv > .whub__src { grid-row: 2; } } /* ── 58.9 · La nota privada del hilo ───────────────────── La bandeja compartida tiene un tercer tipo de mensaje que la API no tiene: la nota que se escriben los agentes y que el cliente no ve. Ámbar, alineada a la izquierda y con el candado por delante, para que no se confunda con una respuesta enviada. ------------------------------------------------------- */ .wmsg--nota { align-self: flex-start; max-width: 74%; } /* A 74 % la nota queda por dentro de la pastilla del CSAT, que entra 64 px desde el borde derecho. Cuando esa pastilla se retira (≤700 px), la nota recupera el ancho. */ @media (max-width: 1180px) { .wmsg--nota { max-width: 66%; } } @media (max-width: 700px) { .wmsg--nota { max-width: 92%; } } .wmsg--nota .wmsg__b { background: #FFF8E7; color: var(--color-text); box-shadow: inset 0 0 0 1px #F2E2B8; border-radius: 12px; } .wmsg--nota .wmsg__t { color: #9A7B22; } .wmsg--nota b { font-weight: 700; } .wnp { display: block; margin-bottom: 5px; font: 700 9.5px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: #9A7B22; } .wnp .ti { font-size: 12px; vertical-align: -1px; margin-right: 4px; } /* ── 58.10 · La trampa del min-width, otra vez ─────────── §51 la arregló para .split, .fgrid y .bento. Falta .sticky-story: a 390 px su columna se estiraba a 410 por el ancho mínimo de una palabra en monoespaciada dentro de .mpanel__list. Un ítem de rejilla trae min-width: auto. ------------------------------------------------------- */ .sticky-story > *, .sticky-story__vis > *, .steps > * { min-width: 0; } /* Y las palabras largas de monoespaciada, que se partan. */ .mpanel__list .text-mono, .mbox .sub, .mskin__file b { overflow-wrap: anywhere; } /* ── 58.11 · Las fichas de canal, todas con icono ──────── En «Los once, uno por uno» convivían siete logotipos de marca y cinco iconos de concepto: dos familias en la misma rejilla. Ahora los doce llevan icono Tabler, y lo que distingue a cada canal es el color de su pastilla. La pastilla va en color pleno con el glifo en blanco: el tinte suave de .bchip deja el icono casi invisible sobre una tarjeta que ya es clara. Los colores no son el hexadecimal de marca sino su versión oscurecida, la única que da contraste suficiente contra el blanco (≥4.3:1, frente al 3:1 que pide la norma para un glifo). ------------------------------------------------------- */ /* Tres selectores, no uno, por dos competidores distintos: · `.fcell .ico` de site.css pesa (0,2,0) y pinta navy; · `.bento .ico.bchip` de §9 pesa (0,3,0) y pinta el tinte suave. Se empata en peso con cada uno y se gana por orden de carga, que es el mismo truco que ya usaba .ico.bchip. */ /* 7 sep 2026: la pastilla sólida pasa a tinte suave con el icono en la tinta legible de la marca, como los demás cuadros de icono del sitio. */ .ico.bchip.ico--canal, .bento .ico.ico--canal, .explore .ico.ico--canal { background: color-mix(in srgb, var(--mk-ink, var(--buho-navy-950, #001144)) 11%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mk-ink, #001144) 16%, transparent); color: var(--mk-ink, var(--buho-navy-950, #001144)); } .ico.ico--canal .ti, .bento .ico.ico--canal .ti, .explore .ico.ico--canal .ti { color: var(--mk-ink, var(--buho-navy-950, #001144)); font-size: calc(var(--bc) * .48); } .sec--navy .ico.bchip.ico--canal, .closer .ico.bchip.ico--canal, .bento .dark .ico.ico--canal, .on-dark .ico.bchip.ico--canal { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); color: #fff; } .sec--navy .ico.ico--canal .ti, .closer .ico.ico--canal .ti, .bento .dark .ico.ico--canal .ti, .on-dark .ico.bchip.ico--canal .ti { color: #fff; } /* En la tarjeta destacada del bento (lima) la pastilla de color se pierde: el verde de WhatsApp sobre lima da 2.38 : 1 y el borde deja de leerse. Ahí gana la regla de siempre —vidrio blanco— que es lo que ya usaba §9 para esas tarjetas. */ .bento .accent .ico.ico--canal { background: rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .30); } .ico--canal.mk-whatsapp { --mk-ink: #128C4A; } /* 4.31 : 1 */ .ico--canal.mk-instagram { --mk-ink: #C1275A; } /* 5.67 : 1 */ .ico--canal.mk-messenger { --mk-ink: #0064E0; } /* 5.39 : 1 */ .ico--canal.mk-telegram { --mk-ink: #1B7FB5; } /* 4.42 : 1 */ .ico--canal.mk-tiktok { --mk-ink: #111827; } /* 17.7 : 1 */ .ico--canal.mk-line { --mk-ink: #0B7A3E; } /* 5.43 : 1 */ .ico--canal.mk-gmail { --mk-ink: #C5221F; } /* 5.80 : 1 */ .ico--canal.mk-x { --mk-ink: #111827; } .ico--canal.mk-waya { --mk-ink: #0330CC; } /* 9.14 : 1 */ /* El hover de la tarjeta ya levanta la pastilla (regla de .bchip); aquí solo se acompaña con algo de sombra propia. */ .fcell:hover > .ico--canal { box-shadow: 0 10px 20px color-mix(in srgb, var(--mk-ink, #001144) 20%, transparent); } @media (prefers-reduced-motion: reduce) { .fcell:hover > .ico--canal { box-shadow: none; } } /* ========================================================= 59 · SERVICIOS · lo que las seis páginas necesitaban --------------------------------------------------------- Los veinticinco SVG de esta sección eran, casi todos, el mismo objeto: una barra con título, una pastilla de estado y unas filas con su comprobación. Eso ya existe —.mbox y .mpanel de §58— así que aquí solo van las cuatro piezas que no tenían equivalente. ========================================================= */ /* ── 59.1 · El resultado de Google ─────────────────────── Para «tu empresa aparece cuando la buscan». La caja de búsqueda y el resultado, sobre fondo claro. No imita la marca de Google: es la forma de un resultado, con nuestra tipografía y nuestros colores. ------------------------------------------------------- */ .mserp { background: #fff; border-radius: 18px; padding: 18px; box-shadow: 0 18px 44px rgba(0, 17, 68, .13), 0 0 0 1px rgba(0, 17, 68, .06); } .mserp__q { display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-radius: 999px; background: var(--buho-cream, #F7F5EF); box-shadow: inset 0 0 0 1px rgba(0, 17, 68, .08); font: 500 13.5px/1 var(--font-sans); color: var(--color-text); } .mserp__q .ti { font-size: 16px; color: var(--color-text-muted); flex-shrink: 0; } .mserp__q span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mserp__r { margin-top: 16px; padding-top: 15px; border-top: 1px solid rgba(0, 17, 68, .07); } .mserp__r .url { display: block; font: 400 11.5px/1.4 var(--font-mono); color: var(--color-text-muted); overflow-wrap: anywhere; } .mserp__r b { display: block; margin: 4px 0 5px; font: 700 16px/1.3 var(--font-sans); letter-spacing: -.015em; color: var(--buho-blue-600, #0330CC); } .mserp__r p { margin: 0; font: 400 12.5px/1.55 var(--font-sans); color: var(--color-text-muted); } .mserp__stars { display: flex; align-items: center; gap: 6px; margin-top: 9px; font: 500 11.5px/1 var(--font-sans); color: var(--color-text-muted); } .mserp__stars i { font-size: 13px; color: #E8A317; } .mserp__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .mserp__tags span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: #E9F9EF; color: #0E8A45; font: 700 10px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; } .mserp__tags .ti { font-size: 12px; } /* ── 59.2 · La misma página en tres pantallas ──────────── Escritorio, tablet y celular, uno al lado del otro. Las tres siluetas son cajas con borde; lo que se ve dentro son barras de contenido, no texto de mentira. ------------------------------------------------------- */ .mresp { display: grid; grid-template-columns: 1fr 128px 74px; gap: 12px; align-items: end; } .mresp__d { border-radius: 12px; background: #fff; overflow: hidden; box-shadow: 0 14px 32px rgba(0, 17, 68, .12), 0 0 0 1px rgba(0, 17, 68, .07); } .mresp__bar { display: flex; align-items: center; gap: 5px; padding: 7px 9px; background: var(--buho-cream, #F7F5EF); border-bottom: 1px solid rgba(0, 17, 68, .07); } .mresp__bar i { width: 5px; height: 5px; border-radius: 50%; background: rgba(0, 17, 68, .16); } .mresp__bar span { margin-left: 4px; font: 500 8.5px/1 var(--font-mono); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mresp__in { padding: 9px; display: grid; gap: 6px; } .mresp__in .h { height: 9px; border-radius: 3px; background: var(--buho-navy-950, #001144); width: 62%; } .mresp__in .l { height: 5px; border-radius: 3px; background: rgba(0, 17, 68, .12); } .mresp__in .l--c { width: 78%; } .mresp__in .cta { height: 15px; width: 66px; border-radius: 999px; margin-top: 3px; background: var(--buho-blue-600, #0330CC); } .mresp__lb { display: block; margin-top: 8px; text-align: center; font: 700 8.5px/1 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--color-text-muted); } /* El celular no lleva barra de navegador sino muesca. */ .mresp__d--tel { border-radius: 14px; } .mresp__d--tel .mresp__bar { justify-content: center; padding: 6px; } .mresp__d--tel .mresp__bar i { width: 22px; height: 3px; border-radius: 999px; } .mresp__d--tel .mresp__in .cta { width: 100%; } @media (max-width: 620px) { .mresp { grid-template-columns: 1fr 78px; } .mresp__d--tab { display: none; } } /* ── 59.3 · Ficha de producto y carrito ────────────────── Para la tienda: la talla que se elige, el stock que queda y el resumen que se arma. La selección la toma el ratón, con la misma regla sin JavaScript de siempre. ------------------------------------------------------- */ .mshop { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 44px rgba(0, 17, 68, .13), 0 0 0 1px rgba(0, 17, 68, .06); } /* La ficha terminaba en el resumen del carrito y por eso el relleno inferior era más corto que el superior. Retirado ese bloque, `.mshop__top` es el único hijo y cierra la tarjeta: se iguala arriba y abajo. */ .mshop__top { padding: 18px; } /* ── La foto del producto ──────────────────────────────── Faltaba lo primero que mira quien compra. Aquí no entra una fotografía de banco, así que el producto se dibuja con el mismo recurso que la vitrina del hero (§65): fondo de estudio y el icono grande en tinta de marca. Debajo, las dos cosas que convierten un dibujo en una galería de verdad —las miniaturas y los colores— y el contador de la esquina, que es lo que dice que hay más fotos detrás. ------------------------------------------------------- */ .mshop__foto { display: grid; gap: 9px; margin-bottom: 16px; } .mshop__marco { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: radial-gradient(70% 55% at 50% 34%, rgba(255, 255, 255, .95), transparent 70%), linear-gradient(152deg, #E3E9FA, #F2EEF4 55%, #FBE4EE); box-shadow: inset 0 0 0 1px rgba(0, 17, 68, .06); } /* La sombra de apoyo, solo cuando el producto va dibujado: una fotografía ya trae la suya. */ .mshop__marco:not(:has(img))::after { content: ""; position: absolute; left: 50%; bottom: 30%; width: 38%; height: 14px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(50% 50%, rgba(0, 17, 68, .20), transparent 72%); filter: blur(5px); } /* El producto, con volumen: dos capas del mismo glifo —una clara arriba y otra oscura debajo, desplazada un pelo— dan el relieve que tiene un objeto iluminado desde arriba. */ .mshop__marco > .ti { position: relative; z-index: 1; font-size: 132px; line-height: 1; color: #6E7A9B; text-shadow: 0 -1.5px 0 rgba(255, 255, 255, .85), 0 10px 16px rgba(0, 17, 68, .18); } /* Con fotografía dentro, el marco se aparta: fondo casi blanco de estudio en vez del degradado de marca, que competía con el producto. `contain` porque una foto de producto se recorta mal —se le va la punta o la suela— y el encuadre ya viene hecho en el archivo. */ .mshop__marco:has(img) { background: #FCFCFE; } .mshop__marco > img { width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 2% 3%; } .mshop__marco .n { position: absolute; right: 10px; bottom: 10px; padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, .88); font: 600 9.5px/1 var(--font-mono); color: var(--color-text-muted); } .mshop__galeria { display: flex; align-items: center; gap: 7px; } .mshop__galeria > span:not(.mshop__colores) { width: 42px; height: 34px; border-radius: 9px; flex: none; overflow: hidden; display: grid; place-items: center; background: #F4F4FA; box-shadow: inset 0 0 0 1px rgba(0, 17, 68, .05); } /* Un solo archivo, cuatro encuadres: entera, la punta, el talón y el otro costado. Es lo que hace una galería de verdad, y ahorra tres peticiones. */ .mshop__galeria img { display: block; width: 100%; height: 100%; object-fit: cover; } .mshop__galeria .g1 img { object-fit: contain; padding: 3px; } /* `cover` sobre una caja de 42 × 34 apenas recorta: hay que acercarse de verdad para que se lea como otra toma. */ .mshop__galeria .g2 img { transform: scale(2); transform-origin: 80% 58%; } .mshop__galeria .g3 img { transform: scale(2); transform-origin: 14% 58%; } .mshop__galeria .g4 img { object-fit: contain; padding: 3px; transform: scaleX(-1); } .mshop__galeria > span:not(.mshop__colores) .ti { font-size: 15px; color: rgba(0, 17, 68, .30); } .mshop__galeria > span.on:not(.mshop__colores) { background: #E9ECFA; box-shadow: inset 0 0 0 2px var(--buho-navy-950, #001144); } /* Los tres colores que anuncia el texto de al lado. Son colores de producto, no de marca: van escritos aquí porque son contenido, igual que el color oficial de un logotipo. */ .mshop__colores { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; } .mshop__colores i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 17, 68, .14); } .mshop__colores i.c1 { background: #8A5A33; } .mshop__colores i.c2 { background: #23304E; } .mshop__colores i.c3 { background: #E7DFD4; } .mshop__colores i.on { box-shadow: inset 0 0 0 1px rgba(0, 17, 68, .14), 0 0 0 2px #fff, 0 0 0 3.5px var(--buho-navy-950, #001144); } @media (max-width: 640px) { .mshop__marco > .ti { font-size: 92px; } } .mshop__eb { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #E9F9EF; color: #0E8A45; font: 700 10px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; } .mshop__top b { display: block; margin: 12px 0 3px; font: 800 17px/1.25 var(--font-sans); letter-spacing: -.02em; } .mshop__top .sub { font: 400 12.5px/1.4 var(--font-sans); color: var(--color-text-muted); } .mshop__pr { display: block; margin-top: 10px; font: 800 24px/1 var(--font-sans); letter-spacing: -.03em; color: var(--buho-blue-600, #0330CC); } .mshop__tallas { display: flex; align-items: center; gap: 7px; margin-top: 15px; flex-wrap: wrap; } .mshop__tallas .lb { font: 600 12px/1 var(--font-sans); color: var(--color-text-muted); margin-right: 3px; } .mshop__tallas span:not(.lb) { min-width: 36px; padding: 8px 9px; border-radius: 10px; text-align: center; background: var(--buho-cream, #F7F5EF); font: 700 12.5px/1 var(--font-sans); color: var(--color-text); transition: background 160ms var(--ease-out, ease), color 160ms var(--ease-out, ease); } /* La talla elegida se marca con un aro, no invirtiendo el color: `.on-light` de a11y.css fuerza el texto oscuro —con !important y desde una hoja posterior— así que el blanco sobre navy no se puede sostener aquí. El aro dice lo mismo y no pelea con la accesibilidad. */ .mshop__tallas .on { background: #E9ECFA; box-shadow: inset 0 0 0 2px var(--buho-navy-950, #001144); } /* La de fábrica cede y la toma el cursor, sin JavaScript. */ .mshop:hover .mshop__tallas .on { background: var(--buho-cream, #F7F5EF); box-shadow: none; } .mshop:hover .mshop__tallas span:not(.lb):not(.no):hover { background: #E9ECFA; box-shadow: inset 0 0 0 2px var(--buho-navy-950, #001144); } /* La talla agotada no se puede elegir, y se nota. */ .mshop__tallas .no { opacity: .4; text-decoration: line-through; } .mshop:hover .mshop__tallas .no:hover { background: var(--buho-cream, #F7F5EF); box-shadow: none; } .mshop__cta { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 0 0; padding: 12px; border-radius: 12px; background: var(--buho-blue-600, #0330CC); color: #fff; font: 700 13px/1 var(--font-sans); } .mshop__cta .ti { font-size: 16px; } .mshop__env { display: block; margin-top: 9px; text-align: center; font: 400 11.5px/1.4 var(--font-sans); color: var(--color-text-muted); } /* El resumen del carrito ya no se usa en /servicios/tienda-virtual: el paso 1 termina en «Envío gratis en Lima». Las reglas se quedan por si vuelve a hacer falta la pieza. */ .mshop__cart { background: var(--buho-cream, #F7F5EF); padding: 15px 18px; } .mshop__cart .tt { font: 700 10px/1 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--color-text-muted); } .mshop__cart dl { margin: 11px 0 0; display: grid; gap: 7px; } .mshop__cart dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font: 400 12.5px/1.4 var(--font-sans); } .mshop__cart dt { color: var(--color-text-muted); min-width: 0; } .mshop__cart dd { margin: 0; font-family: var(--font-mono); font-weight: 600; white-space: nowrap; } .mshop__cart .desc dd { color: #0E8A45; } .mshop__cart .tot { margin-top: 11px; padding-top: 11px; border-top: 1px solid rgba(0, 17, 68, .10); font-weight: 800; font-size: 14.5px; } .mshop__cart .tot dd { font-size: 17px; letter-spacing: -.02em; } /* ── 59.4 · El mapa de redirecciones ───────────────────── Dirección vieja a la izquierda, 301 en medio, dirección nueva a la derecha. Es la pieza de la migración: lo que se pierde si nadie la hace es el posicionamiento. ------------------------------------------------------- */ .mredir { background: #fff; border-radius: 18px; padding: 6px 16px 14px; box-shadow: 0 18px 44px rgba(0, 17, 68, .13), 0 0 0 1px rgba(0, 17, 68, .06); } .mredir__r { display: grid; grid-template-columns: 1fr 46px 1fr; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(0, 17, 68, .07); } .mredir__r:last-of-type { border-bottom: 0; } .mredir__r > span { min-width: 0; } .mredir__r .vieja, .mredir__r .nueva { display: block; font: 500 11.5px/1.4 var(--font-mono); overflow-wrap: anywhere; } .mredir__r .vieja { color: var(--color-text-muted); text-decoration: line-through; text-decoration-color: rgba(0,17,68,.28); } .mredir__r .nueva { color: var(--color-text); } .mredir__r .dato { display: block; margin-top: 3px; font: 400 10.5px/1.3 var(--font-sans); color: var(--color-text-muted); } .mredir__r .cod { justify-self: center; display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; background: color-mix(in srgb, var(--buho-blue-600, #0330CC) 10%, transparent); color: var(--buho-blue-600, #0330CC); font: 700 10px/1 var(--font-mono); letter-spacing: .04em; } .mredir__foot { display: block; margin-top: 4px; padding-top: 13px; border-top: 1px solid rgba(0, 17, 68, .07); font: 500 11.5px/1.45 var(--font-sans); color: var(--color-text-muted); } .mredir__foot::after { content: ""; display: block; clear: both; } .mredir__foot .ti { float: left; margin: 1px 8px 0 0; font-size: 15px; color: #0E8A45; } .mredir__foot b { color: var(--color-text); font-weight: 700; } @media (max-width: 560px) { .mredir__r { grid-template-columns: 1fr; gap: 5px; } .mredir__r .cod { justify-self: start; } } /* ── 59.5 · Dos columnas que se comparan ───────────────── «Con cuatro proveedores» frente a «con Búho». Es el mismo argumento del .mig de migración, pero sin flecha: dos listas, una en rojo apagado y otra en verde. ------------------------------------------------------- */ .mvs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .mvs__c { padding: 17px 16px; border-radius: 18px; background: #fff; box-shadow: 0 14px 34px rgba(0, 17, 68, .10), 0 0 0 1px rgba(0, 17, 68, .06); display: flex; flex-direction: column; } .mvs__c--mal { background: #FBF7F7; } .mvs__c--bien { background: #F4FBF7; box-shadow: 0 16px 38px rgba(14, 138, 69, .13), 0 0 0 1px rgba(14, 138, 69, .14); } .mvs__lb { font: 700 10px/1 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--color-text-muted); } .mvs__c--bien .mvs__lb { color: #0E8A45; } .mvs ul { list-style: none; margin: 13px 0 0; padding: 0; display: grid; gap: 9px; } .mvs li { display: grid; grid-template-columns: 17px 1fr; gap: 9px; align-items: start; font: 500 12.5px/1.4 var(--font-sans); } .mvs li .ti { font-size: 16px; line-height: 1.15; } .mvs__c--mal li .ti { color: #C0453C; } .mvs__c--bien li .ti { color: #0E8A45; } .mvs__pie { margin-top: auto; padding-top: 13px; border-top: 1px solid rgba(0, 17, 68, .08); font: 500 11.5px/1.45 var(--font-sans); color: var(--color-text-muted); } .mvs__pie b { font: 800 15px/1 var(--font-sans); color: var(--color-text); letter-spacing: -.02em; } .mvs__c--bien .mvs__pie b { color: #0E8A45; } @media (max-width: 520px) { .mvs { grid-template-columns: 1fr; } } /* ── 59.6 · Los pasos, en vertical ─────────────────────── `.steps` de site.css son tres columnas. Cuando los pasos son cinco y viven en media página, se apilan con la línea que los une; el número lo sigue poniendo el contador. ------------------------------------------------------- */ .steps--vert { grid-template-columns: 1fr; gap: 0; } .steps--vert > div { border-top: 0; padding: 0 0 20px 30px; position: relative; } .steps--vert > div:last-child { padding-bottom: 0; } .steps--vert > div::before { position: absolute; left: 0; top: 1px; margin: 0; width: 20px; text-align: left; } /* La línea que baja entre un paso y el siguiente. */ .steps--vert > div::after { content: ""; position: absolute; left: 6px; top: 20px; bottom: 4px; border-left: 1.5px solid rgba(0, 17, 68, .12); } .steps--vert > div:last-child::after { display: none; } .steps--vert h3 { font-size: 15.5px; margin-bottom: 4px; } .steps--vert p { font-size: 13.5px; } .sec--navy .steps--vert > div::after { border-left-color: rgba(255, 255, 255, .18); } /* ── 59.7 · La nota al pie de una maqueta ──────────────── Una línea con icono flotado. Bloque, no flex: el mismo defecto de .mig__foot no se repite. ------------------------------------------------------- */ .mnota { display: block; margin: 18px 0 0; padding: 12px 14px; border-radius: 13px; background: var(--buho-cream, #F7F5EF); font: 500 12.5px/1.5 var(--font-sans); color: var(--color-text-muted); } .mnota::after { content: ""; display: block; clear: both; } .mnota .ti { float: left; margin: 1px 9px 0 0; font-size: 16px; color: var(--buho-blue-600, #0330CC); } .mnota b { color: var(--color-text); font-weight: 700; } .sec--navy .mnota, .phband .mnota { background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .74); } .sec--navy .mnota .ti { color: var(--motif-a-light, var(--buho-pink-300)); } .sec--navy .mnota b { color: #fff; } /* ── 59.8 · Tintes que faltaban ────────────────────────── Las marcas del taller: lo que se usa para construir y las plataformas de anuncios y pagos. Mismo formato que §41. ------------------------------------------------------- */ .mk-react { --mk: #087EA4; --mk-soft: rgba(8,126,164,.11); } .mk-nextjs { --mk: #111827; --mk-soft: rgba(17,24,39,.08); } .mk-vue { --mk: #35855A; --mk-soft: rgba(53,133,90,.12); } .mk-typescript { --mk: #2F74C0; --mk-soft: rgba(47,116,192,.11);} .mk-tailwind { --mk: #0C7C90; --mk-soft: rgba(12,124,144,.11);} .mk-figma { --mk: #C4402B; --mk-soft: rgba(196,64,43,.11); } .mk-googleanalytics { --mk: #C2760B; --mk-soft: rgba(194,118,11,.12); } .mk-googleads { --mk: #1A73E8; --mk-soft: rgba(26,115,232,.11);} .mk-googlemaps { --mk: #1B7A43; --mk-soft: rgba(27,122,67,.11); } .mk-paypal { --mk: #17479E; --mk-soft: rgba(23,71,158,.10); } .mk-stripe { --mk: #5851DD; --mk-soft: rgba(88,81,221,.11); } .mk-visa { --mk: #1A1F71; --mk-soft: rgba(26,31,113,.10); } .mk-mastercard { --mk: #B34700; --mk-soft: rgba(179,71,0,.11); } .mk-shopify { --mk: #5A8F2E; --mk-soft: rgba(90,143,46,.12); } /* Sobre navy, los que son casi negros o muy oscuros se aclaran. */ .sec--navy .mk-nextjs, .phband .mk-nextjs, .closer .mk-nextjs, .sec--navy .mk-visa, .phband .mk-visa, .closer .mk-visa, .sec--navy .mk-paypal, .phband .mk-paypal, .closer .mk-paypal { --mk: #C9D4EA; } .sec--navy .mk-figma, .sec--navy .mk-googleanalytics { --mk: #F0A868; } .sec--navy .mk-react, .sec--navy .mk-typescript, .sec--navy .mk-tailwind { --mk: #79C4E0; } .sec--navy .mk-vue, .sec--navy .mk-googlemaps, .sec--navy .mk-shopify { --mk: #7BD8A4; } /* Compensación de lienzo, medida sobre la tinta con svgelements. `mask-size: contain` escala por el lado menor, así que el factor es 24 dividido entre ese lado. */ .logo-marca.logo-visa { --lmb: 3.10; } /* tinta 24 × 7.8 */ .logo-marca.logo-mastercard { --lmb: 1.62; } /* tinta 24 × 14.8 */ .logo-marca.logo-tailwindcss{ --lmb: 1.67; } /* tinta 24 × 14.4 */ .logo-marca.logo-figma { --lmb: 1.44; } /* tinta 16.7 × 24 */ .logo-marca.logo-stripe { --lmb: 1.40; } /* tinta 17.1 × 24 */ .logo-marca.logo-paypal { --lmb: 1.18; } /* tinta 20.4 × 24 */ .logo-marca.logo-react { --lmb: 1.12; } /* tinta 24 × 21.4 */ .logo-marca.logo-googleanalytics { --lmb: 1.11; } /* typescript, nextdotjs, wordpress y laravel llenan el cuadro. */ /* ── 59.9 · Más tintas plenas para las pastillas ───────── §58.11 fijó el criterio: la pastilla va en color pleno con el glifo en blanco, y el color no es el de marca sino su versión oscurecida, la única con contraste suficiente. Aquí van las plataformas del taller y de la publicidad, todas medidas contra el blanco (mínimo 4,4 : 1). ------------------------------------------------------- */ .ico--canal.mk-google { --mk-ink: #1A73E8; } /* 4.51 : 1 */ .ico--canal.mk-googleanalytics { --mk-ink: #B45A08; } /* 4.77 : 1 */ .ico--canal.mk-googlemaps { --mk-ink: #1B7A43; } /* 5.37 : 1 */ .ico--canal.mk-meta { --mk-ink: #0064E0; } /* 5.39 : 1 */ .ico--canal.mk-facebook { --mk-ink: #0866FF; } /* 4.82 : 1 */ .ico--canal.mk-linkedin { --mk-ink: #0A66C2; } /* 5.69 : 1 */ .ico--canal.mk-youtube { --mk-ink: #CC0000; } /* 5.89 : 1 */ .ico--canal.mk-wordpress { --mk-ink: #21759B; } /* 5.14 : 1 */ .ico--canal.mk-woocommerce { --mk-ink: #7A4670; } /* 7.15 : 1 */ .ico--canal.mk-shopify { --mk-ink: #4C7A27; } /* 5.10 : 1 */ .ico--canal.mk-php { --mk-ink: #6C74B4; } /* 4.38 : 1 */ .ico--canal.mk-laravel { --mk-ink: #C43D2C; } /* 5.18 : 1 */ .ico--canal.mk-react { --mk-ink: #0B7A9C; } /* 4.91 : 1 */ .ico--canal.mk-vue { --mk-ink: #2F7A52; } /* 5.22 : 1 */ .ico--canal.mk-typescript { --mk-ink: #2F74C0; } /* 4.95 : 1 */ .ico--canal.mk-tailwind { --mk-ink: #0C7C90; } /* 4.88 : 1 */ .ico--canal.mk-nodejs { --mk-ink: #417E32; } /* 4.94 : 1 */ .ico--canal.mk-mysql { --mk-ink: #00618A; } /* 6.83 : 1 */ .ico--canal.mk-postgresql { --mk-ink: #2B5D82; } /* 7.02 : 1 */ .ico--canal.mk-docker { --mk-ink: #1D63ED; } /* 5.17 : 1 */ .ico--canal.mk-git { --mk-ink: #D2412A; } /* 4.64 : 1 */ .ico--canal.mk-figma { --mk-ink: #C4402B; } /* 5.10 : 1 */ .ico--canal.mk-paypal { --mk-ink: #17479E; } /* 8.64 : 1 */ .ico--canal.mk-stripe { --mk-ink: #4B44C8; } /* 7.09 : 1 */ .ico--canal.mk-visa { --mk-ink: #1A1F71; } /* 14.20 : 1 */ .ico--canal.mk-mastercard { --mk-ink: #B34700; } /* 5.50 : 1 */ /* ── 59.10 · Las garantías, en una sola columna ────────── `.grid-guar` de kit.css reparte en cuatro columnas y baja a dos a 1100 px. Cuatro tarjetas en fila dejan cada texto en un canal de unos 260 px: la letra se apelmaza y la garantía —que es una frase que hay que leer entera— se lee peor que en una lista. Pasan a **una sola columna en todos los anchos**. Se declara aquí y no en kit.css, que no se toca; las tres reglas de kit (4, 2 y 1 columnas) quedan cubiertas porque marcas.css se carga después y esta gana por orden. ------------------------------------------------------- */ .grid-guar { grid-template-columns: 1fr; } .grid-guar > * { min-width: 0; } /* La excepción declarada: `.grid-guar--2` existe para pedir dos columnas a propósito (hoy solo en nube/vps). Si se quiere que también baje a una, se quita este bloque. */ .grid-guar.grid-guar--2 { grid-template-columns: 1fr 1fr; } @media (max-width: 860px) { .grid-guar.grid-guar--2 { grid-template-columns: 1fr; } } /* ── 59.11 · `.tracks` dentro de media columna ─────────── `.tracks` son tres columnas fijas hasta 980 px. Dentro de un `.split` la mitad de 1024 son unos 460 px, y ahí tres columnas dejan 130 px cada una: «Archivo programado» se corta. Una media query no puede ver el ancho del contenedor, así que la rejilla se hace elástica: reparte por el sitio que hay, no por el ancho del viewport. ------------------------------------------------------- */ .split .tracks, .bento .tracks { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .tracks > * { min-width: 0; } /* El título de la ficha es un , no un h3: que pueda partir. */ .track > b { display: block; font: 800 16px/1.25 var(--font-sans); letter-spacing: -.015em; overflow-wrap: anywhere; } /* ── 59.12 · Islas claras dentro de secciones oscuras ──── Una maqueta blanca puede vivir dentro de una tarjeta navy del bento o de una sección oscura. `a11y.css` resuelve el caso general con `.on-light`, pero su selector se excluye a sí mismo dentro de `.bento .dark` —ahí manda el modo oscuro— así que la isla clara heredaba el texto blanco: blanco sobre blanco, ilegible, y sin aviso porque el navegador no protesta por eso. La regla se ata a las maquetas mismas y no a que alguien se acuerde de poner `.on-light` en el envoltorio, que es justo lo que se olvidó en dos de las seis páginas. ------------------------------------------------------- */ :is(.sec--navy, .phband, .closer, .bento .dark, .bento .accent) :is(.mserp, .mshop, .mredir, .mvs, .mbox, .mpanel, .mskin, .mfin, .mresp, .mfig), :is(.sec--navy, .phband, .closer, .bento .dark, .bento .accent) :is(.mserp, .mshop, .mredir, .mvs, .mbox, .mpanel, .mskin, .mfin, .mresp, .mfig) :where(h1, h2, h3, h4, h5, h6, p, li, b, strong, em, span, div, small, dt, dd, i) { color: var(--color-text) !important; } /* Lo que dentro de la isla clara sí va sobre fondo oscuro. */ :is(.sec--navy, .phband, .closer, .bento .dark, .bento .accent) :is(.mbox__bar, .mshop__cta, .mskin__prev, .whub__out), :is(.sec--navy, .phband, .closer, .bento .dark, .bento .accent) :is(.mbox__bar, .mshop__cta, .mskin__prev, .whub__out) :where(b, span, i, small, em) { color: #fff !important; } :is(.sec--navy, .phband, .closer, .bento .dark, .bento .accent) .mbox__bar .tag { color: #A7F3D0 !important; } :is(.sec--navy, .phband, .closer, .bento .dark, .bento .accent) .mskin__prev em { color: rgba(255,255,255,.5) !important; } :is(.sec--navy, .phband, .closer, .bento .dark, .bento .accent) .mskin__bar, :is(.sec--navy, .phband, .closer, .bento .dark, .bento .accent) .mskin__bar :where(span, i) { color: rgba(255,255,255,.62) !important; } /* Y lo que es apagado a propósito. */ :is(.sec--navy, .phband, .closer, .bento .dark, .bento .accent) :is(.mserp, .mshop, .mredir, .mvs, .mbox, .mpanel, .mskin, .mfin, .mresp, .mfig) :where(p, .sub, .dato, .url, .s, .l, .tt, .hora, .asig, .vieja, .mserp__stars, .mresp__lb, .mvs__lb, .mshop__env, .mbox__foot, .mredir__foot) { color: var(--color-text-muted) !important; } /* Los acentos en azul de la casa. */ :is(.sec--navy, .phband, .closer, .bento .dark, .bento .accent) :where(.mserp__r b, .mshop__pr, .cod) { color: var(--buho-blue-600, #0330CC) !important; } /* ── 59.13 · La maqueta en Figma ───────────────────────── Lo que el cliente aprueba antes de que se programe nada: dos tableros en el lienzo —la portada y una interna—, la portada seleccionada con su medida, el comentario de la segunda ronda y, a la derecha, los colores y las letras que salieron de su propia marca. Dentro de los tableros no hay texto de mentira sino barras de contenido, igual que en §59.2. ------------------------------------------------------- */ .mfig { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 16px 38px rgba(0, 17, 68, .13), 0 0 0 1px rgba(0, 17, 68, .07); } .mfig__bar { display: flex; align-items: center; gap: 9px; padding: 9px 12px; background: var(--buho-cream, #F5F6F7); border-bottom: 1px solid rgba(0, 17, 68, .07); } .mfig__dots { display: inline-flex; gap: 4px; } .mfig__dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(0, 17, 68, .16); } .mfig__bar b { flex: 1 1 auto; min-width: 0; font: 600 9.5px/1 var(--font-mono); color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Las dos personas que miran la misma maqueta. */ .mfig__who { display: inline-flex; } .mfig__who em { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 700 7.5px/1 var(--font-mono); font-style: normal; color: #fff; background: var(--buho-navy-950, #001144); border: 1.5px solid #fff; } .mfig__who em + em { margin-left: -6px; background: var(--buho-blue-600, #0330CC); } .mfig__body { display: grid; grid-template-columns: 1fr 92px; } /* El lienzo: gris con retícula de puntos, como cualquier editor. */ .mfig__can { padding: 20px 16px 26px; display: grid; grid-template-columns: 1fr .6fr; gap: 16px; align-items: start; background: radial-gradient(circle at 1px 1px, rgba(0, 17, 68, .10) 1px, transparent 1px) 0 0 / 12px 12px, #EDEEF1; } .mfig__nm { display: block; margin: 0 0 5px 1px; font: 700 8px/1 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--color-text-muted); } .mfig__art--sel .mfig__nm { color: var(--buho-blue-600, #0330CC); } .mfig__fr { position: relative; } .mfig__pg { background: #fff; border-radius: 4px; overflow: hidden; padding: 7px; display: grid; gap: 7px; box-shadow: 0 6px 18px rgba(0, 17, 68, .10); } .mfig__art--sel .mfig__pg { outline: 1.5px solid var(--buho-blue-600, #0330CC); outline-offset: 2px; } /* Lo que hay dentro del tablero. */ .mfig__nav { display: flex; align-items: center; gap: 5px; } .mfig__nav i { height: 4px; border-radius: 2px; background: rgba(0, 17, 68, .13); flex: 0 0 14px; } .mfig__nav i.b { flex: 0 0 20px; height: 7px; background: var(--buho-navy-950, #001144); margin-right: auto; } .mfig__nav i.cta { flex: 0 0 22px; height: 8px; border-radius: 999px; background: var(--buho-blue-600, #0330CC); } .mfig__hero { display: grid; gap: 5px; padding: 12px 8px 14px; border-radius: 3px; background: var(--buho-blue-50, #F6F8FD); } .mfig__hero i.h { height: 9px; border-radius: 3px; background: var(--buho-navy-950, #001144); width: 74%; } .mfig__hero i.h--b { width: 46%; } .mfig__hero i.l { height: 4px; border-radius: 2px; background: rgba(0, 17, 68, .14); } .mfig__hero i.l--c { width: 62%; } .mfig__hero i.cta { height: 12px; width: 48px; border-radius: 999px; margin-top: 4px; background: var(--buho-blue-600, #0330CC); } .mfig__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } .mfig__cards i { height: 22px; border-radius: 3px; background: rgba(0, 17, 68, .07); } .mfig__rows { display: grid; gap: 5px; } .mfig__rows i { height: 4px; border-radius: 2px; background: rgba(0, 17, 68, .13); } .mfig__rows i.l--c { width: 70%; } .mfig__foot { display: block; height: 12px; border-radius: 3px; background: var(--buho-navy-950, #001144); opacity: .85; } .mfig__ph { display: block; height: 30px; border-radius: 3px; background: rgba(3, 48, 204, .10); } /* Los tiradores de la selección y la medida, como en el editor. */ .mfig__hd { position: absolute; width: 6px; height: 6px; border-radius: 1px; background: #fff; border: 1.5px solid var(--buho-blue-600, #0330CC); } .mfig__hd.h1 { top: -6px; left: -6px; } .mfig__hd.h2 { top: -6px; right: -6px; } .mfig__hd.h3 { bottom: -6px; left: -6px; } .mfig__hd.h4 { bottom: -6px; right: -6px; } .mfig__dim { position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%); padding: 3px 7px; border-radius: 4px; white-space: nowrap; background: var(--buho-blue-600, #0330CC); color: #fff; font: 600 8px/1 var(--font-mono); } /* El comentario: la burbuja con la ronda que va. */ .mfig__pin { position: absolute; top: -12px; right: 9px; min-width: 20px; height: 20px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; border-radius: 999px 999px 999px 4px; border: 1.5px solid #fff; background: var(--buho-pink-600, #FF006F); color: #fff; font: 700 8.5px/1 var(--font-mono); box-shadow: 0 4px 10px rgba(0, 17, 68, .18); } .mfig__pin .ti { font-size: 10px; } /* La columna de la derecha: lo que se decide antes de programar. */ .mfig__side { padding: 14px 12px; display: grid; align-content: start; gap: 13px; background: #fff; border-left: 1px solid rgba(0, 17, 68, .07); } .mfig__grp { display: grid; gap: 6px; align-content: start; } .mfig__sh { font: 700 7.5px/1 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--color-text-muted); } .mfig__sw { display: flex; gap: 5px; } .mfig__sw i { width: 15px; height: 15px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 17, 68, .10); } .mfig__sw i.c1 { background: var(--buho-navy-950, #001144); } .mfig__sw i.c2 { background: var(--buho-blue-600, #0330CC); } .mfig__sw i.c3 { background: var(--buho-pink-600, #FF006F); } .mfig__sw i.c4 { background: var(--buho-cream, #F5F6F7); } .mfig__ty { display: flex; align-items: baseline; gap: 6px; } .mfig__ty b { font: 800 15px/1 var(--font-sans); letter-spacing: -.03em; color: var(--buho-navy-950, #001144); } .mfig__ty b.sm { font: 500 11px/1 var(--font-sans); } .mfig__ty em { font: 500 8px/1 var(--font-mono); font-style: normal; color: var(--color-text-muted); } .mfig__gr { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; } .mfig__gr i { height: 16px; border-radius: 2px; background: rgba(3, 48, 204, .12); } @media (max-width: 620px) { .mfig__body { grid-template-columns: 1fr; } .mfig__can { grid-template-columns: 1fr .58fr; } .mfig__side { display: flex; flex-wrap: wrap; align-items: start; gap: 14px 20px; border-left: 0; border-top: 1px solid rgba(0, 17, 68, .07); } .mfig__gr { width: 62px; } } /* ========================================================= 60 · SERVICIOS · los gráficos del hero (retirado) --------------------------------------------------------- Aquí vivían `.mvs`, `.mnoche`, `.mcurva`, `.mhoja`, `.mweb` y las tarjetas flotantes `.fflo`: los gráficos de la primera pasada de Servicios. Las seis páginas llevan ahora la escena de §61-§68 y ninguna clase de aquí se usaba ya en el sitio —367 líneas comprobadas una a una antes de quitarlas—. La copia está en `~/respaldo-servicios/marcas-antes-limpieza60.css`. ========================================================= */ /* ========================================================= 61 · WEB CORPORATIVA · la escena del hero --------------------------------------------------------- La escena enseña **cómo se hace** la web, no la web hecha: el constructor visual abierto, con la página a todo el ancho del lienzo y las herramientas flotando encima —que es como se ven los constructores modernos y como venía la referencia del cliente—. El marco es el de la maqueta de Waya (§57): mismos puntos, misma pastilla de dirección, mismas líneas y misma sombra. Sin un solo SVG y sin una sola dependencia nueva: cajas, rejillas, `conic-gradient` y los iconos Tabler que ya carga el sitio. Lo único externo son las máscaras de logotipo de siempre. ========================================================= */ /* ── 61.0 · El lienzo ──────────────────────────────────── La escena se diseña sobre un lienzo fijo y se escala entera: las piezas se colocan una sola vez con coordenadas medidas y en cada anchura solo cambia el factor. La caja mide justo lo que mide la escena escalada, así el hueco sobrante se reparte a los lados. ------------------------------------------------------- */ .wesc-wrap { --esc: 1; position: relative; width: calc(536px * var(--esc)); height: calc(var(--alto, 456px) * var(--esc)); margin-inline: auto; /* La animación de entrada va aquí y no en `.wesc`: `hfSlide` anima `transform`, y con `both` su último fotograma pisaba el `scale()` del lienzo. Dos transformaciones no caben en el mismo elemento. */ animation: hfSlide 620ms var(--ease-out) both; } @media (prefers-reduced-motion: reduce) { .wesc-wrap { animation: none; } } .wesc { position: absolute; left: 0; top: 0; width: 536px; height: var(--alto, 456px); transform: scale(var(--esc)); transform-origin: left top; /* El acento de la escena. Por defecto es el azul Búho, que es lo que llevan las seis de /servicios; las páginas de Mensajería lo cambian entero desde `.wesc--waya` (§74) sin tocar ni una regla del mueble. Va aquí, en el lienzo, y no en `.wsc`, para que también lo hereden las piezas que flotan fuera de la ventana. */ --ac-ink: var(--buho-blue-600, #0330CC); /* el icono, la línea */ --ac-tinta: var(--buho-blue-700, #02259F); /* texto sobre claro */ --ac-suave: var(--buho-blue-50, #F6F8FD); /* fondo de cuadro */ --ac-claro: var(--buho-blue-100, #E6EAFA); /* fondo de pastilla */ --ac-alto: var(--buho-blue-300, #9FB0EC); /* sobre la banda oscura */ --ac-medio: var(--buho-blue-500, #3055D5); /* arranque del degradado */ } /* Entre 980 y 1180 la columna del hero se estrecha. */ @media (max-width: 1180px) { .wesc-wrap { --esc: .76; } } /* Al apilarse, la maqueta recupera el ancho completo. */ @media (max-width: 980px) { .wesc-wrap { --esc: 1; } } @media (max-width: 620px) { .wesc-wrap { --esc: .80; } } @media (max-width: 470px) { .wesc-wrap { --esc: .62; } } @media (max-width: 390px) { .wesc-wrap { --esc: .56; } } /* ── 61.1 · La ventana ─────────────────────────────────── El acabado sale entero de §57: radio de 20, borde de 1 px, sombra larga y las variables de línea y gris tenue, que se heredan a todo el interior. ------------------------------------------------------- */ .wsc { position: absolute; z-index: 3; left: 8px; top: 4px; width: 520px; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 34px 76px rgba(26, 20, 70, .16), 0 0 0 1px rgba(26, 20, 70, .05); --a-linea: #ECECF3; --a-tenue: #7C8398; } /* La barra del navegador, prestada tal cual de la maqueta de Waya: lo que se está editando es una web, y la web vive en el navegador. */ .wsc__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--a-linea); background: #FCFCFE; } .wsc__dots { display: inline-flex; gap: 5px; } .wsc__dots i { width: 7px; height: 7px; border-radius: 50%; background: #DCDCE6; } .wsc__url { margin: 0 auto; background: #F3F3F8; border-radius: 999px; padding: 4px 16px; font: 500 10.5px/1 var(--font-mono); color: var(--a-tenue); } /* ── La barra del editor ───────────────────────────────── Tres columnas: la marca a un lado, el selector de pantalla justo en el centro y publicar al otro. Centrado de verdad —columna propia—, no «lo que sobre». ------------------------------------------------------- */ .wsc__top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 9px 12px; background: var(--buho-navy-950, #001144); } .wsc__id { display: flex; align-items: center; gap: 9px; } .wsc__mk { width: 23px; height: 23px; border-radius: 7px; display: grid; place-items: center; background: rgba(255, 255, 255, .13); } .wsc__mk .logo-marca { width: 13px; height: 13px; color: #fff; } .wsc__doc { display: grid; gap: 3px; } .wsc__doc b { font: 700 10.5px/1 var(--font-sans); color: #fff; } .wsc__doc span { font: 500 8.5px/1 var(--font-mono); color: rgba(255, 255, 255, .58); } /* La versión de celular no es un extra: se edita en el mismo sitio, y por eso el selector va en el centro. */ .wsc__disp { justify-self: center; display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, .10); } .wsc__disp i { width: 24px; height: 21px; border-radius: 7px; display: grid; place-items: center; font-size: 13px; color: rgba(255, 255, 255, .60); } .wsc__disp i.on { background: rgba(255, 255, 255, .95); color: var(--buho-navy-950, #001144); } .wsc__act { justify-self: end; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 9px; background: var(--buho-pink-700, #CC0056); color: #fff; font: 700 10px/1 var(--font-sans); } .wsc__act .ti { font-size: 13px; } /* ── 61.2 · El lienzo y la página ──────────────────────── La página ocupa todo el ancho: es la protagonista, y las herramientas van encima. ------------------------------------------------------- */ .wsc__can { position: relative; padding: 12px; background: #F1F1F7; } .wsc__pg { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 12px rgba(26, 20, 70, .07), 0 0 0 1px var(--a-linea); } .wsc__nav { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-bottom: 1px solid var(--a-linea); } .wsc__nav .lg { width: 15px; height: 15px; border-radius: 5px; background: var(--buho-navy-950, #001144); } .wsc__nav em { font: 600 8px/1 var(--font-sans); font-style: normal; color: var(--color-text-muted); } .wsc__nav .ct { margin-left: auto; padding: 5px 10px; border-radius: 999px; background: var(--buho-navy-950, #001144); color: #fff; font: 700 8px/1 var(--font-sans); } /* La sección seleccionada, con su asa: es lo que convierte la maqueta en un editor y no en una captura. */ .wbld__sec { position: relative; margin: 26px 10px 0; padding: 9px; border-radius: 10px; box-shadow: 0 0 0 1.5px var(--buho-blue-600, #0330CC); } .wbld__tag { position: absolute; left: -1.5px; top: -18px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px 3px; border-radius: 7px 7px 0 0; background: var(--buho-blue-600, #0330CC); color: #fff; font: 700 7.5px/1 var(--font-sans); } .wbld__tag .ti { font-size: 10px; } .wbld__hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 9px; } /* El bloque de imagen, que en la referencia era una foto y aquí es color de marca: no metemos fotos de banco. */ .wbld__vis { position: relative; overflow: hidden; min-height: 122px; padding: 11px; border-radius: 10px; /* El pie va a la derecha: el panel flotante cubre la mitad izquierda del bloque, y ahí no se leería nada. */ display: flex; align-items: flex-end; justify-content: flex-end; background: linear-gradient(146deg, var(--buho-navy-900, #00175D), var(--buho-blue-600, #0330CC) 78%); } .wbld__ciudad { position: absolute; right: 11px; top: 11px; display: flex; align-items: flex-end; gap: 3px; height: 52px; } .wbld__ciudad i { width: 9px; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .30)); } .wbld__ciudad i:nth-child(1) { height: 44%; } .wbld__ciudad i:nth-child(2) { height: 72%; } .wbld__ciudad i:nth-child(3) { height: 100%; } .wbld__ciudad i:nth-child(4) { height: 58%; } .wbld__ciudad i:nth-child(5) { height: 84%; } .wbld__pie { display: flex; align-items: center; gap: 8px; } .wbld__pie .ln { width: 22px; height: 1px; background: rgba(255, 255, 255, .55); } .wbld__pie b { display: block; font: 700 9px/1.3 var(--font-sans); color: #fff; } .wbld__pie span { display: block; font: 500 7.5px/1.3 var(--font-mono); color: rgba(255, 255, 255, .72); } .wbld__tx { padding: 4px 2px 0; } .wbld__tx b { display: block; letter-spacing: -.01em; font: 800 13px/1.22 var(--font-sans); color: var(--color-text); } .wbld__tx b em { font-style: italic; color: var(--buho-pink-600, #FF006F); } .wbld__tx p { margin: 6px 0 0; font: 500 8.5px/1.45 var(--font-sans); color: var(--color-text-muted); } .wbld__tx .bt { display: inline-flex; margin-top: 10px; padding: 6px 12px; border-radius: 999px; background: var(--buho-navy-950, #001144); color: #fff; font: 700 8px/1 var(--font-sans); } /* El cursor de texto: se está escribiendo ahí mismo. */ .wbld__car { display: inline-block; width: 1.5px; height: 9px; margin-left: 2px; vertical-align: -1px; background: var(--buho-blue-600, #0330CC); animation: wbldCar 1.05s steps(1) infinite; } @keyframes wbldCar { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .wbld__car { animation: none; } } /* Dónde va a caer el bloque que viaja. */ .wbld__drop { display: block; height: 3px; margin: 11px 18px 0; border-radius: 999px; background: var(--buho-blue-600, #0330CC); box-shadow: 0 0 0 4px rgba(3, 48, 204, .13); animation: wbldDrop 3.2s var(--ease-out, ease) infinite; } @keyframes wbldDrop { 0%, 30% { opacity: .22; transform: scaleX(.88); } 52%, 74% { opacity: 1; transform: scaleX(1); } 100% { opacity: .22; transform: scaleX(.88); } } @media (prefers-reduced-motion: reduce) { .wbld__drop { animation: none; opacity: 1; } } /* El formulario: el mismo bloque que se está arrastrando, ya puesto más abajo. Por eso la escena tiene sentido. */ .wbld__form { display: grid; gap: 7px; margin: 11px 10px 0; padding: 11px; border-radius: 9px; background: #F7F7FB; box-shadow: inset 0 0 0 1px var(--a-linea); } .wbld__form > b { font: 800 9.5px/1 var(--font-sans); color: var(--color-text); } .wbld__form .fr { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; } .wbld__form .fl { height: 16px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--a-linea); } .wbld__form .fx { display: flex; align-items: center; gap: 9px; } .wbld__form .fb { padding: 6px 13px; border-radius: 999px; background: var(--buho-pink-700, #CC0056); color: #fff; font: 700 8px/1 var(--font-sans); } .wbld__form .fn { display: inline-flex; align-items: center; gap: 5px; font: 600 7.5px/1 var(--font-sans); color: var(--color-text-muted); } .wbld__form .fn .ti { font-size: 11px; color: var(--buho-blue-600, #0330CC); } /* ── 61.3 · El panel, flotando sobre la página ─────────── OJO con las coordenadas: el panel y el bloque que viaja son hijos de `.wsc__can`, no de `.wesc`, así que su `top` se cuenta desde el lienzo —89 px más abajo que la escena—. En la referencia el panel de bloques no es una columna: es una tarjeta translúcida encima del lienzo, y la web se ve entera por debajo. Eso es lo que se copia —la idea, no el HTML: aquí no hay Tailwind ni iconos de otra librería—. ------------------------------------------------------- */ .wpan { position: absolute; z-index: 6; left: 22px; top: 61px; width: 156px; padding: 11px 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 22px 44px rgba(26, 20, 70, .18), 0 0 0 1px rgba(26, 20, 70, .06); } .wpan__tabs { display: flex; align-items: center; justify-content: space-around; padding-bottom: 9px; margin-bottom: 10px; border-bottom: 1px solid var(--a-linea, #ECECF3); color: #B9BAC6; } .wpan__tabs .ti { font-size: 14px; } .wpan__tabs .ti.on { color: var(--buho-navy-950, #001144); } .wpan__t { display: flex; align-items: center; gap: 5px; margin: 0 2px 8px; font: 700 9px/1 var(--font-sans); color: var(--color-text); } .wpan__t .ti { font-size: 11px; color: var(--a-tenue, #7C8398); } .wpan__wg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .wpan__wg span { display: grid; justify-items: center; align-content: center; gap: 5px; height: 42px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--a-linea, #ECECF3); font: 600 8px/1 var(--font-sans); color: var(--color-text-muted); } .wpan__wg span .ti { font-size: 15px; color: var(--buho-blue-600, #0330CC); } /* El hueco que deja el bloque que se está arrastrando. */ .wpan__wg span.sel { background: var(--buho-blue-100, #E6EAFA); box-shadow: inset 0 0 0 1.5px var(--buho-blue-600, #0330CC); color: var(--buho-blue-700, #02259F); } /* ── 61.4 · El bloque que se arrastra ──────────────────── Sale del panel y baja hasta la línea. Es el único movimiento grande de la escena: si algo tiene que contar que esto se arma arrastrando, es esto. ------------------------------------------------------- */ .wbld__drag { position: absolute; z-index: 8; left: 110px; top: 160px; display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 11px; background: #fff; color: var(--buho-blue-700, #02259F); font: 700 9.5px/1 var(--font-sans); box-shadow: 0 16px 34px rgba(26, 20, 70, .22), 0 0 0 1.5px var(--buho-blue-600, #0330CC); animation: wbldLleva 3.2s var(--ease-in-out, ease-in-out) infinite; } .wbld__drag > .ti { font-size: 14px; color: var(--buho-blue-600, #0330CC); } .wbld__cur { position: absolute; right: -11px; bottom: -13px; font-size: 17px; color: var(--buho-navy-950, #001144); text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 3px 7px rgba(26, 20, 70, .30); } @keyframes wbldLleva { 0% { transform: translate(0, 0) rotate(-3deg); } 52%, 74% { transform: translate(150px, 22px) rotate(-1deg); } 100% { transform: translate(0, 0) rotate(-3deg); } } @media (prefers-reduced-motion: reduce) { .wbld__drag { animation: none; transform: translate(150px, 22px) rotate(-1deg); } } /* ── 61.5 · Las notas, flotando ────────────────────────── Tres insignias colgadas de bordes distintos del editor. Como la mayor parte de cada una queda fuera de la ventana, tapan muy poco de lo que hay debajo. Los aros son `conic-gradient`, no SVG. El relleno se anima con una propiedad registrada: donde el navegador no la soporte, el aro sale directamente en su valor final. ------------------------------------------------------- */ @property --wseo-v { syntax: ""; inherits: false; initial-value: 0; } .wpt { position: absolute; z-index: 9; display: grid; justify-items: center; gap: 6px; width: max-content; animation: wptFlota 6s var(--ease-in-out, ease-in-out) infinite; } .wpt__aro { position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; --wseo-v: var(--v, 0); background: conic-gradient(#0E8A45 calc(var(--wseo-v) * 1%), rgba(14, 138, 69, .14) 0); box-shadow: 0 14px 30px rgba(26, 20, 70, .18); animation: wseoLlena 1.4s var(--ease-out, ease) both; } @keyframes wseoLlena { from { --wseo-v: 0; } to { --wseo-v: var(--v); } } /* El hueco del centro, para que sea un aro y no un disco. Cuanto más grande el hueco, más fino el aro: a 6 px el verde pesaba tanto como la cifra que rodea. */ .wpt__aro::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fff; } .wpt__aro b { position: relative; z-index: 1; font: 700 17px/1 var(--font-mono); letter-spacing: -.03em; color: #0E8A45; } .wpt__lb { padding: 5px 9px; border-radius: 999px; background: #fff; box-shadow: 0 8px 18px rgba(26, 20, 70, .14), 0 0 0 1px rgba(26, 20, 70, .05); font: 700 8px/1 var(--font-sans); color: var(--color-text); white-space: nowrap; } /* Que respiren, cada una a su ritmo. */ /* El único fotograma de flotación del sitio. Lleva la rotación dentro porque una animación de `transform` pisa la propiedad entera: sin esto, las tarjetas giradas se enderezaban de golpe al empezar a moverse. Quien no gira no declara `--rot` y se queda en cero. */ @keyframes wptFlota { 0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); } 50% { transform: translateY(-6px) rotate(var(--rot, 0deg)); } } .wpt--acc { animation-delay: -2s; } .wpt--seo { animation-delay: -4s; } @media (prefers-reduced-motion: reduce) { .wpt { animation: none; } .wpt__aro { animation: none; --wseo-v: var(--v); } } /* ── 61.6 · Dónde va cada pieza ────────────────────────── Coordenadas sobre el lienzo de 536 × 456. Las notas cuelgan de tres bordes distintos, y ninguna cae encima del panel. ------------------------------------------------------- */ .wpt--ren { left: 488px; top: 112px; } .wpt--acc { left: 488px; top: 292px; } .wpt--seo { left: -30px; top: 344px; } /* En la escena de la tablet (§61.7) las tres cuelgan de otros bordes: la tarjeta de publicado ocupa la esquina de abajo a la derecha y la píldora la de abajo a la izquierda. */ .wesc--auto .wpt--ren { left: 486px; top: 92px; } .wesc--auto .wpt--acc { left: 486px; top: 214px; } .wesc--auto .wpt--seo { left: -34px; top: 236px; } /* ── 61.7 · La escena: la tablet con el panel abierto ──── Sustituye a la ventana del constructor (§61.1–61.4). La composición es la que trajo el cliente —barra del navegador flotando, tablet, tarjeta de publicado y píldora— y el acabado es el del editor de `wordpress` (§64): paneles claros, línea de 1 px, huecos de imagen en degradado cálido y la franja oscura del editor arriba. Lo que comparten las dos escenas está reutilizado tal cual —`.wsc__top`, `.wsc__seg`, `.wsc__disp`, `.wwp__dock`, `.wwp__pg` y sus piezas—; lo propio de esta es el panel de páginas, que en `wordpress` es un insertador de bloques. Cero SVG, cero dependencias nuevas, cero fotos de banco. ------------------------------------------------------- */ .wesc--auto { --alto: 483px; } /* La barra del navegador, flotando sobre la tablet. Es la `.wsc__bar` de siempre, desprendida de la ventana. */ .wbr { position: absolute; z-index: 7; left: 96px; top: 0; width: 344px; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 14px; background: #fff; box-shadow: 0 16px 34px rgba(26, 20, 70, .16), 0 0 0 1px rgba(26, 20, 70, .05); } .wbr__dots { display: inline-flex; gap: 5px; } .wbr__dots i { width: 7px; height: 7px; border-radius: 50%; background: #DCDCE6; } .wbr__url { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: #F3F3F8; font: 500 10px/1 var(--font-mono); color: #7C8398; } .wbr__url > .ti { font-size: 11px; } .wbr__nav { display: inline-flex; align-items: center; gap: 8px; color: #C9CBD6; } .wbr__nav .ti { font-size: 12px; } /* La tablet. El bisel era navy con aro azul y pesaba demasiado: un marco oscuro de 10 px alrededor de una pantalla clara compite con lo que hay dentro. Ahora es crema con un aro un tono más, los mismos dos tonos cálidos de los huecos de imagen de §64, y el único oscuro de la escena vuelve a ser la franja del editor, que es donde tiene sentido. Se probaron tres —lavanda, blanco y crema— sobre el render: el crema es el que ata el marco con la web cálida que hay dentro sin desaparecer en el aurora rosado del hero. */ .wtab { position: absolute; z-index: 3; left: 4px; top: 54px; width: 528px; padding: 6px; border-radius: 24px; background: #F7F5EF; box-shadow: 0 0 0 1px rgba(228, 221, 210, .95), inset 0 0 0 1px rgba(0, 17, 68, .05), 0 30px 68px rgba(26, 20, 70, .16); } .wtab__scr { display: flex; flex-direction: column; height: 308px; border-radius: 18px; overflow: hidden; background: #fff; --a-linea: #ECECF3; --a-tenue: #7C8398; } .wtab__body { flex: 1; display: grid; grid-template-columns: 34px 138px 1fr; min-height: 0; } /* Dentro de la tablet la franja del editor no lleva el radio de la ventana: lo pone la pantalla. */ .wtab__scr .wsc__top { padding: 8px 11px; } /* La página del cliente respira un punto menos que en el hero de `wordpress`: aquí comparte pantalla con el panel de páginas y la tablet tiene alto fijo. */ .wtab__body .wwp__pg { padding: 11px; gap: 8px; } /* La nota de rendimiento cuelga del borde derecho, justo a la altura del párrafo: el texto se aparta para que ninguna de las dos tape a la otra. */ .wtab__body .wwp__enc > div { padding-right: 36px; } /* El panel de páginas. En `wordpress` este hueco lo ocupa el insertador de bloques; aquí son las páginas del sitio, que es lo que el cliente va a tocar. */ .wpg { display: flex; flex-direction: column; gap: 8px; padding: 10px; background: #fff; border-right: 1px solid var(--a-linea, #ECECF3); } .wpg__tabs { display: flex; gap: 9px; padding-bottom: 7px; border-bottom: 1px solid var(--a-linea, #ECECF3); font: 600 8px/1 var(--font-sans); color: var(--a-tenue, #7C8398); } .wpg__tabs span.on { position: relative; font-weight: 700; color: var(--color-text); } .wpg__tabs span.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; border-radius: 2px; background: var(--buho-blue-600, #0330CC); } .wpg__lb { font: 700 6.5px/1 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--color-text-subtle); } .wpg__it { display: flex; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 8px; font: 600 8px/1 var(--font-sans); color: var(--color-text-muted); } .wpg__it .ti { font-size: 12px; color: var(--a-tenue, #7C8398); } .wpg__it .der { margin-left: auto; font-size: 10px; color: #C9CBD6; } .wpg__it.on { background: var(--buho-blue-100, #E6EAFA); box-shadow: inset 0 0 0 1.5px var(--buho-blue-600, #0330CC); color: var(--buho-blue-700, #02259F); } .wpg__it.on .ti, .wpg__it.on .der { color: var(--buho-blue-700, #02259F); } .wpg__add { margin-top: auto; padding: 7px 9px; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 4px; border: 1px dashed #D6D7E2; font: 600 7.5px/1 var(--font-sans); color: var(--a-tenue, #7C8398); } .wpg__add .ti { font-size: 11px; } /* La tarjeta de publicado, saliéndose de la tablet. */ .wpub { position: absolute; z-index: 8; left: 330px; top: 318px; width: 190px; padding: 16px 15px 17px; border-radius: 20px; text-align: center; background: #fff; box-shadow: 0 26px 56px rgba(26, 20, 70, .20), 0 0 0 1px rgba(26, 20, 70, .05); animation: wptFlota 7s var(--ease-in-out, ease-in-out) infinite; } .wpub__bt { position: relative; display: block; padding: 9px 12px; border-radius: 11px; background: var(--buho-pink-700, #CC0056); color: #fff; font: 700 10px/1 var(--font-sans); } .wpub__bt .ti { position: absolute; right: -9px; bottom: -12px; font-size: 17px; color: var(--buho-navy-950, #001144); text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 3px 7px rgba(26, 20, 70, .30); animation: wpubClic 3.4s var(--ease-in-out, ease-in-out) infinite; } .wpub__ok { width: 42px; height: 42px; margin: 15px auto 9px; border-radius: 50%; display: grid; place-items: center; background: #E9F9EF; color: #0E8A45; animation: wpubOk 3.4s var(--ease-out, ease) infinite; } .wpub__ok .ti { font-size: 22px; } .wpub b { display: block; font: 800 11px/1.25 var(--font-sans); color: var(--color-text); } .wpub p { margin: 5px 0 0; font: 500 8.5px/1.45 var(--font-sans); color: var(--color-text-muted); } @keyframes wpubClic { 0%, 62%, 100% { transform: translate(0, 0); } 68%, 74% { transform: translate(2px, 2px) scale(.9); } } @keyframes wpubOk { 0%, 74%, 100% { transform: scale(1); } 82% { transform: scale(1.12); } } /* Los destellos de la referencia, con cajas y no con SVG. */ .wspark { position: absolute; right: -6px; top: -12px; width: 30px; height: 26px; } .wspark i { position: absolute; display: block; height: 2.5px; border-radius: 999px; background: var(--buho-blue-400, #6D87E1); } .wspark i:nth-child(1) { width: 13px; left: 0; top: 12px; transform: rotate(-52deg); } .wspark i:nth-child(2) { width: 15px; left: 11px; top: 4px; transform: rotate(-34deg); } .wspark i:nth-child(3) { width: 10px; left: 17px; top: 19px; } /* La píldora de siempre: lo que se lleva el cliente. */ .wauto { position: absolute; z-index: 7; left: 24px; top: 415px; display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 999px; background: var(--buho-navy-950, #001144); color: #fff; font: 800 13px/1 var(--font-sans); letter-spacing: -.01em; box-shadow: 0 18px 36px rgba(26, 20, 70, .22), 0 0 0 1px rgba(255, 255, 255, .07) inset; } .wauto__ic { width: 22px; height: 16px; border-radius: 5px; padding: 3px; display: flex; gap: 2px; background: var(--buho-blue-500, #3055D5); } .wauto__ic > i { width: 6px; border-radius: 1.5px; background: rgba(255, 255, 255, .92); } .wauto__ic > span { flex: 1; display: grid; gap: 2px; } .wauto__ic > span i { border-radius: 1.5px; background: rgba(255, 255, 255, .92); } @media (prefers-reduced-motion: reduce) { .wpub, .wpub__bt .ti, .wpub__ok { animation: none; } } /* ========================================================= 62 · SERVICIOS · el kit de las escenas del hero --------------------------------------------------------- Las cinco páginas de Servicios cuentan cosas distintas, pero la ventana es la misma: el marco de §57 —puntos, pastilla de dirección, líneas tenues— con una barra oscura de herramienta debajo y, dentro, la hoja blanca de lo que se está enseñando. Lo que cambia de una página a otra es el contenido de la hoja, no el mueble. Aquí van las piezas que se repiten. Cada escena añade después lo suyo, y nada más que lo suyo. ========================================================= */ /* ── 62.1 · El control central de la barra ─────────────── En `web-corporativa` son los tres tamaños de pantalla; en las demás, tres pestañas con nombre. Mismo mueble. ------------------------------------------------------- */ .wsc__seg { justify-self: center; display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, .10); } .wsc__seg span { padding: 5px 10px; border-radius: 7px; font: 600 8.5px/1 var(--font-sans); color: rgba(255, 255, 255, .60); white-space: nowrap; } .wsc__seg span.on { background: rgba(255, 255, 255, .95); color: var(--buho-navy-950, #001144); } /* ── 62.2 · Piezas de la hoja ────────────────────────────*/ .wsc__hd { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-bottom: 1px solid var(--a-linea, #ECECF3); } .wsc__hd > .ti { font-size: 15px; color: var(--ac-ink); } .wsc__hd b { font: 800 11px/1 var(--font-sans); letter-spacing: -.01em; color: var(--color-text); } .wsc__hd .der { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; } .wsc__chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font: 700 7.5px/1 var(--font-sans); white-space: nowrap; } .wsc__chip .ti { font-size: 10px; } .wsc__chip--ok { background: #E9F9EF; color: #0E8A45; } .wsc__chip--mal { background: var(--buho-pink-100, #FFE6EF); color: var(--buho-pink-700, #CC0056); } .wsc__chip--n { background: var(--ac-claro); color: var(--ac-tinta); } .wsc__chip--gris{ background: #F1F1F7; color: var(--a-tenue, #7C8398); } .wsc__cpo { padding: 11px 12px; display: grid; gap: 9px; } .wsc__g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .wsc__g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .wsc__g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; } .wsc__box { padding: 10px; border-radius: 10px; background: #F7F7FB; box-shadow: inset 0 0 0 1px var(--a-linea, #ECECF3); } .wsc__kpi { display: grid; gap: 5px; } .wsc__kpi b { font: 700 15px/1 var(--font-mono); letter-spacing: -.03em; color: var(--buho-navy-950, #001144); } .wsc__kpi span { font: 600 7.5px/1.2 var(--font-sans); color: var(--color-text-muted); } .wsc__kpi .ti { font-size: 12px; color: var(--ac-ink); } .wsc__lin { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-top: 1px solid var(--a-linea, #ECECF3); } .wsc__lin .ic { width: 24px; height: 24px; border-radius: 8px; flex: none; display: grid; place-items: center; font-size: 13px; background: var(--ac-suave); color: var(--ac-ink); } .wsc__lin b { display: block; font: 700 8.5px/1.2 var(--font-sans); color: var(--color-text); } .wsc__lin .s { display: block; margin-top: 3px; font: 500 7.5px/1.2 var(--font-mono); color: var(--color-text-muted); } .wsc__lin .val { margin-left: auto; font: 700 9px/1 var(--font-mono); color: var(--color-text); white-space: nowrap; } .wsc__prog { height: 6px; border-radius: 999px; background: rgba(3, 48, 204, .12); overflow: hidden; } .wsc__prog i.p80 { width: 80%; } .wsc__prog i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--ac-medio), var(--ac-tinta)); } /* La banda oscura del pie de la hoja. */ .wsc__pie { display: flex; align-items: center; gap: 9px; padding: 11px 12px; background: var(--buho-navy-950, #001144); } .wsc__pie > .ti { font-size: 14px; color: var(--ac-alto); } .wsc__pie b { display: block; font: 700 8.5px/1 var(--font-sans); color: #fff; } .wsc__pie .m { display: block; margin-top: 3px; font: 500 8px/1 var(--font-mono); color: rgba(255, 255, 255, .62); } .wsc__pie .der { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; } /* Variantes del panel: a la derecha, y con lista en vez de rejilla de bloques. */ .wpan--der { left: auto; right: 20px; } .wpan__ls { display: grid; gap: 6px; } .wpan__ls span { display: flex; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px var(--a-linea, #ECECF3); font: 600 8px/1 var(--font-sans); color: var(--color-text); } .wpan__ls span > .ti { font-size: 12px; color: var(--ac-ink); } .wpan__ls span .ok { margin-left: auto; font-size: 12px; color: #0E8A45; } .wpan__ls span.off { color: var(--a-tenue, #7C8398); text-decoration: line-through; } .wpan__ls span.off > .ti { color: #C9CBD6; } .wpan__ls span.off .no { margin-left: auto; font-size: 12px; color: #C9CBD6; text-decoration: none; } /* ── 62.4 · La tarjeta de dato, con cabecera y pie ─────── Hermana mayor de `.wflt`: se usa cuando el dato no se explica con cuatro palabras y hace falta decir qué sustituye. Cabecera con cuadro de color y etiqueta, la cifra, la línea que la nombra y un pie que remata. Los colores salen de `--f-bg` y `--f-ink`, que por defecto son el acento de la escena. ------------------------------------------------------- */ .wixt { position: absolute; z-index: 9; width: 152px; display: grid; gap: 5px; padding: 9px 11px 10px; border-radius: 16px; background: #fff; box-shadow: 0 22px 44px rgba(26, 20, 70, .18), 0 0 0 1px rgba(26, 20, 70, .06); } .wixt .cab { display: flex; align-items: center; gap: 7px; } .wixt .cab .tl { width: 22px; height: 22px; border-radius: 8px; flex: none; display: grid; place-items: center; font-size: 12px; background: var(--f-bg, var(--ac-claro)); color: var(--f-ink, var(--ac-tinta)); } .wixt .cab .tl .logo-marca { --lm: 12px; } .wixt .cab em { margin-left: auto; font-style: normal; font: 700 6.5px/1 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--a-tenue, #7C8398); } .wixt b { font: 700 14px/1 var(--font-mono); letter-spacing: -.03em; color: var(--buho-navy-950, #001144); } .wixt .lb { font: 600 8px/1.25 var(--font-sans); color: var(--color-text-muted); } .wixt .pie { display: flex; align-items: center; gap: 5px; padding-top: 6px; border-top: 1px solid var(--a-linea, #ECECF3); font: 600 7px/1.3 var(--font-mono); color: var(--f-ink, var(--ac-tinta)); } .wixt .pie .ti { font-size: 9px; flex: none; } .wixt--pk { --f-bg: var(--buho-pink-100, #FFE6EF); --f-ink: var(--buho-pink-700, #CC0056); } .wixt--ok { --f-bg: #E9F9EF; --f-ink: #0E8A45; } /* El complemento de la marca: en Waya, la lima. */ .wixt--act { --f-bg: #EFF9D6; --f-ink: #4C6E00; } /* ── 62.5 · Los datos que flotan ───────────────────────── Hermanos de las notas de `web-corporativa` (§61.5): allí son aros porque son notas sobre cien; aquí son pastillas, porque «0,8 s» o «23:12» no se dibujan en un aro. ------------------------------------------------------- */ .wflt { position: absolute; z-index: 9; display: inline-flex; align-items: center; gap: 9px; width: max-content; padding: 8px 14px 8px 8px; border-radius: 14px; background: #fff; box-shadow: 0 18px 38px rgba(26, 20, 70, .18), 0 0 0 1px rgba(26, 20, 70, .05); animation: wptFlota 6s var(--ease-in-out, ease-in-out) infinite; } .wflt__ic { width: 34px; height: 34px; border-radius: 11px; flex: none; display: grid; place-items: center; font-size: 16px; background: var(--f-bg, var(--ac-claro)); color: var(--f-ink, var(--ac-tinta)); } .wflt__tx { display: grid; gap: 4px; } .wflt__tx b { font: 700 12px/1 var(--font-mono); letter-spacing: -.02em; color: var(--color-text); } .wflt__tx span { font: 600 8px/1 var(--font-sans); color: var(--color-text-muted); white-space: nowrap; } .wflt--ok { --f-bg: #E9F9EF; --f-ink: #0E8A45; } .wflt--pk { --f-bg: var(--buho-pink-100, #FFE6EF); --f-ink: var(--buho-pink-700, #CC0056); } .wflt--b { animation-delay: -2s; } .wflt--c { animation-delay: -4s; } @media (prefers-reduced-motion: reduce) { .wflt { animation: none; } } /* ========================================================= 63 · La fila de datos del hero, en una sola línea --------------------------------------------------------- `.phero__meta` es un `flex` con `flex-wrap`, y con tres datos de etiqueta larga se partía en dos arriba y uno abajo —el tercero colgando, con su separador, como si fuera otra cosa—. Con tres columnas iguales la fila no se rompe: lo que baja de línea es la etiqueta dentro de su columna, que es justo lo que se quiere. Se aplica solo cuando hay exactamente tres datos, que es el caso de casi todas las páginas; las de cuatro siguen con el `flex` de siempre. Por debajo de 720 mantiene el 2 × 2 que ya traía `site.css`, porque ahí sí hace falta. ========================================================= */ .phero__meta:has(> div:nth-child(3)):not(:has(> div:nth-child(4))) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .phero__meta:has(> div:nth-child(3)):not(:has(> div:nth-child(4))) > div + div { padding-left: 20px; } @media (max-width: 720px) { .phero__meta:has(> div:nth-child(3)):not(:has(> div:nth-child(4))) { grid-template-columns: 1fr 1fr; gap: 16px 20px; } .phero__meta:has(> div:nth-child(3)):not(:has(> div:nth-child(4))) > div + div { padding-left: 0; border-left: 0; } } /* ========================================================= 64 · WORDPRESS · la escena del hero --------------------------------------------------------- El cliente trajo una referencia del editor de WordPress con tarjetas encima, y es mejor idea que la que había: en vez de enseñar una medición, enseña **el sitio en el editor**, que es lo que compra quien contrata WordPress. Se quedó todo lo que decía la escena anterior, repartido: la comparación de velocidad —plantilla comprada contra tema propio— es ahora la tarjeta del gráfico, los plugins están en el panel del insertador, y la seguridad y el dominio, que antes no salían, tienen tarjeta propia. De la referencia se dejaron fuera tres cosas a propósito: la cuadrícula de puntos, las luces de fondo y las líneas que unían las tarjetas. Las tres saturaban, y las líneas ya se habían quitado antes de `web-corporativa` por lo mismo. ========================================================= */ .wesc--wp { --alto: 470px; } .wesc--wp .wsc { top: 26px; } /* ── El cuerpo del editor: dock, insertador y página ─────*/ .wwp__body { display: grid; grid-template-columns: 34px 138px 1fr; } .wwp__dock { display: grid; gap: 7px; justify-items: center; align-content: start; padding: 10px 0; background: #FCFCFE; border-right: 1px solid var(--a-linea, #ECECF3); } .wwp__dock i { width: 23px; height: 23px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; color: var(--a-tenue, #7C8398); } .wwp__dock i.on { background: var(--buho-blue-100, #E6EAFA); color: var(--buho-blue-700, #02259F); } .wwp__ins { display: grid; gap: 9px; align-content: start; padding: 10px; background: #fff; border-right: 1px solid var(--a-linea, #ECECF3); } .wwp__tabs { display: flex; gap: 9px; padding-bottom: 7px; border-bottom: 1px solid var(--a-linea, #ECECF3); font: 600 8px/1 var(--font-sans); color: var(--a-tenue, #7C8398); } .wwp__tabs span.on { position: relative; font-weight: 700; color: var(--color-text); } .wwp__tabs span.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; border-radius: 2px; background: var(--buho-blue-600, #0330CC); } .wwp__bus { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 7px; background: #F3F3F8; font: 500 8px/1 var(--font-sans); color: var(--a-tenue, #7C8398); } .wwp__bus .ti { font-size: 11px; } .wwp__lb { font: 700 6.5px/1 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--color-text-subtle); } .wwp__gr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } .wwp__gr span { display: grid; justify-items: center; align-content: center; gap: 4px; height: 40px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--a-linea, #ECECF3); font: 600 6.5px/1 var(--font-sans); color: var(--color-text-muted); text-align: center; } .wwp__gr span .ti { font-size: 12px; color: var(--buho-blue-600, #0330CC); } .wwp__gr span.sel { background: var(--buho-blue-100, #E6EAFA); box-shadow: inset 0 0 0 1.5px var(--buho-blue-600, #0330CC); color: var(--buho-blue-700, #02259F); } /* ── La página del cliente ─────────────────────────────── Tono cálido a propósito: dentro del editor está la web de otra empresa, con su propia paleta. Es lo que dice el titular —tema propio, no plantilla— y se ve de un vistazo. ------------------------------------------------------- */ .wwp__pg { display: grid; gap: 10px; align-content: start; padding: 14px; background: #FAF8F4; } .wwp__mono { width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(0, 17, 68, .22); font: 600 8px/1 var(--font-mono); color: var(--buho-navy-950, #001144); } .wwp__enc { display: grid; grid-template-columns: 1fr 1.15fr; gap: 12px; align-items: start; } .wwp__enc h4 { margin: 0; font: 500 17px/1.12 var(--font-sans); letter-spacing: -.02em; color: var(--buho-navy-950, #001144); } .wwp__enc h4 sup { font-size: 7px; vertical-align: super; } .wwp__enc p { margin: 0; font: 500 7.5px/1.5 var(--font-sans); color: #6B6257; } .wwp__enc u { display: inline-block; margin-top: 6px; font: 600 7.5px/1 var(--font-sans); color: var(--buho-navy-950, #001144); } .wwp__im { height: 74px; border-radius: 9px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(140deg, #E4DDD2, #CFCBD8 60%, #D7CFE8); } .wwp__im .ti { font-size: 20px; color: rgba(0, 17, 68, .26); } /* Los tres huecos llevaban un icono de Tabler —un edificio, una gota y unos cubiertos— como marcador de posición. Ahora llevan foto. El degradado se queda debajo: es lo que se ve mientras la imagen carga, y estas van con `loading="lazy"`. `object-fit: cover` y no `contain`: los archivos ya vienen recortados a la proporción exacta de su hueco —4.32 : 1 el grande, 3.70 : 1 los dos pequeños—, así que `cover` no recorta nada y protege del reencuadre si alguien cambia las alturas. El `overflow: hidden` de arriba es lo que hace que la imagen respete las esquinas de 9 px del contenedor. */ .wwp__im img { width: 100%; height: 100%; object-fit: cover; display: block; } .wwp__g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .wwp__srv { display: grid; gap: 4px; } .wwp__srv b { font: 600 8px/1.2 var(--font-sans); color: var(--buho-navy-950, #001144); } .wwp__srv span { font: 500 6.5px/1.35 var(--font-sans); color: #6B6257; } .wwp__srv .wwp__im { height: 42px; margin-top: 2px; } .wwp__srv--b .wwp__im { background: linear-gradient(140deg, #D9D3E4, #E4DDD2); } /* ── Las tarjetas que flotan encima ──────────────────────*/ .wtar { position: absolute; z-index: 9; padding: 11px 12px; border-radius: 14px; background: #fff; box-shadow: 0 20px 44px rgba(26, 20, 70, .18), 0 0 0 1px rgba(26, 20, 70, .05); } .wtar__cab { display: flex; align-items: center; gap: 6px; } .wtar__cab b { font: 700 7px/1 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: #0E8A45; } .wtar__cab .ti { font-size: 12px; color: #0E8A45; } .wtar__cab .der { margin-left: auto; font-size: 11px; color: #C9CBD6; } .wtar__ti { display: block; margin-top: 7px; font: 700 11px/1 var(--font-sans); color: var(--color-text); } .wtar__s { display: block; margin-top: 5px; font: 500 8px/1 var(--font-mono); color: var(--color-text-subtle); } /* La tarjeta de dominios */ .wtar__hd { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; margin-bottom: 9px; border-bottom: 1px solid var(--a-linea, #ECECF3); font: 600 8px/1 var(--font-sans); color: var(--a-tenue, #7C8398); } .wtar__hd b { position: relative; font-weight: 700; color: var(--color-text); } .wtar__hd b::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 2px; border-radius: 2px; background: var(--buho-blue-600, #0330CC); } .wtar__hd .mas { margin-left: auto; padding: 3px 8px; border-radius: 999px; background: var(--buho-blue-100, #E6EAFA); color: var(--buho-blue-700, #02259F); font: 700 7px/1 var(--font-sans); } .wtar__dom { display: grid; gap: 9px; } .wtar__dom > span { display: grid; gap: 4px; } .wtar__dom b { font: 700 8.5px/1 var(--font-sans); color: var(--color-text); } .wtar__dom .li { display: flex; align-items: center; gap: 5px; } .wtar__dom .li em { font-style: normal; padding: 2px 6px; border-radius: 5px; background: #E9F9EF; color: #0E8A45; font: 700 6.5px/1 var(--font-sans); } .wtar__dom .li span { font: 500 6.5px/1 var(--font-mono); color: var(--color-text-subtle); } .wtar__dom > span + span { padding-top: 9px; border-top: 1px solid #F4F4FA; } /* La tarjeta del gráfico */ .wtar__gh { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; } .wtar__gh b { font: 700 9px/1 var(--font-sans); color: var(--color-text); } .wtar__gh .baja { padding: 3px 7px; border-radius: 5px; background: #E9F9EF; color: #0E8A45; font: 700 7px/1 var(--font-sans); } .wtar__gh .der { margin-left: auto; font-size: 11px; color: #C9CBD6; } .wtar__sv { display: block; width: 100%; height: 62px; } .wtar__ejes { display: flex; justify-content: space-between; margin-top: 6px; font: 600 6.5px/1 var(--font-mono); color: var(--color-text-subtle); } .wtar__ejes .on { color: var(--buho-blue-700, #02259F); } /* ── 64.2 · El sitio corre sobre lo nuestro ────────────── Bajo la ventana quedaba hueco, y ahí va lo que no se ve en una captura del editor: WordPress no vive en el aire. Los tres logotipos van en su color de marca, pero oscurecidos hasta pasar de 3:1 sobre blanco —cPanel y Cloudflare son naranjas muy claros y en un círculo blanco no se leían—. ------------------------------------------------------- */ .wstk { position: absolute; z-index: 8; left: 300px; top: 392px; display: grid; gap: 9px; justify-items: center; } .wstk__lb { font: 700 7px/1 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--color-text-subtle); } .wstk__r { display: flex; gap: 14px; } .wstk__c { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 12px 26px rgba(26, 20, 70, .16), 0 0 0 1px rgba(26, 20, 70, .06); animation: wptFlota 6s var(--ease-in-out, ease-in-out) infinite; } /* `--lmb` compensa el lienzo del SVG para que todos los logotipos midan lo mismo por su lado menor. En una fila está bien; dentro de un círculo de 46 px no: el de Cloudflare, que es ancho y bajo, salía con una caja de 50 px y se desbordaba. Aquí manda el ancho. */ .wstk__c .logo-marca { --lm: 23px; } .wstk__c--cf .logo-marca { --lmb: 1; --lm: 27px; } .wstk__c--wp { animation-delay: 0s; } .wstk__c--cp { animation-delay: -2s; } .wstk__c--cf { animation-delay: -4s; } /* Colores de marca, oscurecidos a 3,3 : 1 sobre blanco. */ .wstk__c--wp .logo-marca { color: #21759B; } .wstk__c--cp .logo-marca { color: #EA6328; } .wstk__c--cf .logo-marca { color: #D8711C; } @media (prefers-reduced-motion: reduce) { .wstk__c { animation: none; } } /* Dónde va cada tarjeta. */ .wtar--sec { left: 386px; top: -4px; width: 176px; } .wtar--dom { left: 404px; top: 150px; width: 186px; } .wtar--vel { left: -26px; top: 318px; width: 254px; } /* ========================================================= 65 · TIENDA VIRTUAL · la escena del hero --------------------------------------------------------- La referencia del cliente: la tienda abierta con su portada y sus productos, y alrededor lo que hace que una tienda sea una tienda y no un catálogo —la tarjeta con la que se paga, las ventas subiendo y el carrito con su total—. Se dejaron fuera el morado, el inglés, los dólares, las fotos de banco y el efecto 3D con el ratón: lo primero porque tenemos paleta propia, y lo último porque un hero que se mueve al pasar el ratón marea más que enseña. ========================================================= */ .wesc--tv { --alto: 512px; } .wesc--tv .wsc { top: 18px; } /* ── La portada de la tienda ─────────────────────────────*/ .wtnd__hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 12px; align-items: center; padding: 15px 14px 0; } .wtnd__hero h4 { margin: 0; letter-spacing: -.02em; font: 800 17px/1.16 var(--font-sans); color: var(--buho-navy-950, #001144); } .wtnd__hero h4 em { font-style: italic; color: var(--buho-pink-600, #FF006F); } .wtnd__hero p { margin: 7px 0 0; font: 500 8px/1.45 var(--font-sans); color: var(--color-text-muted); } .wtnd__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 11px; padding: 7px 13px; border-radius: 999px; background: var(--buho-navy-950, #001144); color: #fff; font: 700 8px/1 var(--font-sans); } .wtnd__cta .ti { font-size: 11px; } /* La bolsa. Cartón, asa y un logotipo: nada más. */ .wtnd__bolsa { position: relative; justify-self: center; width: 88px; height: 98px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(170deg, var(--buho-blue-500, #3055D5), var(--buho-blue-700, #02259F) 62%, var(--buho-navy-900, #00175D)); box-shadow: 0 18px 34px rgba(3, 48, 204, .26); } .wtnd__bolsa::before { content: ""; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); width: 46px; height: 30px; border-radius: 23px 23px 0 0; border: 3.5px solid rgba(255, 255, 255, .5); border-bottom: 0; } .wtnd__bolsa .ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .17); color: #fff; font-size: 17px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); } .wtnd__bolsa b { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font: 700 5.5px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .7); } /* ── Los productos ───────────────────────────────────────*/ .wtnd__hd { display: flex; align-items: center; padding: 15px 14px 0; } .wtnd__hd b { font: 800 9.5px/1 var(--font-sans); color: var(--color-text); } .wtnd__hd span { margin-left: auto; font: 700 8px/1 var(--font-sans); color: var(--buho-blue-700, #02259F); } .wtnd__g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px 14px 14px; } .wtnd__p { position: relative; display: grid; gap: 6px; padding: 8px; border-radius: 11px; background: #fff; box-shadow: inset 0 0 0 1px var(--a-linea, #ECECF3); } .wtnd__et { position: absolute; left: 7px; top: 7px; z-index: 1; padding: 2px 6px; border-radius: 999px; background: var(--buho-blue-100, #E6EAFA); color: var(--buho-blue-700, #02259F); font: 700 6px/1 var(--font-sans); } .wtnd__p--of .wtnd__et { background: var(--buho-pink-100, #FFE6EF); color: var(--buho-pink-700, #CC0056); } .wtnd__im { height: 46px; border-radius: 8px; display: grid; place-items: center; background: #F4F4FA; overflow: hidden; } .wtnd__im .ti { font-size: 20px; color: rgba(0, 17, 68, .28); } /* Foto de producto, no foto de ambiente: aquí va `contain` y no `cover`. La ficha es apaisada (93.6 × 45.3, 2.07 : 1) y los archivos son casi cuadrados; con `cover` el producto saldría recortado por arriba y por abajo, que es justo lo que una miniatura de catálogo no debe hacer. Los archivos llevan el fondo blanco quitado, así que se apoyan en el gris de la ficha en lugar de dibujar un rectángulo blanco encima. El 88 % de la altura deja el aire que cualquier tienda deja alrededor del producto. `grid-template-rows: minmax(0, 1fr)` no es decorativo. Sin él la fila implícita crece hasta el alto natural de la imagen —se midió en 90.8 px dentro de una ficha de 46— y entonces el `max-height: 88 %` se calcula contra esa fila inflada en vez de contra la ficha: la foto salía al doble y el `overflow: hidden` la cortaba por arriba y por abajo. */ .wtnd__im { grid-template-rows: minmax(0, 1fr); } .wtnd__im img { max-width: 86%; max-height: 88%; width: auto; height: auto; object-fit: contain; display: block; } .wtnd__n { font: 600 7.5px/1.2 var(--font-sans); color: var(--color-text); } .wtnd__pr { display: flex; align-items: center; gap: 6px; padding-top: 5px; border-top: 1px solid #F4F4FA; } .wtnd__pr b { font: 700 8.5px/1 var(--font-mono); color: var(--buho-navy-950, #001144); } .wtnd__pr .ic { margin-left: auto; width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; font-size: 10px; background: var(--buho-blue-100, #E6EAFA); color: var(--buho-blue-700, #02259F); } /* ── La tarjeta con la que se paga ───────────────────────*/ .wtcd { position: absolute; z-index: 9; width: 156px; height: 94px; padding: 12px; border-radius: 14px; color: #fff; --rot: -6deg; transform: rotate(var(--rot)); background: linear-gradient(140deg, var(--buho-blue-700, #02259F), var(--buho-navy-850, #001D77) 55%, var(--buho-navy-950, #001144)); box-shadow: 0 22px 44px rgba(0, 17, 68, .34); } .wtcd__t { display: flex; align-items: center; } .wtcd__chip { width: 22px; height: 15px; border-radius: 4px; background: linear-gradient(160deg, #F3DCA8, #D8AC5E); box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .18); } .wtcd__t .ti { margin-left: auto; font-size: 13px; color: rgba(255, 255, 255, .6); } .wtcd__n { margin-top: 15px; font: 500 9px/1 var(--font-mono); letter-spacing: .1em; color: rgba(255, 255, 255, .92); } .wtcd__b { display: flex; align-items: center; margin-top: 9px; font: 600 6.5px/1 var(--font-mono); color: rgba(255, 255, 255, .62); } .wtcd__cir { margin-left: auto; display: flex; } .wtcd__cir i { width: 13px; height: 13px; border-radius: 50%; background: rgba(255, 0, 111, .9); } .wtcd__cir i + i { margin-left: -5px; background: rgba(255, 171, 206, .92); } /* ── Las ventas ──────────────────────────────────────────*/ .wvta { position: absolute; z-index: 9; width: 152px; padding: 11px 12px; border-radius: 14px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 20px 44px rgba(26, 20, 70, .18), 0 0 0 1px rgba(26, 20, 70, .05); --rot: 4deg; transform: rotate(var(--rot)); } .wvta__t { display: flex; align-items: center; gap: 7px; font: 700 8.5px/1 var(--font-sans); color: var(--color-text); } .wvta__t span { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 999px; background: #E9F9EF; color: #0E8A45; font: 700 7px/1 var(--font-sans); } .wvta__t span .ti { font-size: 9px; } .wvta__b { display: flex; align-items: flex-end; gap: 5px; height: 40px; margin-top: 11px; } .wvta__b i { flex: 1; border-radius: 3px 3px 0 0; background: var(--buho-blue-200, #CDD6F5); } .wvta__b i:nth-child(1) { height: 28%; } .wvta__b i:nth-child(2) { height: 52%; background: var(--buho-blue-300, #9FB0EC); } .wvta__b i:nth-child(3) { height: 40%; background: var(--buho-blue-400, #6D87E1); } .wvta__b i:nth-child(4) { height: 74%; background: var(--buho-blue-500, #3055D5); } .wvta__b i:nth-child(5) { height: 100%; background: var(--buho-blue-700, #02259F); } .wvta__p { margin-top: 8px; text-align: right; font: 600 6.5px/1 var(--font-mono); color: var(--color-text-subtle); } /* ── El carrito ──────────────────────────────────────────*/ .wcar { position: absolute; z-index: 10; width: 190px; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 26px 52px rgba(26, 20, 70, .24), 0 0 0 1px rgba(26, 20, 70, .05); --rot: -3deg; transform: rotate(var(--rot)); } .wcar__t { display: flex; align-items: center; gap: 6px; padding-bottom: 9px; border-bottom: 1px solid var(--a-linea, #ECECF3); } .wcar__t b { font: 800 9px/1 var(--font-sans); color: var(--color-text); } .wcar__t .n { width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center; background: var(--buho-blue-600, #0330CC); color: #fff; font: 700 6.5px/1 var(--font-mono); } .wcar__t .vac { margin-left: auto; font: 600 7px/1 var(--font-sans); color: var(--color-text-subtle); } .wcar__ls { display: grid; gap: 9px; padding: 10px 0; } .wcar__it { display: flex; align-items: center; gap: 8px; } .wcar__it .im { width: 25px; height: 25px; border-radius: 7px; flex: none; display: grid; place-items: center; background: #F1F1F7; font-size: 12px; color: rgba(0, 17, 68, .34); overflow: hidden; } /* La miniatura del carrito es cuadrada y diminuta (25 px): el mismo archivo que la ficha, con más aire todavía. Misma precaución con la fila que en `.wtnd__im`. */ .wcar__it .im { grid-template-rows: minmax(0, 1fr); } .wcar__it .im img { max-width: 84%; max-height: 84%; width: auto; height: auto; object-fit: contain; display: block; } .wcar__it b { display: block; font: 600 7.5px/1.2 var(--font-sans); color: var(--color-text); } .wcar__it .pr { display: block; margin-top: 3px; font: 700 7px/1 var(--font-mono); color: var(--buho-blue-700, #02259F); } .wcar__it .q { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px; border-radius: 7px; background: #F1F1F7; font: 700 7px/1 var(--font-mono); color: var(--color-text); } .wcar__it .q .ti { font-size: 8px; color: var(--a-tenue, #7C8398); } .wcar__sub { display: flex; align-items: center; padding-top: 10px; border-top: 1px solid var(--a-linea, #ECECF3); font: 600 7.5px/1 var(--font-sans); color: var(--color-text-muted); } .wcar__sub b { margin-left: auto; font: 800 11px/1 var(--font-mono); letter-spacing: -.02em; color: var(--buho-navy-950, #001144); } .wcar__go { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 11px; padding: 9px; border-radius: 10px; background: var(--buho-navy-950, #001144); color: #fff; font: 700 8px/1 var(--font-sans); } .wcar__go .ti { font-size: 11px; } /* Dónde va cada pieza. */ /* Medido para que las tres tarjetas no se pisen entre ellas ni tapen la bolsa, que es lo único que la portada tiene para mirar: ventas arriba, carrito abajo y la tarjeta colgando de la esquina de abajo. */ .wtcd { left: -34px; top: 392px; } .wvta { left: 400px; top: 40px; } .wcar { left: 380px; top: 250px; width: 172px; } /* ========================================================= 66 · MARKETING · la escena del hero --------------------------------------------------------- Aquí había un gráfico de barras nuestro. Lo reemplaza la ilustración que trajo el cliente: la campaña funcionando —la pantalla, el celular con su anuncio— y alrededor las piezas que la alimentan: el almacenamiento, los públicos, el anuncio de búsqueda con su clic, los informes y la puja automática. Es el único hero del sitio con un SVG grande, y por eso va entero en el marcado y no en un fichero aparte: así se anima con nuestras reglas y hereda el `currentColor` si algún día hace falta. Tres cosas hubo que arreglarle: a) **Los `id` iban sin prefijo** —`shadow-soft`, `screenGrad`— y una página tiene un solo espacio de nombres: si otro bloque estrena un `id` igual, los filtros se cruzan y no avisa nadie. Todos llevan ahora `mkads-`. b) **Las clases de animación no existían.** El SVG llamaba a `animate-float-1` y a `animate-gear-blue`, que son de otro proyecto; aquí no había nada detrás y se veía quieto. Están escritas abajo, y se apagan con `prefers-reduced-motion`. c) **El texto del botón era ilegible.** A 12 unidades sobre un lienzo de 1.600, en el hero real quedaba en 4 px. Subido a 20, que son ~6,7 px reales: más y la palabra se sale del botón. ========================================================= */ .wesc--mk { --alto: 560px; } .wilu { position: absolute; left: 0; top: 0; width: 536px; height: 302px; border-radius: 20px; overflow: hidden; /* Sin sombra: la ilustración ya trae su propio fondo y el recorte redondeado la separa del hero. Las dos maquetas de abajo (`.wfon`) sí la conservan, que son tarjetas blancas sobre blanco y sin ella se perderían. */ } .wilu__sv { display: block; width: 100%; height: 100%; } .wilu__tx { /* 20 unidades del lienzo son ~6,7 px en pantalla. A 26 la palabra no cabía en el botón y se salía por el borde. */ font: 700 20px/1 var(--font-sans); fill: #fff; } /* Las piezas de alrededor respiran, cada una a su ritmo. Las unidades son del lienzo del SVG: 18 aquí son ~6 px en pantalla, que es el mismo recorrido que en los otros heroes. */ @keyframes wiluFlota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } } .wilu__f1 { animation: wiluFlota 6s var(--ease-in-out, ease-in-out) infinite; } .wilu__f2 { animation: wiluFlota 7s var(--ease-in-out, ease-in-out) infinite; animation-delay: -2.2s; } .wilu__f3 { animation: wiluFlota 8s var(--ease-in-out, ease-in-out) infinite; animation-delay: -4.4s; } /* Los engranajes giran sobre su propio centro: sin `transform-box: fill-box` el origen sería la esquina del lienzo y saldrían volando por la pantalla. */ @keyframes wiluGira { to { transform: rotate(360deg); } } .wilu__eng { transform-box: fill-box; transform-origin: center; } .wilu__eng--a { animation: wiluGira 9s linear infinite; } .wilu__eng--b { animation: wiluGira 9s linear infinite reverse; } .wilu__eng--c { animation: wiluGira 13s linear infinite; } @media (prefers-reduced-motion: reduce) { .wilu__f1, .wilu__f2, .wilu__f3, .wilu__eng { animation: none; } } /* Aquí no van pastillas: la ilustración ya es una composición cerrada, y dos tarjetas de tamaño fijo encima de un dibujo reducido al 33 % se leen como de otra escala. */ /* ── 66.2 · Los dos anuncios, debajo ───────────────────── La ilustración es apaisada y dejaba hueco bajo ella. Ahí van los dos sitios donde el anuncio aparece de verdad: la búsqueda de Google y el feed de Instagram. Son maqueta nuestra —cajas y máscaras de logotipo, como el resto del sitio—, no parte del SVG. ------------------------------------------------------- */ .wtel { position: absolute; left: 0; top: 322px; width: 536px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .wfon { display: grid; gap: 10px; align-content: start; padding: 13px 12px 15px; border-radius: 22px; background: #fff; box-shadow: 0 20px 44px rgba(26, 20, 70, .14), 0 0 0 1px var(--a-linea, #ECECF3); } /* La barra de arriba: buscador en uno, cuenta en el otro. */ .wfon__bar { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px; background: #F3F3F8; font: 500 8.5px/1 var(--font-sans); color: var(--color-text); } .wfon__bar .logo-marca { width: 12px; height: 12px; flex: none; } .wfon__bar .ti { margin-left: auto; font-size: 11px; color: var(--a-tenue, #7C8398); } .wfon__cu { display: flex; align-items: center; gap: 7px; padding: 0 2px; } .wfon__cu .logo-marca { width: 14px; height: 14px; flex: none; } .wfon__cu b { font: 700 8.5px/1 var(--font-sans); color: var(--color-text); } .wfon__cu .ti { margin-left: auto; font-size: 12px; color: var(--a-tenue, #7C8398); } /* Las dos fichas de producto. */ .wfon__g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .wfon__ad { display: grid; gap: 5px; } .wfon__im { height: 62px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(140deg, var(--buho-blue-100, #E6EAFA), var(--buho-lavender-300, #D7CFE8)); } .wfon__ad--b .wfon__im { background: linear-gradient(140deg, var(--buho-pink-100, #FFE6EF), var(--buho-lavender-300, #D7CFE8)); } .wfon__im .ti { font-size: 22px; color: rgba(0, 17, 68, .30); } /* Con foto real el degradado queda debajo: sostiene el hueco mientras la imagen carga y le da fondo a la que llega con fondo blanco de catálogo. */ .wfon__im { overflow: hidden; } .wfon__im img { width: 100%; height: 100%; object-fit: cover; display: block; } .wfon__ad .wfon__im img { object-fit: contain; background: #fff; } .wfon__et { display: inline-flex; align-items: center; gap: 4px; font: 700 7px/1 var(--font-sans); color: var(--buho-blue-700, #02259F); } .wfon__et .logo-marca { width: 9px; height: 9px; } .wfon__ti { font: 600 7.5px/1.25 var(--font-sans); color: var(--color-text); } .wfon__pr { display: flex; align-items: center; gap: 5px; } .wfon__pr b { font: 700 8.5px/1 var(--font-mono); color: var(--buho-navy-950, #001144); } .wfon__es { display: inline-flex; gap: 1px; color: var(--buho-pink-600, #FF006F); } .wfon__es .ti { font-size: 7px; } /* El anuncio del feed. */ .wfon__post { display: grid; gap: 7px; } .wfon__post .wfon__im { height: 96px; border-radius: 10px; } /* 96 y no 84: con foto real el hueco necesita alto para que se reconozca el producto, y 96 es lo que cabe sin que la tarjeta se salga del lienzo de 560. */ .wfon__cta { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 6px 6px 6px 10px; border-radius: 999px; background: var(--buho-navy-950, #001144); } .wfon__cta span { font: 700 7.5px/1 var(--font-sans); color: #fff; } .wfon__cta i { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .18); color: #fff; font-size: 9px; } .wfon__ac { display: flex; align-items: center; gap: 9px; color: var(--a-tenue, #7C8398); } .wfon__ac .ti { font-size: 12px; } .wfon__ac .n { font: 600 7px/1 var(--font-mono); } /* Lo que hay debajo del anuncio: la página, insinuada. */ .wfon__ln { display: grid; gap: 5px; } .wfon__ln i { height: 5px; border-radius: 3px; background: #EFEFF6; } .wfon__ln i:nth-child(2) { width: 78%; } .wfon__ln i:nth-child(3) { width: 56%; } /* ========================================================= 67 · APLICACIONES WEB · la escena del hero --------------------------------------------------------- Tercera referencia del cliente: un tablero de verdad, con su barra lateral, sus indicadores, su gráfico y sus piezas flotando. Encaja con lo que promete la página —el sistema que la operación ya hace en Excel— mejor que la tabla que había: una tabla la tiene cualquier hoja de cálculo; un tablero con estados, responsables y avisos, no. De la referencia se toma la composición y poco más. Fuera el índigo y el cian, los dólares, el inglés, el panel de edición en vivo y los avisos flotantes: eso es una demo interactiva, no un hero. ========================================================= */ .wesc--aw { --alto: 484px; } .wdash { display: grid; grid-template-columns: 38px 1fr; } /* La barra lateral de la aplicación. */ .wdash__rail { display: grid; gap: 6px; justify-items: center; align-content: start; padding: 11px 0; background: #FCFCFE; border-right: 1px solid var(--a-linea, #ECECF3); } .wdash__rail i { width: 25px; height: 25px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; color: var(--a-tenue, #7C8398); } .wdash__rail i.on { background: var(--buho-blue-100, #E6EAFA); color: var(--buho-blue-700, #02259F); } .wdash__rail .sep { width: 16px; height: 1px; background: var(--a-linea, #ECECF3); margin: 3px 0; } /* El cuerpo del tablero. */ .wdash__cpo { display: grid; gap: 9px; padding: 11px; background: #F4F4FA; } .wdash__hd { display: flex; align-items: baseline; gap: 8px; } .wdash__hd b { font: 800 11px/1 var(--font-sans); letter-spacing: -.01em; color: var(--color-text); } .wdash__hd span { font: 500 7.5px/1 var(--font-sans); color: var(--color-text-muted); } .wdash__hd .der { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; } .wdash__sel { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--a-linea, #ECECF3); font: 600 7.5px/1 var(--font-sans); color: var(--color-text); } .wdash__sel .ti { font-size: 10px; color: var(--a-tenue, #7C8398); } .wdash__k3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .wkpi { display: grid; gap: 6px; padding: 9px 10px; border-radius: 12px; background: #fff; box-shadow: 0 6px 16px rgba(26, 20, 70, .06), 0 0 0 1px var(--a-linea, #ECECF3); } .wkpi__t { display: flex; align-items: center; gap: 6px; } .wkpi b { font: 800 13px/1 var(--font-mono); letter-spacing: -.03em; color: var(--buho-navy-950, #001144); } .wkpi .d { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 6px; font: 700 6.5px/1 var(--font-sans); } .wkpi .d--up { background: #E9F9EF; color: #0E8A45; } .wkpi .d--dn { background: var(--buho-pink-100, #FFE6EF); color: var(--buho-pink-700, #CC0056); } .wkpi span { font: 600 7px/1 var(--font-sans); color: var(--color-text-muted); } .wdash__row { display: grid; grid-template-columns: 1.55fr 1fr; gap: 8px; } .wcard { padding: 11px; border-radius: 14px; background: #fff; box-shadow: 0 8px 20px rgba(26, 20, 70, .07), 0 0 0 1px var(--a-linea, #ECECF3); } .wcard__t { display: flex; align-items: center; font: 700 9px/1 var(--font-sans); color: var(--color-text); } .wcard__t .ti { margin-left: auto; font-size: 12px; color: #C9CBD6; } /* El gráfico de barras. */ .wbars { display: flex; align-items: flex-end; gap: 5px; height: 62px; margin-top: 12px; } .wbars i { flex: 1; border-radius: 999px; background: linear-gradient(180deg, var(--buho-blue-400, #6D87E1), var(--buho-blue-600, #0330CC)); } .wbars i.on { background: linear-gradient(180deg, var(--buho-pink-500, #FB136E), var(--buho-pink-700, #CC0056)); box-shadow: 0 5px 14px rgba(204, 0, 86, .32); } .wbars i:nth-child(1) { height: 38%; } .wbars i:nth-child(2) { height: 54%; } .wbars i:nth-child(3) { height: 71%; } .wbars i:nth-child(4) { height: 46%; } .wbars i:nth-child(5) { height: 33%; } .wbars i:nth-child(6) { height: 58%; } .wbars i:nth-child(7) { height: 76%; } .wbars i:nth-child(8) { height: 51%; } .wbars i:nth-child(9) { height: 64%; } .wbars i:nth-child(10) { height: 90%; } .wbars__x { display: flex; gap: 5px; margin-top: 7px; } .wbars__x span { flex: 1; text-align: center; font: 600 6px/1 var(--font-mono); color: var(--color-text-subtle); } /* La dona de estados. */ .wdona { /* `` es inline y un inline ignora `width` y `height`: sin esto la dona no se dibujaba. */ display: block; position: relative; width: 82px; height: 82px; margin: 11px auto 0; border-radius: 50%; background: conic-gradient(var(--buho-navy-950, #001144) 0 46%, var(--buho-blue-500, #3055D5) 46% 76%, var(--buho-pink-600, #FF006F) 76% 100%); } .wdona::before { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: #fff; } .wdona b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 12px/1 var(--font-mono); letter-spacing: -.03em; color: var(--buho-navy-950, #001144); } .wleg { display: grid; gap: 6px; margin-top: 11px; } .wleg span { display: flex; align-items: center; gap: 6px; font: 600 7px/1 var(--font-sans); color: var(--color-text-muted); } .wleg i { width: 7px; height: 7px; border-radius: 50%; flex: none; } .wleg .c1 { background: var(--buho-navy-950, #001144); } .wleg .c2 { background: var(--buho-blue-500, #3055D5); } .wleg .c3 { background: var(--buho-pink-600, #FF006F); } .wleg .n { margin-left: auto; font: 700 7px/1 var(--font-mono); color: var(--color-text); } /* La lista de sedes. */ .wlst { display: grid; gap: 9px; margin-top: 11px; } .wlst__f { display: flex; align-items: center; gap: 9px; } .wlst__f b { font: 700 8px/1 var(--font-sans); color: var(--color-text); min-width: 74px; } .wlst__b { flex: 1; height: 5px; border-radius: 999px; background: #EFEFF6; overflow: hidden; } .wlst__b i { display: block; height: 100%; border-radius: 999px; background: var(--buho-blue-600, #0330CC); } .wlst__f--b .wlst__b i { background: var(--buho-blue-400, #6D87E1); } .wlst__f--c .wlst__b i { background: var(--buho-pink-500, #FB136E); } .wlst__f .n { font: 700 8px/1 var(--font-mono); color: var(--buho-navy-950, #001144); min-width: 30px; text-align: right; } .wlst__b i.p75 { width: 75%; } .wlst__b i.p52 { width: 52%; } .wlst__b i.p34 { width: 34%; } /* ── Las piezas que flotan ───────────────────────────────*/ .witem { position: absolute; z-index: 9; display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 14px; background: #fff; box-shadow: 0 18px 38px rgba(26, 20, 70, .20), 0 0 0 1px rgba(26, 20, 70, .05); } /* El último cuadro de icono que quedaba en tinte rosa. Va al mismo neutro que .frow__ic: navy al 5 % sobre blanco, con tinta navy. */ .witem .ic { width: 26px; height: 26px; border-radius: 9px; flex: none; display: grid; place-items: center; font-size: 13px; background: color-mix(in srgb, var(--buho-navy-950) 5%, #fff); color: var(--buho-navy-950); } .witem b { display: block; font: 700 8.5px/1 var(--font-sans); color: var(--color-text); } .witem .s { display: block; margin-top: 3px; font: 500 7px/1 var(--font-sans); color: var(--color-text-muted); } .witem .n { padding: 3px 7px; border-radius: 999px; background: var(--buho-blue-100, #E6EAFA); color: var(--buho-blue-700, #02259F); font: 700 7px/1 var(--font-mono); } .wsel { position: absolute; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 16px; background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 24px 48px rgba(26, 20, 70, .22), 0 0 0 1px rgba(26, 20, 70, .05); } .wsel__i b { display: block; font: 800 9px/1 var(--font-sans); color: var(--color-text); } .wsel__i span { display: block; margin-top: 4px; font: 600 7px/1 var(--font-sans); color: var(--color-text-subtle); } .wsel__b { margin-left: auto; display: inline-flex; gap: 7px; } .wsel__b span { padding: 7px 12px; border-radius: 10px; font: 700 7.5px/1 var(--font-sans); } .wsel__b .ok { background: var(--buho-navy-950, #001144); color: #fff; } .wsel__b .no { background: #F1F1F7; color: var(--color-text); } /* Dónde va cada pieza. */ .witem { left: 322px; top: -10px; } .wsel { left: 46px; top: 430px; width: 420px; } .wflt--sprint { left: -46px; top: 236px; } /* ========================================================= 68 · SERVICIOS · la escena del hero del índice --------------------------------------------------------- La página del índice no vende una cosa: vende que las cuatro salen del mismo sitio. Así que la escena es el panel del cliente —web, servidor, correo y facturación, los cuatro activos y con su fecha— y, alrededor, las dos consecuencias: cero correos entre proveedores y una sola factura. Ese es todo el argumento. El reparto del lienzo está pensado para que nada tape a nada. Las filas de servicio llevan su estado pegado al nombre y no al margen derecho, y así ese margen queda libre para que cuelgue la factura del mes. La banda oscura del pie entra sangrada por la izquierda, y en ese hueco encaja la tarjeta de abajo. La esquina de los puntos del navegador se cede a la tarjeta de arriba: en su sitio quedan, a la derecha de la barra, el certificado y la latencia del nodo, que es lo que de verdad se mira ahí. ========================================================= */ .wesc--ix { --alto: 566px; } .wesc--ix .wsc { top: 24px; } /* ── 68.1 · La barra, con el estado del servicio ───────── Tres columnas para que la dirección quede centrada de verdad: el hueco de la izquierda —donde irían los puntos— lo ocupa la tarjeta que flota encima. ------------------------------------------------------- */ .wesc--ix .wsc__bar { display: grid; grid-template-columns: 1fr auto 1fr; } .wesc--ix .wsc__url { margin: 0 auto; } .wix__est { justify-self: end; display: inline-flex; align-items: center; gap: 8px; } .wix__ssl { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: #E9F9EF; color: #0E8A45; font: 700 7.5px/1 var(--font-sans); } .wix__ssl .ti { font-size: 10px; } .wix__pin { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font: 600 8px/1 var(--font-mono); color: var(--a-tenue, #7C8398); } /* El punto que late. Es el latido del nodo, no un adorno: por eso va en verde de estado y no en color de marca. */ .wix__pin i { width: 6px; height: 6px; border-radius: 50%; flex: none; background: #17A85A; animation: wixLate 2.4s var(--ease-out, ease-out) infinite; } @keyframes wixLate { 0% { box-shadow: 0 0 0 0 rgba(23, 168, 90, .50); } 70% { box-shadow: 0 0 0 5px rgba(23, 168, 90, 0); } 100% { box-shadow: 0 0 0 0 rgba(23, 168, 90, 0); } } @media (prefers-reduced-motion: reduce) { .wix__pin i { animation: none; } } /* ── 68.2 · Las tres fechas ────────────────────────────── Cada una con su etiqueta, su fecha en mono y una línea al pie que dice por qué el cliente no tiene que acordarse de ella. Van sobre `.wsc__box`, que ya pone el fondo, el aro y el relleno. ------------------------------------------------------- */ .wix__bt { display: grid; gap: 6px; } .wix__bt .cab { display: flex; align-items: center; gap: 6px; } .wix__bt .cab .tl { width: 22px; height: 22px; border-radius: 7px; flex: none; display: grid; place-items: center; font-size: 12px; background: var(--buho-blue-100, #E6EAFA); color: var(--buho-blue-700, #02259F); } .wix__bt .cab em { margin-left: auto; font-style: normal; font: 700 6.5px/1 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--a-tenue, #7C8398); } .wix__bt b { font: 700 15px/1 var(--font-mono); letter-spacing: -.03em; color: var(--buho-navy-950, #001144); } .wix__bt .lb { font: 600 7.5px/1.2 var(--font-sans); color: var(--color-text-muted); } .wix__bt .pie { display: flex; align-items: center; gap: 5px; padding-top: 7px; border-top: 1px solid var(--a-linea, #ECECF3); font: 600 7px/1 var(--font-mono); color: var(--buho-blue-700, #02259F); } .wix__bt .pie .ti { font-size: 9px; flex: none; } /* ── 68.3 · Los cuatro servicios ───────────────────────── Nombre, estado y dirección real, los tres juntos a la izquierda. El margen derecho se deja libre a propósito: ahí cuelga la factura, y así no tapa ningún dato. ------------------------------------------------------- */ .wix__fi { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--a-linea, #ECECF3); } .wix__fi .ic { width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center; font-size: 13px; background: var(--buho-blue-50, #F6F8FD); color: var(--buho-blue-600, #0330CC); } .wix__fi .tx { display: grid; gap: 5px; } .wix__fi .l1 { display: flex; align-items: center; gap: 6px; } .wix__fi b { font: 700 8.5px/1 var(--font-sans); color: var(--color-text); } .wix__fi .st { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 999px; font: 700 6.5px/1 var(--font-sans); background: var(--s-bg, #E9F9EF); color: var(--s-ink, #0E8A45); } .wix__fi .st .ti { font-size: 8px; } .wix__fi .st--n { --s-bg: var(--buho-blue-100, #E6EAFA); --s-ink: var(--buho-blue-700, #02259F); } .wix__fi .d { font: 500 7.5px/1 var(--font-mono); color: var(--color-text-muted); } /* ── 68.4 · La banda de confianza ──────────────────────── Sangrada por la izquierda: ese hueco no está vacío, lo ocupa la tarjeta de la factura que flota encima. ------------------------------------------------------- */ .wesc--ix .wsc__pie { padding-left: 122px; } .wix__wa { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: #fff; font: 700 8px/1 var(--font-sans); color: var(--buho-navy-950, #001144); white-space: nowrap; } /* El verde pleno de WhatsApp no llega a 4,5:1 sobre blanco; se usa el mismo tono medido del §59.9 para las pastillas. */ .wix__wa .logo-marca { --lm: 12px; color: #0F7A3F; } /* ── 68.6 · La factura del mes ───────────────────────────*/ /* Cuelga del lienzo, no del interior de la ventana: `.wsc` recorta, y dentro no podía sobresalir del marco. Por eso las coordenadas son de escena y no de lienzo interior. */ .wesc--ix .wpan { left: 376px; right: auto; top: 273px; width: 178px; padding-bottom: 8px; } .wix__fa { display: grid; gap: 8px; } .wix__fa .cab { display: flex; align-items: baseline; gap: 6px; } .wix__fa .cab b { font: 700 9.5px/1 var(--font-sans); color: var(--color-text); } .wix__fa .cab span { margin-left: auto; font: 600 7.5px/1 var(--font-mono); color: var(--a-tenue, #7C8398); } .wix__fa .ruc { padding: 7px 9px; border-radius: 9px; background: var(--buho-blue-50, #F6F8FD); font: 600 7.5px/1.3 var(--font-mono); color: var(--buho-blue-700, #02259F); } /* El total no lleva cifra a propósito: el precio depende del plan y una cifra inventada en una ilustración se acaba leyendo como una tarifa. Lo que importa es el «una sola». */ .wix__fa .tot { display: flex; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px solid var(--a-linea, #ECECF3); font: 700 8px/1 var(--font-sans); color: var(--color-text); } .wix__fa .tot span { margin-left: auto; font: 700 8px/1 var(--font-mono); color: #0E8A45; } /* ── 68.7 · Dónde va cada pieza ────────────────────────── Coordenadas sobre el lienzo de 536 × 566. La ventana baja 24 px; la tarjeta de arriba cuelga de la esquina de los puntos y la de abajo encaja en la sangría de la banda oscura. ------------------------------------------------------- */ .wixt--cero { left: -40px; top: -30px; } .wixt--fact { left: -40px; top: 464px; } /* ========================================================= 69 · MEDIOS DE PAGO · las marcas peruanas entran al sistema --------------------------------------------------------- Yape, Culqi y PagoEfectivo no están en Simple Icons. Sus isotipos se recortaron de la fuente oficial (ver assets/logos-marcas/LEEME.md) y entran por la misma puerta que el resto: máscara monocroma que hereda `currentColor`, con su color de marca en `.mk-*`. Plin, Izipay y Niubiz se quedan con icono genérico a propósito: su logotipo es una palabra larga, no un isotipo, y a 18 px no se lee. Vale más un icono honesto que una mancha. Los colores van medidos: los de marca que no llegan a 4,5:1 sobre blanco se oscurecen, y sobre navy se usan los plenos, que ahí sí contrastan. ========================================================= */ .mk-pagoefectivo { --mk: #8F7103; --mk-soft: rgba(250,201,18,.18); } /* 4.63 : 1 */ .mk-mercadopago { --mk: #007FA8; --mk-soft: rgba(0,177,234,.12); } /* 4.56 : 1 */ /* Sobre navy manda el color pleno de marca; sólo el morado de Yape hay que aclararlo para que no se hunda. */ .sec--navy .mk-pagoefectivo, .phband .mk-pagoefectivo, .closer .mk-pagoefectivo { --mk: #FAC912; } .sec--navy .mk-mercadopago, .phband .mk-mercadopago, .closer .mk-mercadopago { --mk: #00B1EA; } /* Compensación de lienzo, medida con svgelements sobre la tinta real de cada archivo. */ .logo-marca.logo-pagoefectivo { --lmb: 1.51; } /* tinta 24 × 15.9 */ .logo-marca.logo-mercadopago { --lmb: 1.46; } /* tinta 24 × 16.4 */ .logo-marca.logo-googlesearchconsole { --lmb: 1.11; } .logo-marca.logo-googleads { --lmb: 1.10; } .logo-marca.logo-googlemaps { --lmb: 1.45; } /* tinta 16.6 × 24 */ .logo-marca.logo-google { --lmb: 1.03; } /* culqi, whatsapp, git y wordpress llenan el cuadro. */ /* Pastillas en tinta plena, mismo criterio del §59.9. */ .ico--canal.mk-pagoefectivo { --mk-ink: #8F7103; } /* 4.63 : 1 */ .ico--canal.mk-mercadopago { --mk-ink: #007FA8; } /* 4.56 : 1 */ /* Woo: la marca es la palabra «Woo», ancha y baja. Va con `tchip--wide`, igual que Visa. */ .logo-marca.logo-woo { --lmb: 3.86; } /* tinta 24 × 6.2 */ /* ── 69.1 · Logotipos-palabra dentro de un chip ────────── Visa y Woo no tienen isotipo: su marca es la palabra. El archivo, como todos, viene en un lienzo cuadrado de 24, así que `mask-size: contain` sobre una caja apaisada encogía la palabra al alto de la caja y quedaba diminuta. Se invierte el criterio: la máscara se escala al ANCHO del elemento y la caja mide --lm de alto. Como --lmb es 24 ÷ alto-de-tinta, la palabra acaba midiendo exactamente --lm de alto —lo mismo que pesa un isotipo al lado— y --lm × --lmb de ancho. ------------------------------------------------------- */ .tchip--wide .logo-marca { width: calc(var(--lm, 18px) * var(--lmb)); height: var(--lm, 18px); -webkit-mask-size: 100% auto; mask-size: 100% auto; } /* El ajuste óptico de «Woo» vive con los demás, en §69.3. */ /* ── 69.3 · Izipay y el ajuste óptico ──────────────────── `--lmb` iguala la tinta por su lado menor, que es lo correcto casi siempre. Pero un logotipo-palabra macizo como VISA, o una «S» alta y llena como la de Stripe, a igual medida pesan más que un isotipo abierto: la vista los lee como más grandes de lo que son. `--lmk` es ese ajuste, y sólo eso: un factor por marca, siempre por debajo de 1, para bajarles el peso hasta que la cinta se lea pareja. No sustituye a --lmb; lo matiza. ------------------------------------------------------- */ .logo-marca { --lmk: 1; } /* Y un tope. `--lmb` iguala la tinta por su lado MENOR, que es lo correcto en una ficha suelta; en una fila de etiquetas lo que se compara de un vistazo es el ANCHO, y ahí la compensación se vuelve en contra: el logotipo de PHP salía a 34 px y el de Tailwind a 30, al lado de los 20 de React y los 18 de Vue, y se leían como el doble de grandes. Con el tope en 1,20 ninguna caja pasa de 21,6 px y la fila entera ocupa lo mismo. Los logotipos-palabra que de verdad necesitan el ancho —Visa, Woo— no pasan por aquí: van con `.tchip--wide`, que escala por el ancho a propósito. */ .tchip .logo-marca { width: calc(var(--lm) * min(var(--lmb) * var(--lmk), 1.20)); height: calc(var(--lm) * min(var(--lmb) * var(--lmk), 1.20)); } .tchip--wide .logo-marca { width: calc(var(--lm) * var(--lmb) * var(--lmk)); height: calc(var(--lm) * var(--lmk)); -webkit-mask-size: 100% auto; mask-size: 100% auto; } .logo-marca.logo-visa { --lmk: .68; } .logo-marca.logo-stripe { --lmk: .68; } .logo-marca.logo-paypal { --lmk: .85; } .logo-marca.glifo-qr { --lmk: .86; } .logo-marca.logo-woo { --lmk: .72; } /* Medios de pago · segunda pasada, medida sobre la cinta de `tienda-virtual` a 1440 px. VISA y la S de Stripe seguían pesando de más al lado de Culqi y Mastercard; la P de PayPal llena su caja de arriba abajo; y el QR es una trama densa que a 18 px se lee como el objeto más grande de la fila aunque mida lo mismo que los demás. Quedan en 38 × 12, 17, 18 y 15. Niubiz no pasa por aquí —es `.marca-color`, imagen y no máscara— y se ajusta en §75. */ /* ========================================================= 70 · Todo lo que flota, flota --------------------------------------------------------- Las piezas que están fuera de la ventana —tarjetas, pastillas, insignias, paneles— respiran con el mismo fotograma, pero cada una con su duración y su desfase: en sincronía parecen un carrusel, y desacompasadas parecen vivas. El recorrido es de 6 px, lo justo para notarse sin distraer de lo que hay debajo. Las que están dentro de la ventana suben pero no bajan de su sitio, porque el marco recorta y un desplazamiento hacia abajo les comería el borde. ========================================================= */ .wpan { animation: wptFlota 7.4s var(--ease-in-out, ease-in-out) infinite; } .wtar--sec { animation: wptFlota 6.2s var(--ease-in-out, ease-in-out) infinite; } .wtar--dom { animation: wptFlota 7.6s var(--ease-in-out, ease-in-out) -2.4s infinite; } .wtar--vel { animation: wptFlota 8.4s var(--ease-in-out, ease-in-out) -4.8s infinite; } .wtcd { animation: wptFlota 6.6s var(--ease-in-out, ease-in-out) infinite; } .wvta { animation: wptFlota 7.8s var(--ease-in-out, ease-in-out) -2.6s infinite; } .wcar { animation: wptFlota 8.6s var(--ease-in-out, ease-in-out) -5.2s infinite; } .witem { animation: wptFlota 6.8s var(--ease-in-out, ease-in-out) infinite; } .wsel { animation: wptFlota 8.8s var(--ease-in-out, ease-in-out) -3.8s infinite; } .wixt--cero { animation: wptFlota 7.0s var(--ease-in-out, ease-in-out) infinite; } .wixt--fact { animation: wptFlota 8.0s var(--ease-in-out, ease-in-out) -3.2s infinite; } /* Mensajería (§74). Se nombran una a una a propósito: `:first-of-type` cuenta etiquetas ``, y el primer `` de toda escena es el texto para lectores de pantalla, así que ese selector no habría acertado nunca. */ .wixt--dominio, .wixt--regla, .wixt--ficha, .wixt--tres { animation: wptFlota 7.2s var(--ease-in-out, ease-in-out) infinite; } .wixt--precio, .wixt--lecturas, .wixt--macro, .wixt--ayuda, .wixt--csv { animation: wptFlota 8.4s var(--ease-in-out, ease-in-out) -3.6s infinite; } .wqx { animation: wptFlota 6.8s var(--ease-in-out, ease-in-out) -1.8s infinite; } .wmgb { animation: wptFlota 6.4s var(--ease-in-out, ease-in-out) -2.9s infinite; } .wia { animation: wptFlota 7.8s var(--ease-in-out, ease-in-out) -4.2s infinite; } .wtel .wfon:first-child { animation: wptFlota 7.2s var(--ease-in-out, ease-in-out) infinite; } .wtel .wfon:last-child { animation: wptFlota 8.2s var(--ease-in-out, ease-in-out) -3.4s infinite; } @media (prefers-reduced-motion: reduce) { /* Los dos teléfonos se seleccionan con `:first-child` y `:last-child`, así que aquí hace falta la misma especificidad: con `.wtel .wfon` a secas seguían moviéndose. */ .wpan, .wtar--sec, .wtar--dom, .wtar--vel, .wtcd, .wvta, .wcar, .witem, .wsel, .wixt--cero, .wixt--fact, .wixt--dominio, .wixt--regla, .wixt--ficha, .wixt--tres, .wixt--precio, .wixt--lecturas, .wixt--macro, .wixt--ayuda, .wixt--csv, .wqx, .wia, .wmgb, .wtel .wfon:first-child, .wtel .wfon:last-child { animation: none; } } /* ========================================================= 71 · Las cintas de tecnología, a un solo tamaño --------------------------------------------------------- En una `.techrow` conviven tres cosas: máscaras de logotipo, glifos propios —los de API REST y Webhooks— e iconos de Tabler. Las dos primeras se dibujan con `width` y salían a 18-20 px; los iconos son tipografía y `kit.css` los deja en 15. Al lado de un glifo se veían pequeños y como de otra cinta. Aquí se igualan a 19 px, que es la medida de los glifos, y los glifos toman el azul de la cinta: así el renglón entero se lee como una sola familia. No se toca `kit.css`; esto gana por especificidad desde la última hoja. ========================================================= */ .techrow i.ti { font-size: 19px; } .techrow .logo-marca[class*="glifo-"] { color: var(--motif-b-ink, var(--buho-blue-600)); } /* En banda oscura los glifos van en blanco, como los logotipos y el texto que llevan al lado. El rosa es el acento de los iconos de concepto de `kit.css`, y en una fila donde todo lo demás es blanco desentonaba: los dos últimos de `web-corporativa` se leían como si fueran de otra fila. */ :is(.sec--navy, .phband, .closer) .techrow .logo-marca[class*="glifo-"] { color: #fff; } /* ========================================================= 72 · Que la columna pegajosa se despegue --------------------------------------------------------- `.sticky-story__vis` lleva `position: sticky` desde el principio, pero no se pegaba nunca: `.sec` tiene `overflow: hidden` —para recortar los orbes de fondo— y un ancestro con overflow distinto de `visible` convierte al elemento en un simple `static`. No avisa nadie; el efecto es que la ficha de la izquierda se queda arriba y, con cinco o seis pasos a la derecha, el lector la pierde de vista justo cuando la necesita. `overflow: clip` recorta igual pero **no** crea contenedor de desplazamiento, así que el sticky vuelve a funcionar. Se aplica solo a las secciones que llevan una columna pegajosa dentro, para no cambiarle el recorte a las demás. ========================================================= */ .sec:has(.sticky-story) { overflow: clip; } /* ========================================================= 73 · Logotipos a color, tal como los publica la marca --------------------------------------------------------- Plin, Izipay y Niubiz no publican un vector monocromo. Sus archivos son los que son: el PNG de la burbuja de Plin, el logotipo a color de Izipay y el SVG de Niubiz. Calcarlos para meterlos en el sistema de máscaras sería dibujar nosotros su marca, así que entran como imagen, sin tocar. El precio es que no heredan `currentColor`. Los tres leen sobre claro y sobre navy salvo Niubiz —su logotipo es azul casi negro— y para eso se usa el negativo que ellos mismos publican. `--mc-ar` es la proporción del archivo: alto fijo, ancho derivado. Así la fila mantiene una sola altura óptica. ========================================================= */ .marca-color { --mc: 18px; display: inline-block; height: var(--mc); width: calc(var(--mc) * var(--mc-ar, 1)); background: center / contain no-repeat; vertical-align: middle; flex-shrink: 0; } .marca-color--plin { --mc-ar: 1; background-image: url("logos-servicios/pagos/plin.webp"); } .marca-color--izipay { --mc-ar: 3.30; background-image: url("logos-servicios/pagos/izipay.webp"); } .marca-color--niubiz { --mc-ar: 4.35; background-image: url("logos-servicios/pagos/niubiz.svg"); } .marca-color--yape { --mc-ar: 1; background-image: url("logos-servicios/pagos/yape.webp"); } .marca-color--pagoefectivo { --mc-ar: 1; background-image: url("logos-servicios/pagos/pagoefectivo.webp"); } .marca-color--culqi { --mc-ar: 0.98; background-image: url("logos-servicios/pagos/culqi.svg"); } .marca-color--olva { --mc-ar: 1.54; background-image: url("logos-servicios/pagos/olva.webp"); } .marca-color--shalom { --mc-ar: 1; background-image: url("logos-servicios/pagos/shalom.webp"); } /* Niubiz sobre navy: su propio negativo. */ .sec--navy .marca-color--niubiz, .phband .marca-color--niubiz, .closer .marca-color--niubiz, .bento .dark .marca-color--niubiz { background-image: url("logos-servicios/pagos/niubiz-blanco.svg"); } /* Plin es una burbuja con la palabra dentro: a 18 px se cierra, un punto más de aire la deja legible. */ /* PagoEfectivo se une aquí a Yape y Plin: los tres son un cuadrado o un círculo lleno con la figura dentro, así que piden la misma caja. En esta fila iba como máscara y, al heredar el color del chip, salía en blanco sobre fondo claro: invisible. */ .tchip .marca-color--plin, .tchip .marca-color--pagoefectivo, .tchip .marca-color--yape { --mc: 21px; } /* ── 75.1 · Los sistemas con los que se conecta la tienda ─ Nubefact, Bizlinks, Defontana, Contasis y Bsale no están en Simple Icons y no se dibujan a mano: son sus isotipos oficiales, tomados del favicon o del recurso de marca de cada web y recortados a su tinta. Van a color, como Yape o Izipay (§75), porque su forma vive en su color. Cada uno lleva su medida óptica: un cuadrado lleno pesa más que un aro abierto aunque midan lo mismo. ------------------------------------------------------- */ .marca-color--nubefact { --mc-ar: 0.861; background-image: url("logos-servicios/erp/nubefact.webp"); } .marca-color--bizlinks { --mc-ar: 1; background-image: url("logos-servicios/erp/bizlinks.webp"); } .marca-color--defontana { --mc-ar: 0.826; background-image: url("logos-servicios/erp/defontana.svg"); } .marca-color--contasis { --mc-ar: 1; background-image: url("logos-servicios/erp/contasis.webp"); } .marca-color--bsale { --mc-ar: 1; background-image: url("logos-servicios/erp/bsale.webp"); } .tchip .marca-color--defontana { --mc: 21px; } /* aro abierto y fino */ .tchip .marca-color--nubefact { --mc: 20px; } /* letra suelta */ .tchip .marca-color--bizlinks { --mc: 18px; } /* disco blanco lleno */ .tchip .marca-color--contasis { --mc: 19px; } /* círculo lleno */ .tchip .marca-color--bsale { --mc: 17px; } /* cuadrado lleno: el que más pesa */ /* Fastura, en esta misma fila, es un archivo propio y va por `.brandimg`: su media luna es abierta y a 14,8 px —lo que deja §41 para un logotipo en línea— se quedaba cuatro puntos por debajo del resto. Se ata a la sección, no al `src`: en la previsualización autocontenida el `src` es un data: URI y un selector por atributo no engancharía. */ #integracion .techrow .brandimg { --bh: 19px; } /* Niubiz es un logotipo-palabra de 4,35 : 1: a 18 px de alto sale 78 px de ancho y domina la fila entera. A 13,5 px mide 59 —lo mismo que Izipay, que va al lado— y la cinta se lee pareja. */ .tchip .marca-color--niubiz { --mc: 13.5px; } /* ── 73.1 · Isotipos en /nube/hosting ──────────────────── El hero y la banda de especificaciones enseñaban el logotipo completo —la marca escrita— de cPanel, LiteSpeed, WooCommerce, MySQL y Webmail. Ahora enseñan el símbolo que cada una publica, sin el nombre: · cPanel · su monograma «cP», en su naranja (#FF6C2C). · LiteSpeed · el icono del servidor. Ya estaba en el repo: lo usaba el hero y la banda no. · MySQL · el delfín solo, sin la palabra. · Webmail · Roundcube, que es el webmail que se sirve. «Webmail» no es una marca, era una palabra. · WooCommerce· la «w» sola. Su icono oficial es esa «w» dentro de un disco morado —el mismo trazo que su favicon—, así que se usa el glifo recortado de su propio SVG, sin el disco: el resto de la banda es monocroma y un recuadro de color rompía la fila. Softaculous salió de la fila: no publica isotipo —su marca es solo la palabra caligrafiada— y era la única pieza que seguía llevando el nombre escrito. Los cinco entran como máscara, igual que los demás, y no como ``. Eso importa para el color: una imagen se fuerza a blanco con un filtro y al pasar el ratón el filtro se pisa y salta a su color de archivo —unos legibles sobre el navy y otros no—. Una máscara se pinta con `currentColor` y entonces la fila entera obedece a la misma regla. Los pesos ópticos: un cuadrado lleno pesa más que un trazo a la misma altura, y un monograma apaisado pesa menos. La fila se iguala a ojo, no por altura nominal. ------------------------------------------------------- */ /* `--iso-ar` es la proporción del lienzo del archivo: la altura manda y el ancho se deriva, como en §73. */ .logo-iso { display: inline-block; height: var(--iso, 20px); width: calc(var(--iso, 20px) * var(--iso-ar, 1)); background-color: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; vertical-align: middle; flex-shrink: 0; } .logo-iso--cpanel { --iso-ar: 1.49; --mk: #FF6C2C; -webkit-mask-image: url("logos-servicios/hosting/cpanel-icon.svg"); mask-image: url("logos-servicios/hosting/cpanel-icon.svg"); } .logo-iso--litespeed { --iso-ar: 1; --mk: #0B6FBA; -webkit-mask-image: url("logos-servicios/hosting/litespeed-web-server-icon.svg"); mask-image: url("logos-servicios/hosting/litespeed-web-server-icon.svg"); } .logo-iso--woo { --iso-ar: 1.82; --mk: #873EFF; -webkit-mask-image: url("logos-servicios/hosting/woocommerce-icon.svg"); mask-image: url("logos-servicios/hosting/woocommerce-icon.svg"); } .logo-iso--mysql { --iso-ar: 1.02; --mk: #00758F; -webkit-mask-image: url("logos-servicios/hosting/mysql-icon.svg"); mask-image: url("logos-servicios/hosting/mysql-icon.svg"); } .logo-iso--roundcube { --iso-ar: 1; --mk: #1A93CE; -webkit-mask-image: url("logos-servicios/hosting/roundcube.svg"); mask-image: url("logos-servicios/hosting/roundcube.svg"); } /* Igualar por altura de caja no sirve: cada archivo deja un margen distinto alrededor del dibujo. LiteSpeed y Roundcube traen aire de sobra y se veían pequeños al lado del resto. La medida que hay que igualar es la TINTA, y la banda ya tenía su convención —la que fija `--lmb` en las máscaras de Simple Icons—: tinta de 28 px de alto marcas de proporción ≈ 1 tinta de 24 px de alto marcas apaisadas (≥ 1.4) PHP (1.89 : 1) y phpMyAdmin (1.39 : 1) ya iban a 24. cPanel (1.49) y la «w» de Woo (1.85) entran en ese grupo; LiteSpeed (0.80), MySQL (1.03) y Roundcube (1.00) en el primero. `--iso` es la caja, no la tinta, así que cada valor es la altura objetivo dividida por lo que el dibujo ocupa dentro de su lienzo (medido sobre el archivo): cPanel 24 / 1.000 Woo 24 / 0.980 LiteSpeed 28 / 0.945 MySQL 28 / 0.995 Roundcube 28 / 1.000 ------------------------------------------------------- */ /* ── 73.1a · La banda, a color ──────────────────────────── La fila iba entera en blanco. Ahora cada marca lleva su color, pero no todas por el mismo camino, porque sobre el navy (#001144) no todas sobreviven: · **Archivo a color** las nueve que se leen solas: cPanel, LiteSpeed, Woo, Joomla, Drupal, Moodle, PHP, Let's Encrypt y Roundcube. · **Máscara teñida con su color de marca** las cinco cuyo archivo oficial es oscuro o trae la palabra escrita: WordPress (#464342 en su SVG: casi el fondo), PrestaShop (negro), Laravel y phpMyAdmin (sus archivos a color son logotipos, con el nombre) y MySQL. Se usa el hex de §1, que es el del manual de cada una. · **Dos van aclaradas** porque su azul de manual es casi este navy: WordPress (#21759B) y el delfín de MySQL (#00758F). Se les mezcla blanco, que conserva el tono y garantiza que se lean. Sin eso desaparecen. Let's Encrypt entra con su archivo: el cuerpo del candado es azul oscuro y se funde un poco, pero los rayos naranjas lo identifican y es su dibujo real. ------------------------------------------------------- */ .specband--logos .brandimg[src$="cpanel-icon.svg"] { --bh: 24px; } .specband--logos .brandimg[src$="litespeed-web-server-icon.svg"] { --bh: 29.6px; } .specband--logos .brandimg[src$="woocommerce-icon.svg"] { --bh: 24.5px; } .specband--logos .brandimg[src$="joomla-color.svg"] { --bh: 28px; } .specband--logos .brandimg[src$="drupal-color.svg"] { --bh: 28px; } .specband--logos .brandimg[src$="moodle-color.svg"] { --bh: 24px; } .specband--logos .brandimg[src$="php-color.svg"] { --bh: 25.3px; } .specband--logos .brandimg[src$="letsencrypt-color.svg"] { --bh: 28px; } .specband--logos .brandimg[src$="roundcube-color.svg"] { --bh: 28px; } /* Las cinco máscaras, cada una en su color. */ .specband--logos .logo-marca.logo-wordpress { color: color-mix(in srgb, #21759B 85%, #fff); } .specband--logos .logo-marca.logo-prestashop { color: #DF0067; } .specband--logos .logo-marca.logo-laravel { color: #FF2D20; } .specband--logos .logo-marca.logo-phpmyadmin { color: #F89C0E; } /* La «w» dentro de un chip: es apaisada (1.85 : 1) y con la caja por defecto pesaba 26.7 de masa, contra 15.7-18.0 de PHP, Python, Node, Laravel y WordPress. A 13 px da 17.5. */ .tchip .logo-iso { --iso: 13px; } /* Dentro de una `.techrow`, `.logo-marca` ya se fuerza a blanco (logos-servicios.css §«.sec--navy .techrow .logo-marca»), pero `.logo-iso` no estaba en esa lista y caía en `.sec--navy .techrow i` (0,2,1), que la pinta con el color de acento del motivo. La «w» quedaba morada al lado de PHP, Python y Node, todos en blanco. Se iguala aquí, con (0,3,0) para ganarle. El morado de `--mk` sigue vivo en las bandas, que no son `.techrow`. */ .techrow .logo-iso { color: currentColor; } :is(.sec--navy, .phband, .closer) .techrow .logo-iso { color: #fff; } .specband--logos .logo-iso { --iso: 28px; } .specband--logos .logo-iso--mysql { --iso: 28px; color: color-mix(in srgb, #00758F 55%, #fff); } /* El delfín es un dibujo de línea fina: sobre el navy se desvanece, así que va a opacidad plena, no al .88 de la fila. */ .specband--logos .specband__track > span:has(> .logo-iso--mysql) { opacity: 1; } /* En móvil la fila baja de 28 a 24 px de tinta (§20). */ @media (max-width: 700px) { .specband--logos .brandimg[src$="cpanel-icon.svg"] { --bh: 21px; } .specband--logos .brandimg[src$="litespeed-web-server-icon.svg"] { --bh: 25.4px; } .specband--logos .brandimg[src$="woocommerce-icon.svg"] { --bh: 21px; } .specband--logos .brandimg[src$="joomla-color.svg"] { --bh: 24px; } .specband--logos .brandimg[src$="drupal-color.svg"] { --bh: 24px; } .specband--logos .brandimg[src$="moodle-color.svg"] { --bh: 21px; } .specband--logos .brandimg[src$="php-color.svg"] { --bh: 22.2px; } .specband--logos .brandimg[src$="letsencrypt-color.svg"] { --bh: 24px; } .specband--logos .brandimg[src$="roundcube-color.svg"] { --bh: 24px; } .specband--logos .logo-iso, .specband--logos .logo-iso--mysql { --iso: 24px; } } /* ── 73.1a-bis · La banda de /nube/vps, a color ─────────── Mismo criterio que en hosting: archivo a color el que se lee sobre el navy, máscara teñida con su hex de manual el que no. · **Archivo** las trece que se leen solas: Ubuntu, AlmaLinux, Rocky, CentOS, Docker, Node, Python, PHP, MariaDB, PostgreSQL, Nginx, Apache y cPanel. · **Máscara teñida** tres: Debian, cuyo granate (#A81D33) es casi el fondo y sube con un 40 % de blanco; Laravel, porque su archivo a color es el logotipo con la palabra; y el delfín de MySQL, que ya tenía su regla en §73.1a. cPanel deja de enseñar `cpanel-white.svg` —el logotipo, 90 px de ancho— y pasa al monograma «cP», el mismo archivo que usan hosting y google-workspace. Alturas: la convención de §73.1, 28 px de tinta y 24 en las apaisadas. Los valores salen de medir cuánto llena el dibujo su propio lienzo, archivo por archivo. ------------------------------------------------------- */ .specband--logos .brandimg[src$="ubuntu-color.svg"] { --bh: 28.1px; } .specband--logos .brandimg[src$="almalinux-color.svg"] { --bh: 28px; } .specband--logos .brandimg[src$="rockylinux-color.svg"] { --bh: 28px; } .specband--logos .brandimg[src$="centos-color.svg"] { --bh: 28px; } .specband--logos .brandimg[src$="docker-color.svg"] { --bh: 28px; } .specband--logos .brandimg[src$="nodejs-color.svg"] { --bh: 28px; } .specband--logos .brandimg[src$="python-color.svg"] { --bh: 28.1px; } .specband--logos .brandimg[src$="mariadb-color.svg"] { --bh: 24px; } /* apaisada (1.50) */ .specband--logos .brandimg[src$="postgresql-color.svg"] { --bh: 28.1px; } .specband--logos .brandimg[src$="nginx-color.svg"] { --bh: 28px; } .specband--logos .brandimg[src$="apache-color.svg"] { --bh: 28px; } .specband--logos .logo-marca.logo-debian { color: color-mix(in srgb, #A81D33 60%, #fff); } @media (max-width: 700px) { .specband--logos .brandimg[src$="ubuntu-color.svg"], .specband--logos .brandimg[src$="almalinux-color.svg"], .specband--logos .brandimg[src$="rockylinux-color.svg"], .specband--logos .brandimg[src$="centos-color.svg"], .specband--logos .brandimg[src$="docker-color.svg"], .specband--logos .brandimg[src$="nodejs-color.svg"], .specband--logos .brandimg[src$="python-color.svg"], .specband--logos .brandimg[src$="postgresql-color.svg"], .specband--logos .brandimg[src$="nginx-color.svg"], .specband--logos .brandimg[src$="apache-color.svg"] { --bh: 24px; } .specband--logos .brandimg[src$="mariadb-color.svg"] { --bh: 21px; } } /* ── 73.1b · Marcas dentro de la cinta de /tienda-virtual ─ Esa cinta no es de logos: es una lista de prestaciones con icono y texto. Pero tres de sus entradas nombran marcas y llevaban un icono genérico —un móvil por «Yape y Plin», una tarjeta por «Culqi o Izipay», el WhatsApp de Tabler—. Ahora llevan la marca, que es lo que el lector reconoce de un vistazo mientras la cinta pasa. Yape, Plin y Culqi entran a color, con el archivo de cada una (§73). Izipay también, aunque lo suyo sea un logotipo: no publica símbolo suelto. WhatsApp sí tiene máscara, así que hereda el rosa de la fila como los demás iconos. SUNAT se queda con `ti-receipt`: no hay logo suyo en el repositorio y no es una marca que convenga poner nosotros. ------------------------------------------------------- */ .specband__track .marca-color { --mc: 24px; } /* Izipay es la excepción a la regla de la masa. Su masa ya era de las mayores (26.7) y aun así se leía pequeño: es un logotipo en minúsculas, y de un logotipo el ojo mide la altura de la letra, no la de su caja. Sube a 19 px de caja para que la palabra tenga cuerpo. */ .specband__track .marca-color--izipay { --mc: 19px; } .specband__track .marca-color--olva { --mc: 19.5px; } /* apaisado */ /* Igualar el ALTO no basta: un logo ancho pesa más que uno cuadrado a la misma altura, y por eso Olva, Fastura y Meet —de 1.24 a 1.55 de proporción— se veían más grandes que Yape o WhatsApp, que son cuadrados. Lo que se iguala es la masa: la media geométrica de la tinta, √(ancho × alto), que sí corresponde a lo que el ojo llama «del mismo tamaño». La fila apunta a **24**, que es la masa de Yape, WhatsApp y Excel. Medido sobre la página, antes → después: Olva 26.0 → 24.0 Fastura 26.7 → 24.0 Meet 27.1 → 24.0 Izipay ver abajo Los no listados ya estaban entre 21 y 25 y no se tocan. */ /* Y el resto se afina al mismo 24 de masa. Son ajustes de un 7 % —el margen que cada archivo deja alrededor del dibujo— pero es lo que separa una fila pareja de una que baila. */ .specband__track .brandimg[src$="microsoft-excel.svg"] { --bh: 23px; } .specband__track .marca-color--plin { --mc: 26px; } /* 7 % de aire en el archivo */ .specband__track .marca-color--culqi { --mc: 24.7px; } .specband__track .logo-marca.logo-letsencrypt { --lm: 24.7px; } .specband__track .brandimg[src$="isotipo-fastura.svg"] { --bh: 21.5px; } .specband__track .brandimg[src$="google-meet.svg"] { --bh: 21.5px; } /* La «w» de Woo es apaisada (1.82 : 1): a la altura de un marca cuadrada pesaría el doble, así que va más baja. Entra en su morado, como las demás marcas a color de la fila. */ .specband__track .brandimg--woo { --bh: 16px; } /* Cada marca en su color, nunca en blanco plano: · WhatsApp en su verde (#25D366), que sobre el navy se lee solo. · Let's Encrypt pasa a su archivo a color —el mismo que usa /nube/hosting—: candado azul y rayos naranjas. Deja de ser máscara. · Visa en su azul (#1434CB), pero aclarado: a pelo sobre este navy queda apagado. Con un 45 % de blanco conserva el tono y se lee; es el mismo criterio que WordPress y el delfín de MySQL en §73.1a. ------------------------------------------------------- */ .specband__track .logo-marca.logo-whatsapp { --lm: 24px; color: #25D366; } .specband__track .logo-marca.logo-visa { --lm: 15px; color: color-mix(in srgb, #1434CB 55%, #fff); } /* Mismo 24 de masa que el resto de la cinta (§73.1b). */ .specband__track .brandimg[src$="letsencrypt-color.svg"] { --bh: 24.7px; } /* ── 73.1c · El nombre de la marca al pasar el ratón ────── La cinta enseña logos, y un logo sin nombre solo lo lee quien ya conoce la marca. El globo de §36 —que se escribió para la banda de /nube/hosting— sirve igual aquí: basta `class="tip" data-tip="…"` en cada chip. Dos ajustes: · El globo cuelga por debajo del icono y la cinta lleva `overflow: hidden`, así que hace falta relleno inferior o se recorta. `:has()` lo aplica solo a las cintas que de verdad llevan globo. · Aquí el chip ya tiene texto al lado, así que el logo NO se levanta al pasar el ratón: con el nombre escrito moviéndose al lado, el salto se lee como un defecto. ------------------------------------------------------- */ .specband:not(.specband--logos):has(.specband__track > .tip) { padding: 20px 0 38px; } /* Los chips ya no llevan el nombre escrito al lado —solo el logo, y el nombre sale en el globo—, así que la fila necesita más aire entre marca y marca para que no se lean como una sola mancha. */ .specband:not(.specband--logos):has(.specband__track > .tip) .specband__track { gap: 52px; } /* ── 73.2 · La fila se enciende con el color de cada marca ─ Al pasar el ratón, el logo pasa de blanco a su color. No al color exacto del manual: sobre el navy, el azul de Let's Encrypt (#003A70) o el de MySQL (#00758F) quedarían casi invisibles. Se mezcla cada uno con un 28 % de blanco, que conserva el tono y garantiza que se lea. `--mk` ya existe por marca (§1); las máscaras de la banda lo reciben por la clase `mk-*` del HTML —solo la variable, sin la clase `mk`, que las pintaría de color también en reposo— y los cinco isotipos lo traen en su propia regla, arriba. ------------------------------------------------------- */ .specband__track > .tip > .logo-iso { transition: transform 260ms cubic-bezier(.34, 1.56, .64, 1), background-color 200ms ease, filter 200ms ease; } /* Se repite el `transition` de §36 porque esta regla tiene la misma especificidad y, al ir después, lo sustituiría entero: sin esto el logo saltaría en vez de levantarse. */ .specband__track > .tip > .logo-marca { transition: transform 260ms cubic-bezier(.34, 1.56, .64, 1), background-color 200ms ease, filter 200ms ease; } /* El hover ya no cambia el color: desde §73.1a cada marca llega con el suyo puesto. Lo que queda del gesto es el levantarse y pasar de .88 a opacidad plena. */ .specband__track > .tip:hover > .logo-iso { transform: translateY(-3px) scale(1.12); filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45)); } @media (prefers-reduced-motion: reduce) { .specband__track > .tip > .logo-iso { transition: background-color 200ms ease; } .specband__track > .tip:hover > .logo-iso { transform: none; } } /* En el hero manda el ancho (§23). El monograma es apaisado (1.49 : 1), así que a 30 px de ancho queda más bajo que el icono de LiteSpeed; se compensa con ancho, no con alto. */ .hcard__logos .brandimg[src*="cpanel-icon"] { width: 34px; } /* ========================================================= 74 · MENSAJERÍA · las escenas del hero --------------------------------------------------------- Las cinco páginas hermanas de `waya.html` llevaban maquetas sueltas, escritas con estilo en línea, una distinta por página y ninguna parecida a las demás. Ahora llevan el mismo mueble que /servicios —el kit de §62— con dos diferencias: · El acento no es el azul Búho sino el violeta de Waya, con la lima de la marca como complemento. Se cambia entero desde `.wesc--waya`, sin tocar una sola regla del mueble. · Cada escena enseña, literalmente, lo que dice su titular. Las dos tarjetas que flotan son las dos mitades de la frase que hay al lado: en `contactos`, «un expediente» y «no veinte hilos»; en `informes`, «quién contestó» y «cuánto tardó». Si el titular cambia, la escena miente. El reparto del lienzo es el de §68, que es el único que se midió sin un solo solape: la ventana baja 24 px, la tarjeta de arriba ocupa la esquina de los puntos del navegador —que se ceden— y la de abajo encaja en la sangría de la banda oscura. A cambio, la barra deja libre su lado derecho para el estado, que es donde de verdad se mira. ========================================================= */ /* ── 74.0 · El acento de Waya ──────────────────────────── Violeta de atmósfera, lima de acción; el par del manual. La lima pura no llega a 4,5:1 sobre blanco, así que donde hay texto va su tinta oscura, igual que en §69. ------------------------------------------------------- */ .wesc--waya .wesc { --ac-ink: #6D4AFF; --ac-tinta: #5333E0; --ac-suave: #F6F3FE; --ac-claro: #ECE4FB; --ac-alto: #B9A6FF; --ac-medio: #8A6DFF; } /* Va sobre `.wesc` y no sobre `.wesc-wrap`, que es quien lleva la clase: `.wesc` declara el azul en su propio bloque, y una declaración propia le gana siempre a lo que hereda del padre. Heredar no basta cuando el hijo también declara. */ /* ── 74.0b · El mueble, en claro ───────────────────────── La maqueta de `waya.html` (§57) no tiene ni una banda oscura: la ventana es blanca de arriba abajo y lo único que la ordena son las líneas tenues. En /servicios sí las hay —la barra de herramienta y el pie—, y eso era lo que separaba estas cinco de su propia página madre. Así que aquí el mueble se viste de claro. El kit de §62 no se toca: se le cambia el traje desde `.wesc--waya`, y las seis escenas de /servicios siguen con sus bandas navy. ------------------------------------------------------- */ .wesc--waya .wsc__top { background: #FCFCFE; border-bottom: 1px solid var(--a-linea, #ECECF3); } .wesc--waya .wsc__mk { background: var(--ac-claro); color: var(--ac-ink); } .wesc--waya .wsc__mk .logo-marca { color: var(--ac-ink); } .wesc--waya .wsc__doc b { color: var(--buho-navy-950, #001144); } .wesc--waya .wsc__doc span { color: var(--a-tenue, #7C8398); } .wesc--waya .wsc__seg { background: #F3F3F8; } .wesc--waya .wsc__seg span { color: var(--a-tenue, #7C8398); } .wesc--waya .wsc__seg span.on { background: #fff; color: var(--buho-navy-950, #001144); box-shadow: 0 1px 3px rgba(26, 20, 70, .14); } /* El pie deja de ser una banda y pasa a ser la última fila de la hoja, con su línea tenue como todas las demás. */ .wesc--waya .wsc__pie { background: #FCFCFE; border-top: 1px solid var(--a-linea, #ECECF3); } .wesc--waya .wsc__pie > .ti { color: var(--ac-ink); } .wesc--waya .wsc__pie b { color: var(--buho-navy-950, #001144); } .wesc--waya .wsc__pie .m { color: var(--a-tenue, #7C8398); } /* Y la hoja llena la ventana: en la maqueta de Waya la aplicación llega hasta el borde, sin el marco gris. */ .wesc--waya .wsc__can { padding: 0; background: #fff; } .wesc--waya .wsc__pg { border-radius: 0; box-shadow: none; } /* Las sombras de lo que flota, más cortas: la referencia pesa bastante menos que las tarjetas de /servicios. */ .wesc--waya .wixt, .wesc--waya .wqx, .wesc--waya .wia { box-shadow: 0 12px 26px rgba(26, 20, 70, .16), 0 0 0 1px rgba(26, 20, 70, .04); } /* ── El distintivo de canal ────────────────────────────── El redondel navy con el logotipo colgado del costado sale tal cual de §57, y es lo que hace que estas cinco se reconozcan como familia de `waya.html` a un metro. ------------------------------------------------------- */ .wmgb { position: absolute; z-index: 10; left: -30px; top: 170px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--buho-navy-950, #001144); box-shadow: 0 14px 30px rgba(0, 17, 68, .30); } .wmgb .logo-marca { --lm: 22px; color: #fff; } /* Las cinco comparten el mismo reparto: ventana a 24, barra en tres columnas con el estado a la derecha y la banda del pie sangrada para que encaje la tarjeta de abajo. */ .wesc--waya .wsc { top: 24px; } .wesc--waya .wsc__bar { display: grid; grid-template-columns: 1fr auto 1fr; } .wesc--waya .wsc__url { margin: 0 auto; } .wesc--waya .wsc__pie { padding-left: 122px; } .wesc--waya .wixt { left: -40px; } /* El rosa es el color de acción de Búho; el de Waya es la lima. Sobre la barra clara pesa el doble que sobre la navy, así que además de cambiar de color encoge: en la referencia el verde solo aparece en el botón de enviar, que es pequeño. */ .wesc--waya .wsc__act { background: #8FD400; color: #001144; padding: 6px 12px; font-size: 9.5px; } .wesc--waya .wsc__act .ti { font-size: 12px; } /* El estado de la barra: una pastilla y un punto que late. Hermano del de §68, pero aquí el punto es lima, que es el color con el que Waya dice «esto está funcionando». */ .wmg__est { justify-self: end; display: inline-flex; align-items: center; gap: 8px; } .wmg__chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: var(--ac-claro); color: var(--ac-tinta); font: 700 7.5px/1 var(--font-sans); white-space: nowrap; } .wmg__chip .ti { font-size: 10px; } .wmg__vivo { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font: 600 8px/1 var(--font-mono); color: var(--a-tenue, #7C8398); } .wmg__vivo i { width: 6px; height: 6px; border-radius: 50%; flex: none; background: #7FA800; animation: wixLate 2.4s var(--ease-out, ease-out) infinite; } @media (prefers-reduced-motion: reduce) { .wmg__vivo i { animation: none; } } /* La marca del cliente en la barra oscura: redonda, con las iniciales, porque en estas páginas la identidad es una persona o una empresa, no una herramienta. */ .wmg__av { width: 23px; height: 23px; border-radius: 999px; flex: none; display: grid; place-items: center; background: var(--ac-ink); color: #fff; font: 800 8.5px/1 var(--font-sans); } /* El mismo redondel, dentro de una fila de la hoja. */ .wsc__lin .ic.wmg__ini { border-radius: 999px; background: var(--ac-claro); color: var(--ac-tinta); font: 800 8px/1 var(--font-sans); } .wsc__prog i.p67 { width: 67%; } /* La pastilla de canal: el logotipo real de la marca en su color, que es lo que hace creíble «por el canal que sea». */ .wmg__canal { width: 20px; height: 20px; border-radius: 7px; flex: none; display: grid; place-items: center; background: var(--mk-soft, #F1F1F7); color: var(--mk, var(--ac-ink)); } .wmg__canal .logo-marca { --lm: 11px; } /* ── 74.1 · MARCA BLANCA · el panel que lleva tu nombre ── El titular promete revender bajo marca propia. La escena entera está montada sobre esa promesa: la dirección de la barra es `api.tumarca.pe`, la identidad de la barra oscura es «Tu Marca», y la única vez que aparece Waya es en la banda del pie, diciendo que la infraestructura es nuestra. ------------------------------------------------------- */ .wesc--mb { --alto: 482px; } .wmb__cta { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 5px 10px; border-radius: 999px; background: #EFF9D6; color: #4C6E00; font: 700 7.5px/1 var(--font-sans); white-space: nowrap; } .wmb__cta .ti { font-size: 10px; } .wixt--dominio { top: -38px; } .wixt--precio { top: 378px; } /* ── 74.2 · QR BÚHO · el papel no cambia, el destino sí ── Aquí la escena tiene que enseñar dos cosas a la vez, y por eso el código impreso no está dentro de la ventana: está fuera, en su tarjeta, como está fuera en la vida real —en una carta, en una vitrina—. Dentro de la ventana solo pasa lo que sí cambia: el destino, y lo que se anota de cada lectura. ------------------------------------------------------- */ .wesc--qr { --alto: 512px; } /* El destino que se edita, y debajo el que había antes. */ .wqx__dst { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 11px; background: var(--ac-suave); box-shadow: inset 0 0 0 1px var(--ac-claro); } .wqx__dst .ti { font-size: 13px; color: var(--ac-ink); flex: none; } .wqx__dst b { font: 600 9px/1 var(--font-mono); color: var(--buho-navy-950, #001144); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wqx__dst .ed { margin-left: auto; flex: none; padding: 5px 10px; border-radius: 999px; background: #8FD400; color: #001144; font: 700 7.5px/1 var(--font-sans); } .wqx__ant { display: flex; align-items: center; gap: 6px; margin-top: 7px; padding-left: 2px; font: 500 7.5px/1 var(--font-mono); color: var(--a-tenue, #7C8398); } .wqx__ant b { font-weight: 500; text-decoration: line-through; } .wqx__ant .ti { font-size: 10px; } /* Los cuatro datos de cada lectura, que son los cuatro que promete el párrafo del hero: día, hora, dispositivo, ciudad. */ .wqx__d { display: grid; gap: 5px; padding: 9px 8px; text-align: center; } .wqx__d .ti { font-size: 12px; color: var(--ac-ink); } .wqx__d b { font: 700 9px/1 var(--font-mono); color: var(--buho-navy-950, #001144); } .wqx__d span { font: 600 6.5px/1 var(--font-sans); color: var(--color-text-muted); } /* El código impreso, en su tarjeta, ligeramente girado: es papel, no pantalla. */ .wqx { position: absolute; z-index: 9; left: -42px; top: 353px; width: 124px; --rot: -3deg; transform: rotate(-3deg); padding: 10px 10px 9px; border-radius: 16px; background: #fff; box-shadow: 0 24px 48px rgba(26, 20, 70, .20), 0 0 0 1px rgba(26, 20, 70, .06); } .wqx__img { display: block; width: 100%; height: auto; } .wqx__pie { display: flex; align-items: center; gap: 5px; margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--a-linea, #ECECF3); font: 700 6.5px/1.3 var(--font-mono); color: var(--a-tenue, #7C8398); } .wqx__pie .ti { font-size: 10px; color: var(--ac-ink); flex: none; } .wixt--lecturas { top: -38px; } /* ── 74.3 · AUTOMATIZACIÓN · la regla, escrita como se lee ─ Una regla es una frase: cuando pasa esto, haz esto otro. Por eso no se dibuja como un formulario sino como tres pasos encadenados, con su raíl a la izquierda, que es como se leen. Debajo, la única cifra que importa: las veces que se ejecutó sin que nadie mirara. ------------------------------------------------------- */ .wesc--au { --alto: 438px; } /* La regla se escribe en los primeros 320 px de ancho: el resto se reserva para la tarjeta de la IA, igual que en §68 se reservó el margen derecho para la factura. */ .wesc--au .wsc__cpo, .wesc--au .wsc__lin { padding-right: 152px; } .wau__flujo { display: grid; gap: 0; } .wau__paso { position: relative; display: grid; gap: 5px; padding: 0 0 13px 26px; } .wau__paso:last-child { padding-bottom: 0; } /* El raíl que une los pasos. */ .wau__paso::before { content: ""; position: absolute; left: 7px; top: 15px; bottom: 0; width: 1.5px; background: var(--ac-claro); } .wau__paso:last-child::before { display: none; } .wau__paso > .pt { position: absolute; left: 0; top: 1px; width: 16px; height: 16px; border-radius: 999px; display: grid; place-items: center; font-size: 9px; background: var(--ac-ink); color: #fff; } .wau__paso em { font-style: normal; font: 700 6.5px/1 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--a-tenue, #7C8398); } .wau__paso b { font: 700 9px/1.35 var(--font-sans); color: var(--color-text); } .wau__acc { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; } .wau__acc span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; background: var(--ac-suave); box-shadow: inset 0 0 0 1px var(--ac-claro); font: 600 7.5px/1 var(--font-sans); color: var(--ac-tinta); } .wau__acc span .ti { font-size: 9px; } /* Lo que la IA propone, con las dos salidas de siempre: enviar tal cual, o editar antes. */ .wia { position: absolute; z-index: 9; right: -30px; top: 170px; width: 186px; padding: 11px 12px 12px; border-radius: 16px; background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 22px 44px rgba(26, 20, 70, .18), 0 0 0 1px rgba(26, 20, 70, .06); } .wia__cab { display: flex; align-items: center; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--a-linea, #ECECF3); font: 700 8.5px/1 var(--font-sans); color: var(--color-text); } .wia__cab .ti { font-size: 13px; color: var(--ac-ink); } .wia__cab em { margin-left: auto; font-style: normal; font: 700 6.5px/1 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--a-tenue, #7C8398); } .wia__tx { display: block; margin: 9px 0 10px; padding: 9px 10px; border-radius: 11px; background: var(--ac-suave); font: 500 8px/1.45 var(--font-sans); color: var(--color-text); } .wia__acts { display: flex; gap: 6px; } .wia__acts span { flex: 1; text-align: center; padding: 6px 0; border-radius: 999px; font: 700 7.5px/1 var(--font-sans); } .wia__acts .si { background: #8FD400; color: #001144; } .wia__acts .no { background: #F1F1F7; color: var(--color-text); } .wixt--regla { top: -38px; } .wixt--macro { top: 334px; } /* ── 74.4 · CONTACTOS · un expediente, no veinte hilos ─── El titular es una comparación, así que la escena también: dentro de la ventana, la ficha única con todo lo que esa persona escribió; y cada línea del historial lleva el logotipo real del canal por el que entró, que es lo que hace creíble el «por el canal que sea». ------------------------------------------------------- */ .wesc--ct { --alto: 457px; } .wct__cab { display: flex; align-items: center; gap: 10px; padding: 11px 12px; } .wct__cab .av { width: 32px; height: 32px; border-radius: 999px; flex: none; display: grid; place-items: center; background: var(--ac-ink); color: #fff; font: 800 11px/1 var(--font-sans); } .wct__cab b { display: block; font: 800 11px/1 var(--font-sans); letter-spacing: -.01em; color: var(--color-text); } .wct__cab .s { display: block; margin-top: 4px; font: 500 8px/1 var(--font-mono); color: var(--color-text-muted); } .wct__cab .der { margin-left: auto; } /* Los campos que cada negocio decide guardar. */ .wct__campos { display: flex; flex-wrap: wrap; gap: 6px; } .wct__campos span { display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 9px; border-radius: 9px; background: #F7F7FB; box-shadow: inset 0 0 0 1px var(--a-linea, #ECECF3); font: 600 7.5px/1 var(--font-mono); color: var(--color-text); } .wct__campos span em { font-style: normal; font: 700 6.5px/1 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--a-tenue, #7C8398); } /* Una línea del historial: el canal, lo que dijo, y cuándo. */ .wct__msg { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-top: 1px solid var(--a-linea, #ECECF3); } .wct__msg .tx { min-width: 0; } .wct__msg b { display: block; font: 700 8px/1 var(--font-sans); color: var(--color-text); } .wct__msg .q { display: block; margin-top: 4px; font: 500 7.5px/1 var(--font-sans); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 232px; } .wct__msg .h { margin-left: auto; flex: none; font: 600 7px/1 var(--font-mono); color: var(--a-tenue, #7C8398); } .wixt--ficha { top: -38px; } .wixt--ayuda { top: 353px; } /* ── 74.5 · INFORMES · las tres preguntas del titular ──── «Cuántas llegaron, quién contestó y cuánto tardó» son tres preguntas, así que la hoja da tres respuestas y en ese orden. Debajo, el reparto por agente, que es la única de las tres que necesita desglose para significar algo. ------------------------------------------------------- */ .wesc--in { --alto: 443px; } .win__ag { display: grid; grid-template-columns: 18px 1fr 34px; align-items: center; gap: 9px; padding: 8px 12px; border-top: 1px solid var(--a-linea, #ECECF3); } .win__ag .av { width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; background: var(--ac-claro); color: var(--ac-tinta); font: 800 6.5px/1 var(--font-sans); } .win__ag .n { display: block; font: 700 8px/1 var(--font-sans); color: var(--color-text); } .win__ag .ba { display: block; margin-top: 5px; height: 5px; border-radius: 999px; background: #F1F1F7; } .win__ag .ba i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--ac-medio), var(--ac-ink)); } .win__ag .ba i.v34 { width: 34%; } .win__ag .ba i.v27 { width: 27%; } .win__ag .ba i.v18 { width: 18%; } .win__ag .p { text-align: right; font: 700 8px/1 var(--font-mono); color: var(--color-text); } .wixt--tres { top: -38px; } .wixt--csv { top: 339px; } /* ========================================================= 75 · FACTURACIÓN · las escenas del hero --------------------------------------------------------- Las cinco escenas de Facturación —Perú, Colombia, empresa, reseller y validación— llevaban cada una su propia maqueta escrita con estilo en línea, y dos de ellas resolvían el recorrido del comprobante con un `` cuyo texto, al escalar con el dibujo, bajaba a 3,4 px en un teléfono. Aquí va el mueble común. Es primo del kit de §62, con una diferencia deliberada: **no se escala**. Las escenas de /servicios y de Mensajería son la fotografía de una app y se miran; estas se leen —serie, importe, estado, tiempo—, así que el texto va a su tamaño real y la caja fluye con la columna. A 375 px la letra más pequeña sigue en 11 px. La ventana es la de `codigo-fuente.html`, que es la que se conserva: barra navy con los tres puntos, la dirección en mono y el estado a la derecha; el cuerpo en claro; y una banda de pie que remata con el dato que cierra el argumento. ========================================================= */ /* ── 75.1 · La ventana ─────────────────────────────────── `.fwin__bar` se marca `on-dark` y `.fwin__foot` `on-light` en el HTML: son la salida de emergencia del sistema de contraste, y quien pinta el texto de color es siempre una clase del hijo, nunca el padre. ------------------------------------------------------- */ .fwin { position: relative; z-index: 1; background: #fff; border: 1px solid rgba(0, 17, 68, .05); border-radius: var(--brand-card-radius, 14px); overflow: hidden; box-shadow: 0 30px 80px rgba(0, 17, 68, .12), 0 8px 24px rgba(0, 17, 68, .05); animation: hfSlide 520ms var(--ease-out) both; --fw-linea: rgba(0, 17, 68, .08); } @media (prefers-reduced-motion: reduce) { .fwin { animation: none; } } .fwin__bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--buho-navy-950); } .fwin__dots { display: inline-flex; gap: 6px; flex: none; } .fwin__dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .2); } .fwin__name { min-width: 0; font: 500 11px/1 var(--font-mono); color: rgba(255, 255, 255, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fwin__tag { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; font: 700 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--motif-a-light); } .fwin__tag .ti { font-size: 12px; } /* El punto que late: es el estado del servicio, no un adorno. */ .fwin__tag .pt { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--motif-a-light); animation: fwLate 2.4s var(--ease-out) infinite; } @keyframes fwLate { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--motif-a) 55%, transparent); } 70% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--motif-a) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--motif-a) 0%, transparent); } } @media (prefers-reduced-motion: reduce) { .fwin__tag .pt { animation: none; } } .fwin__body { padding: 20px; display: grid; gap: 14px; } .fwin__hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .fwin__hd .m { font: 500 11.5px/1 var(--font-mono); color: var(--color-text-muted); } .fwin__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 13px 18px; border-top: 1px solid var(--fw-linea); background: var(--buho-cream); } .fwin__foot .m { font: 500 12.5px/1.4 var(--font-sans); color: var(--color-text-muted); } .fwin__foot .d { display: inline-flex; align-items: center; gap: 7px; font: 700 12.5px/1 var(--font-sans); } .fwin__foot .d .ti { font-size: 16px; color: var(--motif-b-ink); } /* ── 75.2 · La vía del comprobante ─────────────────────── Sustituye a los dos `` del hero. Tres paradas y dos tramos: de donde sale, dónde se firma y a dónde llega. El punto que recorre el tramo es el propio comprobante viajando; se detiene con movimiento reducido. La etiqueta del tiempo es la primera fila de la rejilla y no una capa absoluta: así no puede tapar a nada, que es justo lo que fallaba antes. ------------------------------------------------------- */ .fpipe { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: start; row-gap: 16px; padding: 16px 14px; border-radius: 12px; background: var(--buho-cream); } .fpipe__t { grid-column: 1 / -1; justify-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--fw-linea, rgba(0, 17, 68, .08)); font: 700 11.5px/1 var(--font-mono); color: var(--motif-b-ink); white-space: nowrap; } .fpipe__t .ti { font-size: 13px; } .fpipe__step { min-width: 0; text-align: center; } .fpipe__ico { width: 42px; height: 42px; margin: 0 auto 9px; border-radius: 13px; display: grid; place-items: center; font-size: 19px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 17, 68, .07); color: var(--motif-a-ink, var(--buho-navy-950)); } .fpipe__step > .tx { display: block; min-width: 0; } .fpipe__step > .tx b { display: block; font: 700 12.5px/1.3 var(--font-sans); color: var(--color-text); } .fpipe__step > .tx span { display: block; margin-top: 3px; font: 500 11px/1.35 var(--font-mono); color: var(--color-text-muted); } .fpipe__step--firma .fpipe__ico { background: var(--motif-a-soft, var(--buho-pink-100)); color: var(--motif-a-ink, var(--buho-pink-700)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--motif-a) 26%, transparent); } /* El último paso iba relleno del acento. Va al navy de la casa; se sigue distinguiendo del paso de firma —también navy— porque aquel conserva su halo, que es anillo y no fondo. */ .fpipe__step--fin .fpipe__ico { background: var(--motif-b-soft, var(--buho-blue-100)); color: var(--motif-b-ink, var(--buho-blue-600)); box-shadow: none; } /* ── El tablero de ventas de la semana ─────────────────── Sustituye al tramo POS → firma → SUNAT: el flujo técnico ya se cuenta en el cuerpo de la página, y lo que el dueño de un negocio mira al abrir su facturador es cuánto vendió. Una sola serie —ventas por día—, así que un solo tono y sin leyenda: el título ya la nombra. El teal de marca a plena luz da 2,3:1 contra el blanco, por debajo del mínimo para una mancha de color, así que la barra usa el paso intermedio de la misma rampa, que pasa el 3:1 sin cambiar de tono. Las etiquetas de día van en todas las barras y la cifra solo en el pico: un número sobre cada barra es ruido. ------------------------------------------------------- */ .fdash { display: grid; gap: 11px; padding: 13px; border-radius: 12px; background: var(--buho-cream); --fd-barra: #00A08A; } .fdash__hd { display: flex; align-items: baseline; gap: 10px; } .fdash__hd b { font: 800 12.5px/1 var(--font-sans); letter-spacing: -.015em; color: var(--color-text); } .fdash__hd .per { margin-left: auto; font: 500 10px/1 var(--font-mono); color: var(--color-text-muted); white-space: nowrap; } .fdash__kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; } .fdash__kpi > span { display: grid; gap: 4px; padding: 9px 10px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--fw-linea, rgba(0, 17, 68, .08)); } .fdash__kpi b { font: 700 15px/1 var(--font-mono); letter-spacing: -.03em; color: var(--buho-navy-950); white-space: nowrap; } /* La subida lleva flecha además de color: el color solo no dice nada a quien no lo distingue. */ .fdash__kpi .sube { display: inline-flex; align-items: center; gap: 4px; color: var(--motif-a-ink, #00796B); } .fdash__kpi .sube .ti { font-size: 14px; } .fdash__kpi > span > span { font: 500 9.5px/1.25 var(--font-sans); color: var(--color-text-muted); } /* Abajo, dos mitades: la evolución a la izquierda y la proporción a la derecha. Son dos preguntas distintas —cuánto cada día, y cuánto de lo emitido ya está cobrado— así que van en dos gráficos y no en uno con dos escalas. */ .fdash__abajo { display: grid; grid-template-columns: 1.35fr 1fr; gap: 7px; } .fdash__graf, .fdash__aro { border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--fw-linea, rgba(0, 17, 68, .08)); } .fdash__graf { position: relative; padding: 24px 11px 9px; } /* La etiqueta directa, sobre el pico: quinta barra de siete. */ .fdash__pico { position: absolute; top: 7px; left: calc(11px + (100% - 22px) * .643); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; background: var(--motif-a-soft, #CFEFE9); color: var(--motif-a-ink, #00796B); font: 700 9px/1 var(--font-mono); white-space: nowrap; } /* Barras finas, base anclada a la línea y extremo de dato redondeado; 3 px de aire entre vecinas para que se separen sin necesidad de borde. */ .fdash__barras { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; align-items: end; height: 58px; border-bottom: 1px solid rgba(0, 17, 68, .10); } /* Finas y centradas en su columna: a todo el ancho dejan de leerse como barras y se ven como bloques de color. */ .fdash__barras i { display: block; justify-self: center; width: 58%; max-width: 28px; border-radius: 4px 4px 0 0; background: var(--fd-barra); } .fdash__barras i.b54 { height: 54%; } .fdash__barras i.b64 { height: 64%; } .fdash__barras i.b50 { height: 50%; } .fdash__barras i.b77 { height: 77%; } .fdash__barras i.b100 { height: 100%; } .fdash__barras i.b93 { height: 93%; } .fdash__barras i.b66 { height: 66%; } .fdash__dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: 6px; text-align: center; } /* El aro de cobranza. Misma técnica que la dona de §67: `conic-gradient` con un círculo blanco encima, porque un `` inline ignora ancho y alto y no se dibujaría. */ .fdash__aro { display: flex; align-items: center; gap: 11px; padding: 11px; } .fdash__dona { display: block; position: relative; flex: none; width: 62px; height: 62px; border-radius: 50%; background: conic-gradient(var(--fd-barra) 0 var(--p, 62%), #E8EBF2 0); } .fdash__dona::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fff; } .fdash__dona b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 13px/1 var(--font-mono); letter-spacing: -.03em; color: var(--buho-navy-950, #001144); } .fdash__dona.p62 { --p: 62%; } .fdash__meta { display: grid; gap: 4px; min-width: 0; } .fdash__meta .lb { font: 500 9.5px/1.2 var(--font-sans); color: var(--color-text-muted); white-space: nowrap; } .fdash__meta b { font: 700 14px/1 var(--font-mono); letter-spacing: -.03em; color: var(--buho-navy-950, #001144); white-space: nowrap; } .fdash__meta .falta { font: 600 9px/1 var(--font-mono); color: var(--color-text-muted); white-space: nowrap; } .fdash__dias em { font-style: normal; font: 600 8.5px/1 var(--font-mono); color: var(--color-text-muted); } @media (max-width: 520px) { .fdash__kpi { grid-template-columns: 1fr 1fr; } .fdash__kpi > span:last-child { grid-column: 1 / -1; } /* En una columna estrecha, dos gráficos de lado se comen el uno al otro: pasan a apilarse. */ .fdash__abajo { grid-template-columns: 1fr; } } /* El tramo. 20 px de margen superior lo dejan a la altura del centro del icono (42 / 2 − 1 del propio grosor). */ .fpipe__via { position: relative; align-self: start; min-width: 22px; height: 2px; margin: 20px 8px 0; background-image: linear-gradient(90deg, rgba(0, 17, 68, .24) 45%, transparent 0); background-size: 9px 2px; background-repeat: repeat-x; } .fpipe__via::after { content: ""; position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--motif-a); animation: fpipeVa 2.8s var(--ease-in-out, ease-in-out) infinite; } .fpipe__via--b::after { animation-delay: .4s; } @keyframes fpipeVa { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } } @keyframes fpipeVaY { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 8px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .fpipe__via::after { animation: none; opacity: .85; } } /* El apilado de emergencia: por debajo de 600 px tres columnas no caben sin volver a encoger la letra, que es justo lo que se venía a arreglar. La vía se pone de pie. */ @media (max-width: 600px) { .fpipe { grid-template-columns: 1fr; row-gap: 0; padding: 16px; } .fpipe .fpipe__t { margin-bottom: 14px; } .fpipe .fpipe__step { display: flex; align-items: center; gap: 13px; text-align: left; padding: 11px 13px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--fw-linea, rgba(0, 17, 68, .08)); } .fpipe .fpipe__ico { margin: 0; flex: none; width: 36px; height: 36px; font-size: 17px; } .fpipe .fpipe__step > .tx { flex: 1; } .fpipe .fpipe__via { width: 2px; height: 18px; min-width: 0; margin: 0 0 0 30px; background-image: linear-gradient(180deg, rgba(0, 17, 68, .24) 45%, transparent 0); background-size: 2px 9px; background-repeat: repeat-y; } .fpipe .fpipe__via::after { top: 0; left: -3px; animation-name: fpipeVaY; } } /* La vía en vertical de nacimiento: `validacion-ose-pse`, donde son cuatro paradas y cada una lleva su tiempo. Va DESPUÉS del @media a propósito. `.fpipe--v .fpipe__step` y `.fpipe .fpipe__step` pesan lo mismo (0,2,0), así que decide el orden: con el @media al final, el fondo blanco del apilado le ganaba al navy de la última parada y su texto —que sigue siendo blanco— desaparecía en el teléfono. */ /* La vía en vertical: siempre en `validacion-ose-pse`, donde son cuatro paradas con su tiempo, y en cualquier pantalla por debajo de 600 px, donde tres columnas no caben sin volver a encoger la letra. */ .fpipe--v, .fpipe--v.fpipe { grid-template-columns: 1fr; row-gap: 0; padding: 16px; } .fpipe--v .fpipe__t { margin-bottom: 14px; } .fpipe--v .fpipe__step { display: flex; align-items: center; gap: 13px; text-align: left; padding: 11px 13px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--fw-linea, rgba(0, 17, 68, .08)); } .fpipe--v .fpipe__ico { margin: 0; flex: none; width: 36px; height: 36px; font-size: 17px; } .fpipe--v .fpipe__step > .tx { flex: 1; } .fpipe--v .fpipe__ms { flex: none; font: 700 11px/1 var(--font-mono); color: var(--color-text-muted); } .fpipe--v .fpipe__step--fin { background: var(--buho-navy-950); box-shadow: none; } .fpipe--v .fpipe__step--fin > .tx b { color: #fff; } .fpipe--v .fpipe__step--fin > .tx span, .fpipe--v .fpipe__step--fin .fpipe__ms { color: rgba(255, 255, 255, .62); } .fpipe--v .fpipe__via { width: 2px; height: 18px; min-width: 0; margin: 0 0 0 30px; background-image: linear-gradient(180deg, rgba(0, 17, 68, .24) 45%, transparent 0); background-size: 2px 9px; background-repeat: repeat-y; } .fpipe--v .fpipe__via::after { top: 0; left: -3px; animation-name: fpipeVaY; } /* ── 75.2b · El bloque de resumen ──────────────────────── El mismo tinte crema de la vía, sin la rejilla: agrupa los subtotales del POS y las listas de últimos comprobantes. Se separó de `.fpipe` para no tener que apagarle la rejilla con un `display:block` en línea en cada página. ------------------------------------------------------- */ .fbox { padding: 14px 16px; border-radius: 12px; background: var(--buho-cream); } .fbox .ftot + .ftot { margin-top: 7px; } /* ── 75.3 · Las filas ──────────────────────────────────── Un comprobante, una empresa o un documento se cuentan igual: marca a la izquierda, nombre y referencia en el centro, importe y estado a la derecha. El estado va pegado al importe y no al borde, para que el margen derecho quede libre y nada de lo que flota tape un dato. ------------------------------------------------------- */ .frow { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--fw-linea); } .frow:first-child { border-top: 0; padding-top: 0; } /* Las tres variantes iban en tinte de acento, tinte de complemento y navy. Los dos tintes pasan a neutro —el mismo navy rebajado a 5 % y a 11 % sobre blanco—, que las mantiene distinguibles entre sí y del cuadro navy lleno, sin meter color de marca en un fondo. */ .frow__ic { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; font-size: 16px; background: color-mix(in srgb, var(--buho-navy-950) 5%, #fff); color: var(--buho-navy-950); } .frow__ic--navy { background: var(--buho-navy-950); color: #fff; } .frow__ic--amb { background: color-mix(in srgb, var(--buho-navy-950) 11%, #fff); color: var(--buho-navy-950); } .frow__ic--ini { font: 800 12px/1 var(--font-sans); } /* Las iniciales son texto, no un gráfico, así que les toca 4,5:1. Sobre los dos tintes suaves las tintas de marca se quedaban en 4,27 (ámbar) y 4,35 (teal); el navy de la casa da 9,4 y 8,6 y no cambia en nada la lectura de la fila. El cuadro navy conserva su blanco: por eso el :not(), que además le gana en especificidad. */ .frow__ic--ini:not(.frow__ic--navy) { color: var(--buho-navy-950); } .frow__tx { flex: 1; min-width: 0; } .frow__tx b { display: block; font: 700 13.5px/1.3 var(--font-sans); color: var(--color-text); } .frow__tx span { display: block; margin-top: 2px; font: 500 11.5px/1.3 var(--font-mono); color: var(--color-text-muted); } .frow__val { flex: none; display: grid; gap: 5px; justify-items: end; text-align: right; } .frow__val b { font: 700 13px/1 var(--font-mono); color: var(--color-text); } .fchip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; white-space: nowrap; font: 700 10px/1 var(--font-sans); letter-spacing: .05em; text-transform: uppercase; } .fchip .ti { font-size: 11px; } .fchip--ok { background: var(--color-success-bg); color: #08794B; } .fchip--cola { background: var(--color-warning-bg); color: var(--motif-b-ink); } /* ── 75.4 · El total ─────────────────────────────────────*/ .ftot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .ftot .lb { font: 600 13px/1.35 var(--font-sans); color: var(--color-text-muted); } /* ── 75.5 · La caja del POS ────────────────────────────── Sólo `empresa.html`: los cuatro medios de pago y el botón de cobrar. El seleccionado se marca con el aro navy, que es como lo marca el propio sistema. ------------------------------------------------------- */ .fpay { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; } .fpay span { border-radius: 11px; padding: 10px 4px; text-align: center; font: 600 11.5px/1.3 var(--font-sans); color: var(--color-text-muted); box-shadow: inset 0 0 0 1px var(--fw-linea); } .fpay span .ti { display: block; font-size: 17px; margin-bottom: 5px; } .fpay span.on { color: var(--color-text); font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--buho-navy-950); } .fcta { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 15px; border-radius: 999px; background: var(--buho-navy-950); font: 700 15px/1 var(--font-sans); } .fcta .ti { font-size: 19px; } /* ── 75.5b · Las barras, con el par de la marca ────────── `.lbars` nace con el rosa y el azul de la casa (§47). En una página cuyo acento es el teal, la barra activa cantaba. El modificador la pasa al par de la marca —teal + ámbar— sin tocar la clase base: las barras de `nube/` siguen como están. ------------------------------------------------------- */ .lbars--marca .fl { background: var(--motif-a-ink); opacity: .38; } .lbars--marca .fl--ac { opacity: 1; background: linear-gradient(90deg, var(--motif-a), var(--motif-b)); } /* ── 75.6 · El reparto del lienzo ──────────────────────── Las piezas que flotan cuelgan de `.phero__vis`, que es el lienzo del hero, y no de la ventana: la ventana crece con la columna y las piezas no la seguían, que es lo que producía los once solapes de la auditoría. La regla es que **ninguna pieza se mete en el cuerpo de la ventana**: las cuatro se apoyan en su borde, arriba y abajo, y muerden nueve píxeles —los del relleno de la barra y del pie, donde no hay una sola letra—. Nueve bastan para que se lean apoyadas y no flotando en un pasillo aparte, y sobran para no rozar ni los tres puntos de la barra (a 13 px del borde) ni el texto del pie (a 14). Las cuentas, para cuando haya que mover algo: banda de arriba top = relleno − alto + 9 banda de abajo bottom = 9 + relleno − alto con relleno 30, alto 37 la píldora y 68,6 la tarjeta. ------------------------------------------------------- */ .fflo { position: absolute; z-index: 3; } .fflo--tl { left: -28px; top: 1px; } .fflo--tr { right: -24px; top: 1px; } .fflo--bl { left: -28px; bottom: 2px; } .fflo--br { right: -18px; bottom: -30px; } /* Entre 980 y 1180 la columna se estrecha y los costados ya no tienen margen fuera: las piezas se recogen al borde. */ @media (max-width: 1180px) { .fflo--tl, .fflo--bl { left: -10px; } .fflo--tr, .fflo--br { right: -8px; } } /* El aire de las dos bandas —sólo lo que las piezas necesitan para apoyarse— y el tirón hacia arriba: el lienzo va centrado en su fila, así que recortar el relleno no sube la ventana, sólo encoge la caja. Los 18 px los sube el `top`. */ @media (min-width: 981px) { .phero__vis:has(.fflo) { padding: 30px 0; top: -18px; } } /* ========================================================= 76 · PRO 9 · las treinta pantallas de `caracteristicas.html` --------------------------------------------------------- La página de novedades de Pro 9 enseñaba treinta capturas de pantalla en ``: tres de la App 4.0 y veintisiete del facturador de escritorio, la tienda, Mozo y VendeYa. Una captura pesa, no se adapta al ancho, no se lee en un teléfono y envejece con la primera actualización del producto. Aquí se reconstruyen en código, con el criterio de §75: **no se escalan**. La caja fluye con la columna y la letra se queda en su tamaño: la más pequeña es de 10,5 px. Dos muebles, según de dónde salió la captura: .p9tel la captura era de un celular → marco de teléfono, con isla y barra de estado. .p9win la captura era de escritorio → ventana del navegador con **una pestaña** activa, que es donde vive una app web. Hermana de `.fwin` (§75.1): misma barra navy y mismos puntos, pero la dirección va dentro de la pestaña. Debajo de los dos muebles, un vocabulario corto de piezas de interfaz (`.p9-*`): campos, botones, interruptores, pestañas, tablas, filas, fichas de producto y gráficos hechos sólo con CSS. Todas heredan el tamaño de letra del mueble y ninguna trae color hexadecimal propio: salen de los tokens, con dos excepciones declaradas más abajo. La maqueta va `aria-hidden` y al lado lleva la frase `.sr-only` que describe lo que se ve: el `alt` de la captura que sustituye. Nada de aquí es un ``. ========================================================= */ .p9win, .p9tel { --p9-linea: rgba(0, 17, 68, .09); --p9-page: var(--buho-cream); /* Los dos colores que no son de la casa: el morado de la tienda de ejemplo (es el color que el cliente eligió en el panel, y la captura de apariencia lo enseña como dato) y el naranja de VendeYa, que es su marca. */ --p9-morado: #7700E6; --p9-naranja: #F5871F; font-family: var(--font-sans); font-size: 12px; line-height: 1.35; color: var(--color-text); text-align: left; } .p9win *, .p9tel * { box-sizing: border-box; min-width: 0; } .p9win .ti, .p9tel .ti { line-height: 1; } /* ── 76.1 · La ventana con pestaña ───────────────────────*/ .p9win { position: relative; z-index: 1; background: var(--p9-page); border: 1px solid rgba(0, 17, 68, .06); border-radius: 14px; overflow: hidden; box-shadow: 0 18px 44px rgba(0, 17, 68, .10), 0 4px 12px rgba(0, 17, 68, .05); } .p9win--blanco { --p9-page: #fff; } .p9win__bar { display: flex; align-items: flex-end; gap: 10px; min-height: 40px; padding: 8px 12px 0; background: var(--buho-navy-950); } .p9win__dots { display: inline-flex; gap: 5px; flex: none; padding-bottom: 12px; } .p9win__dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .22); } .p9win__tab { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 80%; padding: 8px 14px 9px; border-radius: 9px 9px 0 0; background: var(--p9-page); font: 500 11px/1 var(--font-mono); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .p9win__tab b { font-weight: 700; color: var(--buho-navy-950); } .p9win__tab .ti { font-size: 12px; color: var(--motif-a-ink); flex: none; } .p9win__tag { margin-left: auto; flex: none; padding-bottom: 12px; font: 700 10.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--motif-a-light); white-space: nowrap; } .p9win__body { padding: 14px; background: var(--p9-page); container-type: inline-size; } .p9win__body--0 { padding: 0; } /* ── 76.2 · El teléfono ────────────────────────────────── Marco navy, pantalla con isla y barra de estado. La pantalla lleva la proporción de un teléfono (9:19,2) y recorta lo que no cabe: la barra de abajo se pega al pie con `margin-top:auto`, como en la app real. ------------------------------------------------------- */ .p9tel { container-type: inline-size; position: relative; width: 100%; max-width: 292px; margin: 0 auto; padding: 9px; border-radius: 44px; background: var(--buho-navy-950); box-shadow: 0 24px 50px rgba(0, 17, 68, .22), inset 0 0 0 1.5px rgba(255, 255, 255, .08); } .p9tel__scr { position: relative; display: flex; flex-direction: column; border-radius: 36px; overflow: hidden; background: var(--p9-page); aspect-ratio: 9 / 19.2; font-size: 11.5px; } .p9tel__isla { position: absolute; top: 10px; left: 50%; z-index: 5; width: 34%; height: 22px; margin-left: -17%; border-radius: 999px; background: var(--buho-navy-950); } .p9tel__isla::after { content: ""; position: absolute; right: 22%; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--color-success); } .p9tel__st { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px 0; font: 700 11px/1 var(--font-sans); color: var(--buho-navy-950); } .p9tel__st span { display: inline-flex; gap: 4px; } .p9tel__st .ti { font-size: 12px; } .p9tel__in { flex: 1; min-height: 0; padding: 12px 12px 0; display: flex; flex-direction: column; gap: 10px; } .p9tel__in--0 { padding: 0; gap: 0; } .p9tel__foot { margin-top: auto; padding: 10px 12px 6px; background: #fff; border-top: 1px solid var(--p9-linea); } .p9tel__home { height: 4px; width: 36%; margin: 8px auto 0; border-radius: 2px; background: rgba(0, 17, 68, .22); } /* ── 76.3 · Texto ────────────────────────────────────────*/ .p9-t { font: 800 15px/1.2 var(--font-sans); letter-spacing: -.02em; color: var(--buho-navy-950); } .p9-t--sm { font-size: 13px; } .p9-t--lg { font-size: 18px; } .p9-eb { font: 700 10.5px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); } .p9-mut { color: var(--color-text-muted); } .p9-sub { color: var(--color-text-subtle); } .p9-xs { font-size: 10.5px; } .p9-mono { font-family: var(--font-mono); } .p9-b { font-weight: 700; } .p9-ok { color: var(--color-success-ink); } .p9-warn { color: var(--color-warning); } .p9-err { color: var(--color-danger); } .p9-azul { color: var(--buho-blue-600); } .p9-morado { color: var(--p9-morado); } .p9-lnk { color: var(--buho-blue-600); text-decoration: underline; text-underline-offset: 2px; } .p9-p { margin: 0; font-size: 11.5px; line-height: 1.5; } .p9-ol { margin: 0; padding-left: 18px; font-size: 11px; line-height: 1.5; display: grid; gap: 4px; } .p9-ol b { font-weight: 700; } .p9-code { padding: 1px 5px; border-radius: 4px; background: var(--buho-pink-100); font: 600 10.5px/1.2 var(--font-mono); color: var(--buho-pink-700); } /* ── 76.4 · Campos y botones ─────────────────────────────*/ .p9-lb { display: block; margin-bottom: 4px; font: 600 10.5px/1.2 var(--font-sans); color: var(--color-text-muted); } .p9-lb .req { color: var(--color-danger); } .p9-lb .ti { font-size: 11px; vertical-align: -1px; } .p9-in { display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border-radius: 8px; background: var(--buho-cream); box-shadow: inset 0 0 0 1px var(--p9-linea); font: 500 11.5px/1 var(--font-sans); color: var(--buho-navy-950); white-space: nowrap; } .p9-in > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .p9-in--ph { color: var(--color-text-subtle); } .p9-in--blanco { background: #fff; } .p9-in--azul { background: var(--buho-blue-50); box-shadow: inset 0 0 0 1px var(--buho-blue-200); } .p9-in--foco { box-shadow: inset 0 0 0 1.5px var(--buho-blue-600); } .p9-in--sel::after { content: ""; margin-left: auto; flex: none; width: 6px; height: 6px; border-right: 1.5px solid var(--color-text-subtle); border-bottom: 1.5px solid var(--color-text-subtle); transform: rotate(45deg) translateY(-2px); } .p9-in .ti { font-size: 13px; color: var(--color-text-subtle); flex: none; } .p9-in .ml { margin-left: auto; } .p9-in .suf { margin-left: auto; font: 500 10.5px/1 var(--font-mono); color: var(--color-text-subtle); } .p9-f { display: grid; gap: 10px; } .p9-f--2 { grid-template-columns: 1fr 1fr; } .p9-f--3 { grid-template-columns: repeat(3, 1fr); } .p9-f--auto { grid-template-columns: auto 1fr; } .p9-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 0 13px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--p9-linea); font: 700 11.5px/1 var(--font-sans); color: var(--buho-navy-950); white-space: nowrap; } .p9-btn .ti { font-size: 13px; } .p9-btn--navy { background: var(--buho-navy-950); color: #fff; box-shadow: none; } .p9-btn--azul { background: var(--buho-blue-600); color: #fff; box-shadow: none; } .p9-btn--verde { background: var(--color-success-ink); color: #fff; box-shadow: none; } .p9-btn--verde-l { color: var(--color-success-ink); box-shadow: inset 0 0 0 1px var(--color-success-border); } .p9-btn--naranja { background: var(--p9-naranja); color: #fff; box-shadow: none; } .p9-btn--morado { background: var(--p9-morado); color: #fff; box-shadow: none; } .p9-btn--rojo-l { color: var(--color-danger); box-shadow: inset 0 0 0 1px var(--color-danger-border); } .p9-btn--soft { background: var(--buho-blue-100); box-shadow: none; } .p9-btn--gris { background: var(--gray-150); box-shadow: none; } .p9-btn--full { display: flex; width: 100%; } .p9-btn--lg { min-height: 40px; font-size: 13px; border-radius: 12px; } .p9-btn--pill { border-radius: 999px; } .p9-btn--sq { padding: 0; width: 30px; } .p9-btn--sm { min-height: 26px; padding: 0 9px; font-size: 10.5px; } .p9-btn--up { letter-spacing: .1em; text-transform: uppercase; } .p9-btn--gris .ti { color: var(--color-text-muted); } .p9-btn--sq .ti.rojo { color: var(--color-danger); } .p9-tg { display: inline-block; flex: none; position: relative; vertical-align: middle; width: 30px; height: 17px; border-radius: 999px; background: var(--gray-300); } .p9-tg::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 17, 68, .25); } .p9-tg.on { background: var(--buho-navy-950); } .p9-tg.on::after { left: 15px; } .p9-tg--azul.on { background: var(--buho-blue-600); } .p9-tgr { display: flex; align-items: flex-start; gap: 8px; font: 500 11.5px/1.3 var(--font-sans); } .p9-tgr small { display: block; margin-top: 2px; font-size: 10.5px; line-height: 1.35; color: var(--color-text-muted); } .p9-tgr .ti { font-size: 11px; color: var(--color-text-subtle); vertical-align: -1px; } .p9-tgr--c { align-items: center; } .p9-chk { display: inline-grid; place-items: center; flex: none; width: 15px; height: 15px; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--gray-300); font-size: 10.5px; color: #fff; } .p9-chk.on { background: var(--buho-blue-600); box-shadow: none; } .p9-chk--navy.on { background: var(--buho-navy-950); } .p9-chk .ti { font-size: 10.5px; } /* Cuando lo que se elige es excluyente —un método de pago— la casilla es redonda: cuadrada dice «puedes marcar varias». */ .p9-chk--rd { border-radius: 50%; } /* ── 76.5 · Pastillas, pestañas y navegación lateral ─────*/ .p9-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; background: var(--gray-150); font: 700 10.5px/1 var(--font-sans); color: var(--buho-navy-950); white-space: nowrap; } .p9-chip .ti { font-size: 11px; } .p9-chip--navy { background: var(--buho-navy-950); color: #fff; } .p9-chip--verde { background: var(--color-success-bg); color: var(--color-success-ink); } .p9-chip--ambar { background: var(--color-warning-bg); color: var(--motif-b-ink); } .p9-chip--rojo { background: var(--color-danger-bg); color: var(--color-danger); } .p9-chip--azul { background: var(--buho-blue-100); color: var(--buho-blue-700); } .p9-chip--linea { background: #fff; box-shadow: inset 0 0 0 1px var(--p9-linea); color: var(--color-text-muted); } .p9-chip--sq { border-radius: 6px; } .p9-chip--mono { font-family: var(--font-mono); } .p9-chip--pt::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .p9-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--gray-150); overflow: hidden; } .p9-tabs span { padding: 6px 10px; border-radius: 8px; font: 600 11px/1 var(--font-sans); color: var(--color-text-muted); white-space: nowrap; } .p9-tabs .on { background: #fff; color: var(--buho-navy-950); box-shadow: 0 1px 3px rgba(0, 17, 68, .12); } .p9-tabs--blanco { background: #fff; box-shadow: 0 1px 3px rgba(0, 17, 68, .08); } .p9-tabs--blanco .on { background: var(--gray-150); box-shadow: none; } .p9-tabs--lin { background: none; padding: 0; gap: 14px; border-bottom: 1px solid var(--p9-linea); border-radius: 0; } .p9-tabs--lin span { padding: 6px 2px 8px; border-radius: 0; } .p9-tabs--lin .on { background: none; box-shadow: inset 0 -2px 0 var(--buho-navy-950); } .p9-chips { display: flex; gap: 6px; flex-wrap: wrap; } .p9-chips--nw { flex-wrap: nowrap; overflow: hidden; } .p9-side { display: grid; gap: 2px; padding: 6px; border-radius: 10px; background: var(--gray-150); align-content: start; } .p9-side span { padding: 7px 10px; border-radius: 7px; font: 600 11px/1 var(--font-sans); color: var(--color-text-muted); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .p9-side .on { background: #fff; color: var(--buho-navy-950); box-shadow: 0 1px 3px rgba(0, 17, 68, .10); } .p9-adm { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 12px; align-items: start; } /* El menú lateral del facturador: icono, nombre y submenú. */ .p9-menu { display: grid; gap: 2px; } .p9-menu > span { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 7px; font: 500 12px/1 var(--font-sans); } .p9-menu > span .ti { font-size: 15px; color: var(--buho-navy-950); } .p9-menu > span .ti.chev { margin-left: auto; font-size: 13px; color: var(--color-text-subtle); } .p9-menu > span.on { background: var(--gray-150); } .p9-menu > span.hd { padding: 8px 10px; border-radius: 8px; background: var(--buho-blue-50); box-shadow: inset 0 0 0 1.5px var(--buho-blue-200); font-weight: 600; letter-spacing: .04em; } .p9-menu__sub { display: grid; gap: 1px; margin: 2px 0 4px 12px; padding-left: 10px; border-left: 1px solid var(--p9-linea); } .p9-menu__sub span { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 7px; font: 500 11.5px/1 var(--font-sans); } .p9-menu__sub span.on { background: var(--gray-150); } .p9-menu__sub span .ti { margin-left: auto; font-size: 12px; color: var(--color-text-subtle); } .p9-menu__sub .p9-chip { margin-left: auto; } .p9-menu--pad { padding: 14px 12px; } /* ── 76.6 · Tarjetas, filas y tablas ─────────────────────*/ .p9-card { background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px var(--p9-linea); padding: 12px; } .p9-card--sm { padding: 9px 10px; border-radius: 10px; } .p9-card--dash { box-shadow: none; border: 1px dashed var(--gray-300); } .p9-card--crema { background: var(--buho-cream); } .p9-card--rosa { background: var(--buho-pink-100); box-shadow: none; } .p9-card--azul { background: var(--buho-blue-50); box-shadow: inset 0 0 0 1.5px var(--buho-blue-600); } .p9-card--navy { background: var(--buho-navy-950); box-shadow: none; color: #fff; } .p9-cardh { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .p9-cardh b { font: 700 12px/1.2 var(--font-sans); } .p9-cardh .ti { font-size: 14px; } .p9-cardh .pt::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--buho-navy-950); vertical-align: 1px; } .p9-cardh small { display: block; margin-top: 2px; font: 500 10.5px/1.3 var(--font-sans); color: var(--color-text-muted); } .p9-box { padding: 10px 12px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--p9-linea); } .p9-box--crema { background: var(--buho-cream); } .p9-hr { height: 1px; background: var(--p9-linea); } .p9-hd { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 10px; background: var(--gray-150); font: 700 15px/1.2 var(--font-sans); letter-spacing: -.02em; } .p9-ic { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--buho-blue-100); color: var(--buho-blue-700); font-size: 15px; } .p9-ic--verde { background: var(--color-success-bg); color: var(--color-success-ink); } .p9-ic--ambar { background: var(--color-warning-bg); color: var(--motif-b-ink); } .p9-ic--rojo { background: var(--color-danger-bg); color: var(--color-danger); } .p9-ic--rosa { background: var(--buho-pink-100); color: var(--buho-pink-700); } .p9-ic--gris { background: var(--gray-150); color: var(--buho-navy-950); } .p9-ic--navy { background: var(--buho-navy-950); color: #fff; } .p9-ic--lav { background: var(--buho-lavender-100); color: #5733E0; } .p9-ic--sm { width: 24px; height: 24px; font-size: 13px; border-radius: 7px; } .p9-ic--lg { width: 40px; height: 40px; font-size: 19px; border-radius: 12px; } .p9-ic--rd { border-radius: 50%; } .p9-row { display: flex; align-items: center; gap: 10px; } .p9-row .tx { flex: 1; min-width: 0; } .p9-row .tx b { display: block; font: 700 11.5px/1.25 var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .p9-row .tx span { display: block; margin-top: 2px; font: 500 10.5px/1.25 var(--font-sans); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .p9-row .tx .mono { font-family: var(--font-mono); } .p9-row .tx .wrap { white-space: normal; } .p9-row .r { flex: none; text-align: right; font: 700 11.5px/1 var(--font-mono); } .p9-row .r small { display: block; margin-top: 3px; font: 500 10.5px/1 var(--font-sans); color: var(--color-text-muted); } .p9-row .chev { flex: none; font-size: 13px; color: var(--color-text-subtle); } .p9-row--top { align-items: flex-start; } .p9-rows { display: grid; gap: 6px; } .p9-rows--lin > * { padding: 8px 0; border-bottom: 1px solid var(--p9-linea); } .p9-rows--lin > :first-child { padding-top: 0; } .p9-rows--lin > :last-child { border-bottom: 0; padding-bottom: 0; } .p9-num { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--buho-navy-950); color: #fff; font: 800 10.5px/1 var(--font-sans); } .p9-num--gris { background: var(--gray-150); color: var(--buho-navy-950); } .p9-steps { display: flex; align-items: center; gap: 8px; font: 500 11px/1 var(--font-sans); } .p9-steps i.ln { flex: 1; height: 1px; background: var(--p9-linea); } .p9-opt { display: grid; place-items: center; min-height: 32px; padding: 5px 6px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px var(--p9-linea); font: 600 11px/1.2 var(--font-sans); color: var(--color-text-muted); text-align: center; } .p9-opt.on { background: var(--buho-blue-100); box-shadow: inset 0 0 0 1.5px var(--buho-navy-950); color: var(--buho-navy-950); } .p9-tbl { width: 100%; border-collapse: collapse; font: 500 11px/1.3 var(--font-sans); } .p9-tbl th { padding: 6px 8px; text-align: left; font: 700 10.5px/1 var(--font-sans); letter-spacing: .04em; color: var(--color-text-muted); border-bottom: 1px solid var(--p9-linea); white-space: nowrap; } .p9-tbl td { padding: 7px 8px; border-bottom: 1px solid var(--p9-linea); vertical-align: middle; white-space: nowrap; } .p9-tbl tr:last-child td { border-bottom: 0; } .p9-tbl .r { text-align: right; } .p9-tbl .c { text-align: center; } .p9-tbl .mono { font-family: var(--font-mono); font-size: 10.5px; } .p9-tbl .tr { color: var(--color-danger); font-size: 12px; } .p9-tbl .ac { display: inline-flex; gap: 6px; } .p9-tbl .ac .ti { font-size: 12px; color: var(--color-text-muted); } .p9-tbl--x { display: block; overflow-x: auto; } .p9-tbl--x table { width: 100%; border-collapse: collapse; } .p9-tbl--cab { margin: 0 -14px; width: calc(100% + 28px); } .p9-tbl--cab th:first-child, .p9-tbl--cab td:first-child { padding-left: 14px; } .p9-tbl--cab th:last-child, .p9-tbl--cab td:last-child { padding-right: 14px; } /* ── 76.7 · Rejillas y utilidades ────────────────────────*/ .p9-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .p9-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .p9-g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .p9-g2--10 { gap: 10px; } .p9-stack { display: grid; gap: 10px; } .p9-stack--6 { gap: 6px; } .p9-stack--14 { gap: 14px; } .p9-flex { display: flex; align-items: center; gap: 8px; } .p9-flex--top { align-items: flex-start; } .p9-sb { justify-content: space-between; } .p9-wrap { flex-wrap: wrap; } .p9-ml { margin-left: auto; } .p9-ctr { text-align: center; } .p9-right { text-align: right; } .p9-nw { white-space: nowrap; } .p9-ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .p9-mt4 { margin-top: 4px; } .p9-mt8 { margin-top: 8px; } .p9-mt12 { margin-top: 12px; } .p9-tot { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 700 12px/1 var(--font-sans); } .p9-tot b { font: 700 16px/1 var(--font-mono); } .p9-tot .lb { font: 600 10.5px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); } .p9-bar { height: 8px; border-radius: 999px; background: var(--gray-200); overflow: hidden; } .p9-bar i { display: block; height: 100%; width: var(--w, 50%); border-radius: 999px; background: var(--motif-a-ink); } .p9-bar--lima i { background: var(--motif-b); } .p9-bar--lg { height: 14px; } .p9-bar--lg i { display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; font: 700 10.5px/1 var(--font-mono); color: var(--buho-navy-950); } .p9-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; } .p9-split--l { border-left: 1px solid var(--p9-linea); padding-left: 14px; } /* El checkout del paso 2 de /servicios/tienda-virtual respira más que los demás `.p9win`: es la pieza que se mira en grande dentro del relato, y con el interlineado de fábrica se veía todo pegado. Va con modificador propio porque `.p9-card--sm` y `.p9-stack--6` los comparten cuatro páginas y 68 usos: soltarlos ahí movería maquetas que están bien. */ .p9win--aire .p9win__body { padding: 24px; } .p9win--aire .p9-split { gap: 26px; } .p9win--aire .p9-split--l { padding-left: 26px; } .p9win--aire .p9-stack--6 { gap: 14px; } .p9win--aire .p9-card--sm { padding: 17px 15px; } .p9win--aire .p9-box { padding: 14px 15px; } /* ── 76.8 · Punto de venta: fichas y carrito ─────────────*/ .p9-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; } .p9-tiles--2 { grid-template-columns: 1fr 1fr; } .p9-tile { background: #fff; border-radius: 10px; box-shadow: 0 0 0 1px var(--p9-linea); overflow: hidden; } .p9-tile__im { position: relative; height: 52px; display: grid; place-items: center; font-size: 22px; color: rgba(0, 17, 68, .38); background: linear-gradient(140deg, var(--buho-blue-100), var(--buho-lavender-300)); } .p9-tile__im--a { background: linear-gradient(140deg, var(--color-warning-bg), var(--buho-pink-100)); } .p9-tile__im--b { background: linear-gradient(140deg, var(--color-success-bg), var(--buho-blue-100)); } .p9-tile__im--c { background: linear-gradient(140deg, var(--buho-pink-100), var(--buho-lavender-100)); } .p9-tile__im--d { background: linear-gradient(140deg, var(--buho-lavender-100), var(--color-warning-bg)); } .p9-tile__pr { position: absolute; left: 5px; bottom: 5px; padding: 3px 6px; border-radius: 5px; background: var(--color-success-ink); color: #fff; font: 700 10.5px/1 var(--font-mono); } .p9-tile__nm { padding: 6px 7px; font: 600 10.5px/1.25 var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .p9-tile__ft { display: flex; justify-content: space-between; padding: 0 7px 6px; font: 700 10.5px/1 var(--font-mono); } .p9-tile__ft b { color: var(--p9-naranja); } .p9-pos { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 10px; align-items: start; } .p9-cart { background: #fff; border-radius: 10px; box-shadow: 0 0 0 1px var(--p9-linea); padding: 8px 10px; } .p9-cart__hd { font: 500 10.5px/1 var(--font-sans); color: var(--color-text-muted); padding-bottom: 6px; } .p9-cart__it { padding: 6px 0; border-bottom: 1px solid var(--p9-linea); font: 600 10.5px/1.25 var(--font-sans); } .p9-cart__it .nt { font: 500 10.5px/1 var(--font-sans); color: var(--color-success-ink); margin-left: 4px; } .p9-cart__it .tr { float: right; font-size: 11px; color: var(--color-danger); } .p9-cart__it small { display: flex; align-items: center; gap: 5px; margin-top: 4px; font: 500 10.5px/1 var(--font-mono); color: var(--color-text-muted); } .p9-cart__it small b { margin-left: auto; color: var(--buho-navy-950); } .p9-cart__it small .ti { font-size: 10.5px; } .p9-cart__it small .mn { color: var(--color-danger); } .p9-cart__it small .pl { color: var(--color-success-ink); } .p9-cart__tot { padding: 10px 0 8px; } .p9-step { display: inline-flex; align-items: center; gap: 9px; flex: none; padding: 5px 9px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--p9-linea); font: 700 11px/1 var(--font-sans); } .p9-step .ti { font-size: 11px; } .p9-av { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 13px; color: rgba(0, 17, 68, .4); box-shadow: inset 0 0 0 2px var(--color-warning-bg); background: var(--buho-cream); } .p9-av--foto { background: linear-gradient(140deg, var(--buho-blue-100), var(--buho-pink-100)); box-shadow: inset 0 0 0 2px var(--buho-pink-200); } /* La cámara del escáner: el visor oscuro, la etiqueta con el código de barras (un degradado repetido, no una imagen) y la instrucción. */ .p9-cam { position: relative; display: grid; place-items: center; gap: 8px; padding: 18px 14px 14px; background: linear-gradient(180deg, var(--gray-700), var(--gray-900)); } .p9-cam__tag { width: 78%; padding: 8px 10px 9px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 2.5px rgba(255, 255, 255, .85), 0 10px 24px rgba(0, 0, 0, .35); } .p9-cam__tag small { display: block; font: 600 10.5px/1.3 var(--font-mono); color: var(--gray-700); text-align: center; } .p9-bc { height: 30px; margin: 5px 6px; background: repeating-linear-gradient(90deg, var(--buho-navy-950) 0 2px, transparent 2px 4px, var(--buho-navy-950) 4px 5px, transparent 5px 8px, var(--buho-navy-950) 8px 11px, transparent 11px 13px, var(--buho-navy-950) 13px 14px, transparent 14px 17px); } .p9-cam__hint { padding: 6px 11px; border-radius: 999px; background: rgba(0, 0, 0, .55); font: 500 10.5px/1.3 var(--font-sans); color: #fff; text-align: center; } .p9-toast { display: flex; align-items: center; gap: 8px; margin: 0 8px; padding: 9px 12px; border-radius: 12px; background: var(--color-success-ink); color: #fff; font: 600 11.5px/1.2 var(--font-sans); box-shadow: 0 8px 20px rgba(0, 17, 68, .18); } .p9-toast .ti { font-size: 15px; } .p9-toast .x { margin-left: auto; font-size: 13px; } /* ── 76.9 · La tienda ────────────────────────────────────*/ .p9-shop__nav { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #fff; font: 800 12px/1 var(--font-sans); letter-spacing: -.01em; } .p9-shop__nav .lk { font: 500 10.5px/1 var(--font-sans); color: var(--color-text-muted); } .p9-shop__nav .ico { margin-left: auto; display: inline-flex; gap: 10px; color: var(--p9-morado); font-size: 14px; } .p9-shop__nav .ico .n { position: relative; } .p9-shop__nav .ico .n::after { content: attr(data-n); position: absolute; top: -6px; right: -7px; width: 13px; height: 13px; border-radius: 50%; background: var(--p9-morado); color: #fff; font: 700 10.5px/13px var(--font-sans); text-align: center; } .p9-shop__nav .ico .lg { font: 500 10.5px/1 var(--font-sans); color: var(--p9-morado); } .p9-shop__hero { position: relative; display: grid; align-content: center; gap: 6px; padding: 16px 14px; min-height: 118px; background: linear-gradient(115deg, var(--buho-navy-950) 0%, color-mix(in srgb, var(--color-success-ink) 55%, var(--buho-navy-950)) 100%); color: #fff; } .p9-shop__hero small { font: 500 11px/1 var(--font-sans); color: rgba(255, 255, 255, .8); } .p9-shop__hero b { font: 800 24px/1 var(--font-sans); letter-spacing: -.03em; } .p9-shop__hero .cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 6px 11px; border-radius: 999px; background: #fff; color: var(--buho-navy-950); font: 700 10.5px/1 var(--font-sans); width: max-content; } .p9-shop__hero::after { content: ""; position: absolute; right: -20px; bottom: -30px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 70%); } .p9-prods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px; } .p9-prod { background: #fff; border-radius: 10px; box-shadow: 0 0 0 1px var(--p9-linea); overflow: hidden; } .p9-prod__im { height: 56px; display: grid; place-items: center; font-size: 24px; color: rgba(0, 17, 68, .35); background: linear-gradient(140deg, var(--buho-blue-100), var(--buho-lavender-300)); } .p9-prod__im--b { background: linear-gradient(140deg, var(--buho-lavender-100), var(--buho-blue-200)); } .p9-prod__im--c { background: linear-gradient(140deg, var(--gray-150), var(--buho-blue-100)); } .p9-prod__im--d { background: linear-gradient(140deg, var(--color-warning-bg), var(--buho-lavender-100)); } .p9-prod__bd { padding: 7px 8px 8px; display: grid; gap: 3px; } .p9-prod__nm { font: 700 10.5px/1.25 var(--font-sans); color: var(--p9-morado); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .p9-prod__st { font: 500 10.5px/1 var(--font-sans); color: var(--color-text-muted); } .p9-prod__st.no { color: var(--color-danger); } .p9-prod__pr { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 2px; } .p9-prod__pr b { font: 700 11px/1 var(--font-mono); color: var(--p9-morado); } .p9-prod__pr b s { display: block; margin-bottom: 3px; font: 500 10.5px/1 var(--font-mono); color: var(--color-text-subtle); } .p9-prod__pr .ti { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--p9-morado); color: #fff; font-size: 11px; } .p9-prod__pr .ag { font: 600 10.5px/1 var(--font-sans); color: var(--color-danger); white-space: nowrap; } .p9-drop { margin: 8px 12px 14px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: 0 16px 36px rgba(0, 17, 68, .18), 0 0 0 1px var(--p9-linea); } .p9-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 14px; background: var(--p9-morado); color: #fff; font: 500 10.5px/1.5 var(--font-sans); } .p9-foot > div { display: grid; gap: 4px; align-content: start; } .p9-foot .p9-eb { color: rgba(255, 255, 255, .85); margin-bottom: 4px; } .p9-foot span, .p9-foot small { color: rgba(255, 255, 255, .86); } .p9-foot small { font-size: 10.5px; } .p9-foot .lg { height: 18px; width: auto; display: block; margin-bottom: 6px; } .p9-foot .ti { font-size: 11px; margin-right: 4px; color: rgba(255, 255, 255, .7); } .p9-foot__bt { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .2); font-size: 10.5px; } /* Las pastillas de medio de pago crecen: a 20 px de alto los logotipos quedaban por debajo del texto de su propia fila y no se leían. Suben a 26. Y no se igualan por masa, que es lo que hace el resto del sitio, sino por **altura de tinta**. La masa decía que ya estaban parejos —Yape 14.0, Visa 13.7— y sin embargo Visa se veía mucho más pequeña: un cuadrado macizo de 14 px pesa a la vista bastante más que un logotipo de 24 × 7.8. Con logotipos tan apaisados junto a iconos cuadrados manda la altura. */ .p9-pay { margin-left: auto; display: inline-flex; gap: 5px; } .p9-pay span { display: inline-grid; place-items: center; height: 26px; padding: 0 7px; border-radius: 6px; background: #fff; } .p9-pay .marca-color { --mc: 18px; } /* Nada de `--lmb: 1` ni de ancho y alto a mano: eso rompe el mecanismo de §17. `--lmb` agranda la caja lo justo para que la TINTA del logotipo mida `--lm` por su lado menor, y la máscara va a `contain`. Forzando la caja a 40 × 13, la máscara encajaba el lienzo cuadrado de 24 × 24 por el lado corto y la tinta salía a 13 × 4.2: por eso Visa se veía diminuta. Dejando actuar a `--lmb`, `--lm` es literalmente el alto de la tinta. */ .p9-pay .logo-marca { --lm: 16px; } /* Visa entra como imagen y no como máscara: su logotipo es un degradado azul y en un solo color deja de ser el logotipo. El archivo es el oficial. Misma altura que las máscaras para que la fila siga leyéndose pareja. */ .p9-pay img { display: block; height: 12px; width: auto; } /* PagoEfectivo entra como imagen, igual que Yape y Plin. Antes iba como máscara de un solo trazo sobre una pastilla navy, para poder pintarlo del amarillo de la marca sin que se perdiera sobre blanco. Se veía mal: el isologo de PagoEfectivo no es un trazo suelto, es un cuadrado amarillo con la figura en negro dentro, y la máscara se quedaba solo con la figura. El archivo lo trae el cliente y ya viene con su fondo, así que no hay nada que recolorear ni que compensar de contraste. */ .p9-pay .marca-color--pagoefectivo { --mc: 18px; } .p9-pay .tx { font: 800 10.5px/1 var(--font-sans); color: var(--p9-morado); } /* ── 76.10 · Gráficos, sólo con CSS ────────────────────── Barras, medidor, dona, área, chispas, mapa de calor, embudo y treemap. Cada uno recibe sus valores por variable (`--h`, `--w`, `--p`, `--v`) desde el HTML, que es donde está el dato. Ningún ``. ------------------------------------------------------- */ .p9-kpi { padding: 10px 12px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--p9-linea); display: grid; gap: 5px; } .p9-kpi--navy { background: var(--buho-navy-950); box-shadow: none; color: #fff; } .p9-kpi .lb { font: 700 10.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); } .p9-kpi--navy .lb { color: rgba(255, 255, 255, .62); } .p9-kpi .vl { font: 700 17px/1 var(--font-mono); letter-spacing: -.02em; } .p9-kpi .dl { display: flex; align-items: center; gap: 4px; font: 600 10.5px/1 var(--font-mono); color: var(--color-success-ink); } .p9-kpi .dl.dn { color: var(--color-warning); } .p9-kpi--navy .dl { color: var(--motif-b-light); } .p9-kpi .dl .ti { font-size: 10.5px; } .p9-kpi .st { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .p9-kpi .st .lb { font: 600 11px/1 var(--font-sans); letter-spacing: 0; text-transform: none; } .p9-kpi .tx { font: 500 10.5px/1.35 var(--font-sans); color: var(--color-text-muted); } .p9-kpi .tx b { color: var(--buho-navy-950); } .p9-cols { position: relative; isolation: isolate; display: flex; align-items: flex-end; gap: 6px; height: 72px; } .p9-cols i { flex: 1; height: var(--h, 40%); border-radius: 3px 3px 0 0; background: var(--motif-a-ink); position: relative; } .p9-cols i.on { background: var(--buho-navy-950); } .p9-cols i.on::before { content: ""; position: absolute; left: 0; right: 0; top: -4px; height: 3px; border-radius: 2px; background: var(--motif-b); } .p9-cols i::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: 0; height: var(--g, 0); border-radius: 3px 3px 0 0; background: var(--gray-200); z-index: -1; } .p9-cols--sm { height: 44px; gap: 4px; } .p9-axis { display: flex; gap: 6px; margin-top: 4px; font: 500 10.5px/1 var(--font-mono); color: var(--color-text-muted); } .p9-axis span { flex: 1; text-align: center; } .p9-gauge { position: relative; width: 104px; height: 52px; margin: 0 auto; overflow: hidden; border-radius: 104px 104px 0 0; background: conic-gradient(from -90deg at 50% 100%, var(--buho-navy-950) 0 calc(var(--p, 50) * 1.8deg), var(--gray-200) 0 180deg); } .p9-gauge::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 36px; border-radius: 72px 72px 0 0; background: #fff; } .p9-gauge--lg { width: 130px; height: 65px; border-radius: 130px 130px 0 0; } .p9-gauge--lg::after { left: 20px; right: 20px; height: 45px; } .p9-gauge + .p9-gval { margin-top: -20px; text-align: center; position: relative; } .p9-gval b { display: block; font: 800 18px/1 var(--font-sans); letter-spacing: -.02em; } .p9-gval span { display: block; margin-top: 3px; font: 500 10.5px/1.2 var(--font-sans); color: var(--color-text-muted); } .p9-donut { width: 64px; height: 64px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--buho-navy-950) 0 42%, var(--motif-a-ink) 0 77%, var(--motif-a) 0 95%, var(--motif-b) 0); } .p9-donut::after { content: ""; width: 40px; height: 40px; border-radius: 50%; background: #fff; } .p9-leg { display: grid; gap: 4px; font: 500 10.5px/1 var(--font-sans); } .p9-leg span { display: flex; align-items: center; gap: 5px; } .p9-leg span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--buho-navy-950)); flex: none; } .p9-leg b { margin-left: auto; font: 700 10.5px/1 var(--font-mono); } .p9-hbar { display: grid; gap: 6px; } .p9-hbar > div { display: grid; grid-template-columns: 1fr auto; row-gap: 3px; column-gap: 6px; font: 600 10.5px/1 var(--font-sans); } .p9-hbar > div b { font: 700 10.5px/1 var(--font-mono); } .p9-hbar > div small { grid-column: 1 / -1; font: 500 10.5px/1 var(--font-mono); color: var(--color-text-muted); } .p9-hbar i { grid-column: 1 / -1; display: block; height: 6px; border-radius: 3px; background: var(--gray-200); position: relative; } .p9-hbar i::after { content: ""; position: absolute; inset: 0; width: var(--w, 50%); border-radius: 3px; background: var(--motif-a-ink); } .p9-area { height: 60px; border-radius: 4px; background: linear-gradient(180deg, color-mix(in srgb, var(--buho-navy-950) 22%, transparent), color-mix(in srgb, var(--buho-navy-950) 4%, transparent)); clip-path: polygon(0 62%, 20% 64%, 40% 52%, 60% 50%, 80% 30%, 100% 16%, 100% 100%, 0 100%); } .p9-area--2 { margin-top: -60px; background: linear-gradient(180deg, color-mix(in srgb, var(--motif-b) 45%, transparent), color-mix(in srgb, var(--motif-b) 5%, transparent)); clip-path: polygon(0 78%, 20% 80%, 40% 74%, 60% 76%, 80% 66%, 100% 60%, 100% 100%, 0 100%); } .p9-spark { display: flex; align-items: flex-end; gap: 2px; height: 22px; width: 48px; flex: none; } .p9-spark i { flex: 1; height: var(--h, 40%); border-radius: 1px; background: var(--motif-a-ink); opacity: .75; } .p9-spark--dn i { background: var(--color-warning); } .p9-kpi--navy .p9-spark i { background: var(--motif-b); opacity: .9; } .p9-heat { display: grid; grid-template-columns: auto repeat(5, 1fr); gap: 3px; align-items: center; font: 500 10.5px/1 var(--font-mono); color: var(--color-text-muted); } .p9-heat i { display: block; aspect-ratio: 1.6; border-radius: 3px; background: color-mix(in srgb, var(--buho-navy-950) calc(var(--v, 20) * 1%), var(--gray-200)); } .p9-tree { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; height: 74px; } .p9-tree span { border-radius: 4px; padding: 4px 5px; font: 700 10.5px/1.2 var(--font-sans); color: #fff; background: var(--buho-navy-950); overflow: hidden; } .p9-tree span small { display: block; font: 500 10.5px/1 var(--font-mono); opacity: .8; margin-top: 2px; } .p9-tree span:nth-child(1) { grid-row: 1 / 3; } .p9-tree span:nth-child(2) { background: var(--motif-a-ink); grid-row: 1 / 3; } .p9-tree span:nth-child(3) { background: color-mix(in srgb, var(--motif-a-ink) 70%, #fff); } .p9-tree span:nth-child(4) { background: color-mix(in srgb, var(--motif-a) 60%, #fff); color: var(--buho-navy-950); } .p9-fun { display: grid; gap: 5px; font: 600 10.5px/1 var(--font-sans); } .p9-fun > div { display: grid; grid-template-columns: 1fr auto; row-gap: 3px; } .p9-fun i { grid-column: 1 / -1; display: block; height: 9px; width: var(--w, 50%); border-radius: 3px; background: var(--motif-a-ink); } .p9-fun > div:first-child i { background: var(--buho-navy-950); } .p9-fun b { font: 700 10.5px/1 var(--font-mono); } .p9-dash { display: grid; gap: 8px; } .p9-dash__k, .p9-dash__g { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .p9-dash__g--w { grid-template-columns: 1.6fr 1fr; } .p9-dash__g--3 { grid-template-columns: repeat(3, 1fr); } .p9-gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .p9-gal .p9-card--sm { display: grid; gap: 8px; align-content: start; } .p9-gal .p9-cardh { margin: 0; } .p9-gal .p9-cardh b { font-size: 10.5px; display: flex; align-items: center; gap: 5px; } .p9-gal .p9-cardh b i { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 3px; background: var(--buho-navy-950); color: #fff; font: 700 10.5px/1 var(--font-mono); font-style: normal; } .p9-gal .p9-kpi { padding: 8px 10px; } .p9-gal .p9-kpi .vl { font-size: 14px; } /* El QR de vinculación de WhatsApp. Es un QR real —el del número de ventas de la casa— dibujado módulo a módulo con una sombra por módulo sobre una caja de 1 em; el tamaño del módulo es el `font-size`. Ninguna imagen. */ .p9-qrw { width: max-content; margin: 0 auto; padding: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--p9-linea); } .p9-qr { display: block; position: relative; font-size: 5px; width: 25em; height: 25em; } .p9-qr::before { content: ""; position: absolute; top: 0; left: 0; width: 1em; height: 1em; background: transparent; box-shadow: 0em 0em, 1em 0em, 2em 0em, 3em 0em, 4em 0em, 5em 0em, 6em 0em, 8em 0em, 11em 0em, 12em 0em, 13em 0em, 16em 0em, 18em 0em, 19em 0em, 20em 0em, 21em 0em, 22em 0em, 23em 0em, 24em 0em, 0em 1em, 6em 1em, 8em 1em, 9em 1em, 10em 1em, 12em 1em, 14em 1em, 16em 1em, 18em 1em, 24em 1em, 0em 2em, 2em 2em, 3em 2em, 4em 2em, 6em 2em, 10em 2em, 11em 2em, 12em 2em, 13em 2em, 14em 2em, 15em 2em, 16em 2em, 18em 2em, 20em 2em, 21em 2em, 22em 2em, 24em 2em, 0em 3em, 2em 3em, 3em 3em, 4em 3em, 6em 3em, 10em 3em, 13em 3em, 15em 3em, 16em 3em, 18em 3em, 20em 3em, 21em 3em, 22em 3em, 24em 3em, 0em 4em, 2em 4em, 3em 4em, 4em 4em, 6em 4em, 8em 4em, 9em 4em, 10em 4em, 11em 4em, 13em 4em, 16em 4em, 18em 4em, 20em 4em, 21em 4em, 22em 4em, 24em 4em, 0em 5em, 6em 5em, 8em 5em, 11em 5em, 14em 5em, 16em 5em, 18em 5em, 24em 5em, 0em 6em, 1em 6em, 2em 6em, 3em 6em, 4em 6em, 5em 6em, 6em 6em, 8em 6em, 10em 6em, 12em 6em, 14em 6em, 16em 6em, 18em 6em, 19em 6em, 20em 6em, 21em 6em, 22em 6em, 23em 6em, 24em 6em, 8em 7em, 10em 7em, 11em 7em, 12em 7em, 0em 8em, 1em 8em, 2em 8em, 5em 8em, 6em 8em, 8em 8em, 9em 8em, 10em 8em, 14em 8em, 15em 8em, 17em 8em, 18em 8em, 19em 8em, 20em 8em, 23em 8em, 24em 8em, 2em 9em, 4em 9em, 5em 9em, 7em 9em, 9em 9em, 10em 9em, 13em 9em, 14em 9em, 15em 9em, 18em 9em, 19em 9em, 21em 9em, 23em 9em, 24em 9em, 1em 10em, 6em 10em, 8em 10em, 11em 10em, 13em 10em, 14em 10em, 15em 10em, 17em 10em, 18em 10em, 21em 10em, 22em 10em, 24em 10em, 2em 11em, 3em 11em, 4em 11em, 9em 11em, 14em 11em, 16em 11em, 17em 11em, 19em 11em, 21em 11em, 2em 12em, 3em 12em, 5em 12em, 6em 12em, 7em 12em, 8em 12em, 9em 12em, 11em 12em, 12em 12em, 14em 12em, 15em 12em, 17em 12em, 18em 12em, 24em 12em, 3em 13em, 4em 13em, 5em 13em, 12em 13em, 13em 13em, 14em 13em, 15em 13em, 18em 13em, 19em 13em, 23em 13em, 24em 13em, 0em 14em, 1em 14em, 4em 14em, 6em 14em, 7em 14em, 8em 14em, 9em 14em, 12em 14em, 13em 14em, 14em 14em, 15em 14em, 21em 14em, 22em 14em, 24em 14em, 2em 15em, 8em 15em, 9em 15em, 11em 15em, 12em 15em, 14em 15em, 15em 15em, 16em 15em, 18em 15em, 19em 15em, 20em 15em, 21em 15em, 0em 16em, 1em 16em, 3em 16em, 4em 16em, 5em 16em, 6em 16em, 9em 16em, 12em 16em, 14em 16em, 16em 16em, 17em 16em, 18em 16em, 19em 16em, 20em 16em, 23em 16em, 8em 17em, 10em 17em, 13em 17em, 14em 17em, 16em 17em, 20em 17em, 24em 17em, 0em 18em, 1em 18em, 2em 18em, 3em 18em, 4em 18em, 5em 18em, 6em 18em, 9em 18em, 10em 18em, 11em 18em, 13em 18em, 14em 18em, 16em 18em, 18em 18em, 20em 18em, 24em 18em, 0em 19em, 6em 19em, 8em 19em, 9em 19em, 10em 19em, 12em 19em, 14em 19em, 16em 19em, 20em 19em, 23em 19em, 0em 20em, 2em 20em, 3em 20em, 4em 20em, 6em 20em, 11em 20em, 14em 20em, 15em 20em, 16em 20em, 17em 20em, 18em 20em, 19em 20em, 20em 20em, 23em 20em, 0em 21em, 2em 21em, 3em 21em, 4em 21em, 6em 21em, 9em 21em, 10em 21em, 11em 21em, 13em 21em, 14em 21em, 15em 21em, 17em 21em, 20em 21em, 22em 21em, 23em 21em, 0em 22em, 2em 22em, 3em 22em, 4em 22em, 6em 22em, 8em 22em, 9em 22em, 10em 22em, 11em 22em, 12em 22em, 13em 22em, 14em 22em, 16em 22em, 17em 22em, 19em 22em, 20em 22em, 21em 22em, 23em 22em, 24em 22em, 0em 23em, 6em 23em, 8em 23em, 10em 23em, 11em 23em, 12em 23em, 14em 23em, 16em 23em, 17em 23em, 18em 23em, 19em 23em, 20em 23em, 0em 24em, 1em 24em, 2em 24em, 3em 24em, 4em 24em, 5em 24em, 6em 24em, 8em 24em, 9em 24em, 11em 24em, 14em 24em, 16em 24em, 18em 24em, 21em 24em, 24em 24em; } /* ── 76.12 · Las fotos de producto ─────────────────────── Lo que la app enseña con foto sigue siendo foto: los platos de Mozo, los abarrotes de VendeYa y las prendas de la tienda son recortes de las capturas originales, en `assets/apps/pro9/fotos/`, de 8 a 20 KB cada uno. La interfaz alrededor es la que se reconstruye en código. ------------------------------------------------------- */ .p9-tile__im, .p9-prod__im, .p9-ic--foto { position: relative; overflow: hidden; } .p9-tile__im img, .p9-prod__im img, .p9-ic--foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .p9-tile__pr { z-index: 1; } .p9-tile__im--foto { background: #fff; } .p9-tile__im--foto img { object-fit: contain; padding: 4px; } .p9-tile__im { height: 64px; } .p9-prod__im { height: 78px; } .p9-prod__im--ban { height: 54px; border-radius: 8px; overflow: hidden; } .p9-ic--foto { overflow: hidden; background: var(--gray-150); padding: 0; } .p9-shop__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; z-index: 0; } .p9-shop__hero > :not(.p9-shop__foto) { position: relative; z-index: 1; } .p9-shop__hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0, 17, 68, .78) 0%, rgba(0, 17, 68, .35) 55%, rgba(0, 17, 68, .05) 100%); } .p9-shop__foto--full { object-position: center 30%; } .p9-shop__hero:has(.p9-shop__foto--full)::before { background: rgba(0, 17, 68, .25); } .p9-drop { position: relative; z-index: 2; } .p9-shop__nav .nm { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .p9-shop__nav .nm .ti { font-size: 15px; } .p9-tabs span { flex: none; } .p9win--menu { max-width: 360px; } .p9-pos { grid-template-columns: minmax(0, 1fr) 150px; } .p9-cart__it small { justify-content: space-between; } .p9-cart__it small b { margin-left: 0; } .p9-cart__tot { flex-wrap: nowrap; } .p9-cart__tot b { font-size: 13px; } .p9-cart__tot .lb { letter-spacing: .04em; } .p9-tot b { font-size: 15px; } /* ── 76.11 · Apilado ───────────────────────────────────── Las maquetas viven en rejillas de dos y tres columnas, así que su ancho va de 290 a 560 px según la página y el viewport. Lo que decide el apilado no es la pantalla sino **la caja**: por eso son consultas de contenedor sobre `.p9win__body`. Por debajo de 440 px las rejillas de dos columnas se ponen en una y la navegación lateral pasa arriba, en fila. La letra no cambia nunca. ------------------------------------------------------- */ @container (max-width: 440px) { .p9-adm { grid-template-columns: 1fr; } .p9-adm .p9-side { display: flex; flex-wrap: wrap; } .p9-adm .p9-side span { text-align: left; } .p9-split { grid-template-columns: 1fr !important; } .p9-split--l { border-left: 0; padding-left: 0; border-top: 1px solid var(--p9-linea); padding-top: 14px; } .p9-pos { grid-template-columns: 1fr; } .p9-tiles { grid-template-columns: 1fr 1fr; } .p9-prods { grid-template-columns: 1fr 1fr; } .p9-foot { grid-template-columns: 1fr 1fr; } .p9-dash__g, .p9-dash__g--w { grid-template-columns: 1fr; } .p9-gal { grid-template-columns: 1fr 1fr; } .p9-f--3 { grid-template-columns: 1fr 1fr; } } @container (max-width: 340px) { .p9-shop__nav .lk { display: none; } } @container (max-width: 300px) { .p9-g4 { grid-template-columns: 1fr 1fr; } .p9-g3 { grid-template-columns: 1fr; } .p9-btn .lbl { display: none; } .p9-foot, .p9-prods, .p9-gal, .p9-dash__k { grid-template-columns: 1fr; } } /* El teléfono en una columna de 375 px mide 244: la barra de abajo apila sus dos botones y la rejilla de cuatro pasa a dos. */ @container (max-width: 260px) { .p9tel__foot .p9-flex { flex-wrap: wrap; } .p9tel__foot .p9-flex > .p9-btn { flex: 1 1 100%; } .p9tel .p9-g4 { grid-template-columns: 1fr 1fr; } } /* ── 76.13 · La rejilla de las capturas ─────────────────── Iban en `repeat(auto-fit, minmax(230px, 1fr))` en línea, y a 1440 salían tres por fila, a 357 px cada una: los paneles con dos columnas dentro quedaban apretados. Dos columnas como máximo; la tercera baja a la fila siguiente. La medida va en la hoja, nunca en el atributo (§3.4 l). */ .p9-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 26px; align-items: start; } @media (max-width: 700px) { .p9-figs { grid-template-columns: 1fr; } } /* ── 76.14 · Bloque 06 · lo que entró tras el lanzamiento ─ Tres piezas que no existían: la línea de tiempo del pedido, el mapa de la dirección (un degradado con rejilla y su marcador, ninguna imagen) y el ticket térmico, que es la única maqueta en mono de arriba abajo porque así imprime. */ .p9-tl { display: grid; gap: 0; } .p9-tl__it { position: relative; display: grid; gap: 2px; padding: 0 0 12px 22px; font: 500 11px/1.3 var(--font-sans); } .p9-tl__it b { font-weight: 700; } .p9-tl__it span { color: var(--color-text-muted); font-size: 10.5px; } .p9-tl__it::before { content: ""; position: absolute; left: 4px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--gray-300); } .p9-tl__it::after { content: ""; position: absolute; left: 8px; top: 15px; bottom: -2px; width: 2px; background: var(--gray-200); } .p9-tl__it:last-child::after { display: none; } .p9-tl__it:last-child { padding-bottom: 0; } .p9-tl__it.ok::before { background: var(--color-success-ink); box-shadow: none; } .p9-tl__it.ok::after { background: var(--color-success-ink); } .p9-tl__it.on::before { background: var(--p9-morado); box-shadow: 0 0 0 4px color-mix(in srgb, var(--p9-morado) 22%, transparent); } .p9-map { position: relative; height: 84px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(rgba(0, 17, 68, .08) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(0, 17, 68, .08) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(140deg, var(--color-success-bg), var(--buho-blue-100)); } .p9-map .ti { font-size: 26px; color: var(--p9-morado); } .p9-tk { align-self: start; padding: 12px 12px 14px; background: #fff; border-radius: 4px; box-shadow: 0 8px 24px rgba(0, 17, 68, .12), 0 0 0 1px var(--p9-linea); font: 500 10.5px/1.4 var(--font-mono); color: var(--buho-navy-950); } .p9-tk__hd { display: grid; gap: 2px; text-align: center; } .p9-tk__hd span { color: var(--color-text-muted); } .p9-tk__hd b:last-child { margin-top: 6px; } .p9-tk__ln { height: 0; margin: 8px 0; border-top: 1px dashed var(--gray-300); } .p9-tk__row { display: flex; justify-content: space-between; gap: 8px; } .p9-tk__row span:first-child { color: var(--color-text-muted); } .p9-tk__tot { font-weight: 700; font-size: 12px; margin-top: 4px; } .p9-tk__it { display: grid; gap: 1px; padding: 3px 0; } .p9-tk__it span { display: flex; justify-content: space-between; color: var(--color-text-muted); } .p9-tk__it em { font-style: normal; color: var(--buho-navy-950); font-weight: 700; } .p9-tk__qr { width: 44px; height: 44px; margin: 4px auto; background: repeating-conic-gradient(var(--buho-navy-950) 0 25%, transparent 0 50%) 0 0 / 8px 8px; opacity: .8; } .p9-tk__f { display: block; text-align: center; font-size: 10.5px; color: var(--color-text-muted); } /* El QR del ticket es real: el texto de SUNAT (RUC | tipo | serie | número | IGV | total | fecha | tipo y número de documento), en 33 módulos de 2 px. Misma técnica que el QR de WhatsApp (§76.10). */ .p9-tk__qr { width: 66px; height: 66px; margin: 6px auto; background: none; opacity: 1; position: relative; font-size: 2px; } .p9-tk__qr::before { content: ""; position: absolute; top: 0; left: 0; width: 1em; height: 1em; box-shadow: 0em 0em, 1em 0em, 2em 0em, 3em 0em, 4em 0em, 5em 0em, 6em 0em, 9em 0em, 10em 0em, 11em 0em, 13em 0em, 14em 0em, 15em 0em, 20em 0em, 22em 0em, 24em 0em, 26em 0em, 27em 0em, 28em 0em, 29em 0em, 30em 0em, 31em 0em, 32em 0em, 0em 1em, 6em 1em, 11em 1em, 12em 1em, 15em 1em, 18em 1em, 21em 1em, 22em 1em, 26em 1em, 32em 1em, 0em 2em, 2em 2em, 3em 2em, 4em 2em, 6em 2em, 9em 2em, 10em 2em, 11em 2em, 14em 2em, 16em 2em, 18em 2em, 21em 2em, 23em 2em, 26em 2em, 28em 2em, 29em 2em, 30em 2em, 32em 2em, 0em 3em, 2em 3em, 3em 3em, 4em 3em, 6em 3em, 8em 3em, 10em 3em, 11em 3em, 14em 3em, 15em 3em, 16em 3em, 17em 3em, 18em 3em, 21em 3em, 22em 3em, 26em 3em, 28em 3em, 29em 3em, 30em 3em, 32em 3em, 0em 4em, 2em 4em, 3em 4em, 4em 4em, 6em 4em, 8em 4em, 10em 4em, 12em 4em, 13em 4em, 14em 4em, 15em 4em, 17em 4em, 18em 4em, 19em 4em, 21em 4em, 22em 4em, 23em 4em, 24em 4em, 26em 4em, 28em 4em, 29em 4em, 30em 4em, 32em 4em, 0em 5em, 6em 5em, 9em 5em, 10em 5em, 13em 5em, 14em 5em, 16em 5em, 20em 5em, 24em 5em, 26em 5em, 32em 5em, 0em 6em, 1em 6em, 2em 6em, 3em 6em, 4em 6em, 5em 6em, 6em 6em, 8em 6em, 10em 6em, 12em 6em, 14em 6em, 16em 6em, 18em 6em, 20em 6em, 22em 6em, 24em 6em, 26em 6em, 27em 6em, 28em 6em, 29em 6em, 30em 6em, 31em 6em, 32em 6em, 9em 7em, 12em 7em, 13em 7em, 20em 7em, 22em 7em, 0em 8em, 1em 8em, 5em 8em, 6em 8em, 7em 8em, 9em 8em, 10em 8em, 12em 8em, 14em 8em, 16em 8em, 17em 8em, 18em 8em, 19em 8em, 23em 8em, 28em 8em, 29em 8em, 0em 9em, 1em 9em, 2em 9em, 3em 9em, 5em 9em, 8em 9em, 10em 9em, 14em 9em, 15em 9em, 16em 9em, 19em 9em, 20em 9em, 23em 9em, 26em 9em, 27em 9em, 28em 9em, 30em 9em, 31em 9em, 0em 10em, 1em 10em, 2em 10em, 3em 10em, 6em 10em, 8em 10em, 9em 10em, 11em 10em, 12em 10em, 15em 10em, 16em 10em, 18em 10em, 24em 10em, 27em 10em, 4em 11em, 5em 11em, 7em 11em, 10em 11em, 11em 11em, 14em 11em, 19em 11em, 20em 11em, 23em 11em, 24em 11em, 26em 11em, 27em 11em, 28em 11em, 30em 11em, 0em 12em, 2em 12em, 3em 12em, 4em 12em, 5em 12em, 6em 12em, 9em 12em, 10em 12em, 13em 12em, 14em 12em, 18em 12em, 19em 12em, 23em 12em, 25em 12em, 26em 12em, 31em 12em, 32em 12em, 0em 13em, 1em 13em, 2em 13em, 4em 13em, 8em 13em, 9em 13em, 10em 13em, 12em 13em, 13em 13em, 14em 13em, 15em 13em, 19em 13em, 21em 13em, 22em 13em, 23em 13em, 24em 13em, 25em 13em, 26em 13em, 27em 13em, 30em 13em, 31em 13em, 32em 13em, 0em 14em, 2em 14em, 3em 14em, 5em 14em, 6em 14em, 8em 14em, 10em 14em, 13em 14em, 14em 14em, 15em 14em, 16em 14em, 18em 14em, 21em 14em, 22em 14em, 24em 14em, 28em 14em, 30em 14em, 0em 15em, 3em 15em, 5em 15em, 7em 15em, 8em 15em, 9em 15em, 12em 15em, 13em 15em, 14em 15em, 16em 15em, 18em 15em, 19em 15em, 20em 15em, 22em 15em, 24em 15em, 26em 15em, 28em 15em, 30em 15em, 4em 16em, 5em 16em, 6em 16em, 7em 16em, 10em 16em, 12em 16em, 14em 16em, 16em 16em, 17em 16em, 20em 16em, 23em 16em, 28em 16em, 29em 16em, 31em 16em, 0em 17em, 1em 17em, 3em 17em, 4em 17em, 9em 17em, 10em 17em, 15em 17em, 17em 17em, 19em 17em, 22em 17em, 23em 17em, 24em 17em, 25em 17em, 26em 17em, 30em 17em, 31em 17em, 32em 17em, 2em 18em, 6em 18em, 8em 18em, 12em 18em, 13em 18em, 14em 18em, 15em 18em, 17em 18em, 19em 18em, 20em 18em, 21em 18em, 23em 18em, 25em 18em, 26em 18em, 27em 18em, 28em 18em, 31em 18em, 32em 18em, 1em 19em, 2em 19em, 3em 19em, 4em 19em, 5em 19em, 7em 19em, 11em 19em, 14em 19em, 18em 19em, 24em 19em, 30em 19em, 4em 20em, 5em 20em, 6em 20em, 9em 20em, 10em 20em, 11em 20em, 16em 20em, 17em 20em, 18em 20em, 20em 20em, 23em 20em, 28em 20em, 29em 20em, 0em 21em, 2em 21em, 5em 21em, 7em 21em, 9em 21em, 10em 21em, 12em 21em, 13em 21em, 15em 21em, 16em 21em, 19em 21em, 20em 21em, 23em 21em, 24em 21em, 25em 21em, 28em 21em, 30em 21em, 31em 21em, 0em 22em, 4em 22em, 6em 22em, 8em 22em, 9em 22em, 13em 22em, 14em 22em, 15em 22em, 16em 22em, 18em 22em, 22em 22em, 24em 22em, 27em 22em, 30em 22em, 0em 23em, 3em 23em, 4em 23em, 7em 23em, 8em 23em, 10em 23em, 12em 23em, 13em 23em, 19em 23em, 24em 23em, 25em 23em, 27em 23em, 28em 23em, 30em 23em, 32em 23em, 0em 24em, 1em 24em, 4em 24em, 5em 24em, 6em 24em, 8em 24em, 9em 24em, 11em 24em, 12em 24em, 13em 24em, 19em 24em, 22em 24em, 23em 24em, 24em 24em, 25em 24em, 26em 24em, 27em 24em, 28em 24em, 31em 24em, 32em 24em, 8em 25em, 15em 25em, 17em 25em, 19em 25em, 21em 25em, 23em 25em, 24em 25em, 28em 25em, 29em 25em, 30em 25em, 31em 25em, 32em 25em, 0em 26em, 1em 26em, 2em 26em, 3em 26em, 4em 26em, 5em 26em, 6em 26em, 8em 26em, 9em 26em, 11em 26em, 12em 26em, 15em 26em, 16em 26em, 22em 26em, 23em 26em, 24em 26em, 26em 26em, 28em 26em, 30em 26em, 0em 27em, 6em 27em, 8em 27em, 9em 27em, 11em 27em, 16em 27em, 18em 27em, 22em 27em, 24em 27em, 28em 27em, 30em 27em, 0em 28em, 2em 28em, 3em 28em, 4em 28em, 6em 28em, 9em 28em, 10em 28em, 11em 28em, 16em 28em, 17em 28em, 18em 28em, 19em 28em, 20em 28em, 24em 28em, 25em 28em, 26em 28em, 27em 28em, 28em 28em, 29em 28em, 32em 28em, 0em 29em, 2em 29em, 3em 29em, 4em 29em, 6em 29em, 9em 29em, 12em 29em, 13em 29em, 14em 29em, 15em 29em, 17em 29em, 19em 29em, 20em 29em, 22em 29em, 24em 29em, 25em 29em, 27em 29em, 28em 29em, 30em 29em, 31em 29em, 32em 29em, 0em 30em, 2em 30em, 3em 30em, 4em 30em, 6em 30em, 9em 30em, 11em 30em, 15em 30em, 17em 30em, 18em 30em, 19em 30em, 20em 30em, 23em 30em, 24em 30em, 28em 30em, 29em 30em, 30em 30em, 31em 30em, 32em 30em, 0em 31em, 6em 31em, 8em 31em, 9em 31em, 12em 31em, 13em 31em, 22em 31em, 23em 31em, 25em 31em, 26em 31em, 27em 31em, 30em 31em, 0em 32em, 1em 32em, 2em 32em, 3em 32em, 4em 32em, 5em 32em, 6em 32em, 8em 32em, 12em 32em, 14em 32em, 16em 32em, 17em 32em, 18em 32em, 20em 32em, 24em 32em, 29em 32em, 31em 32em; } /* ========================================================= 76 · Las cintas de logotipos, sobre fondo blanco --------------------------------------------------------- La marquesina nació navy y con los logos en blanco. Con la cinta de `/servicios/tienda-virtual` —donde las marcas entran a color, con su propio archivo— el navy dejó de funcionar: un archivo a color sobre fondo oscuro pelea, y el globo con el nombre en blanco encima ya no tenía contraste sobre el que hay debajo. Las cintas de logotipos pasan a **fondo blanco**. Son las cinco que llevan globo: `nube/hosting`, `nube/index`, `nube/vps`, `nube/google-workspace` y `servicios/tienda-virtual`. Las demás bandas —las de icono y texto, sin globo— siguen en navy, que ahí sí es su sitio. El selector se ata a la pieza y no a una clase nueva: si una cinta lleva `.tip`, es de logotipos. Así ninguna página necesita tocarse y la que se escriba mañana entra sola. ========================================================= */ .specband:has(.specband__track > .tip) { /* Blanco, por decisión del cliente. Antes iba a #EEEFF4, un punto por debajo del crema de la casa, para que la cinta se leyera como una franja entre las secciones blancas que la rodean. En blanco esa separación la sostienen solo los dos filetes de 1 px de arriba y abajo, que se conservan tal cual: la franja se insinúa en vez de marcarse. */ background: #fff; color: var(--color-text); box-shadow: inset 0 1px 0 rgba(0, 17, 68, .08), inset 0 -1px 0 rgba(0, 17, 68, .08); } /* El texto que quede dentro (los rótulos de las cintas de icono y texto que sí llevan globo) y los iconos de línea. */ .specband:has(.specband__track > .tip) .specband__track span { color: var(--color-text-muted); } .specband:has(.specband__track > .tip) .specband__track i.ti { color: var(--buho-pink-700, #CC0056); } /* Las máscaras: navy en vez de blanco. */ .specband:has(.specband__track > .tip) .logo-marca, .specband:has(.specband__track > .tip) .logo-iso { color: var(--buho-navy-950, #001144); } /* Las tres que se habían aclarado con blanco para sobrevivir al navy (§73.1a y §73.1b) vuelven a su color de manual: es sobre claro donde ese hex está pensado para leerse. */ .specband:has(.specband__track > .tip) .logo-marca.logo-wordpress { color: #21759B; } .specband:has(.specband__track > .tip) .logo-iso--mysql { color: #00758F; } .specband:has(.specband__track > .tip) .logo-marca.logo-visa { color: #1434CB; } /* El verde de WhatsApp de manual (#25D366) está calibrado para fondo oscuro; sobre crema se apaga. Va el tinte de la casa, que es el mismo verde un punto más hondo. */ .specband:has(.specband__track > .tip) .logo-marca.logo-whatsapp { color: #1FA855; } /* En reposo ya no hacen falta los 88 de opacidad: sobre navy bajaban el blanco; sobre crema solo lavan el color. */ .specband--logos:has(.specband__track > .tip) .specband__track > span { opacity: 1; } /* El globo del nombre: pastilla clara y letra navy. */ .specband:has(.specband__track > .tip) .specband__track > .tip::after { background: rgba(0, 17, 68, .05); box-shadow: inset 0 0 0 1px rgba(0, 17, 68, .10); color: var(--buho-navy-950, #001144); } /* Y la sombra del logo al levantarse: la de negro al 45 % estaba hecha para el navy y sobre crema mancha. */ .specband:has(.specband__track > .tip) .specband__track > .tip:hover > .logo-iso { filter: drop-shadow(0 6px 14px rgba(0, 17, 68, .18)); } /* ========================================================= 77 · PASOS · solo el activo enseña su descripción --------------------------------------------------------- Los pasos de la narrativa pegajosa (`.story-step`) cambiaban también al pasar el cursor, y todos mostraban su párrafo. A petición del cliente: el paso cambia solo con clic, teclado o scroll (`kit.js` §3, sin `mouseenter`), y la descripción solo se despliega en el paso activo; los demás quedan en número y título. Lo mismo para las pestañas de `.explore`. El párrafo no se oculta con `display:none` —eso no anima—: se recoge con `max-height` y opacidad. ========================================================= */ .story-step p { max-height: 0; margin-top: 0; opacity: 0; overflow: hidden; transition: max-height .32s var(--ease-out), opacity .24s var(--ease-out), margin-top .32s var(--ease-out); } .story-step[aria-selected="true"] p { max-height: 320px; margin-top: 8px; opacity: 1; } @media (prefers-reduced-motion: reduce) { .story-step p { transition: none; } } /* ── 76.20 · El checkout de la tienda ──────────────────── Piezas que faltaban en el kit p9 para dibujar el checkout real: el contador de cantidad del carrito y la fila de garantías del resumen. Todo lo demás —tarjetas, campos, chips, totales y la fila de medios de pago— ya existía. ------------------------------------------------------- */ .p9-qty { display: inline-flex; align-items: center; flex: none; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--p9-linea); } .p9-qty .ti { width: 22px; height: 24px; display: grid; place-items: center; font-size: 12px; color: var(--color-text-muted); } .p9-qty b { min-width: 22px; text-align: center; font: 700 11px/1 var(--font-mono); } .p9-gar { display: flex; flex-wrap: wrap; gap: 6px 12px; } .p9-gar span { display: inline-flex; align-items: center; gap: 5px; font: 500 10px/1 var(--font-sans); color: var(--color-text-muted); white-space: nowrap; } .p9-gar .ti { font-size: 12px; color: var(--color-success-ink); }