/* Probador virtual (probador.html). Sin #hex: todo de tokens.css. Tres modos sobre UNA escena: .pv[data-modo]. */
.pv{--pv-arriba:calc(65px + env(safe-area-inset-top));--pv-barra:64px;--pv-ease:cubic-bezier(.23,1,.32,1);display:grid;gap:20px;grid-template-columns:minmax(0,1fr);padding-bottom:48px}

/* ---------- Barra: título y selector de modo (segmentado, radios nativos: flechas y lector de pantalla gratis) ---------- */
.pv-barra{position:sticky;top:var(--pv-arriba);z-index:8;display:flex;align-items:center;gap:16px;height:var(--pv-barra);padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));background:var(--superficie);border-bottom:1px solid var(--linea)}
.pv-titulo{margin:0;font-family:var(--display);font-size:1.625rem;line-height:1.1;color:var(--marca);white-space:nowrap}
.pv-modos{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));flex:1 1 auto;max-width:440px;margin-left:auto;padding:4px;border:1px solid var(--linea);border-radius:999px;background:var(--fondo)}
/* La píldora se desliza al modo elegido (transform: sin layout). */
.pv-modos::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 3);border-radius:999px;background:var(--marca);box-shadow:var(--sombra);transition:transform 220ms var(--pv-ease)}
.pv-modos:has(input[value="comparar"]:checked)::before{transform:translateX(100%)}
.pv-modos:has(input[value="catalogo"]:checked)::before{transform:translateX(200%)}
.pv-modo{position:relative;z-index:1;display:grid;place-items:center;min-height:44px;border-radius:999px;font-weight:700;font-size:.9375rem;color:var(--tinta-2);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color 160ms ease}
.pv-modo input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pv-modo:has(input:checked){color:var(--sobre-marca)}
.pv-modo:has(input:focus-visible){outline:3px solid var(--marca);outline-offset:2px}
@media (max-width:699px){.pv-titulo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.pv-modos{max-width:none}}

/* ---------- Estudio: qué se ve en cada modo ---------- */
.pv-estudio{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);align-items:start}
.pv-estudio>*{margin-inline:16px}
.pv-pasos,.pv-panel,.pv-comparar,.pv-catalogo,.pv-franja,.pv-grande{display:none}
.pv[data-modo="espejo"] .pv-franja,.pv[data-modo="espejo"] .pv-panel,.pv[data-modo="comparar"] .pv-comparar,.pv[data-modo="catalogo"] .pv-catalogo{display:grid}
.pv[data-modo="catalogo"] .pv-pasos{display:flex}
.pv-franja,.pv-panel,.pv-comparar,.pv-catalogo{grid-template-columns:minmax(0,1fr)}
.pv[data-modo="catalogo"] .pv-grande{display:inline-flex}
.pv[data-modo="comparar"] .pv-pantalla,.pv[data-modo="catalogo"] .pv-pantalla{display:contents}
/* En Comparar la escena sigue montada (el video vivo, para volver sin reiniciar la cámara) pero fuera de la vista. */
.pv[data-modo="comparar"] .pv-escena{position:fixed;left:0;top:0;width:2px;height:2px;overflow:hidden;opacity:0;pointer-events:none}
/* Entrada de cada vista al cambiar de modo: corta y solo transform/opacidad. */
.pv-comparar,.pv-catalogo,.pv-franja,.pv-panel{transition:opacity 200ms var(--pv-ease),transform 200ms var(--pv-ease)}
@starting-style{.pv-comparar,.pv-catalogo,.pv-franja,.pv-panel{opacity:0;transform:translateY(6px)}}

