/* CLAW & WAG · la web pública (oct-2026).
   Estructura de tienda (anuncios, modelos, más pedidos, proceso, prueba, cierre)
   con la identidad del sistema: los lilas de MARCA.md, Geist como ÚNICA letra
   (web y sistema son de la misma familia) y formas redondeadas. Una sola hoja
   para todas las páginas públicas. */

@font-face { font-family: 'Geist'; src: url('/static/fonts/Geist-latin.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }

:root {
  --tinta: #1D1B22;
  --cuerpo: #6B6775;
  --tenue: #A6A2AE;
  --linea: rgba(29, 27, 34, .09);
  --blanco: #FFFFFF;
  /* El color de la página (como DCOVI): UN solo fondo gris casi blanco, con un
     toque de lila para que no sea frío. Las secciones NO se pintan de colores:
     se separan con aire y una línea fina. Lo que se toca va en blanco encima y
     el lila queda para lo que significa algo (comprar, estrellas, marca). */
  --fondo: #F4F3F6;
  --gris: #F8F8F8;          /* el fondo de las fotos de producto */
  --niebla: #EFEBF7;        /* solo detalles chicos de marca (iniciales) */
  --lila: #AF9BCA;          /* el logo */
  --accion: #8F78C2;        /* botones: con letra blanca */
  --accion-hover: #8269B8;
  --lila-t: #5B4790;        /* letras lilas sobre fondo claro */
  --g: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --curva: cubic-bezier(.23, 1, .32, 1);
  --ancho: 1360px;
  --borde: 20px;            /* margen lateral en el celular */
  --r-bloque: 28px;         /* portada y bloques grandes */
  --r-foto: 20px;           /* fotos y tarjetas (el panel del sistema) */
  --r-chico: 14px;          /* miniaturas */
  /* El aire, medido una vez para toda la página: entre secciones y entre el
     título de una sección y su contenido. Nada de márgenes sueltos por bloque. */
  --esp-seccion: 64px;     /* dentro de un capítulo; entre capítulos se dobla */
  --esp-cab: 36px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-family: var(--g); font-size: 15px; line-height: 1.75; color: var(--tinta); background: var(--fondo); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accion); outline-offset: 3px; border-radius: 6px; }
.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--borde); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Titulares: Geist 500, apretados, interlineado corto (Wild One: 39 px a 1.0 en celular) */
h1, h2, h3 { font-weight: 500; letter-spacing: -.025em; color: var(--tinta); }
.t-portada { font-size: clamp(38px, 5.4vw, 68px); line-height: 1.02; }
.t-seccion { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.08; }
.t-tarjeta { font-size: 17px; line-height: 1.3; letter-spacing: -.01em; }

/* Botones: píldora. Uno de color por pantalla; el resto, blanco o enlace */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 26px; border-radius: 999px; font-size: 15px; font-weight: 500; letter-spacing: -.005em; white-space: nowrap; transition: background-color 180ms var(--curva), transform 160ms var(--curva); }
.btn:active { transform: scale(.97); }
.btn-accion { background: var(--accion); color: var(--blanco); }
.btn-blanco { background: var(--blanco); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linea); }
@media (hover: hover) and (pointer: fine) {
  .btn-accion:hover { background: var(--accion-hover); }
  .btn-blanco:hover { box-shadow: inset 0 0 0 1px rgba(29, 27, 34, .28); }
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.enlace { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.enlace svg { width: 16px; height: 16px; transition: transform 180ms var(--curva); }
@media (hover: hover) and (pointer: fine) { .enlace:hover svg { transform: translateX(3px); } }

/* ─── Barra de anuncios: rota sola, el primero visible sin script ─── */
.anuncios { position: relative; height: 38px; overflow: hidden; background: var(--accion); color: var(--blanco); font-size: 13.5px; font-weight: 600; letter-spacing: .005em; text-align: center; }
.anuncios a { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 20px; opacity: 0; transform: translateX(24px); transition: opacity 300ms var(--curva), transform 300ms var(--curva); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anuncios a.activo { opacity: 1; transform: none; }
.anuncios a.sale { opacity: 0; transform: translateX(-24px); }
/* ─── Cabecera: blanca y fija, el logo al centro ─── */
.cabecera { position: sticky; top: 0; z-index: 50; background: var(--fondo); border-bottom: 1px solid transparent; transition: border-color 200ms var(--curva); }
.cabecera.con-borde { border-bottom-color: var(--linea); }
.cab-fila { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 60px; }
.cab-izq, .cab-der { display: flex; align-items: center; gap: 4px; }
.cab-der { justify-content: flex-end; }
.cab-logo img { height: 13px; width: auto; }
.cab-enlaces { display: none; gap: 28px; font-size: 14.5px; }
.cab-enlaces a { padding: 6px 0; }
.icono-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; position: relative; }
.icono-btn svg { width: 22px; height: 22px; }
/* la bolsa es de trazo y el WhatsApp relleno: a igual tamaño la bolsa se ve chica */
.icono-btn[data-bolsa] svg { width: 26px; height: 26px; stroke-width: 1.8; }
.icono-btn .cuenta { position: absolute; top: 7px; right: 5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--accion); color: var(--blanco); font-size: 10.5px; font-weight: 600; line-height: 17px; text-align: center; }
@media (min-width: 1000px) {
  .cab-fila { height: 72px; }
  .cab-logo img { height: 16px; }
  .cab-enlaces { display: flex; }
  .cab-menu { display: none; }
}

/* Menú del celular: hoja desde la izquierda */
.menu-fondo { position: fixed; inset: 0; z-index: 80; background: rgba(29, 27, 34, .32); opacity: 0; transition: opacity 240ms var(--curva); }
.menu-hoja { position: fixed; top: 0; bottom: 0; left: 0; z-index: 81; width: min(86vw, 360px); display: flex; flex-direction: column; overflow-y: auto; padding: 14px 20px 28px; background: var(--blanco); transform: translateX(-100%); transition: transform 320ms var(--curva); }
.menu-abierto .menu-fondo { opacity: 1; }
.menu-abierto .menu-hoja { transform: none; }
.menu-fondo[hidden], .menu-hoja[hidden] { display: none; }
.menu-hoja .menu-cab { display: flex; justify-content: space-between; align-items: center; height: 48px; margin-bottom: 8px; }
.menu-hoja .menu-cab img { height: 13px; width: auto; }
.menu-hoja nav a { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--linea); font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.menu-hoja nav a svg { width: 18px; height: 18px; color: var(--tenue); }
/* Los más vendidos en el menú: el que abre el menú también viene a mirar */
.menu-vendidos { margin: 26px 0 32px; }
.menu-vendidos h2 { font-size: 14px; font-weight: 500; color: var(--cuerpo); letter-spacing: 0; }
.menu-vendidos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; margin-top: 12px; }
.menu-vendidos-grid a { display: flex; flex-direction: column; }
.menu-vendidos-grid img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-chico); background: var(--gris); }
.menu-vendidos-grid span { margin-top: 8px; font-size: 14px; font-weight: 500; line-height: 1.3; }
.menu-vendidos-grid small { font-size: 13px; color: var(--cuerpo); }
.menu-hoja .menu-cab a { display: inline-flex; }
.menu-hoja .menu-pie { margin-top: auto; display: grid; gap: 16px; justify-items: center; }
.menu-hoja .redes { display: flex; gap: 8px; }
.menu-hoja .redes a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linea); }
.menu-hoja .redes svg { width: 18px; height: 18px; }
.menu-hoja .menu-pie .btn { width: 100%; }
body.menu-abierto { overflow: hidden; }

