/* Mercado del Age — Escudos de madera
 *
 * Los colores salen de variables para que el tema pueda pisarlos. El marco
 * está armado con cuatro largueros en inglete, el fieltro del fondo y una
 * chapa dibujada: nada de imágenes recortadas, así se ve nítido a cualquier
 * tamaño y se puede pintar de cualquier color.
 */

.mda-esc{
  --esc-tinta:#232019; --esc-suave:#6E675A; --esc-borde:#DFD8C9;
  --esc-sup:#FFFFFF; --esc-sup2:#F3EFE7; --esc-bronce:#8F6F26; --esc-foco:#2C58D8;
  color:var(--esc-tinta);
}
.mda-esc *,.mda-esc *::before,.mda-esc *::after{box-sizing:border-box}
/* display:grid/flex le gana al [hidden] del navegador, así que hay que
   decirlo explícito o las tres vistas se dibujan una encima de la otra. */
.mda-esc [hidden]{display:none!important}
.mda-esc button{font:inherit}

/* ───────── el simulador ───────── */
.mda-esc-vitrina{display:flex;align-items:center;justify-content:center;min-height:300px;padding:6px 0}

.mda-esc-marco{
  --b:8.8%;container-type:inline-size;position:relative;width:100%;max-width:520px;aspect-ratio:386/400;
  filter:drop-shadow(0 10px 22px rgba(40,33,20,.18));
  transition:max-width .35s cubic-bezier(.2,.7,.3,1);
}
.mda-esc-caja{position:absolute;inset:0}
.mda-esc-riel{position:absolute;inset:0;background-color:var(--cm);background-image:var(--tv);
  background-blend-mode:var(--modo);background-size:8.8% 100%;background-repeat:repeat-x}
.mda-esc-riel.h{background-image:var(--th);background-size:100% 8.8%;background-repeat:repeat-y}
.mda-esc-riel.arriba{clip-path:polygon(0 0,100% 0,calc(100% - 8.8%) 8.8%,8.8% 8.8%);filter:brightness(1.07)}
.mda-esc-riel.abajo{clip-path:polygon(0 100%,8.8% calc(100% - 8.8%),calc(100% - 8.8%) calc(100% - 8.8%),100% 100%);filter:brightness(.86)}
.mda-esc-riel.izq{clip-path:polygon(0 0,8.8% 8.8%,8.8% calc(100% - 8.8%),0 100%);filter:brightness(.95)}
.mda-esc-riel.der{clip-path:polygon(100% 0,100% 100%,calc(100% - 8.8%) calc(100% - 8.8%),calc(100% - 8.8%) 8.8%);filter:brightness(1.02)}

.mda-esc-hueco{position:absolute;inset:8.8%;overflow:hidden;
  background-color:var(--cf);background-image:var(--tf);background-blend-mode:var(--modof);
  background-size:var(--tamf,19%) auto;
  box-shadow:inset 0 .5cqw 1.1cqw rgba(0,0,0,.42), inset 0 0 0 .18cqw rgba(0,0,0,.30)}
.mda-esc-hueco img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  height:86%;width:auto;max-width:90%;object-fit:contain;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.45))}

/* La chapa va dibujada, no recortada de una foto: nítida a cualquier tamaño. */
.mda-esc-chapa{position:absolute;left:50%;bottom:1.5%;transform:translateX(-50%);
  width:35%;aspect-ratio:133/23;display:grid;place-items:center;
  filter:drop-shadow(0 .28cqw .42cqw rgba(0,0,0,.45))}
