/* Épsilon · papelería, regalos y bazar (Conchillas). Celular primero.
   Dirección: lujo editorial (serif de alto contraste, mucho blanco) con el rosa del logo y un detalle dorado. */

:root {
    --papel: #FFFFFF;
    --rubor: #FBEAF0;
    --rosa: #F2B8CC;
    --frambuesa: #B0245A;
    --frambuesa-osc: #8E1B48;
    --tinta: #1E1A1D;
    --gris: #6E6468;
    --linea: #EAD9E0;
    --oro: #B08D57;
    --serif: 'Fraunces', Georgia, serif;
    --sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --cab: 64px;
    --radio: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Sin scroll-padding-top: el navegador lo usa también al escribir en un campo y, como la lupa está en la cabecera
   (dentro de esa franja «tapada»), con cada tecla deslizaba la página para «mostrarla». Los enlaces internos
   calculan el margen de la cabecera en epsilon.js. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; }
h2[tabindex="-1"]:focus { outline: none; }
/* una palabra destacada en manuscrita dentro de los títulos, en frambuesa */
.manuscrita { font-family: 'Allura', 'Brush Script MT', cursive; font-weight: 400; font-style: normal; font-variation-settings: normal;
    font-size: 1.32em; line-height: .8; letter-spacing: 0; color: var(--frambuesa); padding: 0 .04em; }
/* Fraunces con el eje "suave": terminaciones redondeadas, en la línea de las letras del logo */
.portada h1, .seccion__titulo, .como h2, .marcas h2, .nosotros h2, .pie h2, .hoja h2, .datos h3, .listo h3, .marca__nombre, .pasos li::before, .carrito__vacio p { font-variation-settings: 'SOFT' 100, 'WONK' 0; }
.portada h1 { font-variation-settings: 'SOFT' 100, 'WONK' 1; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--frambuesa); outline-offset: 3px; border-radius: 4px; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--tinta); color: #fff; padding: 10px 14px; border-radius: var(--radio); }
.saltar:focus { top: 12px; }
.envoltura { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 700px) { .envoltura { padding: 0 28px; } }

