/* Menú y pie: una sola hoja para todo el sitio. * * Estaba copiada en cuatro lugares y se desfasó: a las páginas * legales les faltaba --texto y los enlaces del menú móvil salían * grises en vez de negros. * * Los colores se declaran sobre los propios componentes, no en * :root, para que la página que los aloje no pueda cambiarlos. * Cargar con al principio del . */ .nav, .pie{ --tinta:#05061F; --tinta-2:#0D1030; --tinta-3:#242A52; --azul:#0057FA; --azul-hondo:#0040DC; --azul-claro:#3D82FF; --azul-nube:#EEF3FD; --azul-bruma:#F5F8FD; --verde:#00B300; --verde-2:#009400; --wa:#25D366; --papel:#FFFFFF; --gris-1:#F7F9FD; --gris-2:#E4EBF7; --texto:#05061F; --texto-2:#4A5678; --texto-inv:#FFFFFF; --texto-inv-2:#BFD3FF; --display:"Plus Jakarta Sans",system-ui,sans-serif; --body:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif; --alto-nav:69px; --ancho:1120px; --radio:18px; --radio-s:11px; } /* El color de texto se fija aquí: si se heredara del documento, cada sección pintaría su menú de otro color. */ .nav{color:var(--texto)} /* El contenedor no depende de que la página defina .env */ .nav .env, .pie .env{ width:100%;max-width:var(--ancho);margin-inline:auto; padding-inline:clamp(20px,5vw,32px); } /* Blindaje. * * Un color heredado pierde contra cualquier regla que apunte al * elemento, por poca fuerza que tenga. Las páginas legales traen su * propio «a{color:...}» y por eso los enlaces del pie salían azul * oscuro sobre fondo casi negro: 2.6:1, ilegibles. * * Aquí el color se vuelve a fijar sobre los propios elementos, y * dentro de :where() para que no pese nada: le gana a un «a{...}» * suelto de la página, pero pierde contra cualquier regla de aquí * abajo, incluidas las de una sola clase como .nav__wa. */ .nav :where(a, b, i, em, small, span, strong), .pie :where(a, b, i, em, small, span, strong, li){ color:inherit; } .nav{ position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94); backdrop-filter:blur(12px); border-bottom:1px solid var(--gris-2); } .nav__in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:68px} .marca{display:flex;align-items:center;text-decoration:none} .nav .marca img{height:52px;width:187.5px;max-width:none;object-fit:contain;flex:none;display:block;margin:-10px -21px} .nav__links{ /* align-items:center alinea enlaces y botón por su eje, no por la línea base: es lo que estaba desalineando la barra en laptop. */ margin-left:auto;display:flex;align-items:center;gap:16px; /* Con «Asistente Virtual» son siete enlaces: a 14.5 px y 24 px de hueco no cabían ni en 1440 y la barra caía a hamburguesa en toda laptop. */ font-size:14px;letter-spacing:-.01em;font-weight:600;color:var(--texto-2);flex:none; } .nav__links > *{flex:none;white-space:nowrap} .nav__links a{display:flex;align-items:center;text-decoration:none;transition:color .15s} .nav__links a:hover{color:var(--azul)} .nav__links a small{display:none} .nav__links a b{font-weight:600} .nav__wa{ flex:none;height:38px;border-radius:999px; display:flex;align-items:center;justify-content:center;gap:8px; padding:0 13px 0 11px; background:var(--verde);color:#06301A;text-decoration:none; font-family:var(--body);font-size:14px;font-weight:700;letter-spacing:-.005em; transition:background .15s ease,transform .15s ease; } .nav__wa svg{flex:none} .nav__wa-txt{display:flex;align-items:center;white-space:nowrap} .nav__wa-txt i{display:none} .nav__wa:hover{background:var(--verde-2);transform:translateY(-1px)} /* Barra de escritorio: son siete enlaces en el mismo ancho del contenido. * «Asistente Virtual» se lee «Asistente» (el menú del celular conserva el * nombre completo), y si aun así un navegador dibuja la letra más ancha, * nav.js oculta «Comienza hoy» antes de pasar a hamburguesa. */ @media(min-width:1024px){ .nav:not(.nav--apretado) .nav__largo{display:none} .nav--sin-extra:not(.nav--apretado) [data-prescindible]{display:none} } .nav__hamb{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px; width:44px;height:44px;flex:none;padding:0; border:0;background:transparent;border-radius:10px;cursor:pointer; } .nav__hamb span{ display:block;width:22px;height:2.5px;border-radius:2px;background:var(--tinta); transition:transform .25s ease, opacity .18s ease; } .nav__hamb[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)} .nav__hamb[aria-expanded="true"] span:nth-child(2){opacity:0} .nav__hamb[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)} @media(max-width:1023px){ .nav__links{ /* No se usa position:fixed porque .nav lleva backdrop-filter, y eso hace que un hijo fijo se posicione contra la barra en vez de contra la pantalla. Con absolute + alto calculado se logra lo mismo: el panel ocupa toda la pantalla bajo el encabezado. */ position:absolute;top:100%;left:0;right:0; height:calc(100vh - var(--alto-nav)); height:calc(100dvh - var(--alto-nav)); flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0; background:var(--papel); padding:clamp(26px,7vw,44px) clamp(22px,6vw,34px) calc(28px + env(safe-area-inset-bottom)); overflow-y:auto;overscroll-behavior:contain; opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .24s ease, transform .28s cubic-bezier(.2,.8,.3,1), visibility .28s; } .nav__links.abierto{opacity:1;visibility:visible;transform:none} .nav__links > a:not(.nav__wa){ display:flex;align-items:center;justify-content:space-between;gap:16px; padding:clamp(15px,3.4vw,19px) 0; color:var(--texto);text-decoration:none; border-bottom:1px solid var(--gris-1); transition:color .14s ease; } .nav__links > a:not(.nav__wa) b{ font-family:var(--display); font-size:clamp(21px,5.6vw,26px);font-weight:800; letter-spacing:-.028em;line-height:1.15; } .nav__links > a:not(.nav__wa) small{display:none} .nav__links > a:not(.nav__wa)::after{ content:"";flex:none;width:9px;height:9px; border-right:2.2px solid #C9DAF8;border-top:2.2px solid #C9DAF8; transform:rotate(45deg); transition:border-color .14s ease,transform .16s ease; } .nav__links > a:not(.nav__wa):active{color:var(--azul)} .nav__links > a:not(.nav__wa):active::after{ border-color:var(--azul);transform:rotate(45deg) translate(3px,-3px); } .nav__wa{ height:auto;margin-top:auto;border-radius:16px; justify-content:flex-start;gap:14px; padding:17px 20px; box-shadow:0 16px 32px -16px rgba(0,179,0,.9); } .nav__wa svg{width:24px;height:24px} .nav__wa-txt{flex-direction:column;align-items:flex-start;line-height:1.32} .nav__wa-txt b{font-size:16.5px;font-weight:800} .nav__wa-txt i{display:block;font-style:normal;font-size:13.5px;font-weight:600;opacity:.74} .idiomas{ border-left:0;padding-left:2px;padding-top:18px;margin-top:6px; border-top:1px solid var(--gris-2);font-size:15px; } .idiomas a{padding:0;border-bottom:0} } /* misma presentación cuando la barra no alcanza a caber. El corte fijo está en 1024 px: la hamburguesa es para celular y tableta vertical; en laptop y escritorio manda la barra. */ .nav--apretado .nav__links{ /* No se usa position:fixed porque .nav lleva backdrop-filter, y eso hace que un hijo fijo se posicione contra la barra en vez de contra la pantalla. Con absolute + alto calculado se logra lo mismo: el panel ocupa toda la pantalla bajo el encabezado. */ position:absolute;top:100%;left:0;right:0; height:calc(100vh - var(--alto-nav)); height:calc(100dvh - var(--alto-nav)); flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0; background:var(--papel); padding:clamp(26px,7vw,44px) clamp(22px,6vw,34px) calc(28px + env(safe-area-inset-bottom)); overflow-y:auto;overscroll-behavior:contain; opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .24s ease, transform .28s cubic-bezier(.2,.8,.3,1), visibility .28s; } .nav--apretado .nav__links.abierto{opacity:1;visibility:visible;transform:none} .nav--apretado .nav__links > a:not(.nav__wa){ display:flex;align-items:center;justify-content:space-between;gap:16px; padding:clamp(15px,3.4vw,19px) 0; color:var(--texto);text-decoration:none; border-bottom:1px solid var(--gris-1); transition:color .14s ease; } .nav--apretado .nav__links > a:not(.nav__wa) b{ font-family:var(--display); font-size:clamp(21px,5.6vw,26px);font-weight:800; letter-spacing:-.028em;line-height:1.15; } .nav--apretado .nav__links > a:not(.nav__wa) small{display:none} .nav--apretado .nav__links > a:not(.nav__wa)::after{ content:"";flex:none;width:9px;height:9px; border-right:2.2px solid #C9DAF8;border-top:2.2px solid #C9DAF8; transform:rotate(45deg); transition:border-color .14s ease,transform .16s ease; } .nav--apretado .nav__links > a:not(.nav__wa):active{color:var(--azul)} .nav--apretado .nav__links > a:not(.nav__wa):active::after{ border-color:var(--azul);transform:rotate(45deg) translate(3px,-3px); } .nav--apretado .nav__wa{ height:auto;margin-top:auto;border-radius:16px; justify-content:flex-start;gap:14px; padding:17px 20px; box-shadow:0 16px 32px -16px rgba(0,179,0,.9); } .nav--apretado .nav__wa svg{width:24px;height:24px} .nav--apretado .nav__wa-txt{flex-direction:column;align-items:flex-start;line-height:1.32} .nav--apretado .nav__wa-txt b{font-size:16.5px;font-weight:800} .nav--apretado .nav__wa-txt i{display:block;font-style:normal;font-size:13.5px;font-weight:600;opacity:.74} .nav--apretado .idiomas{ border-left:0;padding-left:2px;padding-top:18px;margin-top:6px; border-top:1px solid var(--gris-2);font-size:15px; } .nav--apretado .idiomas a{padding:0;border-bottom:0} @media(min-width:1024px){ .nav:not(.nav--apretado) .nav__hamb{display:none} } /* ── Pie ────────────────────────────────────────────────────────────── * Tres grupos con aire entre sí, en vez de todo apilado al centro: * quiénes somos y cómo escribirnos · cómo se paga · atajos. Abajo, una * franja con lo legal. Mismo orden en celular, de arriba abajo. */ .pie{background:var(--tinta);color:#9FB0D8;padding-block:clamp(44px,6vw,64px) 30px;font-size:14.5px} /* En pantallas chicas la burbuja de Mixo se para justo ahí: le dejamos su lugar. */ @media(max-width:700px){.pie{padding-bottom:96px}} .pie a{color:#9FB0D8;text-decoration:none;transition:color .15s} .pie a:hover{color:#FFFFFF} .pie__in{ display:grid;gap:36px 48px;align-items:start; grid-template-columns:1fr; grid-template-areas:"marca" "pagos" "acciones" "base"; } @media(min-width:640px){ .pie__in{grid-template-columns:1fr 1fr;grid-template-areas:"marca pagos" "acciones acciones" "base base"} } @media(min-width:960px){ .pie__in{grid-template-columns:1.3fr 1fr auto;grid-template-areas:"marca pagos acciones" "base base base";row-gap:44px} } /* Marca y WhatsApp */ .pie__marca{grid-area:marca} .pie .pie__logo{display:inline-flex} .pie__logo img{display:block;height:32px;width:auto;max-width:none} .pie__contacto{margin:20px 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:6px;max-width:32ch} .pie__contacto span{font-size:14px;line-height:1.5} .pie .pie__contacto a{ display:inline-flex;align-items:center;gap:9px; font-size:17px;font-weight:700;color:#FFFFFF;font-variant-numeric:tabular-nums; } .pie__contacto .ico-wa{flex:none;color:var(--verde-claro)} /* Formas de pago. Presentes para dar confianza, pero sin protagonismo. */ .pie__pagos{grid-area:pagos;display:flex;flex-direction:column;align-items:flex-start;gap:10px;color:#8397C4} .pie__pagos-seguro{display:flex;align-items:center;gap:7px;margin:0;font-size:12.5px;font-weight:600;letter-spacing:.02em} .pie__stripe{font-family:var(--display);font-size:15.5px;font-weight:800;letter-spacing:-.03em;color:#BFD3FF} .pie__tarjetas{display:flex;align-items:center;gap:8px;list-style:none;margin:0;padding:0} /* Placas blancas, no por gusto: el azul de Visa y el texto negro de Mastercard son ilegibles sobre el pie oscuro. Las marcas van en su color original y sin deformar, como piden sus reglas de marca. */ .pie__tarjetas li{display:grid;place-items:center;height:30px;width:48px;border-radius:5px;background:#FFFFFF} .pie__tarjetas img{display:block;width:auto} .pie__tarjetas .t-visa img{height:11px} .pie__tarjetas .t-mc img{height:19px} .pie__tarjetas .t-amex img{height:20px} .pie__pagos small{font-size:12px} /* Atajos: pagar el resto de un proyecto, o vender Mi Web PyME. */ .pie__acciones{grid-area:acciones;display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px} @media(min-width:960px){.pie__acciones{flex-direction:column;align-items:flex-end}} .pie .pie__boton{ display:inline-flex;align-items:center;padding:8px 16px; border:1px solid var(--tinta-3);border-radius:99px; font-size:12.5px;font-weight:700;line-height:1.3;color:#BFD3FF; } .pie .pie__boton:hover{color:#FFFFFF;border-color:#8397C4} /* Franja legal */ .pie__base{ grid-area:base;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:10px 28px;border-top:1px solid var(--tinta-3);padding-top:22px; } .pie__legal{margin:0;font-size:12px;letter-spacing:.03em;line-height:1.7;color:#8397C4} .pie__legal #anio:not(:empty)::after{content:" · "} .pie__legal .a-mixen{white-space:nowrap} .pie__legales{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:12.5px;font-weight:600} @media(max-width:639px){ .pie__base{flex-direction:column;align-items:flex-start} .pie__legales{order:-1} } .contacto{ display:flex;flex-wrap:wrap;align-items:center;justify-content:center; gap:clamp(12px,3vw,26px);width:100%; background:rgba(255,255,255,.06);border:1px solid var(--tinta-3); border-radius:99px;padding:14px 22px;margin-bottom:30px; } @media(max-width:700px){ .contacto{border-radius:20px;flex-direction:column;gap:12px;padding:18px 20px} } .contacto__et{font-weight:600;color:#9FB0D8} .contacto a{ display:inline-flex;align-items:center;gap:9px; font-weight:700;color:#FFFFFF;font-variant-numeric:tabular-nums; } .contacto svg{flex:none} .contacto .ico-wa{color:var(--verde-claro)} .contacto .ico-web{color:var(--azul-claro)} .a-mixen{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px} .pie .a-mixen{color:#9FB0D8;text-decoration:underline} .pie .a-mixen:hover{color:#FFFFFF} .idiomas{ display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600; padding-left:16px;border-left:1px solid var(--gris-2);color:#9DB4DA; } .idiomas a{text-decoration:none;color:var(--texto-2)} .idiomas a:hover{color:var(--azul)} .idiomas [aria-current]{color:var(--azul)} .idiomas > * + *::before{content:"\00b7";margin-right:9px;color:#C9DAF8} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}