/* ─── Portada: superficie de color + foto a sangre, cortada por el arco del dije ─── */
.portada { position: relative; display: grid; }
.portada picture { display: block; grid-area: 1 / 1; }
.portada-foto { position: relative; opacity: 0; transition: opacity 600ms var(--curva); }
.portada-foto.activa { opacity: 1; z-index: 1; }
.portada-foto.sale { opacity: 1; z-index: 0; }
.portada-texto { z-index: 2; }
.portada img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
/* En el celular el titular va sobre la foto (PupRing): arriba el titular, abajo
   el botón, con un velo que solo oscurece los bordes donde hay texto. La foto del
   celular se genera con la parte de arriba tranquila para que el texto no tape nada. */
.portada-texto { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 30px var(--borde) 28px; text-align: center; background: linear-gradient(to bottom, rgba(255, 255, 255, .82), rgba(255, 255, 255, .55) 26%, rgba(255, 255, 255, 0) 46%); }
.portada-texto h1 { color: var(--tinta); max-width: 14ch; font-size: clamp(34px, 9vw, 44px); }
.portada-cifra { margin-top: 10px; color: var(--tinta); font-size: 16px; font-weight: 500; }
.portada-arriba { display: flex; flex-direction: column; align-items: inherit; }
/* En la computadora, como PupRing: la foto a todo el ancho y el texto encima a la
   izquierda, sobre un velo que solo oscurece ese lado. La foto ideal es horizontal
   con aire a la izquierda; con la vertical de hoy se recorta al centro. */
@media (min-width: 900px) {
  .portada img { aspect-ratio: auto; height: clamp(560px, 80vh, 820px); object-position: 60% 45%; }
  .portada-texto { align-items: flex-start; justify-content: center; gap: 32px; text-align: left; padding: 0 max(var(--borde), calc((100vw - var(--ancho)) / 2 + 20px)); background: none; }
  .portada-texto h1 { max-width: 12ch; font-size: clamp(44px, 4.2vw, 60px); }
  .portada-cifra { margin-top: 18px; font-size: 19px; }
}

/* ─── Secciones ─── */
.seccion { padding: var(--esp-seccion) 0; }
.seccion { position: relative; }
/* El corte entre secciones: una línea fina al ancho del contenido, no una franja */
.seccion::before { content: ''; position: absolute; top: 0; left: max(var(--borde), calc((100% - var(--ancho)) / 2 + var(--borde))); right: max(var(--borde), calc((100% - var(--ancho)) / 2 + var(--borde))); height: 1px; background: var(--linea); }
.portada + .seccion::before { display: none; }
/* La sección que sigue su capítulo: pegada a la anterior, sin línea */
.seccion.seguida { padding-top: 0; }
.seccion.seguida::before { display: none; }
.seccion-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: var(--esp-cab); }
.seccion-cab .flechas { flex-shrink: 0; }
@media (min-width: 900px) { :root { --esp-seccion: 88px; --esp-cab: 48px; } }

/* Carrusel con el dedo: muestra uno entero y asoma el siguiente; flechas solo con ratón */
.carrusel { display: grid; grid-auto-flow: column; grid-auto-columns: var(--col, 82%); gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 var(--borde); padding: 6px var(--borde); scrollbar-width: none; overscroll-behavior: contain; }
.carrusel::-webkit-scrollbar { display: none; }
.carrusel > * { scroll-snap-align: start; min-width: 0; }
.flechas { display: none; gap: 8px; }
.flechas button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linea); background: var(--blanco); transition: box-shadow 160ms var(--curva), opacity 160ms var(--curva); }
.flechas button:disabled { opacity: .35; cursor: default; }
.flechas svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) and (min-width: 700px) { .flechas { display: flex; } .flechas button:not(:disabled):hover { box-shadow: inset 0 0 0 1px rgba(29, 27, 34, .3); } }
@media (min-width: 900px) {
  .carrusel { gap: 16px; padding: 6px max(var(--borde), calc((100vw - var(--ancho)) / 2 + 20px)); scroll-padding: 0 max(var(--borde), calc((100vw - var(--ancho)) / 2 + 20px)); }
}

/* Modelos: foto grande, nombre y flecha (Wild One "Dog Walk Kits →") */
.modelo { position: relative; display: block; border-radius: var(--r-foto); overflow: hidden; background: var(--gris); }
.modelo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 600ms var(--curva); }
.modelo .modelo-nombre { position: absolute; left: 12px; bottom: 12px; height: 36px; padding: 0 16px; border-radius: 999px; background: var(--blanco); font-size: 14.5px; font-weight: 500; line-height: 36px; letter-spacing: -.01em; }
.modelo .etiqueta { top: 12px; left: 12px; }
@media (hover: hover) and (pointer: fine) { .modelo:hover img { transform: scale(1.03); } }
.modelos { --col: 62%; }
@media (min-width: 700px) { .modelos { --col: calc((100% - 3 * 12px) / 3.2); } }
@media (min-width: 1100px) { .modelos { --col: calc((100% - 4 * 16px) / 5); grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); overflow: visible; } }