/* ---------- Botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; border: 1px solid var(--frambuesa); border-radius: 999px; background: var(--frambuesa); color: #fff; font-weight: 600; font-size: 15px; letter-spacing: .01em; text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
.boton:hover { background: var(--frambuesa-osc); border-color: var(--frambuesa-osc); }
.boton svg { width: 20px; height: 20px; flex: none; }
.boton--borde { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.boton--borde:hover { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.boton--chico { min-height: 40px; padding: 0 16px; font-size: 14px; width: 100%; }
.boton--ancho { width: 100%; }
.boton:disabled { opacity: .45; cursor: not-allowed; background: transparent; color: var(--gris); border-color: var(--linea); }
.enlace { color: var(--tinta); font-weight: 600; text-decoration: underline; text-decoration-color: var(--oro); text-underline-offset: 5px; text-decoration-thickness: 1px; }
.enlace:hover { color: var(--frambuesa); }
.icono-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; position: relative; }
.icono-btn:hover { background: var(--rubor); }
.icono-btn svg { width: 24px; height: 24px; }

/* ---------- Franja de avisos ---------- */
.aviso { background: var(--tinta); color: #fff; font-size: 13px; }
.aviso__fila { display: flex; justify-content: center; gap: 28px; min-height: 36px; align-items: center; }
.aviso span { display: inline-flex; align-items: center; gap: 8px; }
.aviso svg { width: 17px; height: 17px; color: var(--rosa); }
.aviso__otro { display: none !important; }
@media (min-width: 600px) { .aviso__otro { display: inline-flex !important; } }
/* en el celular la franja no va: le sacaba alto al banner al abrir la página */
@media (max-width: 899px) { .aviso { display: none; } }

/* ---------- Cabecera ---------- */
.cabecera { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .985); border-bottom: 1px solid var(--linea); }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; height: var(--cab); }
.cabecera__marca { display: block; color: var(--tinta); }
.cabecera__marca img { height: 44px; width: auto; }
.cabecera__acciones { display: flex; gap: 2px; margin-right: -8px; }
.cabecera__nav { display: none; }
.cabecera__desplegar { display: inline-flex; align-items: center; gap: 4px; padding: 8px 0; border: 0; background: none; font-size: 15px; font-weight: 500; }
.cabecera__desplegar svg { width: 18px; height: 18px; transition: transform .2s; }
.cabecera__desplegar[aria-expanded="true"] svg { transform: rotate(180deg); }
.cabecera__desplegar:hover, .cabecera__desplegar[aria-expanded="true"] { color: var(--frambuesa); }
/* menú grande de Productos (compu) */
.megamenu { max-height: calc(100vh - var(--cab) - 60px); overflow-y: auto; position: absolute; left: 0; right: 0; top: 100%; background: var(--papel); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--oro); box-shadow: 0 24px 40px -28px rgba(30, 26, 29, .35); }
.megamenu__grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 28px 32px; padding-top: 28px; padding-bottom: 32px; }
.megamenu__col ul { list-style: none; margin: 6px 0 0; padding: 0; }
.megamenu button { padding: 5px 0; border: 0; background: none; text-align: left; font-size: 15px; color: #3d3539; }
.megamenu button:hover { color: var(--frambuesa); }
.megamenu__raiz { display: block; font: 500 19px/1.25 var(--serif) !important; font-variation-settings: 'SOFT' 100; color: var(--tinta) !important; }
.megamenu__raiz:hover { color: var(--frambuesa) !important; }
.megamenu .megamenu__mas { color: var(--frambuesa); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.megamenu__col--destacada { display: grid; align-content: start; gap: 6px; padding-right: 24px; border-right: 1px solid var(--linea); }
@media (max-width: 899px) { .megamenu { display: none !important; } }
@media (min-width: 900px) {
    .cabecera__nav { display: flex; gap: 30px; margin: 0 auto 0 48px; }
    .cabecera__nav a { position: relative; padding: 8px 0; font-size: 15px; font-weight: 500; text-decoration: none; }
    .cabecera__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--oro); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
    .cabecera__nav a:hover::after { transform: scaleX(1); }
    .solo-celular { display: none !important; }
}
/* solo en la compu (en el celular, por ejemplo, la lupa: ahí el buscador está en el catálogo) */
@media (max-width: 899px) { .solo-compu { display: none !important; } }
.menu__titulo { margin: 22px 0 4px; font-size: 13px; font-weight: 600; color: var(--gris); }
.menu { list-style: none; margin: 18px 0 0; padding: 0; }
.menu li { border-bottom: 1px solid var(--linea); }
.menu a, .menu button { display: flex; align-items: center; width: 100%; padding: 13px 0; border: 0; background: none; text-align: left; font: 500 22px/1.2 var(--serif); font-variation-settings: 'SOFT' 100; text-decoration: none; }
.menu a:hover, .menu button:hover { color: var(--frambuesa); }
.menu--categorias a, .menu--categorias button { font-size: 19px; }
.menu__direccion { display: flex; gap: 8px; align-items: flex-start; margin: 22px 0 0; color: #3d3539; font-size: 15px; }
.menu__direccion svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--frambuesa); }
.menu__redes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.menu__redes a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--linea); border-radius: 999px; font-weight: 500; text-decoration: none; }
.menu__redes svg { width: 20px; height: 20px; }
.bolsa__cuenta { position: absolute; top: 4px; right: 2px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--frambuesa); color: #fff; font-size: 11px; font-weight: 700; line-height: 19px; text-align: center; }
.bolsa__cuenta.salto { animation: salto .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes salto { 40% { transform: scale(1.35); } }
.buscador { border-top: 1px solid var(--linea); padding: 10px 0; }
.buscador input { width: 100%; height: 46px; padding: 0 16px; border: 1px solid var(--linea); border-radius: 999px; background: var(--papel); font-size: 16px; }
.buscador input:focus { outline: none; border-color: var(--frambuesa); box-shadow: 0 0 0 3px rgba(176, 36, 90, .12); }

/* ---------- Portada ---------- */
.portada { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; min-height: calc(100svh - var(--cab) - 36px); text-align: center; border-bottom: 1px solid var(--linea);
    background:
        radial-gradient(42% 38% at 78% 30%, rgba(242, 184, 204, .55), transparent 70%),
        radial-gradient(36% 30% at 18% 78%, rgba(245, 196, 213, .5), transparent 70%),
        var(--rubor); }
@media (max-width: 899px) { .portada { min-height: calc(100svh - var(--cab)); } } /* sin la franja de avisos, el banner llena la pantalla */
.portada__contenido { width: 100%; }
.portada__bajar { position: absolute; left: 50%; bottom: 14px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin-left: -22px; border-radius: 50%; color: var(--tinta); animation: resorte 3.6s linear infinite; }
.portada__bajar svg { width: 26px; height: 26px; }
/* oscilación amortiguada: cada rebote más chico, como un resorte con rozamiento, y después quieta un rato */
@keyframes resorte {
    0% { transform: translateY(0); } 6% { transform: translateY(11px); } 12% { transform: translateY(-6px); }
    18% { transform: translateY(3.5px); } 24% { transform: translateY(-2px); } 30% { transform: translateY(1px); }
    36% { transform: translateY(-.4px); } 42%, 100% { transform: translateY(0); }
}
/* Las manchas se calculan una vez; se mueven con transform y opacity (los hace la placa de video, a 60 cuadros).
   Son más grandes que la portada para que al derivar nunca se vea el borde. */
.portada__capa { position: absolute; left: -14%; top: -14%; width: 128%; height: 128%; z-index: 0; opacity: .7; will-change: transform, opacity; }
.portada__capa--a { animation: deriva-a 13s ease-in-out infinite alternate, entrar-capa 1.2s ease-out both; }
.portada__capa--b { opacity: 0; animation: deriva-b 17s ease-in-out infinite alternate, fundido 9s ease-in-out 1.2s infinite alternate; }
/* el ruido fractal se calcula a la mitad de resolución y se agranda: 4 veces menos píxeles (en el celular tardaba en aparecer) */
.portada__acuarela { position: absolute; left: 0; top: 0; width: 50%; height: 50%; transform: scale(2); transform-origin: 0 0; }
@keyframes entrar-capa { from { opacity: 0; } to { opacity: .7; } }
@keyframes deriva-a { from { transform: translate3d(0, 0, 0) scale(1) rotate(0); } to { transform: translate3d(-6%, 4%, 0) scale(1.14) rotate(-5deg); } }
@keyframes deriva-b { from { transform: translate3d(5%, -3%, 0) scale(1.12) rotate(4deg); } to { transform: translate3d(-3%, 5%, 0) scale(1) rotate(-3deg); } }
@keyframes fundido { from { opacity: 0; } to { opacity: .75; } }
.portada__contenido { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding-top: 40px; padding-bottom: 52px; }
.portada__sello { display: grid; place-items: center; width: 150px; height: 150px; border-radius: 50%; background: #fff;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .55), 0 0 0 6px var(--oro), 0 22px 44px -22px rgba(142, 27, 72, .45); }
.portada__sello img { width: 82%; height: auto; } /* cuadrado y centrado en el círculo que envuelve al dibujo: queda parejo contra el aro */
.portada h1 { margin-top: 28px; font: 500 clamp(40px, 10.5vw, 80px)/1.04 var(--serif); letter-spacing: -.01em; max-width: 11ch; font-optical-sizing: auto; }
.portada p { max-width: 34ch; margin: 16px 0 0; font-size: 17px; color: #4a3f44; }
.portada__botones { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 28px; }
.portada__botones .boton { min-width: 220px; }
@media (min-width: 600px) { .portada__botones { flex-direction: row; gap: 28px; } }
@media (min-width: 900px) {
    .portada__contenido { padding-top: 64px; padding-bottom: 80px; }
    .portada__sello { width: 184px; height: 184px; }
}

/* ---------- La portada "de cine": tres polaroids con fotos de sus productos, sostenidas con cinta washi ---------- */
.portada__texto { display: flex; flex-direction: column; align-items: center; }
.cine { position: relative; width: 100%; max-width: 380px; height: 250px; margin: 30px auto 0; }
.cine__marco { position: absolute; margin: 0; width: 46%; padding: 7px 7px 26px; background: #fff; border-radius: 3px;
    box-shadow: 0 1px 2px rgba(30, 26, 29, .08), 0 18px 32px -18px rgba(142, 27, 72, .55); }
.cine__ventana { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--rosa); }
.cine__marco--0 { left: 0; top: 40px; transform: rotate(-7deg); z-index: 1; }
.cine__marco--1 { left: 27%; top: 0; transform: rotate(2deg); z-index: 3; width: 48%; }
.cine__marco--2 { right: 0; top: 52px; transform: rotate(6deg); z-index: 2; }
/* la cinta: un rectángulo rosa translúcido con los bordes "cortados" */
.cine__cinta { position: absolute; left: 50%; top: -11px; z-index: 2; width: 56%; height: 22px; margin-left: -28%; background: rgba(242, 184, 204, .82);
    transform: rotate(-3deg); clip-path: polygon(3% 0, 97% 4%, 100% 100%, 0 96%); }
.cine__marco--1 .cine__cinta { background: rgba(176, 141, 87, .45); transform: rotate(2deg); }
.cine__marco--2 .cine__cinta { transform: rotate(5deg); }
.cine__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease;
    animation: acercar 18s ease-in-out infinite alternate; }
.cine__foto.es-visible { opacity: 1; }
.cine__marco--1 .cine__foto { animation-duration: 22s; animation-direction: alternate-reverse; }
.cine__marco--2 .cine__foto { animation-duration: 20s; }
/* el plano se acerca despacio, como en un documental (Ken Burns) */
@keyframes acercar { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.14) translate(-3%, -2%); } }
@media (min-width: 900px) {
    .portada__contenido--cine { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; text-align: left; }
    .portada__contenido--cine .portada__texto { align-items: flex-start; }
    .portada__contenido--cine .portada__sello { width: 130px; height: 130px; }
    .portada__contenido--cine h1 { max-width: 10ch; }
    .portada__contenido--cine .portada__botones { justify-content: flex-start; }
    .cine { max-width: 560px; height: 460px; margin: 0 0 0 auto; }
    .cine__marco { padding: 10px 10px 38px; }
    .cine__marco--0 { top: 70px; }
    .cine__marco--2 { top: 96px; }
}

