/* ========================================================== MARCA - lo unico visual que cambia entre un cliente y otro. Esta es la version del restaurante de demostracion: rojo y blanco, a proposito distinta del blanco y negro con verde de Prensao'. Si las dos se vieran igual, la plantilla no probaria nada. Se carga DESPUES de estilos.css: lo de aqui pisa lo de alla. ========================================================== */ /* Bebas Neue, licencia SIL OFL: se puede usar en un trabajo que se cobra, sin pagar nada y sin pedir permiso. Esa es la razon de que este aqui y no una fuente de prueba. */ @font-face{ font-family:"Bebas"; src:url(BebasNeue-Bold.woff2) format("woff2"); font-weight:400 700;font-style:normal;font-display:swap; } :root{ /* --- colores: verde oscuro y blanco --- Un solo color de marca para todo: pie, pantalla de carga, logo, botones, carrito, pedido y seguimiento. Con texto blanco encima da 14 de contraste. (--red se llama asi por historia: es "el color de la marca", sea cual sea.) */ --accion:#21503D; /* agregar, pagar */ --red:#21503D; /* fondo del pie: la marca, a pantalla completa */ --sepbg:#21503D; /* fondo del separador */ --bg:#FAF6EE; /* fondo de la pagina: blanco crema, no blanco puro */ --ink:#111111; /* tinta: textos y titulos en negro; el azul es para botones */ --mut:#6B6B6B; /* texto secundario */ --line:#E8E8E8; /* filetes */ /* --- tipografias --- */ --disp:"Bebas","Arial Narrow",Arial,sans-serif; --txt:Arial,Helvetica,sans-serif; --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* El logotipo ya no se declara aqui: va incrustado en el HTML. Para cambiarlo, se reemplaza logo.svg y se corre nuevo-cliente.py. */ } /* ========================================================== PESO DE LOS TEXTOS La plantilla engorda titulos, pestanas y precios con un trazo (-webkit-text-stroke) porque las fuentes de Prensao' traen un solo peso y ese trazo era la unica forma de darles mancha. Aqui no hace falta: el texto sale en la fuente del sistema, que ya tiene negrita de verdad, y trazo + negrita lo dejaba grueso de mas. Se quita el trazo y se baja un punto el peso. ========================================================== */ .stit,.cat-tx,.cat-tab.on .cat-tx,.cp-item.on,.tpre,.tdto, .tsello b,.cats-menu{-webkit-text-stroke:0} .stit{font-weight:600} /* los titulares grandes (portada, carrusel y 'que hacemos') conservan la negrita reforzada de la plantilla: peso 600 + trazo */ .forma-tit b{font-weight:600} .cat-tx{font-weight:500} /* activa e inactiva igual: se distinguen por color y raya */ .tpre{font-weight:600} .foot h3,.comunidad h3{font-weight:600} .cats-menu{font-weight:600;font-size:15px} /* ========================================================== TIPOGRAFIA DE LA CARTA La plantilla pide primero Realgar y NHaas, las fuentes de Prensao'. Aqui no estan y ademas son de prueba, asi que se saca de la pila todo lo que no sea la fuente del sistema: el navegador ya no pasa por nombres que no existen ni puede toparse con una copia instalada en el computador. El interletrado negativo estaba medido para Realgar, que es una letra ancha; en la fuente del sistema apretaba de mas y los titulos se veian deformados. Se deja casi neutro. ========================================================== */ :root{--sis:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif} .carta,.hoja{--nh2:var(--sis);--nhb:var(--sis)} .hoja,.cats-menu,.cp-item{font-family:var(--sis)} .stit{letter-spacing:-.01em} .vit-tit{letter-spacing:-.015em} .forma-tit{letter-spacing:-.015em} .cat-tx{letter-spacing:0} .tpre{letter-spacing:-.01em} /* la raya de la pestana activa, mas fina */ .cat-linea{height:2px} /* pantalla de carga: el rojo de la marca con el logo en blanco, igual que el pie. Asi la pagina abre y cierra con el mismo color. */ .boot{background:var(--red)} .bootlogo{color:#fff} /* ========================================================== COLOR DE LA PAGINA DETRAS DE TODO Safari en el iPhone pinta la franja de la hora (arriba) y la barra de botones (abajo) con el color de fondo de la pagina. La plantilla lo trae en negro; aqui va en el rojo de la marca para que esas dos franjas salgan rojas y no negras. Efecto secundario conocido: en visores del computador que achican la pagina puede asomar una linea roja de 1 px en el borde. En el celular, a tamano real, no aparece. ========================================================== */ html,body{background:var(--red)} /* la etiqueta amarilla de descuento en las tarjetas va en negrita */ .tdto{font-weight:700} /* ========================================================== LOCALES (despues del menu) Mismo titular que el carrusel (fuente del sistema, 600 + trazo, ~25px) y cajas bajitas y a lo ancho: minimalismo, nada de bloques gordos. ========================================================== */ .locales{max-width:var(--ancho);margin:0 auto;padding:0 var(--gut);font-family:var(--sis);color:var(--ink)} .carta{padding-bottom:0} /* mismo aire que de la barra de categorias al primer titulo (.seccion padding-top), menos lo que ya deja la ultima linea de texto de la grilla */ .locales{padding-top:calc(clamp(24px,7.6vw,32px) + 5px);padding-bottom:clamp(28px,7vw,38px)} .lc-gps{display:flex;align-items:center;gap:9px;width:100%;min-height:42px;margin:0;padding:0 14px; border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink); font:500 14px/1 var(--sis);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent} .lc-gps svg{width:18px;height:18px;flex:none;color:var(--red)} .lc-gps.listo{background:var(--bg);border-color:var(--red);color:var(--red)} .lc-gps:disabled{opacity:.7} .lc-lista{display:grid;gap:10px;margin-top:12px} .lc-tar{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:13px 13px 13px 15px;background:var(--bg)} .lc-info{flex:1;min-width:0} .lc-tar.cerca{border-color:var(--red)} .lc-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .lc-tar h3{margin:0;font-size:15.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink)} .lc-km{flex:none;font-size:11.5px;font-weight:600;color:var(--mut)} .lc-dir{margin:3px 0 0;font-size:13px;line-height:1.35;color:var(--ink)} .lc-hor{display:grid;grid-template-columns:auto 1fr;gap:1px 12px;margin:6px 0 0;font-size:12.5px;line-height:1.4;color:var(--mut)} .lc-hor dt,.lc-hor dd{margin:0} .lc-hor dd{color:var(--ink);font-variant-numeric:tabular-nums} .lc-ir{flex:none;display:grid;place-items:center;width:40px;height:40px;margin-right:-6px; color:var(--red);-webkit-tap-highlight-color:transparent; transition:transform .18s cubic-bezier(.2,.7,.3,1)} .lc-ir:active{transform:scale(.88)} .lc-ir svg{width:28px;height:28px} /* ========================================================== PERSONALIZAR, dentro de la ficha del producto ========================================================== */ .hop{display:flex;align-items:center;gap:12px;min-height:48px;border-top:1px solid rgba(0,0,0,.09);cursor:pointer; -webkit-tap-highlight-color:transparent} .hop:first-of-type{border-top:0} .hgsub + .hop{border-top:0} .hop input{position:absolute;opacity:0;pointer-events:none} .hmarca{flex:none;width:22px;height:22px;border-radius:50%;border:1.6px solid #C9C9C9;display:grid;place-items:center; color:transparent;transition:background-color .15s ease,border-color .15s ease} .hmarca.cuad{border-radius:50%} /* todos redondos: un solo gesto */ .hmarca svg{width:13px;height:13px} .hop input:checked + .hmarca{background:var(--accion);border-color:var(--accion);color:#fff} .hop input:focus-visible + .hmarca{outline:2px solid var(--accion);outline-offset:2px} .hnomop{flex:1;font-size:14px;color:var(--ink)} .hop em{font-style:normal;font-weight:600;font-size:13.5px;color:var(--ink);font-variant-numeric:tabular-nums} .hgrupo:has(.hop){padding-bottom:10px} /* ========================================================== UN COLOR PARA TODO La plantilla pinta en negro lo seleccionado y los botones llenos del pedido, el seguimiento y el carrito. Aqui van con el color de la marca. ========================================================== */ body.pedido{--linea:var(--accion)} .op:has(input:checked) .marca,.sello .tic,.btn.lleno, .etapa.hecha:not(:last-child)::before,.vit-punto.on{background:var(--accion)} .btn{border-color:var(--accion)} .btn.vacio2{color:var(--accion)} .etapa.hecha .pt{background:var(--accion);border-color:var(--accion)} .etapa.ahora .pt{border-color:var(--accion);box-shadow:inset 0 0 0 3px var(--caja),inset 0 0 0 10px var(--accion)} .campos input:focus,.campos textarea:focus{border-color:var(--accion)} .car-qty button,.cupon button{color:var(--accion)} /* ========================================================== PEDIDO DESDE LA MESA (QR) ========================================================== */ .op[hidden]{display:none} .mesa-aviso{margin:0;padding:10px var(--gut);background:var(--accion);color:#fff; font:500 13px/1.3 var(--sis);text-align:center;text-transform:uppercase;letter-spacing:.05em} .mesa-aviso[hidden]{display:none} .mesa-aviso b{font-weight:700} /* ========================================================== FINAL DEL PIE: "Hecho con MESA" es lo ultimo. Debajo solo el mismo aire que tiene encima (y la franja segura del iPhone). La barra del carrito se esconde sobre el pie, asi que no hace falta dejarle hueco. ========================================================== */ .page.concarrito{padding-bottom:0} .foot{padding-bottom:0} .legal .mesa{padding-bottom:calc(clamp(22px,6vw,28px) + env(safe-area-inset-bottom,0px))} /* carrusel alargado: casi formato historia (9:16 seria 0.56; aqui 0.6), un poco mas angosto para que se asomen las tarjetas de los lados */ .vitrina{--vit-w:min(74vw,330px)} .vit-card{aspect-ratio:3/5} /* carrusel: solo el titulo, mas pequeno, y todo el bloque mas junto */ .vit-tx span{display:none} .vit-tx b{font-size:clamp(20px,6vw,23px)} .vitrina{padding-top:clamp(20px,5.4vw,26px)} .vit-sub{margin-top:5px} .vit-pista{margin-top:clamp(14px,3.8vw,18px)} .vit-puntos{margin-top:clamp(10px,2.8vw,12px)} /* logo con tope: en computador el 27% del ancho lo volvia gigante */ .lock .wm{width:min(27%,110px)} /* quitar ingredientes: tachado lo que se desmarca */ .hop input[data-lleva]:not(:checked) ~ .hnomop{text-decoration:line-through;color:var(--mut)} /* mas pedidos y % de gusto (cifras de demo) */ .hgusto svg{flex:none;width:12px;height:12px;color:var(--accion)} .hgusto{margin:10px 0 0;display:flex;align-items:center;gap:6px;font:400 13px/1.3 var(--sis);color:var(--mut)} .hgusto[hidden]{display:none} .hgusto svg{width:14px;height:14px} .hgusto b{color:var(--ink);font-weight:600} /* etiqueta de la foto: pastilla verde con texto blanco, abajo a la izquierda */ .ttop{position:absolute;left:7px;bottom:7px;z-index:2;display:inline-flex;align-items:center;gap:4px; max-width:calc(100% - 14px);padding:6px 10px;border-radius:999px;background:var(--accion);color:#fff; font:600 12.5px/1 var(--sis);letter-spacing:-.01em;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.18)} .ttop b{font-size:14px;font-weight:800} .ttop svg{flex:none;width:13px;height:13px} /* ventanas abiertas (producto, carrito, menu): sin velo oscuro, la pagina de atras se ve normal */ .velo,.velo.on,.velocar,.velocar.on,.cats-velo,.cats-velo.on{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none} /* calificacion al recibir el pedido */ .calif{padding:18px 16px} .calif[hidden]{display:none} .calif-tit{margin:0;font-size:16px;font-weight:700} .calif-sub{margin:4px 0 10px;font-size:13px;color:var(--mut)} .calif-fila{display:flex;align-items:center;gap:8px;padding:10px 0;border-top:1px solid rgba(0,0,0,.08)} .calif-fila span{flex:1;font-size:14px} .calif-fila button{width:40px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--bg); color:var(--mut);display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent} .calif-fila button svg{width:17px;height:17px} .calif-fila button.abajo svg{transform:scaleY(-1)} .calif-fila button.on{background:var(--accion);border-color:var(--accion);color:#fff} .calif .btn{margin-top:12px;width:100%} .calif .btn:disabled{opacity:.45} .calif-ok{margin:0;font-size:14px;font-weight:600;text-align:center;color:var(--accion)} /* Safari (iOS 26) ya no usa theme-color: pinta la barra de arriba y la de abajo con el color de fondo del elemento fijo que toque cada borde. La portada es fija y tenia fondo negro, por eso salian negras. Dos franjas fijas de 1px con el color de la marca, una arriba y otra abajo, hacen que las dos barras sean siempre de ese color, en toda la pagina. */ .hero{background:var(--red)} /* sin sombra negra arriba de la portada: Safari mezclaba ese negro con el verde de la barra de arriba. El logo ya lleva su propia sombra. */ .hero::after{background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 55%,rgba(0,0,0,.45) 100%)} /* carrusel: sin la sombra gris que unia las tarjetas */ .vit-card.en{box-shadow:none} /* medios de pago: los tres en un renglon, con el mismo circulo de seleccion que "Entrega", arriba a la derecha para que quepa */ .opts:has(input[name=pago]){grid-template-columns:repeat(3,1fr);gap:8px} /* mismo borde en todas (el color cambia, el grosor no) para que el texto no se corra ni medio pixel al elegir: todo queda a 12px del borde */ .opts:has(input[name=pago]) .op, .opts:has(input[name=pago]) .op:has(input:checked){justify-content:flex-end;min-height:72px; border-width:1.4px;padding:29.6px 10.6px 10.6px 10.6px} .opts:has(input[name=pago]) .op .marca{top:10.6px;right:10.6px;transform:none;width:18px;height:18px} .opts:has(input[name=pago]) .op .marca svg{width:10px;height:10px} /* logo pequeno: cuadro blanco solido, sin sombra */ .lock .wm::before{box-shadow:none} .nota-pago{margin:12px 2px 0;font:400 13px/1.35 var(--sis);color:var(--mut)} .nota-pago[hidden]{display:none} /* seguimiento: pago no confirmado */ .etapa.fallo .pt{border-color:#B3261E;box-shadow:inset 0 0 0 3px var(--caja),inset 0 0 0 10px #B3261E} .etapa.fallo .tx b{color:#B3261E} /* barra del carrito: verde solido, sin halo */ .barrapedido .caja{box-shadow:none} /* cabecera: barra verde completa, de lado a lado, con el mismo verde del pie y el logo blanco. Fija siempre igual: ya no se agranda sobre el hero ni cambia al bajar. Tambien le da a Safari el verde para su barra. */ .lock,.lock.solido{background:var(--red);color:#fff;filter:none;box-shadow:none; padding:calc(14px + env(safe-area-inset-top,0px)) var(--pad) 14px; pointer-events:auto;transition:none} .lock .wm,.lock.solido .wm{transform:none;transition:none} .lock .wm::before,.lock.solido .wm::before{display:none} /* logo: ola continua que recorre las letras, en la cabecera y en la pantalla de carga. El SVG va volteado (scale 1 -1), por eso subir es translateY positivo. */ .lock .wm svg,.bootlogo svg{overflow:visible} .ola{animation:ola 1.6s cubic-bezier(.3,.7,.3,1) infinite} @keyframes ola{ 0%,56%,100%{transform:translateY(0)} 18%{transform:translateY(120px)} 37%{transform:translateY(-14px)} } @media(prefers-reduced-motion:reduce){.ola{animation:none}} /* cabecera: logo a la izquierda, "seguir mi pedido" (moto) a la derecha */ .lock,.lock.solido{display:flex;align-items:center;justify-content:space-between} .lock-seguir{flex:none;display:grid;place-items:center;width:40px;height:40px; margin:-8px -8px -8px 0;color:#fff;-webkit-tap-highlight-color:transparent} .lock-seguir svg{width:34px;height:auto;display:block} .lock-seguir:active{opacity:.7} /* sello "hecho con MESA" al final de las demas paginas */ .mesa-sello{padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px)); text-align:center;line-height:0;color:var(--mut,#6B6B6B)} .mesa-sello a,.mesa-sello span{display:inline-block;color:inherit} .mesa-sello svg{display:block;height:12px;width:auto} /* en el pedido el body ya deja el hueco de la barra de pagar: el sello solo necesita un respiro. En las otras pantallas no hay barra. */ body.pedido.p-pedido .mesa-sello{padding-bottom:8px} body.pedido:not(.p-pedido){padding-bottom:0} /* cabecera: sobre la portada no tiene fondo (la foto se ve entera) y el logo va blanco; al bajar al contenido aparece el verde de la marca con el logo blanco, con un fundido corto. El tamano no cambia. */ .lock,.lock.solido{background:transparent;color:#fff;isolation:isolate} /* el verde no aparece de golpe: baja desde el borde de arriba como una cortina y se recoge al volver a la portada. Solo transform: va fluido. */ .lock::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--red); transform:scaleY(0);transform-origin:50% 0; transition:transform .42s cubic-bezier(.22,.8,.24,1)} .lock.solido::after{transform:scaleY(1)} @media(prefers-reduced-motion:reduce){.lock::after{transition:none}} /* portada sin velos: la foto se ve tal cual */ .hero::after{display:none} .hero{background:var(--red)} /* foto del hero: corrida a la izquierda para que se vea la hamburguesa completa en el celular sin perder la papa con salsa */ /* la portada es la imagen y nada mas: ocupa todo el ancho y el alto que le toque por su propia proporcion, sin recortes, sin margenes y sin el efecto de quedarse fija mientras el contenido sube. Se ve igual que en el archivo original, en cualquier pantalla. */ .hero{position:relative;top:auto;height:auto;min-height:0;overflow:visible; background:var(--red);line-height:0} .hero .med{position:static;inset:auto;width:100%;height:auto;transform:none; object-fit:fill;display:block} /* barra del carrito: la accion a la izquierda y el total a la derecha, con el mismo aire a los dos lados, en una pastilla mas alta que llena el ancho con el margen de la pagina */ .barrapedido{padding:0 12px calc(12px + env(safe-area-inset-bottom,0px))} .barrapedido .caja{display:flex;align-items:center;justify-content:space-between; max-width:560px;height:56px;padding:0 22px;box-sizing:border-box;border-radius:22px} .barrapedido .bpn{display:none} .barrapedido .accion{font-size:14px;letter-spacing:.06em;line-height:1} .barrapedido .plata{font-size:16px;line-height:1} /* la hoja del carrito y la barra conviven como un solo sistema: mismo ancho, mismas esquinas, el texto a la misma distancia del borde y 10 px de aire entre las dos. Sin sombra: la separa el velo de atras. */ .carrito{left:12px;right:12px;max-width:560px;border-radius:22px; bottom:calc(12px + env(safe-area-inset-bottom,0px) + 56px + 10px); border:0;box-shadow:none} .car-cab{padding:18px 22px 14px} .car-lineas{padding:4px 22px 16px} /* barra del carrito pegada al borde de abajo, de lado a lado, como el header: mismo verde, sin esquinas, el texto alineado con el logo. La franja de la rayita del iPhone tambien va en verde. */ .barrapedido,html.abierta .barrapedido{padding:0;background:none} .barrapedido .caja{max-width:none;border-radius:0;border:0;box-sizing:border-box; height:calc(56px + env(safe-area-inset-bottom,0px)); padding:0 var(--pad) env(safe-area-inset-bottom,0px)} .barrapedido:active .caja{transform:none} .barrapedido:active .accion,.barrapedido:active .plata{opacity:.75} /* la hoja del carrito sube desde abajo y se apoya justo sobre la barra */ .carrito{left:0;right:0;max-width:none;margin:0;border-radius:22px 22px 0 0; bottom:calc(56px + env(safe-area-inset-bottom,0px))} .car-cab{padding-left:var(--pad);padding-right:var(--pad)} .car-lineas{padding-left:var(--pad);padding-right:var(--pad)} /* barra: sin rendija abajo (la barra baja 1 px bajo el borde y el propio enlace lleva el verde) y los dos textos del mismo tamano, centrados en el alto de la barra y sobre la misma linea */ .barrapedido,html.abierta .barrapedido{display:block;bottom:-1px;background:var(--accion)} .barrapedido .caja{height:calc(57px + env(safe-area-inset-bottom,0px)); padding:0 var(--pad) calc(1px + env(safe-area-inset-bottom,0px));align-items:center} .barrapedido .accion,.barrapedido .plata{font-size:15px;font-weight:600;line-height:1; display:block} .barrapedido .accion{letter-spacing:.06em} .barrapedido .plata{letter-spacing:-.01em} /* la hoja del carrito se despega del fondo con una sombra suave hacia arriba, sin borde: se lee como una capa encima de la pagina */ .carrito{box-shadow:0 -12px 36px rgba(0,0,0,.14),0 -1px 0 rgba(0,0,0,.05)} /* el mismo crema en la pagina del pedido (tarjetas y fondo) */ body.pedido{--caja:#FAF6EE;--suave:#FAF6EE} /* el parrafo de "Carne, fuego y pan": un poco mas grande y cortado a tres cuartos del ancho, para que no vaya de lado a lado */ .forma-tx{font-size:14.5px;line-height:1.3;max-width:min(75%,34ch)} /* sombra suave bajo la cabecera verde: separa lo de abajo sin pesar. Va en la cortina, asi aparece y desaparece con ella. */ .lock.solido::after{box-shadow:0 6px 18px rgba(0,0,0,.10)} /* mientras se ve la portada, la barra del carrito se esconde */ body.enportada .barrapedido{transform:translateY(140%);pointer-events:none} html.abierta body.enportada .barrapedido{transform:none;pointer-events:auto} /* ---- barra del carrito: pastilla flotante ---- Deja de ir pegada al borde: flota sobre el contenido con el mismo margen a los dos lados, esquinas redondas y una sombra neutra. La hoja del carrito hace juego y se apoya encima. */ .barrapedido,html.abierta .barrapedido{bottom:0;padding:0 14px calc(14px + env(safe-area-inset-bottom,0px));background:none} .barrapedido .caja{max-width:520px;margin:0 auto;border-radius:999px; height:54px;padding:0 22px;box-shadow:0 10px 30px rgba(0,0,0,.18)} .barrapedido:active .caja{transform:scale(.99)} .carrito{left:14px;right:14px;max-width:520px;margin:0 auto;border-radius:22px; bottom:calc(54px + 14px + 10px + env(safe-area-inset-bottom,0px)); box-shadow:0 -12px 36px rgba(0,0,0,.14),0 -1px 0 rgba(0,0,0,.05)} .car-cab{padding-left:20px;padding-right:20px} .car-lineas{padding-left:20px;padding-right:20px} /* ---- la valla: aviso de entrada a pantalla completa ---- El fondo deja ver la pagina detras. Se cierra tocando donde sea. */ .valla{position:fixed;inset:0;z-index:200;display:grid;place-items:center; padding:26px 22px calc(26px + env(safe-area-inset-bottom,0px)); background:rgba(18,18,18,.5);opacity:0;transition:opacity .26s ease; -webkit-tap-highlight-color:transparent;cursor:pointer} .valla.on{opacity:1} .valla[hidden]{display:none} .valla figure{margin:0;position:relative;width:min(100%,360px);max-height:100%; transform:translateY(14px) scale(.97);transition:transform .32s cubic-bezier(.2,.8,.3,1)} .valla.on figure{transform:none} .valla img{display:block;width:100%;height:auto;max-height:78vh;object-fit:cover; border-radius:18px} .valla-x{position:absolute;top:10px;right:10px;width:34px;height:34px;padding:0;border:0; border-radius:999px;background:rgba(20,20,20,.55);color:#fff;display:grid;place-items:center; cursor:pointer;-webkit-tap-highlight-color:transparent} .valla-x svg{width:16px;height:16px} html.convalla,html.convalla body{overflow:hidden} @media(prefers-reduced-motion:reduce){.valla,.valla figure{transition:none}} /* panel: el boton de sonido apagado se ve apagado */ .pl-salir#btnSon.apagado{opacity:.55} /* la portada viene en varios tamanos (): el celular baja el que le sirve. El envoltorio no debe estorbar la maqueta. */ .hero picture{display:block;line-height:0} /* ---- vitrina en acordeon ---- Una tarjeta abierta y las demas como cintas al lado. Lo que se anima es cuanto crece cada una, no su ancho en pixeles: asi el navegador no tiene que recalcular toda la maqueta en cada cuadro y va fluido en el telefono. */ .vit-pista{overflow:visible;scroll-snap-type:none;-webkit-overflow-scrolling:auto; padding-inline:var(--gut);gap:clamp(8px,2.4vw,12px); height:clamp(360px,53vh,490px)} /* las cerradas quedan apagadas: la que manda es la abierta */ .vit-card{flex:1 1 0;min-width:0;height:100%;aspect-ratio:auto;opacity:.32; flex-grow:.4;scroll-snap-align:none; transition:flex-grow .55s cubic-bezier(.2,.8,.24,1),opacity .4s ease} .vit-card.en{flex-grow:3.4;opacity:1} .vit-card:active{transform:none} /* el texto solo en la abierta, y entra despues de que la tarjeta crece */ .vit-tx{opacity:0;transform:translateY(10px); transition:opacity .3s ease .12s,transform .4s cubic-bezier(.2,.8,.24,1) .12s} .vit-card.en .vit-tx{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .vit-card,.vit-tx{transition:none} } /* sin titulo, la vitrina ya no necesita tanto aire arriba: arranca pegada a la portada */ /* el mismo aire arriba y abajo del carrusel: lo que hay entre la portada y las tarjetas es igual a lo que hay entre las tarjetas y "QUE HACEMOS" */ .vitrina{padding-top:clamp(16px,5vw,22px)} .vit-pista{margin-top:0} /* ---- los botones de personalizar, en forma de hamburguesa ---- El circulo de siempre se cambia por la silueta: contorno gris cuando esta apagado, hamburguesa maciza en verde cuando esta elegido. Va como mascara, no como imagen de fondo, asi el color sigue saliendo del CSS y cambia solo si el cliente cambia el verde de su marca. */ .hmarca,.hmarca.cuad{width:26px;height:24px;border:0;border-radius:0;background:#C6C6C6; -webkit-mask:var(--bur) center/contain no-repeat; mask:var(--bur) center/contain no-repeat; --bur:url('data:image/svg+xml;utf8,')} .hop input:checked + .hmarca{background:var(--accion);--bur:url('data:image/svg+xml;utf8,')} .hmarca svg{display:none} .hop input:focus-visible + .hmarca{outline:2px solid var(--accion);outline-offset:3px}