/* ---------- Escena compartida ---------- */
/* Espejo en celular: selector + cara + franja del pulgar llenan la pantalla; ajuste y permiso quedan abajo. */
.pv-pantalla{display:flex;flex-direction:column;height:max(460px,calc(100dvh - var(--pv-arriba) - var(--pv-barra)));margin-top:-20px}
.pv[data-modo="espejo"] .pv-pantalla{margin-inline:0}
.pv-escena{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:var(--banda)}
.pv-lienzo{position:absolute;inset:0;overflow:hidden;touch-action:none}
/* La fuente se encuadra por CSSOM (encuadre() de probador.js), con la misma escala que el armazón. */
.pv-lienzo #pvVideo,.pv-lienzo #pvImg{position:absolute;left:0;top:0;display:block;max-width:none}
.pv-escena.espejo .pv-lienzo{transform:scaleX(-1)}
.pv-armazon{position:absolute;left:0;top:0;width:0;transform-origin:center;cursor:grab;filter:drop-shadow(0 4px 6px color-mix(in srgb,var(--noche) 35%,transparent))}
.pv-armazon .armazon .az-lente{fill:var(--az-lente)}
/* El recorte real (WebP con alfa): no se arrastra como imagen; el que se arrastra es .pv-armazon. */
.pv-lienzo .pv-armazon img.pv-pieza{display:block;width:100%;height:auto;pointer-events:none;user-select:none;-webkit-user-drag:none}
.pv-ficha-caja{position:absolute;top:12px;left:12px;right:84px;display:flex;pointer-events:none}
.pv-ficha{display:grid;gap:2px;max-width:100%;margin:0;padding:8px 14px;border-radius:16px;background:color-mix(in srgb,var(--superficie) 94%,transparent);box-shadow:var(--sombra);pointer-events:auto}
.pv-ficha b{font-size:1rem;line-height:1.25}
.pv-ficha span{font-size:var(--t-chico);font-weight:700;color:var(--tinta-2)}
.pv-ficha .por-confirmar{color:var(--aviso)}
.pv-lado{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:grid;gap:10px}
.pv-flota{display:grid;place-items:center;width:60px;min-height:56px;padding:4px;border:0;border-radius:18px;background:color-mix(in srgb,var(--superficie) 94%,transparent);box-shadow:var(--sombra);color:var(--marca);font:700 var(--t-chico)/1.1 var(--sans);cursor:pointer;transition:transform 160ms var(--pv-ease)}
.pv-flota:active,.pv-fav:active,.pv-item-caja:active,.pv-az:active{transform:scale(.96)}
.pv-rotulo{position:absolute;left:12px;bottom:28px;margin:0;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--superficie) 88%,transparent);font-size:var(--t-chico);font-weight:600;color:var(--tinta-2)}
.pv-estado{position:absolute;left:50%;bottom:68px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);margin:0;padding:8px 16px;border-radius:999px;background:var(--noche);color:var(--sobre-noche);font-weight:700;text-align:center;box-shadow:var(--sombra)}
.pv-estado:empty{display:none}