/* ---------- Catálogo ---------- */
/* sin «scroll anchoring», que podía mover la vista al cambiar los productos: el lugar lo fija epsilon.js (fijarCatalogo) */
.catalogo { padding-bottom: 32px; overflow-anchor: none; }
input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
/* Barra del índice (celular): botón que abre el índice + atajos a las subcategorías de donde estás */
.buscar-celu { padding: 12px 0 2px; background: #fff; }
.buscar-celu .indice-buscar { margin: 0 auto; }
.buscar-celu .indice-buscar svg { left: 28px; }
.buscar-celu input { height: 44px; }
.barra-indice { position: sticky; top: var(--tapa, var(--cab)); z-index: 20; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--linea); padding-top: 10px; }
.barra-indice__boton { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid var(--tinta); border-radius: var(--radio); background: var(--papel); font-size: 15px; text-align: left; }
.barra-indice__boton > svg:first-child { width: 20px; height: 20px; flex: none; }
.barra-indice__boton span { color: var(--gris); }
.barra-indice__boton strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.barra-indice__boton > svg:last-child { width: 20px; height: 20px; flex: none; }
.atajos { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 10px 16px; scroll-padding: 0 16px; }
.atajos::-webkit-scrollbar { display: none; }
.atajos:empty { display: none; }
.atajo { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 14px; border: 1px solid var(--linea); border-radius: 999px; background: var(--papel); font-size: 14px; white-space: nowrap; }
.atajo[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.atajo--volver { padding: 0 10px 0 6px; color: var(--gris); }
.atajo--volver svg { width: 18px; height: 18px; }
.atajo .sellito { width: 18px; height: 18px; margin-right: 2px; margin-left: -6px; font-size: 10px; vertical-align: 0; }
.atajo[aria-pressed="true"] .sellito { background: #fff; color: var(--tinta); }
@media (min-width: 900px) { .barra-indice { display: none; } }

/* El índice: en renglones de cuaderno (una línea finita entre categorías), la cantidad chiquita en dorado al lado del
   nombre, como en los títulos de sección. Lo elegido lleva una pestaña de separador al costado. */
.catalogo__grilla { display: block; }
.catalogo__indice { display: none; }
@media (min-width: 900px) {
    .catalogo__grilla { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 48px; align-items: start; }
    /* Sin alto máximo ni scroll propio (cortaba las categorías de abajo al abrir una con muchas subcategorías). Si
       entra en la pantalla queda pegado arriba; si no, epsilon.js le pone un «top» negativo: acompaña a la página hasta
       que se ve su final y ahí queda pegado por abajo, así se llega a todo scrolleando normal. */
    .catalogo__indice { display: block; position: sticky; top: var(--indice-top, calc(var(--tapa, var(--cab)) + 24px)); padding: 30px 6px 24px 16px; margin-left: -16px; }
    .catalogo__grilla .grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 18px; }
}
/* en pantallas anchas, 4 por fila al lado del índice (con muchos productos se recorre más rápido) */
@media (min-width: 1180px) { .catalogo__grilla .grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* buscador chico del índice */
.indice-buscar { position: relative; margin: 4px 0 10px; }
.indice-buscar svg { position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--gris); pointer-events: none; }
.indice-buscar input { width: 100%; height: 40px; padding: 0 12px 0 38px; border: 1px solid var(--linea); border-radius: 999px; background: var(--papel); font-size: 16px; }
.indice-buscar input:focus { outline: none; border-color: var(--frambuesa); box-shadow: 0 0 0 3px rgba(176, 36, 90, .12); }
.indice__titulo { font: italic 500 24px/1.1 var(--serif); padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--oro); }
.indice, .indice__sub { list-style: none; margin: 0; padding: 0; }
/* todas las filas reservan el lugar de la flecha: los puntos y los números terminan parejos */
.indice__fila { position: relative; display: flex; align-items: center; padding-right: 38px; }
.indice > .indice__item { border-bottom: 1px solid var(--linea); }
.indice__enlace { flex: 1; min-width: 0; display: block; min-height: 46px; padding: 11px 0; border: 0; background: none; text-align: left; line-height: 1.3; }
.indice__nombre { min-width: 0; }
.indice__item--n0 > .indice__fila .indice__nombre { font: 500 18px/1.25 var(--serif); font-variation-settings: 'SOFT' 100; }
.indice__item--n1 > .indice__fila .indice__nombre, .indice__item--n2 > .indice__fila .indice__nombre { font-size: 15px; }
.indice__item--n2 > .indice__fila .indice__nombre { color: var(--gris); }
.indice__enlace:hover .indice__nombre { color: var(--frambuesa); }
.indice__enlace[aria-pressed="true"] .indice__nombre { color: var(--frambuesa); font-weight: 600; }
.indice__enlace[aria-pressed="true"]::before { content: ''; position: absolute; left: -16px; top: 50%; width: 5px; height: 24px; margin-top: -12px; border-radius: 0 3px 3px 0; background: var(--frambuesa); }
/* Ofertas no usa el color de "elegido": va en tinta con un sellito %, como el de los productos en oferta */
.sellito { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; background: var(--frambuesa); color: #fff; font: 700 11px/1 var(--sans); vertical-align: 2px; }
.indice__abrir { position: absolute; right: 0; top: 50%; margin-top: -18px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--gris); }
.indice__abrir:hover { background: var(--rubor); color: var(--tinta); }
.indice__abrir { color: var(--oro); }
.indice__abrir svg { width: 20px; height: 20px; }
.indice__vertical { transform-origin: 12px 12px; transition: transform .2s ease; }
.indice__abrir[aria-expanded="true"] .indice__vertical { transform: scaleY(0); }
.indice__sub { margin: -2px 0 10px 2px; padding-left: 14px; border-left: 1px solid var(--linea); }
.indice__sub .indice__enlace { min-height: 38px; padding: 8px 0; }
.hoja--indice .indice { margin-top: 12px; }
.hoja--indice .indice__enlace[aria-pressed="true"]::before { left: -16px; }

