/* ===================================================================== goodlook — el encabezado --------------------------------------------------------------------- Esta hoja se carga DESPUÉS de tienda.css, y eso es a propósito: acá se pisan a mano algunas medidas que tienda.css había dejado puestas (el alto de la fila, el tamaño del logo). Cuando dos reglas de CSS discuten con la misma fuerza, gana la que se leyó última. Qué resuelve este archivo: 1. El logo, mucho más grande. Es lo que pidió Ramiro mirando miwok.com.ar: allá el logo no es un detalle en un rincón, es LA cosa que se ve primero. 2. Que el encabezado se compacte al bajar y se estire al volver arriba, como hacen las tiendas grandes. 3. Los iconitos de Instagram y Facebook, acomodados (los dibuja redes.css, acá sólo se les hace lugar). Cómo está organizado: A. Las medidas, en un solo lugar B. El logo C. El encabezado compacto (al hacer scroll) D. Los iconitos de redes E. Que nada quede tapado por el encabezado pegajoso F. Celular ===================================================================== */ /* --- A. Las medidas, en un solo lugar --------------------------------- Todo el alto del encabezado sale de estos tres números y de ningún otro lado. Están escritos como VARIABLES de CSS (eso son los nombres con dos guiones adelante) declaradas sobre el propio .encabezado. La gracia de hacerlo así: más abajo, para achicar el encabezado entero cuando se hace scroll, no hay que reescribir cinco reglas repartidas por el archivo. Alcanza con volver a declarar estos tres números. Todo lo que los usa se entera solo. Es la misma idea que ponerle nombre a un número en un programa en vez de escribir el número suelto en veinte lugares: el día que cambia, cambia en uno. De dónde salen los valores: - 92px de fila: es lo que necesita un logo de 56px para respirar arriba y abajo sin quedar apretado contra los bordes. - 56px de logo: más del doble de los 26px que tenía. En una pantalla de escritorio se lee de lejos, que es de lo que se trataba. - 46px la barra de Mujer / Hombre: se queda como estaba; esa fila no es la protagonista. -------------------------------------------------------------------- */ /* Van en :root y no en .encabezado, y esto importa: el menú desplegable de las categorías necesita saber dónde TERMINA el encabezado para colgarse justo abajo, y no es hijo suyo sino su hermano en el HTML. Una variable declarada en .encabezado sólo la ven sus hijos. En :root la ven todos. Es un único número, en un único lugar, y las dos piezas leen el mismo: no hay forma de que se desfasen. */ :root { --alto-fila: 92px; --alto-logo: 56px; } /* El alto TOTAL del encabezado: una sola fila más su borde. Antes eran dos filas (la segunda tenía Mujer / Hombre) y por eso la cuenta era más larga; esa fila se mudó adentro del menú de las tres rayitas. Va en :root porque lo necesitan tres piezas que no son hijas del encabezado: el menú de categorías, que se cuelga justo abajo; el , que tiene que dejarle lugar; y la foto de portada, que corre su texto para que no quede tapado. Un único número, en un único lugar. */ :root { --alto-encabezado: calc(var(--alto-fila) + 1px); } /* ====================================================================== FIJO Y TRANSPARENTE SOBRE LA FOTO ====================================================================== Pedido de Ramiro: "toda esa linea cuando yo bajo para ver se achica y me gustaria q qede fija y q sea transparente para q se alinie con la foto d portada ... lo d arriba igual q miwok". Así está hecho miwok.com.ar, medido en su sitio: encabezado de 80px, fondo transparente, fuera del flujo, y una foto de portada que ocupa la ventana ENTERA por debajo. El encabezado no se apoya sobre la foto: flota adentro de ella, y por eso la foto se ve completa de punta a punta. position: fixed y no sticky. La diferencia importa: "sticky" ocupa lugar en la página, así que empuja la foto para abajo y siempre queda una franja de color arriba. "fixed" lo saca del flujo —la foto puede arrancar en el pixel 0— pero entonces hay que devolverle ese lugar a mano, que es lo que hace el padding del más abajo. ---------------------------------------------------------------------- */ .encabezado { position: fixed; top: 0; left: 0; right: 0; /* Transparente de arranque, sin borde ni sombra: nada que dibuje una línea sobre la foto. El fondo se lo pone después .encabezado-solido, cuando la foto se terminó. */ background: transparent; border-bottom: none; box-shadow: none; backdrop-filter: none; } /* El lugar que el encabezado dejó de ocupar al volverse "fixed" se lo devolvemos acá, para que el contenido no le quede debajo. La excepción es la portada: ahí hay foto grande y justamente queremos que arranque pegada arriba, por debajo del encabezado. :has() es lo que permite preguntar "¿esta página tiene foto de portada?" desde el CSS, sin agregar ninguna clase en el HTML. Si un navegador viejo no entendiera :has(), lo único que pasa es que la portada arranca 93px más abajo: se pierde el efecto, no se rompe nada. */ body { padding-top: var(--alto-encabezado); } body:has(.hero) { padding-top: 0; } /* Sobre la foto no hay línea divisoria posible, pero las letras oscuras sobre una parte clara de la foto pueden quedar justas. Una sombra de texto muy suave las despega sin que se note que hay una sombra. */ .encabezado:not(.encabezado-solido) .encabezado-fila { text-shadow: 0 1px 2px rgba(255, 255, 255, .55); } .encabezado .encabezado-fila { height: var(--alto-fila); transition: height var(--transicion-encabezado); } /* El fondo y la sombra también se animan, porque en la sección C cambian. Se listan una por una en vez de poner "transition: all": con "all" el navegador vigila TODAS las propiedades por si alguna cambia, incluidas las que nunca van a cambiar, y encima cualquier cambio futuro empezaría a animarse sin que nadie lo haya pedido. */ .encabezado { transition: background var(--transicion-encabezado), box-shadow var(--transicion-encabezado), border-color var(--transicion-encabezado); } /* --- B. El logo ------------------------------------------------------- El pedido textual de Ramiro fue: "el logo d goodlook q esta arriba d todo a la izquierda hay q hacerlo mas grande tipo como la pagina d miwok". Se le da el alto y se deja el ancho en auto: así el dibujo mantiene su proporción (868 x 206 en el archivo, o sea unas 4,2 veces más ancho que alto) y nunca se ve estirado ni achatado. Poner los dos a mano es la forma clásica de deformar un logo sin darse cuenta. Y agrandarlo no lo pixela: el archivo es un SVG, un dibujo hecho de fórmulas y no de puntitos. El navegador lo vuelve a dibujar en la medida que le pidas, igual que hace con una letra. Con un .jpg o un .png esto mismo se vería borroso. -------------------------------------------------------------------- */ .encabezado .marca img { height: var(--alto-logo); width: auto; display: block; transition: height var(--transicion-encabezado), opacity var(--transicion); } /* El logo es ahora el elemento más grande de la fila, así que también es el que decide de dónde empieza a contar todo lo demás. flex: 0 0 auto le dice al navegador: "no lo agrandes, no lo achiques, dejalo del tamaño que pide". Sin esto, cuando el buscador o el título de una página son largos, el navegador busca dónde recortar y el logo es un candidato: quedaría un poco más chico en unas páginas que en otras, que es exactamente la clase de detalle que hace que un sitio se vea amateur. */ .encabezado .marca { flex: 0 0 auto; /* El es sólo el envoltorio del dibujo; que no agregue alto propio por la línea de texto invisible que arrastra toda etiqueta de texto. */ line-height: 0; } /* Con el logo grande, el buscador puede ocupar el aire que queda en el medio en vez de quedar como una pastillita suelta al lado. Se le pone un máximo para que en una pantalla ancha no se transforme en una barra gigante: nadie escribe búsquedas de 600px de largo. */ .encabezado .buscador { flex: 0 1 340px; max-width: 340px; } /* --- C. El encabezado compacto ---------------------------------------- El otro pedido de Ramiro: "no se baja la ventana como una pagina profesional". Lo que hacen las tiendas grandes cuando bajás es esto: el encabezado no se va (lo necesitás para volver o buscar) pero se hace chiquito y se despega del contenido con una sombra. Deja de ser la portada y pasa a ser una herramienta al alcance de la mano. El reparto de tareas es: - animaciones.js vigila el scroll y, cuando la página salió de la foto de portada, le agrega la clase "encabezado-solido" al

. Al volver arriba se la saca. - este archivo define qué SIGNIFICA esa clase. Es la forma sana de combinar JavaScript y CSS: el programa decide "salimos de la foto, sí o no", y el CSS decide cómo se ve cada uno de esos dos casos. El JavaScript nunca toca colores ni medidas. Y como lo único que hace el JS es agregar una palabra, si ese archivo fallara el encabezado se queda transparente. Por eso el estado transparente sólo se activa cuando hay foto de portada detrás (ver la sección A): en el carrito o en el contacto el fondo está puesto desde el arranque, sin depender de ningún programa. -------------------------------------------------------------------- */ /* Cuando la página salió de la foto de portada, el encabezado deja de ser transparente y se apoya sobre un fondo sólido. La clase la pone animaciones.js midiendo dónde termina la foto. El tamaño NO cambia: antes se achicaba al bajar y Ramiro pidió lo contrario, que quede fijo. Lo único que cambia es el fondo. */ /* Dos casos, un mismo aspecto: · .encabezado-solido -> la portada, cuando ya bajaste de la foto. La clase la pone animaciones.js. · body:not(:has(.hero)) -> las páginas SIN foto de portada (el carrito, el contacto, una búsqueda). Ahí el fondo tiene que estar puesto desde el primer instante, porque abajo hay texto y no una foto. Y va por CSS, sin depender de ningún programa: si el JavaScript no cargara, estas páginas se siguen leyendo igual. */ body:not(:has(.hero)) .encabezado, .encabezado.encabezado-solido { background: rgba(255, 255, 255, .94); backdrop-filter: saturate(180%) blur(14px); /* La sombra reemplaza al borde, no se le suma: una raya dura MÁS una sombra debajo se leen como dos separadores pegados y queda sucio. Es deliberadamente floja (un 5% de negro y muy abierta). No tiene que verse "una sombra": tiene que dar la sensación de que el encabezado está un milímetro más cerca tuyo que la página. Si se nota, está mal. */ box-shadow: 0 1px 0 rgba(13, 18, 32, .04), 0 6px 20px rgba(13, 18, 32, .05); } /* --- D. Los iconitos de redes ----------------------------------------- Acá NO se dibujan los iconos: eso lo hace fragmentos/redes.html con su redes.css, que se carga después de esta hoja. Lo único que se hace acá es hacerles lugar en la fila y separarlos del resto. La división es a propósito: los mismos iconitos aparecen en el encabezado y en el pie, y tienen que verse iguales en los dos. Si cada lugar les tocara el aspecto, se irían separando de a poco hasta terminar distintos. -------------------------------------------------------------------- */ .encabezado-redes { display: inline-flex; align-items: center; gap: 6px; } /* En el pie van debajo de la lista de contacto, con aire suficiente para que se lean como un bloque aparte y no como el último renglón de la lista. */ .pie-redes { margin-top: 16px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* --- E. Que nada quede tapado por el encabezado pegajoso --------------- El encabezado está "pegado" arriba (position: sticky) y flota por encima de la página. Eso trae un problema clásico: cuando el navegador salta a un ancla, deja el título justo arriba de todo... o sea, debajo del encabezado, invisible. scroll-padding-top es el arreglo: le dice al navegador "cuando saltes a algo, frená esta cantidad de píxeles antes". Es un margen que existe sólo para los saltos, no se ve. El número tiene que ser el alto real del encabezado más un poco de aire. Antes decía 128px, medido para un encabezado con el logo chico; ahora que la fila creció, con 128 el título elegido volvería a quedar mordido por abajo del borde. Se recalcula solo con la variable de la sección A. (Este ajuste vive acá, y no en tienda.css que es de otro agente, porque es una consecuencia directa de haber agrandado el encabezado: si mañana el encabezado vuelve a su tamaño viejo, esta línea se va con él.) -------------------------------------------------------------------- */ html { /* 148px = 92 de la fila + 46 de las secciones + 2 de bordes + 8 de aire. Se escribe con la cuenta a la vista para que se entienda de dónde sale; el navegador la resuelve una sola vez. */ scroll-padding-top: calc(92px + 46px + 2px + 8px); } /* El resumen del carrito también se pega debajo del encabezado. Se lo alinea con el encabezado COMPACTO (104px) y no con el grande: para cuando el resumen se despega y empieza a acompañarte, ya bajaste, y el encabezado ya se achicó. Con el número del encabezado grande quedaría flotando con un hueco raro arriba. */ @media (min-width: 901px) { .resumen { top: calc(62px + 40px + 2px + 12px); } } /* --- F. Celular ------------------------------------------------------- Ramiro y sus clientes entran desde el teléfono, así que esto no es un agregado al final: es la mitad importante del trabajo. En 390px de ancho (un teléfono común) la fila de arriba tiene que meter la hamburguesa, el logo y el carrito. El buscador no está: tienda.css lo esconde en celular y lo repone adentro del menú lateral. La cuenta, con los 20px de margen del contenedor a cada lado: hamburguesa 40 + espacio 14 + logo 160 + espacio 14 + carrito 30 = 258 y hay 350 disponibles. Sobran casi 90px. Por eso el logo puede ir a 38px de alto (los 22px de antes eran demasiado tímidos) sin apretar nada. No a los 56 del escritorio: ahí sí empujaría al carrito contra el borde, y el logo ganaría la pelea a costa de esconder el botón que hace vender. -------------------------------------------------------------------- */ @media (max-width: 640px) { /* En :root, igual que en la sección A y por el mismo motivo: el menú de categorías tiene que leer estas medidas y no es hijo del encabezado. */ :root { --alto-fila: 70px; --alto-logo: 38px; } html { scroll-padding-top: calc(70px + 42px + 2px + 8px); } } /* Entre 390 y 480px hay teléfonos angostos de verdad (un iPhone SE mide 375). Ahí se le baja un escalón más al logo. Es más barato que arriesgarse a que en un modelo viejo el carrito se caiga a un renglón nuevo y el encabezado crezca solo. */ @media (max-width: 400px) { :root { --alto-fila: 66px; --alto-logo: 34px; } html { scroll-padding-top: calc(66px + 42px + 2px + 8px); } } /* --- Sin movimiento --------------------------------------------------- Hay gente que tiene activado "reducir movimiento" en su sistema operativo, normalmente porque las animaciones le dan mareo. tienda.css ya apaga las transiciones de todo el sitio, así que el encabezado igual va a cambiar de tamaño de golpe en vez de deslizarse. Esto de acá lo deja explícito para el encabezado, que es lo que más se mueve de la página. Cambiar de tamaño sigue pasando (es información útil: te dice que bajaste); lo único que se saca es el deslizamiento. -------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .encabezado, .encabezado .encabezado-fila, .encabezado .secciones-fila, .encabezado .marca img { transition: none; } } /* ====================================================================== G. EL MENÚ DE CATEGORÍAS (las tres rayitas) ====================================================================== El pedido de Ramiro fue: "quiero q las categorias se bajen de la ventana mujer o hombre q no esten ahi por estar o q esten al costado y q se abran con 3 puntitos igual como tiene miwok". Antes las doce categorías vivían en una barra siempre desplegada abajo del encabezado. El problema de eso no es el espacio: es que doce filtros a la vista todo el tiempo dejan de leerse. Se vuelven papel pintado. Y encima le robaban la primera pantalla a la foto de campaña, que es lo que vende. Ahora se abren cuando el cliente las busca, y se abren distinto según la pantalla: · Pantalla grande -> un panel ANCHO que baja desde abajo del encabezado, con tres columnas (Mujer, Hombre, La tienda) que se leen de un vistazo. Es lo que hace miwok.com.ar. · Teléfono -> el panel lateral de siempre, que entra desde la izquierda, con las columnas apiladas. Eso ya está resuelto en tienda.css y acá sólo se le agrega lo nuevo. Todo sigue sin una línea de JavaScript: el checkbox invisible guarda si está abierto y el CSS lo lee con :checked. Nada de esto se puede romper porque un script tarde en cargar. ---------------------------------------------------------------------- */ /* tienda.css los deja en display:none y los enciende sólo en celular, porque cuando se escribió eso el menú era exclusivo del teléfono. Ahora es de las dos pantallas, así que se los enciende acá para todas. */ .menu-interruptor { display: block; position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; } .menu-boton { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: -10px; /* el dibujo queda a plomo con el margen del contenedor */ border-radius: var(--radio-chico); color: var(--tinta); cursor: pointer; flex: 0 0 auto; transition: background var(--transicion), color var(--transicion); } .menu-boton:hover { background: var(--fondo-hueco); } /* Abierto, el botón queda marcado: es la única señal de que ese botón es el que está mostrando el panel, y de que volver a tocarlo lo cierra. */ .menu-interruptor:checked ~ .encabezado .menu-boton { background: var(--marca); color: #fff; } /* El foco del teclado cae en el checkbox, que es invisible. El anillo se dibuja sobre las rayitas, que es lo que la persona sí ve. */ .menu-interruptor:focus-visible ~ .encabezado .menu-boton { outline: 2px solid var(--marca); outline-offset: 2px; } /* --- Las columnas de adentro ------------------------------------------ Mismo HTML para las dos pantallas: en el teléfono se apilan una abajo de la otra (una sola columna) y en pantalla grande se ponen al lado. -------------------------------------------------------------------- */ .menu-columnas { display: grid; gap: 26px 40px; } /* El nombre de la sección es a la vez un link a la sección entera: quien quiere ver todo Mujer no tiene que buscar un "ver todo" aparte. */ .menu-columna-titulo { display: block; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--borde); font-family: var(--tipografia-titulo); font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--tinta); } a.menu-columna-titulo:hover { color: var(--marca); text-decoration: none; } /* "La tienda" no lleva a ningún lado: es un rótulo, no un link. Se lo pinta más apagado para que no invite a un clic que no existe. */ .menu-columna-titulo-suelto { color: var(--gris); } .menu-redes { margin-top: 18px; } /* --- Pantalla grande: el panel ancho ----------------------------------- Baja desde abajo del encabezado y ocupa todo el ancho. El --alto-encabezado sale de :root (sección A), así que si el encabezado se achica al bajar la página, el panel lo sigue solo y nunca queda un hueco entre los dos. -------------------------------------------------------------------- */ @media (min-width: 641px) { .menu-velo { display: block; position: fixed; /* Arranca donde termina el encabezado: el encabezado queda a la vista y el botón sigue tocándose para cerrar. */ top: var(--alto-encabezado); left: 0; right: 0; bottom: 0; z-index: 60; background: rgba(13, 18, 32, .38); opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 0s linear 200ms; } .menu-lateral { display: block; position: fixed; top: var(--alto-encabezado); left: 0; right: 0; z-index: 61; /* Nunca más alto que lo que queda de pantalla, y si el catálogo crece mucho, se desplaza adentro en vez de desbordar. */ max-height: calc(100dvh - var(--alto-encabezado)); overflow-y: auto; overscroll-behavior: contain; padding: 34px 0 40px; background: var(--fondo); border-bottom: 1px solid var(--borde); box-shadow: 0 18px 40px rgba(13, 18, 32, .12); /* Cerrado, se esconde HACIA ARRIBA, atrás del encabezado. Por eso baja en vez de aparecer: se lee como un cajón que se abre. */ transform: translateY(-12px); opacity: 0; visibility: hidden; transition: transform 240ms cubic-bezier(.25, .8, .35, 1), opacity 200ms ease, visibility 0s linear 240ms; } .menu-interruptor:checked ~ .menu-velo { opacity: 1; visibility: visible; transition: opacity 200ms ease, visibility 0s; } .menu-interruptor:checked ~ .menu-lateral { transform: none; opacity: 1; visibility: visible; transition: transform 240ms cubic-bezier(.25, .8, .35, 1), opacity 200ms ease, visibility 0s; } /* El contenido del panel se alinea con el resto del sitio en vez de irse a los bordes de la pantalla: si el logo arranca a 20px del borde y las categorías arrancan a 0, se ve desprolijo aunque nadie sepa por qué. */ .menu-columnas { max-width: var(--ancho-maximo); margin: 0 auto; padding: 0 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); } /* En pantalla grande el buscador y el título con la cruz ya están en el encabezado: repetirlos adentro del panel es ruido. */ .menu-fila-superior, .menu-buscador { display: none; } .menu-link { display: block; padding: 7px 0; font-size: .95rem; color: var(--tinta-suave); } .menu-link:hover { color: var(--marca); text-decoration: none; background: none; } } /* --- Teléfono: el panel lateral de siempre ----------------------------- La mecánica (entra desde la izquierda, velo a pantalla completa) ya está en tienda.css. Acá sólo se acomoda lo nuevo: las columnas apiladas y el ancho, que ahora tiene que entrar bastante más contenido. -------------------------------------------------------------------- */ @media (max-width: 640px) { .menu-lateral { width: min(88vw, 360px); } .menu-columnas { gap: 30px; } .menu-columna-titulo { font-size: 1.35rem; } } /* Quien pidió menos movimiento en su sistema abre y cierra el menú de golpe: sigue funcionando igual, sin el deslizamiento. */ @media (prefers-reduced-motion: reduce) { .menu-velo, .menu-lateral, .menu-interruptor:checked ~ .menu-velo, .menu-interruptor:checked ~ .menu-lateral { transition: none; } } /* ====================================================================== H. EL MENÚ SE ABRE AL ARRIMAR EL MOUSE ====================================================================== Pedido de Ramiro: "donde esta el menu q no tengas q hacer click sino q arrimando el click ya se abra como tienen ellos". Sólo donde hay un mouse de verdad. La consulta @media (hover: hover) and (pointer: fine) pregunta exactamente eso: si el aparato puede "pasar por encima" sin tocar, y si el puntero es fino. Un teléfono contesta que no, y ahí el menú sigue abriéndose con un toque, que es como tiene que ser: en una pantalla táctil "pasar por encima" no existe, y un menú que se abre al rozarlo con el dedo se abre todo el tiempo sin que nadie se lo pida. El checkbox NO se va a ningún lado. Sigue siendo el que manda para quien toca, para quien navega con el teclado y para quien tiene el mouse desactivado. Esto es una comodidad que se suma, no un reemplazo. ---------------------------------------------------------------------- */ @media (hover: hover) and (pointer: fine) { /* Se abre con el mouse sobre las tres rayitas, y sigue abierto mientras el mouse esté sobre el panel. Las dos condiciones son necesarias: sin la segunda, el menú se cerraría en el instante en que salís del botón para ir a tocar una categoría. :has() es lo que permite escribirlo. Traducido: "si en algún lugar de la página hay un botón de menú con el mouse encima, entonces...". Sin :has() no se podría, porque el panel no es hijo ni hermano posterior del botón. */ body:has(.menu-boton:hover) .menu-lateral, body:has(.menu-lateral:hover) .menu-lateral { transform: none; opacity: 1; visibility: visible; transition: transform 240ms cubic-bezier(.25, .8, .35, 1), opacity 200ms ease, visibility 0s; } /* Y el botón se marca igual que cuando está abierto por clic, para que se entienda de dónde salió el panel. */ body:has(.menu-boton:hover) .menu-boton { background: var(--marca); color: #fff; } /* LA DEMORA AL CERRAR, que es lo que hace que esto se sienta bien. Entre el botón y el panel hay un tramo de encabezado por el que el mouse tiene que pasar. Durante ese viaje no está ni sobre el botón ni sobre el panel, así que el menú se cerraría en la cara del cliente. Con 260ms de demora, ese viaje entra cómodo: si el mouse llega al panel a tiempo, la regla de arriba vuelve a aplicarse y el menú nunca llegó a empezar a cerrarse. Y si el cliente de verdad se fue, un cuarto de segundo no se nota. Ojo que la demora va sólo del lado de CERRAR: abrir es instantáneo. */ .menu-lateral { transition-delay: 260ms; } body:has(.menu-boton:hover) .menu-lateral, body:has(.menu-lateral:hover) .menu-lateral { transition-delay: 0s; } /* Con el mouse el velo oscuro sobra: el panel se abre y se cierra solo con el movimiento, no hace falta apagar la página detrás ni ofrecer un lugar para hacer clic y cerrar. Se lo deja sólo para el caso en que lo abrieron con un clic o con el teclado. */ body:has(.menu-boton:hover) .menu-velo, body:has(.menu-lateral:hover) .menu-velo { opacity: 0; visibility: hidden; } .menu-interruptor:checked ~ .menu-velo { opacity: 1; visibility: visible; } }