/* Sello y laboratorio del logo: iguales que en la V1 (Pau los quiere tal cual). */

/* El sello provisional: «pm» con aros que giran en 3D.
   El laboratorio del logo cambia estas variables en :root (--sello-*), y el cambio llega a todos los sellos. */
.sello { position: relative; width: 76px; height: 76px; display: grid; place-items: center; perspective: 300px; --lento: 1; }
.sello-letras { font: italic 400 34px/1 var(--serif); letter-spacing: -.02em; transform: translateY(-2px); color: var(--sello-letras, var(--hueso)); }
.sello-aro {
  position: absolute; inset: calc(var(--n, 0) * 8%); border: var(--sello-grosor, 1px) solid var(--sello-aro, var(--hueso)); border-radius: 50%;
  animation: aro calc(var(--base, 3.2s) * var(--lento) / var(--sello-vel, 1)) linear infinite;
}
.sello-aro.b { --n: 1; --base: 4.4s; opacity: .45; animation-direction: reverse; }
.sello-aro.c { --n: 2; --base: 5.6s; opacity: .3; }
@keyframes aro { from { transform: rotateY(0) rotateX(var(--sello-inclin, 62deg)); } to { transform: rotateY(360deg) rotateX(var(--sello-inclin, 62deg)); } }
.sello.mini { width: 26px; height: 26px; --lento: 2.2; }
.sello.mini .sello-letras { font-size: 14px; transform: translateY(-1px); }
.sello.mini .sello-aro { border-width: max(.75px, calc(var(--sello-grosor, 1px) * .75)); }
.marca { cursor: pointer; }
/* Cromado (Pau, 29/10): plata iridiscente con reflejos rosas y azul hielo. Aros y letras se eligen por separado.
   Aros (html.aro-cromo / .lab.aro-cromo): el borde se vuelve transparente y un degradado cónico se recorta al anillo con una
   máscara (funciona con border-radius). Letras (letras-cromo): las MISMAS letras, sin capas encima; solo cambia su pintura
   (background-clip: text). Dos fondos en el mismo elemento: el destello que cruza y el cromo, cuyo degradado
   (--cromo-letras) coloca laboratorio.js con las medidas de la fuente. Nada cambia de sitio ni de tamaño. */
:root {
  --cromo-aro: conic-gradient(from 20deg, #f7f6f4, #a3a3ac 10%, #ffd6ec 19%, #ffffff 27%, #6b6c76 38%, #cfe9ff 50%, #fff4fb 58%, #8e8e98 70%, #ffc6e4 82%, #e9e9ee 92%, #f7f6f4);
}
.aro-cromo .sello-aro, .lab.aro-cromo .capa .aro {
  border-color: transparent !important; background: var(--cromo-aro) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.letras-cromo .sello-letras, .lab.letras-cromo #lab-letras-ver {
  color: transparent !important; -webkit-text-fill-color: transparent;
  background-image: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .8) 50%, transparent 58%),
    var(--cromo-letras, linear-gradient(180deg, #fff .2em, #ecebf2 .3em, #a3a3b0 .48em, #2c2d35 .53em, #f1c3df .58em, #fff .68em, #c8e5fd .75em, #f7d8ea .87em, #8c8c98 1.05em));
  background-size: 300% 100%, 100% 100%; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 .03em .045em rgba(0, 0, 0, .7));
  /* El cromo solo se pinta dentro de la caja; la «p» sale por abajo y por la izquierda. Se agranda la caja con relleno y se
     compensa con margen negativo: la zona pintada crece y las letras no se mueven ni un píxel. (0,4 em también en laboratorio.js) */
  padding: .4em .3em; margin: -.4em -.3em;
  animation: cromo-destello 6s ease-in-out infinite;
}
@keyframes cromo-destello { 0%, 60% { background-position: 120% 0, 0 0; } 100% { background-position: -20% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .letras-cromo .sello-letras, .lab.letras-cromo #lab-letras-ver { animation: none; background-position: 120% 0, 0 0; } }

.marca .sello { transition: transform .4s var(--suave); }
.marca:hover .sello { transform: scale(1.18); }

/* ---------- Laboratorio del logo ---------- */
.lab { position: fixed; inset: 0; z-index: 95; --S: min(46vmin, 400px); }
.lab[hidden] { display: none; }
body.en-lab { overflow: hidden; }
.lab-vuelo {
  position: absolute; left: 50%; top: 50%; width: var(--S); height: var(--S); margin: calc(var(--S) / -2) 0 0 calc(var(--S) / -2);
  transform-origin: 50% 50%; transition: transform 1s cubic-bezier(.7, 0, .15, 1);
}
.lab-escena { width: 100%; height: 100%; perspective: 1100px; cursor: grab; touch-action: none; }
.lab-escena:active { cursor: grabbing; }
.lab-sello { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.capa { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .9s var(--suave); pointer-events: none; }
.capa .aro { position: absolute; border-radius: 50%; border-style: solid; }
.capa .letras { position: absolute; inset: 0; display: grid; place-items: center; font: italic 400 calc(var(--S) * .45)/1 var(--serif); letter-spacing: -.02em; }
.capa .letras span { transform: translateY(-.03em); }   /* en em, no en %: con el cromo la caja crece y el % movería las letras */
.capa-tag {
  position: absolute; left: 100%; top: 50%; margin-left: 28px; display: flex; align-items: center; gap: 8px; white-space: nowrap;
  font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--hueso);
  opacity: 0; transition: opacity .5s;
}
.capa-tag::before { content: ""; width: 36px; height: 1px; background: var(--hueso-30); }
.capa-tag b { font-weight: 500; color: var(--acento); }
.lab.v-capas .capa-tag { opacity: 1; }
.guias { position: absolute; inset: -14%; width: 128%; height: 128%; overflow: visible; opacity: 0; transition: opacity .5s; }
.lab.v-guias .guias, .lab.v-capas .guias { opacity: 1; }
.guias * { vector-effect: non-scaling-stroke; }
.guias text { font: 500 3px var(--mono); letter-spacing: .12em; fill: var(--hueso-50); }

.lab-receta, .lab-panel { opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .6s var(--suave);   max-height: calc(100vh - 32px); overflow-y: auto;
}
.lab.abierto .lab-receta, .lab.abierto .lab-panel { opacity: 1; transform: none; transition-delay: .55s; }
.lab-receta { position: absolute; left: var(--margen); bottom: 40px; width: min(360px, 32vw); display: grid; gap: 14px; pointer-events: none; }
.lab-receta h2 { font: 400 44px/1 var(--serif); }
.lab-receta h2 em { color: var(--hueso-70); }
.lab-receta dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; padding-top: 14px; border-top: 1px solid var(--filete); }
.lab-receta dt { font: 500 10px/1.5 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--hueso-50); }
.lab-receta dd { font-size: 13px; line-height: 1.5; color: var(--hueso); }