/* ---------- Espejo: franja del pulgar y panel ---------- */
.pv-franja{position:relative;gap:10px;margin-top:-18px;padding:14px 16px 12px;border-radius:24px 24px 0 0;background:var(--superficie);box-shadow:0 -10px 24px -18px color-mix(in srgb,var(--noche) 60%,transparent)}
.pv-tabs{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--fondo)}
.pv-tabs button{flex:1;min-height:44px;border:0;border-radius:999px;background:transparent;color:var(--tinta);font:700 .9375rem var(--sans);cursor:pointer}
.pv-tabs button[aria-pressed="true"]{background:var(--superficie);color:var(--marca);box-shadow:var(--sombra)}
.pv-azs{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 6px;scrollbar-width:thin}
.pv-az{position:relative;flex:none;display:grid;place-items:center;width:100px;height:68px;padding:8px;border:2px solid var(--linea);border-radius:var(--radio);background:var(--superficie);cursor:pointer;scroll-snap-align:center;transition:transform 160ms var(--pv-ease),border-color 160ms ease}
.pv-az .az-frente,.pv-az .armazon{display:block;width:100%;height:100%;object-fit:contain}
.pv-az[aria-pressed="true"]{border-color:var(--acento);background:var(--acento-suave)}
.pv-vacio{margin:0;padding:8px 0;color:var(--tinta-2);list-style:none}
.pv-enlace{display:inline;min-height:44px;padding:12px 0;border:0;background:none;color:var(--marca);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pv-acciones{display:flex;gap:10px}
.pv-acciones .btn{flex:1;padding:0 8px;font-size:.9375rem}
.pv-privado{margin:0;text-align:center;font-size:var(--t-chico);color:var(--tinta-2)}
.pv-panel{gap:12px}
.pv-caja-btn{gap:8px}
.pv-caja-btn[aria-pressed="true"]{background:var(--acento-suave);color:var(--acento-texto);border:1px solid var(--acento)}
.pv-ajuste{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.pv-ajuste .campo{flex:1 1 160px}
.pv-ajuste input[type=range]{width:100%;min-height:44px;padding:0;border:0;accent-color:var(--marca)}
.pv-dip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0;color:var(--tinta-2)}
.pv-dip b{color:var(--tinta)}

/* ---------- Comparar ---------- */
.pv-comparar{gap:14px}
.pv-comp-cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px}
.pv-comp-cab h2{margin:0 0 2px;font-family:var(--display);font-size:1.875rem;line-height:1.1;color:var(--marca)}
.pv-comp-cab p{margin:0;color:var(--tinta-2)}
.pv-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pv-rejilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pv-celda{position:relative;display:grid;grid-template-rows:auto 1fr;overflow:hidden;border:2px solid transparent;border-radius:var(--radio-tarjeta);background:var(--superficie);box-shadow:var(--sombra);transition:border-color 160ms ease}
.pv-celda.fav{border-color:var(--acento)}
.pv-celda-fig{display:block;width:100%;padding:0;border:0;background:var(--banda);cursor:zoom-in}
.pv-celda-fig:focus-visible{outline:3px solid var(--marca);outline-offset:-3px}
.pv-celda-cuadro{position:relative;display:block;aspect-ratio:4/5;overflow:hidden}
.pv-celda-cuadro.espejo{transform:scaleX(-1)}
.pv-celda-cuadro canvas{display:block;width:100%;height:100%}
.pv-celda-az{position:absolute;left:50%;top:45%;width:40%;filter:drop-shadow(0 3px 4px color-mix(in srgb,var(--noche) 35%,transparent))}
.pv-celda-az .pv-celda-pieza{display:block;width:100%;height:auto}
.pv-celda-pie{display:grid;align-content:start;gap:2px;padding:10px 12px 12px}
.pv-celda-pie b{display:block;font-size:.9375rem;line-height:1.25;overflow-wrap:anywhere}
.pv-celda-pie small{display:block;font-size:var(--t-chico);font-weight:700;color:var(--tinta-2)}
.pv-fav{position:absolute;top:8px;left:8px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--superficie) 90%,transparent);box-shadow:var(--sombra);color:var(--marca);cursor:pointer;transition:transform 160ms var(--pv-ease),background-color 160ms ease}
.pv-fav svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.pv-fav[aria-pressed="true"]{background:var(--acento);border-color:var(--acento);color:var(--sobre-acento)}
.pv-fav[aria-pressed="true"] svg{fill:currentColor}
.pv-quitar{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--superficie) 90%,transparent);color:var(--tinta);box-shadow:var(--sombra);cursor:pointer}
.pv-agregar{display:grid;place-items:center;align-content:center;gap:4px;min-height:220px;border:2px dashed var(--linea);border-radius:var(--radio-tarjeta);background:transparent;color:var(--marca);font:700 1rem var(--sans);cursor:pointer}
.pv-agregar b{font-size:2rem;line-height:1}
.pv-agregar small{font-size:var(--t-chico);color:var(--tinta-2)}
.pv-comparar .pv-privado{text-align:left}
.pv-agregar-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr));gap:10px;margin:0;padding:0;list-style:none}
.pv-agregar-az{display:grid;gap:6px;width:100%;height:100%;padding:10px;border:1px solid var(--linea);border-radius:var(--radio);background:var(--superficie);color:var(--tinta);font:inherit;text-align:left;cursor:pointer}
.pv-agregar-az .az-frente,.pv-agregar-az .armazon{width:100%;height:56px;object-fit:contain}
.pv-agregar-az b{display:block;font-size:.9375rem;line-height:1.25}
.pv-agregar-az small{color:var(--tinta-2);font-size:var(--t-chico)}

