/* Petoonz — movil primero. La mayoria de los escaneos son en 5G, de pie, dentro de una tienda: nada de framework, nada de fuentes remotas. */ :root{ /* LA PALETA DE SWEET ART, sacada de los pixeles del logo y no a ojo: lavanda #8D80C2 de las letras, violeta #E2187E del punto de la I, menta #BCFFF3 de la mancha del fondo, y lima #DAD100 de la boina del pintor. LOS NOMBRES VIEJOS SE QUEDAN. Estan escritos en 851 lineas de CSS y renombrarlos no cambia ni un pixel: solo abriria la puerta a que una quedara sin renombrar y esa regla dejara de aplicar en silencio. Debajo van los nombres nuevos, que son los que hay que usar de aqui en adelante. */ --crema:#F1FCFB; --papel:#FCFFFE; --mostaza:#E2187E; --oro:#FFB3CE; --ambar:#B01360; --ambar2:#E2187E; --tinta:#2A1226; --suave:#8A6B7C; --linea:#CDEDE9; --sombra:rgba(90,25,60,.14); /* LOS DE LA MARCA — paleta CARAMELO, elegida sobre cuatro propuestas. Se eligio por tres motivos concretos, no por gusto: contrasta a dos metros en un mostrador sin gritar "rebajas"; IMPRIME EXACTO porque magenta y amarillo son tintas primarias (el violeta anterior estaba fuera de gama CMYK y en los acrilicos habria salido sucio); y dice el nombre — rosa chicle y turquesa son literalmente "sweet". */ --magenta:#E2187E; /* el punto de la I — el acento fuerte, los botones */ --rosa:#FF69A0; /* las letras de "sweet" */ --turquesa:#C6F5F0; /* la mancha del logo */ --turquesa2:#78DCD4; /* su borde y la trama de puntos */ --amarillo:#FFC72C; /* la boina del pintor — el toque de calor */ --piel:#FFD198; /* su cara */ --contorno:#000000; /* el negro grueso del logo, que es lo que lo hace pop */ } *,*::before,*::after{box-sizing:border-box} html,body{max-width:100%;overflow-x:hidden} html{-webkit-text-size-adjust:100%;scroll-behavior:auto} html{background:var(--crema)} body{ /* transparente A PROPOSITO: el color vive en y la textura en body::before. Si el body pintara su propio fondo, taparia la capa. */ margin:0;background:transparent;color:var(--tinta); font:400 17px/1.58 ui-rounded,"SF Pro Rounded",-apple-system,system-ui,sans-serif; overflow-x:hidden; } img{max-width:100%;height:auto;display:block} h1,h2,h3{margin:0;text-wrap:balance;line-height:1.12;letter-spacing:-.015em} h1{font-size:clamp(32px,8.2vw,54px);font-weight:800} h2{font-size:clamp(25px,5.6vw,36px);font-weight:800} p{margin:0} .env{width:min(680px,100%);margin-inline:auto;padding-inline:20px} /* ---------------------------------------------------------------- hero --- */ .hero{position:relative;padding:26px 0 0;overflow:hidden;isolation:isolate; overflow-anchor:none} /* LA TEXTURA VA EN TODA LA PAGINA, NO SOLO EN LA CABECERA. Antes eran dos pseudo-elementos del hero: los rayos se desvanecian a media altura y la trama moria donde acababa la cabecera, asi que de la mitad hacia abajo la pagina era un color plano y parecia otra web. Ahora es UNA capa fija detras de todo. `position:fixed` es lo que hace que llegue hasta abajo sin importar cuanto mida la pagina: no se estira, se queda quieta mientras el contenido pasa por encima. Ademas se pinta una vez y no cuesta nada al hacer scroll, que es lo que si pasaria con una capa larguisima. Las dos texturas van en la MISMA capa para poder darles una sola opacidad: la trama arriba y los rayos detras. */ body::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background: url("/static/puntos.png") repeat 0 0 / 300px, url("/static/rayos_menta.jpg") no-repeat center top / cover; opacity:.55; } /* EL LOGO MANDA EN LA PORTADA. Era 300px con el logo de Petoonz, que era una sola linea. El de Sweet Art tiene tres cosas dentro —"sweet", "AiRT" con la I metida en la R, y el pintor— y cada una necesita leerse: a tamaño pequeño el juego de la I se pierde, que es justo lo que hace especial a la marca. 540px es lo que cabe sin comerle sitio al titular. */ .marca{width:min(880px,90vw);margin:0 auto 6px} .hero h1{text-align:center} .hero h1 em{font-style:normal;color:var(--ambar)} .gancho{margin:14px auto 0;max-width:30ch;text-align:center;color:#7A5468;font-size:17.5px} /* Las dos mascotas flanquean el titular POR FUERA de la columna de texto. La columna mide 680, asi que su borde esta a 340 del centro: los dejo a 372 para que quede aire y no toquen nada. Solo aparecen si hay hueco de verdad; por debajo de 1000 px no lo hay y estorbarian. */ .duo{display:none} .hero{max-width:100vw} @media (min-width:1000px){ .duo{display:block;position:absolute;inset:0;z-index:0;pointer-events:none} .duo img{position:absolute;top:104px;width:auto; height:min(300px, calc(80vw - 620px)); filter:drop-shadow(0 12px 14px var(--sombra))} /* cabecera corta (elegir estilo, datos, pedido): se anclan al suelo del hero o se salen por abajo y solo se les ve la cabeza */ .hero.corto .duo img{top:auto;bottom:4px;height:min(168px, calc(46vw - 340px))} .duo .gato{left:50%;margin-left:-372px;transform:translateX(-100%) rotate(-5deg)} .duo .perro{left:50%;margin-left:372px;transform:rotate(5deg) scaleX(-1)} } /* En el cierre van en fila centrada: ahi no hay nada al lado que tapar. */ .fila-duo{display:flex;justify-content:center;align-items:flex-end;gap:22px;margin-top:30px} .fila-duo img{height:min(150px,27vw);width:auto; filter:drop-shadow(0 9px 11px var(--sombra))} .fila-duo img:first-child{transform:rotate(-5deg)} .fila-duo img:last-child{transform:rotate(5deg) scaleX(-1)} /* ------------------------------------------------------------ tarjeta ---- */ .tarjeta{ background:var(--papel);border:1px solid var(--linea);border-radius:22px; padding:20px;box-shadow:0 12px 30px var(--sombra);margin-top:34px;position:relative;z-index:2; } .suelta{ display:flex;flex-direction:column;align-items:center;gap:7px; padding:32px 18px;border:2.5px dashed var(--mostaza);border-radius:16px; background:linear-gradient(180deg,#FAFEFD,#F5FDFB);cursor:pointer;text-align:center; } .suelta:active{transform:scale(.995)} /* El input no puede ir con [hidden]/display:none o algunos navegadores dejan de activarlo al pulsar el label. Se esconde sin sacarlo del flujo. */ .oculto{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden; clip-path:inset(50%);white-space:nowrap} .icono{font-size:34px;line-height:1} .rotulo{font-weight:700;font-size:18px} .pista{font-size:14px;color:var(--suave);max-width:26ch} #vista{display:none;width:100%;max-height:44vh;object-fit:contain; margin-top:14px;border-radius:14px;background:#DCF3EF} .campos{display:grid;gap:12px;margin-top:16px} .campos label{display:grid;gap:5px;font-size:15px;font-weight:700} .campos small{font-weight:400;color:var(--suave)} .campos input,.campos select{ font:inherit;padding:13px;border:1.5px solid var(--linea);border-radius:12px; background:#fff;color:inherit;width:100%} :focus-visible{outline:3px solid var(--mostaza);outline-offset:2px} .bt{ display:block;width:100%;margin-top:18px;padding:16px;border:0;border-radius:14px; background:var(--ambar);color:#F7FEFC;font:inherit;font-weight:800;font-size:18.5px; cursor:pointer;text-align:center;text-decoration:none} .bt:disabled{background:#C6EAE5;color:#A08897;cursor:default} .bt.fantasma{background:transparent;color:var(--ambar);border:2px solid var(--linea)} .cuota{margin-top:11px;text-align:center;font-size:13.5px;color:var(--suave)} .aviso{margin-top:16px;padding:14px 16px;border-left:4px solid #9C3B1B; background:#F2FAF8;border-radius:0 10px 10px 0;font-size:15.5px} .aviso.blando{border-left-color:var(--mostaza);background:#F4FCFA} /* La foto ACEPTADA. Mismo hueco que el aviso de error —es el mismo cajon— pero en verde: si saliera con la raya roja del error, la buena noticia se leeria como un problema. */ .aviso.bien{border-left-color:#2F7D4F;background:#EDF7EF;color:#245C3B} .aviso p{margin:0 0 8px}.aviso p:last-child{margin:0} .acciones{display:flex;gap:10px;margin-top:12px} /* EL ORDEN DE LA PANTALLA DE RESULTADO, EN PESO VISUAL. Lo que lleva a la tienda es lo unico lleno de color; la descarga va en contorno; y el retoque y "otro estilo" quedan en fantasma. Es la jerarquia del estudio: el fisico es el 92% del ingreso y cada regeneracion cuesta 0,04 $, asi que la loud es comprar y la quiet es volver a intentarlo. */ .bt.grande{font-size:18px;padding:16px 20px;margin-top:18px} .bajo-bt{margin:6px 0 16px;text-align:center;font-size:13.5px;color:var(--suave)} .bt.contorno{background:transparent;color:var(--ambar); border:2px solid var(--mostaza);box-shadow:none} .bt.contorno:hover{background:#F1FBF8} /* LA SECCION DE RETOQUE. Estaba en gris y con una caja de dos lineas, y se perdia entre los botones — el cliente que queria cambiar algo no la veia. Ahora tiene fondo propio, titular de verdad y la caja ocupa TODO el ancho del visor con cuatro lineas: una caja pequena parece un campo de busqueda y lo que se espera aqui es una frase escrita. */ .retoque{margin:24px -22px 0;padding:20px 22px;background:#F3FBF9; border-top:2px solid var(--linea);border-bottom:2px solid var(--linea)} .retoque-tit{margin:0;font-size:22px;font-weight:800;letter-spacing:-.015em} .retoque-sub{margin:5px 0 12px;font-size:14px;color:var(--suave);line-height:1.5} .retoque textarea{width:100%;display:block;box-sizing:border-box; padding:14px 15px;border:1.5px solid var(--linea);border-radius:12px; font:inherit;font-size:16px;line-height:1.5;background:var(--papel); color:var(--tinta);resize:vertical;min-height:150px} .retoque textarea:focus{outline:2px solid var(--mostaza);outline-offset:1px; border-color:var(--mostaza)} .retoque .ideas{margin-top:10px} .retoque .bt{margin-top:12px} /* Las dos cartas de la ventana de descarga. Lado a lado para que se comparen de un vistazo: en columna, la de arriba parece la recomendada sin serlo. */ .dos-cartas{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0} @media (max-width:420px){ .dos-cartas{grid-template-columns:1fr} } .carta{display:flex;flex-direction:column;gap:3px;padding:15px 13px; border:2px solid var(--linea);border-radius:14px;background:var(--papel); cursor:pointer;font:inherit;color:inherit;text-align:center} .carta b{font-size:15.5px} .carta span{font-size:12.5px;color:var(--suave);line-height:1.35} .carta em{font-style:normal;font-weight:800;font-size:17px;margin-top:5px; color:var(--ambar)} .carta:hover{border-color:var(--mostaza)} .carta.destacada{border-color:var(--mostaza);background:#F7FDFC} /* El campo del nombre, dentro de la rotulacion. Se pedia en la portada y se movio aqui: el cliente lo escribe con el lienzo delante. */ .nom-lienzo{display:block;margin:2px 0 14px;font-size:15px;font-weight:700} .nom-lienzo small{display:block;font-weight:400;font-size:13px;color:var(--suave); margin:2px 0 6px} .nom-lienzo input{width:100%;padding:11px 13px;border:1.5px solid var(--linea); border-radius:11px;font:inherit;font-weight:600;background:var(--papel); color:var(--tinta)} .nom-lienzo input:focus{outline:2px solid var(--mostaza);outline-offset:1px} .acciones .bt{margin:0;flex:1;padding:12px;font-size:16px} /* ------------------------------------------------------------ secciones -- */ section{padding:56px 0} .eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase; color:var(--ambar2);text-align:center;margin-bottom:9px} .centro{text-align:center} /* SE LLAMABA .sub Y CHOCABA. Mas abajo hay otra `.sub` —la tarjeta de subcategoria que pinta el JavaScript del selector de estilos— con display:grid, borde, fondo y cursor de mano. Al ir despues en el fichero, ganaba: los parrafos de bajada de la portada salian dentro de una caja blanca y con otra tipografia. Se renombra el PARRAFO y no la tarjeta porque el parrafo se usa en dos sitios de HTML estatico y la tarjeta la crea el JS: tocar lo estatico es verificable de un vistazo, tocar el JS no. */ .bajada{margin:12px auto 0;max-width:34ch;color:var(--suave);text-align:center} /* Carrusel de muestras: tira horizontal que se mueve sola. La reja no valia — a 200 px por columna las miniaturas quedaban diminutas y no se veia nada. */ /* Carrusel: scroll de verdad, no transform. Con transform no se puede arrastrar, y el -50% se peleaba con el scroll-behavior:smooth del html. El contenido va duplicado: al pasar de la mitad se resta y no se ve el corte. */ .vitrina{overflow-x:auto;overflow-y:hidden;margin-top:26px;padding:4px 0 14px; scroll-behavior:auto;scrollbar-width:none;cursor:grab; -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain} .vitrina::-webkit-scrollbar{display:none} .vitrina.agarrando{cursor:grabbing} .vitrina.agarrando img{pointer-events:none} .carro{display:flex;gap:16px;width:max-content} .carro figure{margin:0;flex:0 0 240px} @media (max-width:560px){ .carro figure{flex:0 0 62vw} } .carro img{border-radius:8px;width:100%;height:auto;display:block} .carro figcaption{margin-top:9px;text-align:center;font-size:13.5px;font-weight:700; color:var(--ambar2);letter-spacing:.04em} /* SOLO EN MOVIL, y por eso es una regla aparte y no un cambio en `.vitrina`. En escritorio las muestras ya se ven en las dos columnas laterales; poner ademas el carrusel seria enseñar el mismo material dos veces. Por debajo de 1000 px esas columnas no existen, y ahi el carrusel es lo unico que hay. Se oculta con `display:none` a partir del ancho en el que aparecen las laterales, asi que las dos cosas nunca coinciden. */ .vitrina.solo-movil{margin-top:18px} @media (min-width:1000px){ .vitrina.solo-movil{display:none} } .pasos{display:grid;gap:16px;margin-top:26px} .paso{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start} .paso b{display:grid;place-items:center;width:44px;height:44px;border-radius:50%; background:var(--mostaza);color:#33162E;font-size:19px} .paso p{color:var(--suave);font-size:15.5px;margin-top:2px} .paso h3{font-size:17.5px} /* --------------------------------------------------------------- reseñas - */ /* Translucida para que la trama del fondo siga viendose a traves. Opaca partia la pagina en dos justo en medio. */ .resenas{background:rgba(252,255,254,.72);border-block:1px solid var(--linea)} .nota{margin:0 auto 20px;max-width:44ch;padding:10px 14px;border-radius:10px; background:#F4FCFA;border:1px dashed var(--mostaza);color:var(--ambar2); font-size:13.5px;text-align:center} .resena{background:var(--crema);border:1px solid var(--linea);border-radius:18px; padding:18px 20px} .estrellas{color:var(--mostaza);letter-spacing:2px;font-size:15px} .resena p{margin:9px 0 12px;font-size:16px} .quien{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--suave)} .quien span{font-weight:700;color:var(--tinta)} /* ---------------------------------------------------------------- cierre - */ .cierre{position:relative;text-align:center;padding:60px 0 70px} footer{padding:26px 20px 40px;text-align:center;color:var(--suave);font-size:13.5px} footer a{color:var(--ambar2)} /* Redes y correo. Las redes son escaparate, no canal de venta: van visibles pero por debajo del contenido, nunca compitiendo con el boton de comprar. */ .redes{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px; margin-bottom:14px} .redes a{display:inline-flex;align-items:center;gap:7px;padding:8px 13px; border:1.5px solid var(--linea);border-radius:99px;background:var(--papel); color:var(--ambar);font-weight:700;font-size:13.5px;text-decoration:none; transition:border-color .15s,transform .15s} .redes a:hover{border-color:var(--mostaza);transform:translateY(-1px)} .redes svg{width:16px;height:16px;flex:none} @media (min-width:640px){ .pasos{grid-template-columns:repeat(3,1fr)} } @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important; scroll-behavior:auto!important}} /* --------------------------------------------------------------- estilos -- */ .parrilla{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px} @media (min-width:560px){.parrilla{grid-template-columns:repeat(3,1fr)}} .estilo{position:relative;padding:0;border:2px solid transparent;border-radius:16px; background:var(--papel);overflow:hidden;cursor:pointer;font:inherit;color:inherit; box-shadow:0 5px 14px var(--sombra);text-align:center} .estilo:active{transform:scale(.985)} .estilo.top{border-color:var(--mostaza)} /* 4/5 = la proporcion del lienzo que se imprime. Estaba en 2/3 y la miniatura recortaba el arte a una forma que el cliente NUNCA recibe: elegia por una silueta y le llegaba otra. Lo mismo en .sub img, que estaba cuadrada. */ .estilo img{width:100%;aspect-ratio:4/5;object-fit:cover} /* LA PORTADA QUE ROTA. Las imagenes se apilan una encima de otra en la misma caja 4/5 y solo la que lleva .ver esta visible; el cruce lo hace la transicion de opacidad, no un cambio de src, para que no parpadee ni salte el hueco mientras carga la siguiente. La caja tiene la proporcion fijada aunque sus hijas esten en absolute, si no la casilla colapsaria a cero. */ .estilo .rueda{display:block;position:relative;width:100%;aspect-ratio:4/5} .estilo .rueda img{position:absolute;inset:0;height:100%;opacity:0; transition:opacity 1.4s ease-in-out} .estilo .rueda img.ver{opacity:1} /* Quien pide menos movimiento ve solo la portada, quieta. */ @media (prefers-reduced-motion:reduce){ .estilo .rueda img{transition:none} } .estilo span{display:block;padding:10px 8px 12px;font-size:14px;font-weight:700} .estilo i{position:absolute;top:8px;left:8px;padding:3px 9px;border-radius:99px; background:var(--mostaza);color:#33162E;font-style:normal;font-size:11px; font-weight:800;letter-spacing:.08em;text-transform:uppercase} /* Capa propia en vez de : showModal no pintaba en Safari y la previa se generaba sin que se viera nada. */ .capa{position:fixed;inset:0;z-index:9999;display:grid;place-items:center; padding:18px;background:rgba(38,14,30,.74);-webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);overflow-y:auto} .capa[hidden]{display:none} /* LA VENTANA DE DESCARGA VA POR ENCIMA DEL PANEL. Las dos son `.capa` con el mismo z-index, y la de descarga esta ANTES en el documento; con empate, gana la que va despues. Resultado: al pulsar "Descargar" —con el panel del resultado abierto— la ventana se abria DETRAS y no se veia nada. El boton parecia roto y no lo estaba. Se sube solo esta, en una regla aparte, para no tocar `.capa`, que la usan las otras dos ventanas. */ #capa-baja{z-index:10000} /* ------------------------------------------------------- recortar la foto -- El marco es 4:5, la proporcion del lienzo: lo que se encuadra aqui es literalmente lo que se recibe. La imagen se pinta en un canvas y se mueve con el dedo; el canvas es lo que permite exportar DESPUES el trozo elegido sin pedirle nada al servidor. */ #capa-recorte{z-index:10001} #marco-recorte{position:relative;width:100%;aspect-ratio:4/5;margin:12px 0; border-radius:14px;overflow:hidden;background:#241722;touch-action:none; box-shadow:inset 0 0 0 2px var(--magenta)} #lienzo-recorte{width:100%;height:100%;display:block;cursor:grab} #lienzo-recorte:active{cursor:grabbing} .zoom-fila{display:flex;align-items:center;gap:12px;margin:4px 0 14px; font-size:14px;color:var(--suave)} .zoom-fila input{flex:1;accent-color:var(--magenta)} .visor{width:min(440px,92vw);max-height:92vh;overflow-y:auto;background:var(--papel);border-radius:20px; padding:16px;box-shadow:0 20px 50px rgba(0,0,0,.35)} /* OJO: esto llego a ser `.visor img` y escondia TAMBIEN a las mascotas del modal y de la pantalla de espera, y despues la propia previa. Va solo a #salida, que es la unica imagen que arranca oculta. */ #salida{width:100%;border-radius:12px;display:block} #cargando{padding:54px 10px;text-align:center} #cargando p{font-weight:700;margin-top:12px} #cargando small{color:var(--suave)} .huella{font-size:44px;animation:late 1.1s ease-in-out infinite} @keyframes late{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}} #pie{display:grid;gap:9px;margin-top:14px} #pie .bt{margin:0} /* --------------------------------------------------------------- confianza */ .promesas{display:grid;gap:12px;margin-top:26px} @media (min-width:560px){.promesas{grid-template-columns:repeat(2,1fr)}} .promesa{display:grid;grid-template-columns:38px 1fr;gap:13px;align-items:start; background:var(--papel);border:1px solid var(--linea);border-radius:16px;padding:16px 18px} .promesa b{font-size:24px;line-height:1} .promesa h3{font-size:16.5px;margin-bottom:3px} .promesa p{font-size:14.5px;color:var(--suave)} .faq{margin-top:24px;display:grid;gap:10px} details{background:var(--papel);border:1px solid var(--linea);border-radius:14px; padding:15px 18px} details[open]{border-color:var(--mostaza)} summary{cursor:pointer;font-weight:700;font-size:16.5px;list-style:none} summary::-webkit-details-marker{display:none} summary::after{content:"+";float:right;color:var(--ambar2);font-weight:800} details[open] summary::after{content:"–"} details p{margin-top:10px;color:var(--suave);font-size:15.5px} .vacio{margin-top:22px;padding:26px 22px;text-align:center;background:var(--crema); border:1.5px dashed var(--linea);border-radius:18px} .vacio p{color:var(--suave);font-size:15.5px;max-width:38ch;margin-inline:auto} .vacio .estrellas{font-size:22px;margin-bottom:8px} /* ---------------------------------------------------------------- muro ---- */ .casilla{display:grid;grid-template-columns:22px 1fr;gap:11px;align-items:start; margin-top:16px;padding:14px;background:var(--crema);border:1px solid var(--linea); border-radius:12px;font-size:13.5px;line-height:1.45;color:var(--suave);cursor:pointer} .casilla input{width:22px;height:22px;accent-color:var(--ambar);margin:0} /* --------------------------------------------------------------- pedido --- */ .lienzo-previa{width:100%;border-radius:12px;box-shadow:0 8px 20px var(--sombra)} .miniaturas{display:flex;gap:9px;overflow-x:auto;margin-top:13px;padding-bottom:4px} .miniaturas a{flex:0 0 62px;border-radius:9px;overflow:hidden;border:2.5px solid transparent} .miniaturas a.sel{border-color:var(--mostaza)} .miniaturas img{width:62px;height:93px;object-fit:cover} .miniaturas .mas{display:grid;place-items:center;height:93px;background:var(--crema); border:2px dashed var(--linea);color:var(--ambar2);font-size:24px;text-decoration:none} .grupo{margin:24px 0 11px;font-size:16px} .grupo small{font-weight:400;color:var(--suave);font-size:13.5px} .opciones{display:grid;gap:9px} .opcion{position:relative;display:grid;grid-template-columns:22px 1fr auto;gap:12px; align-items:center;padding:14px;border:1.5px solid var(--linea);border-radius:13px; background:var(--crema);cursor:pointer} .opcion:has(input:checked){border-color:var(--mostaza);background:#F5FDFB} .opcion input{width:22px;height:22px;accent-color:var(--ambar);margin:0} .opcion .txt{display:grid} .opcion b{font-size:16px} .opcion small{color:var(--suave);font-size:13.5px} .opcion .precio{font-weight:800;font-variant-numeric:tabular-nums} .opcion i{position:absolute;top:-9px;right:12px;padding:2px 9px;border-radius:99px; background:var(--mostaza);color:#33162E;font-style:normal;font-size:10.5px; font-weight:800;letter-spacing:.08em;text-transform:uppercase} .total{display:flex;justify-content:space-between;align-items:baseline; margin-top:22px;padding-top:16px;border-top:2px solid var(--tinta);font-size:17px} .total b{font-size:26px;font-variant-numeric:tabular-nums} .visor.centro{text-align:center} .campos label[hidden]{display:none} /* ----------------------------------------------------- selector de letras -- */ #letras{margin-top:14px} .titulillo{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase; color:var(--ambar2);margin-bottom:8px} /* FLUYEN EN VARIAS LINEAS, NO SE DESPLAZAN. Estaban con overflow-x:auto y la barra OCULTA. En movil se desliza con el dedo, pero en escritorio no hay barra, no hay flecha y la rueda del raton no desplaza en horizontal: las ultimas tipografias, posiciones y colores quedaban cortados a la derecha y era IMPOSIBLE llegar a ellos. Ofrecer una opcion que no se puede pulsar es peor que no ofrecerla. */ .tiras{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:6px} .tira{flex:0 0 auto;padding:8px 12px;border:2px solid var(--linea);border-radius:11px; background:#D8F1ED;cursor:pointer;display:grid;place-items:center; min-width:96px;height:60px} .tira.sin{background:var(--papel)} .tira.sin span{font-size:13.5px;font-weight:700;color:var(--suave)} .tira.sel{border-color:var(--mostaza);background:#F5FDFB} .tira img{height:34px;width:auto;max-width:150px;object-fit:contain} /* ------------------------------------------------------ detalles del cliente */ .extra{margin-top:16px;background:var(--papel);border:1px solid var(--linea); border-radius:14px;padding:14px 16px} .extra summary{cursor:pointer;font-weight:700;list-style:none;font-size:16px} .extra summary::-webkit-details-marker{display:none} .extra summary span{font-weight:400;color:var(--suave);font-size:13.5px;margin-left:7px} .extra summary::after{content:"+";float:right;color:var(--ambar2);font-weight:800} .extra[open] summary::after{content:"–"} .extra textarea{width:100%;margin-top:11px;font:inherit;font-size:16px;padding:12px; border:1.5px solid var(--linea);border-radius:11px;background:#fff;resize:vertical} .nota-extra{margin-top:8px;font-size:13px;color:var(--suave);line-height:1.45} /* --------------------------------------------------- modal de generacion --- */ .cab-modal{display:flex;align-items:center;gap:14px;margin-bottom:16px} .cab-modal img{width:56px;height:auto;flex:none; filter:drop-shadow(0 5px 7px var(--sombra))} .cab-modal h3{font-size:20px;margin:2px 0 0} .campo{display:grid;gap:6px;font-weight:700;font-size:15px} .campo small{font-weight:400;color:var(--suave)} .campo textarea{width:100%;font:inherit;font-size:16px;padding:12px; border:1.5px solid var(--linea);border-radius:12px;background:#fff;resize:vertical} /* EL PINTOR CRUZANDO mientras se genera la previa. Animacion lineal infinita: sale por la derecha y vuelve a entrar por la izquierda, asi que no hay corte ni fotograma repetido como en un gif. Antes eran DOS —el gato persiguiendo al perro— y ahora la marca tiene una sola mascota. Se deja uno en vez de duplicarlo: dos pintores identicos corriendo se leen como un fallo de la pagina, no como un chiste. */ .persecucion{position:relative;height:210px;border-radius:14px; background:linear-gradient(180deg,#F5FDFB,#E8F8F4);margin-bottom:18px; display:grid;place-items:center;overflow:hidden} /* La animacion la trae el propio fichero, asi que aqui NO hay @keyframes: el dibujo se mueve solo y el CSS solo lo coloca. Antes vivian aqui `cruzar` y `brinco`, que cruzaban al gato y al perro de lado a lado; con el pintor sentado a su caballete eso no tiene sentido y se han quitado. */ .persecucion .pintor-vivo img, .persecucion .pintor-quieto{height:186px;width:auto;display:block; filter:drop-shadow(0 8px 10px rgba(95,28,64,.16))} .persecucion .pintor-quieto{display:none} @media (prefers-reduced-motion:reduce){ /* Un WebP animado no se para desde CSS: se esconde y se enseña la quieta. */ .persecucion .pintor-vivo{display:none} .persecucion .pintor-quieto{display:block} } .barra{height:8px;border-radius:99px;background:#D4EFEB;overflow:hidden;margin:14px 0 9px} .barra i{display:block;height:100%;width:0;border-radius:99px;background:var(--mostaza); transition:width .3s linear} .cuenta{text-align:center;font-size:14px;color:var(--suave); font-variant-numeric:tabular-nums} .cuenta span{font-weight:800;color:var(--ambar2)} #paso-espera h3{font-size:19px} .centro{text-align:center} .tira span{font-size:13.5px;font-weight:700;color:var(--tinta);white-space:nowrap} .bt.quitar{margin-top:12px;padding:11px;font-size:15.5px} .bt.quitar.sel{background:var(--ambar);color:#F7FEFC;border-color:var(--ambar)} #letras .titulillo{margin-top:14px} #letras .titulillo:first-child{margin-top:0} /* la regla de que se puede pedir, en el popup y no en el checkout */ .regla{margin:14px 0 4px;padding:14px 16px;background:var(--crema); border:1px solid var(--linea);border-radius:12px;font-size:14.5px;line-height:1.5} .regla b{display:block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--ambar2);margin-bottom:3px} .regla b + p{margin:0 0 11px;color:var(--suave)} .regla p:last-child{margin-bottom:0} #aviso-pedir{margin-top:12px} /* previas ya hechas, para volver al checkout sin regenerar */ .hechas{margin-top:18px} .previa-hecha{padding:0;overflow:hidden;height:82px;min-width:66px;border-radius:10px} .previa-hecha img{height:82px;width:66px;object-fit:cover} .ajustes{margin-top:12px;border:1px solid var(--linea);border-radius:12px; padding:12px 14px;background:var(--crema)} .ajustes summary{cursor:pointer;font-weight:700;font-size:15.5px;list-style:none} .ajustes summary::-webkit-details-marker{display:none} .ajustes summary::after{content:"▾";float:right;color:var(--ambar2)} .ajustes[open] summary::after{content:"▴"} #paso-resultado > .bt{margin-top:14px} .versiones{margin-top:14px} #cambiar{margin-top:12px} #cambiar .campo{margin-top:10px} #cambiar .bt{margin-top:12px} /* ---------------------------------------- carruseles laterales del pedido -- */ /* Reja de tres columnas en vez de dos capas flotantes: asi los dos laterales aparecen siempre y simetricos. Antes iban en position:fixed y uno se salia. */ .escenario{display:grid;grid-template-columns:1fr;justify-items:center} .escenario .lateral{display:none} @media (min-width:1240px){ .escenario{grid-template-columns:220px minmax(0,1fr) 220px; align-items:start;gap:24px;max-width:1320px;margin-inline:auto} /* scroll propio y arrastrable; sticky para que acompanen la pagina sin desaparecer al llegar al final del formulario */ .escenario .lateral{display:block;position:sticky;top:0;height:100vh; overflow-y:auto;overflow-x:hidden;scrollbar-width:none;scroll-behavior:auto; cursor:grab;overscroll-behavior:contain; -webkit-mask-image:linear-gradient(transparent,#000 15%,#000 85%,transparent); mask-image:linear-gradient(transparent,#000 15%,#000 85%,transparent)} .escenario .lateral::-webkit-scrollbar{display:none} .escenario .lateral.agarrando{cursor:grabbing} .escenario .lateral.agarrando img{pointer-events:none} .cinta{display:flex;flex-direction:column;gap:14px;width:max-content} .cinta img{width:220px;border-radius:14px;display:block} } /* --- las mismas cintas en la parrilla de estilos y en el panel de galeria --- Reutilizan .lateral/.cinta del checkout, pero NO su reja de tres columnas: ahi le robaban el ancho a la parrilla y las casillas quedaban en una tira estrecha con los nombres cortados. Aqui van en position:fixed pegadas a los bordes de la pantalla, asi que la parrilla conserva su ancho de siempre y las cintas son puro adorno lateral. Y son ESTRECHAS —150 px— porque su papel es acompañar, no competir con lo que el cliente ha venido a elegir. */ .lat-parrilla{display:none} @media (min-width:1400px){ /* `bajo-duo` ya no hace falta: el tope dinamico es de todas. */ } @media (min-width:1400px){ /* NO SE ARRASTRAN NI SE HACE SCROLL EN ELLAS: `overflow:hidden` y `pointer-events:none`. En el checkout tiene sentido poder moverlas con el dedo porque son el contenido; aqui son adorno y competir con el scroll de la pagina solo estorba — el raton se queda pillado en la cinta cuando querias bajar. El bucle sigue funcionando: scrollTop se puede mover desde el codigo aunque el usuario no pueda. */ /* MISMO COMPORTAMIENTO EN LAS TRES PANTALLAS. `--tope` lo calcula cintas.js midiendo la cabecera real: vale su altura mientras estas arriba y se cierra a 0 conforme bajas, asi que la cinta nunca se come el logo ni las mascotas y, en cuanto pasas la cabecera, ocupa la pantalla entera. Sigue siendo fixed: no se desplaza con la pagina. */ .lat-parrilla{display:block;position:fixed;top:var(--tope,0px); height:calc(100vh - var(--tope,0px));width:150px; overflow:hidden;pointer-events:none;z-index:0; /* El desvanecido de ARRIBA es largo a proposito: la cinta va en fixed y ocupa toda la altura, asi que sin esto las imagenes llegan enteras a la cabecera y tapan el logo y las dos mascotas. Se apaga del todo en el tercio superior y reaparece ya dentro de la parrilla. Abajo basta un desvanecido corto, que ahi no hay nada que proteger. */ -webkit-mask-image:linear-gradient(transparent 0,#000 7%,#000 90%,transparent 100%); mask-image:linear-gradient(transparent 0,#000 7%,#000 90%,transparent 100%)} .lat-parrilla::-webkit-scrollbar{display:none} /* PEGADAS A LA GALERIA, NO AL BORDE DE LA PANTALLA. Estaban en left:16px y quedaban perdidas en la esquina, tan lejos del contenido que no se leian como parte de el. La columna de contenido mide 680 px centrada, asi que esto las coloca justo a su lado, con 24 px de aire — a la altura de las dos mascotas de la cabecera. */ .lat-parrilla.izq{left:calc(50vw - 340px - 24px - 150px)} .lat-parrilla.der{right:calc(50vw - 340px - 24px - 150px)} .lat-parrilla .cinta{display:flex;flex-direction:column;gap:10px;width:150px} .lat-parrilla .cinta img{width:150px;border-radius:11px;display:block} /* El contenido por encima de las cintas: si la ventana se estrecha, la parrilla las tapa en vez de quedar debajo. Y el sello de "best gift" vive dentro de la cabecera, asi que con esto le pasa por delante a la cinta — que era el otro sitio donde se solapaban. */ main.env, header .env{position:relative;z-index:1} /* EL ORDEN DE CAPAS EN LA CABECERA, y por que hay que desmontar `isolate`. `.hero` lleva `isolation:isolate`, que la convierte en un bloque unico de apilado: con eso puesto, la cinta solo puede estar delante de TODO —incluidos el logo y el sello— o detras de TODO, incluidos los rayos del fondo. No hay termino medio, y lo que hace falta es justo el medio. Quitandolo en pantalla ancha, cada pieza toma su nivel: rayos y huellas del fondo -2 / -1 (siguen detras de todo) las cintas 0 las dos mascotas 0 (no se solapan: empiezan a 430) la columna de texto 1 la tarjeta y su sello 2 y 6 (por delante de la cinta) */ header.hero{isolation:auto} .lat-parrilla{z-index:0} } @media (min-width:1400px){ /* Igual que las de la parrilla: adorno, no contenido. Ver arriba. */ .capa .lat-capa{display:block;position:fixed;top:0;height:100vh;width:150px; overflow:hidden;pointer-events:none;z-index:1; /* El desvanecido de ARRIBA es largo a proposito: la cinta va en fixed y ocupa toda la altura, asi que sin esto las imagenes llegan enteras a la cabecera y tapan el logo y las dos mascotas. Se apaga del todo en el tercio superior y reaparece ya dentro de la parrilla. Abajo basta un desvanecido corto, que ahi no hay nada que proteger. */ -webkit-mask-image:linear-gradient(transparent 0,#000 7%,#000 90%,transparent 100%); mask-image:linear-gradient(transparent 0,#000 7%,#000 90%,transparent 100%)} .capa .lat-capa::-webkit-scrollbar{display:none} .capa .lat-capa .cinta{display:flex;flex-direction:column;gap:10px;width:150px} .capa .lat-capa .cinta img{width:150px;border-radius:11px;display:block} /* Junto al visor, no en el borde de la pantalla — pero SIN colgar de el: el visor cambia de alto segun el paso (elegir / esperando / resultado) y las cintas darian saltos. El visor mide como la columna de contenido. */ .capa .lat-capa.izq{left:calc(50vw - 340px - 24px - 150px)} .capa .lat-capa.der{right:calc(50vw - 340px - 24px - 150px)} /* El visor por encima de las cintas y con su propio fondo, para que al arrastrarlas nada se cuele por debajo del panel. */ .capa .visor{position:relative;z-index:2} } /* Por debajo de 1240 no hay sitio: el movil es para elegir, no para mirar. */ .capa .lat-capa{display:none} /* tallas, una por camiseta */ .tallas{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px;margin-top:12px; padding-top:12px;border-top:1px dashed var(--linea)} .tallas label{display:flex;align-items:center;gap:7px;font-size:13.5px; font-weight:700;color:var(--suave)} .tallas select{font:inherit;font-size:14.5px;font-weight:700;color:var(--tinta); padding:7px 9px;border:1.5px solid var(--linea);border-radius:9px;background:#fff} /* ------------------------------------------------ cantidades y paquete ----- */ .opcion.cantidad{grid-template-columns:52px 1fr auto auto;gap:12px;align-items:center} .opcion.cantidad img{width:52px;height:52px;object-fit:contain;border-radius:8px; background:var(--papel)} .opcion.activa{border-color:var(--mostaza);background:#F5FDFB} .opcion .txt em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--ambar2)} .paso{display:flex;align-items:center;gap:10px} /* 44px es el minimo real en movil. Estos son los toques que construyen una cesta de 118 $ y estaban a 34. */ .paso button{width:44px;height:44px;padding:0;margin:0;border-radius:11px; border:1.5px solid var(--linea);background:var(--papel);color:var(--ambar); font-size:19px;font-weight:800;line-height:1;cursor:pointer} .paso button:disabled{opacity:.35;cursor:default} .paso .n{min-width:18px;text-align:center;font-variant-numeric:tabular-nums;font-size:17px} .opcion.paquete{grid-template-columns:22px 1fr auto;margin-bottom:12px; border-color:var(--mostaza);background:#F5FDFB} .ahorro-total{margin-top:8px;text-align:right;font-weight:800;color:var(--ambar2)} /* --------------------------------------------- portada compacta en escritorio En movil la cabecera puede respirar: se hace scroll de todas formas. En una ventana de escritorio ancha y baja, esos mismos 1052 px dejaban el carrusel entero por debajo del pliegue y la portada parecia un formulario suelto. Aqui se aprieta lo justo para que las muestras asomen sin tocar el movil. */ @media (min-width:1000px){ .hero{padding-top:8px} /* AQUI ESTABA EL PROBLEMA DEL LOGO PEQUEÑO EN ESCRITORIO. Esta regla lo dejaba en 190px y pisaba a la de arriba, asi que subir el valor general no cambiaba nada en un PC — solo en el movil. Venia de cuando la cabecera empujaba el carrusel por debajo del pliegue con el logo de Petoonz, que era una sola linea de texto. El de Sweet Art es otra cosa: lleva el pintor y el juego de la I dentro de la R, y a 190px eso no se ve. Sube a 660 y lo que se aprieta a cambio son los margenes de alrededor, no el logo. */ .marca{width:min(660px,48vw);margin-bottom:4px} .hero h1{font-size:clamp(32px,3.1vw,40px)} .gancho{margin-top:8px;font-size:16.5px} .tarjeta{margin-top:16px;padding:16px} .suelta{padding:16px 18px;gap:4px} .icono{font-size:26px} .rotulo{font-size:17px} .campos{gap:8px;margin-top:11px} .campos label{gap:3px} .campos input,.campos select{padding:9px 12px} .bt{padding:13px} .duo img{top:58px} /* La primera seccion se pega a la tarjeta: es la prueba de que el producto existe, y a 250 px por debajo del pliegue no la veia nadie. */ section:first-of-type{padding-top:22px} section:first-of-type h2{font-size:clamp(25px,2.6vw,31px)} } /* --------------------------------------------------- cuenta del checkout --- El impuesto tiene que verse ANTES de pulsar pagar y con una linea por concepto: un total suelto que no cuadra con la suma de los productos es la razon numero uno por la que se abandona un carrito. */ .envio-a{display:flex;align-items:center;gap:12px;margin-top:8px; font-size:15px;font-weight:700} .envio-a select{flex:1;font:inherit;font-weight:400;padding:11px 12px; border:1.5px solid var(--linea);border-radius:12px;background:#fff;color:inherit} .cuenta{margin-top:18px;padding-top:14px;border-top:1.5px solid var(--linea)} .cuenta .fila{display:flex;justify-content:space-between;align-items:baseline; gap:12px;padding:5px 0;font-size:15.5px;color:var(--suave)} /* display:flex gana al atributo hidden: sin esto la linea del paquete se veia siempre, con un elegante "-$0.00". */ .cuenta .fila[hidden]{display:none} .cuenta .fila b{font-weight:700;color:var(--tinta); font-variant-numeric:tabular-nums} .cuenta .fila.dto,.cuenta .fila.dto b{color:var(--ambar2)} .cuenta .gratis{color:#2E7D32} .cuenta .fila.total{margin-top:8px;padding-top:11px; border-top:1.5px solid var(--linea);font-size:19px;color:var(--tinta); font-weight:800} .cuenta .fila.total b{font-size:23px} .nota-imp{margin-top:8px;font-size:13.5px;line-height:1.45;color:var(--suave)} /* ------------------------------------------------------------- legales ----- Se leen, no se decoran: columna estrecha, interlineado alto y titulos que dejan encontrar la seccion de un vistazo. */ .legal{padding:34px 20px 60px;max-width:min(680px,100%)} .legal .vigor{font-size:13px;letter-spacing:.06em;text-transform:uppercase; color:var(--ambar2);font-weight:800;margin-bottom:20px} /* .apartado ES un
: heredaba el padding:56px 0 global y metia 112 px de aire dentro de cada apartado. */ .legal .apartado{padding:0;margin-bottom:26px} .legal h2{font-size:clamp(19px,3.6vw,22px);margin-bottom:9px} .legal p{margin-bottom:11px;color:#452038;font-size:16.5px;line-height:1.62} .legal ul{margin:0 0 12px;padding-left:22px;color:#452038;font-size:16.5px; line-height:1.62} .legal li{margin-bottom:6px} .otras-legales{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:34px; padding-top:20px;border-top:1.5px solid var(--linea)} .otras-legales a{color:var(--ambar);font-weight:700;font-size:15.5px} .pie-legal{margin-top:9px;display:flex;flex-wrap:wrap;justify-content:center; gap:6px 16px} .pie-legal a{color:inherit;opacity:.75;font-size:13.5px;text-decoration:underline} .pie-legal a:hover{opacity:1} /* ------------------------------------------------------------- el paquete -- Una tarjeta destacada, no una casilla mas de la lista: es la unica oferta del sitio y tiene que verse como tal. Debajo sigue estando TODO suelto. */ .paquete{display:grid;grid-template-columns:auto 1fr auto;align-items:center; gap:12px;position:relative;margin:12px 0 6px;padding:16px 15px; border:2px solid var(--mostaza);border-radius:18px;cursor:pointer; background:linear-gradient(180deg,#FAFEFD,#F2FCF9); box-shadow:0 8px 20px var(--sombra);transition:transform .15s} .paquete:hover{transform:translateY(-1px)} .paquete.activa{background:linear-gradient(180deg,#F6FEFC,#E9F9F5)} .paquete input{width:24px;height:24px;accent-color:var(--ambar)} .marca-paq{position:absolute;top:-11px;left:16px;background:var(--ambar); color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em; padding:3px 10px;border-radius:99px} .cuerpo-paq{display:grid;gap:2px;min-width:0} .cuerpo-paq b{font-size:17.5px} .cuerpo-paq small{font-size:14px;color:var(--ambar2);font-weight:700} .cuerpo-paq em{font-style:normal;font-size:13px;color:var(--suave)} .precio-paq{text-align:right;white-space:nowrap} .precio-paq s{display:block;font-size:13px;color:var(--suave)} .precio-paq b{font-size:20px;font-variant-numeric:tabular-nums} .o-suelto{margin:14px 0 8px;text-align:center;font-size:13px;color:var(--suave); text-transform:uppercase;letter-spacing:.10em;font-weight:700} .opcion.cantidad.dentro{opacity:.62} .incluido{font-size:12.5px;font-weight:800;color:var(--ambar2);white-space:nowrap; grid-column:3 / span 2;justify-self:end} /* display:flex/grid ganan al atributo hidden — ya nos paso con las filas de la cuenta. Sin esto el contador seguia viendose en los productos del paquete. */ .opcion.cantidad .paso[hidden]{display:none} /* En una fila del paquete el precio sobra: lo dice la insignia, y dejarlo empujaba el importe a una segunda linea. */ .opcion.cantidad.dentro .precio{display:none} .opcion.cantidad .ahorro{color:var(--ambar2);font-weight:700;font-size:12.5px} .sin-maqueta{display:grid;place-items:center;width:56px;height:56px;flex:none; border-radius:10px;background:var(--crema);font-size:22px} /* --------------------------------------------------- popup de generacion --- Dos pasos numerados: primero COMO se dibuja, luego QUE quieres. El segundo es el que mas cambia el resultado, asi que se le da mas peso visual que a una etiqueta de "opcional" perdida. */ .paso-num{display:flex;align-items:baseline;gap:9px;margin:16px 0 9px; font-size:15.5px;font-weight:800} .paso-num b{display:grid;place-items:center;width:23px;height:23px;flex:none; border-radius:50%;background:var(--mostaza);color:#33162E;font-size:13px} .paso-num small{font-weight:400;font-size:13px;color:var(--ambar2)} .subs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px} @media (min-width:520px){.subs{grid-template-columns:repeat(3,1fr)}} .sub{display:grid;gap:4px;padding:0 0 9px;text-align:left;cursor:pointer; overflow:hidden; border:1.5px solid var(--linea);border-radius:13px;background:var(--papel); font:inherit;color:inherit;transition:border-color .12s,background .12s} .sub b{font-size:14.5px;line-height:1.2} .sub small{font-size:11.5px;line-height:1.3;color:var(--suave)} .sub.sel{border-color:var(--mostaza);background:#F5FDFB;box-shadow:0 0 0 1px var(--mostaza) inset} .sub.sel small{color:var(--ambar2)} /* display:flex gana al atributo hidden — es la TERCERA vez que muerde en este proyecto. Cada componente nuevo con display necesita su regla [hidden]. */ .ayuda-prompt[hidden],.subs[hidden],.ideas[hidden],.paso-num[hidden]{display:none} .ayuda-prompt{display:flex;gap:8px;margin-top:8px;padding:10px 12px; border-radius:12px;background:#FAFEFD;border:1.5px dashed var(--linea); font-size:13.5px;line-height:1.45;color:var(--suave)} .ayuda-prompt b{color:var(--ambar);flex:none} .ideas{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px} .idea{padding:11px 14px;min-height:44px;border-radius:99px;border:1.5px solid var(--linea); background:var(--papel);font:inherit;font-size:13px;font-weight:700; color:var(--ambar2);cursor:pointer;transition:border-color .12s} .idea:hover{border-color:var(--mostaza)} /* Cinta de modo pruebas. Fea a proposito: tiene que doler verla, para que no se quede puesta el dia que se publique. */ .cinta-pruebas{position:sticky;bottom:0;z-index:50;padding:9px 16px; background:#B3261E;color:#fff;font-size:12.5px;font-weight:700; text-align:center;line-height:1.35} /* La consigna. Va ARRIBA del titular, no debajo: es lo primero que se lee y tiene que ser la misma frase en el acrilico, la web y las redes. */ .consigna{margin:0 auto 10px;text-align:center;font-size:13px;font-weight:800; letter-spacing:.13em;text-transform:uppercase;color:var(--ambar2)} .consigna-pie{font-weight:800;color:var(--ambar2);margin-bottom:4px} /* Paleta del nombre: circulo con el color exacto + su nombre. Sustituye a las miniaturas del rotulo, que sobre un chip crema hacian invisible el blanco. */ .gota{display:block;width:26px;height:26px;border-radius:50%; border:1.5px solid rgba(70,20,48,.20);box-shadow:0 1px 3px var(--sombra)} #tonos .tira{display:grid;justify-items:center;gap:5px;padding:9px 8px; min-width:62px;height:auto} #tonos .tira span{font-size:11px;font-weight:700;color:var(--suave)} #tonos .tira.sel span{color:var(--ambar)} /* La X de cerrar. Es lo primero que busca la gente para volver, y varias ventanas no la tenian: solo habia un boton al final del todo, despues de hacer scroll. */ .visor{position:relative} .cerrar-x{position:absolute;top:10px;right:10px;z-index:5; width:44px;height:44px;padding:0;display:grid;place-items:center; border:1.5px solid var(--linea);border-radius:50%;background:var(--papel); color:var(--suave);font:400 24px/1 ui-rounded,system-ui,sans-serif; cursor:pointer;transition:border-color .12s,color .12s} .cerrar-x:hover{border-color:var(--mostaza);color:var(--ambar)} .cerrar-x[hidden]{display:none} /* El momento de la revelacion. Un titular que entra con el nombre del animal: es lo que convierte "una imagen" en "mi perro". */ .revelado{margin:0 0 12px;text-align:center;font-size:clamp(22px,5.4vw,28px); font-weight:800;letter-spacing:-.02em} .revelado.entra{animation:asoma .45s cubic-bezier(.2,.9,.3,1.2) both} @keyframes asoma{from{opacity:0;transform:scale(.92) translateY(8px)} to{opacity:1;transform:none}} .unico{margin-top:9px;text-align:center;font-size:13px;color:var(--suave)} @media (prefers-reduced-motion:reduce){.revelado.entra{animation:none}} /* La tienda donde esta el cliente: es toda la apuesta del canal y no aparecia en ninguna pantalla. Un QR de un desconocido se convierte en una recomendacion del sitio en el que ya esta de pie. */ .en-tienda{display:inline-flex;align-items:center;gap:7px;margin:0 auto 12px; padding:7px 14px;border-radius:99px;background:var(--papel); border:1.5px solid var(--linea);font-size:13.5px;font-weight:700; color:var(--ambar2)} /* Las tiras horizontales ocultan su barra: sin una pista visual nadie descubre que hay una cuarta tipografia. */ .tiras{mask-image:linear-gradient(90deg,#000 88%,transparent); -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)} /* La fecha limite de la campana. Es la pieza que convierte una intencion vaga en una decision con hora, asi que se ve y no se esconde. */ .urgencia{margin:10px auto 0;padding:8px 15px;border-radius:99px; background:var(--papel);border:1.5px solid var(--linea); font-size:13.5px;font-weight:700;color:var(--ambar2); width:fit-content;max-width:100%;text-align:center;line-height:1.4} .urgencia.corre{border-color:#B3261E;color:#B3261E;background:#FFF5F4} .urgencia b{font-weight:800} .promesa{margin-top:10px;text-align:center;font-size:15px;color:var(--tinta)} .promesa b{color:var(--ambar)} /* EL SELLO. Va siempre, en toda pieza de la marca. Pegado a la ESQUINA DE LA TARJETA, que es donde esta mirando el ojo, y sobresaliendo como un lacre sobre una caja: colgado del hero se quedaba pequeno, se recortaba contra el borde y chocaba con el perro. */ .tarjeta{position:relative} .sello{position:absolute;top:-44px;right:-30px;z-index:6; width:152px;height:auto;transform:rotate(9deg); filter:drop-shadow(0 6px 14px var(--sombra))} @media (min-width:1000px){ .sello{top:-58px;right:-64px;width:210px} } @media (max-width:420px){ .sello{top:-34px;right:-16px;width:124px} } @media (prefers-reduced-motion:no-preference){ .sello{animation:lacre .55s .25s cubic-bezier(.2,.9,.3,1.35) both} } @keyframes lacre{from{opacity:0;transform:rotate(9deg) scale(.55)} to{opacity:1;transform:rotate(9deg) scale(1)}} .sello-pedido{position:static;width:128px;margin:16px auto 4px;transform:none; animation:none} /* Miniatura de la subcategoria. Sin ella el cliente elige a ciegas entre nombres de jerga y no sabe que va a recibir hasta que gasta una previa. */ .sub img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block; border-bottom:1.5px solid var(--linea);margin-bottom:5px} .sub b,.sub small{padding-inline:10px} .sub.sel img{border-bottom-color:var(--mostaza)} /* Selector de idioma del pie. Discreto a proposito: quien lo necesita lo busca y quien no, no debe tropezarse con el. */ .pie-idioma{margin-top:6px} .pie-idioma a{font-size:13.5px;color:var(--ambar2);text-decoration:underline} /* Chips de color. Circulo de muestra + nombre: el circulo es lo que se lee de un vistazo y el nombre lo que lo hace accesible y traducible. `lleno` marca los que quedan fuera al llegar al tope de tres — se apagan en vez de desaparecer, para que se entienda que hay un limite y no que fallan. */ .colores{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px} .colores .color{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 7px; border:2px solid var(--linea);border-radius:99px;background:var(--papel); font:inherit;font-size:14px;font-weight:700;color:inherit;cursor:pointer} .colores .color i{width:17px;height:17px;border-radius:50%;display:block; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)} .colores .color.sel{border-color:var(--mostaza);background:#F4FCFA} .colores .color.lleno{opacity:.4} /* ── EL CARRUSEL POR GRUPOS ──────────────────────────────────────────────── La foto ORIGINAL de cada grupo se marca: sin eso, la cinta vuelve a ser un desfile de imagenes bonitas y se pierde justo lo que la hace util — que el primero de cada tanda es la foto que subio una persona real. El separador es un hueco, no una linea: una linea entre grupos convierte la cinta en una tabla y se lee peor. */ .vitrina .carro figure.origen img{ border:3px solid var(--magenta); box-shadow:0 0 0 3px var(--papel); } .vitrina .carro figure{position:relative} .vitrina .carro figure.origen figcaption{ position:absolute; left:6px; bottom:6px; background:var(--tinta); color:var(--papel); font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; padding:2px 7px; border-radius:5px; } .vitrina .carro .sep-grupo{flex:0 0 26px} /* El titulo del carrusel. Sin el, la cinta se lee como decoracion; con el, como una promesa. Va pegado arriba y con el mismo aire que los pasos. */ .vitrina-titulo{ margin:22px 0 8px; text-align:center; font-size:13px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--magenta); } /* ── EL BOTON MIENTRAS LEE LA FOTO ──────────────────────────────────────── Cambiaba el texto a "revisando" y nada mas. En un movil, con la lectura tardando varios segundos, eso se lee como que el toque no ha hecho nada — y el cliente pulsa otra vez, y otra. El boton esta desactivado, asi que no pasa nada, y la sensacion es que la web esta rota. Un latido lento dice "estoy trabajando" sin texto y sin ocupar sitio. */ #enviar[disabled]{ opacity:1; } #enviar.trabajando{ animation:latido 1.4s ease-in-out infinite; background-image:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.28) 50%, transparent 100%); background-size:200% 100%; } @keyframes latido{ 0% { background-position:200% 0; } 100% { background-position:-200% 0; } } @media (prefers-reduced-motion:reduce){ #enviar.trabajando{ animation:none; } } /* La casilla de no publicar. Con el formato de la de condiciones parecia otra obligacion mas y frenaba: es una preferencia, no un requisito. */ .casilla.casilla-menor{ font-size:12.5px; color:var(--suave); align-items:center; margin-top:-2px; opacity:.8; } .casilla.casilla-menor input{ transform:scale(.85); } .casilla.casilla-menor small{ font-size:12px; opacity:.85; } .casilla.casilla-menor:hover{ opacity:1; } /* ── LAS TARJETAS DE PAQUETE ────────────────────────────────────────────── En rejilla y no en fila: con cuatro paquetes, una fila obliga a desplazar en horizontal justo en el momento de decidir. */ .paquetes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:10px; margin:16px 0 18px; } .paq{ background:var(--papel); border:2px solid var(--linea); border-radius:12px; padding:14px 10px; cursor:pointer; text-align:center; font:inherit; display:flex; flex-direction:column; gap:3px; transition:.14s; } .paq:hover{ border-color:var(--turquesa2); } .paq.sel{ border-color:var(--magenta); background:var(--crema); } .paq b{ font-size:15px; color:var(--tinta); } .paq span{ font-size:12px; color:var(--suave); } .paq em{ font-style:normal; font-weight:800; font-size:19px; color:var(--magenta); margin-top:4px; } #form-compra .campo{ display:block; margin-bottom:10px; } #form-compra .campo span{ display:block; font-size:12.5px; color:var(--suave); margin-bottom:4px; }