/* Rights v4 · Coberturas — tienda (chocolates.html #coberturas) y página para chefs (coberturas.html #catalogo)
   Las tres líneas del catálogo 2026/2027 y el chocolate blanco, con la ficha técnica de cada cobertura.
   Sin JS la ficha se despliega dentro de su tarjeta (<details>). Con JS se abre en un panel lateral;
   en el teléfono, en una hoja que sube desde abajo (js/coberturas.js).
   Usa las tarjetas de css/tienda3d.css (.tc) y los colores y letras de css/site.css. */

/* ================= Tarjetas ================= */
/* la bolsa recortada no está centrada en su lienzo: --tcob-bx la centra en el escenario (también en la tarjeta de nibs) */
.tcob .tc__float,.tc--bx .tc__float{left:calc(14% + var(--tcob-bx,0%));right:calc(14% - var(--tcob-bx,0%))}
.tcob__pres{font-family:var(--sub);font-size:.76rem;letter-spacing:.02em;color:var(--ink-70);margin-top:.1rem}
.dark .tcob__pres{color:var(--ivory-70)}
.tcob__actions{position:relative;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem 1.1rem;margin-top:.7rem}

/* botón «Ver ficha técnica» (también el resumen del <details> sin JS) */
.tficha__toggle{display:inline-flex;align-items:center;gap:.45rem;min-height:40px;padding:.35rem 0;border:0;background:none;cursor:pointer;
  font-family:var(--sub);font-size:.8rem;font-weight:500;letter-spacing:.03em;line-height:1.25;color:var(--gold-3);text-align:left;
  text-decoration:underline;text-decoration-color:rgba(138,108,42,.4);text-decoration-thickness:1px;text-underline-offset:5px;list-style:none;
  transition:color .25s,text-decoration-color .25s}
.tficha__toggle::-webkit-details-marker{display:none}
.tficha__toggle svg{flex:none}
.tficha__toggle:hover{color:var(--molten);text-decoration-color:currentColor}
.tficha__toggle:focus-visible{outline:2px solid var(--gold-3);outline-offset:4px;border-radius:4px}
.dark .tficha__toggle{color:var(--gold-2);text-decoration-color:rgba(226,194,122,.45)}
.dark .tficha__toggle:hover{color:var(--ivory);text-decoration-color:currentColor}
.dark .tficha__toggle:focus-visible{outline-color:var(--gold-2)}
.tc__stage.is-action{cursor:pointer}

/* chocolate blanco: es una foto con fondo gris, va dentro de un marco claro */
.tcob--frame .tc__float{inset:12%}
.tcob--frame .tc__obj{border-radius:16px;background:#f4f1ec;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 26px 42px -28px rgba(0,0,0,.6)}
.tcob--frame .tc__img{inset:7px;width:calc(100% - 14px);height:calc(100% - 14px);object-fit:cover;border-radius:11px}
.tcob--frame .tc__glare{border-radius:16px}
.tcob--frame .tc__shadow{object-fit:cover;border-radius:16px}
.tcob--frame .tc__floor{display:none}

/* sin JS: la ficha se abre debajo, a todo el ancho de la tarjeta (las vecinas no se estiran) */
.tficha[open]{order:5;flex:1 0 100%}
.tgrid:has(.tficha[open]){align-items:start}
.tficha[hidden]{display:none!important}
.tficha > .tficha__panel{margin-top:.4rem;padding:1.1rem 1.1rem 1.25rem;border-radius:14px;background:var(--paper);color:var(--ink);border:1px solid var(--line)}

/* cabecera de las líneas */
.tser__note{margin-top:.9rem}
.section__head + .tseries{margin-top:0}

/* ================= Ficha técnica ================= */
.tficha__panel{text-align:left}
.tficha__perfil{font-family:var(--sub);font-size:.66rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-3)}
.tficha__perfil em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.12rem;letter-spacing:0;text-transform:none;color:var(--ink);margin-left:.4rem}
.tficha__lead{margin-top:.55rem;font-size:1rem;line-height:1.6;color:var(--ink)}
.tficha__sec{margin-top:1.45rem}
.tficha__label{margin-bottom:.55rem;font-family:var(--sub);font-size:.66rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-3)}
.tficha__text{font-size:.93rem;line-height:1.55;color:var(--ink-70)}
.tficha__tags{display:flex;flex-wrap:wrap;gap:.38rem}
.tficha__tags li{font-size:.78rem;line-height:1.25;padding:.32rem .7rem;border-radius:999px;border:1px solid var(--line);background:var(--white);color:var(--ink-70)}
.tficha__tags--notes li{background:var(--gold-soft);border-color:rgba(201,162,74,.35);color:var(--ink)}
.tficha__seals li{border-color:rgba(74,38,22,.28);color:var(--molten);font-weight:500}
.tficha__seals li::first-letter{text-transform:uppercase}