/* Tarjeta de producto: sin borde, sin sombra, sin botón; toda la tarjeta se toca */
.producto, .producto-enlace { display: flex; flex-direction: column; }
.producto-foto { position: relative; aspect-ratio: 1; background: var(--gris); overflow: hidden; border-radius: var(--r-foto); }
.producto-foto img { width: 100%; height: 100%; object-fit: cover; transition: opacity 240ms var(--curva); }
.producto-foto .uso { position: absolute; inset: 0; opacity: 0; }
@media (hover: hover) and (pointer: fine) { .producto-enlace:hover .producto-foto .uso { opacity: 1; } }
.etiqueta { position: absolute; top: 10px; left: 10px; z-index: 1; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--blanco); font-size: 12px; font-weight: 500; line-height: 26px; color: var(--lila-t); }
.producto-nombre { margin-top: 12px; font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.precio { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.precio s { font-weight: 400; color: var(--tenue); }
.acabados { display: flex; align-items: center; gap: 12px; padding-left: 4px; margin-top: 10px; }
.acabado { width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); position: relative; }
/* El acabado se ve como metal, no como un círculo plano: un brillo de arriba a la
   izquierda sobre el tono de la pieza. */
.acabado-gold { background: linear-gradient(135deg, #F6E3A8 0%, #D9B45E 45%, #B88A2E 100%); }
.acabado-silver { background: linear-gradient(135deg, #FAFAFB 0%, #C9CBD0 50%, #9A9DA4 100%); }
.acabado-rose-gold { background: linear-gradient(135deg, #F6D3C6 0%, #DFA28F 50%, #BF7B67 100%); }
.acabado[aria-pressed="true"]::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--tinta); }
.acabado::before { content: ''; position: absolute; inset: -11px; }   /* el dedo toca 44 px */
.productos { --col: 64%; }
@media (min-width: 700px) { .productos { --col: calc((100% - 3 * 12px) / 3.3); } }
@media (min-width: 1100px) { .productos { --col: calc((100% - 4 * 16px) / 4.25); } }

/* Videos de clientes: verticales, se reproducen en su lugar */
.reels { --col: 58%; }
@media (min-width: 700px) { .reels { --col: calc((100% - 3 * 12px) / 3.6); } }
@media (min-width: 1100px) { .reels { --col: calc((100% - 3 * 16px) / 4.3); } }
.reel { position: relative; aspect-ratio: 9 / 16; border-radius: var(--r-foto); overflow: hidden; background: var(--tinta); }
.reel video, .reel img { width: 100%; height: 100%; object-fit: cover; }
.reel .play { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity 200ms var(--curva); }
.reel .play span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: var(--tinta); }
.reel .play svg { width: 20px; height: 20px; margin-left: 3px; }
.reel.sonando .play { opacity: 0; pointer-events: none; }

/* ─── Ficha del producto ─── la galería a un lado y, al otro, lo que hace falta
   para decidir y agregar al pedido. Misma forma que la portada: fotos
   redondeadas sobre la página, sin tarjetas; los campos en blanco. */
@font-face { font-family: 'STIX Two Text CW'; src: url('/static/fonts/STIXTwoText-Regular.ttf') format('truetype'); font-display: swap; }
.ficha { padding: 16px 0 var(--esp-seccion); }
.ficha-grid { display: grid; gap: 28px; }
.ficha-grid > * { min-width: 0; }   /* sin esto la fila de miniaturas ensancha la columna y la página se sale de la pantalla */
.gal-main { aspect-ratio: 1; overflow: hidden; border-radius: var(--r-foto); background: var(--gris); }
.gal-main img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--curva); }
@media (hover: hover) and (pointer: fine) { .gal-main { cursor: zoom-in; } .gal-main:hover img { transform: scale(1.7); } }
.gal-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.gal-thumbs::-webkit-scrollbar { display: none; }
.gal-thumb { flex: 0 0 64px; height: 64px; overflow: hidden; border-radius: var(--r-chico); background: var(--gris); opacity: .62; transition: opacity 200ms var(--curva), box-shadow 200ms var(--curva); }
.gal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gal-thumb.is-active { opacity: 1; box-shadow: 0 0 0 1.5px var(--tinta); }
.migas { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--cuerpo); }
.migas a { color: var(--cuerpo); }
.migas span:last-child { color: var(--tinta); }
.ficha-titulo { margin-top: 14px; font-size: clamp(30px, 3.2vw, 40px); line-height: 1.08; }
.ficha-que { margin-top: 6px; font-size: 15px; color: var(--cuerpo); }
.ficha-precio { display: flex; align-items: baseline; gap: 10px; margin-top: 16px; font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ficha-precio s { font-size: 16px; font-weight: 400; color: var(--tenue); }
.ficha-oferta { margin-top: 6px; font-size: 14px; color: var(--lila-t); }
.campo { margin-top: 24px; }
.campo-etiqueta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; font-size: 14.5px; font-weight: 500; }
.campo-etiqueta span, .campo-etiqueta small { font-weight: 400; font-size: 14px; color: var(--cuerpo); }
.campo-ayuda { margin-left: auto; font-size: 13.5px; font-weight: 500; color: var(--lila-t); text-decoration: underline; text-underline-offset: 3px; }
.ficha-acabados { margin-top: 0; padding-left: 4px; }
.pd-sw.is-active::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--tinta); }
.campo-fila { display: flex; align-items: center; gap: 14px; }
.pd-input { width: 100%; height: 50px; padding: 0 16px; border: 0; border-radius: var(--r-chico); background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea); font: inherit; font-size: 16px; color: var(--tinta); transition: box-shadow 160ms var(--curva); }
.pd-input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--accion); }
.pd-input:disabled { opacity: .5; }
.pd-input + .pd-input { margin-top: 8px; }
.pd-check { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; font-size: 14px; color: var(--cuerpo); white-space: nowrap; }
.pd-check input { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 20px; height: 20px; margin: 0; border-radius: 6px; background: var(--blanco); box-shadow: inset 0 0 0 1.5px rgba(29, 27, 34, .2); cursor: pointer; transition: background-color 160ms var(--curva), box-shadow 160ms var(--curva); }
.pd-check input:checked { background: var(--accion) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: none; }
.pd-drop { display: flex; align-items: center; min-height: 64px; padding: 10px 16px; border-radius: var(--r-chico); background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea); cursor: pointer; position: relative; }
.pd-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pd-drop-vacio { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--cuerpo); }
.pd-drop-vacio svg { width: 20px; height: 20px; color: var(--lila-t); }
.pd-drop-ok { display: inline-flex; align-items: center; gap: 12px; }
.pd-drop-ok img { width: 44px; height: 44px; object-fit: cover; border-radius: 10px; }
.pd-drop-ok span { display: flex; flex-direction: column; line-height: 1.35; font-size: 14.5px; }
.pd-drop-ok small { font-size: 13px; color: var(--cuerpo); }
.pd-revs { display: grid; gap: 8px; }
/* Las opciones del reverso se eligen tocando la opción entera: sin el círculo
   del formulario (se leía como el diseño viejo). La elegida se marca con el
   borde lila y un fondo apenas lila. */
