/* ============================================================
   Make it Easy — Objetos con volumen
   Celular 3D (canto de titanio en facetas), la ronda de trabajos
   con su holograma, la maqueta de la portada, la placa de productos,
   la moneda de cobre y el abanico de hojas.
   Regla aprendida: nada de box-shadow hacia afuera en piezas que
   viven dentro de un contexto 3D (Chrome lo recorta a un rectángulo).
   ============================================================ */

/* ============================================================
   CELULAR 3D
   Toma --w (ancho) y --t (espesor) de algún contenedor.
   ============================================================ */
.cel{position:relative;width:var(--w);height:calc(var(--w) * 2.02);transform-style:preserve-3d}
.cara{position:absolute;inset:0;border-radius:calc(var(--w) * .18);backface-visibility:hidden;-webkit-backface-visibility:hidden}

/* canto: objetos3d.js arma las facetas; el CSS las para alrededor del borde */
.canto{
  position:absolute;
  left:calc(var(--w) * var(--fx) - var(--ancho, var(--t)) / 2);
  top:calc(var(--w) * var(--fy) - var(--w) * var(--fl) / 2 - .5px);
  width:var(--ancho, var(--t));height:calc(var(--w) * var(--fl) + 1px);
  transform:rotateZ(calc(var(--fa) * 1deg)) translateX(calc(var(--w) * var(--fd))) rotateY(90deg);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:linear-gradient(90deg, #1D2126 0%, #4F565F 22%, #8C949E 48%, #5B626B 70%, #1B1E23 100%);
}
.canto::before,.canto::after{content:"";position:absolute;inset:0;pointer-events:none}
/* brillo: se enciende en la pared que mira hacia quien mira (--lado lo escribe el JS) */
.canto::before{
  background:linear-gradient(90deg, #6E7680, #E9EDF2 45%, #C9CFD6 60%, #5F666F);
  opacity:calc(var(--lado, 0) * var(--nx) * 1.15 - var(--ny) * .3);
}
.canto::after{background:#0B0F14;opacity:var(--sombra, 0)}
.canto--boton{background:linear-gradient(90deg, #2A2E34, #7D858F 50%, #2A2E34);border-radius:2px}

.frente{
  transform:translateZ(calc(var(--t) / 2));
  padding:calc(var(--w) * .042);
  background:#06080B;
  box-shadow:inset 0 0 0 calc(var(--w) * .005) rgba(210,218,228,.5), inset 0 0 0 calc(var(--w) * .012) #1A1E23;
}
.pantalla-cel{
  container-type:inline-size;position:relative;height:100%;overflow:hidden;
  border-radius:calc(var(--w) * .14);background:var(--fondo-pantalla, #fff);
}
.estado{
  position:absolute;inset:0 0 auto;height:12.05cqw;display:flex;align-items:center;justify-content:space-between;
  padding-inline:7.7cqw;font-size:3.85cqw;font-weight:700;color:#1A1F27;pointer-events:none;z-index:1;
}
.estado svg{height:3.1cqw;width:auto}
.oscura .estado{color:#F4F4F6}
.isla{position:absolute;top:2.8cqw;left:50%;translate:-50% 0;width:32%;height:7.7cqw;border-radius:999px;background:#0A0E13;z-index:2;pointer-events:none}
/* reflejo del vidrio */
.pantalla-cel::after{content:"";position:absolute;inset:0;background:linear-gradient(118deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.03) 26%, transparent 40%);pointer-events:none;transition:opacity .4s;z-index:3}

.dorso{
  transform:rotateY(180deg) translateZ(calc(var(--t) / 2));
  transform-style:preserve-3d;
  background:linear-gradient(160deg, #414852 0%, #292E35 45%, #1C2026 100%);
  box-shadow:inset 0 0 0 calc(var(--w) * .006) rgba(220,226,234,.35), inset 0 0 calc(var(--w) * .12) rgba(0,0,0,.45);
}
.camaras{
  position:absolute;top:calc(var(--w) * .05);left:calc(var(--w) * .05);
  width:calc(var(--w) * .42);aspect-ratio:1;border-radius:calc(var(--w) * .1);
  background:linear-gradient(150deg, #4A515B, #2A2F36);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
  transform:translateZ(calc(var(--w) * .012));
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.camaras::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#0B0F14;opacity:var(--sombra, 0)}
.lente{position:absolute;width:40%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #7A8BA6 0 8%, #1A2230 24%, #06080B 60%);
  box-shadow:0 0 0 calc(var(--w) * .012) #15181D, 0 0 0 calc(var(--w) * .018) #6A717A}
.lente:nth-child(1){top:8%;left:8%}
.lente:nth-child(2){top:52%;left:8%}
.lente:nth-child(3){top:30%;left:52%}
.flash{position:absolute;top:10%;right:12%;width:12%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle, #FFF6E0, #B9A57C)}
.grabado{position:absolute;left:0;right:0;top:50%;text-align:center;font-family:var(--serif);font-style:italic;font-size:calc(var(--w) * .11);color:rgba(224,165,116,.42);letter-spacing:-.02em}
.velo-cel{position:absolute;inset:0;border-radius:inherit;background:#0B0F14;opacity:var(--sombra, 0);pointer-events:none;z-index:4}

/* ============================================================
   PORTADA: maqueta de partículas sobre una mesa de dibujo
   ============================================================ */
.portada-maqueta{position:absolute;top:0;bottom:0;left:38%;right:0;pointer-events:none}
.portada-maqueta canvas{position:absolute;inset:0;width:100%;height:100%}
/* Respaldo de la maqueta: la marca quieta, para cuando WebGL no esta
   disponible (aceleracion por hardware apagada, GPU en la lista negra)
   o el navegador pierde el contexto. Antes ese hueco quedaba vacio. */
.maqueta-respaldo{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.maqueta-respaldo[hidden]{display:none}
.maqueta-respaldo svg{width:min(300px, 52%);height:auto;filter:drop-shadow(0 26px 60px rgba(74,134,228,.28))}
.maqueta-mesa{
  position:absolute;left:6%;right:6%;bottom:7%;height:44%;
  transform:perspective(900px) rotateX(68deg);transform-origin:50% 100%;
  background-image:
    linear-gradient(rgba(224,165,116,.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224,165,116,.2) 1px, transparent 1px);
  background-size:46px 46px;background-position:center bottom;
  -webkit-mask-image:radial-gradient(closest-side, #000 25%, transparent 100%);
          mask-image:radial-gradient(closest-side, #000 25%, transparent 100%);
}
.maqueta-mesa::after{
  content:"";position:absolute;left:25%;right:25%;top:30%;bottom:10%;border-radius:50%;
  background:radial-gradient(closest-side, rgba(196,121,74,.4), transparent);
}
.maqueta-rotulo{
  position:absolute;right:8%;bottom:6%;pointer-events:auto;
  display:grid;grid-template-columns:auto auto;align-items:center;gap:4px 14px;
  padding:10px 16px 11px;border-radius:14px;
  background:rgba(14,19,26,.55);border:1px solid rgba(224,165,116,.28);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#fff;transition:border-color var(--rapido), background var(--rapido), opacity .7s var(--curva);
}
/* La portada abre con la marca en particulas: hasta que no termina de
   armarse, el rotulo del producto no tiene nada que decir. */
.maqueta-rotulo.dormido{opacity:0;pointer-events:none}

.maqueta-nombre{font-family:var(--serif);font-size:17px;font-weight:450;letter-spacing:-.01em;min-width:12ch}
.maqueta-ver{font-size:12.5px;color:var(--cobre-claro);white-space:nowrap}
.maqueta-barra{grid-column:1 / -1;height:2px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.maqueta-barra i{display:block;height:100%;background:var(--cobre);transform-origin:0 50%;transform:scaleX(0)}
.maqueta-barra i.corre{animation:llenar var(--ciclo, 4800ms) linear forwards}
@keyframes llenar{to{transform:scaleX(1)}}
.maqueta-nombre.cambia{animation:cambiar .5s var(--curva) both}
@keyframes cambiar{from{opacity:0;transform:translateY(8px)}}

/* ============================================================
   TRABAJOS
   En pantallas anchas: título y ficha a un lado, con la maqueta de
   partículas de fondo, y la ronda al otro. Todo entra en una pantalla
   de notebook sin scrollear: el celular toma su tamaño del alto.
   ============================================================ */
.trabajos{
  position:relative;display:flex;align-items:center;
  min-height:calc(100svh - 74px);padding-block:clamp(16px, 3vh, 40px);
  overflow-x:clip;scroll-margin-top:-16px;  /* html ya reserva 90 px arriba: así la sección arranca justo bajo la cabecera */
}
.trabajos-fondo{
  position:absolute;top:0;bottom:0;pointer-events:none;
  left:max(0px, calc((100% - var(--marco)) / 2));
  width:calc(min(100%, var(--marco)) * .5);
}
.trabajos-fondo canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.6}
.trabajos-in{position:relative;width:100%;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(24px, 4vw, 64px);align-items:center}
.trabajos-lado{position:relative;z-index:2;display:flex;flex-direction:column}
.titulo-ronda{
  margin:0;font-family:var(--serif);font-weight:320;
  font-size:clamp(2.3rem, 4.5vw, 4.7rem);line-height:.95;letter-spacing:-.035em;
  font-variation-settings:"opsz" 144, "SOFT" 60, "WONK" 0;
  text-wrap:balance;
}
.sobre-oscuro .titulo-ronda{color:#F5EFE8}
.titulo-ronda em{
  font-style:italic;font-weight:400;color:var(--cobre-claro);
  font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
}
.sobre-oscuro .titulo-bajada{max-width:44ch;margin-top:14px;font-size:clamp(14px, 1.1vw, 16px);color:rgba(255,255,255,.66)}
.trabajos-lado p{text-shadow:0 1px 14px rgba(14,19,26,.9)}
.ficha-lado{margin-top:clamp(18px, 4vh, 40px);padding-top:clamp(16px, 3vh, 28px);border-top:1px solid rgba(255,255,255,.14)}

.ronda-escena{
  --w:clamp(176px, calc((100svh - 74px) * .4), 250px);   /* ancho del celular de adelante */
  --t:calc(var(--w) * .1);
  --r:calc(var(--w) * 1.42);
  position:relative;height:calc(var(--w) * 2.02 + 60px);
  perspective:calc(var(--w) * 6.2);perspective-origin:50% 34%;
  touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;outline:none;
}
.ronda-escena.arrastrando{cursor:grabbing}
.ronda-escena:focus-visible{outline:2px solid var(--cobre);outline-offset:-6px;border-radius:var(--r-lg)}
.ronda{
  position:absolute;left:50%;top:18px;width:0;height:0;
  transform-style:preserve-3d;
  transform:translateZ(calc(var(--r) * -1)) rotateY(calc(var(--giro, 0) * -1deg));
}
/* los de atrás se achican (--escala lo escribe ronda.js); todos quedan parados sobre el piso */
.ronda .cel{
  position:absolute;left:calc(var(--w) / -2);top:0;transform-origin:50% 100%;
  transform:rotateY(var(--angulo)) translateZ(var(--r)) scale3d(var(--escala, 1), var(--escala, 1), var(--escala, 1));
}
.ronda .frente{cursor:pointer}
.piso{
  position:absolute;width:calc(var(--r) * 2.9);aspect-ratio:1;
  left:calc(var(--r) * -1.45);top:calc(var(--w) * 2.02 - var(--r) * 1.45 + 2px);
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(196,121,74,.26), rgba(196,121,74,.08) 55%, transparent 72%),
             radial-gradient(closest-side, rgba(0,0,0,.5) 35%, transparent 70%);
  transform:rotateX(90deg);pointer-events:none;
}

.pantalla-cel .afiche,.pantalla-cel .vivo{
  position:absolute;left:0;top:12.05cqw;width:100%;height:calc(100% - 12.05cqw);
  object-fit:cover;object-position:top;display:block;border:0;pointer-events:none;
}
.pantalla-cel .vivo{opacity:0;transition:opacity .6s ease}
.pantalla-cel.en-vivo .vivo{opacity:1}
.pantalla-cel iframe.vivo{
  width:390px;height:var(--alto-demo, 797px);max-width:none;
  transform-origin:0 0;transform:scale(var(--k, .5));
}
.probando .pantalla-cel iframe.vivo{pointer-events:auto}
.probando .frente{cursor:auto}
.probando .al-frente .pantalla-cel::after{opacity:0}
.al-frente .frente{box-shadow:inset 0 0 0 calc(var(--w) * .005) rgba(230,236,244,.7), inset 0 0 0 calc(var(--w) * .012) #1A1E23}
.probando .al-frente .frente{box-shadow:inset 0 0 0 calc(var(--w) * .006) var(--cobre-claro), inset 0 0 0 calc(var(--w) * .014) #1A1E23}

/* ficha del trabajo de adelante */
.ficha-texto{min-height:clamp(196px, 29vh, 240px)}
.ficha-arriba{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ficha-num{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:rgba(255,255,255,.55)}
.ficha-tipo{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--cobre-claro);padding:4px 11px;border-radius:999px;border:1px solid rgba(224,165,116,.35);background:rgba(14,19,26,.5)}
.ficha-tipo::before{content:"";width:6px;height:6px;border-radius:50%;background:#58D68D;box-shadow:0 0 0 0 rgba(88,214,141,.6);animation:pulso 1.8s ease-out infinite}
.ficha-tipo[data-tipo="video"]::before{background:var(--cobre-claro);animation:none}
@keyframes pulso{to{box-shadow:0 0 0 7px rgba(88,214,141,0)}}
.ficha-texto h3{font-family:var(--serif);font-weight:420;font-variation-settings:"opsz" 72, "SOFT" 50;font-size:clamp(1.45rem, 2.2vw, 2rem);line-height:1.08;margin:12px 0 6px;text-wrap:balance}
.ficha-cliente{display:block;font-size:13px;color:var(--cobre-claro);margin-bottom:8px}
.sobre-oscuro .ficha-texto p{font-size:15px;max-width:46ch;text-wrap:pretty}
.ficha-accion{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:16px}
.ficha-enlace{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:#fff;border-bottom:1px solid var(--cobre);padding-bottom:1px}
.ficha-enlace svg{width:13px;height:13px}

.ficha-enlace[hidden]{display:none}
.ficha-cambia{animation:cambiar .5s var(--curva) both}
.ficha-nav{display:flex;align-items:center;gap:14px;margin-top:clamp(12px, 2.4vh, 24px)}
.flecha--pausa{width:36px;height:36px;margin-left:2px}
.flecha--pausa svg{width:15px;height:15px}
.flecha{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);color:#fff;
  transition:background var(--rapido), border-color var(--rapido), transform var(--normal) var(--curva);
}

.flecha svg{width:17px;height:17px}
.puntos{display:flex;align-items:center;gap:15px}
.puntos button{position:relative;width:9px;height:9px;padding:0;border-radius:50%;border:0;background:rgba(255,255,255,.25);transition:width var(--normal) var(--curva), background var(--rapido)}
.puntos button::after{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;width:24px;height:24px}
.puntos button[aria-current="true"]{width:26px;border-radius:5px;background:var(--cobre)}

/* probador en grande (celular chico o video) */
.probador{
  width:min(420px, calc(100vw - 24px));height:min(880px, calc(100dvh - 24px));max-width:none;max-height:none;
  padding:0;border:0;border-radius:34px;background:#06080B;color:#fff;overflow:hidden;
  box-shadow:0 0 0 1.5px rgba(210,218,228,.35), 0 40px 120px -20px rgba(0,0,0,.8);
}
.probador::backdrop{background:rgba(8,11,15,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.probador[open]{display:flex;flex-direction:column;animation:abrir .45s var(--curva)}
@keyframes abrir{from{opacity:0;transform:translateY(24px) scale(.96)}}
.probador-cabeza{display:flex;align-items:center;gap:12px;padding:12px 12px 10px 20px}
.probador-cabeza b{font-family:var(--serif);font-weight:450;font-size:17px;flex:1;min-width:0}
.probador-cerrar{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;display:grid;place-items:center}
.probador-cerrar svg{width:16px;height:16px}
.probador-marco{flex:1;min-height:0;margin:0 8px 8px;border-radius:26px;overflow:hidden;background:#fff}
.probador-marco iframe,.probador-marco video{display:block;width:100%;height:100%;border:0;object-fit:contain;background:#000}
.probador-marco iframe{background:#fff}

/* ============================================================
   PRODUCTOS: una placa de vidrio gruesa que se endereza al bajar
   ============================================================ */
.placa-escena{perspective:1700px;perspective-origin:50% 0%}
.placa{
  position:relative;transform-style:preserve-3d;transform-origin:50% 100%;
  transform:rotateX(calc((1 - var(--p, 1)) * 26deg + var(--rx, 0deg))) rotateY(var(--ry, 0deg));
  transition:transform .55s var(--curva-salida);
}
.placa-vidrio{
  position:absolute;inset:0;border-radius:var(--r-xl);
  background:linear-gradient(170deg, rgba(250,249,246,.96), rgba(238,236,231,.93));
  border:1px solid rgba(255,255,255,.7);
  /* el espesor del vidrio, visto desde arriba */
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 0 #D8DEDB, 0 2px 0 #CDD4D1, 0 3px 0 #C1C9C6, 0 4px 0 #B5BEBA,
    0 5px 0 #A8B2AE, 0 6px 0 #9BA6A2, 0 7px 0 #8E9A96, 0 8px 0 #7F8C88;
}
.placa .planilla{position:relative;transform-style:preserve-3d}

/* ============================================================
   MONEDA DE COBRE
   ============================================================ */
.moneda-escena{
  --d:clamp(168px, 16vw, 214px);--grosor:calc(var(--d) * .085);
  position:relative;width:var(--d);height:var(--d);flex:none;
  perspective:900px;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;
}
.moneda-escena:active{cursor:grabbing}
.moneda-escena::after{
  content:"";position:absolute;left:10%;right:10%;bottom:-18%;height:16%;border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.55), transparent);pointer-events:none;
}
.moneda{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(-10deg) rotateY(var(--giro, -24deg))}
.moneda-cara{
  position:absolute;inset:0;border-radius:50%;display:grid;place-content:center;justify-items:center;text-align:center;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transform:translateZ(calc(var(--grosor) / 2));
  background:radial-gradient(circle at 34% 28%, #F7CFA8 0%, #DB9868 30%, #B96B3D 62%, #8A4A22 100%);
  box-shadow:
    inset 0 0 0 calc(var(--d) * .028) rgba(255,228,200,.28),
    inset 0 0 0 calc(var(--d) * .044) rgba(92,44,16,.4),
    inset 0 calc(var(--d) * -.05) calc(var(--d) * .1) rgba(60,26,8,.35);
  color:#4A2410;text-shadow:0 1px 0 rgba(255,222,192,.5);
}
.moneda-cara::before{content:"";position:absolute;inset:calc(var(--d) * .085);border-radius:50%;border:1px dashed rgba(74,36,16,.38);pointer-events:none}
.moneda-cara--dorso{transform:rotateY(180deg) translateZ(calc(var(--grosor) / 2))}
.moneda-cara > span{display:grid;justify-items:center;gap:2px}
.moneda-cara small{font-family:var(--mono);font-size:max(11px, calc(var(--d) * .055));letter-spacing:.06em;line-height:1.2}
.moneda-cara b{font-family:var(--serif);font-weight:600;font-size:calc(var(--d) * .15);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.moneda-cara--dorso svg{width:calc(var(--d) * .3);height:calc(var(--d) * .3);color:#4A2410;margin-bottom:6px}
.moneda-canto{
  position:absolute;left:calc(50% - var(--d) * .049 - .5px);top:calc(50% - var(--grosor) / 2);
  width:calc(var(--d) * .098 + 1px);height:var(--grosor);
  transform:rotateZ(var(--a)) translateY(calc(var(--d) * -.4976)) rotateX(90deg);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:repeating-linear-gradient(90deg, #8B4B24 0 2px, #C88A5D 2px 4px);
}

/* ============================================================
   DOCUMENTACIÓN: hojas en abanico
   ============================================================ */
.hojas-escena{position:relative;height:clamp(400px, 40vw, 540px);perspective:1400px;overflow-x:clip}
.hojas{
  position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;
  transform:rotateX(calc(34deg - var(--p, 1) * 12deg + var(--rx, 0deg))) rotateY(calc(-16deg + var(--ry, 0deg))) rotateZ(-4deg);
  transition:transform .6s var(--curva-salida);
}
.hoja{
  --hw:clamp(170px, 16vw, 224px);
  position:absolute;width:var(--hw);height:calc(var(--hw) * 1.414);
  left:calc(var(--hw) / -2);top:calc(var(--hw) * -.707);
  padding:calc(var(--hw) * .1) calc(var(--hw) * .1);
  background:#FBFAF7;border:1px solid #DDD7CC;border-radius:3px;
  transform-origin:50% 135%;
  transform:
    translateZ(calc(var(--k) * -10px + var(--alza, 0) * 70px))
    rotateZ(calc(var(--p, 1) * var(--d) * 7.5deg))
    translateY(calc(var(--alza, 0) * -34px));
  transition:transform .55s var(--curva-salida);
  color:var(--grafito-hondo);
}
.hoja.alzada{--alza:1}
.hoja-de{display:block;font-family:var(--mono);font-size:calc(var(--hw) * .05);color:#5F656D;margin-bottom:calc(var(--hw) * .05)}
.hoja b{display:block;font-family:var(--serif);font-weight:600;font-size:calc(var(--hw) * .092);line-height:1.1;letter-spacing:-.01em;margin-bottom:calc(var(--hw) * .07);padding-bottom:calc(var(--hw) * .05);border-bottom:2px solid var(--cobre)}
.hoja i{display:block;height:calc(var(--hw) * .024);border-radius:2px;background:#E4DFD6;margin-top:calc(var(--hw) * .045)}
.hoja i.corta{width:64%}
.hoja::after{content:"";position:absolute;top:calc(var(--hw) * .1);right:calc(var(--hw) * .1);width:calc(var(--hw) * .06);height:calc(var(--hw) * .06);background:var(--cobre)}

@media (max-width:860px){
  .portada-maqueta{position:relative;left:auto;right:auto;height:min(340px, 44svh);margin:0 calc(var(--gut) * -1) 26px}
  .maqueta-rotulo{right:50%;translate:50% 0;bottom:-8px;padding:8px 14px 9px}
  /* en el teléfono: título, ronda y ficha, uno debajo del otro */
  .trabajos{display:block;min-height:0;padding-block:56px 44px}
  .trabajos-in{display:flex;flex-direction:column}
  .trabajos-lado{display:contents}
  .trabajos-cabeza{order:1;text-align:center}
  .titulo-ronda{margin-inline:auto;font-size:clamp(2.5rem, 11vw, 3.6rem)}
  .sobre-oscuro .titulo-bajada{margin-inline:auto}
  .ronda-escena{order:2;--w:clamp(160px, 47vw, 200px);margin-top:14px}
  .ficha-lado{order:3;margin-top:4px;text-align:center;border-top:0}
  .ficha-arriba,.ficha-accion,.ficha-nav{justify-content:center}
  .sobre-oscuro .ficha-texto p{margin-inline:auto}
  .ficha-texto{min-height:262px}
  .trabajos-fondo{left:0;width:100%;top:auto;bottom:0;height:470px}
  .hojas-escena{height:380px}
  .hoja{--hw:150px}
}
@media (max-width:520px){
  .probador{width:100%;max-width:100%;height:100dvh;border-radius:0;box-shadow:none;overscroll-behavior:contain}
  .probador-cabeza{padding:calc(8px + env(safe-area-inset-top, 0px)) 10px 8px 16px}
  .probador-marco{margin:0;border-radius:0}
}
@media (prefers-reduced-motion:reduce){
  .ronda-escena,.moneda-escena{cursor:default}
  .ficha-tipo::before{animation:none}
}

/* Hover solo donde hay puntero fino: en tactil el :hover queda pegado tras el toque */
@media (hover:hover) and (pointer:fine){
  .maqueta-rotulo:hover{border-color:var(--cobre);background:rgba(14,19,26,.75)}
  .ficha-enlace:hover{color:var(--cobre-claro)}
  .flecha:hover{background:rgba(196,121,74,.25);border-color:var(--cobre);transform:scale(1.06)}
}