/* Capa de tienda sobre la hoja de la página (`pagina.css`, la MISMA del sitio del dueño). Solo usa los tokens de la página: --primario, --sobre-primario,
   --acento, --sobre-acento, --fondo, --texto, --radio, --radio-boton, --titulos, --cuerpo. Sin colores propios (el blanco sobre el velo oscuro de las
   fotos es la única excepción: va sobre una foto cualquiera). Sin página vinculada, tienda-cabecera.css da esos mismos tokens desde la paleta de la tienda. */
/* Los tokens viejos de la vitrina (fichas, carrito, cuenta, filtros) siguen los de la página; el enlace y el botón usan el texto, que contrasta con el fondo. */
body.t-pagina{--t-ancho:1240px;--t-pad:clamp(1rem,3vw,2rem);--t-lado:max(var(--t-pad),calc((100% - var(--t-ancho))/2));--tinta:var(--texto);--marca:var(--texto);--sobre-marca:var(--fondo);--suave:color-mix(in srgb,var(--texto) 72%,var(--fondo));--linea:color-mix(in srgb,var(--texto) 18%,transparent);--borde:color-mix(in srgb,var(--texto) 55%,var(--fondo));--caja:color-mix(in srgb,var(--fondo) 94%,var(--texto));--letra-titulos:var(--titulos);--letra-cuerpo:var(--cuerpo);--radio-caja:var(--radio)}
main:has(.hero){max-width:none;padding:0}
.t-barra a:focus-visible,.t-prod a:focus-visible,.t-cat:focus-visible,.t-banner:focus-visible,.t-chip:focus-visible,.t-mas:focus-visible,.t-buscar button:focus-visible,.t-confianza a:focus-visible{outline:3px solid var(--acento);outline-offset:2px}
.t-prod:has(h3 a:focus-visible),.t-prod:has(h2 a:focus-visible){outline:3px solid var(--acento);outline-offset:3px}
.t-barra{position:sticky;top:0;z-index:30;background:var(--fondo);color:var(--texto);border-bottom:1px solid color-mix(in srgb,var(--texto) 14%,transparent)}
.t-barra__fila{display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:center;padding:.9rem var(--t-lado)}
.t-marca{font:700 1.25rem/1.1 var(--titulos);letter-spacing:-.015em;color:inherit;text-decoration:none}
.t-marca small{display:block;font:400 .8rem var(--cuerpo);opacity:.7;letter-spacing:0}
.t-buscar{display:flex;height:3rem;border:2px solid color-mix(in srgb,var(--texto) 18%,transparent);border-radius:var(--radio-boton);overflow:hidden;background:color-mix(in srgb,var(--fondo) 90%,var(--texto))}
.t-buscar:focus-within{border-color:var(--acento)}
.t-buscar input{flex:1;min-width:0;border:0;background:none;padding:0 1rem;font:1rem var(--cuerpo);color:var(--texto)}
.t-buscar input:focus{outline:none}
.t-buscar button{border:0;padding:0 1.4rem;background:var(--acento);color:var(--sobre-acento);font:700 .95rem var(--cuerpo);cursor:pointer}
.t-iconos{display:flex;gap:.25rem}
.t-icono{display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.4rem .7rem;border-radius:var(--radio);color:inherit;text-decoration:none;font-size:.78rem;font-weight:600;position:relative}
.t-icono:hover{background:color-mix(in srgb,var(--texto) 8%,transparent)}
.t-icono svg{width:24px;height:24px}
.t-icono b{position:absolute;top:0;right:.35rem;min-width:1.25rem;height:1.25rem;border-radius:99px;background:var(--acento);color:var(--sobre-acento);font-size:.72rem;line-height:1.25rem;text-align:center}
.t-cats-barra{position:relative;display:flex;align-items:center;border-top:1px solid color-mix(in srgb,var(--texto) 10%,transparent)}
.t-cats{flex:1;min-width:0;display:flex;gap:.25rem;overflow-x:auto;padding:.35rem max(0px,calc(var(--t-lado) - 1rem));scrollbar-width:none}
/* «Todas las categorías» (2026-11-12): la barra se desvanece antes del botón para que se note que sigue; el panel lista todas en columnas. */
.t-cats-barra--mas .t-cats{padding-right:.5rem;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 3rem),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 3rem),transparent)}
.t-cats-mas{flex:none;margin-right:max(0px,calc(var(--t-lado) - 1rem))}
.t-cats-mas summary{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;padding:.45rem 1rem;border:1px solid color-mix(in srgb,var(--texto) 30%,transparent);border-radius:var(--radio-boton);font-weight:700;font-size:.92rem;white-space:nowrap;cursor:pointer;list-style:none}
.t-cats-mas summary::-webkit-details-marker{display:none}
.t-cats-mas summary svg{width:1rem;height:1rem;transition:transform .15s}.t-cats-mas[open] summary svg{transform:rotate(180deg)}
.t-cats-mas summary:hover{background:color-mix(in srgb,var(--texto) 8%,transparent)}
.t-cats-mas summary:focus-visible,.t-cats-mas a:focus-visible{outline:3px solid currentColor;outline-offset:2px}
.t-cats-mas ul{position:absolute;z-index:30;top:calc(100% + .25rem);left:max(1rem,calc(var(--t-lado) - 1rem));right:max(1rem,calc(var(--t-lado) - 1rem));display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.25rem;margin:0;padding:.75rem;list-style:none;max-height:min(60vh,26rem);overflow:auto;background:var(--fondo);color:var(--texto);border:1px solid color-mix(in srgb,var(--texto) 18%,transparent);border-radius:var(--radio);box-shadow:0 1rem 2.5rem rgb(0 0 0 / .25)}
.t-cats-mas ul a{display:flex;align-items:center;min-height:44px;padding:.35rem .75rem;border-radius:var(--radio-boton);color:inherit;text-decoration:none;font-weight:600}
.t-cats-mas ul a:hover{background:color-mix(in srgb,var(--texto) 8%,transparent)}
.t-cats-mas ul a[aria-current]{background:var(--primario);color:var(--sobre-primario)}
@media (prefers-reduced-motion:reduce){.t-cats-mas summary svg{transition:none}}
.t-cats a{white-space:nowrap;padding:.45rem 1rem;border-radius:var(--radio-boton);color:inherit;text-decoration:none;font-weight:600;font-size:.92rem;opacity:.8}
.t-cats a:hover{opacity:1;background:color-mix(in srgb,var(--texto) 8%,transparent)}
.t-cats a[aria-current]{opacity:1;background:var(--primario);color:var(--sobre-primario)}
.t-cats .t-volver{margin-left:auto;color:var(--texto);border:2px solid var(--acento);opacity:1;align-self:center}  /* un botón con contorno entero: la sombra de abajo con el radio de píldora se veía «colgada» (captura 90) */
.t-cats .t-volver:hover{background:var(--acento);color:var(--sobre-acento)}
.t-seccion{padding:clamp(3rem,7vw,5.5rem) clamp(1rem,3vw,2rem)}
.t-ancho{max-width:1240px;margin:0 auto}
.t-cabeza{display:flex;justify-content:space-between;align-items:end;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.75rem}
.t-cabeza h2{margin-bottom:0}
.t-mas{color:inherit;font-weight:700;text-decoration:none;display:inline-flex;gap:.5rem;align-items:center}
.t-mas::after{content:"→";color:var(--acento);transition:translate .2s}
.t-mas:hover::after{translate:4px 0}
.t-cats-fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.t-cat{position:relative;display:flex;align-items:end;aspect-ratio:4/3;padding:1.4rem;border-radius:var(--radio);overflow:hidden;color:#fff;text-decoration:none;isolation:isolate}
.t-cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:scale .6s}
.t-cat::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,0) 62%)}
.t-cat:hover img{scale:1.06}
.t-cat h3{font-size:1.3rem;margin:0}
.t-cat span{font-size:.9rem;opacity:.9}
.t-chips{display:flex;gap:.5rem;flex-wrap:wrap}
.t-chip{border:2px solid color-mix(in srgb,currentColor 25%,transparent);background:none;color:inherit;padding:.5rem 1.1rem;border-radius:var(--radio-boton);font:600 .9rem var(--cuerpo);cursor:pointer}
.t-chip[aria-pressed=true]{background:var(--acento);border-color:var(--acento);color:var(--sobre-acento)}
.t-rejilla{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.t-prod{display:flex;flex-direction:column;background:var(--fondo);color:var(--texto);border-radius:var(--radio);overflow:hidden;text-decoration:none;border:1px solid color-mix(in srgb,var(--texto) 12%,transparent);transition:translate .25s,box-shadow .25s}
.t-prod:hover{translate:0 -3px;box-shadow:0 14px 28px -16px color-mix(in srgb,var(--texto) 40%,transparent);border-color:color-mix(in srgb,var(--texto) 24%,transparent)}
.t-prod__foto{position:relative;aspect-ratio:1;background:#fff;overflow:hidden}
.t-prod__foto img{width:100%;height:100%;object-fit:contain;padding:1.25rem;transition:scale .5s}
.t-prod:hover .t-prod__foto img{scale:1.05}
.t-sello{position:absolute;top:.75rem;left:.75rem;padding:.3rem .7rem;border-radius:var(--radio-boton);background:var(--acento);color:var(--sobre-acento);font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.t-prod__texto{padding:1rem 1.15rem 1.2rem;display:flex;flex-direction:column;gap:.3rem;flex:1}
.t-prod__cat{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.t-prod h3{font-size:1.05rem;margin:0}
.t-prod__pie{margin-top:auto;padding-top:.6rem;display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.t-precio{font:700 1.35rem var(--titulos)}
.t-precio small{font:600 .75rem var(--cuerpo);opacity:.7;margin-left:.25rem}
.t-agregar{border:0;width:2.75rem;height:2.75rem;border-radius:var(--radio-boton);background:var(--acento);color:var(--sobre-acento);display:grid;place-items:center;cursor:pointer}
.t-agregar svg{width:20px;height:20px}
.t-vacia{border:2px dashed color-mix(in srgb,currentColor 22%,transparent);border-radius:var(--radio);display:grid;place-items:center;text-align:center;padding:2rem;aspect-ratio:3/4;opacity:.75}
.t-banners{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.t-banner{position:relative;min-height:300px;display:flex;flex-direction:column;justify-content:end;padding:2rem;border-radius:var(--radio);overflow:hidden;color:#fff;text-decoration:none;isolation:isolate}
.t-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:scale .6s}
.t-banner::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.05) 70%)}
.t-banner:hover img{scale:1.05}
.t-banner h3{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:.2rem 0 .8rem;max-width:18ch}
.t-confianza{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.t-confianza li{list-style:none}
.t-confianza strong{display:block;font-family:var(--titulos);font-size:1.05rem;margin:.6rem 0 .2rem}
.t-confianza p{margin:0;opacity:.85;font-size:.95rem}
.t-confianza svg{width:28px;height:28px;color:var(--acento)}
.t-chat{position:fixed;right:1.25rem;bottom:1.25rem;z-index:40;display:flex;gap:.6rem;align-items:center;padding:.9rem 1.3rem;border-radius:var(--radio-boton);background:var(--acento);color:var(--sobre-acento);font-weight:700;text-decoration:none;box-shadow:0 14px 30px -10px rgba(0,0,0,.45)}
.t-chat svg{width:22px;height:22px}
@media (max-width:900px){.t-rejilla{grid-template-columns:repeat(2,1fr)}.t-confianza{grid-template-columns:1fr 1fr}.t-cats-fotos{grid-template-columns:1fr}}
@media (max-width:720px){.t-barra__fila{grid-template-columns:1fr auto;gap:.75rem}.t-buscar{grid-column:1/-1;order:3}.t-icono>span:not(.contador){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.t-marca small{display:none}.t-banners{grid-template-columns:1fr}.t-rejilla{gap:.75rem}.t-prod__texto{padding:.8rem}.t-precio{font-size:1.1rem}.t-chat span{display:none}}
@media (prefers-reduced-motion:reduce){.t-prod:hover,.t-prod:hover .t-prod__foto img,.t-cat:hover img,.t-banner:hover img{translate:none;scale:none}.t-prod,.t-cat img,.t-banner img,.t-prod__foto img{transition:none}}
.t-banner::before{background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,.45) 55%,rgba(0,0,0,.1))}
.t-banner .etiqueta{color:#fff}
@media (max-width:720px){.t-cats-fotos{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory}.t-cat{scroll-snap-align:start;aspect-ratio:4/3}}

/* Los enlaces de la vitrina que la capa dibuja distinto: filtros del inicio, tarjeta entera clicable, favoritos, avisos y fallos sin página. */
a.t-chip{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.t-chip[aria-current]{background:var(--acento);border-color:var(--acento);color:var(--sobre-acento)}
ul.t-cats-fotos,ul.t-banners,ul.t-rejilla,ul.t-confianza{list-style:none;margin:0;padding:0}
.t-prod{position:relative}
.t-prod h3 a,.t-prod h2 a{color:inherit;text-decoration:none}
.t-prod h3 a::after,.t-prod h2 a::after{content:"";position:absolute;inset:0;z-index:1}
.t-prod h3 a:focus-visible,.t-prod h2 a:focus-visible{outline:none}
.t-prod:hover h3 a{text-decoration:underline}
.t-prod__foto:not(:has(img)){background:color-mix(in srgb,var(--texto) 8%,var(--fondo))}
.t-prod__linea{margin:0;font-size:.9rem;opacity:.8}
.t-prod__favorito{position:absolute;top:.4rem;right:.4rem;z-index:2;margin:0}
.t-prod__favorito .boton-icono{background:var(--fondo);color:var(--texto);border:1px solid color-mix(in srgb,var(--texto) 25%,transparent);border-radius:var(--radio-boton)}
.t-sello--agotado{background:var(--texto);color:var(--fondo)}
.t-cat{background:var(--texto)}
.t-cat div{position:relative}
.t-banner{background:var(--texto)}
.t-pie-rejilla{margin:1.75rem 0 0;align-items:center}
.t-pie-rejilla p{margin:0}
.t-confianza-texto{max-width:62ch;margin:0 0 1.5rem}
.t-confianza{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.t-confianza a{color:inherit;text-decoration:none;display:inline-flex;min-height:44px;align-items:center}
.t-confianza a:hover{text-decoration:underline}
.t-icono{min-width:44px;min-height:44px;justify-content:center}
.t-carrito b{top:.1rem}
#compras-enlace .contador{font-size:.72rem;font-weight:700;white-space:nowrap}
#compras-enlace .contador[hidden]{display:none}
.t-iconos .a11y-boton,.t-iconos .a11y-tema{position:static;inset:auto;z-index:auto;width:auto;height:auto;box-shadow:none;min-width:44px;min-height:44px;display:inline-grid;place-items:center;border:0;background:none;color:inherit;border-radius:var(--radio-boton);cursor:pointer}
.t-iconos .a11y-boton[hidden],.t-iconos .a11y-tema[hidden]{display:none}
.t-iconos .a11y-boton svg,.t-iconos .a11y-tema svg{width:22px;height:22px}
/* Con sesión la cabecera lleva 6 iconos: en teléfonos angostos se aprietan sin bajar de 40 px (WCAG 2.5.8 pide 24), barrido 2026-11-12. */
@media (max-width:420px){.t-iconos{gap:0}.t-icono,.t-iconos .a11y-boton,.t-iconos .a11y-tema{min-width:40px;padding:.4rem .2rem}.t-marca{font-size:1rem;hyphens:auto;-webkit-hyphens:auto}}
.t-cats a{min-height:44px;display:inline-flex;align-items:center}
.t-barra{--t-linea:color-mix(in srgb,var(--texto) 14%,transparent)}
footer.pie{margin-top:0}
.pie__fila{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem 2rem;max-width:1240px;margin:0 auto}
.pie p{margin:0 0 .125rem}.pie__nombre{font-family:var(--titulos);font-weight:700}
.pie ul{display:flex;flex-wrap:wrap;gap:0 1.5rem;margin:0;padding:0;list-style:none}
.pie a,.pie .enlace{display:inline-flex;align-items:center;min-height:44px;color:inherit;background:none;border:0;font:inherit;font-weight:600;padding:0;cursor:pointer}
.pie form{margin:0}
/* Sin página vinculada: lo mínimo de las clases de la página que usa el inicio, con los tokens de la tienda. */
body:not(.t-pagina) .hero{background:var(--primario);color:var(--sobre-primario);padding:3.5rem 1.25rem}
body:not(.t-pagina) .hero--foto-izquierda{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
body:not(.t-pagina) .hero__foto{border-radius:var(--radio);overflow:hidden;min-height:260px}
body:not(.t-pagina) .hero__foto img{width:100%;height:100%;object-fit:cover;display:block}
body:not(.t-pagina) .hero h1{font-size:clamp(2rem,5vw,3.25rem)}
body:not(.t-pagina) .etiqueta{font-size:.85rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:0 0 .5rem}
body:not(.t-pagina) .franja{padding:1.25rem;background:var(--primario);color:var(--sobre-primario)}
body:not(.t-pagina) .franja .ancho{display:flex;flex-wrap:wrap;gap:.75rem 2.5rem;justify-content:center;max-width:70rem;margin:0 auto}
body:not(.t-pagina) .franja p{display:flex;flex-direction:column;margin:0}
body:not(.t-pagina) .franja strong{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}
body:not(.t-pagina) .boton{display:inline-block;text-decoration:none;font-weight:700}
@media (max-width:760px){body:not(.t-pagina) .hero--foto-izquierda{grid-template-columns:1fr}}
.t-marca{display:flex;flex-direction:column;justify-content:center;min-height:44px}

/* Pulido (2026-11-11): contenedor único de 1240 px a cualquier ancho, barra de anuncio y tarjetas. Solo tokens de la página; la portada, las categorías (`.servicios`) y el resto
   de las secciones son las clases de la página (`inicio_pagina.html`) y no se redefinen aquí: solo lo propio de la tienda y el contraste sobre la banda del primario. */
.t-pagina .t-seccion{padding-inline:var(--t-pad)}
.t-pagina .pie__fila{max-width:var(--t-ancho)}
.t-pagina .franja{padding-inline:var(--t-lado)}
.t-pagina .franja .ancho{max-width:var(--t-ancho)}
.t-pagina .anuncio{margin:0;padding:.6rem var(--t-pad);background:var(--primario);color:var(--sobre-primario);text-align:center;font:600 .875rem/1.4 var(--cuerpo);letter-spacing:.01em;text-wrap:balance}
.t-pagina .anuncio span{color:var(--acento-sobre-primario,var(--sobre-primario))}
.t-pagina .etiqueta{display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1rem;font:700 .78rem/1.3 var(--cuerpo);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--texto) 78%,var(--fondo))}
.t-prod{box-shadow:0 1px 2px color-mix(in srgb,var(--texto) 8%,transparent);border-radius:var(--radio)}
.t-prod__foto{border-bottom:1px solid color-mix(in srgb,var(--texto) 8%,transparent)}
.t-prod h3{font-weight:700;line-height:1.3}
.t-cats a{min-height:44px}
/* I3 (2026-11-11): portada aceptada de la propuesta de la IA. a-sangre: foto a todo el ancho con el texto encima sobre un velo del fondo
   (contraste del texto de la tienda sobre su propio fondo al 88 %); partida: foto y texto lado a lado; tarjeta: la foto en una caja. */
.hero.hero--ia{display:grid;padding-inline:var(--t-lado,1.25rem);align-items:center;padding-block:clamp(1.5rem,4vw,3rem);gap:clamp(1.5rem,5vw,4rem)}
.hero.hero--ia .hero__foto{overflow:hidden;border-radius:var(--radio-caja,var(--radio))}
.hero.hero--ia .hero__foto img{width:100%;height:100%;object-fit:cover;display:block}
.hero.hero--partida{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.hero.hero--partida .hero__foto{aspect-ratio:4/3;max-height:520px}
.hero.hero--tarjeta{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
.hero.hero--tarjeta .hero__foto{order:2;aspect-ratio:1/1;max-height:460px;padding:clamp(.5rem,1.5vw,1rem);background:color-mix(in srgb,var(--texto) 6%,var(--fondo));border:1px solid color-mix(in srgb,var(--texto) 12%,transparent);box-shadow:0 18px 40px color-mix(in srgb,var(--texto) 14%,transparent)}
.hero.hero--tarjeta .hero__foto img{border-radius:calc(var(--radio-caja,var(--radio)) * .75)}
.hero.hero--a-sangre{position:relative;grid-template-columns:minmax(0,1fr);min-height:clamp(22rem,55vw,34rem);padding-inline:0;padding-block:0}
.hero.hero--a-sangre .hero__foto{position:absolute;inset:0;border-radius:0}
.hero.hero--a-sangre .hero__texto{position:relative;margin:clamp(1rem,4vw,3rem) var(--t-lado);max-width:40rem;padding:clamp(1.25rem,3vw,2.25rem);border-radius:var(--radio-caja,var(--radio));background:color-mix(in srgb,var(--fondo) 88%,transparent);color:var(--texto)}
@media (max-width:900px){.hero.hero--partida,.hero.hero--tarjeta{grid-template-columns:minmax(0,1fr)}.hero.hero--tarjeta .hero__foto{order:0;max-height:360px}.hero.hero--partida .hero__foto{max-height:360px}}
/* I4 (2026-11-11): partida y tarjeta van sobre el primario, como el héroe de la página: texto en --sobre-primario y los botones con un contorno
   de ese mismo token, que contrasta con el primario por construcción (≥4,5:1) aunque el acento del botón se le parezca (sin página son iguales).
   Las etiquetas de las secciones sobre el primario siguen su texto. Sin página, el mismo margen lateral que el contenido (el logo pegaba al borde). */
.hero.hero--ia:is(.hero--partida,.hero--tarjeta){background:var(--primario);color:var(--sobre-primario)}
.hero.hero--ia:is(.hero--partida,.hero--tarjeta) .etiqueta,.hero.hero--ia:is(.hero--partida,.hero--tarjeta) .hero__texto p{color:inherit}
.hero.hero--ia:is(.hero--partida,.hero--tarjeta) .boton{border:2px solid var(--sobre-primario);padding:calc(.7rem - 2px) calc(1.5rem - 2px)}
.hero.hero--ia:is(.hero--partida,.hero--tarjeta) .boton--sec{background:transparent;color:var(--sobre-primario)}
.t-pagina :is(.servicios,.proceso) .etiqueta,.t-pagina .servicios h2{color:var(--sobre-primario)}
.t-pagina .hero__marca{color:inherit}
.t-pagina .t-banner .etiqueta{color:#fff}
.t-pagina .ancho{max-width:var(--t-ancho)}
.t-pagina .tarjeta{position:relative}
.t-pagina .tarjeta.t-prod{padding:0}
.t-pagina .tarjeta__enlace::after{content:"";position:absolute;inset:0;z-index:1}
.t-pagina .tarjeta__enlace:focus-visible{outline:none}.t-pagina .tarjeta:has(.tarjeta__enlace:focus-visible){outline:3px solid var(--acento);outline-offset:3px}
.t-pagina .tarjeta .tarjeta__foto.t-prod__foto{margin:0;aspect-ratio:1}
body:not(.t-pagina){--t-ancho:1240px;--t-pad:clamp(1rem,3vw,2rem);--t-lado:max(var(--t-pad),calc((100% - var(--t-ancho))/2))}
/* I5 (2026-11-11): producto sin foto: la inicial del nombre en el primario sobre un tono suave del primario (claro ≥4,5:1 con primarios de
   marca habituales; en oscuro, la inicial se aclara hacia el texto). Modo oscuro: la franja y las tarjetas de categoría sin foto dejan de usar
   `--texto` como fondo (en oscuro es claro) y pasan a una superficie oscura con texto claro, sin el velo. */
.t-prod__foto:not(:has(img)){background:color-mix(in srgb,var(--primario) 12%,var(--fondo))}
.t-prod__inicial{position:absolute;inset:0;display:grid;place-items:center;font:700 clamp(3.5rem,9vw,5.5rem)/1 var(--titulos,inherit);color:color-mix(in srgb,var(--primario) 88%,var(--texto));text-transform:uppercase;user-select:none}
html.a11y-oscuro .t-prod__foto:not(:has(img)){background:color-mix(in srgb,var(--primario) 22%,var(--fondo))}
html.a11y-oscuro .t-prod__inicial{color:color-mix(in srgb,var(--primario) 45%,var(--texto))}
html.a11y-oscuro body .franja{background:color-mix(in srgb,var(--texto) 7%,var(--fondo));color:var(--texto)}
html.a11y-oscuro .t-cat:not(:has(img)){background:color-mix(in srgb,var(--texto) 9%,var(--fondo));border:1px solid color-mix(in srgb,var(--texto) 22%,transparent)}
html.a11y-oscuro .t-cat:not(:has(img))::before{display:none}
/* Ritmo compacto de marketplace: el aire vertical de cada sección tiene tope (≤60 px por lado a 1280), las categorías van en una grilla pareja (sin el mosaico de la
   plantilla) y los banners son tarjetas horizontales de alto contenido. */
.t-pagina :is(.servicios,.destacado,.razones,.t-seccion){padding-block:clamp(2rem,4.5vw,3.75rem)}
.t-pagina .servicios .tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),300px));justify-content:start;gap:1.25rem}
.t-pagina .t-categoria{padding:0;overflow:hidden;display:flex;flex-direction:column;grid-column:auto;grid-row:auto}
.t-pagina .t-categoria .tarjeta__foto{margin:0;aspect-ratio:4/3;border-radius:0;min-width:0}
.t-pagina .t-categoria .tarjeta__foto img{width:100%;height:100%;object-fit:cover;display:block}
.t-pagina .t-categoria>:not(.tarjeta__foto){margin-inline:1.25rem}
.t-pagina .t-categoria h3{margin-block:1rem .5rem;font-size:1.15rem}
.t-pagina .t-categoria .tarjeta__enlace{margin-block:0 1.25rem}
.t-pagina .destacado__rejilla{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1rem,3vw,2.5rem)}
.t-pagina .destacado__foto{aspect-ratio:auto;height:clamp(180px,20vw,260px);margin:0}
.t-pagina .destacado__foto img{width:100%;height:100%;object-fit:cover;display:block}
.t-pagina .t-banners:has(li:only-child){grid-template-columns:1fr}
.t-pagina .t-banner{min-height:clamp(180px,20vw,240px);padding:1.5rem}
@media (max-width:760px){.t-pagina .destacado__rejilla{grid-template-columns:minmax(0,1fr)}}
/* Oscuro: con el primario oscuro, portada, franja y categorías se fundían en un solo bloque; la banda de categorías pasa a una superficie con borde. */
html.a11y-oscuro .t-pagina .servicios{background:color-mix(in srgb,var(--texto) 8%,var(--fondo));color:var(--texto);border-block:1px solid color-mix(in srgb,var(--texto) 20%,transparent)}
html.a11y-oscuro .t-pagina .servicios :is(.etiqueta,h2){color:var(--texto)}
html.a11y-oscuro .t-pagina .t-categoria{border:1px solid color-mix(in srgb,var(--texto) 22%,transparent)}
/* Fase 12 (2026-11-11): cuenta, pedido, reclamo, mensajes y Continuar con Mika con el vocabulario de la página (mismos tokens, claro y oscuro). */
body.t-pagina main{max-width:none;padding:clamp(1.5rem,4vw,3rem) var(--t-lado) 3rem;color:var(--texto)}
body.t-pagina main:not(.m-ancho)>*{max-width:46rem}
body.t-pagina main h1{font:700 clamp(1.5rem,3.2vw,2.1rem)/1.2 var(--titulos);margin:0 0 1rem}
body.t-pagina main h2,body.t-pagina main h3{font-family:var(--titulos);color:var(--texto)}
body.t-pagina :is(.pago,.panel-tarjeta,.chat,.continuar__dialogo){background:color-mix(in srgb,var(--texto) 5%,var(--fondo));color:var(--texto);border:1px solid color-mix(in srgb,var(--texto) 22%,transparent);border-radius:var(--radio)}
body.t-pagina :is(.aviso,.alerta){background:none;text-align:left;color:var(--texto);font-weight:600;border-left:4px solid var(--acento);padding:.25rem 0 .25rem .75rem}
body.t-pagina .formulario :is(input:not([type=hidden]),textarea,select){background:var(--fondo);color:var(--texto);border:1px solid color-mix(in srgb,var(--texto) 45%,transparent);border-radius:var(--radio)}
body.t-pagina .formulario button{background:var(--acento);color:var(--sobre-acento);border-radius:var(--radio-boton)}
body.t-pagina :is(.formulario button.secundario,.continuar__secundario){background:none;color:var(--texto);border:1px solid color-mix(in srgb,var(--texto) 45%,transparent)}
body.t-pagina .continuar__principal{background:var(--acento);color:var(--sobre-acento);border-radius:var(--radio-boton)}
/* Enlaces sin subrayado (Deiber, 2026-11-11): solo al pasar/enfocar o con «subrayar enlaces» del panel de accesibilidad. */
body.t-pagina main a:not([class]){color:var(--texto);text-decoration:none;text-underline-offset:.2em}
body.t-pagina main a:not([class]):is(:hover,:focus-visible),html:is(.acc-subrayar,.a11y-subrayado) body.t-pagina main a{text-decoration:underline}
/* Fase 12, ronda 2: pie sin tapar por los botones flotantes, tarjeta de cuenta, ficha, carrito y chat (claro, oscuro y sin página). */
.pie__fila{padding:1.5rem 1.5rem 6.5rem}
main:not(.m-ancho)>*{max-width:46rem}
.cuenta-caja{width:min(100%,29rem);box-sizing:border-box;margin:1rem auto;padding:2rem 1.75rem;background:color-mix(in srgb,var(--texto) 5%,var(--fondo));border:1px solid color-mix(in srgb,var(--texto) 22%,transparent);border-radius:var(--radio)}
main:has(>.cuenta-caja){padding-top:clamp(2rem,6vw,4rem);padding-bottom:clamp(2rem,6vw,4rem)}
main>.cuenta-caja{max-width:29rem}
.cuenta-caja__marca{margin:0 0 .5rem;font:700 .95rem var(--titulos);letter-spacing:.04em;text-transform:uppercase;color:color-mix(in srgb,var(--texto) 75%,var(--fondo))}
.cuenta-caja h1{margin:0 0 1.25rem}
.cuenta-caja .formulario{max-width:none}
.cuenta-caja .formulario button{width:100%}
.cuenta-caja p{margin:.75rem 0 0}
body main.m-ancho{max-width:none}
main.m-ancho .ficha__cabeza{gap:clamp(1.5rem,4vw,3.5rem)}
@media (min-width:900px){main.m-ancho .ficha__cabeza{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}
main.m-ancho .ficha__compra{background:none;border:0;padding:0}
main.m-ancho .ficha__compra h1{font:700 clamp(1.75rem,3.5vw,2.5rem)/1.15 var(--titulos);margin:0 0 .5rem}
main.m-ancho .ficha__precio{font-size:clamp(1.75rem,3vw,2.25rem);font-weight:800;margin:.25rem 0 .75rem}
main.m-ancho .ficha__principal img{border-radius:var(--radio)}
main.m-ancho .ficha .reputacion{display:inline-block;margin:0 0 1rem;padding:.35rem .8rem;border:1px solid color-mix(in srgb,var(--texto) 30%,transparent);border-radius:var(--radio-boton);color:var(--texto);font-size:.875rem}
main.m-ancho .ficha .acciones{display:flex;gap:.75rem;align-items:stretch;margin:1rem 0}
main.m-ancho .ficha .acciones form:first-child:not(:last-child){flex:1}
main.m-ancho .ficha .acciones .boton{width:100%;min-height:52px;background:var(--acento);color:var(--sobre-acento);border-radius:var(--radio-boton);font-size:1.05rem}
main.m-ancho .ficha .acciones .boton-icono{min-height:52px;min-width:52px}
main.m-ancho .ficha section{background:none;border:0;border-top:1px solid color-mix(in srgb,var(--texto) 18%,transparent);border-radius:0;padding:1.5rem 0}
.carrito-vista{display:grid;gap:1.5rem;align-items:start}
@media (min-width:900px){.carrito-vista{grid-template-columns:minmax(0,1fr) 22rem}}
.carrito__resumen{padding:1.25rem;border:1px solid color-mix(in srgb,var(--texto) 22%,transparent);border-radius:var(--radio);background:color-mix(in srgb,var(--texto) 5%,var(--fondo))}
.carrito__resumen h2{margin:0 0 .5rem;font-size:1.25rem}
.carrito__resumen .boton{width:100%;min-height:52px;background:var(--acento);color:var(--sobre-acento);border-radius:var(--radio-boton);font-size:1.05rem}
.carrito__resumen form p{margin:.75rem 0 0}
main.m-ancho .carrito__linea{background:none;border-color:color-mix(in srgb,var(--texto) 22%,transparent);border-radius:var(--radio)}
main.m-ancho .carrito__linea img,main.m-ancho .carrito__sinfoto{width:96px;height:96px;border-radius:var(--radio)}
.carrito__linea{grid-template-columns:96px minmax(0,1fr)}
@media (min-width:700px){.carrito__linea{grid-template-columns:96px minmax(0,1fr) auto}}
.chat__lista{display:flex;flex-direction:column;gap:.75rem}
.chat__mensaje{max-width:82%;padding:.6rem .9rem;border:0;border-radius:1rem;background:color-mix(in srgb,var(--texto) 9%,var(--fondo));color:var(--texto);align-self:flex-start;border-bottom-left-radius:.25rem}
.chat__mensaje--comprador{align-self:flex-end;background:var(--acento);color:var(--sobre-acento);border-bottom-left-radius:1rem;border-bottom-right-radius:.25rem}
.chat__mensaje .suave{color:inherit;font-size:.8125rem}
.chat{padding:1rem 1.25rem}
article.ficha{background:none;color:var(--texto);padding:0}  /* la página del dueño también tiene un `.ficha` (pie de ficha técnica) con fondo primario */
article.ficha{display:grid;grid-template-columns:minmax(0,1fr)}
main:not(.m-ancho) section,.ficha section{padding:1rem 0;max-width:none}
main:not(.m-ancho) :is(h2,h3),.ficha :is(h2,h3),.carrito__datos h2{font-size:1.25rem;line-height:1.3;margin:0 0 .75rem}
main:not(.m-ancho) section.chat{padding:1rem 1.25rem}
.carrito__datos h2 a{text-decoration:none}
html body main.m-ancho .ficha__compra{background:none}  /* gana al fondo en caja del oscuro de tienda.css y de la paleta */
main:not(.m-ancho) a:not([class]){color:var(--texto)}
/* Fase 12, F3: pasarela de pago en dos columnas (resumen y pasos a la izquierda, datos de pago a la derecha); una columna a 500 px. */
body:has(.chat-flotante) .pie{padding-bottom:3rem}
.pago-vista{display:grid;gap:1.5rem;align-items:start;margin:1rem 0}
@media (min-width:900px){.pago-vista{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}}
.pago-resumen,.pago-panel{padding:1.5rem;border:1px solid color-mix(in srgb,var(--texto) 22%,transparent);border-radius:var(--radio);background:color-mix(in srgb,var(--texto) 5%,var(--fondo))}
.pago-vista h2{margin:0 0 1rem}
.pago-vista .pago{background:none;border:0;padding:0}
.pasos{display:flex;list-style:none;margin:0 0 1.25rem;padding:0;gap:.25rem;counter-reset:paso}
.pasos li{flex:1;counter-increment:paso;font-size:.875rem;text-align:center;padding-top:2rem;position:relative;color:color-mix(in srgb,var(--texto) 75%,var(--fondo))}
.pasos li::before{content:counter(paso);position:absolute;top:0;left:50%;transform:translateX(-50%);width:1.5rem;height:1.5rem;border-radius:50%;border:2px solid currentColor;line-height:1.3rem;font-weight:700}
.pasos .pasos__hecho::before{content:"\2713";background:var(--texto);color:var(--fondo);border-color:var(--texto)}
.pasos [aria-current]{color:var(--texto);font-weight:700}
.pasos [aria-current]::before{background:var(--acento);color:var(--sobre-acento);border-color:var(--acento)}
.pago__total{display:flex;justify-content:space-between;align-items:baseline;margin:1rem 0 0;padding-top:1rem;border-top:1px solid color-mix(in srgb,var(--texto) 22%,transparent);font-size:clamp(1.5rem,3vw,2rem);font-weight:800}
.pago__total span{font-size:1rem;font-weight:600}
.pago-panel .pago__monto{font-size:clamp(1.75rem,4vw,2.5rem);font-weight:800;line-height:1.1}
.pago-panel .direccion{display:block;padding:.75rem 1rem;border:1px dashed color-mix(in srgb,var(--texto) 50%,transparent);border-radius:var(--radio);background:var(--fondo);font-size:1rem;user-select:all;overflow-wrap:anywhere}
.aviso--icono{display:flex;gap:.6rem;align-items:flex-start;margin:1rem 0;border-left:0;padding:.75rem;border-radius:var(--radio);background:color-mix(in srgb,var(--texto) 7%,var(--fondo))}
body.t-pagina .aviso--icono{border-left:0;padding:.75rem;font-weight:400}
.aviso--icono strong{font-weight:700}
.aviso--icono span{font-weight:400}
.aviso__icono{flex:none;width:24px;height:24px;margin-top:.1rem}
.pago-panel .formulario{max-width:none}
/* Captura 95: QR junto al monto y la pasarela en una pantalla (avisos en el resumen, ayudas más cortas). */
.pago-qr{display:flex;gap:1.25rem;align-items:center}.pago-qr .pago{flex:1;min-width:0;margin:0}
.pago-qr__codigo{flex:none;width:9.5rem;height:9.5rem;border-radius:var(--radio)}
.pago-qr .pago{display:block}.pago-qr .pago dt{font-size:.85rem;font-weight:600;margin:.35rem 0 0}.pago-qr .pago dd{margin:0}.pago-qr .pago dt:first-child{margin-top:0}
.pago-qr .pago__monto{font-size:2rem!important;white-space:nowrap}.pago-panel h2,.pago-resumen h2{margin-bottom:.75rem!important}
.pago-qr__titulo{margin:1rem 0 .35rem;font-weight:700}.pago-panel .direccion{margin:0}
.pago-panel .formulario{margin-top:1rem}.pago-panel .formulario p{margin:.25rem 0 .5rem;font-size:.85rem}
main.m-tarjeta>:is(.formulario,.pago,.reclamo,.chat,section){padding:1.25rem 1.5rem;border:1px solid color-mix(in srgb,var(--texto) 22%,transparent);border-radius:var(--radio);background:color-mix(in srgb,var(--texto) 5%,var(--fondo))}
main.m-ancho .ficha .acciones{flex-wrap:wrap}
main.m-ancho .ficha__compra>form.formulario{max-width:none}
main.m-ancho .ficha__compra>form.formulario button{width:100%;min-height:52px;background:var(--acento);color:var(--sobre-acento);border-radius:var(--radio-boton);font-size:1.05rem}
body.t-pagina .pago-vista .pago{background:none;border:0;padding:0;border-radius:0}
/* Captura 99 (2026-11-11): la pasarela entra completa en una ventana de laptop (~720 px útiles) sin bajar: todo más compacto. */
.pago-vista h2{font-size:1.05rem;margin:0 0 .6rem!important}.pago-panel .formulario button{width:100%;min-height:44px}
.pago-vista .aviso--icono,body.t-pagina .pago-vista .aviso--icono{border:0;font-size:.85rem;line-height:1.4;padding:.5rem .6rem;margin:.6rem 0 0}
@media (min-width:900px){main.m-pago:has(.pago-vista){padding-top:.75rem;padding-bottom:.75rem}main.m-pago:has(.pago-vista) h1{font-size:1.6rem;margin:0 0 .4rem}.pago-vista{margin:.25rem 0;gap:1.25rem}.pago-resumen,.pago-panel{padding:1rem 1.25rem}
.pago-qr__codigo{width:7.5rem;height:7.5rem}.pago-qr .pago__monto{font-size:1.6rem!important}.pago-vista .pago dt,.pago-vista .pago dd{font-size:.95rem}.pago__total{font-size:1.5rem;margin-top:.6rem;padding-top:.6rem}.pago__total span{font-size:.9rem}
.pago-panel .direccion{padding:.5rem .75rem;font-size:.9rem}.pago-qr__titulo{margin:.75rem 0 .25rem;font-size:.95rem}.pago-panel .formulario{margin-top:.6rem}.pago-panel .formulario input{min-height:44px;padding-block:.4rem}.pasos{margin:0 0 .6rem}
.pago-cabeza{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 1.5rem}.pago-cabeza .recibo__acciones{margin:0;max-width:none;justify-content:flex-end}.pago-cabeza .recibo__acciones a{padding:.4rem 0}
body:has(main:is(.m-pago,.m-cuenta,.m-carrito,.m-mensajes)) .pie{padding:0}body:has(main:is(.m-pago,.m-cuenta,.m-carrito,.m-mensajes)) .pie__fila{padding:.25rem 12rem .25rem 1.5rem}body:has(main:is(.m-pago,.m-cuenta,.m-carrito,.m-mensajes)) .pie__fila>div:first-child{display:flex;gap:.75rem;align-items:baseline}
.pago-panel .formulario{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l l" "i b" "p p";column-gap:.75rem}.pago-panel .formulario label{grid-area:l}.pago-panel .formulario input:not([type=hidden]){grid-area:i}.pago-panel .formulario p{grid-area:p;font-size:.8rem;margin:.1rem 0 0}.pago-panel .formulario button{grid-area:b;width:auto;margin:0;white-space:nowrap}}
/* Recibo del pago (2026-11-11): sello animado, ticket con muescas y confeti solo en CSS (la vitrina no admite scripts); quieto con «reducir movimiento». */
main.m-pago section.recibo{padding-block:0}  /* la hoja de la página da a todo `section` el aire de una sección de la web */
.recibo{max-width:36rem;margin:1.5rem auto 0;text-align:center}
.recibo h1{margin:.75rem 0 .25rem;font-size:clamp(1.75rem,4vw,2.5rem)}
.recibo__lema{margin:0 auto 1.5rem;max-width:30rem;font-size:1.05rem;border:0;background:none;padding:0}
.recibo__sello svg{width:5rem;height:5rem;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.recibo__circulo{stroke:var(--acento);fill:color-mix(in srgb,var(--acento) 12%,var(--fondo))}
.recibo__trazo,.recibo__aguja{stroke:var(--texto)}
.recibo--exito .recibo__sello svg{animation:sello .5s cubic-bezier(.2,1.4,.4,1) both}
.recibo__trazo{stroke-dasharray:40;stroke-dashoffset:40;animation:trazo .45s .35s ease-out forwards}
.recibo--pendiente .recibo__aguja{transform-origin:26px 26px;animation:aguja 2.4s linear infinite}
.recibo__ticket{position:relative;text-align:start;padding:1.5rem;border:1px solid color-mix(in srgb,var(--texto) 22%,transparent);border-radius:var(--radio);background:color-mix(in srgb,var(--texto) 4%,var(--fondo));box-shadow:0 18px 40px -24px color-mix(in srgb,var(--texto) 45%,transparent)}
.recibo__cabeza{display:grid;grid-template-columns:1fr auto;gap:.25rem 1rem;align-items:center;padding-bottom:1rem;border-bottom:2px dashed color-mix(in srgb,var(--texto) 30%,transparent)}
.recibo__cabeza p{margin:0}
.recibo__tienda{font-family:var(--titulos);font-weight:800;font-size:1.15rem}
.recibo__numero{grid-column:1;font-size:.9rem;letter-spacing:.04em}
.recibo__estado{grid-row:1/3;grid-column:2;padding:.35rem .8rem;border-radius:999px;font-weight:700;font-size:.875rem;background:var(--acento);color:var(--sobre-acento)}
.recibo--pendiente .recibo__estado{background:none;color:var(--texto);border:2px solid var(--acento)}
.recibo__datos{margin:1rem 0 0;display:grid;gap:.6rem}
.recibo__datos>div{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.recibo__datos dt{font-weight:600}
.recibo__datos dd{margin:0;text-align:end}
.recibo__largo{flex-direction:column;align-items:stretch!important}
.recibo__largo dd{text-align:start}
.recibo__hash{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem;overflow-wrap:anywhere}
.recibo__hash a{color:var(--texto)}
.recibo__total{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:1rem 0 0;padding:1rem 0;border-block:2px dashed color-mix(in srgb,var(--texto) 30%,transparent)}
.recibo__total span{font-weight:600}
.recibo__total strong{font-size:clamp(1.6rem,4vw,2.25rem);font-weight:800;line-height:1.1}
.recibo__datos--pie{font-size:.95rem}
.recibo__ticket .pasos{margin:1.5rem 0 0}
.recibo__ticket .pasos li:not(.pasos__hecho):not([aria-current])::before{background:none;color:inherit;border-color:currentColor}
.recibo__acciones{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem 1.5rem;max-width:36rem;margin:1.5rem auto}
.recibo__acciones p{margin:0}
.recibo__acciones a{display:inline-block;padding:.6rem 0;min-height:44px;font-weight:600}
/* Captura 91: en escritorio el recibo cabe en una pantalla: el sello y las acciones a la izquierda, el ticket a la derecha y los datos en dos columnas. */
@media (min-width:900px){.recibo{max-width:68rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,32rem);gap:3rem;align-items:center}
.recibo__ticket{padding:1.25rem 1.5rem}.recibo__datos{gap:.4rem}.recibo__total{padding:.6rem 0;margin-top:.75rem}.recibo__ticket .pasos{margin-top:1rem}
.recibo__datos--pie{grid-template-columns:1fr 1fr;column-gap:1.5rem}.recibo__datos--pie>div{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:.1rem}.recibo__datos--pie dd{text-align:start}
.recibo__datos--pie .recibo__largo{grid-column:1/-1}.recibo__lema{margin-bottom:.5rem}.recibo__portada .recibo__acciones{margin:.5rem auto 0}
body.t-pagina main.m-pago:has(.recibo){padding-top:1.25rem;padding-bottom:1.25rem}.recibo{margin-top:0}.recibo__datos dt,.recibo__datos dd{margin:0;line-height:1.35}.recibo__total strong{font-size:1.9rem}}
.solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.confeti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50}
.confeti i{position:absolute;top:-1.5rem;width:.6rem;height:1rem;border-radius:2px;background:var(--acento);opacity:0;animation:confeti 3.2s cubic-bezier(.25,.6,.5,1) forwards}
.confeti i:nth-child(4n+2){background:var(--primario);width:.5rem;height:.5rem;border-radius:50%}.confeti i:nth-child(4n+3){background:var(--texto);height:.6rem}.confeti i:nth-child(4n){background:color-mix(in srgb,var(--acento) 55%,var(--primario))}
.confeti i:nth-child(8n+1){left:6%}.confeti i:nth-child(8n+2){left:18%}.confeti i:nth-child(8n+3){left:31%}.confeti i:nth-child(8n+4){left:44%}.confeti i:nth-child(8n+5){left:56%}.confeti i:nth-child(8n+6){left:68%}.confeti i:nth-child(8n+7){left:81%}.confeti i:nth-child(8n){left:93%}
.confeti i:nth-child(3n+1){animation-delay:.1s}.confeti i:nth-child(3n+2){animation-delay:.45s;animation-duration:3.8s}.confeti i:nth-child(3n){animation-delay:.8s;animation-duration:2.8s}
.confeti i:nth-child(5n+1){margin-left:-2rem}.confeti i:nth-child(5n+3){margin-left:1.5rem}.confeti i:nth-child(5n+4){margin-left:-.75rem}
@keyframes confeti{0%{opacity:1;transform:translateY(0) rotate(0)}85%{opacity:1}100%{opacity:0;transform:translateY(105vh) translateX(2.5rem) rotate(720deg)}}
@keyframes sello{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes trazo{to{stroke-dashoffset:0}}
@keyframes aguja{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.confeti{display:none}.recibo__sello svg,.recibo__trazo,.recibo__aguja{animation:none;stroke-dashoffset:0}}
.a11y-quieto .confeti{display:none}.a11y-quieto .recibo__trazo{stroke-dashoffset:0}
@media print{.t-barra,.t-anuncio,.t-menu,.pie,.chat-flotante,.recibo__acciones,.confeti,.a11y-boton{display:none!important}.recibo__ticket{box-shadow:none}}
/* «Pagar con billetera» (WalletConnect, 2026-11-11): botones de 44 px, QR oscuro sobre blanco (así lo leen las billeteras) y el resumen antes de firmar. */
.billetera{display:grid;gap:.75rem;margin:1rem 0}.billetera__boton{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:.5rem 1.25rem;background:var(--marca);color:var(--sobre-marca,#fff);border:0;border-radius:var(--radio-boton);font:inherit;font-weight:600;cursor:pointer;text-decoration:none;justify-self:start}
.billetera__boton:focus-visible{outline:3px solid currentColor;outline-offset:2px}.billetera__boton[disabled]{opacity:.6;cursor:progress}.billetera__qr{width:min(240px,100%);height:auto}.billetera .pago dd{overflow-wrap:anywhere}