.pd-rev { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 18px; border-radius: var(--r-chico); background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea); font-size: 15px; cursor: pointer; transition: box-shadow 160ms var(--curva), background-color 160ms var(--curva); }
.pd-rev input { position: absolute; opacity: 0; pointer-events: none; }
.pd-rev:has(input:focus-visible) { outline: 2px solid var(--accion); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .pd-rev:not(.is-checked):hover { box-shadow: inset 0 0 0 1px rgba(29, 27, 34, .22); } }
.pd-rev b { margin-left: auto; font-weight: 500; color: var(--cuerpo); }
.pd-rev.is-checked { background: #F8F6FC; box-shadow: inset 0 0 0 1.5px var(--accion); }
.pd-rev-campos { margin-top: 12px; }
.pd-rev-campos .campo-etiqueta { margin-top: 12px; }
.campo-nota { margin-top: 8px; font-size: 13px; color: var(--cuerpo); }
.pd-rev-campos[hidden], .pd-drop-ok[hidden], .pd-drop-vacio[hidden] { display: none; }
.campo-cantidad { display: flex; align-items: center; justify-content: space-between; }
.campo-cantidad .campo-etiqueta { margin: 0; }
.pd-qty { display: inline-flex; align-items: center; height: 46px; border-radius: 999px; background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea); }
.pd-qty button { width: 46px; height: 46px; font-size: 19px; color: var(--tinta); }
.pd-qty span { min-width: 24px; text-align: center; font-weight: 500; font-variant-numeric: tabular-nums; }
.pd-add { width: 100%; margin-top: 28px; }
.ficha-promesa { margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: var(--cuerpo); text-align: center; }
.pd-falta { animation: pd-falta 1.1s var(--curva); }
@keyframes pd-falta { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
/* La frase del reverso, como se va a grabar (⚠ misma medida que el láser) */
.pd-frase-preview { display: flex; justify-content: center; padding: 6px 0 14px; }
.pd-disc { width: 150px; height: 150px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pd-disc.color-silver { background: radial-gradient(circle at 30% 30%, #FFFFFF, #F5F5F5 30%, #D8D8D8 70%, #B8B8B8); }
.pd-disc.color-gold { background: radial-gradient(circle at 30% 30%, #FFF6D6, #F5DDA0 30%, #D9B870 70%, #B89548); }
.pd-disc.color-rose-gold { background: radial-gradient(circle at 30% 30%, #FFEFE6, #F0CFC0 30%, #D9A597 70%, #B88573); }
.pd-disc-text { font-family: 'STIX Two Text CW', Georgia, serif; font-size: 20.6px; color: rgba(40, 30, 20, .85); text-align: center; line-height: 1.2; min-height: 36px; }
.pd-disc-text.is-empty { color: rgba(40, 30, 20, .3); font-style: italic; }
.pd-disc-line { display: block; }
.pd-heart { width: 167px; height: auto; }
.pd-heart text { font-family: 'STIX Two Text CW', Georgia, serif; fill: rgba(40, 30, 20, .85); }
.pd-heart.is-empty text { fill: rgba(40, 30, 20, .32); font-style: italic; }
.pd-rev-campos[data-rev=frase] .pd-input { text-align: center; font-family: 'STIX Two Text CW', Georgia, serif; }
/* Lo plegado: detalles, material, envío */
.ficha-mas { margin-top: 36px; border-top: 1px solid var(--linea); }
.ficha-mas details { border-bottom: 1px solid var(--linea); }
.ficha-mas summary { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; font-size: 15.5px; font-weight: 500; list-style: none; cursor: pointer; }
.ficha-mas summary::-webkit-details-marker { display: none; }
.ficha-mas summary svg { width: 18px; height: 18px; color: var(--cuerpo); transform: rotate(90deg); transition: transform 200ms var(--curva); }
.ficha-mas details[open] summary svg { transform: rotate(-90deg); }
.ficha-mas details > p { padding: 0 0 18px; font-size: 14.5px; line-height: 1.65; color: var(--cuerpo); }
.specs { padding: 0 0 12px; }
.specs div { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 8px 0; font-size: 14.5px; line-height: 1.5; }
.specs dt { color: var(--cuerpo); }
@media (min-width: 900px) {
  .ficha { padding-top: 32px; }
  .ficha-grid { grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: start; }
  .ficha-galeria { position: sticky; top: 96px; }
  .gal-thumb { flex-basis: 80px; height: 80px; }
}
/* Guía de fotos: hoja que sube en el celular, ventana en la compu */
.guia { position: fixed; inset: 0; z-index: 90; display: none; align-items: flex-end; justify-content: center; background: rgba(29, 27, 34, .4); }
.guia.is-open { display: flex; }
.guia-hoja { width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; padding: 18px 20px calc(24px + env(safe-area-inset-bottom)); border-radius: var(--r-bloque) var(--r-bloque) 0 0; background: var(--fondo); }
@media (min-width: 700px) { .guia { align-items: center; } .guia-hoja { border-radius: var(--r-bloque); padding-bottom: 24px; } }
.guia-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.guia-cab h2 { font-size: 20px; }
.guia-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.guia-grid img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-chico); }
.guia-grid figcaption { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--cuerpo); }
.guia-grid figcaption b { display: block; font-size: 14px; font-weight: 500; color: var(--tinta); }
.guia-grid .mal b::before { content: '✕ '; color: #B4475C; }
.guia-grid .bien b::before { content: '✓ '; color: #2C7A57; }

/* ─── Página de categoría: el título y todos sus productos en rejilla ─── */
.coleccion { padding: 16px 0 var(--esp-seccion); }
.coleccion-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 14px 0 var(--esp-cab); }
.coleccion-n { font-size: 14px; color: var(--cuerpo); white-space: nowrap; }
.rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 14px; }
@media (min-width: 900px) { .coleccion { padding-top: 32px; } .rejilla { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 40px 16px; } }  /* los cinco modelos caben en una fila */
.colecciones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 900px) { .colecciones { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

/* ─── Páginas de ocasión: la foto a un lado, el texto al otro ─── */
.ocasion-pag { padding: 16px 0 var(--esp-seccion); }
.ocasion-grid { display: grid; gap: 28px; }
.ocasion-grid > * { min-width: 0; }
.ocasion-foto { aspect-ratio: 1; overflow: hidden; border-radius: var(--r-foto); background: var(--gris); }
.ocasion-foto img { width: 100%; height: 100%; object-fit: cover; }
.ocasion-lead { margin-top: 12px; max-width: 36ch; font-size: 17px; line-height: 1.55; color: var(--cuerpo); }
.puntos { margin: 28px 0 28px; border-top: 1px solid var(--linea); }
.puntos div { padding: 16px 0; border-bottom: 1px solid var(--linea); }
.puntos dt { font-size: 15.5px; font-weight: 500; }
.puntos dd { margin-top: 3px; font-size: 14.5px; line-height: 1.55; color: var(--cuerpo); }
.ocasion-info .btn { width: 100%; }
@media (min-width: 900px) {
  .ocasion-pag { padding-top: 32px; }
  .ocasion-grid { grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; }
  .ocasion-info .btn { width: auto; }
}

/* ─── /links: el Linktree de la bio. Una lista de enlaces, no una web ─── */
.links { width: 100%; max-width: 440px; min-height: 100vh; min-height: 100dvh; margin: 0 auto; padding: 56px var(--borde) calc(32px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.links-perfil { display: flex; flex-direction: column; align-items: center; text-align: center; }
.links-avatar { width: 88px; height: 88px; padding: 16px; border-radius: 50%; background: var(--blanco); }
.links-perfil h1 { margin-top: 16px; font-size: 20px; letter-spacing: -.015em; }
.links-perfil p { margin-top: 4px; font-size: 15px; color: var(--cuerpo); }
.links-botones { display: grid; gap: 10px; margin-top: 32px; }
.links-boton { position: relative; display: flex; align-items: center; justify-content: center; height: 56px; padding: 0 56px; border-radius: 999px; background: var(--blanco); font-size: 15.5px; font-weight: 500; transition: transform 160ms var(--curva); }
.links-boton svg { position: absolute; left: 20px; width: 20px; height: 20px; }
.links-boton.es-accion { background: var(--accion); color: var(--blanco); }
.links-boton:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .links-boton:not(.es-accion):hover { box-shadow: inset 0 0 0 1px rgba(29, 27, 34, .18); } .links-boton.es-accion:hover { background: var(--accion-hover); } }
.links-pie { margin-top: auto; padding-top: 40px; font-size: 13px; color: var(--tenue); text-align: center; }

/* ─── Panel "Agregado a tu pedido" ─── a la derecha en la compu, desde abajo
   en el celular. Flota: es lo único que lleva sombra. */
.panel-fondo { position: fixed; inset: 0; z-index: 85; background: rgba(29, 27, 34, .32); opacity: 0; transition: opacity 240ms var(--curva); }
.panel-pedido { position: fixed; left: 0; right: 0; bottom: 0; z-index: 86; display: flex; flex-direction: column; gap: 16px; max-height: 88vh; overflow-y: auto; padding: 18px 20px calc(20px + env(safe-area-inset-bottom)); border-radius: var(--r-bloque) var(--r-bloque) 0 0; background: var(--fondo); box-shadow: 0 -10px 40px rgba(29, 27, 34, .14); transform: translateY(100%); transition: transform 340ms var(--curva); }
.panel-pedido[hidden], .panel-fondo[hidden] { display: none; }
body.panel-abierto .panel-fondo { opacity: 1; }
body.panel-abierto .panel-pedido { transform: none; }
@media (min-width: 900px) {
  .panel-pedido { left: auto; top: 0; width: 420px; max-height: none; padding: 22px 24px 24px; border-radius: 0; box-shadow: -10px 0 40px rgba(29, 27, 34, .14); transform: translateX(100%); }
}
.panel-cab { display: flex; align-items: center; justify-content: space-between; }
.panel-cab h2 { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; }
.panel-cab h2 svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: #2C7A57; color: var(--blanco); }
.panel-linea { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center; }
.panel-linea img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-chico); background: var(--gris); }
.panel-linea div { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.panel-linea b { font-size: 15px; font-weight: 500; }
.panel-linea small { font-size: 13px; color: var(--cuerpo); }
.panel-linea > span { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.panel-resumen { display: flex; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); font-size: 15px; }
.panel-resumen span { color: var(--cuerpo); }
.panel-resumen b { font-weight: 500; font-variant-numeric: tabular-nums; }
.panel-promo { font-size: 14.5px; color: var(--tinta); }
.panel-promo b { font-weight: 500; color: var(--lila-t); }
.panel-promo[hidden] { display: none; }
.panel-sugeridos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.panel-sugeridos a { display: flex; flex-direction: column; }
.panel-sugeridos img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-chico); background: var(--gris); }
.panel-sugeridos span { margin-top: 6px; font-size: 12.5px; font-weight: 500; line-height: 1.3; }
.panel-sugeridos small { font-size: 12.5px; color: var(--cuerpo); }
.panel-pie { display: grid; gap: 8px; margin-top: auto; padding-top: 4px; }
.panel-pie .btn { width: 100%; }
.ficha-error { margin-top: 18px; padding: 12px 14px; border-radius: var(--r-chico); background: #FBE8EE; color: #8E2F4C; font-size: 14px; line-height: 1.45; }
.ficha-error[hidden] { display: none; }
.pd-add.cargando { opacity: .7; }

/* ─── Páginas legales y Libro de Reclamaciones: texto para leer, una columna ─── */
.legal { padding: 16px 0 var(--esp-seccion); }
.legal-cuerpo { max-width: 720px; }
.legal h2 { margin: 36px 0 10px; font-size: 19px; }
.legal p { margin-top: 10px; font-size: 15.5px; line-height: 1.7; color: var(--cuerpo); max-width: 64ch; }
.legal-enlaces { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 36px; }
.lr-empresa { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin-top: 24px; padding: 18px 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.lr-empresa dt { font-size: 13px; color: var(--cuerpo); }
.lr-empresa dd { font-size: 15px; font-weight: 500; }
.lr-form h2 { margin-top: 40px; }
.lr-campo { margin-top: 16px; }
.lr-campo label { display: block; margin-bottom: 8px; font-size: 14.5px; font-weight: 500; }
.lr-campo label small { font-weight: 400; color: var(--cuerpo); }
.lr-campo label.pd-rev { display: flex; margin-bottom: 0; font-size: 15px; font-weight: 400; }
.checkout-form .pd-revs { display: grid; gap: 10px; }
.lr-fila { display: grid; gap: 0 14px; }
@media (min-width: 640px) { .lr-fila { grid-template-columns: 1fr 1fr; } }
.lr-texto { height: auto; padding: 14px 16px; line-height: 1.55; resize: vertical; font-family: inherit; }
.lr-error { display: block; margin-top: 6px; font-size: 13px; color: #8E2F4C; }
.con-error .pd-input { box-shadow: inset 0 0 0 1.5px #B4475C; }
.lr-opciones { display: grid; gap: 8px; margin-top: 16px; }
.lr-tipo span { display: flex; flex-direction: column; padding: 12px 0; line-height: 1.4; }
.lr-tipo b { margin-left: 0; font-weight: 500; color: var(--tinta); }
.lr-tipo small { font-size: 13px; color: var(--cuerpo); }
.lr-acepto { margin-top: 28px; white-space: normal; color: var(--tinta); }
.lr-acepto.con-error { color: #8E2F4C; }
.lr-nota { font-size: 13.5px !important; }
.lr-enviar { width: 100%; margin-top: 20px; }
@media (min-width: 640px) { .lr-enviar { width: auto; } }
.lr-constancia { margin: 24px 0 28px; border-top: 1px solid var(--linea); }
.lr-constancia div { border-bottom: 1px solid var(--linea); }
@media print { .anuncios, .cabecera, .pie, .barra-compra, .legal .btn { display: none !important; } }

/* ─── Tu pedido y checkout ─── las piezas o los datos a la izquierda y el
   resumen fijo a la derecha en la compu; en el celular, una columna. */
.compra { padding: 16px 0 var(--esp-seccion); }
.compra .ficha-titulo { margin-bottom: 28px; }
.compra-vacia { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; font-size: 16px; color: var(--cuerpo); }
.compra-grid { display: grid; gap: 36px; }
.compra-grid > * { min-width: 0; }
@media (min-width: 900px) {
  .compra { padding-top: 32px; }
  .compra-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 64px; align-items: start; }
  .compra-grid .resumen { position: sticky; top: 96px; }
  .compra-grid.es-checkout .resumen { order: 2; }
}
.pieza { display: grid; grid-template-columns: 88px 1fr auto; gap: 16px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--linea); }
.pieza:first-child { border-top: 1px solid var(--linea); }
.pieza img { width: 88px; height: 88px; object-fit: cover; border-radius: var(--r-chico); background: var(--gris); }
.pieza-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.pieza-info b { font-size: 16px; font-weight: 500; }
.pieza-info small { font-size: 13.5px; color: var(--cuerpo); }
.pieza-acciones { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.pieza-acciones form { display: flex; }
.pieza-acciones .pd-qty { height: 40px; }
.pieza-acciones .pd-qty button { width: 40px; height: 40px; }
.pieza-acciones .pd-qty button:disabled { color: var(--tenue); }
.pieza-quitar { font-size: 14px; color: var(--cuerpo); text-decoration: underline; text-underline-offset: 3px; }
.pieza-precio { font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.compra-promo { margin-top: 28px; }
.compra-promo p { margin-bottom: 14px; font-size: 15px; }
.compra-promo b { font-weight: 500; color: var(--lila-t); }
.resumen { display: flex; flex-direction: column; }
.resumen-fila, .resumen-total { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; font-size: 15px; font-variant-numeric: tabular-nums; }
.resumen-fila span:first-child { color: var(--cuerpo); }
.resumen-fila.es-descuento span, .es-gratis { color: #2C7A57 !important; font-weight: 500; }
.resumen-total { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--linea); font-size: 20px; font-weight: 500; }
.resumen-fila.es-hoy { margin-top: 4px; padding: 14px 16px; border-radius: var(--r-chico); background: var(--niebla); }
.resumen-fila.es-hoy span { color: var(--tinta) !important; font-weight: 500; }
.resumen-nota { font-size: 14px; color: var(--cuerpo); }
.resumen-nota.es-ok { color: #2C7A57; }
.resumen-btn { margin-top: 18px; }
.resumen-seguir { align-self: center; margin-top: 16px; }
.resumen-plegado, .resumen-codigo { border-bottom: 1px solid var(--linea); }
.resumen-plegado summary, .resumen-codigo summary { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; font-size: 15px; font-weight: 500; cursor: pointer; list-style: none; }
.resumen-plegado summary::-webkit-details-marker, .resumen-codigo summary::-webkit-details-marker { display: none; }
.resumen-plegado summary b { font-weight: 500; }
.resumen-codigo summary { font-weight: 400; color: var(--lila-t); }
.resumen-pieza { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding-bottom: 14px; font-size: 14px; }
.resumen-pieza img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; background: var(--gris); }
.resumen-pieza div { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.resumen-pieza b { font-weight: 500; }
.resumen-pieza small { color: var(--cuerpo); font-size: 13px; }
.resumen-codigo-form { display: flex; gap: 8px; padding-bottom: 14px; }
.resumen-codigo-form .btn { height: 50px; flex-shrink: 0; }
.resumen-codigo .lr-error { padding-bottom: 12px; }
.checkout-form h2 { margin: 36px 0 2px; font-size: 19px; }
.checkout-form h2:first-of-type { margin-top: 0; }
.checkout-form .ficha-error { margin: 0 0 20px; }
.checkout-nota, .checkout-pago { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--cuerpo); max-width: 52ch; }
.checkout-regalo { margin-top: 18px; white-space: normal; color: var(--tinta); }
.checkout-btn { width: 100%; margin-top: 22px; }
[data-entrega][hidden], [data-recibe][hidden], [data-solo-provincia][hidden] { display: none; }

/* Lo que nos cuentan: comentarios reales, en sus palabras, con su calificación */
.opiniones-cab { display: flex; flex-direction: column; gap: 10px; }
.opiniones-resumen { font-size: 15px; font-weight: 500; color: var(--cuerpo); }
.estrellas { display: inline-flex; gap: 2px; color: var(--accion); }
.estrellas svg { width: 16px; height: 16px; fill: currentColor; }
/* Testimonios: corren solos como la tira de fotos, pero más lento para leerlos */
.testimonios { --tira-gap: 48px; }
.tira-pista .opinion { flex: 0 0 280px; align-self: flex-start; }
@media (min-width: 900px) { .testimonios { --tira-gap: 80px; } .tira-pista .opinion { flex-basis: 420px; } }
.opinion { display: flex; flex-direction: column; gap: 16px; max-width: 36ch; }
.opinion .estrellas svg { width: 17px; height: 17px; }
.opinion blockquote p { font-size: 18px; line-height: 1.5; letter-spacing: -.015em; color: var(--tinta); text-wrap: pretty; }
@media (min-width: 900px) { .opinion blockquote p { font-size: 23px; line-height: 1.4; } }
.opinion figcaption { display: flex; align-items: center; gap: 12px; padding-top: 6px; }  /* el nombre va pegado a su frase, no empujado al fondo */
.opinion-avatar { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--niebla); color: var(--lila-t); font-size: 15px; font-weight: 600; }
.opinion-quien { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.opinion-quien b { font-size: 14.5px; font-weight: 500; }
.opinion-quien small { font-size: 13px; color: var(--cuerpo); }

/* De su foto a su joya: la misma pieza que un producto (foto arriba, título y
   texto debajo) en todos los tamaños. Dos por fila en el celular, cuatro en la
   computadora. Una lista de filas con miniatura se leía como una app. */
.pasos { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 14px; }
.paso figure { aspect-ratio: 1; overflow: hidden; background: var(--gris); border-radius: var(--r-foto); }
.paso figure img { width: 100%; height: 100%; object-fit: cover; }
.paso h3 { margin-top: 12px; font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.paso p { margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: var(--cuerpo); }
@media (min-width: 900px) {
  .pasos { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .paso h3 { margin-top: 14px; }
  .paso p { max-width: 30ch; }
}

/* Llegaron a casa, partido: la cuenta a un lado y las fotos al otro */
.casa { display: grid; gap: 28px; }
.casa-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.casa-cuenta { display: flex; align-items: center; gap: 12px; }
.casa-cuenta img { width: 44px; height: 44px; padding: 7px; border-radius: 50%; background: var(--blanco); }
.casa-cuenta span { display: flex; flex-direction: column; line-height: 1.35; }
.casa-cuenta b { font-size: 15px; font-weight: 500; }
.casa-cuenta small { font-size: 13px; color: var(--cuerpo); }
@media (min-width: 900px) { .casa { grid-template-columns: 1fr 2fr; gap: 64px; align-items: center; } }

/* Las tiras corren solas, despacio; se detienen con el mouse o el dedo encima y
   siguen al soltar. Van duplicadas para que la vuelta no se note: el salto es
   media pista más medio espacio, por eso el espacio es una variable. */
.tira { touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
.tira-pista { display: flex; gap: var(--tira-gap, 16px); width: max-content; animation: tira var(--tira-dur, 70s) linear infinite; }
.tira:hover .tira-pista, .tira.pausa .tira-pista { animation-play-state: paused; }
@keyframes tira { to { transform: translateX(calc(-50% - var(--tira-gap, 16px) / 2)); } }
/* Su foto y nuestro diseño: dos fotos del mismo tamaño y radio que las del resto
   de la página, sin tarjeta alrededor. */
.pares { --tira-gap: 32px; }
.tira-pista .par { flex: 0 0 300px; }
@media (min-width: 900px) { .pares { --tira-gap: 40px; } .tira-pista .par { flex-basis: 400px; } }
.par { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.par img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-foto); }
.par img.trazo { object-fit: contain; padding: 8%; background: var(--blanco); }
.par .par-flecha { color: var(--lila); width: 18px; height: 18px; }
.par figcaption { grid-column: 1 / -1; display: flex; justify-content: space-between; padding: 0 2px; font-size: 13px; color: var(--cuerpo); }
.par figcaption b { font-weight: 500; color: var(--lila-t); }

/* Ocasiones: dos fotos grandes con su texto encima del pie de la foto */
.ocasiones { display: grid; gap: 12px; }
.ocasion { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--gris); border-radius: var(--r-bloque); }
.ocasion img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--curva); }
.ocasion .ocasion-texto { position: absolute; left: 0; right: 0; bottom: 0; padding: 72px 22px 22px; color: var(--blanco); background: linear-gradient(to top, rgba(29, 27, 34, .62), rgba(29, 27, 34, 0)); }
.ocasion h3 { color: var(--blanco); font-size: 26px; line-height: 1.1; }
.ocasion p { margin-top: 6px; font-size: 15px; line-height: 1.5; opacity: .92; max-width: 34ch; }
.ocasion .enlace { margin-top: 12px; color: var(--blanco); }
@media (hover: hover) and (pointer: fine) { .ocasion:hover img { transform: scale(1.03); } }
@media (min-width: 900px) { .ocasiones { grid-template-columns: 1fr 1fr; gap: 16px; } .ocasion { aspect-ratio: 4 / 3; } .ocasion h3 { font-size: 32px; } }

/* Fotos de clientes en Instagram */
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.galeria a { aspect-ratio: 1; overflow: hidden; background: var(--gris); border-radius: var(--r-chico); }
.galeria img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .galeria { gap: 8px; } .galeria a { border-radius: var(--r-foto); } }

/* Cierre */
.cierre { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.cierre p { color: var(--cuerpo); max-width: 40ch; }

/* ─── Pie: el de una empresa real ─── */
/* Pie claro, en el gris de la marca. De PupRing se toma solo la función: en el
   celular las secciones se abren al tocarlas para que el pie sea corto. */
.pie { padding: 48px 0 calc(32px + env(safe-area-inset-bottom)); background: var(--fondo); border-top: 1px solid var(--linea); color: var(--cuerpo); font-size: 14px; }
.pie-fila { display: grid; gap: 0; }
.pie-marca { margin-bottom: 18px; }
.pie-marca img { width: 44px; height: 44px; object-fit: contain; }
.pie-marca p { margin-top: 12px; max-width: 34ch; line-height: 1.6; }
.pie-grupo { border-bottom: 1px solid var(--linea); }
.pie-grupo summary { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; color: var(--tinta); font-size: 15px; font-weight: 500; cursor: pointer; list-style: none; }
.pie-grupo summary::-webkit-details-marker { display: none; }
.pie-grupo summary svg { width: 16px; height: 16px; transform: rotate(90deg); transition: transform 200ms var(--curva); color: var(--tenue); }
.pie-grupo[open] summary svg { transform: rotate(-90deg); }
.pie-grupo ul { list-style: none; display: grid; gap: 10px; padding: 0 0 18px; }
.pie-grupo ul a:hover { color: var(--tinta); }
.pie-cierre { display: grid; justify-items: center; gap: 12px; margin-top: 28px; text-align: center; }
.pie .redes { display: flex; gap: 8px; }
.pie .redes a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linea); color: var(--tinta); }
.pie .redes svg { width: 18px; height: 18px; }
.pie-legal { font-size: 13px; }
@media (min-width: 900px) {
  .pie-fila { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 32px; align-items: start; }
  .pie-marca { margin-bottom: 0; }
  .pie-grupo { border-bottom: 0; }
  .pie-grupo summary { pointer-events: none; padding-top: 4px; }
  .pie-grupo summary svg { display: none; }
  .pie-cierre { grid-template-columns: auto 1fr; justify-items: start; align-items: center; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--linea); text-align: left; }
  .pie-legal { justify-self: end; }
}

/* Barra fija del celular: aparece al pasar la portada y se aparta frente al pie */
.barra-compra { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40; display: flex; gap: 8px; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: 0 10px 30px rgba(29, 27, 34, .14), inset 0 0 0 1px rgba(255, 255, 255, .7); transform: translateY(calc(100% + 24px)); transition: transform 320ms var(--curva); }
.barra-compra.visible { transform: none; }
.barra-compra .btn { flex: 1; height: 48px; }
.barra-compra .btn-wa { flex: none; width: 48px; padding: 0; }
@media (min-width: 900px) { .barra-compra { display: none; } }

/* Aparecer al bajar: solo si el script corre (html.anima); con cualquier falla,
   el contenido ya está visible. */
.anima [data-aparece] { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--curva), transform 600ms var(--curva); }
.anima [data-aparece].visible { opacity: 1; transform: none; }
/* Tocar responde */
.producto-enlace:active .producto-foto, .modelo:active, .ocasion:active { transform: scale(.98); }
.producto-foto, .ocasion { transition: transform 160ms var(--curva); }
.reel .play span { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform 160ms var(--curva); }
.reel .play:active span { transform: scale(.94); }

@media (prefers-reduced-motion: reduce) {
  .tira { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .tira-pista { animation: none; }
  .anima [data-aparece] { opacity: 1; transform: none; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ─── ¡Recibimos tu pedido! ─── el adelanto manda; el resumen con sus datos al
   costado en la compu y debajo en el celular. */
.listo-cab { max-width: 640px; margin-bottom: 36px; }
.listo-cab .ficha-titulo { margin: 0 0 10px; }
.listo-cab p { font-size: 16px; line-height: 1.6; color: var(--cuerpo); }
.listo-cab b { font-weight: 500; color: var(--tinta); }
.listo-h2 { margin: 28px 0 12px; font-size: 17px; font-weight: 500; }
.listo-h2:first-child { margin-top: 0; }
.listo-datos div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linea); font-size: 14.5px; line-height: 1.5; }
.listo-datos dt { color: var(--cuerpo); }
.listo-datos small { color: var(--cuerpo); font-size: 13.5px; }
.listo-pago { padding: 28px; border-radius: var(--r-foto); background: var(--blanco); }
.listo-pago h2 { margin-bottom: 8px; font-size: 20px; font-weight: 500; }
.listo-cuenta { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--linea); }
.listo-cuenta div { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.listo-cuenta small { font-size: 13px; color: var(--cuerpo); }
.listo-cuenta b { font-size: 19px; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.listo-cuenta span { font-size: 13.5px; color: var(--cuerpo); }
.listo-cuenta .btn { height: 44px; flex-shrink: 0; }
.listo-wa { width: 100%; margin-top: 24px; gap: 10px; }
.listo-wa svg { width: 20px; height: 20px; }
.listo-nota { margin-top: 12px; font-size: 14px; color: var(--cuerpo); text-align: center; }
.listo-pasos { margin: 12px 0 0 20px; font-size: 15.5px; line-height: 1.6; }
.listo-pasos li { padding: 6px 0; }
@media (max-width: 899px) { .listo-pago { padding: 22px 18px; } }
@media (max-width: 899px) { .es-listo .listo-main { order: -1; } }
@media (max-width: 480px) { .listo-cuenta b.es-largo { font-size: 15.5px; letter-spacing: -.01em; } }

/* Venta en la ficha y el resumen (14-oct) */
.ficha-estrellas { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; color: var(--cuerpo); }
.ficha-estrellas span { color: var(--accion); letter-spacing: 1px; }
.ficha-entrega { margin: 22px 0 12px; font-size: 14px; line-height: 1.5; color: var(--cuerpo); }
.ficha-entrega b { font-weight: 500; color: var(--tinta); }
.pd-rev-mini { width: 56px; height: 56px; flex-shrink: 0; object-fit: cover; border-radius: 10px; background: var(--gris); }
.pd-rev:has(.pd-rev-mini) { min-height: 72px; padding-left: 8px; }
.pd-revs .pd-rev-campos { margin: 4px 0 12px; }
.tel-fila { align-items: stretch; }
.tel-fila > .pd-input { margin: 0; }
.tel-fila { position: relative; display: flex; gap: 8px; }
.tel-fila .tel-pais { flex: 0 0 auto; width: auto; max-width: 46%; }
.tel-fila .tel-pais[hidden] { display: none; }
.tel-fila > input { flex: 1; min-width: 0; }
.tel-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 12px 0 14px; border: 0; border-radius: var(--r-chico); background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea); font: inherit; font-size: 16px; color: var(--tinta); cursor: pointer; }
.tel-btn img, .tel-lista img { width: 22px; height: 16px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(29, 27, 34, .08); }
.tel-btn svg { color: var(--cuerpo); }
.tel-btn:focus-visible { outline: 2px solid var(--accion); outline-offset: 2px; }
.tel-lista { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; width: min(320px, 100%); max-height: 320px; overflow-y: auto; padding: 8px; border-radius: var(--r-chico); background: var(--blanco); box-shadow: 0 12px 32px rgba(29, 27, 34, .14), 0 0 0 1px var(--linea); }
.tel-lista[hidden] { display: none; }
.tel-buscar { height: 44px; margin-bottom: 6px; }
.tel-lista [role=option] { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 10px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 15px; color: var(--tinta); text-align: left; cursor: pointer; }
.tel-lista [role=option][hidden] { display: none; }
.tel-lista [role=option] small { margin-left: auto; font-size: 14px; color: var(--cuerpo); }
.tel-lista [role=option][aria-selected=true], .tel-lista [role=option]:hover { background: var(--fondo); }
.checkout-monto { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding: 16px 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); font-size: 16px; }
.checkout-monto b { font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tira img { -webkit-user-drag: none; }
.tira.pausa:active { cursor: grabbing; }

/* iPhone: mantener el dedo sobre una foto no abre el menú de "Guardar en Fotos"
   ni la vista previa del enlace: en la tira se pausa, en la tarjeta se ve puesto. */
.tira img, .producto-foto img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.producto-enlace { -webkit-touch-callout: none; }
.producto.tocando .producto-foto .uso { opacity: 1; }