/* Página de una pieza de artesanía (artesania/ar-NNN.html, generadas por seo/paginas_artesania.py). Base: landing.css.
   Mismo diseño que la ficha (<dialog>) de artesania-en-madera.html. */
body{background:#f4f1ec}
.ficha{padding:76px 0 0}
.ficha .crumbs{color:var(--ink3)}
.ficha .crumbs a{color:var(--gold-t)}
.ficha-in{max-width:1240px;margin:0 auto;padding:22px 24px 0;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:start}
.pieza-media{background:#ebe6de;border-radius:24px;overflow:hidden;position:sticky;top:84px}
.pieza-media>img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain}
.pieza-thumbs{display:flex;gap:8px;padding:10px}
.pieza-thumbs button{border:2px solid transparent;border-radius:10px;padding:0;overflow:hidden;cursor:pointer;width:64px;height:64px;background:none}
.pieza-thumbs button[aria-current="true"]{border-color:var(--gold)}
.pieza-thumbs img{width:100%;height:100%;object-fit:cover}
.pieza-info{display:flex;flex-direction:column;gap:14px;padding-top:8px}
.pieza-info h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4vw,52px);line-height:1.05}
.pieza-desc{font-size:17px;line-height:1.7}
.pieza-nota{font-size:14px;color:var(--ink2)}
.pieza-info dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px}
.pieza-info dt{color:var(--ink3)}
.pieza-info .precio{font-size:24px;font-weight:600}
.medidas-nota{font-size:12px;color:var(--ink3);margin-top:-6px}
.envio-nota{font-size:13px;line-height:1.7;color:var(--ink2)}
.envio-nota a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.tamanos{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.tamanos legend{font-size:13px;color:var(--ink3);margin-bottom:8px}
.tamanos input{position:absolute;opacity:0}
.tamanos span{display:block;padding:9px 16px;border:1px solid var(--bdm);border-radius:980px;font-size:14px;cursor:pointer}
.tamanos input:checked+span{border-color:var(--ink);background:var(--ink);color:var(--s0)}
.tamanos input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.acciones .btn{border:0;cursor:pointer;font-family:inherit}
.acciones .btn-borde{color:var(--ink);border:1px solid var(--bdm)}
.acciones .btn.is-agregado{background:#2f7a45}
.acc-precio{display:none}
#preguntas{padding-top:90px}
@media(max-width:820px){
  .ficha{padding-top:64px}
  .ficha-in{grid-template-columns:1fr;gap:22px;padding:16px 16px 0}
  .pieza-media{position:static;border-radius:18px}
  /* Celular: precio y "Agregar al carrito" fijos abajo mientras se lee la ficha (el botón del carrito queda arriba de la barra) */
  .pieza-info .precio{display:none}
  .acciones{position:sticky;bottom:0;z-index:2;margin:6px -16px 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#f4f1ec;border-top:1px solid var(--bdl);display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:16px;row-gap:2px}
  .acc-precio{display:block;grid-column:1;grid-row:1;font-size:20px;font-weight:600;line-height:1.2}
  .acciones .btn-ink{grid-column:2;grid-row:1 / span 2;text-align:center}
  .acciones .btn-ink:only-child{grid-column:1 / -1}
  .acciones .btn-borde{grid-column:1;grid-row:2;justify-self:start;border:0;padding:8px 0;margin:-6px 0;background:none;font-size:11px;text-decoration:underline;text-underline-offset:3px} /* área táctil más alta sin agrandar la barra */
  .slc-raiz .slc-fab{bottom:calc(84px + env(safe-area-inset-bottom))} /* sobre la barra fija, no encima del botón */
}