/* Dónde estás (cuando hay un filtro): "Bazar › Cocina · 8 productos" */
/* un solo renglón de alto fijo y siempre presente (vacío, invisible): así nunca corre los productos */
.ruta { margin: 26px 0 -14px; font-size: 14px; line-height: 22px; height: 22px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ruta--vacia { visibility: hidden; }
.ruta b { color: var(--tinta); font-weight: 600; }
.ruta button { padding: 0; border: 0; background: none; color: var(--gris); text-decoration: underline; text-underline-offset: 3px; font-size: 14px; }
.ruta button:hover { color: var(--frambuesa); }

.seccion { padding-top: 34px; }
.seccion[hidden] { display: none; }
.seccion__titulo { display: flex; align-items: baseline; gap: 10px; font: 500 30px/1.15 var(--serif); padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--oro); }

.grilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; }
@media (min-width: 700px) { .grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 22px; } }
@media (min-width: 1100px) { .grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tarjeta { display: flex; flex-direction: column; min-width: 0; }
.tarjeta[hidden] { display: none; }
.tarjeta__foto { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 0; border-radius: var(--radio); background: var(--rubor); overflow: hidden; }
.tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
@media (hover: hover) { .tarjeta__foto:hover img { transform: scale(1.04); } }
.tarjeta__sinfoto { width: 44%; height: auto; color: var(--rosa); }
.tarjeta--agotada .tarjeta__foto img { filter: grayscale(.85); opacity: .6; }
.sello { position: absolute; top: 10px; left: 10px; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--frambuesa); color: #fff; font-size: 13px; font-weight: 700; transform: rotate(-10deg); box-shadow: 0 0 0 3px rgba(255, 255, 255, .7); }
.tarjeta__cuerpo { padding-top: 12px; flex: 1; }
.tarjeta__nombre { font: 500 15px/1.35 var(--sans); }
.tarjeta__nombre button { padding: 0; border: 0; background: none; text-align: left; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta__nombre button:hover { color: var(--frambuesa); }
.precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 6px 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.precio s { color: var(--gris); font-weight: 400; font-size: .88em; }
.precio__oferta { color: var(--frambuesa); }
.precio--grande { font-size: 22px; margin-top: 10px; }
.aviso-stock { margin: 4px 0 0; font-size: 13px; color: var(--frambuesa); font-weight: 500; }
.tarjeta__accion { margin-top: 12px; }

.contador { display: inline-flex; align-items: center; justify-content: space-between; height: 40px; border: 1px solid var(--tinta); border-radius: 999px; width: 100%; }
.contador button { display: grid; place-items: center; width: 44px; height: 100%; border: 0; background: none; border-radius: 999px; }
.contador button:hover { background: var(--rubor); }
.contador button svg { width: 18px; height: 18px; }
.contador button:disabled { opacity: .3; cursor: not-allowed; }
.contador output { min-width: 28px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
/* en la tarjeta, el contador relleno dice "ya está en tu pedido" */
.tarjeta__accion .contador { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.tarjeta__accion .contador button:hover { background: rgba(255, 255, 255, .14); }

.vacio { padding: 40px 0; color: var(--gris); max-width: 46ch; }
/* cada sección muestra pocas filas y "Ver más" carga las siguientes ahí mismo */
.seccion__mas { display: flex; justify-content: center; margin-top: 24px; }
.seccion__mas[hidden] { display: none; }
.seccion__mas .boton { min-width: 220px; }
.ficha__desc.cargando { min-height: 60px; background: linear-gradient(90deg, var(--rubor), #fff, var(--rubor)) 0 0 / 200% 100%; animation: brillo 1.2s linear infinite; border-radius: var(--radio); }
@keyframes brillo { to { background-position: -200% 0; } }

/* ---------- Cómo comprar ---------- */
.como { padding: 56px 0; border-top: 1px solid var(--linea); }
.como h2, .marcas h2, .nosotros h2 { font: 500 clamp(30px, 7vw, 44px)/1.1 var(--serif); }
.pasos { list-style: none; counter-reset: paso; margin: 28px 0 0; padding: 0; display: grid; gap: 22px; }
@media (min-width: 800px) { .pasos { grid-template-columns: repeat(3, 1fr); gap: 36px; } }
.pasos li { counter-increment: paso; position: relative; padding-top: 58px; color: #3d3539; }
.pasos li::before { content: '(' counter(paso) ')'; position: absolute; top: 0; left: 0; font: italic 500 40px/1 var(--serif); color: var(--oro); } /* como las ecuaciones de un apunte */
.pasos strong { display: block; color: var(--tinta); font-weight: 600; margin-bottom: 2px; }

/* ---------- Marcas ---------- */
.marcas { padding: 56px 0; background: var(--rubor); }
/* Logos de cualquier forma y color: sin tarjetas, centrados, todos en un mismo tono. «multiply» hace desaparecer los
   fondos blancos de los JPG sobre el rosado; el tamaño de cada uno sale de su área (ver index.blade.php). */
.marcas__lista { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px 44px; }
.marca { display: grid; place-items: center; min-height: 72px; }
/* la ventana muestra solo el dibujo del logo: la imagen entera va corrida adentro (medidas en --w, --h, --iw, --x, --y) */
.marca__logo { position: relative; display: block; width: var(--w); height: var(--h); overflow: hidden; border-radius: 8px; }
.marca__logo img { position: absolute; left: calc(-1 * var(--x)); top: calc(-1 * var(--y)); width: var(--iw); max-width: none; height: auto;
    filter: grayscale(1) contrast(1.8); mix-blend-mode: multiply; opacity: .72; } /* mismo negro que las siluetas */
.marca__logo--silueta img { filter: brightness(0); mix-blend-mode: normal; opacity: .72; }
.marca__suelta { max-height: 60px; width: auto; filter: grayscale(1); mix-blend-mode: multiply; opacity: .8; }
.marca__nombre { font: 500 21px/1.2 var(--serif); text-align: center; color: var(--tinta); opacity: .75; }
@media (max-width: 599px) {
    .marcas__lista { gap: 22px 30px; }
    .marca { min-height: 58px; }
    .marca__logo { zoom: .8; }
}

/* ---------- Nosotros ---------- */
.nosotros { padding: 56px 0; }
.nosotros__grilla { display: grid; gap: 28px; }
@media (min-width: 800px) { .nosotros__grilla { grid-template-columns: 1fr 1.2fr; align-items: center; gap: 56px; } }
.nosotros__foto { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 200px 200px var(--radio) var(--radio); }
.nosotros__texto { margin-top: 16px; color: #3d3539; max-width: 60ch; }

/* ---------- Contacto ---------- */
.contacto { padding: 64px 0; border-top: 1px solid var(--linea); }
.contacto__grilla { display: grid; gap: 40px; }
@media (min-width: 900px) { .contacto__grilla { grid-template-columns: 1.05fr 1fr; gap: 52px; align-items: stretch; } }
.contacto__col { display: flex; flex-direction: column; min-width: 0; }
.contacto h2 { font: 500 clamp(30px, 6.5vw, 42px)/1.12 var(--serif); font-variation-settings: 'SOFT' 100; max-width: 16ch; }
.contacto__calle { margin: 12px 0 0; font-size: 17px; color: var(--tinta); }
.contacto__nota { margin: 6px 0 22px; color: #3d3539; }
/* el mapa: marcas de regla en el borde de arriba y el de la izquierda (cada 8 px, una más larga cada 40) */
.contacto__mapa { position: relative; flex: 1; min-height: 300px; margin: 0; padding: 12px 0 0 12px;
    background:
        repeating-linear-gradient(to right, var(--oro) 0 1px, transparent 1px 40px) 12px 0 / calc(100% - 12px) 9px no-repeat,
        repeating-linear-gradient(to right, rgba(176, 141, 87, .6) 0 1px, transparent 1px 8px) 12px 4px / calc(100% - 12px) 5px no-repeat,
        repeating-linear-gradient(to bottom, var(--oro) 0 1px, transparent 1px 40px) 0 12px / 9px calc(100% - 12px) no-repeat,
        repeating-linear-gradient(to bottom, rgba(176, 141, 87, .6) 0 1px, transparent 1px 8px) 4px 12px / 5px calc(100% - 12px) no-repeat; }
.contacto__mapa iframe { display: block; width: 100%; height: 100%; min-height: 288px; border: 0; border-radius: 2px; filter: grayscale(1) contrast(1.06) brightness(1.03); }
.contacto__mapa::after { content: ''; position: absolute; left: 12px; top: 12px; right: 0; bottom: 0; border-radius: 2px; background: var(--rosa); mix-blend-mode: multiply; opacity: .38; pointer-events: none; }
.contacto__coordenadas { position: absolute; right: 10px; top: 22px; z-index: 1; padding: 2px 8px; border-radius: 2px; background: rgba(255, 255, 255, .85); font: italic 500 12px var(--serif); letter-spacing: .02em; color: var(--tinta); white-space: pre; pointer-events: none; }
@media (max-width: 899px) { .contacto__mapa { flex: none; aspect-ratio: 4 / 3; min-height: 0; } .contacto__mapa iframe { min-height: 0; } }
/* el formulario ocupa todo el alto de su columna, así termina parejo con el mapa */
.mensaje { flex: 1; display: flex; flex-direction: column; padding: 24px; border-radius: var(--radio); background: var(--rubor); }
.mensaje h3 { font: 500 24px var(--serif); font-variation-settings: 'SOFT' 100; margin-bottom: 4px; }
.mensaje > p { margin: 0 0 16px; font-size: 14px; color: var(--gris); }
.mensaje .campo:has(textarea) { flex: 1; display: flex; flex-direction: column; }
.mensaje textarea { flex: 1; min-height: 110px; }
.redes { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.redes a { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 1px solid var(--linea); border-radius: 999px; background: var(--papel); font-weight: 500; font-size: 14px; text-decoration: none; }
.redes a:hover { border-color: var(--tinta); }
.redes svg { width: 20px; height: 20px; }

/* Volver arriba: aparece al bajar; en el celular, por encima de la barra del pedido */
.subir { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 35; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--papel); color: var(--tinta); border: 1px solid var(--linea); box-shadow: 0 8px 22px -10px rgba(30, 26, 29, .45); text-decoration: none; transition: opacity .2s, transform .2s; }
.subir svg { width: 22px; height: 22px; }
.subir:hover { border-color: var(--tinta); }
.subir.oculto-subir { opacity: 0; transform: translateY(8px); pointer-events: none; }
@media (min-width: 900px) { body.con-pedido .subir { bottom: 96px; right: 24px; } .subir { right: 24px; bottom: 24px; } }

/* ---------- Pie ---------- */
.pie { background: var(--tinta); color: #e9e2e5; padding: 52px 0 calc(24px + env(safe-area-inset-bottom)); }
.pie__grilla { display: grid; gap: 34px 28px; grid-template-columns: 1fr 1fr; }
.pie__marca { grid-column: 1 / -1; }
@media (min-width: 900px) { .pie__grilla { grid-template-columns: 1.6fr 1fr 1fr 1fr; } .pie__marca { grid-column: auto; } }
.pie__palabra { width: 200px; height: auto; } /* el logo tiene su propio borde blanco: se ve bien sobre el fondo oscuro */
.pie__marca p { max-width: 30ch; margin: 14px 0 0; color: #bfb4b9; font-size: 15px; }
.pie h2 { margin-bottom: 12px; font: italic 500 18px var(--serif); font-variation-settings: 'SOFT' 100; color: var(--rosa); }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pie ul a, .pie ul button { display: inline-flex; align-items: center; gap: 9px; min-height: 36px; padding: 0; border: 0; background: none; color: #e9e2e5; font-size: 15px; text-align: left; text-decoration: none; }
.pie ul a:hover, .pie ul button:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--oro); text-underline-offset: 4px; }
.pie__redes svg { width: 19px; height: 19px; }
/* la línea de arriba va del ancho del contenido (no del margen) */
.pie__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 20px; margin-top: 40px; font-size: 13px; color: #a89da2; background: linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, .14)) no-repeat; background-size: 100% 1px; background-origin: content-box; background-clip: content-box; }
.pie__base > * { padding-top: 18px; }
.pie__base p { margin: 0; }
.pie__base a { color: #a89da2; }
.pie__base a:hover { color: #fff; }
@media (min-width: 900px) { body.con-pedido .pie { padding-bottom: 100px; } }

/* ---------- Barra del pedido (celular) ---------- */
.barra-pedido { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); pointer-events: none; }
.barra-pedido__btn { pointer-events: auto; }
.barra-pedido[hidden] { display: none; }
/* en el celular no va: ocupaba mucho y el carrito de la cabecera ya muestra cuántos productos hay */
@media (max-width: 899px) { .barra-pedido { display: none; } }
.barra-pedido__btn { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 560px; margin: 0 auto; min-height: 56px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--frambuesa); color: #fff; font-size: 15px; box-shadow: 0 12px 30px -12px rgba(142, 27, 72, .7); }
.barra-pedido__btn strong { font-variant-numeric: tabular-nums; }
.barra-pedido__ver { margin-left: auto; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .5); }
@media (min-width: 900px) { .barra-pedido { left: auto; right: 24px; bottom: 24px; padding: 0; background: none; } .barra-pedido__btn { width: auto; } }

/* ---------- Hojas (ficha y carrito): desde abajo en el celular, al costado en la compu ---------- */
.hoja { padding: 0; border: 0; margin: 0; max-width: none; max-height: none; width: 100%; height: 100%; background: transparent; color: inherit; }
.hoja::backdrop { background: rgba(30, 26, 29, .45); }
.hoja[open] { display: flex; align-items: flex-end; }
.hoja__panel { position: relative; width: 100%; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--papel); border-radius: 18px 18px 0 0; padding: 22px 16px calc(24px + env(safe-area-inset-bottom)); animation: subir .32s cubic-bezier(.2, .8, .2, 1); }
.hoja__panel::before { content: ''; display: block; width: 40px; height: 4px; margin: -8px auto 14px; border-radius: 4px; background: var(--linea); }
@keyframes subir { from { transform: translateY(40px); opacity: 0; } }
.hoja__cerrar { position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); }
.hoja__cerrar:hover { background: var(--rubor); }
.hoja__cerrar svg { width: 22px; height: 22px; }
.hoja h2 { font: 500 28px/1.15 var(--serif); padding-right: 44px; }
@media (min-width: 900px) {
    .hoja--carrito[open] { justify-content: flex-end; align-items: stretch; }
    .hoja--carrito .hoja__panel { width: 440px; max-height: none; height: 100%; border-radius: 0; padding: 28px 28px 32px; animation-name: entrar; }
    .hoja--carrito .hoja__panel::before { display: none; }
    .hoja--ficha[open] { justify-content: center; align-items: center; }
    .hoja--ficha .hoja__panel { width: min(920px, 92vw); max-height: 88vh; border-radius: 14px; padding: 28px; }
    .hoja--ficha .hoja__panel::before { display: none; }
    @keyframes entrar { from { transform: translateX(40px); opacity: 0; } }
}

/* Ficha */
.ficha { display: grid; gap: 20px; }
@media (min-width: 900px) { .ficha { grid-template-columns: 1fr 1fr; gap: 32px; } }
/* Galería de la ficha: una foto por vez (antes asomaba un pedacito de la siguiente y no se entendía que había más),
   con flechas, «1 / 3» y puntitos cuando hay varias; en el celular también se desliza con el dedo. */
.ficha__galeria { position: relative; }
.ficha__fotos { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: var(--radio); }
.ficha__fotos::-webkit-scrollbar { display: none; }
.ficha__fotos img, .ficha__fotos .ficha__sinfoto { flex: none; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radio); background: var(--rubor); scroll-snap-align: center; }
.ficha__cuenta { position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(30, 26, 29, .62); color: #fff; font-size: 13px; font-variant-numeric: tabular-nums; pointer-events: none; }
.ficha__flecha { position: absolute; top: 50%; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; margin-top: -20px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--tinta); box-shadow: 0 6px 16px -8px rgba(30, 26, 29, .45); cursor: pointer; }
.ficha__flecha::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; } /* área para tocar más grande */
.ficha__flecha svg { width: 22px; height: 22px; pointer-events: none; }
.ficha__flecha:disabled { opacity: 0; pointer-events: none; }
.ficha__flecha--ant { left: 10px; }
.ficha__flecha--sig { right: 10px; }
.ficha__puntos { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.ficha__puntos span { width: 7px; height: 7px; border-radius: 999px; background: rgba(176, 36, 90, .25); transition: width .2s, background .2s; }
.ficha__puntos span.activo { width: 18px; background: var(--frambuesa); }
[hidden].ficha__cuenta, [hidden].ficha__flecha, [hidden].ficha__puntos { display: none; }
.ficha__sinfoto { display: grid; place-items: center; color: var(--rosa); }
.ficha__sinfoto svg { width: 30%; }
.ficha__presentaciones { border: 0; margin: 18px 0 0; padding: 0; }
.ficha__presentaciones legend { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
#fichaOpciones { display: flex; flex-wrap: wrap; gap: 8px; }
.pastilla { position: relative; }
.pastilla input { position: absolute; opacity: 0; }
.pastilla span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--linea); border-radius: 999px; font-size: 14px; }
.pastilla input:checked + span { border-color: var(--tinta); background: var(--tinta); color: #fff; }
.pastilla input:focus-visible + span { outline: 2px solid var(--frambuesa); outline-offset: 2px; }
.ficha__desc { margin-top: 16px; color: #3d3539; font-size: 15px; }
.ficha__desc :first-child { margin-top: 0; }
.ficha__comprar { display: grid; grid-template-columns: 132px 1fr; gap: 10px; margin-top: 22px; position: sticky; bottom: 0; background: var(--papel); padding: 10px 0 0; }
/* Celular: la barra de comprar tapa hasta el borde de abajo (antes el texto se veía pasar por el margen), con una
   sombra que la separa; el contador más angosto para que «Agregar al pedido · $U …» entre en un renglón; título
   más chico. */
@media (max-width: 899px) {
    .hoja--ficha .ficha__comprar { grid-template-columns: 112px 1fr; bottom: calc(-24px - env(safe-area-inset-bottom)); margin-bottom: calc(-24px - env(safe-area-inset-bottom)); padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 14px -14px rgba(30, 26, 29, .35); }
    .hoja--ficha .ficha__comprar .boton { padding-left: 12px; padding-right: 12px; font-size: 15px; white-space: nowrap; }
    .hoja--ficha h2 { font-size: 23px; }
    .ficha__fotos img, .ficha__fotos .ficha__sinfoto { aspect-ratio: 1; } /* cuadrada: entran el título y el precio sin bajar */
    .hoja--ficha .ficha { gap: 14px; }
}
.ficha__comprar .contador { height: 48px; }

/* Carrito */
.carrito__vacio { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 14px; margin-top: 18px; padding: 48px 20px; border-radius: var(--radio); background: var(--rubor); text-align: center; }
.carrito__vacio p { margin: 0; font: italic 500 20px var(--serif); }
.lineas { list-style: none; margin: 16px 0 0; padding: 0; }
.linea { display: grid; grid-template-columns: 64px 1fr auto; gap: 8px 14px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--linea); }
.linea__foto { grid-row: span 2; width: 64px; height: 80px; border-radius: 4px; object-fit: cover; background: var(--rubor); }
.linea__nombre { font-weight: 500; font-size: 15px; line-height: 1.3; }
.linea__nombre small { display: block; color: var(--gris); font-weight: 400; }
.linea__subtotal { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.linea .contador { width: 120px; height: 36px; }
.linea__quitar { justify-self: end; padding: 6px 0; border: 0; background: none; font-size: 13px; color: var(--gris); text-decoration: underline; text-underline-offset: 3px; }
.linea__quitar:hover { color: var(--frambuesa); }
.carrito__total { display: flex; justify-content: space-between; align-items: baseline; margin: 22px 0 0; font-size: 17px; }
.carrito__total strong { font: 600 24px var(--sans); font-variant-numeric: tabular-nums; }

.datos { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--oro); }
.datos h3 { font: 500 22px var(--serif); margin-bottom: 14px; }
.campo { margin: 0 0 18px; border: 0; padding: 0; }
.campo label, .campo legend { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; padding: 0; }
.opcional { font-weight: 400; color: var(--gris); }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid #d9c6ce; border-radius: var(--radio); background: var(--papel); font-size: 16px; }
.campo textarea { resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--frambuesa); box-shadow: 0 0 0 3px rgba(176, 36, 90, .12); }
.campo [aria-invalid="true"] { border-color: var(--frambuesa); }
.entrega { display: grid; gap: 10px; }
/* .campo .opcion: tiene que ganarle a ".campo label" (que deja el padding en 0) */
.campo .opcion { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border: 1px solid var(--linea); border-radius: var(--radio); font-weight: 500; line-height: 1.35; margin: 0; cursor: pointer; }
.campo .opcion:has(input:checked) { border-color: var(--tinta); background: var(--rubor); }
#pLocalidadOtra { margin-top: 10px; }
.campo .opcion input { flex: none; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; accent-color: var(--frambuesa); }
.opcion small { display: block; margin-top: 3px; font-weight: 400; color: var(--gris); font-size: 13px; }
.trampa { position: absolute; left: -9999px; }
.error { margin: 0 0 14px; padding: 14px 16px; border-radius: var(--radio); background: #fdecef; color: var(--frambuesa-osc); font-size: 14px; }
.datos__nota { margin: 14px 0 0; font-size: 13px; color: var(--gris); text-align: center; }
.listo { margin-top: 18px; }
.listo h3 { font: 500 24px var(--serif); }
.listo p { color: #3d3539; }

/* El producto que vuela al pedido (tiro parabólico) */
.volando { position: fixed; z-index: 60; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--rosa) center / cover no-repeat; box-shadow: 0 0 0 2px #fff, 0 6px 16px rgba(30, 26, 29, .25); pointer-events: none; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* La publicidad (tarjeta compartida entre sitios) con el rosa de Épsilon; en el celular sube cuando está la barra del pedido */
body .pub-tarjeta { --pub-acento: var(--frambuesa); background: var(--rubor); font-family: var(--sans); color: var(--tinta); }
body .pub-tarjeta .pub-tarjeta__titulo { font-family: var(--serif); font-variation-settings: 'SOFT' 100; font-weight: 600; }

/* Rendimiento en el celular: la portada deja de animarse cuando no se ve o hay una hoja abierta, y las secciones del
   catálogo fuera de pantalla no se dibujan hasta acercarse */
.portada.en-pausa .portada__capa, .portada.en-pausa .cine__foto, .portada.en-pausa .portada__bajar { animation-play-state: paused; }
.seccion { content-visibility: auto; contain-intrinsic-size: auto 520px; }
.midiendo .seccion { content-visibility: visible; } /* al saltar con un enlace interno: ver epsilon.js */