.lab-panel {
  position: absolute; right: var(--margen); top: 50%; translate: 0 -50%; width: 300px; padding: 18px; display: grid; gap: 16px;
  border-radius: 14px; background: rgba(18, 18, 20, .86); border: 1px solid var(--filete);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.lab-panel-cabeza { display: flex; justify-content: space-between; align-items: center; }
.lab-panel-cabeza .etiqueta { color: var(--acento); }
.lab-cerrar { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--hueso-70); }
.lab-cerrar:hover { color: var(--hueso); }
kbd { font: 500 9px/1 var(--mono); letter-spacing: .1em; padding: 3px 5px; border: 1px solid var(--filete); border-radius: 4px; color: var(--hueso-50); }
.lab-fila { display: grid; gap: 8px; }
.lab-fila > span { display: flex; justify-content: space-between; font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--hueso-50); }
.lab-fila > span b { font-weight: 500; color: var(--hueso); font-variant-numeric: tabular-nums; }
.lab-fila input[type=text] {
  height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--filete); background: var(--tinta); color: var(--hueso);
  font: italic 400 22px/1 var(--serif); outline: none;
}
.lab-fila input[type=text]:focus { border-color: var(--hueso-30); }
.lab-fila input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: none; cursor: pointer; }
.lab-fila input[type=range]::-webkit-slider-runnable-track { height: 1px; background: var(--hueso-30); }
.lab-fila input[type=range]::-moz-range-track { height: 1px; background: var(--hueso-30); }
.lab-fila input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--hueso); border: 0; }
.lab-fila input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--hueso); border: 0; }
.lab-opciones { display: flex; padding: 3px; gap: 3px; border-radius: 8px; background: var(--tinta); border: 1px solid var(--filete); }
.lab-opciones button { flex: 1; height: 28px; border-radius: 6px; font-size: 12px; color: var(--hueso-70); transition: background .2s, color .2s; }
.lab-opciones button:hover { color: var(--hueso); }
.lab-opciones button.si { background: var(--hueso); color: var(--tinta); }
.lab-pie { display: flex; justify-content: space-between; align-items: center; padding-top: 4px; border-top: 1px solid var(--filete); padding-top: 14px; }
.lab-ayuda { white-space: nowrap; font: 500 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--hueso-30); }

@media (max-width: 900px) {
  .lab { --S: min(58vw, 300px); }
  .lab-vuelo { top: 30%; }
  .lab-receta { display: none; }
  .lab-panel { top: auto; bottom: 12px; left: 12px; right: 12px; translate: none; width: auto; max-height: 48vh; overflow-y: auto; gap: 12px; }
  .capa-tag { margin-left: 10px; font-size: 8.5px; }
}