.mda-esc-chapa .placa{position:absolute;inset:0;display:block;
  clip-path:polygon(4% 0,96% 0,100% 26%,100% 74%,96% 100%,4% 100%,0 74%,0 26%);
  background:
    radial-gradient(circle .42cqw at 5.5% 31%, #6E5716 0 55%, #E7D48F 70%, transparent 74%),
    radial-gradient(circle .42cqw at 5.5% 69%, #6E5716 0 55%, #E7D48F 70%, transparent 74%),
    radial-gradient(circle .42cqw at 94.5% 31%, #6E5716 0 55%, #E7D48F 70%, transparent 74%),
    radial-gradient(circle .42cqw at 94.5% 69%, #6E5716 0 55%, #E7D48F 70%, transparent 74%),
    linear-gradient(180deg,#A5822F 0%,#DFCB86 10%,#F3E9BE 34%,#E3CE86 56%,#C2A252 78%,#8E7024 100%)}
.mda-esc-chapa span{position:relative;font-family:Cinzel,Georgia,"Times New Roman",serif;font-weight:700;
  color:#5F4A12;letter-spacing:.09em;line-height:1;font-size:var(--tam-chapa,5.2cqw);
  white-space:nowrap;text-shadow:0 .08cqw 0 rgba(255,250,225,.55)}

/* Sin marco, el escudo va sobre el fondo de la página, no sobre un recuadro
   claro inventado: así se ve como se vería colgado en la ficha. */
.mda-esc .mda-esc-suelto{position:relative;display:grid;place-items:center;width:100%;max-width:460px;
  padding:18px;background:transparent;border-radius:0;box-shadow:none;
  transition:max-width .35s cubic-bezier(.2,.7,.3,1)}
.mda-esc .mda-esc-suelto img{width:100%;height:auto;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.45)) drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.mda-esc-cuadro{width:100%;border-radius:10px;box-shadow:0 10px 26px rgba(40,33,20,.2)}

/* La aclaración va ARRIBA del simulador. El ancho está puesto para que
   entre en dos renglones: a 46ch se partía en tres. */
.mda-esc-aviso{margin:0 auto 14px;max-width:68ch;text-align:center;font-size:12.5px;line-height:1.45;color:var(--esc-suave)}
.mda-esc-colores{margin-top:20px}
.mda-esc-colores .mda-esc-grupo:last-child{margin-bottom:0}
/* Aviso para el dueño de la tienda, no para el cliente. */
.mda-esc-alerta{margin:0 0 16px;padding:10px 13px;border-left:3px solid #B8860B;border-radius:0 7px 7px 0;
  background:#FFF8E1;color:#5A4A1E;font-size:13px;line-height:1.45}
.mda-esc-alerta b{display:block;margin-bottom:3px}
.mda-esc-alerta ul{margin:6px 0 0;padding-left:18px}

/* ───────── las opciones ───────── */
.mda-esc-grupo{margin-bottom:20px}
.mda-esc-rotulo{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--esc-bronce);margin:0 0 8px}
/* Dos por renglón, siempre. En flex, un rótulo largo empujaba al otro botón
   abajo y cada opción terminaba ocupando todo el ancho. */
.mda-esc .mda-esc-ops{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mda-esc-op{min-width:0;text-align:left;padding:9px 13px;border:1px solid var(--esc-borde);
  border-radius:9px;background:var(--esc-sup);color:var(--esc-tinta);cursor:pointer;
  transition:border-color .13s,background .13s}
/* El tema del sitio pone white-space:nowrap en los botones, así que
   "Cuadro completo (56 civilizaciones)" se cortaba contra el borde en vez de
   pasar al renglón siguiente. Acá se fuerza el envuelto, sólo adentro del
   selector. */
.mda-esc .mda-esc-op,.mda-esc .mda-esc-op .t,.mda-esc .mda-esc-op .p,.mda-esc .mda-esc-op .ln{
  white-space:normal!important;overflow-wrap:break-word;word-break:normal;overflow:visible!important;text-overflow:clip!important}
/* Cada renglón del rótulo en su propia caja: entra aunque el tema prohíba
   envolver. El !important de arriba es sólo un refuerzo; lo que garantiza
   que se vea es esta división. */
.mda-esc-op .t .ln{display:block}
.mda-esc-op .t{line-height:1.25}
.mda-esc-op .p:empty{display:none}
.mda-esc-op:hover{border-color:var(--esc-bronce)}
.mda-esc-op[aria-pressed="true"]{border-color:var(--esc-tinta);background:var(--esc-sup2);
  box-shadow:inset 0 0 0 1px var(--esc-tinta)}
.mda-esc-op .t{display:block;font-weight:600}
.mda-esc-op .p{display:block;font-size:12.5px;color:var(--esc-suave);font-variant-numeric:tabular-nums}

/* Los once colores en un solo renglón: se reparten el ancho que haya en vez
   de tener una medida fija que obliga a uno a bajar de línea. */
.mda-esc .mda-esc-muestras{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:6px}
.mda-esc-muestra{width:auto;aspect-ratio:1;max-width:44px;border-radius:8px;
  border:1px solid var(--esc-borde);cursor:pointer;padding:0;position:relative;overflow:hidden}
.mda-esc-muestra i{position:absolute;inset:0;display:block}
.mda-esc-muestra[aria-pressed="true"]{box-shadow:0 0 0 2px var(--esc-sup),0 0 0 4px var(--esc-tinta)}

.mda-esc-buscador{width:100%;padding:9px 12px;border:1px solid var(--esc-borde);border-radius:9px;
  background:var(--esc-sup);color:var(--esc-tinta)}
.mda-esc-grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:7px;margin-top:10px;
  max-height:340px;overflow-y:auto;padding:3px}
.mda-esc-civ{border:1px solid var(--esc-borde);border-radius:9px;background:var(--esc-sup);
  padding:6px 3px 4px;cursor:pointer;display:grid;gap:3px;justify-items:center}
.mda-esc-civ img{width:46px;height:46px;object-fit:contain}
.mda-esc-civ span{font-size:10.5px;color:var(--esc-suave);text-align:center;line-height:1.15}
.mda-esc-civ[aria-pressed="true"]{border-color:var(--esc-tinta);background:var(--esc-sup2)}
.mda-esc-conteo{font-size:12px;color:var(--esc-suave);margin-top:6px}

.mda-esc-op:focus-visible,.mda-esc-muestra:focus-visible,.mda-esc-civ:focus-visible,
.mda-esc-buscador:focus-visible{outline:2px solid var(--esc-foco);outline-offset:2px}

/* El desplegable real de WooCommerce sigue en el formulario, pero no se ve:
   lo maneja el selector. Si el JS no corre, esta regla no se aplica y el
   cliente puede comprar igual con el desplegable de siempre. */
.mda-esc-andando .variations,
.mda-esc-andando .woocommerce-variation-description{display:none!important}

.mda-esc-mini{max-width:64px;height:auto}

@media (max-width:600px){
  .mda-esc-grilla{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}
  .mda-esc-muestras{gap:4px}
}

/* ───────── el simulador fijo al scrollear ─────────
 *
 * Con el elector a la izquierda, esa columna es la larga: la grilla de 53
 * civilizaciones ocupa mucho. Si el simulador no se queda quieto, el cliente
 * elige a ciegas porque la simulación ya se le fue de pantalla.
 *
 * position:sticky necesita un padre más alto que él, y las columnas de
 * Elementor no se estiran solas. Por eso hay que llegar hasta el contenedor
 * del widget y estirarlo. Si el navegador no entiende :has(), el simulador
 * simplemente no se fija y la ficha sigue funcionando igual.
 */
@media (min-width:1025px) and (min-height:700px){
  .mda-esc-fijo{position:sticky;top:var(--mda-esc-top,24px);align-self:start}

  .elementor-shortcode:has(> .mda-esc-fijo),
  .elementor-widget-container:has(> .elementor-shortcode > .mda-esc-fijo),
  .elementor-widget:has(> .elementor-widget-container > .elementor-shortcode > .mda-esc-fijo),
  .elementor-widget-wrap:has(> .elementor-widget > .elementor-widget-container > .elementor-shortcode > .mda-esc-fijo),
  .elementor-widget-container:has(> .mda-esc-fijo),
  .elementor-widget:has(> .elementor-widget-container > .mda-esc-fijo),
  .elementor-widget-wrap:has(> .elementor-widget > .elementor-widget-container > .mda-esc-fijo){height:100%}
}

/* Marca de versión, sólo para quien administra la tienda. Sirve para saber
   de un vistazo si la página que se está viendo es la nueva o una copia
   guardada en caché. */
.mda-esc-version{margin:10px 0 0;font-size:11px;color:var(--esc-suave);opacity:.75}