/* ═══════════════════════════════════════════════════════════════════════════ CAPA COMÚN — la geometría de la tienda, compartida por TODOS los temas. POR QUÉ EXISTE Cada tema es un CSS completo e independiente. Está bien para la piel (colores, tipografías, bordes, radios), pero la ESTRUCTURA acabó copiada cinco veces: `base` y `mediterraneo` eran idénticos byte a byte, y el bloque del menú desplegable estaba pegado igual en cuatro. Con eso, arreglar el móvil significaba arreglarlo cinco veces — y la quinta se olvida siempre. Aquí vive lo que no debe depender del tema: cabecera, menú, cajón móvil, carrito y checkout en pantalla pequeña. CÓMO SE CARGA DESPUÉS del tema, a propósito (ver layout.php). Casi todo lo de este fichero vive dentro de `@media`, así que en escritorio apenas toca nada y el aspecto de cada tema se queda como estaba; en móvil gana, que es justo lo que hace falta porque en móvil los cinco estaban rotos igual. REGLA AL AÑADIR AQUÍ Si es COLOR, TIPOGRAFÍA o ADORNO → va en el tema. Si es DÓNDE SE COLOCA algo o CÓMO SE COMPORTA al estrechar → va aquí. Variables que puede redefinir un tema (en su `:root`): --cab-lado margen lateral de la cabecera (por defecto 1–2 rem) --cab-pad-v alto del aire de la barra superior (por defecto .85rem) --cajon-fondo fondo del cajón de menú en móvil (por defecto --t-fondo) ═══════════════════════════════════════════════════════════════════════════ */ /* Nada se sale de la pantalla por una imagen: `base` y `mediterraneo` no lo declaraban y una foto de producto grande abría barra horizontal. */ img, video, iframe { max-width: 100%; } /* Oculto a la vista pero NO al teclado ni al lector de pantalla. ⚠ Las casillas del menú lo usan en vez de `hidden`: con `hidden` dejan de recibir foco y el menú se vuelve imposible de abrir sin ratón. */ .visualmente-oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ══ CABECERA ══════════════════════════════════════════════════════════════ Dos filas apiladas: la barra (☰ · marca · buscador · acciones) y la banda del menú. El tema sigue poniendo el fondo, el borde inferior y las fuentes; de aquí en adelante la COLOCACIÓN es de este fichero. ⚠ `padding: 0` pisa el `padding: 1rem 2rem` de los temas. El aire vertical pasa a `.cab-barra` y el lateral a `--cab-lado`, porque la banda del menú tiene que poder llegar de lado a lado y el cajón de móvil colocarse solo. */ .cabecera { display: block; padding: 0; --cab-lado-usado: var(--cab-lado, clamp(1rem, 4vw, 2rem)); } .cab-barra { display: flex; align-items: center; gap: 1.25rem; padding: var(--cab-pad-v, .85rem) var(--cab-lado-usado); } .marca { flex: 0 0 auto; } .cab-barra .buscador { flex: 1 1 260px; min-width: 0; } .cab-barra .acciones { margin-left: auto; flex: 0 0 auto; } /* El icono del carrito solo sale en móvil; en escritorio manda la palabra. */ .carrito-icono { display: none; } .carrito-enlace { display: inline-flex; align-items: center; gap: .35rem; } /* ── hamburguesa y cerrar: fuera de móvil no existen ── */ .cab-hamburguesa, .cab-cerrar, .cab-velo { display: none; } .cab-hamburguesa, .cab-cerrar { cursor: pointer; align-items: center; justify-content: center; /* 44 px es el mínimo de zona táctil que recomienda Apple y mide Google en PageSpeed; por debajo de eso la gente falla el toque y se va. */ width: 44px; height: 44px; margin-left: -10px; flex: 0 0 auto; border-radius: 8px; color: inherit; } .cab-hamburguesa span { display: block; position: relative; width: 20px; height: 2px; background: currentColor; border-radius: 2px; } .cab-hamburguesa span::before, .cab-hamburguesa span::after { content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; border-radius: 2px; } .cab-hamburguesa span::before { top: -6px; } .cab-hamburguesa span::after { top: 6px; } /* el foco se ve: la casilla está oculta, así que el aviso lo da su etiqueta */ .cab-conmutador:focus-visible ~ .cab-barra .cab-hamburguesa, .sub-conmutador:focus-visible + .sub-flecha { outline: 2px solid currentColor; outline-offset: 2px; } /* ══ BANDA DEL MENÚ (escritorio) ═══════════════════════════════════════════ El menú tenía que caber en la MISMA fila que el logo, el buscador y el carrito. Con seis categorías envolvía y empujaba el carrito a una tercera línea. En su propia banda cabe siempre y es donde lo busca la gente. */ .menu-tienda { display: flex; align-items: center; gap: 1.5rem; padding: .1rem var(--cab-lado-usado) .55rem; } .menu-tienda .menu-paginas { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; } .menu-tienda .idiomas { margin-left: auto; flex: 0 0 auto; } /* ── desplegable de categorías ── Se abre al pasar por encima, al tabular dentro (`:focus-within`) y al pulsar la flecha (la casilla). Los tres caminos, sin una línea de JS. */ .menu-desplegable { position: relative; display: inline-flex; align-items: center; gap: .1rem; } .sub-flecha { cursor: pointer; font-size: .7em; line-height: 1; padding: .35rem .2rem; color: inherit; opacity: .75; } .submenu { position: absolute; top: 100%; left: 0; z-index: 60; display: flex; flex-direction: column; min-width: 200px; max-width: min(300px, calc(100vw - 2rem)); background: var(--t-fondo, #fff); border: 1px solid rgba(120, 120, 120, .22); border-radius: 10px; box-shadow: 0 14px 32px rgba(0, 0, 0, .13); padding: .35rem 0; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .13s, transform .13s, visibility .13s; } /* puente invisible: sin él, el ratón cruza el hueco entre el enlace y el panel, el `:hover` se pierde y el desplegable se cierra en la cara */ .submenu::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; } .menu-desplegable:hover > .submenu, .menu-desplegable:focus-within > .submenu, .sub-conmutador:checked ~ .submenu { opacity: 1; visibility: visible; transform: none; } .submenu a { padding: .5rem 1rem; font-size: .875rem; white-space: normal; text-decoration: none; color: inherit; } .submenu a:hover { background: rgba(120, 120, 120, .1); } /** * ⚠ QUIÉN ABRE HACIA LA IZQUIERDA LO DECIDE JS, NO EL SELECTOR. * * Primero se hizo con `:nth-last-child(1 y 2)`, dando por hecho que las dos * últimas categorías son las de la derecha. **Medido en shop.detapasbox.com: * con UNA sola categoría, esa también es la última — y su desplegable de * 200 px se colocaba en x = −92, fuera de la pantalla por la izquierda.** * Un menú entero invisible. * * CSS no sabe dónde cae un elemento en la ventana, así que esa parte la mide * `layout.php` y pone la clase. Por defecto abre a la derecha, que es el caso * normal: si el script no cargara, el menú sigue abriéndose (con `:hover`, * teclado o la flecha) y como mucho se sale un poco por el borde. */ .menu-desplegable.abre-izquierda > .submenu { left: auto; right: 0; } /* ── disposiciones de la cabecera ── ⚠ Los temas las declaraban sobre `.cabecera` (`flex-direction:column`…), y ahora `.cabecera` es un bloque con dos filas dentro: aquellas reglas se quedaron inertes. La disposición es cosa de `.cab-barra`. Solo en escritorio: en móvil manda siempre la barra compacta, porque una cabecera «centrada» en 375 px es otra vez tres filas apiladas. */ @media (min-width: 861px) { .cabecera.disp-centrada .cab-barra { flex-direction: column; text-align: center; gap: .9rem; } .cabecera.disp-centrada .cab-barra .buscador { flex: 0 1 auto; width: 100%; max-width: 560px; margin: 0 auto; } .cabecera.disp-centrada .cab-barra .acciones { margin: 0 auto; } .cabecera.disp-centrada .menu-tienda { justify-content: center; } .cabecera.disp-centrada .menu-tienda .idiomas { margin-left: 1.5rem; } .cabecera.disp-minima .cab-barra .buscador { flex: 0 1 280px; } } /* ══ MÓVIL ═════════════════════════════════════════════════════════════════ Medido antes de tocar nada, en shop.detapasbox.com a 375 px: la cabecera ocupaba 238 px de alto y los submenús salían desplegados. */ @media (max-width: 860px) { .cab-barra { gap: .6rem; flex-wrap: wrap; } .cab-hamburguesa { display: inline-flex; } /* la marca ocupa el hueco del centro y se recorta antes que desbordar */ .marca { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .marca span { font-size: 1.05rem; } /* El buscador baja a su propia línea: con el logo y el carrito al lado no le quedan ni 100 px, y un buscador de 100 px no lo usa nadie. */ .cab-barra .buscador { order: 5; flex: 1 0 100%; max-width: none; } .cab-barra .acciones { gap: .8rem; } .carrito-texto { display: none; } .carrito-icono { display: inline; font-size: 1.2rem; line-height: 1; } /* ── el cajón ── Sale de la izquierda al pulsar ☰. Es `position:fixed`, así que ocupa la ventana entera aunque la cabecera esté pegada arriba. */ .menu-tienda { position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; width: min(320px, 86vw); flex-direction: column; align-items: stretch; gap: 0; padding: 3.2rem 1.1rem 2rem; background: var(--cajon-fondo, var(--t-fondo, #fff)); box-shadow: 0 0 44px rgba(0, 0, 0, .22); overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(-102%); transition: transform .22s ease; border-top: 0; } .cab-conmutador:checked ~ .menu-tienda { transform: none; } .cab-velo { display: block; position: fixed; inset: 0; z-index: 99; background: rgba(0, 0, 0, .45); opacity: 0; visibility: hidden; transition: opacity .22s, visibility .22s; } .cab-conmutador:checked ~ .cab-velo { opacity: 1; visibility: visible; } .cab-cerrar { display: inline-flex; position: absolute; top: .5rem; right: .5rem; font-size: 1.1rem; margin: 0; } /* con el cajón abierto la web de detrás no se mueve; si no, al arrastrar dentro del menú se desplaza la página y se pierde el sitio */ body:has(.cab-conmutador:checked) { overflow: hidden; } .menu-tienda .menu-paginas { flex-direction: column; align-items: stretch; gap: 0; } .menu-tienda .menu-paginas > a, .menu-desplegable > .menu-enlace { display: block; padding: .8rem .2rem; font-size: 1rem; border-bottom: 1px solid rgba(120, 120, 120, .16); } /* ⚠ AQUÍ ESTABA EL DESASTRE. El CSS anterior volvía el submenú `position:static; opacity:1; visibility:visible` para que se viera en móvil — o sea, TODAS las subcategorías de TODAS las categorías salían desplegadas a la vez, una lista interminable antes de llegar a la tienda. Ahora está plegado y lo abre la flecha. */ .menu-desplegable { display: grid; grid-template-columns: 1fr auto; align-items: center; border-bottom: 1px solid rgba(120, 120, 120, .16); } .menu-desplegable > .menu-enlace { border-bottom: 0; } .sub-flecha { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: .9rem; opacity: .6; transition: transform .18s; } .sub-conmutador:checked + .sub-flecha { transform: rotate(180deg); opacity: 1; } .submenu { position: static; grid-column: 1 / -1; display: none; opacity: 1; visibility: visible; transform: none; min-width: 0; max-width: none; background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0 0 .5rem .9rem; } .submenu::before { display: none; } .menu-desplegable:hover > .submenu, .menu-desplegable:focus-within > .submenu { display: none; } .sub-conmutador:checked ~ .submenu { display: flex; } .submenu a { padding: .6rem .2rem; font-size: .9rem; opacity: .85; } /* la última entrada no lleva raya: la de los idiomas ya separa, y dos rayas seguidas con un hueco en medio parecen un fallo de maquetación */ .menu-tienda .menu-paginas > :last-child, .menu-tienda .menu-paginas > :last-child > .menu-enlace { border-bottom: 0; } .menu-tienda .idiomas { margin: 1.2rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(120, 120, 120, .16); } } /* ══ CARRITO EN MÓVIL ══════════════════════════════════════════════════════ Medido: la tabla ocupaba 531 px dentro de un contenedor de 375. El importe y la ✕ de quitar quedaban FUERA de la pantalla, sin barra de desplazamiento que los alcanzara: en un móvil no se podía borrar una línea del carrito. Cada fila pasa a ser una ficha. Las etiquetas de columna las pone el CSS desde `data-etiqueta`, que escribe la plantilla. */ @media (max-width: 760px) { .tabla-carrito { display: block; width: 100%; border: 0; } .tabla-carrito thead { display: none; } .tabla-carrito tbody { display: block; } .tabla-carrito tr { display: block; position: relative; padding: 1rem 2.6rem 1rem 0; border-bottom: 1px solid rgba(120, 120, 120, .2); } .tabla-carrito tr::after { content: ''; display: block; clear: both; } .tabla-carrito td { display: block; border: 0; padding: .12rem 0; text-align: left; } .tabla-carrito .celda-foto { float: left; width: 68px; margin: 0 .9rem .4rem 0; padding: 0; } .tabla-carrito .celda-foto img { width: 68px; height: 68px; object-fit: cover; display: block; } /* el nombre del producto no lleva etiqueta: se lee solo */ .tabla-carrito td[data-etiqueta]::before { content: attr(data-etiqueta) ": "; opacity: .65; font-size: .8em; } .tabla-carrito .celda-nombre { font-weight: 600; padding-bottom: .3rem; } .form-cantidad { display: flex; align-items: center; gap: .4rem; margin-top: .35rem; } .form-cantidad input { width: 4rem; padding: .45rem .5rem; } .form-cantidad button { padding: .45rem .7rem; font-size: .8rem; } /* la ✕ va a la esquina, siempre alcanzable con el pulgar */ .tabla-carrito .celda-quitar { position: absolute; top: .7rem; right: 0; padding: 0; } .tabla-carrito .celda-quitar::before { content: none; } .tabla-carrito .celda-quitar button { width: 40px; height: 40px; font-size: 1rem; } .totales { max-width: none; } .acciones-carrito { justify-content: stretch; flex-direction: column; align-items: stretch; gap: .8rem; } .acciones-carrito > * { text-align: center; } .acciones-carrito .boton-principal { order: -1; padding: .9rem 1.2rem; } .acciones-carrito .form-vaciar button { width: 100%; } } /* ══ CHECKOUT EN MÓVIL ═════════════════════════════════════════════════════ El resumen sube POR ENCIMA del formulario. En el orden del HTML va después —que es lo correcto en escritorio, donde se ve a la derecha—, pero en un móvil eso obliga a rellenar diez campos a ciegas y solo entonces enterarse de cuánto suma el envío. */ @media (max-width: 820px) { .checkout { grid-template-columns: 1fr; gap: 1.6rem; } .checkout-resumen { order: -1; } } @media (max-width: 560px) { .fila-doble { grid-template-columns: 1fr; } .checkout-form .boton-principal.grande { width: 100%; text-align: center; } } /* ⚠ 16 px como mínimo en TODO campo de formulario. Por debajo, Safari en iPhone hace zoom automático al tocarlo y deja la página torcida y con barra horizontal — el usuario cree que la web se ha roto. No es estética: es la causa nº1 de checkouts abandonados en iOS. */ @media (max-width: 860px) { /* ⚠ `!important`, y con motivo. Los temas afinan el tamaño con selectores más específicos (`.campo input { font-size: .95rem }` = 15,2 px medidos en gourmet), así que una regla sobre `input` a secas pierde siempre. Aquí no hay matiz de diseño que valer: por debajo de 16 px Safari hace zoom y el checkout se rompe. Es un mínimo, no una preferencia. */ /* Los botones NO entran: no provocan el zoom (solo lo hacen los campos que reciben el cursor) y forzarles 16 px reventaría los botones pequeños. */ input, select, textarea { font-size: max(16px, 1rem) !important; } .contenido { padding-left: 1.1rem; padding-right: 1.1rem; } } /* Cualquier tabla que se cuele en una página libre se desplaza dentro de su caja en vez de estirar el documento entero. */ @media (max-width: 760px) { .texto-legal table, .sec-cuerpo table { display: block; overflow-x: auto; max-width: 100%; } } /* ══ VISOR DE IMÁGENES ═════════════════════════════════════════════════════ Una foto de producto al tamaño de su columna no deja leer una etiqueta ni ver el detalle de un tejido, y eso es parte de decidir la compra. Hasta el 01/08/2026 no había forma de ampliarla: pulsarla no hacía nada. `` nativo — el fondo, la tecla Escape y la trampa de foco los pone el navegador. Va en la capa común porque es estructura: cualquier tema lo hereda sin escribir una línea. */ [data-zoom] { cursor: zoom-in; } #visor { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; overflow: visible; /* ⚠ `inset:0; margin:auto` A MANO. El navegador centra los justo con eso, pero los temas abren con `* { margin: 0 }` y se lo comen: el visor salía pegado a la esquina superior izquierda. */ inset: 0; margin: auto; /* se ajusta a la foto en vez de reservar un ancho fijo, así la ✕ queda siempre pegada a la esquina de la imagen y no flotando en el vacío */ width: fit-content; } #visor::backdrop { background: rgba(0, 0, 0, .84); } #visor img { display: block; margin: 0 auto; /* ⚠ Las fotos del catálogo son de 400×400. Enseñarlas a pantalla completa las dejaría borrosas, así que se amplían hasta 720 px como mucho: se ve bastante más grande que en la ficha y todavía nítido. Si algún día PRODUCTOS guarda originales grandes, subir este tope. */ /* `width` y no `max-width`: con `max-width` una foto de 400 px se enseña a 400 px y el visor no se nota. Se amplía a 640 (1,6× sobre el original del catálogo), que se ve claramente más grande y todavía nítido. */ width: min(640px, 96vw); height: auto; max-height: 92vh; object-fit: contain; border-radius: 6px; background: #fff; cursor: default; /* dentro de la foto no se cierra */ } .visor-cerrar { position: absolute; top: -2.6rem; right: 0; width: 40px; height: 40px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; } .visor-cerrar:hover { background: rgba(255, 255, 255, .26); } /* en móvil no hay hueco por encima: la ✕ se mete dentro, arriba a la derecha */ @media (max-width: 640px) { .visor-cerrar { top: .5rem; right: .5rem; background: rgba(0, 0, 0, .55); } } /* ══ FRANJA A TODO EL ANCHO ════════════════════════════════════════════════ `ancho = completo` en cualquier bloque. La franja sale de la columna de contenido y llega de borde a borde; lo de dentro sigue centrado, que es lo que se espera de un hero o de una franja de color. ⚠ `overflow-x: clip` en el body, y tiene que ser `clip` y NO `hidden`: `hidden` convierte el body en contenedor de desplazamiento y **la cabecera fija deja de pegarse**. `clip` recorta sin crear ese contenedor. Hace falta porque `50vw` incluye el ancho de la barra de desplazamiento: sin recortar, aparece una barra horizontal de unos 15 px en escritorio. */ body { overflow-x: clip; } .franja.ancho-completo { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* el contenido vuelve a su columna: franja ancha, texto legible */ .franja.ancho-completo > * { max-width: 1100px; margin-inline: auto; padding-inline: 1.25rem; } /* …salvo el hero, que ya trae su propio relleno y quiere la foto entera */ .franja.ancho-completo > .sec-hero { max-width: none; padding-inline: 0; } /* Alineación del bloque (campo común `alineacion`). `izquierda` no genera clase: es el valor por defecto y así el HTML no lleva nada de más. */ .franja.texto-centro { text-align: center; } .franja.texto-derecha { text-align: right; } /* lo que va centrado con márgenes automáticos tiene que seguir centrado */ .franja.texto-centro .sec-cuerpo, .franja.texto-derecha .sec-cuerpo { margin-inline: auto; } /* Tamaño del texto del bloque (campo común `tamano`). ⚠ Es una VARIABLE, no un `font-size`. Los temas miden en `rem`, que es relativo a la raíz y **no hereda del padre**: poner `font-size` en la franja no cambiaba nada (medido: un h2 seguía en 32px). Cada tema multiplica sus propios tamaños de sección por `var(--tam, 1)`, así conserva sus proporciones y la escala llega igual en los cinco. */ .franja.tam-pequeno { --tam: .88; } .franja.tam-grande { --tam: 1.2; } /* ══ BLOG ═══════════════════════════════════════════════════════════════ La tarjeta de entrada reutiliza `.tarjeta` del catálogo a propósito: el blog tiene que parecer la misma web, no un añadido. Aquí solo va lo que una entrada tiene y un producto no (fecha, resumen) y el ajuste de la foto, que en un blog es apaisada y no cuadrada. */ .blog-cabeza { margin: 0 0 1.6rem; } .blog-cabeza h1 { margin: 0 0 .4rem; } .blog-intro { max-width: 60ch; opacity: .8; margin: 0; } .blog-vacio { opacity: .7; padding: 2rem 0; } .blog-tarjeta .tarjeta-foto { aspect-ratio: 16 / 9; } .blog-fecha { display: block; font-size: .8rem; opacity: .65; margin-bottom: .2rem; } .blog-resumen { margin: .35rem 0 .6rem; font-size: .92rem; opacity: .85; } .blog-mas { font-size: .9rem; font-weight: 600; } /* Parrilla del bloque «últimas del blog». Sin `col-*` hereda la del catálogo, que es la que usa el listado del blog. */ .blog-parrilla.col-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); } .blog-parrilla.col-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); } .blog-parrilla.col-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); } .paginacion { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin: 2.2rem 0 .5rem; } .paginacion-pos { font-size: .85rem; opacity: .6; } /* ── una entrada ─────────────────────────────────────────────────────── */ .entrada { max-width: 760px; margin: 0 auto; } .entrada-migas { font-size: .85rem; margin: 0 0 .8rem; } .entrada-cabeza h1 { margin: 0 0 .3rem; } .entrada-resumen { font-size: 1.05rem; opacity: .8; margin: .7rem 0 0; } .entrada-foto { width: 100%; height: auto; border-radius: 12px; margin: 1.4rem 0; cursor: zoom-in; } /* ⚠ Los bloques a ancho completo dentro de una entrada siguen valiendo: la franja se sale de la columna con el mismo truco de la portada. Sin esto, «ancho completo» dentro de una entrada no se notaría. */ .entrada-cuerpo .franja.ancho-completo { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .sec-mas { text-align: center; margin-top: 1.4rem; } /* ══ MÓDULOS INSERTABLES ════════════════════════════════════════════════ */ /* Chat flotante. Vive en el pie del DOM (para salir en todas las páginas) pero es fijo en pantalla. ⚠ El z-index queda por DEBAJO del visor de imágenes (, que va en su propia capa) y por ENCIMA del contenido: si se pisaran, el botón taparía la foto ampliada de un producto. */ .chat-flotante { position: fixed; bottom: 1.1rem; z-index: 60; display: inline-flex; align-items: center; gap: .5rem; padding: .7rem .95rem; border-radius: 999px; background: #25d366; color: #fff; text-decoration: none; box-shadow: 0 6px 20px rgba(0, 0, 0, .22); font-weight: 600; font-size: .92rem; } .chat-flotante.lado-derecha { right: 1.1rem; } .chat-flotante.lado-izquierda { left: 1.1rem; } .chat-flotante:hover { filter: brightness(1.05); } /* En móvil solo el icono: con texto se come un tercio del ancho justo encima del botón de comprar. */ @media (max-width: 560px) { .chat-texto { display: none; } } /* Sello Verify */ .pie-verify .sello-verify { opacity: .9; margin-bottom: .35rem; } .verify-texto { margin: 0 0 .3rem; } .verify-codigo { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; opacity: .8; margin: 0; } /* ══ ESTADO DEL PEDIDO Y DATOS DE PAGO (página de confirmación) ═════════ La página se revisita desde el correo del comprador: es su seguimiento. */ .estado-pedido { display: flex; gap: .5rem; flex-wrap: wrap; margin: .6rem 0 1rem; } .chip { font-size: .78rem; font-weight: 700; padding: .25rem .7rem; border-radius: 999px; background: #ececef; letter-spacing: .02em; } .chip-enviado { background: #d9efe0; color: #1f7a3d; } .chip-cancelado, .chip-pago-reembolsado { background: #f6dfdc; color: #a33025; } .chip-pago-pendiente { background: #fdeeda; color: #a35a00; } .chip-pago-pagado { background: #d9efe0; color: #1f7a3d; } /* ⚠ Lista, no tabla. Con `` el navegador reparte el ancho entre las celdas y en una columna estrecha el IBAN se partía en seis líneas — justo el dato que hay que copiar sin fallar un carácter. */ .datos-transferencia { margin: .7rem 0 .4rem; } .datos-transferencia dt { font-weight: 600; opacity: .7; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; margin-top: .85rem; } .datos-transferencia dt:first-child { margin-top: 0; } .datos-transferencia dd { margin: .15rem 0 0; } .dato-copiable { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .dato-copiable code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.02rem; letter-spacing: .04em; overflow-wrap: anywhere; } .copiar { border: 1px solid var(--linea, #e6e2da); background: var(--fondo-tarjeta, #fff); border-radius: 7px; padding: .28rem .6rem; font-size: .78rem; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .copiar:hover { border-color: #c9c3b8; } .copiar.copiado { background: #eaf6ec; border-color: #bfe0c6; color: #1d6b32; } /* ⚠ el IBAN en monoespaciada y agrupado de 4 en 4: se COPIA a mano en la web del banco; una fuente proporcional y sin grupos es cómo se cuelan los bailes de dígitos que el módulo 97 del panel intenta evitar */ .datos-transferencia .iban { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; } .pago-nota { font-size: .9rem; opacity: .8; } /* ── selector de método de pago (checkout, cuando hay más de uno) ────── */ .metodo-opcion { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; } .metodo-opcion input { margin-top: .3rem; } .metodo-opcion small { display: block; opacity: .75; } .metodo-opcion:has(input:checked) { outline: 2px solid var(--acento, #1c1c1e); border-radius: 10px; } /* ══ CUENTA DEL COMPRADOR ═══════════════════════════════════════════════ Andreu: «confianza al 100% con quien compra». Eso se gana enseñando el estado sin que lo pidan, no escondiéndolo tras un formulario de contacto. */ /* ⚠ Andreu, 06/08/2026: *«toda esa pantalla del usuario tiene que ser más grande, ahora es una columna bastante pequeña»*. 820 px daba para una lista de pedidos de una línea; con estado, pago, envío, seguimiento y la conversación dentro, ahogaba. Se sube a 1040, el ancho del contenido. */ .cuenta { max-width: 1040px; margin: 0 auto; } .cuenta-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem; } .cuenta-cabeza h1 { margin: 0 0 .2rem; } .cuenta-quien { margin: 0; opacity: .8; } .cuenta-quien span { display: block; font-size: .85rem; opacity: .7; } .cuenta-salir { font-size: .9rem; } .cuenta-vacia { text-align: center; padding: 2.5rem 1rem; opacity: .85; } .pedido-tarjeta { border: 1px solid rgba(0, 0, 0, .1); border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 1rem; } .pedido-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; flex-wrap: wrap; margin-bottom: .7rem; } .pedido-num { font-size: 1.02rem; } .pedido-fecha { display: block; font-size: .82rem; opacity: .65; } .pedido-chips { display: flex; gap: .4rem; flex-wrap: wrap; } .pedido-lineas { list-style: none; margin: 0 0 .8rem; padding: 0; font-size: .93rem; } .pedido-lineas li { display: flex; justify-content: space-between; gap: 1rem; padding: .28rem 0; border-bottom: 1px dashed rgba(0, 0, 0, .08); } .pedido-pie { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; } .pedido-acciones { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; } .chip-factura { background: #d9efe0; color: #1f7a3d; } .nota-mini { font-size: .8rem; opacity: .65; } .boton-mini { padding: .4rem .9rem; font-size: .88rem; } .enlace-accion { font-size: .9rem; font-weight: 600; } /* entrar sin contraseña */ .cuenta-entrar { max-width: 460px; margin: 0 auto; text-align: center; } .form-entrar { display: grid; gap: .8rem; margin: 1.4rem 0 .8rem; text-align: left; } .form-entrar input { width: 100%; } .nota-entrar { font-size: .86rem; opacity: .7; } .aviso-ok { background: #d9efe0; color: #14532d; padding: 1rem 1.2rem; border-radius: 10px; text-align: left; } .aviso-error { background: #f6dfdc; color: #a33025; padding: .8rem 1rem; border-radius: 10px; margin-bottom: 1rem; } .cuenta-enlace { display: inline-flex; align-items: center; gap: .35rem; } @media (max-width: 560px) { .cuenta-texto { display: none; } } /* ══ CAPA MODERNA (06/08/2026) ══════════════════════════════════════════ Andreu: «css cutres, campos cutres, parece diseño de hace muchos años». Lo que separa una tienda de 2026 de una de 2015 son cuatro cosas, y ninguna es un color: el foco como ANILLO, sombras EN CAPAS, transiciones cortas, y radios generosos. Va al final para ganar por orden a lo que traiga cada tema, sin tocar los temas. */ :root { --r-chico: 10px; --r: 14px; --r-grande: 18px; /* dos capas, muy suaves: una de contacto y otra difusa. Una sola sombra dura es la marca de la web de hace diez años. */ --sombra-1: 0 1px 2px rgba(16, 24, 40, .05); --sombra-2: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 28px -10px rgba(16, 24, 40, .16); } /* iconos: heredan color y tamaño del texto y no se aplastan en un flex */ .ico { flex-shrink: 0; vertical-align: -.18em; } /* ── CAMPOS ──────────────────────────────────────────────────────────── ⚠ 16px en móvil o Safari hace ZOOM al enfocar y descoloca el checkout — es el fallo de formulario móvil más viejo que existe y sigue vivo. */ input[type=text], input[type=email], input[type=tel], input[type=number], input[type=search], input[type=password], select, textarea { border: 1px solid rgba(0, 0, 0, .14); border-radius: var(--r-chico); padding: .7rem .85rem; font: inherit; font-size: .95rem; background: #fff; color: inherit; width: 100%; transition: border-color .15s ease, box-shadow .15s ease; } input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) { border-color: rgba(0, 0, 0, .26); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acento, #1c1c1e); /* el anillo, no el outline azul del navegador */ box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento, #1c1c1e) 16%, transparent); } ::placeholder { color: #9a9ea4; } @media (max-width: 600px) { input, select, textarea { font-size: 16px; } } /* ── BOTONES ─────────────────────────────────────────────────────────── ⚠ El translateY(1px) al pulsar es lo que hace que un botón se sienta físico. Sin él, parece un dibujo. */ .boton-principal, button[type=submit] { border-radius: 999px; font-weight: 650; letter-spacing: -.006em; transition: transform .08s ease, box-shadow .18s ease, filter .18s ease; } .boton-principal:hover, button[type=submit]:hover { box-shadow: var(--sombra-2); filter: brightness(1.04); } .boton-principal:active, button[type=submit]:active { transform: translateY(1px); box-shadow: none; } .boton-principal:focus-visible, button:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento, #1c1c1e) 24%, transparent); } /* ── TARJETAS ────────────────────────────────────────────────────────── La imagen sube un pelo al pasar por encima: cuesta nada y hace que la parrilla se sienta viva. */ .tarjeta { border-radius: var(--r); overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; } .tarjeta:hover { box-shadow: var(--sombra-2); } .tarjeta-foto img { transition: transform .35s cubic-bezier(.2, .7, .3, 1); } .tarjeta:hover .tarjeta-foto img { transform: scale(1.035); } .sin-foto { color: #c8ccd2; } /* chips y pedidos, con la forma de la casa */ .chip { display: inline-flex; align-items: center; gap: .35rem; } .pedido-tarjeta { border-radius: var(--r); box-shadow: var(--sombra-1); border-color: rgba(0, 0, 0, .08); transition: box-shadow .2s ease; } .pedido-tarjeta:hover { box-shadow: var(--sombra-2); } /* la marca ✓ / ✕ de la confirmación, en círculo */ .gracias-tit { display: flex; align-items: center; gap: .7rem; } .gracias-marca { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; } .gracias-marca.ok { background: #d9efe0; color: #1f7a3d; } .gracias-marca.mal { background: #f6dfdc; color: #a33025; } /* ⚠ Respeta a quien pide menos movimiento: no es un extra, es accesibilidad y algunas personas se marean de verdad con las transiciones. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ══════════════════════════════════════════════════════════════════════════ PERFIL DEL COMPRADOR — pestañas, agenda de direcciones y compra rápida (06/08/2026). Andreu: «si está logueado no tiene que volver a pedir sus datos, tiene que ser una compra rápida». ══════════════════════════════════════════════════════════════════════════ */ /* ── pestañas de la cuenta ─────────────────────────────────────────────── */ .cuenta-pestanas { display:flex; gap:4px; margin:22px 0 24px; border-bottom:1px solid var(--linea,#e6e2da); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .cuenta-pestanas::-webkit-scrollbar { display:none; } .cuenta-pestanas a { display:inline-flex; align-items:center; gap:7px; padding:11px 16px; white-space:nowrap; text-decoration:none; color:var(--texto-suave,#6b6b6b); font-weight:500; font-size:.95rem; /* ⚠ El subrayado va en el propio enlace y NO mueve el texto al activarse (borde transparente cuando está inactivo). Si apareciera de la nada, la fila entera daría un salto de 2px al cambiar de pestaña. */ border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s, border-color .15s; } .cuenta-pestanas a:hover { color:var(--texto,#1c1c1e); } .cuenta-pestanas a.activa { color:var(--texto,#1c1c1e); border-bottom-color:currentColor; } .cuenta-pestanas .ico { opacity:.75; } .cuenta-ok { display:flex; align-items:center; gap:8px; margin:0 0 18px; padding:11px 14px; background:#eaf6ec; color:#1d6b32; border-radius:var(--r,10px); font-size:.92rem; } .cuenta-intro { color:var(--texto-suave,#6b6b6b); font-size:.92rem; margin:0 0 16px; max-width:56ch; } .pedido-envio { display:flex; align-items:center; gap:7px; margin:10px 0 0; padding-top:10px; border-top:1px dashed var(--linea,#e6e2da); color:var(--texto-suave,#6b6b6b); font-size:.86rem; } /* ── agenda de direcciones ─────────────────────────────────────────────── */ .dir-parrilla { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); margin-bottom:22px; } .dir-tarjeta { position:relative; padding:18px; border:1px solid var(--linea,#e6e2da); border-radius:var(--r,12px); background:var(--fondo-tarjeta,#fff); box-shadow:var(--sombra-1,0 1px 2px rgba(0,0,0,.04)); } .dir-tarjeta.es-defecto { border-color:var(--texto,#1c1c1e); } /* ⚠ La cabecera es FLEX, no un `float`. Con float, el chip «Predeterminada» se metía dentro del título y partía «Prueba Stripe Claude» en tres líneas contra el chip. Un float mete el texto ALREDEDOR; aquí queremos AL LADO. */ .dir-tarjeta-cabeza { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:8px; } .dir-tarjeta-cabeza strong { min-width:0; overflow-wrap:anywhere; } .dir-tarjeta p { margin:0; color:var(--texto-suave,#6b6b6b); font-size:.88rem; line-height:1.55; } .chip-defecto { display:inline-flex; align-items:center; gap:4px; flex:0 0 auto; white-space:nowrap; background:var(--texto,#1c1c1e); color:#fff; } .dir-acciones { display:flex; gap:14px; margin-top:14px; flex-wrap:wrap; } /* ⚠ Estos «enlaces» son