/* ══════════════════════════════════════════════════════════════════════ YAMERO EN COMPUTADORA — la app del cliente como una página completa ══════════════════════════════════════════════════════════════════════ El dueño lo pidió el 14 de septiembre y aprobó los renders antes de que se tocara nada: en una computadora, yamero.mx es una página normal —cabecera arriba, rejillas, el carrito a la derecha— y se pide desde ahí. En el teléfono y dentro de la app (APK/IPA) todo sigue igual. 🔴 TODAS LAS REGLAS EMPIEZAN POR `html.escritorio`. Esa clase la pone el script del de app/index.html, solo con la pantalla ancha (≥ 1024 px) y NUNCA dentro de Capacitor. Una regla suelta aquí le cambiaría la app a todos los teléfonos sin que nadie lo note en la computadora donde se escribió. `npm run check:pantallas` lo vigila. ⚠️ Lo que solo existe en computadora lleva `.solo-escritorio`, y en el teléfono se esconde con UNA regla, la de abajo. ⚠️ Las envolturas nuevas del HTML (`.portada-banda`, `.n-tienda`, `.cot-lado`, `.m-lado`) son cajas SIN estilo en el teléfono: están para que la computadora acomode columnas, y no mueven un píxel de la app. `prueba-escritorio` lo comprueba. ══════════════════════════════════════════════════════════════════════ */ html:not(.escritorio) .solo-escritorio { display: none !important; } /* ── 1 · La página se desplaza entera, como cualquier sitio ──────────── */ /* En el teléfono se desplaza `.pantalla` dentro de un marco fijo (ver yamero.css). En computadora eso deja la cabecera y el pie fuera y la rueda del ratón se atora en cajas: aquí se desplaza el documento. */ html.escritorio body.marco { height: auto; min-height: 100%; overflow: visible; } html.escritorio body.marco .app { height: auto; min-height: calc(100dvh - 72px); max-width: none; } html.escritorio body.marco .pantalla { overflow: visible; min-height: 0; } html.escritorio .pantalla { width: 100%; max-width: 720px; margin: 0 auto; box-sizing: border-box; padding: 32px 32px 72px; } html.escritorio body.marco .pantalla:has(> .encabezado:first-child) { padding-top: 32px; } html.escritorio body.con-nav .pantalla { padding-bottom: 72px; } /* ⚠️ Por id y no con una clase en la
: `prueba-pantallas` busca las pantallas por `class="pantalla" id="p-…"` exacto. */ html.escritorio #p-negocio, html.escritorio #p-cotizacion, html.escritorio #p-mandado { max-width: 1280px; } html.escritorio .barra-nav { display: none !important; } /* Leaflet reparte z-index de 400 a 1000: sin esto un mapa pasa por encima de la cabecera pegada al desplazarse (regla 10). */ html.escritorio .leaflet-container { isolation: isolate; } /* La cabecera de cada pantalla deja de pegarse arriba —arriba ya está la de la página— y queda como título, con su flecha. */ html.escritorio body.marco .pantalla > .encabezado:first-child { position: static; margin: 0 0 24px; padding: 0; border: 0; background: none; gap: 12px; } html.escritorio .pantalla > .encabezado .titulo { font-size: 24px; letter-spacing: -.3px; } /* Los botones de confirmar que en el teléfono flotan abajo, aquí van en su sitio: con el ratón no hace falta tenerlos bajo el pulgar. */ html.escritorio .barra-abajo { position: static; z-index: auto; padding: 24px 0 0; border: 0; background: none; } html.escritorio .barra-abajo > .interior { max-width: none; } /* ── 2 · La cabecera de la página ─────────────────────────────────────── */ /* ⚠️ z-index 50: encima de la barra de confirmar (30) y DEBAJO de la hoja del rastreo (55/56) y del mapa de escoger un punto (60), que tapan la ventana entera. */ html.escritorio .cab-escritorio { position: sticky; top: 0; z-index: 50; background: var(--fondo); border-bottom: 1px solid var(--linea); } html.escritorio .cab-escritorio .cont { max-width: 1280px; margin: 0 auto; padding: 0 32px; height: 72px; box-sizing: border-box; display: flex; align-items: center; gap: 16px; } html.escritorio .cab-logo { display: flex; align-items: center; gap: 10px; flex: none; padding: 0; background: none; border: 0; cursor: pointer; font-family: inherit; color: var(--tinta); } html.escritorio .cab-logo img { height: 26px; width: auto; display: block; } html.escritorio .cab-dir { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; max-width: 280px; padding: 7px 14px 7px 12px; border-radius: 99px; border: 1px solid var(--linea); background: var(--fondo); color: var(--tinta); font-family: inherit; text-align: left; line-height: 1.15; cursor: pointer; } html.escritorio .cab-dir svg { flex: none; } html.escritorio .cab-dir > span { min-width: 0; } html.escritorio .cab-dir small { display: block; font-size: 13px; color: var(--gris); } html.escritorio .cab-dir .t { display: block; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html.escritorio .cab-busca, html.escritorio .n-busca-escritorio { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; box-sizing: border-box; border-radius: 99px; background: var(--papel); border: 1px solid var(--linea); color: var(--gris); } html.escritorio .cab-busca { flex: 1; min-width: 160px; max-width: 520px; } html.escritorio .cab-busca:focus-within, html.escritorio .n-busca-escritorio:focus-within { border-color: var(--acento-tinta); } /* 🔴 Todo lo de la regla base del campo, fuera: la base le da relleno de 16 px y esquinas, y dentro de la pastilla se sale — lo mismo que le pasó al buscador de la barra de abajo del teléfono. */ html.escritorio .cab-busca input, html.escritorio .n-busca-escritorio input { flex: 1; min-width: 0; width: auto; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; outline: none; box-shadow: none; font-family: inherit; font-size: 15px; color: var(--tinta); -webkit-appearance: none; appearance: none; } html.escritorio .cab-der { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; } html.escritorio .cab-pastilla { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 99px; border: 1px solid var(--linea); background: var(--fondo); color: var(--tinta); font-family: inherit; font-size: 15px; font-weight: 700; white-space: nowrap; cursor: pointer; } /* El acento SOLO de relleno, con la tinta de encima (`--sobre-fuego`). */ html.escritorio .cab-pastilla.acento { background: var(--fuego); border-color: var(--fuego); color: var(--sobre-fuego); } html.escritorio .cab-pastilla.on { border-color: var(--tinta); } html.escritorio .cab-ico { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linea); background: var(--fondo); color: var(--tinta); display: grid; place-items: center; cursor: pointer; } html.escritorio .cab-ico .n { position: absolute; top: -5px; right: -5px; min-width: 21px; height: 21px; padding: 0 5px; box-sizing: border-box; border-radius: 99px; border: 2px solid var(--fondo); background: var(--amarillo); color: var(--tinta); font-size: 12px; font-weight: 700; display: grid; place-items: center; } html.escritorio .cab-escritorio button:focus-visible, html.escritorio .pie-escritorio .enlace:focus-visible, html.escritorio .n-cats button:focus-visible, html.escritorio .carro-paso button:focus-visible { outline: 2px solid var(--acento-tinta); outline-offset: 2px; } /* ── 3 · El pie ───────────────────────────────────────────────────────── */ html.escritorio .pie-escritorio { background: var(--papel); border-top: 1px solid var(--linea); } html.escritorio .pie-escritorio .cols { max-width: 1280px; margin: 0 auto; padding: 40px 32px 32px; box-sizing: border-box; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; } html.escritorio .pie-escritorio p { color: var(--gris); font-size: 14px; line-height: 1.5; margin: 12px 0 0; max-width: 34ch; } html.escritorio .pie-escritorio h4 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); margin: 6px 0 12px; } html.escritorio .pie-escritorio .enlace { display: block; margin: 0 0 10px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--tinta); text-decoration: none; font-family: inherit; font-size: 15px; text-align: left; } html.escritorio .pie-escritorio .enlace:hover { text-decoration: underline; } html.escritorio .pie-escritorio .legal { max-width: 1280px; margin: 0 auto; padding: 16px 32px 24px; box-sizing: border-box; display: flex; justify-content: space-between; gap: 24px; font-size: 13px; color: var(--gris); } /* El aviso de «agregado», abajo al centro y encima de todo (regla 10 ter). */ html.escritorio .aviso-escritorio { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 80; display: flex; align-items: center; gap: 16px; padding: 12px 12px 12px 18px; border-radius: 14px; background: var(--tinta); color: #fff; font-size: 15px; box-shadow: 0 10px 30px rgba(27, 26, 25, .25); } html.escritorio .aviso-escritorio button { border: 0; border-radius: 99px; padding: 8px 14px; cursor: pointer; /* El aviso ya es negro: su botón va en amarillo, o no se ve. */ background: var(--amarillo); color: var(--tinta); font-family: inherit; font-size: 14px; font-weight: 700; } /* ── 4 · La portada ───────────────────────────────────────────────────── */ html.escritorio #p-inicio { max-width: none; padding: 0 0 32px; display: flex; flex-direction: column; } html.escritorio #p-inicio > :not(.portada-banda) { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; box-sizing: border-box; } /* El repartidor está parado en la caja esperando esa respuesta: arriba del todo, también encima de la banda. */ html.escritorio #banda-sobrecosto { order: -1; margin-top: 24px; } /* La dirección ya está en la cabecera de la página, el mandado libre en la banda, y los accesos redondos repetían las cintas. */ html.escritorio #p-inicio > .cabecera-portada, html.escritorio .buscar-portada, html.escritorio .portada-cobertura, /* Los atajos (`.dos-servicios`) volvieron el 25 de septiembre como tarjetas ilustradas, ver «El diseño del 25 de septiembre» al final. */ html.escritorio #accesos, html.escritorio #bloque-cerca { display: none !important; } html.escritorio .portada-banda { background: var(--papel); border-bottom: 1px solid var(--linea); } html.escritorio .portada-banda > .cont { max-width: 1280px; margin: 0 auto; padding: 40px 32px; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; } html.escritorio .pb-principal h1 { font-size: 32px; letter-spacing: -.6px; line-height: 1.15; text-wrap: balance; } html.escritorio .pb-sub { font-size: 17px; color: var(--carbon); margin: 8px 0 0; max-width: 60ch; line-height: 1.45; } html.escritorio .pb-redactor { margin-top: 24px; background: var(--fondo); border: 1px solid var(--linea); border-radius: 18px; padding: 18px 22px; box-shadow: 0 1px 3px rgba(27, 26, 25, .05); } html.escritorio .pb-redactor:focus-within { border-color: var(--acento-tinta); } html.escritorio .pb-redactor .arriba { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } html.escritorio .pb-redactor .marca-ml { background: var(--fuego); color: var(--sobre-fuego); font-weight: 700; font-size: 14px; border-radius: 8px; padding: 5px 10px; } html.escritorio .pb-redactor .que { color: var(--gris); font-size: 14px; } html.escritorio .pb-redactor textarea { display: block; width: 100%; min-height: 96px; margin: 10px 0 12px; padding: 4px 0; box-sizing: border-box; border: 0; border-radius: 0; background: none; box-shadow: none; outline: none; resize: vertical; font-family: inherit; font-size: 18px; line-height: 1.5; color: var(--tinta); } html.escritorio .pb-redactor .abajo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--linea); padding-top: 14px; } html.escritorio .pb-chips { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; } html.escritorio .pb-chips button { height: 38px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--linea); background: var(--fondo); color: var(--tinta); font-family: inherit; font-size: 14px; cursor: pointer; } html.escritorio .pb-chips button:hover { border-color: var(--acento-tinta); } html.escritorio .pb-redactor .btn { width: auto; flex: none; border-radius: 99px; padding: 11px 22px; } html.escritorio .pb-lado { display: flex; flex-direction: column; gap: 20px; } /* ── La banda a mitad y mitad ────────────────────────────────────────── El dueño, el 19 de septiembre: «pon mitad y mitad ahí». El mandado libre a la izquierda y YameroCar a la derecha: son las dos cosas que YAMERO hace y nadie más, y ninguna manda sobre la otra. ⚠️ Solo con el servicio encendido (`.mitades`, lo pone `pintarBotonViaje`). Apagado, la banda vuelve a su forma de siempre: 380 px para el gancho de registro. */ /* 🔴 LOS DOS ALINEADOS, arriba Y abajo. El dueño lo pidió así el 19 de septiembre —«los 2 alineados»— y con la columna de la izquierda llevando también el titular, las dos tarjetas empezaban a alturas distintas: la verde pegada al techo y la del mandado 120 px más abajo. Dos cosas que valen lo mismo no pueden empezar a alturas distintas. El titular pasa a ocupar el ancho ENTERO y las dos tarjetas bajan a una fila compartida. Se hace con `display: contents` en la columna izquierda —sus hijos pasan a ser casillas del mismo grid— en vez de mover el HTML: el teléfono usa esa misma caja y ahí sí tiene que seguir siendo una columna. ⚠️ `row-gap: 0`: el hueco de 32 px separa las COLUMNAS, y aplicado también entre renglones abría un abismo entre el titular y su frase. Lo de arriba lleva sus propios márgenes. */ html.escritorio .portada-banda > .cont.mitades { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr; column-gap: 32px; row-gap: 0; align-items: stretch; } html.escritorio .cont.mitades > .pb-principal { display: contents; } html.escritorio .cont.mitades > .pb-principal > h1 { grid-column: 1 / -1; grid-row: 1; } html.escritorio .cont.mitades > .pb-principal > .pb-sub { grid-column: 1 / -1; grid-row: 2; } html.escritorio .cont.mitades > .pb-principal > .pb-redactor { grid-column: 1; grid-row: 3; } html.escritorio .cont.mitades > .pb-lado { grid-column: 2; grid-row: 3; margin-top: 24px; } /* Y la tarjeta se estira hasta el fondo de su fila, para que las dos acaben en la misma línea aunque digan cosas de distinto largo. */ html.escritorio .cont.mitades .pb-car { flex: 1; justify-content: center; } /* 🔴 Y SI LA COLUMNA DE AL LADO QUEDA VACÍA, NO SE DEJA EL HUECO. Sin YameroCar y sin gancho —alguien con su cuenta y sin beneficios— eran 380 px en blanco a la derecha del redactor. Es el mismo fallo que la franja verde estirada, al revés: un espacio reservado para algo que no está se lee como que falta algo, no como que sobra sitio. */ html.escritorio .portada-banda > .cont:not(:has(.pb-lado > *:not([hidden]))) { grid-template-columns: minmax(0, 1fr); } /* ── YameroCar en la banda ───────────────────────────────────────────── Tarjeta de columna, no la franja del teléfono: aquí tiene media banda de alto y puede decir lo que es sin apretarse. ⚠️ Verde con letra TINTA, como en el teléfono: el amarillo sobre verde da 1.9:1 y desaparece. */ html.escritorio .pb-car { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; background: var(--verde); color: var(--tinta); border: 0; border-radius: 18px; padding: 24px; width: 100%; font-family: inherit; text-align: left; cursor: pointer; } html.escritorio .pb-car .pbc-i { line-height: 0; } html.escritorio .pb-car .pbc-i svg { display: block; } html.escritorio .pb-car .pbc-t { font-size: 22px; font-weight: 800; letter-spacing: -.2px; } html.escritorio .pb-car .pbc-s { font-size: 15px; line-height: 1.45; opacity: .78; max-width: 34ch; } /* El botón dentro de la tarjeta: el negro de la casa, como «Ver el precio» del redactor de al lado. Los dos lados ofrecen lo mismo. */ html.escritorio .pb-car .pbc-b { margin-top: 6px; background: var(--fuego); color: var(--sobre-fuego); border-radius: 99px; padding: 11px 22px; font-size: 15px; font-weight: 800; } html.escritorio .pb-car:hover .pbc-b { filter: brightness(1.18); } html.escritorio #banda-cuenta .aviso { margin-top: 0 !important; padding: 22px; border-radius: 18px; font-size: 15px; line-height: 1.45; } html.escritorio #banda-cuenta .aviso > div:first-child { font-size: 18px; } html.escritorio #banda-cuenta .aviso > div:nth-child(2) { font-size: 15px !important; margin-top: 6px !important; } html.escritorio #banda-cuenta .btn { margin-top: 16px !important; min-height: 48px; border-radius: 99px; font-size: 16px; } html.escritorio .pb-ya { margin: 12px 0 0; font-size: 14px; text-align: center; } html.escritorio .pb-ya button { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 700; color: inherit; text-decoration: underline; } html.escritorio .pb-pasos { list-style: none; margin: 0; padding: 0 4px; counter-reset: paso; display: grid; gap: 12px; } html.escritorio .pb-pasos li { counter-increment: paso; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; font-size: 15px; line-height: 1.4; color: var(--carbon); } html.escritorio .pb-pasos li::before { content: counter(paso); width: 26px; height: 26px; border-radius: 50%; background: var(--fondo); border: 1px solid var(--linea); color: var(--tinta); font-size: 13px; font-weight: 700; display: grid; place-items: center; } html.escritorio .pb-pasos b { color: var(--tinta); } /* Las cintas y los filtros, cada uno en su renglón. */ html.escritorio .portada-filtros-fila { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 28px; } html.escritorio .portada-filtros-fila > .tira { overflow: visible; margin: 0 !important; padding: 0; gap: 8px; flex-wrap: wrap; scroll-snap-type: none; } /* 🔴 LAS CATEGORÍAS, A RENGLÓN COMPLETO. Con veintiuna pastillas y los filtros de ordenar peleando por el mismo renglón, la fila quedaba partida en dos y los tres filtros colgando en medio. Ocupando el ancho entero, las categorías caen donde caigan y «Ordenar» empieza limpio abajo. */ html.escritorio #cintas { flex: 1 0 100%; } html.escritorio .orden-rot { margin-left: auto; color: var(--gris); font-size: 13px; } /* 🔴 EL EMOJI SE VE TAMBIÉN AQUÍ. Estaba escondido a propósito (`display: none`) desde cuando había CINCO categorías y la cinta era un renglón corto: ahí el emoji era adorno. Con veintiuna es al revés — es lo que deja encontrar «Pollería» en un muro de pastillas iguales, y sin él la versión de computadora se ve más pobre que la del teléfono. */ html.escritorio .cinta .em { display: inline; font-size: 15px; } html.escritorio .cinta { padding: 0 15px; font-size: 14px; font-weight: 400; } html.escritorio .cinta.elegida { font-weight: 700; } html.escritorio .filtro { min-height: 40px; padding: 0 16px; font-size: 14px; } /* Los negocios en rejilla, y lo más pedido con su «+». */ html.escritorio #secciones .bloque-cab, html.escritorio #mas-pedidos .bloque-cab { margin: 36px 0 16px; justify-content: flex-start; align-items: baseline; gap: 12px; } html.escritorio #secciones .bloque-cab h3, html.escritorio #mas-pedidos .bloque-cab h3 { font-size: 22px; letter-spacing: -.3px; } html.escritorio #secciones .tira { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px 20px; overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; } html.escritorio #secciones .tarjeta-local { width: auto; } html.escritorio #secciones .tarjeta-local .foto { height: auto; aspect-ratio: 16 / 10; } html.escritorio .rejilla-productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 24px 20px; } html.escritorio #mas-pedidos .producto, html.escritorio #n-menu .producto { width: auto; } html.escritorio #mas-pedidos .producto .foto, html.escritorio #n-menu .producto .foto { width: auto; height: auto; aspect-ratio: 1; } html.escritorio #mas-pedidos .producto .mas, html.escritorio #n-menu .producto .mas { width: 38px; height: 38px; font-size: 22px; } html.escritorio #mas-pedidos .producto .nombre, html.escritorio #n-menu .producto .nombre { font-size: 14px; color: var(--tinta); } html.escritorio #mas-pedidos .producto { cursor: pointer; } html.escritorio #mas-pedidos .producto .de { font-size: 13px; color: var(--gris); margin-top: 2px; } /* ── 5 · La vitrina de un negocio ─────────────────────────────────────── */ html.escritorio #p-negocio { padding-top: 20px !important; } html.escritorio .miga-escritorio { display: flex; align-items: center; gap: 6px; padding: 0 0 14px; font-size: 13px; color: var(--gris); } html.escritorio .miga-escritorio button { background: none; border: 0; padding: 0; font: inherit; color: var(--carbon); cursor: pointer; } html.escritorio .miga-escritorio button:hover { text-decoration: underline; } html.escritorio .vitrina-cabecera { margin: 0; } html.escritorio .vitrina-portada { height: 250px; border-radius: 18px; } html.escritorio .vitrina-portada::after, html.escritorio .vitrina-acciones, html.escritorio .vitrina-cabecera .buscar, html.escritorio #n-rubros, html.escritorio #n-barra { display: none !important; } html.escritorio .vitrina-datos { margin: 0; padding: 18px 0 0 136px; border-radius: 0; background: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: center; } html.escritorio .vitrina-datos .logo { position: absolute; left: 24px; top: -46px; width: 96px; height: 96px; margin: 0; border-radius: 22px; background: #fff; font-size: 36px; box-shadow: 0 6px 18px rgba(27, 26, 25, .12); } /* ⚠️ `.n-titulo` Y NO `> h1`: desde que «Abierto» va PEGADO al nombre, el h1 vive dentro de esa fila y dejó de ser hijo directo — estos selectores se quedaban sin aplicar y el nombre volvía a 26 px en la computadora. Es el gemelo de siempre: al mover algo de sitio en el HTML, hay una hoja de estilos que lo estaba buscando donde estaba. */ html.escritorio .vitrina-datos > .n-titulo, html.escritorio #n-datos, html.escritorio #n-cierra, html.escritorio .n-desc { grid-column: 1; } html.escritorio .vitrina-datos .n-titulo h1 { font-size: 32px; letter-spacing: -.6px; } /* 🔴 Y QUE NO SE ESTIRE. Aquí `.vitrina-datos` es una REJILLA, y una celda se estira al ancho de su columna por omisión: el `inline-flex` del aviso no servía de nada y «Abre mañana a las 3:00» sacaba un recuadro de 941 píxeles. Medido. Con `justify-self: start` la celda mide lo que mide su contenido, que es lo que pidió el dueño. */ html.escritorio #n-cierra { justify-self: start; } html.escritorio #n-datos { font-size: 14px; margin-top: 6px; } html.escritorio .n-desc { color: var(--carbon); font-size: 15px; margin-top: 4px; line-height: 1.45; } /* ══════════════════════════════════════════════════════════════════════ LAS TRES CIFRAS: DEBAJO DEL NOMBRE, SIN RECUADRO Y MAS CHICAS ══════════════════════════════════════════════════════════════════════ Estaban en su propia columna, con recuadro y la cifra a 16 px: las tres juntas ocupaban tanto como el nombre del negocio y empujaban el menu —que es a lo que se viene— fuera de la primera pantalla. Ahora son un renglon debajo de la descripcion, separadas por una linea fina. */ html.escritorio .vitrina-caja { grid-column: 1; grid-row: auto; margin: 14px 0 0; border: 0; gap: 24px; } html.escritorio .vitrina-caja > div { flex: 0 0 auto; padding: 0; min-width: 0; text-align: left; } html.escritorio .vitrina-caja > div + div { border-left: 1px solid var(--linea); padding-left: 24px; } html.escritorio .vitrina-caja b { font-size: 15px; line-height: 1.25; } html.escritorio .vitrina-caja span { font-size: 13px; } html.escritorio .n-acciones { grid-column: 2; grid-row: 1 / span 5; display: flex; flex-direction: column; gap: 8px; } html.escritorio .n-acciones .cab-pastilla.on { background: var(--papel); } html.escritorio .n-tienda { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; margin-top: 36px; align-items: start; } /* ══════════════════════════════════════════════════════════════════════ LAS CATEGORIAS, PEGADAS BAJO LA CABECERA ══════════════════════════════════════════════════════════════════════ Eran una columna de 200 px a la izquierda. Se fue: se comia el ancho de la carta, obligaba a mirar a un lado y no existia en el telefono. 🔴 LOS 73 px SON LA CABECERA, MEDIDOS, no elegidos: `.cab-escritorio .cont` tiene 72 px de alto y 1 px de borde. Si esa cabecera cambia de alto, este numero cambia con ella — y el `scroll-margin-top` de abajo Y el hueco que deja para los titulos NO se escribe aqui: lo mide `ajustarHuecoBarra()` de esta misma barra, para que no haya dos numeros que se puedan separar (regla 10 bis). */ html.escritorio .n-cats { position: sticky; top: 73px; z-index: 4; padding: 12px 0; margin-bottom: 4px; background: var(--fondo); border-bottom: 1px solid var(--linea); } html.escritorio #n-menu .vitrina-titulo { margin: 32px 0 16px; } html.escritorio #n-menu .vitrina-titulo h2 { font-size: 22px; letter-spacing: -.3px; } html.escritorio .ver-todos-fila { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 700; color: var(--carbon); } html.escritorio #n-menu .vitrina-fila { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 24px 20px; overflow: visible; margin: 0; padding: 0; } /* Las filas que son CORTES del catálogo —los más pedidos, los ahorros— enseñan un renglón; la carta completa va debajo. Sin esto la vitrina repetía cada producto hasta cuatro veces seguidas. Cuántos se ven lo decide el script (`de-sobra`), no un número escrito también aquí. */ html.escritorio #n-menu:not(.buscando) .corte:not(.abierta) .de-sobra { display: none; } html.escritorio .n-carro { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; box-sizing: border-box; background: var(--fondo); border: 1px solid var(--linea); border-radius: 18px; padding: 20px 20px 18px; box-shadow: 0 10px 30px rgba(27, 26, 25, .07); } html.escritorio .n-carro h3 { font-size: 20px; } html.escritorio .n-carro > .nota { margin: 2px 0 6px; } html.escritorio .carro-renglon { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linea); font-size: 15px; } html.escritorio .carro-paso { display: flex; align-items: center; border: 1px solid var(--linea); border-radius: 99px; } html.escritorio .carro-paso button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; cursor: pointer; font-family: inherit; font-size: 17px; color: var(--carbon); } html.escritorio .carro-paso button:hover { background: var(--papel); } html.escritorio .carro-paso b { min-width: 16px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; } html.escritorio .carro-imp { font-weight: 700; font-variant-numeric: tabular-nums; } html.escritorio .n-carro .cuenta { margin-top: 14px; } html.escritorio .n-carro .aviso { margin-top: 12px; } html.escritorio .n-carro .carro-continuar { margin-top: 14px; justify-content: space-between; border-radius: 99px; padding: 14px 20px; } html.escritorio .carro-pie { text-align: center; margin: 10px 0 0; } html.escritorio .carro-grupo { display: block; width: 100%; margin-top: 6px; padding: 6px 0; background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 700; color: var(--carbon); } /* ── 6 · Confirmar y el mandado: el formulario y, a la derecha, el resumen ── */ html.escritorio #p-cotizacion, html.escritorio #p-mandado { display: grid; grid-template-columns: minmax(0, 1fr) 400px; column-gap: 40px; align-items: start; } html.escritorio #p-cotizacion > *, html.escritorio #p-mandado > * { grid-column: 1; min-width: 0; } html.escritorio #p-cotizacion > .encabezado, html.escritorio #p-viaje > .encabezado, html.escritorio #p-mandado > .encabezado { display: none; } /* ── Pedir un viaje, en computadora ─────────────────────────────────── 🔴 UNA COLUMNA, NO TODO EL ANCHO. Son dos direcciones: estiradas a 1000 px quedaban dos renglones de texto perdidos en medio de la pantalla, con el botón de «Ver el precio» cruzándola entera. Un formulario de dos campos se lee en una columna, como el de cualquier sitio donde se pide algo. ⚠️ El tope va en `#v-puntos` y en lo de abajo, NO en `.pantalla`: esa caja la comparten todas las pantallas y estrecharla aquí estrecha también el catálogo y los negocios. */ html.escritorio #p-viaje #v-puntos, html.escritorio #p-viaje > .nota { max-width: 640px; } /* Las tres promesas del servicio se fueron: su sitio lo ocupan el mapa y el precio, que es lo que de verdad hace falta ver antes de pedir. */ /* 🔴 Y LAS PASTILLAS DEJAN DE CORTARSE. `.fila-scroll` se desplaza con el dedo, que en un teléfono se hace solo; con un ratón, lo que se ve es una sugerencia partida por la mitad contra el borde de la tarjeta y sin forma evidente de llegar a la siguiente. Aquí bajan de renglón. */ html.escritorio #p-viaje .fila-scroll { flex-wrap: wrap; overflow: visible; row-gap: 8px; } /* El botón, del tamaño de su texto y a la derecha de la columna — el mismo sitio y la misma forma que «Ver el precio» del redactor del mandado, que es la acción gemela. La barra de abajo aquí no flota. */ html.escritorio #p-viaje .barra-abajo { position: static; background: none; border: 0; padding: 0; box-shadow: none; max-width: 640px; margin-top: 22px; } html.escritorio #p-viaje .barra-abajo .interior { padding: 0; display: flex; justify-content: flex-end; } html.escritorio #p-viaje .barra-abajo .btn { width: auto; flex: none; border-radius: 99px; padding: 13px 26px; } html.escritorio #p-cotizacion > .titulo-escritorio, html.escritorio #p-mandado > .titulo-escritorio { grid-column: 1 / -1; } /* Una sola caja en la columna de la derecha que abarca todos los renglones de la izquierda: así se queda a la vista mientras se llena el resto. ⚠️ 60 renglones y no «los que haya»: la rejilla no cuenta hijos, y con menos renglones que el formulario la caja dejaría de pegarse a medio camino. Los que sobran miden cero. */ html.escritorio #p-cotizacion > .cot-lado, html.escritorio #p-mandado > .m-lado { grid-column: 2; grid-row: 2 / span 60; position: sticky; top: 96px; box-sizing: border-box; background: var(--fondo); border: 1px solid var(--linea); border-radius: 18px; padding: 20px; box-shadow: 0 10px 30px rgba(27, 26, 25, .07); } html.escritorio .titulo-escritorio h1 { font-size: 32px; letter-spacing: -.6px; margin-top: 10px; } html.escritorio .titulo-escritorio p { margin: 6px 0 0; } html.escritorio .volver-escritorio { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 700; color: var(--carbon); } html.escritorio #p-cotizacion > h3, html.escritorio #p-mandado > h3, html.escritorio #m-casa-e > h3 { font-size: 20px; margin: 32px 0 12px !important; } html.escritorio #c-mapa { height: 280px; } html.escritorio .cot-dir-caja { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 12px; border: 1px solid var(--linea); border-radius: 14px; } html.escritorio .cot-dir-caja svg { flex: none; color: var(--carbon); } html.escritorio .cot-dir-caja b { display: block; font-size: 16px; } html.escritorio .cot-dir-caja span { color: var(--gris); font-size: 14px; } /* Con un viaje dentro, la caja deja de ser un renglón con su pin y pasa a ser el trayecto de dos marcas. Cambia la caja, no se hace otra: es la misma «dónde es esto» de siempre, contestada para un viaje. */ html.escritorio .cot-dir-caja:has(.v-caja) { display: block; padding: 16px 18px; } html.escritorio .cot-dir-caja .v-rot { color: var(--gris); } html.escritorio .cot-dir-caja .v-dir { font-size: 16px; } html.escritorio #c-resumen .tarjeta { border: 0; border-radius: 0; background: none; box-shadow: none; padding: 0 0 12px; } html.escritorio #c-resumen .cot-oculta { display: none; } html.escritorio .cot-items { margin-top: 10px; } html.escritorio .cot-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 8px 0; border-top: 1px solid var(--linea); font-size: 15px; } html.escritorio .cot-item .x { color: var(--carbon); font-weight: 700; } html.escritorio .cot-item .imp { font-weight: 700; font-variant-numeric: tabular-nums; } html.escritorio #c-cuenta { margin: 6px 0 0 !important; } html.escritorio .cot-lado .barra-abajo, html.escritorio .m-lado .barra-abajo { padding-top: 16px; } html.escritorio .cot-lado .btn-primario, html.escritorio .m-lado .btn-primario { border-radius: 99px; } html.escritorio .m-vista h3 { font-size: 20px; margin: 0 0 12px; } html.escritorio .m-mapa { height: 300px; border-radius: 14px; overflow: hidden; background: #EFEAE4; } html.escritorio .m-vista .nota { margin: 10px 0 0; } html.escritorio .m-vista .cuenta { margin-top: 12px; } /* El tamaño lo pone el script con `LADO_PIN_MANDADO`, el mismo número con el que Leaflet los coloca (regla 10 bis). Carbón y tinta: el verde claro no se ve sobre el mapa. */ html.escritorio .pin-num, html.escritorio .pin-casa { display: grid; place-items: center; box-sizing: border-box; border-radius: 50%; border: 2px solid #fff; font-family: inherit; font-size: 13px; font-weight: 700; color: #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, .3); } html.escritorio .pin-num { background: var(--carbon); } html.escritorio .pin-casa { background: var(--tinta); } /* ── 7 · Entre 1024 y 1200 px no caben tres columnas ─────────────────── */ @media (max-width: 1199px) { html.escritorio .n-tienda { grid-template-columns: minmax(0, 1fr) 320px; } /* La barra de categorias NO se esconde en pantallas estrechas: es lo que sustituyo a la columna, y sin ella no queda forma de saltar de seccion. */ html.escritorio .cab-dir { max-width: 200px; } html.escritorio .portada-banda > .cont { grid-template-columns: minmax(0, 1fr) 320px; } html.escritorio #p-cotizacion, html.escritorio #p-mandado { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 32px; } } /* 🔴 EN COMPUTADORA, EL LOGO YA ESTÁ ARRIBA. La cabecera de la página lo lleva a la izquierda, a tres centímetros: repetirlo dentro del formulario es decir el nombre dos veces en la misma pantalla, que es justo lo que el dueño pidió no hacer («no pongas cosas de más»). La identidad en esta pantalla la sigue dando el color —la pestaña elegida en amarillo y las casillas del código—, que sí falta aquí. */ html.escritorio #p-cuenta .entrar-cab { display: none; } /* ══════════════════════════════════════════════════════════════════════ EL CARRITO QUE SE DESPLIEGA — computadora ══════════════════════════════════════════════════════════════════════ «El carrito en web debe desplegarse de donde está y mostrar todo lo que tengas, que no te lleve a la tienda» (19 de septiembre). ⚠️ `position: fixed` y no `absolute`: la cabecera es pegajosa y el panel tiene que quedarse donde el botón, pase lo que pase con el desplazamiento de la página. ⚠️ z-index 90: por encima de la cabecera (50) y de la barra de abajo, y por debajo del aviso flotante (9000), que avisa de cosas que pasan mientras el panel está abierto. */ html.escritorio .carro-panel { position: fixed; top: 68px; right: 96px; width: 392px; max-width: calc(100vw - 32px); z-index: 90; background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: 0 18px 48px rgba(27, 26, 25, .18); display: flex; flex-direction: column; max-height: min(70vh, 560px); /* 🔴 SIN `overflow: hidden` AQUÍ, y no es un descuido: con él, la puntita que amarra el panel al botón —que vive en `::before`, 7 px por encima del borde— se recortaba entera y el panel quedaba flotando suelto. Lo que sí tiene que recortar es la lista, y eso lo hace `.cp-scroll`. Las esquinas las redondean la cabecera y el pie, que son los que tocan los bordes. */ overflow: visible; } /* La puntita que lo amarra al botón: sin ella el panel se lee como una ventana suelta y no como «esto sale de ahí». */ html.escritorio .carro-panel::before { content: ''; position: absolute; top: -7px; right: var(--cp-pico, 34px); width: 13px; height: 13px; background: var(--fondo); border-left: 1px solid var(--linea); border-top: 1px solid var(--linea); transform: rotate(45deg); } html.escritorio .carro-panel .cp-cab { display: flex; align-items: baseline; gap: var(--e1); padding: var(--e2) var(--e2) 12px; border-bottom: 1px solid var(--linea); border-radius: var(--r-l) var(--r-l) 0 0; background: var(--fondo); } html.escritorio .carro-panel .cp-cab b { font-size: 17px; } html.escritorio .carro-panel .cp-cab span { font-size: var(--t-chica); color: var(--gris); } html.escritorio .carro-panel .cp-vaciar { margin-left: auto; background: none; border: 0; font-family: inherit; font-size: var(--t-chica); color: var(--gris); text-decoration: underline; cursor: pointer; } /* 🔴 Y UN DEGRADADO ABAJO PARA DECIR QUE HAY MÁS. Sin él, la última cosa del carrito queda cortada a media altura contra el pie y se lee como un fallo de pintado, no como «sigue hacia abajo». Se apaga al llegar al final (`scroll-timeline` no hace falta: el degradado va sobre el contenido, que al final es el hueco del último renglón). */ html.escritorio .carro-panel .cp-scroll { overflow: auto; flex: 1; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%); } /* Sin nada que recortar —carrito vacío, o cabe entero— no hay degradado que valga: taparía el último renglón sin motivo. */ html.escritorio .carro-panel .cp-scroll:not(:has(.cp-item)) { -webkit-mask-image: none; mask-image: none; } html.escritorio .carro-panel .cp-scroll[aria-busy="true"] { opacity: .55; } /* El nombre de la tienda se queda arriba mientras se recorren sus cosas: con dos tiendas, perderlo de vista es no saber de quién es lo que se está mirando. */ html.escritorio .carro-panel .cp-tienda { display: flex; align-items: center; gap: 9px; padding: 11px var(--e2); background: var(--papel); border-bottom: 1px solid var(--linea); position: sticky; top: 0; } html.escritorio .carro-panel .cp-tienda b { flex: 1; font-size: 14px; } html.escritorio .carro-panel .cp-tienda span { font-size: 13px; color: var(--gris); } html.escritorio .carro-panel .cp-item { display: flex; gap: 11px; align-items: center; padding: 12px var(--e2); border-bottom: 1px solid var(--linea); } html.escritorio .carro-panel .cp-item .mini { width: 44px; height: 44px; border-radius: 10px; flex: none; object-fit: cover; background: var(--papel); } html.escritorio .carro-panel .cp-item .tx { flex: 1; min-width: 0; } html.escritorio .carro-panel .cp-item .tx b { display: block; font-size: 14px; font-weight: 700; } html.escritorio .carro-panel .cp-item .tx small { display: block; font-size: 13px; color: var(--gris); margin-top: 1px; } html.escritorio .carro-panel .cp-cont { display: flex; align-items: center; gap: var(--e1); flex: none; } /* 28 px y no 44: dentro de un panel de 392 px con precio al lado, un control de 44 empuja el importe fuera. Se toca con ratón, no con el pulgar — en el teléfono este panel no existe. */ html.escritorio .carro-panel .cp-cont button { width: 28px; height: 28px; border-radius: 99px; border: 1px solid var(--linea); background: var(--fondo); color: var(--tinta); font-size: 15px; line-height: 1; font-family: inherit; cursor: pointer; } html.escritorio .carro-panel .cp-cont button:hover { border-color: var(--carbon); } html.escritorio .carro-panel .cp-cont .q { font-weight: 800; font-size: 14px; min-width: 14px; text-align: center; } html.escritorio .carro-panel .cp-imp { font-weight: 800; font-size: 14px; min-width: 56px; text-align: right; } html.escritorio .carro-panel .cp-cerrado { background: var(--alerta-bg); color: var(--alerta-tx); font-size: var(--t-chica); padding: 11px var(--e2); line-height: 1.4; } html.escritorio .carro-panel .cp-pie { border-top: 1px solid var(--linea); padding: var(--e2); background: var(--fondo); border-radius: 0 0 var(--r-l) var(--r-l); } /* Vacío, el pie no existe y quien toca el borde de abajo es la propia lista: se le redondea a ella. */ html.escritorio .carro-panel .cp-scroll:last-child { border-radius: 0 0 var(--r-l) var(--r-l); } html.escritorio .carro-panel .cp-linea { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; } html.escritorio .carro-panel .cp-linea.sutil { color: var(--gris); font-size: var(--t-chica); } html.escritorio .carro-panel .cp-linea.total { font-size: 17px; font-weight: 800; margin: var(--e1) 0 12px; } html.escritorio .carro-panel .cp-nota { font-size: 13px; color: var(--gris); margin: 0 0 12px; line-height: 1.4; } html.escritorio .carro-panel .cp-pie .btn { width: 100%; } html.escritorio .carro-panel .cp-vacio { padding: 26px 22px; text-align: center; } html.escritorio .carro-panel .cp-vacio .em { font-size: 30px; } html.escritorio .carro-panel .cp-vacio .t { margin: 10px 0 0; font-size: 15px; font-weight: 700; } html.escritorio .carro-panel .cp-vacio .s { margin: 4px 0 0; font-size: var(--t-chica); color: var(--gris); line-height: 1.45; } /* ══════════════════════════════════════════════════════════════════════ EL DISEÑO DEL 25 DE SEPTIEMBRE — renders aprobados por el dueño ══════════════════════════════════════════════════════════════════════ El mismo mundo que el teléfono: la tarjeta negra ilustrada junto al redactor, los atajos con su ilustración, los giros en círculos, las tiendas a cuatro columnas, la franja «Trabaja con YAMERO» al pie; en la tienda, el logo carbón, la caja de tres cifras y la carta en tarjetas de renglón a dos columnas; y el perfil en dos columnas. */ /* ── La tarjeta negra, en la columna de la banda: ilustración arriba ── */ html.escritorio #banda-cuenta .promo-card { margin: 0; display: flex; flex-direction: column-reverse; min-height: 0; border-radius: 20px; } html.escritorio #banda-cuenta .promo-card .trabaja-img { height: 170px; background-position: center 45%; } html.escritorio #banda-cuenta .promo-card .trabaja-txt { padding: 22px 24px 24px; } html.escritorio #banda-cuenta .promo-card h3 { font-size: 22px; letter-spacing: -.2px; } html.escritorio #banda-cuenta .promo-card .promo-p { font-size: 14px; margin-top: 8px; } html.escritorio #banda-cuenta .trabaja-btn { font-size: 15px; padding: 11px 22px; min-height: 44px; } html.escritorio #banda-cuenta .pb-ya { text-align: left; color: #CFCAC5; margin-top: 14px; } html.escritorio #banda-cuenta .pb-ya button { color: var(--amarillo); } /* ── Los atajos: tarjetas de renglón con su ilustración ─────────────── 🔴 El taxi NO va aquí: con YameroCar encendido ya tiene su tarjeta en la banda, a mitad y mitad con el redactor (lo pidió el dueño el 19 de septiembre), y dos puertas al mismo sitio son dos sitios donde buscar. */ html.escritorio .dos-servicios { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 16px; margin: 28px auto 0; } html.escritorio .dos-servicios > #ir-viaje { display: none !important; } html.escritorio .dos-servicios > .atajo-ilus { display: grid; grid-template-columns: 150px 1fr; grid-template-rows: 1fr auto auto 1fr; min-height: 104px; border-radius: 18px; text-align: left; cursor: pointer; transition: background .15s; } html.escritorio .dos-servicios > .atajo-ilus:hover { background: #EFEBE7; } html.escritorio .atajo-ilus .atajo-img { grid-column: 1; grid-row: 1 / -1; height: auto; } html.escritorio .atajo-ilus .atajo-rot { grid-column: 2; grid-row: 2; padding: 0 18px; font-size: 18px; } html.escritorio .atajo-ilus .atajo-sub { display: block; grid-column: 2; grid-row: 3; padding: 3px 18px 0; font-size: 14px; font-weight: 400; color: var(--gris); } /* ── Los giros, en círculos como en el teléfono ─────────────────────── */ html.escritorio #cintas { gap: 18px 10px; } html.escritorio #cintas .cinta { flex-direction: column; min-height: 0; padding: 0; border: 0; background: none; width: 86px; white-space: normal; text-align: center; gap: 8px; font-size: 13px; line-height: 1.2; font-weight: 700; } html.escritorio #cintas .cinta .em, html.escritorio #cintas .cinta[data-cinta="todos"]::before { width: 68px; height: 68px; border-radius: 50%; background: var(--papel); display: grid; place-items: center; font-size: 30px; flex: none; transition: transform .15s; } html.escritorio #cintas .cinta[data-cinta="todos"]::before { content: '🛍️'; } html.escritorio #cintas .cinta:hover .em, html.escritorio #cintas .cinta[data-cinta="todos"]:hover::before { transform: scale(1.06); } html.escritorio #cintas .cinta.elegida { background: none; } html.escritorio #cintas .cinta.elegida .em, html.escritorio #cintas .cinta.elegida[data-cinta="todos"]::before { background: var(--amarillo); } /* ── Las tiendas a cuatro columnas ─────────────────────────────────── */ html.escritorio #secciones .tira { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 32px 24px; } html.escritorio #secciones .tarjeta-local .foto { border-radius: 18px; } /* ── «Trabaja con YAMERO», al pie de la portada ─────────────────────── */ html.escritorio .trabaja-banda { display: grid !important; grid-template-columns: minmax(0, 1fr) 520px; margin-top: 48px; background: var(--carbon); color: #fff; border-radius: 22px; overflow: hidden; padding: 0 !important; max-width: 1216px !important; } html.escritorio .tb-txt { padding: 40px 36px; display: flex; flex-direction: column; justify-content: center; } html.escritorio .trabaja-banda h3 { font-size: 30px; line-height: 1.2; letter-spacing: -.4px; margin: 10px 0 0; color: #fff; max-width: 18ch; text-wrap: balance; } html.escritorio .tb-botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } html.escritorio .tb-b { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border-radius: 99px; border: 1px solid rgba(255,255,255,.28); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; } html.escritorio .tb-b:hover { border-color: #fff; } html.escritorio .tb-b.si { background: var(--amarillo); color: var(--carbon); border-color: var(--amarillo); } html.escritorio .tb-img { background: url('/img/ilus/trabaja.jpg') center 40% / cover; min-height: 230px; } /* ── La tienda: logo carbón y la caja de tres cifras con su recuadro ── */ html.escritorio .vitrina-datos .logo { background: var(--carbon); color: var(--amarillo); border: 4px solid var(--fondo); } html.escritorio .vitrina-caja { justify-self: start; border: 1px solid var(--linea); border-radius: 14px; gap: 0; } html.escritorio .vitrina-caja > div { padding: 8px 20px; } html.escritorio .vitrina-caja > div + div { padding-left: 20px; } /* La carta: tarjetas de renglón a dos columnas, cortes incluidos. El nombre, la descripción y el precio a la izquierda; el dibujo a la derecha. Misma tarjeta (`tarjetaProducto`) que el teléfono. */ html.escritorio #n-menu .vitrina-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } html.escritorio #n-menu .producto { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 136px; box-sizing: border-box; padding: 16px 136px 16px 16px; border: 1px solid var(--linea); border-radius: 16px; transition: border-color .15s, box-shadow .15s; } html.escritorio #n-menu .producto:hover { border-color: #D8D3CE; box-shadow: 0 4px 14px rgba(27,26,25,.06); } html.escritorio #n-menu .producto .foto { position: absolute; top: 16px; right: 16px; width: 104px; height: 104px; aspect-ratio: auto; margin: 0; border-radius: 14px; background: var(--suave); } html.escritorio #n-menu .producto .nombre { order: 1; font-size: 16px; font-weight: 700; min-height: 0; margin: 0; } html.escritorio #n-menu .producto .desc { order: 2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; color: var(--gris); margin-top: 4px; line-height: 1.4; } html.escritorio #n-menu .producto .precio { order: 3; font-size: 15px; margin-top: 10px; } html.escritorio #n-menu .producto .contador { order: 4; } html.escritorio #n-menu .producto .mas { right: 6px; bottom: 6px; width: 32px; height: 32px; font-size: 19px; } html.escritorio #n-menu .producto .oferta { top: 6px; bottom: auto; left: 6px; background: var(--carbon); color: var(--amarillo); border-radius: 8px; font-size: 12px; } /* ── El perfil, en dos columnas (con la sesión abierta) ─────────────── */ html.escritorio #p-cuenta.perfil-dentro { max-width: 1280px; display: grid; grid-template-columns: 420px minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; row-gap: 0; align-items: start; align-content: start; background: var(--fondo); } html.escritorio #p-cuenta.perfil-dentro > .encabezado { display: none; } html.escritorio #p-cuenta.perfil-dentro > #cuenta-dentro { display: contents; } html.escritorio #p-cuenta.perfil-dentro .cred { grid-column: 1; grid-row: 1; margin-top: 0; } html.escritorio #p-cuenta.perfil-dentro #cuenta-dentro > .cred ~ .grupo-p { grid-column: 2; grid-row: 1 / span 2; } html.escritorio #p-cuenta.perfil-dentro #cuenta-dentro > .grupo-p ~ .grupo-p { grid-column: 3; grid-row: 1 / span 2; } html.escritorio #p-cuenta.perfil-dentro #cuenta-dentro > .grupo-p { margin-top: 0; } html.escritorio #p-cuenta.perfil-dentro > .trabaja-card { grid-column: 1; grid-row: 2 / span 3; margin-top: 20px; /* abajo de la credencial, sin esperar a las listas */ display: flex; flex-direction: column-reverse; } html.escritorio #p-cuenta.perfil-dentro > .trabaja-card .trabaja-img { height: 170px; } html.escritorio #p-cuenta.perfil-dentro > .trabaja-card .trabaja-txt { padding: 22px 24px 24px; } html.escritorio #p-cuenta.perfil-dentro > #c-trabaja-puertas { grid-column: 1; grid-row: 5; } html.escritorio #p-cuenta.perfil-dentro > .grupo-p { grid-column: 2 / span 2; grid-row: 3; margin-top: 24px; } html.escritorio #p-cuenta.perfil-dentro > .grupo-p .lista-p { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; border: 0; background: none; } html.escritorio #p-cuenta.perfil-dentro > .grupo-p .lista-p > .rp { border: 1px solid var(--linea); border-radius: 16px; background: var(--fondo); } html.escritorio #p-cuenta.perfil-dentro > .pie-version { grid-column: 2 / span 2; grid-row: 4; text-align: left; }