/* Barra de abajo de Comparar y Catálogo (pegada al pie de su vista; respeta el indicador de inicio). */
.pv-pie-barra{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:12px;margin:0 -16px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--superficie);border-top:1px solid var(--linea)}
.pv-pie-barra p{flex:1;min-width:0;margin:0;font-weight:700}

/* ---------- Catálogo: pasos, la cara fija y el catálogo como selector ---------- */
.pv-pasos{gap:6px;margin-block:0;padding:0;list-style:none;overflow-x:auto}
.pv-pasos li{flex:none}
.pv-paso{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border:1px solid var(--linea);border-radius:999px;background:var(--superficie);color:var(--tinta-2);font:700 var(--t-chico) var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer}
.pv-paso.hecho{border-color:transparent;background:var(--acento-suave);color:var(--acento-texto)}
.pv-paso.actual{border-color:var(--marca);background:var(--marca);color:var(--sobre-marca)}
.pv[data-modo="catalogo"] .pv-escena{position:sticky;top:calc(var(--pv-arriba) + var(--pv-barra));z-index:6;display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-areas:"lienzo ficha" "lienzo rotulo" "estado estado";align-items:center;gap:4px 14px;margin-inline:0;padding:10px 16px;background:var(--superficie);box-shadow:var(--sombra);overflow:visible}
.pv[data-modo="catalogo"] .pv-lienzo{position:relative;inset:auto;grid-area:lienzo;width:100%;aspect-ratio:4/5;border-radius:16px;background:var(--banda)}
.pv[data-modo="catalogo"] .pv-ficha-caja{position:static;grid-area:ficha;display:grid;gap:8px;justify-items:start;align-self:end}
.pv[data-modo="catalogo"] .pv-ficha{padding:0;background:none;box-shadow:none}
.pv[data-modo="catalogo"] .pv-ficha b{font-family:var(--display);font-size:1.125rem;color:var(--marca)}
.pv[data-modo="catalogo"] .pv-rotulo{position:static;grid-area:rotulo;align-self:start;justify-self:start;padding:0;background:none}
.pv[data-modo="catalogo"] .pv-estado{position:static;grid-area:estado;transform:none;justify-self:stretch;width:auto;max-width:none;margin-top:6px;border-radius:14px}
.pv[data-modo="catalogo"] .pv-lado{display:none}
.pv-catalogo{gap:12px}
.pv-filtros{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:thin}
.pv-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.pv-item{position:relative}
.pv-item-probar{display:grid;align-content:start;gap:4px;width:100%;height:100%;padding:10px 10px 12px;border:2px solid var(--linea);border-radius:var(--radio);background:var(--superficie);color:var(--tinta);font:inherit;text-align:left;cursor:pointer;transition:border-color 160ms ease}
.pv-item-probar .az-frente,.pv-item-probar .armazon{width:100%;height:68px;margin-bottom:4px;object-fit:contain}
.pv-item-probar b{font-size:.9375rem;line-height:1.25}
.pv-item-probar small{color:var(--tinta-2);font-size:var(--t-chico)}
.pv-item-probar .az-frente,.pv-item-probar .armazon{margin-top:22px}
.pv-item-probar[aria-pressed="true"]{border-color:var(--acento);background:var(--acento-suave)}
.pv-item-caja{position:absolute;right:8px;top:8px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--linea);border-radius:50%;background:var(--superficie);color:var(--marca);cursor:pointer;transition:transform 160ms var(--pv-ease),background-color 160ms ease}
.pv-item-caja[aria-pressed="true"]{border-color:var(--marca);background:var(--marca);color:var(--sobre-marca)}
.pv-item-caja[disabled]{opacity:.4;cursor:not-allowed}