/* curva de templado: fusión → enfriamiento → trabajo */
.ttemp{border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#fffdf9,#f7efe2);padding:.85rem .7rem .8rem}
.ttemp__curve{display:block;width:100%;height:auto;overflow:visible}
.ttemp__base{fill:none;stroke:rgba(36,24,18,.14);stroke-width:1;stroke-dasharray:3 4}
.ttemp__area{fill:rgba(201,162,74,.16);stroke:none}
.ttemp__line{fill:none;stroke:var(--molten);stroke-width:2.2;stroke-linecap:round}
.ttemp__dot{fill:var(--paper);stroke:var(--molten);stroke-width:2}
.ttemp__dot.is-work{fill:var(--gold);stroke:var(--molten)}
.ttemp__pts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:.3rem;text-align:center}
.ttemp__pts li{display:flex;flex-direction:column-reverse;align-items:center;gap:.08rem;min-width:0}
.ttemp__v{font-family:var(--serif);font-size:1.18rem;font-weight:400;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.ttemp__n{font-family:var(--sub);font-size:.62rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-70)}
.ttemp__pts .is-work .ttemp__v{color:var(--molten);font-weight:600}
.ttemp__pts .is-work .ttemp__n{color:var(--gold-3)}

/* datos técnicos */
.tficha__spec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem 1rem;margin:0}
.tficha__spec div{min-width:0;padding-top:.6rem;border-top:1px solid var(--line)}
.tficha__spec dt{font-family:var(--sub);font-size:.62rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-70)}
.tficha__spec dd{margin:.18rem 0 0;font-size:1rem;color:var(--ink)}
@media (max-width:520px){.tficha__spec{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ================= Panel de la ficha (dialog) ================= */
html.fdlg-lock{overflow:hidden}
.fdlg{position:fixed;inset:0 0 0 auto;margin:0;padding:0;border:0;width:min(600px,100vw);max-width:100vw;height:100%;max-height:100%;
  background:var(--paper);color:var(--ink);box-shadow:-40px 0 80px -40px rgba(0,0,0,.6);overflow:hidden;overscroll-behavior:contain}
.fdlg[open]{display:flex;flex-direction:column}
.fdlg::backdrop{background:rgba(21,10,4,.58);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.fdlg__head{flex:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;
  padding:1.1rem 1.25rem 1.1rem 1.4rem;background:var(--ivory);border-bottom:1px solid var(--line)}
.fdlg__thumb{width:68px;height:86px;display:flex;align-items:flex-end;justify-content:center}
.fdlg__thumb img{height:100%;width:auto;max-width:none;filter:drop-shadow(0 8px 10px rgba(31,16,8,.28))}
.fdlg__thumb.is-photo img{height:92%;border-radius:8px;box-shadow:0 0 0 4px #f4f1ec,0 10px 18px -10px rgba(31,16,8,.5);filter:none}
.fdlg__kicker{font-family:var(--sub);font-size:.64rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-3);line-height:1.4}
.fdlg__title{margin-top:.3rem;font-size:clamp(1.12rem,2.2vw,1.42rem);line-height:1.18;letter-spacing:-.01em}
.fdlg__close{align-self:start;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--white);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;transition:border-color .25s,transform .3s var(--ease)}
.fdlg__close:hover{border-color:var(--cacao);transform:rotate(90deg)}
.fdlg__close:focus-visible{outline:2px solid var(--gold-3);outline-offset:3px}
.fdlg__body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:1.4rem 1.6rem 2rem}
.fdlg__body .tficha__panel{margin:0;padding:0;border:0;background:none}
.fdlg__body:focus-visible{outline:2px solid var(--gold-3);outline-offset:-4px}
.fdlg__foot{flex:none;display:grid;gap:.45rem;padding:.95rem 1.6rem calc(.95rem + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:1px solid var(--line)}
.fdlg__wa{gap:.55rem}
.fdlg__wa svg{flex:none}
.fdlg__wa:focus-visible{outline:2px solid var(--cacao);outline-offset:3px}
.fdlg__note{font-size:.74rem;color:var(--ink-70);text-align:center}

@media (max-width:640px){
  .fdlg{inset:auto 0 0 0;width:100%;height:auto;max-height:calc(100% - 40px);border-radius:20px 20px 0 0;box-shadow:0 -30px 60px -30px rgba(0,0,0,.6)}
  .fdlg__head{gap:.8rem;padding:1.15rem 1rem .9rem 1.1rem;border-radius:20px 20px 0 0;position:relative}
  .fdlg__head::before{content:"";position:absolute;top:7px;left:50%;width:38px;height:4px;margin-left:-19px;border-radius:4px;background:rgba(36,24,18,.18)}
  .fdlg__thumb{width:52px;height:66px}
  .fdlg__body{padding:1.15rem 1.1rem 1.6rem}
  .fdlg__foot{padding-left:1.1rem;padding-right:1.1rem}
}

@media (prefers-reduced-motion:no-preference){
  .fdlg[open]{animation:fdlgIn .45s cubic-bezier(.22,.61,.36,1)}
  .fdlg[open]::backdrop{animation:fdlgFade .35s ease}
  .fdlg.is-closing{animation:fdlgOut .23s ease-in forwards}
  .fdlg.is-closing::backdrop{animation:fdlgFadeOut .23s ease-in forwards}
}
@media (prefers-reduced-motion:no-preference) and (max-width:640px){
  .fdlg[open]{animation-name:fdlgUp}
  .fdlg.is-closing{animation-name:fdlgDown}
}
@keyframes fdlgIn{from{transform:translateX(100%)}to{transform:none}}
@keyframes fdlgOut{from{transform:none}to{transform:translateX(100%)}}
@keyframes fdlgUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes fdlgDown{from{transform:none}to{transform:translateY(100%)}}
@keyframes fdlgFade{from{opacity:0}to{opacity:1}}
@keyframes fdlgFadeOut{from{opacity:1}to{opacity:0}}

/* ================= Figuras: video de chocolate y las tres bolsas ================= */
.split__fig--video{background:#1d0f08}
.split__fig--video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split__fig--video figcaption{z-index:1}

.split__fig.tbags{background:radial-gradient(75% 62% at 50% 40%,#5b3725 0%,#2f1b11 58%,#1a0d06 100%)}
.split__fig.tbags::before{content:"";position:absolute;left:10%;right:10%;bottom:11%;height:8%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,0))}
/* --bag-tx centra la bolsa recortada (no está centrada en su lienzo); nombres propios: --r ya es el radio del sitio */
.split__fig.tbags .tbags__bag{position:absolute;bottom:13%;left:var(--bag-x,50%);width:auto;height:44%;max-width:none;object-fit:contain;
  transform:translateX(calc(-50% + var(--bag-tx,0%))) rotate(var(--bag-rot,0deg));transform-origin:50% 100%;
  filter:drop-shadow(0 18px 20px rgba(0,0,0,.45));transition:transform 1.2s var(--ease)}
.split__fig.tbags .tbags__bag--l{--bag-x:30%;--bag-rot:-8deg}
.split__fig.tbags .tbags__bag--r{--bag-x:70%;--bag-rot:8deg}
.split__fig.tbags .tbags__bag--c{--bag-x:50%;height:54%;bottom:11%;z-index:1}
.split__fig.tbags:hover .tbags__bag--l{transform:translateX(calc(-54% + var(--bag-tx,0%))) rotate(-10deg)}
.split__fig.tbags:hover .tbags__bag--r{transform:translateX(calc(-46% + var(--bag-tx,0%))) rotate(10deg)}
.split__fig.tbags:hover .tbags__bag--c{transform:translateX(calc(-50% + var(--bag-tx,0%))) translateY(-6px)}
.split__fig.tbags figcaption{z-index:2}
@media (max-width:640px){.split__fig.tbags{aspect-ratio:1/1}}
@media (max-width:900px){
  .split__fig.tbags::before{bottom:17%}
  .split__fig.tbags .tbags__bag{height:48%;bottom:19%}
  .split__fig.tbags .tbags__bag--l{--bag-x:30%}
  .split__fig.tbags .tbags__bag--r{--bag-x:70%}
  .split__fig.tbags .tbags__bag--c{height:57%;bottom:17%}
}
@media (prefers-reduced-motion:reduce){
  .split__fig.tbags .tbags__bag{transition:none}
  .split__fig.tbags:hover .tbags__bag--l{transform:translateX(calc(-50% + var(--bag-tx,0%))) rotate(-8deg)}
  .split__fig.tbags:hover .tbags__bag--r{transform:translateX(calc(-50% + var(--bag-tx,0%))) rotate(8deg)}
  .split__fig.tbags:hover .tbags__bag--c{transform:translateX(calc(-50% + var(--bag-tx,0%)))}
}