/* Mapintel — tienda. La identidad sale del propio catálogo en PDF de Rosa: barras coral con el título en blanco, mayúsculas muy espaciadas y mucho aire blanco alrededor. Ese es el gesto de la marca y es el que se repite aquí, en vez de inventarle un estilo nuevo. El coral del PDF (#FF9588) es precioso pero con texto blanco encima da 2,2:1 de contraste y no se lee: por eso hay tres corales —el claro para fondos, uno medio para las barras y uno oscuro para botones y texto—, todos de la misma familia. Escrito primero para celular: casi todo el tráfico llega de WhatsApp. */ :root{ --fondo:#FFF7F4; --sup:#FFFFFF; --tinta:#33292A; --tinta2:#7A6B6A; --tinta3:#A79A99; /* La familia coral. `--marca` es el del PDF. */ --marca:#FF9588; --barra:#EE6A55; --marca-d:#CE4634; --marca-dd:#B03A2A; --marca-suave:#FFECE8; /* Los otros colores del logo: la mariposa es amarilla, azul y verde. */ --amarillo:#FFE564; --azul:#82B1D1; --verde:#8CAF62; --linea:#F1E4E0; --linea2:#E4D2CD; --display:'Outfit',system-ui,sans-serif; --sans:Inter,system-ui,-apple-system,'Segoe UI',sans-serif; --ancho:1180px; --cab:84px; } *{box-sizing:border-box} /* Al llegar al final, el navegador rebota y en ese rebote se ve el fondo de , no el del body: por eso aparecía una franja blanca debajo del pie. Se pinta del azul del pie. Y para que el rebote de arriba tampoco muestre azul sobre la franja de anuncios, esta prolonga su blanco hacia arriba con una sombra —que no la recorta su propio overflow—. */ html{-webkit-text-size-adjust:100%;background:var(--marca-dd)} .anuncio{box-shadow:0 -140px 0 var(--barra)} body{ /* El coral del pie, no el crema: ver #vista justo abajo. */ margin:0;background:var(--marca-dd);color:var(--tinta); font-family:var(--sans);font-size:15px;line-height:1.55; -webkit-font-smoothing:antialiased; overflow-wrap:break-word; } img{max-width:100%;display:block} button,input,textarea,select{font:inherit;color:inherit} a{color:inherit} :focus-visible{outline:2px solid var(--marca);outline-offset:2px} .contenedor{max-width:var(--ancho);margin:0 auto;padding:0 18px} /* El atributo hidden trae display:none del navegador, pero cualquier regla nuestra con display (flex, grid…) le gana por especificidad. Sin esto, el botón de WhatsApp se seguía viendo aunque no hubiera número configurado. */ [hidden]{display:none !important} /* ═══════════════════════════════════════════════════════════════════════════ Cabecera y catálogo. La estructura viene del catálogo de Encanto —radios de 999 px, 4 columnas con 34/22 de separación, foto 4:5, rótulo de 10 px con .14em, botón empujado al fondo con margin-top:auto—, pero la piel es de Mapintel: coral en vez de negro, el sello redondo del logo y el logotipo de pincel recortado del propio sticker de Rosa. ═══════════════════════════════════════════════════════════════════════════ */ /* --------------------------------------------------------------- anuncio -- */ /* En Encanto la franja va sobre fondo claro y el texto en el color de marca. */ .anuncio{background:var(--barra);overflow:hidden; height:30px;display:flex;align-items:center} .anuncio-in{display:flex;white-space:nowrap;animation:correr 20s linear infinite} .anuncio-in span{flex:none;font-size:9.5px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:#fff;padding-right:46px} @keyframes correr{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.anuncio-in{animation:none}} /* -------------------------------------------------------------- cabecera -- */ /* Blanca, como las páginas del catálogo en PDF de Rosa. El coral no se gasta aquí: se guarda para las barras de sección y los botones, que es donde tiene que llamar la atención. Sobre blanco además se leen el sello rosado del logo y el logotipo negro, que sobre coral quedaban lavados. */ .cab{position:sticky;top:0;z-index:300;background:var(--sup); border-bottom:1px solid var(--linea)} .cab-in{max-width:var(--ancho);margin:0 auto;padding:10px 18px 12px;display:flex;flex-wrap:wrap;align-items:center;gap:14px} /* El área de toque llega a 44 px sin mover el icono: el margen negativo se come el relleno que se añade, así que se ve igual y se toca mejor. */ .cab-menu{display:inline-flex;align-items:center;justify-content:center;background:none;border:0; color:var(--tinta);padding:10px;margin:-10px 0 -10px -10px;cursor:pointer} .cab-menu svg{width:24px;height:24px} .marca{display:flex;align-items:center;gap:9px;min-width:0;text-decoration:none;color:var(--tinta)} .marca-logo{width:44px;height:44px;flex:none} /* El reset trae img{max-width:100%}. Aquí el único contenido de .marca son imágenes, así que su ancho dependía del ancho del padre y el del padre del de ellas: el flex resolvía el círculo en cero y la cabecera salía vacía. */ .marca img{max-width:none} /* El logotipo recortado del sticker. Alto fijo y ancho automático para que no se deforme; el de al lado queda solo para lectores de pantalla. */ .marca-firma{height:33px;width:auto;flex:none} .marca-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .nav{display:none} .cab-acts{display:flex;align-items:center;gap:18px;margin-left:auto;flex:none} .ic{display:inline-flex;align-items:center;justify-content:center;color:var(--tinta); background:none;border:0;padding:10px;margin:-10px;cursor:pointer;text-decoration:none} .ic svg{width:23px;height:23px} .ic:hover{color:var(--marca-d)} .ic--carrito{position:relative} .cuenta-carrito{position:absolute;top:2px;right:2px;min-width:17px;height:17px;padding:0 4px; border-radius:9px;background:var(--marca-d);color:#fff;font-size:10px;font-weight:600;line-height:17px;text-align:center} /* ------------------------------------------------------------- carrito --- */ /* En la tarjeta el botón de ver se encoge para dejarle sitio al del carrito. */ /* Agotado se dice donde iba el precio: es la respuesta a la misma pregunta. */ .agotado{color:var(--marca-d);font-weight:500} .tam--no{opacity:.45;cursor:not-allowed} .tam--no span{color:var(--marca-d)} .cat-acciones{display:flex;gap:6px;margin-top:auto;align-items:stretch;padding-bottom:14px} /* El botón de ver cede el ancho justo para el del carrito, y aprieta letra y espaciado para no partirse en dos líneas dentro de la tarjeta angosta. */ .cat-acciones .cat-btn{margin-top:0;align-self:auto;flex:1;min-width:0; padding:9px 8px;font-size:11px;letter-spacing:.4px;white-space:nowrap} .btn-agregar{flex:none;width:38px;border:1px solid var(--marca);border-radius:999px;background:var(--sup); color:var(--marca);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0; transition:background .2s,color .2s} .btn-agregar svg{width:17px;height:17px} .btn-agregar:hover{background:var(--marca-d);color:#fff} .btn-agregar.puesto{background:var(--marca-d);color:#fff} .carrito-lista{max-width:760px;margin:0 auto} .carrito-fila{display:flex;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--linea)} .carrito-fila:first-child{border-top:1px solid var(--linea)} /* La última fila no lleva raya: la pone el total, y si no quedaban dos. */ .carrito-fila:last-child{border-bottom:0} .carrito-fila img{width:64px;height:80px;object-fit:cover;flex:none;background:#F6EAE6} .carrito-txt{flex:1;min-width:0} .carrito-txt b{display:block;font-family:var(--display);font-weight:700;font-size:15px} .carrito-txt span{display:block;font-size:11.5px;color:var(--tinta3);margin-top:2px} .carrito-txt em{display:block;font-style:normal;font-size:13px;margin-top:5px} .carrito-cant{display:flex;align-items:center;gap:2px;flex:none} .carrito-cant button{width:30px;height:30px;border:1px solid var(--linea2);background:var(--sup); cursor:pointer;font-size:15px;line-height:1;color:var(--tinta);padding:0} .carrito-cant span{min-width:26px;text-align:center;font-size:13.5px;font-weight:500} .carrito-quitar{flex:none;background:none;border:0;padding:6px;cursor:pointer;color:var(--tinta3);font-size:16px;line-height:1} .carrito-quitar:hover{color:var(--marca-d)} .carrito-total{display:flex;align-items:baseline;justify-content:space-between;gap:14px; max-width:760px;margin:22px auto 20px;padding-top:18px;border-top:1px solid var(--linea)} .carrito-total .rot{font-size:9.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta3)} .carrito-total .val{font-family:var(--display);font-weight:700;font-size:26px;line-height:1} /* La cuenta del pedido: se ve el envío antes de dar los datos, no después. */ .cuenta{margin:4px 0 10px;padding:14px 0 0;border-top:1px solid var(--linea)} .cuenta div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:5px 0;font-size:13.5px} .cuenta span{color:var(--tinta2)} .cuenta b{font-weight:500} .cuenta-total{margin-top:6px;padding-top:11px !important;border-top:1px solid var(--linea)} .cuenta-total span{color:var(--tinta);font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase} .cuenta-total b{font-family:var(--display);font-weight:700;font-size:22px;line-height:1} /* La clase `.ayuda` solo existe dentro de un campo del formulario; esta nota vive fuera, así que lleva la suya. */ .nota-envio{margin:6px 0 18px;font-size:11.5px;line-height:1.5;color:var(--tinta3)} .carrito-acciones{max-width:420px;margin:0 auto} /* Los productos parecidos van separados de la ficha; sin raya quedaban pegados al pie de la ficha y parecían parte de ella. */ .relacionados{border-top:1px solid var(--linea);margin-top:42px;padding-top:34px} .carrito-acciones .btn + .nota{margin-top:12px} /* El buscador vive dentro de la cabecera, en píldora de crema. */ /* order:3 y base 100 % lo mandan a una segunda línea en celular. */ .cab-buscar{order:3;flex:1 0 100%;min-width:0;padding:10px 0 0} .buscador{display:flex;align-items:center;height:44px;padding:0 18px;border-radius:30px; background:var(--fondo);border:1px solid var(--linea2)} .buscador:focus-within{border-color:var(--marca);background:var(--sup)} .buscador button{background:none;border:0;padding:0;margin-right:13px;color:var(--marca-d); display:inline-flex;cursor:pointer;flex:none} .buscador button svg{width:20px;height:20px} .buscador input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:var(--tinta); /* 16 px es el mínimo: por debajo, Safari en iPhone hace zoom solo al tocar el campo y descuadra la página. */ font-size:16px;appearance:none;-webkit-appearance:none} .buscador input::placeholder{color:var(--tinta3)} .buscador input::-webkit-search-decoration, .buscador input::-webkit-search-cancel-button{-webkit-appearance:none} .menu-movil{background:var(--fondo);border-top:1px solid var(--linea)} .menu-movil a{display:block;padding:14px 18px;color:var(--tinta);text-decoration:none;font-size:12px; font-weight:500;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--linea)} .menu-movil a:last-child{border-bottom:0} .menu-movil a[aria-current="true"]{background:var(--marca-suave);color:var(--marca-dd)} /* -------------------------------------------------------------- catálogo -- */ /* El respiro antes del pie lo pone #vista para todas las pantallas por igual: antes solo lo tenía el catálogo, y la ficha y el formulario terminaban pegados contra el azul del pie. */ /* El crema de la página vive aquí y no en el body: así la zona de la barra inferior de Safari en el iPhone toma el coral del pie y no deja una banda clara al final. */ #vista{background:var(--fondo);padding-bottom:54px} .catalogo{padding:36px 0 0} .cat-hd{text-align:center;margin-bottom:26px} /* En celular estos títulos parten en dos líneas —"Más de Portavasos, pocillos y cajas"— y con line-height:1 las mayúsculas se tocaban. */ .cat-hd h1,.cat-hd h2{margin:0;font-family:var(--display);font-weight:400;font-size:19px;line-height:1.3; letter-spacing:.07em;text-transform:uppercase;color:var(--tinta)} .cat-hd p{margin:14px 0 0;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta2)} .cat-filtros{display:none;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:28px} /* --------------------------------------------------- filtro de categoría -- */ /* En celular manda el desplegable y las píldoras se esconden; en escritorio, al revés. Los dos están siempre en el HTML, así que girar el teléfono no deja al visitante sin filtro. */ .cat-selector{margin:0 0 16px} .cat-selector label{display:block;margin:0 0 7px;font-size:9.5px;font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:var(--tinta3)} .cat-selector select{ width:100%;appearance:none;-webkit-appearance:none; /* 16 px o Safari en iPhone hace zoom solo al tocar el campo. */ font-size:16px;font-family:var(--sans);color:var(--tinta); padding:13px 42px 13px 16px;border:1px solid var(--linea2);border-radius:999px; background:var(--sup) no-repeat right 16px center; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23CE4634' stroke-width='1.8'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E"); background-size:18px} .cat-selector select:focus{outline:none;border-color:var(--marca)} .cat-cuantos{margin:0 0 18px;text-align:center;font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:var(--tinta2)} .cat-filtro{font-family:var(--sans);font-size:11px;letter-spacing:.06em;padding:7px 16px; border-radius:999px;border:1px solid var(--linea2);background:var(--sup);color:var(--tinta); cursor:pointer;transition:background .2s,color .2s,border-color .2s} .cat-filtro:hover{border-color:var(--marca);color:var(--marca-dd)} .cat-filtro[aria-selected="true"]{background:var(--marca-d);border-color:var(--marca-d);color:#fff} .cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 12px} /* Tarjeta con caja de sombra (lo pidió el cliente: "el borde de los bloques"). Lleva las dos cosas —filete y sombra— y a propósito: una tarjeta blanca sobre crema tiene tan poco contraste que la sombra sola, por muy bien hecha que esté, no se ve. El filete dibuja el bloque y la sombra lo levanta. La sombra va en dos capas, una corta y marcada y otra larga y suave: con una sola queda o dura o sucia. Al pasar el ratón sube un pelo. */ .cat-card{display:flex;flex-direction:column;text-align:left; background:var(--sup);border:1px solid var(--linea);border-radius:14px;overflow:hidden; box-shadow:0 1px 3px rgba(90,45,35,.10), 0 10px 24px rgba(90,45,35,.13); transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease} .cat-card:hover{transform:translateY(-3px);border-color:var(--linea2); box-shadow:0 3px 6px rgba(90,45,35,.13), 0 18px 38px rgba(90,45,35,.20)} @media (prefers-reduced-motion:reduce){ .cat-card,.cat-card:hover{transform:none;transition:none} } /* El texto ya no puede ir pegado al borde: ahora hay borde. */ .cat-linea,.cat-nombre,.cat-precio,.cat-acciones{padding-left:14px;padding-right:14px} /* Cuadrada, no 4:5: las fotos del catálogo de Rosa son productos recortados y se generan cuadradas; forzarlas a 4:5 les cortaba un pedazo por los lados. */ .cat-img{display:block;width:100%;aspect-ratio:1/1;overflow:hidden;background:#fff;position:relative} .cat-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .cat-card:hover .cat-img img{transform:scale(1.04)} .cat-linea{margin:13px 0 0;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta3)} /* Sin subrayado: la raya lo hacía parecer un enlace de texto suelto y competía con el botón. La negrita y el medio punto de más lo separan del rótulo de la categoría y del precio, que es lo que se pidió. El subrayado vuelve solo al pasar el ratón, para que siga leyéndose como enlace. */ .cat-nombre{margin:5px 0 0;font-family:var(--sans);font-weight:600;font-size:14.5px;line-height:1.4} .cat-nombre a{color:var(--tinta);text-decoration:none} .cat-nombre a:hover{text-decoration:underline;text-underline-offset:3px} .cat-precio{margin:3px 0 13px;font-size:13px;color:var(--tinta)} /* `auto` empuja el botón al fondo: así quedan alineados aunque unos nombres ocupen una línea y otros dos. */ .cat-btn{margin-top:auto;align-self:stretch;text-align:center; font-size:12px;letter-spacing:1px;background:var(--marca-d);color:#fff;border:0;border-radius:999px; padding:9px 22px;display:inline-block;text-decoration:none;cursor:pointer;transition:opacity .2s} .cat-btn:hover{opacity:.88} .cat-vacio{text-align:center;padding:50px 0;color:var(--tinta2)} .cat-vacio b{display:block;font-family:var(--display);font-weight:700;font-size:18px;color:var(--tinta);margin-bottom:6px} /* ------------------------------------------------------ WhatsApp flotante -- */ .wa-flota{position:fixed;right:16px;bottom:16px;z-index:400;width:56px;height:56px;border-radius:50%; background:#59ce72;display:flex;align-items:center;justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,.25);animation:wa-latido 1.9s infinite} .wa-flota svg{width:32px;height:32px;fill:#fff} @keyframes wa-latido{ 0%{transform:scale(1);box-shadow:0 0 0 0 rgba(89,206,114,.7)} 70%{transform:scale(1.08);box-shadow:0 0 0 18px rgba(89,206,114,0)} 100%{transform:scale(1);box-shadow:0 0 0 0 rgba(89,206,114,0)}} @media (prefers-reduced-motion:reduce){.wa-flota{animation:none}} /* ----------------------------------------------------------------- ficha -- */ .volver{display:inline-flex;align-items:center;gap:9px;background:none;border:0;padding:14px 0;cursor:pointer; font-size:9.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta3)} .volver svg{width:17px;height:17px;color:var(--tinta)} .galeria{margin:0 -18px} .galeria-marco{position:relative} .miniaturas{display:none} /* Sin scroll-behavior:smooth a propósito. Con él, tocar una miniatura marcaba la foto pero no la cambiaba en los entornos donde el desplazamiento animado no corre. Cambiarla de golpe funciona siempre y además se siente más rápido. */ .galeria-tira{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none} .galeria-tira::-webkit-scrollbar{height:0} .galeria-tira figure{margin:0;flex:none;width:100%;aspect-ratio:1/1.15;scroll-snap-align:center; background:#E9D9C9 center/cover no-repeat} .puntos{position:absolute;bottom:13px;left:0;right:0;display:flex;justify-content:center;gap:6px} .puntos i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.14)} .puntos i.on{background:#fff;width:16px;border-radius:3px} .ficha{padding-top:22px} .encima{margin:0 0 9px;font-size:9px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--marca-d)} .ficha h1,.titulo{font-family:var(--display);font-weight:700;font-size:25px;line-height:1.1;margin:0 0 8px} .entrada{margin:0 0 20px;font-size:12.5px;line-height:1.6;color:var(--tinta2)} .variantes{display:flex;gap:7px;margin:0 0 18px;flex-wrap:wrap} .tam{flex:1 1 90px;min-height:46px;border:1px solid var(--linea2);background:var(--sup);cursor:pointer; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 8px} .tam b{font-size:11.5px;font-weight:600} .tam span{font-size:10.5px;color:var(--tinta2)} .tam[aria-pressed="true"]{border-color:var(--marca-d);background:var(--marca-d);color:#fff} .tam[aria-pressed="true"] span{color:rgba(255,255,255,.72)} .precio-fila{display:flex;align-items:baseline;justify-content:space-between;gap:14px; margin:0 0 18px;padding-bottom:18px;border-bottom:1px solid var(--linea)} .precio-fila .rot{font-size:9.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta3)} .precio-fila .val{font-family:var(--display);font-weight:700;font-size:23px;line-height:1} .precio-fila .val--corta{font-size:16px} .datos{margin:0 0 20px;border-top:1px solid var(--linea)} .datos > div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--linea)} .datos dt{margin:0;flex:none;font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta3);line-height:1.5} .datos dd{margin:0;text-align:right;font-size:12.5px;line-height:1.5} .nota{margin:12px 0 0;text-align:center;font-size:11px;line-height:1.55;color:var(--tinta3)} .nota button{background:none;border:0;padding:0;cursor:pointer;color:var(--marca-d);text-decoration:underline;text-underline-offset:2px} /* --------------------------------------------------------------- botones -- */ .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px; border:0;background:var(--marca-d);color:#fff;cursor:pointer; font-size:12.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;padding:0 16px} .btn svg{width:15px;height:15px;flex:none} .btn:disabled{opacity:.55;cursor:progress} .btn--linea{background:var(--sup);color:var(--tinta);border:1px solid var(--tinta)} .btn--claro{background:var(--sup);color:var(--marca);border:1px solid var(--marca)} .btn--claro:hover{background:var(--marca-d);color:#fff} /* Pedir y agregar, uno al lado del otro: en la ficha el principal es pedir. */ .ficha-btns{display:grid;gap:9px} /* Opaco a propósito: flotando sobre la grilla, un botón traslúcido deja ver los textos de las tarjetas por debajo y se lee sucio. */ /* ------------------------------------------------------------ formulario -- */ .campo{margin:0 0 15px} .campo > label{display:block;margin:0 0 8px;font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta3)} .campo input,.campo textarea,.campo select{width:100%;min-height:50px;border:1px solid var(--linea2);background-color:var(--sup); padding:13px 14px;font-size:16px;line-height:1.4} .campo textarea{min-height:84px;resize:vertical} /* El desplegable de departamentos con la flecha dibujada aquí: la del sistema se ve distinta en cada teléfono y rompía la fila con el campo de al lado. */ .campo select{-webkit-appearance:none;appearance:none;border-radius:0;padding-right:34px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231B1D20' stroke-width='1.5'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 11px center;background-size:15px} .campo input:focus,.campo textarea:focus,.campo select:focus{outline:0;border-color:var(--marca)} .campo .ayuda{margin:7px 0 0;font-size:11px;color:var(--tinta3)} .fila2{display:flex;gap:11px;flex-wrap:wrap} .fila2 .campo{flex:1 1 140px} .suelta{position:relative;border:1px dashed var(--linea2);background:var(--sup);min-height:96px; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;cursor:pointer;padding:14px;text-align:center} .suelta svg{width:20px;height:20px;color:var(--marca)} .suelta b{font-size:11.5px;font-weight:500} .suelta span{font-size:10px;color:var(--tinta3)} .suelta input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;min-height:0;padding:0;border:0} .previa{position:relative;border:1px solid var(--linea2);overflow:hidden;background:var(--sup)} .previa img{width:100%;height:170px;object-fit:cover} .previa .barra{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;font-size:10.5px;font-weight:500} .previa .barra button{background:none;border:0;padding:0;cursor:pointer;color:var(--marca-d);text-decoration:underline} .fichas{display:flex;flex-wrap:wrap;gap:7px} .fichas button{border:1px solid var(--linea2);background:var(--sup);padding:11px 13px;cursor:pointer; font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta2)} .fichas button[aria-pressed="true"]{border-color:var(--marca-d);background:var(--marca-d);color:#fff} .aviso{margin:0 0 16px;padding:12px 14px;border-left:3px solid #B3261E;background:#FDECEA;font-size:12.5px;line-height:1.5;color:#7A1C15} /* Un aviso que informa, no que regaña: el producto agotado no es un error. */ .aviso--calmo{border-left-color:var(--marca);background:var(--marca-suave);color:var(--tinta)} .aviso--calmo b{display:block;margin-bottom:3px} /* ----------------------------------------------------------- confirmación -- */ .listo{padding:30px 0 10px;text-align:center} .listo .marca-ok{width:56px;height:56px;border-radius:50%;background:var(--marca-suave);color:var(--marca); display:flex;align-items:center;justify-content:center;margin:0 auto 18px} .listo .marca-ok svg{width:26px;height:26px} .listo h1{font-family:var(--display);font-weight:700;font-size:24px;line-height:1.15;margin:0 0 8px} .listo p{margin:0 0 6px;font-size:13px;color:var(--tinta2)} .listo .ref{display:inline-block;margin:10px 0 22px;padding:8px 14px;background:var(--sup);border:1px solid var(--linea2); font-family:ui-monospace,Menlo,monospace;font-size:14px;font-weight:600;letter-spacing:.06em} .mensaje-previo{margin:22px 0 0;padding:15px;background:var(--sup);border:1px solid var(--linea); white-space:pre-wrap;text-align:left;font-size:12.5px;line-height:1.6;color:var(--tinta2)} /* -------------------------------------------------------------------- pie -- */ .pie{background:var(--marca-dd);color:rgba(255,255,255,.85)} /* En celular es una sola columna: las tres partes necesitan aire entre ellas o el título de una queda pegado al final de la anterior. En escritorio la rejilla las separa con `gap` y este margen sobra. */ .pie-in{max-width:var(--ancho);margin:0 auto;padding:28px 18px 34px} .pie-col + .pie-col{margin-top:28px} .pie-col h2{margin:0 0 12px;font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.72)} .pie-col ul{margin:0;padding:0;list-style:none} .pie-col li{margin:0 0 7px} .pie-col li a{font-size:12.5px;text-decoration:none;color:rgba(255,255,255,.86)} .pie-col li a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px} .pie-marca p{max-width:34ch} .pie .pendiente{color:rgba(255,255,255,.65)} .pie-logo{width:60px;height:60px;margin:0 0 16px} .pie b{display:block;font-family:var(--display);font-weight:700;font-size:16px;color:#fff} .pie em{display:block;font-size:8px;font-weight:500;letter-spacing:.2em;font-style:normal;color:rgba(255,255,255,.8);margin:5px 0 16px} .pie p{margin:0 0 5px;font-size:12px;line-height:1.7} .pie a{color:#fff;text-decoration:underline;text-underline-offset:2px} /* ------------------------------------------------------------- escritorio -- */ /* ═══════════════════════════════════════════════════════════════════════════ Escritorio Los cortes son los del catálogo de Encanto: 2 columnas hasta 749, 3 hasta 989 y 4 de ahí en adelante. ═══════════════════════════════════════════════════════════════════════════ */ @media (min-width:750px){ #vista{padding-bottom:70px} .catalogo{padding:52px 0 0} .cat-hd{margin-bottom:26px} .cat-hd h1,.cat-hd h2{font-size:24px;line-height:1.15} .cat-selector{display:none} .cat-filtros{display:flex;gap:10px;margin-bottom:40px} .cat-cuantos{margin:-6px 0 22px} .cat-filtro{padding:8px 20px;font-size:12px} .cat-grid{grid-template-columns:repeat(3,1fr);gap:24px 20px} .cat-btn{align-self:flex-start;padding:8px 26px;font-size:13px} .cat-acciones .cat-btn{padding:8px 14px;font-size:12px;letter-spacing:.8px} .btn-agregar{width:42px} .cat-nombre{font-size:15px} .anuncio{height:34px} .anuncio-in span{font-size:10px;letter-spacing:.16em;padding-right:54px} .marca-logo{width:48px;height:48px} .marca-firma{height:37px} .pie-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px} .pie-col + .pie-col{margin-top:0} } @media (min-width:990px){ body{font-size:16px} /* La cabecera con la navegación al lado, como allá. */ .cab-in{padding:14px 18px 0;gap:22px;min-height:96px} /* En escritorio el menú de categorías vive en las píldoras que están justo debajo de la barra coral, no en la cabecera: Mapintel tiene nueve categorías con nombres largos ("Llaveros, portallaves y servilleteros") y en una sola fila medían 1.540 px — empujaban el carrito fuera de la pantalla y dejaban la página con barra horizontal. El botón de menú se queda visible en todos los tamaños porque ahora es la única forma de saltar de categoría desde una ficha. */ .marca-logo{width:54px;height:54px} .marca-firma{height:41px} .menu-movil{columns:2;column-gap:0} .cab-acts{gap:22px} /* El buscador se sienta entre la marca y el carrito. */ .cab-in{flex-wrap:nowrap;padding:14px 18px;gap:24px} .cab-buscar{order:0;flex:1 1 auto;min-width:0;padding:0} .cab-acts{margin-left:0} .cat-grid{grid-template-columns:repeat(4,1fr);gap:28px 24px} .cat-hd{margin-bottom:26px} /* --- ficha en dos columnas, con las cuatro fotos a la vista --- */ .volver{padding:22px 0 16px} .ficha-doble{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:52px;align-items:start} .galeria{margin:0;position:sticky;top:calc(var(--cab) + 24px); display:grid;grid-template-columns:74px minmax(0,1fr);gap:14px;align-items:start} /* Con una sola foto no hay miniaturas, y sin esto la foto grande caía en la columna de 74 px: se veía diminuta y el resto en blanco. */ .galeria--sola{grid-template-columns:minmax(0,1fr)} .miniaturas{display:flex;flex-direction:column;gap:10px} .mini{width:74px;height:92px;border:1px solid var(--linea2);background-color:#E9D9C9; background-position:center;background-size:cover;background-repeat:no-repeat; padding:0;cursor:pointer;opacity:.55;transition:opacity .2s,border-color .2s} .mini:hover{opacity:.85} .mini.on{opacity:1;border-color:var(--marca)} .galeria-tira figure{aspect-ratio:1/1.16} .puntos{display:none} .ficha{padding-top:4px} .ficha h1{font-size:36px;margin-bottom:12px} .entrada{font-size:14.5px;margin-bottom:26px;max-width:52ch} .tam{min-height:56px} .precio-fila .val{font-size:30px} .datos dd{font-size:13.5px} .btn{min-height:58px;font-size:13px} .relacionados{border-top:1px solid var(--linea);margin-top:64px;padding-top:52px} .relacionados .cat-grid{grid-template-columns:repeat(4,1fr)} .pie-in{grid-template-columns:1.6fr 1fr 1fr;gap:48px;padding:52px 18px 58px} .pie-logo{width:74px;height:74px;margin:0 0 20px} .pie b{font-size:19px} .pie p{font-size:12.5px} } @media (min-width:1280px){ .ficha-doble{gap:64px} } /* ═══════════════════════════════════════════════════════════════════════════ Lo propio de Mapintel ═══════════════════════════════════════════════════════════════════════════ */ /* ------------------------------------------------- barra de sección coral -- */ /* El gesto de la marca, calcado del catálogo en PDF: una barra coral con el título en blanco, en mayúsculas muy espaciadas, entre dos filetes finos. Es lo único que hacía falta copiar para que la página se sienta de Rosa. */ .barra-sec{background:var(--barra);color:#fff;padding:11px 22px;margin:0 0 26px; display:flex;flex-direction:column;gap:5px} .barra-sec::before,.barra-sec::after{content:'';height:1px;background:rgba(255,255,255,.55)} .barra-sec h2,.barra-sec h1{margin:0;font-family:var(--display);font-weight:600; font-size:14px;letter-spacing:.22em;text-transform:uppercase;text-align:center;line-height:1.5} /* --------------------------------------------------- banner del taller -- */ /* Una imagen ancha con el texto encima y un botón. Si Rosa no ha subido foto, el degradado de la marca hace de fondo y el banner sirve igual desde el primer día — que es justo lo que va a pasar al entregarlo. */ .banner{position:relative;overflow:hidden;margin:0 0 6px;isolation:isolate; background:linear-gradient(115deg,#C5402E 0%,#EE6A55 55%,#FF9588 100%)} .banner-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2} /* Con foto hace falta el velo: el texto blanco sobre una foto cualquiera no se lee, y aquí la foto la elige el cliente, así que hay que garantizarlo. */ .banner--foto::after{content:'';position:absolute;inset:0;z-index:-1; background:linear-gradient(90deg,rgba(150,44,28,.92) 0%,rgba(150,44,28,.78) 45%,rgba(150,44,28,.42) 100%)} .banner-in{max-width:var(--ancho);margin:0 auto;padding:32px 18px 34px; display:flex;flex-direction:column;align-items:flex-start;gap:20px} .banner-txt{max-width:46ch} .banner-encima{margin:0 0 8px;font-size:9.5px;font-weight:600;letter-spacing:.22em; text-transform:uppercase;color:rgba(255,255,255,.85)} .banner h2{margin:0;font-family:var(--display);font-weight:700;font-size:26px; line-height:1.15;color:#fff;letter-spacing:-.01em} .banner p{margin:10px 0 0;font-size:14px;line-height:1.55;color:rgba(255,255,255,.92)} .banner-btn{flex:none;border:0;cursor:pointer;background:#fff;color:var(--marca-dd); font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.12em; text-transform:uppercase;padding:14px 30px;border-radius:999px; box-shadow:0 6px 18px rgba(120,35,22,.22);transition:transform .18s,box-shadow .18s} .banner-btn:hover{transform:translateY(-1px);box-shadow:0 9px 24px rgba(120,35,22,.3)} /* En el banner sin foto la mariposa del logo asoma por la derecha, muy tenue. Es el guiño de marca; en celular no cabe y se apaga. */ .banner:not(.banner--foto) .banner-in::after{content:'';position:absolute;right:-40px;bottom:-30px; width:260px;height:220px;z-index:-1;opacity:.13;pointer-events:none; background:url(/mariposa.png) right bottom / contain no-repeat} @media (max-width:640px){ .banner:not(.banner--foto) .banner-in::after{display:none} .banner h2{font-size:22px} .banner-btn{width:100%;text-align:center} .banner--foto::after{background:linear-gradient(180deg,rgba(150,44,28,.72) 0%,rgba(150,44,28,.93) 100%)} } @media (min-width:900px){ .banner-in{flex-direction:row;align-items:center;justify-content:space-between;gap:36px; padding:46px 18px 48px} .banner h2{font-size:32px} } /* ------------------------------------------------------------- ventana -- */ /* nativo: cierra con Escape y atrapa el foco sin código extra. */ .modal{border:0;padding:0;background:transparent;max-width:none;max-height:none; width:100%;height:100%;overflow:auto} .modal::backdrop{background:rgba(51,41,42,.55);backdrop-filter:blur(2px)} .modal-caja{position:relative;background:var(--sup);width:min(460px,calc(100% - 32px)); margin:auto;padding:30px 26px 28px;border-radius:18px; box-shadow:0 24px 60px rgba(51,41,42,.3)} /* El a pantalla completa no centra su contenido solo. */ .modal{display:none} .modal[open]{display:flex;align-items:center;justify-content:center} .modal-caja h2{margin:0;font-family:var(--display);font-weight:700;font-size:22px;line-height:1.2} .modal-caja .banner-encima{color:var(--marca-d)} .modal-bajada{margin:8px 0 20px;font-size:13.5px;line-height:1.55;color:var(--tinta2)} .modal-x{position:absolute;top:10px;right:12px;background:none;border:0;cursor:pointer; font-size:26px;line-height:1;color:var(--tinta3);padding:4px 8px} .modal-x:hover{color:var(--tinta)} .modal-listo{text-align:center;padding:8px 0 4px} .modal-listo .marca-ok{width:56px;height:56px;margin:0 auto;border-radius:50%; background:var(--marca-suave);color:var(--marca-d);display:flex;align-items:center;justify-content:center} .modal-listo .marca-ok svg{width:26px;height:26px} .modal-listo h2{margin:14px 0 8px} .modal-listo p{margin:0 0 22px;font-size:14px;color:var(--tinta2)} /* ---------------------------------------------------------- pago Nequi -- */ /* Los datos se ven ANTES de mandar el pedido: quien va a girar quiere saber a nombre de quién antes de comprometerse, no después en el chat. */ .nequi{margin:14px 0 2px;padding:16px 18px;border-radius:14px; background:var(--marca-suave);border:1px solid var(--linea2)} .nequi-t{margin:0 0 12px;font-size:11px;font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:var(--marca-dd)} .nequi dl{margin:0;display:flex;flex-wrap:wrap;gap:6px 34px} .nequi dl div{min-width:0} .nequi dt{font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta3)} .nequi dd{margin:2px 0 0;font-size:15px} .nequi dd b{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.02em} .nequi-n{margin:13px 0 0;padding-top:12px;border-top:1px solid var(--linea2); font-size:12.5px;line-height:1.55;color:var(--tinta2)} /* ------------------------------------------------- copia de pruebas -- */ /* Amarillo y arriba del todo, empujando la página: en la tienda del cliente esta franja no existe, así que si se ve es que estás en la copia. */ .copia{position:relative;z-index:400;background:var(--amarillo);color:#4A3B10; padding:9px 18px;text-align:center;font-size:12.5px;line-height:1.45} .copia b{font-weight:600} .copia a{color:#4A3B10;text-decoration:underline;text-underline-offset:2px;white-space:nowrap} /* La cabecera es sticky: sin esto se pegaría arriba tapando la franja. */ .con-copia .cab{top:0} /* ------------------------------------------------ barra fija del pedido -- */ /* Aparece abajo en cuanto hay algo en el carrito. El contador de la cabecera se pierde de vista al bajar tres tarjetas; esto mantiene a la vista cuánto lleva y cómo seguir. Se pinta desde JS y solo cuando hace falta. */ .barra-pedido{ position:fixed;left:0;right:0;bottom:0;z-index:350; display:flex;align-items:center;justify-content:space-between;gap:16px; width:100%;border:0;cursor:pointer;text-align:left; background:var(--marca-d);color:#fff; padding:15px 20px calc(15px + env(safe-area-inset-bottom)); box-shadow:0 -6px 22px rgba(90,45,35,.22); animation:subeBarra .28s cubic-bezier(.2,.8,.3,1); } @keyframes subeBarra{from{transform:translateY(100%)}to{transform:translateY(0)}} @media (prefers-reduced-motion:reduce){.barra-pedido{animation:none}} .barra-pedido:hover{background:var(--marca-dd)} .barra-pedido-izq{display:flex;align-items:center;gap:10px;min-width:0} .barra-pedido svg{width:21px;height:21px;flex:none} .barra-pedido b{font-family:var(--display);font-weight:600;font-size:14px; letter-spacing:.04em;white-space:nowrap} .barra-pedido em{font-style:normal;font-size:12.5px;color:rgba(255,255,255,.82);white-space:nowrap} .barra-pedido-total{font-family:var(--display);font-weight:700;font-size:18px; letter-spacing:.01em;white-space:nowrap;flex:none} /* Sin esto la barra tapa el final del pie. */ .con-barra .pie{padding-bottom:calc(64px + env(safe-area-inset-bottom))} @media (max-width:420px){ /* En pantallas angostas «Ver mi pedido · 2 artículos» no cabe en una línea junto al total: el conteo se va debajo del rótulo. */ .barra-pedido{padding:12px 16px calc(12px + env(safe-area-inset-bottom))} .barra-pedido-izq{flex-wrap:wrap;gap:2px 10px} .barra-pedido em{flex-basis:100%} .barra-pedido-total{font-size:17px} }