/* ---------- Permiso y «sin cámara» ---------- */
.pv-permiso h2,.pv-cara h2{margin:0 0 8px;font-family:var(--display);color:var(--marca);font-size:1.375rem}
.pv-permiso{border-left:5px solid var(--acento);scroll-margin-top:calc(var(--pv-arriba) + var(--pv-barra) + 12px)}
/* El enlace al aviso dentro de la casilla también se toca con el dedo (≥ 44 px de alto sin mover el texto). */
.pv-permiso .consentimiento a{display:inline-block;padding:13px 6px;margin:-13px -6px;min-width:44px;text-align:center}
.pv-fuentes{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 6px}
.pv-fuentes label.btn{cursor:pointer}
.pv-linea{margin:0 0 12px;font-size:1.125rem;font-weight:600;color:var(--tinta)}
.pv-cara{margin-inline:16px}
.pv-sugeridos{list-style:none;margin:12px 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:10px}
.pv-sugeridos li{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--linea);border-radius:var(--radio)}
.pv-sugeridos .armazon,.pv-sugeridos .az-frente{width:90px;height:auto;flex:none}
.pv-sugeridos small{display:block;color:var(--tinta-2)}
.pv-cara select{max-width:320px;min-height:48px;padding:10px 12px;border:1px solid var(--linea);border-radius:var(--radio-chico);background:var(--superficie);font-size:1rem}

/* ---------- Pantalla ancha ---------- */
@media (min-width:900px){
  .pv{gap:24px}
  .pv-estudio{width:100%;max-width:1280px;margin:0 auto;padding:16px 24px 0;gap:16px 24px}
  .pv-estudio>*{margin-inline:0}
  .pv-cara{width:calc(100% - 48px);max-width:1232px;margin-inline:auto}
  .pv-pantalla{margin-top:0}
  /* Espejo: armazones | cara | ajuste y permiso (la cara se queda bajo la barra al bajar). */
  .pv[data-modo="espejo"] .pv-estudio{grid-template-columns:280px minmax(0,1fr) 320px;grid-template-areas:"franja escena panel" "franja escena permiso";grid-template-rows:auto 1fr}
  .pv[data-modo="espejo"] .pv-pantalla{display:contents}
  .pv[data-modo="espejo"] .pv-escena{grid-area:escena;position:sticky;top:calc(var(--pv-arriba) + var(--pv-barra) + 16px);height:calc(100dvh - var(--pv-arriba) - var(--pv-barra) - 32px);min-height:460px;border-radius:var(--radio-tarjeta)}
  .pv[data-modo="espejo"] .pv-franja{grid-area:franja;align-content:start;margin:0;padding:0;border-radius:0;background:none;box-shadow:none}
  .pv[data-modo="espejo"] .pv-azs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}
  .pv[data-modo="espejo"] .pv-az{width:auto;height:84px}
  .pv[data-modo="espejo"] .pv-acciones{flex-direction:column}
  .pv[data-modo="espejo"] .pv-lado{display:none}
  .pv[data-modo="espejo"] .pv-ficha-caja{right:12px}
  .pv-panel{grid-area:panel;align-content:start}
  .pv-permiso{grid-area:permiso}
  .pv[data-modo="espejo"] .pv-permiso .pv-fuentes .btn{flex:1 1 100%}
  /* Comparar: hasta 4 en fila. */
  .pv[data-modo="comparar"] .pv-estudio{grid-template-areas:"comparar" "permiso"}
  .pv-comparar{grid-area:comparar}
  .pv-rejilla{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pv-pie-barra{margin:0;border:1px solid var(--linea);border-bottom:0;border-radius:20px 20px 0 0}
  /* Catálogo: catálogo | la cara fija a la derecha. */
  .pv[data-modo="catalogo"] .pv-estudio{grid-template-columns:minmax(0,1fr) 400px;grid-template-areas:"pasos escena" "catalogo escena" "permiso escena"}
  .pv-pasos{grid-area:pasos}
  .pv-catalogo{grid-area:catalogo}
  .pv[data-modo="catalogo"] .pv-escena{grid-area:escena;top:calc(var(--pv-arriba) + var(--pv-barra) + 16px);grid-template-columns:minmax(0,1fr);grid-template-areas:"lienzo" "ficha" "rotulo" "estado";gap:10px;padding:16px;border-radius:24px}
  .pv[data-modo="catalogo"] .pv-ficha b{font-size:1.5rem}
  .pv[data-modo="catalogo"] .pv-lienzo{aspect-ratio:auto;height:min(480px,calc(100dvh - var(--pv-arriba) - var(--pv-barra) - 280px));min-height:240px}
  .pv-lista{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* Celular de lado: la barra y la cara del Catálogo dejan de estar pegadas y el Espejo pone la franja a un lado. */
@media (orientation:landscape) and (max-height:500px){
  .pv-barra,.pv[data-modo="catalogo"] .pv-escena{position:static}
  .pv[data-modo="espejo"] .pv-pantalla{flex-direction:row;height:calc(100dvh - var(--pv-arriba));min-height:300px}
  .pv[data-modo="espejo"] .pv-franja{flex:none;width:280px;margin:0;border-radius:0;align-content:start;overflow-y:auto}
  .pv[data-modo="espejo"] .pv-azs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}
  .pv[data-modo="espejo"] .pv-az{width:auto}
}
@media (max-width:360px){.pv-paso{padding:0 8px}}
@media (prefers-reduced-motion:reduce){
  .pv-modos::before{transition:none}
  .pv-comparar,.pv-catalogo,.pv-franja,.pv-panel{transition:opacity 150ms ease}
  @starting-style{.pv-comparar,.pv-catalogo,.pv-franja,.pv-panel{transform:none}}
}

/* ---------- Medir DIP a pantalla completa (js/medir.js). Colores: --md-* de tokens.css. ---------- */
html.md-abierta{overflow:hidden}
.md{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--md-fondo);color:var(--md-sobre-vidrio);overflow:hidden}
.md::backdrop{background:var(--md-fondo)}
.md-escena{position:absolute;inset:0}
.md-video,.md-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--md-fondo)}
.md-foto{object-fit:contain}
.md-espejo .md-video{transform:scaleX(-1)}
.md-capa{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.md-cab{position:absolute;top:calc(env(safe-area-inset-top) + 10px);left:16px;right:16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.md-cab h2{margin:0;font-family:var(--display);font-size:1.375rem;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.md-x{display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;background:var(--md-vidrio);color:var(--md-sobre-vidrio);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.md-x:focus-visible,.md-disparo:focus-visible,.md-sec:focus-visible{outline:3px solid var(--md-ok);outline-offset:3px}
.md-guia{position:absolute;top:calc(env(safe-area-inset-top) + 68px);left:16px;right:16px;display:grid;justify-items:center;gap:10px;pointer-events:none}
.md-msg{margin:0;max-width:30ch;padding:8px 16px;border-radius:999px;background:var(--md-vidrio);font-size:1.0625rem;font-weight:700;text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.md-msg:empty{display:none}
.md-chequeos{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0;padding:0;list-style:none}
.md-chequeos li{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:2px 12px;border-radius:999px;background:var(--md-vidrio);font-size:.875rem;font-weight:700;opacity:.82}
.md-chequeos li::before{content:"";width:9px;height:9px;border-radius:50%;border:2px solid currentColor}
.md-chequeos li.ok{opacity:1}
.md-chequeos li.ok::before{background:var(--md-ok);border-color:var(--md-ok)}
.md-pie{position:absolute;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom) + 64px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.md-sec{justify-self:start;min-height:48px;padding:0 18px;border:0;border-radius:999px;background:var(--md-vidrio);color:var(--md-sobre-vidrio);font:700 1rem var(--sans);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.md-hueco{visibility:hidden}
.md-disparo{position:relative;display:grid;place-items:center;width:84px;height:84px;padding:0;border:0;border-radius:50%;background:var(--md-sobre-vidrio);color:var(--marca-oscura);font:800 1rem var(--sans);cursor:pointer;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.md-disparo svg{position:absolute;inset:-6px;width:96px;height:96px;transform:rotate(-90deg)}
.md-disparo circle{fill:none;stroke-width:5}
.md-aro-fondo{stroke:color-mix(in srgb,var(--md-sobre-vidrio) 35%,transparent)}
.md-aro{stroke:var(--md-ok);stroke-dasharray:100;stroke-dashoffset:100;stroke-linecap:round;transition:stroke-dashoffset .2s linear}
.md-disparo[disabled]{opacity:.55;cursor:not-allowed}
.md-privado{position:absolute;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom) + 6px);margin:0;text-align:center;font-size:.875rem;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.md-con-res .md-pie,.md-con-res .md-guia,.md-con-res .md-privado{display:none}
/* Resultados y marcas: hoja de abajo en celular, panel a la derecha en pantalla ancha */
.md-res,.md-marcas{position:absolute;left:0;right:0;bottom:0;max-height:82dvh;overflow:auto;overscroll-behavior:contain;padding:20px 16px calc(env(safe-area-inset-bottom) + 18px);border-radius:22px 22px 0 0;background:var(--md-panel);color:var(--md-tinta);box-shadow:var(--md-sombra)}
.md-res:focus{outline:none}
.md-res h2,.md-marcas h2{margin:0 0 10px;font-family:var(--display);font-size:1.5rem;color:var(--md-tinta)}
.md-cifra{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 12px}
.md-cifra>span{flex-basis:100%;color:var(--md-tinta-2);font-weight:700}
.md-cifra b{font-family:var(--display);font-size:3rem;line-height:1;color:var(--md-tinta)}
.md-cifra b small{font-size:1.125rem;font-family:var(--sans);color:var(--md-tinta-2)}
.md-cifra em{font-style:normal;font-weight:700;color:var(--md-tinta-2)}
.md-filas{display:grid;gap:0;margin:0 0 12px}
.md-filas div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--md-linea)}
.md-filas dt{color:var(--md-tinta-2)}
.md-filas dd{margin:0;font-weight:700;text-align:right}
.md-filas small{color:var(--md-tinta-2);font-weight:600}
.md-nota{margin:0 0 8px;color:var(--md-tinta-2)}
.md-nota b{color:var(--md-tinta)}
.md-mas{margin:0 0 14px;color:var(--md-tinta-2)}
.md-mas summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:700;color:var(--md-tinta)}
.md-mas p{margin:0}
.md-acciones{display:flex;flex-wrap:wrap;gap:10px}
.md-acciones .btn{flex:1 1 30%}
.md .btn.claro{background:transparent;color:var(--md-tinta);border:1px solid var(--md-linea)}
.md-marcas{max-height:none;top:auto}
.md-marcas-ayuda{margin:0 0 10px;color:var(--md-tinta-2)}
.md-marcas-lienzo{position:relative;margin:0 auto 10px;max-width:640px;touch-action:none}
.md-marcas-lienzo canvas{display:block;width:100%;height:auto;border-radius:var(--radio)}
.md-marcas-lienzo.md-espejo canvas{transform:scaleX(-1)}
.md-marca{position:absolute;padding:0;border:0;background:transparent;cursor:ew-resize}
[data-eje="u"] .md-marca{top:0;bottom:0;width:44px;margin-left:-22px}
[data-eje="v"] .md-marca{left:0;right:0;height:44px;margin-top:-22px;cursor:ns-resize}
.md-marca::before{content:"";position:absolute;background:var(--md-ok);box-shadow:0 0 0 1px var(--md-panel)}
[data-eje="u"] .md-marca::before{left:50%;top:0;bottom:0;width:2px;margin-left:-1px}
[data-eje="v"] .md-marca::before{top:50%;left:0;right:0;height:2px;margin-top:-1px}
.md-marca::after{content:"";position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:var(--md-ok);border:3px solid var(--md-panel)}
.md-marca:focus-visible::after{outline:3px solid var(--marca);outline-offset:2px}
.md-marcas-valor{margin:0 0 12px;font-weight:800;font-size:1.125rem}
@media (min-width:900px){
  .md-res,.md-marcas{left:auto;top:0;width:400px;max-height:none;border-radius:0;padding:calc(env(safe-area-inset-top) + 24px) 24px 24px}
  .md-marcas{width:min(720px,60vw)}
  .md-con-res .md-cab{right:416px}
}
@media (prefers-reduced-motion:reduce){.md-aro{transition:none}}
/* La barra «Pedir a casa» no tapa las últimas tarjetas del catálogo. */
.pv[data-modo="catalogo"] .pv-catalogo{padding-bottom:88px}