/* ════════════════════════════════════════════════════════════════
   CAYETANA · Revisa tu talla

   Todo cuelga de #ctalla y de .ctalla-*, y las variables se declaran
   aquí dentro, no en :root. Así nada de esto puede pisar los estilos
   de la tienda ni al revés.
   ════════════════════════════════════════════════════════════════ */

/* ── la barra en la ficha ─────────────────────────────────────── */
.ctalla-barra{
  --ct-pelo:#E6E4E1; --ct-tinta:#0E1014; --ct-lavado:#F8F7F5; --ct-mudo:#71747B;
  display:flex;align-items:center;gap:12px;width:100%;
  margin:14px 0 0;padding:14px;background:#fff;
  border:1px solid var(--ct-pelo);border-radius:12px;
  cursor:pointer;text-align:left;font:inherit;color:var(--ct-tinta);
  transition:border-color 420ms cubic-bezier(.22,.68,.24,1),
             background   420ms cubic-bezier(.22,.68,.24,1);
}
.ctalla-barra:hover{border-color:var(--ct-tinta);background:var(--ct-lavado)}
.ctalla-barra .ic{width:36px;height:36px;border-radius:9px;background:var(--ct-lavado);
  flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.ctalla-barra b{flex:1 1 auto;font-size:14px;font-weight:600;letter-spacing:-.01em}
.ctalla-barra .chev{flex:0 0 auto}

/* ── el cajón ─────────────────────────────────────────────────── */
#ctalla-scrim{position:fixed;inset:0;background:rgba(14,16,20,.44);z-index:900;
  opacity:0;pointer-events:none;transition:opacity 420ms cubic-bezier(.22,.68,.24,1)}
#ctalla-scrim.viva{opacity:1;pointer-events:auto}

#ctalla{
  --papel:#FFFFFF; --tinta:#0E1014; --graf:#3A3D44; --mudo:#71747B;
  --tenue:#A2A5AB; --pelo:#E6E4E1; --pelo2:#F2F0ED; --lavado:#F8F7F5;
  --oro:#C9A96E; --oro-t:#8A6E38; --verde:#1E5F43; --verde-f:#F1F7F4;
  /* Un solo tiempo y una sola curva. La curva no rebota: entra rápido
     y se detiene. Eso es lo que se lee como decisión. */
  --t:420ms; --curva:cubic-bezier(.22,.68,.24,1); --t-corto:200ms;

  position:fixed;z-index:901;left:0;right:0;bottom:0;
  max-height:92vh;background:var(--papel);
  border-radius:20px 20px 0 0;overflow:hidden;
  display:flex;flex-direction:column;
  transform:translateY(102%);transition:transform var(--t) var(--curva);
  font-family:inherit;color:var(--tinta);-webkit-font-smoothing:antialiased;
}
#ctalla.viva{transform:none}
@media (min-width:720px){
  #ctalla{left:50%;right:auto;bottom:auto;top:50%;width:460px;
    border-radius:20px;transform:translate(-50%,-46%) scale(.97);opacity:0;
    transition:transform var(--t) var(--curva),opacity var(--t) var(--curva)}
  #ctalla.viva{transform:translate(-50%,-50%);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  #ctalla,#ctalla-scrim,#ctalla *{transition-duration:1ms!important;animation-duration:1ms!important}
}

#ctalla *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* Reset de botón. Lleva #ctalla para no tocar la tienda, y por eso
   todas las reglas de componente de abajo llevan el mismo prefijo:
   si no, este reset les ganaría por especificidad y los dejaría
   sin borde ni fondo. */
#ctalla button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
#ctalla input[type=number]{-moz-appearance:textfield;appearance:textfield}
#ctalla input[type=number]::-webkit-outer-spin-button,
#ctalla input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.ctalla-hoja{overflow-y:auto;overscroll-behavior:contain;padding:0 20px 34px;
  -webkit-overflow-scrolling:touch}

/* la agarradera y el cerrar */
.ctalla-top{position:sticky;top:0;z-index:2;background:var(--papel);padding:10px 20px 0}
.ctalla-asa{width:38px;height:4px;border-radius:999px;background:var(--pelo);margin:0 auto}
@media (min-width:720px){.ctalla-asa{display:none}}
#ctalla .ctalla-x{position:absolute;top:12px;right:14px;width:34px;height:34px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;background:var(--lavado)}

.ctalla-cab{padding:16px 0 2px}
.ctalla-cab .ceja{font-size:9px;letter-spacing:.22em;font-weight:700;color:var(--oro-t)}
.ctalla-cab h2{margin:4px 0 0;font-size:21px;font-weight:600;letter-spacing:-.02em}
.ctalla-cab p{margin:8px 0 0;font-size:13px;font-weight:500;color:var(--graf);line-height:1.55}

/* ── cambiar de pieza, cuando el conjunto trae más de una ────── */
.ctalla-piezas{display:flex;gap:6px;margin-top:14px;background:var(--lavado);
  border-radius:11px;padding:4px}
#ctalla .ctalla-piezas button{flex:1 1 0;height:36px;border-radius:8px;font-size:11.5px;
  font-weight:700;letter-spacing:.06em;color:var(--mudo);
  transition:background var(--t-corto) linear,color var(--t-corto) linear}
#ctalla .ctalla-piezas button[aria-pressed="true"]{background:var(--papel);color:var(--tinta);
  box-shadow:0 1px 3px rgba(14,16,20,.09)}

/* ── el plano ─────────────────────────────────────────────────── */
.ctalla-escena{height:286px;display:flex;align-items:center;justify-content:center;
  background:var(--lavado);border-radius:18px;margin-top:16px;overflow:hidden}
#ctalla .prenda{fill:rgba(14,16,20,.05);stroke:var(--tinta);stroke-width:1.7;
  stroke-linejoin:round;stroke-dasharray:var(--largo-prenda);
  stroke-dashoffset:var(--largo-prenda);
  animation:ctalla-trazo 950ms var(--curva) 100ms forwards}
@keyframes ctalla-trazo{to{stroke-dashoffset:0}}
#ctalla .guia{stroke:#C9C3BA;stroke-width:1.1;fill:none;stroke-dasharray:4 4;
  opacity:0;animation:ctalla-aparece var(--t) linear 700ms forwards}
@keyframes ctalla-aparece{to{opacity:1}}
#ctalla .cota{stroke:var(--oro);stroke-width:2.2;stroke-linecap:round}
#ctalla .cota .cuerda{stroke-dasharray:var(--l);stroke-dashoffset:var(--l);
  transition:stroke-dashoffset var(--t) var(--curva)}
#ctalla .cota.viva .cuerda{stroke-dashoffset:0}
#ctalla .cota .tope{opacity:0;transition:opacity var(--t-corto) linear var(--t-corto)}
#ctalla .cota.viva .tope{opacity:1}
#ctalla .chapa rect{fill:var(--tinta)}
#ctalla .chapa text{fill:#fff;font-size:11px;font-weight:700;letter-spacing:.04em}
#ctalla .chapa{opacity:0;transition:opacity var(--t-corto) linear}
#ctalla .chapa.viva{opacity:1}

/* ── tallas ───────────────────────────────────────────────────── */
.ctalla-rot{font-size:9px;letter-spacing:.18em;font-weight:700;color:var(--mudo)}
.ctalla-tallas{display:grid;gap:9px;margin-top:11px}
#ctalla .ctalla-tallas .talla{height:60px;border-radius:14px;border:1.5px solid var(--pelo);
  background:var(--papel);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;
  transition:border-color var(--t-corto) linear,background var(--t-corto) linear,
             color var(--t-corto) linear}
.ctalla-tallas .talla b{font-size:19px;font-weight:600;letter-spacing:-.01em}
.ctalla-tallas .talla span{font-size:10px;font-weight:600;color:var(--mudo);
  transition:color var(--t-corto) linear}
#ctalla .ctalla-tallas .talla[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:#fff}
.ctalla-tallas .talla[aria-pressed="true"] span{color:var(--oro)}
#ctalla .ctalla-tallas .talla[disabled]{opacity:.38;cursor:default}

/* ── medidas ──────────────────────────────────────────────────── */
.ctalla-medidas{margin-top:20px;border:1px solid var(--pelo);border-radius:15px;overflow:hidden}
#ctalla .ctalla-medidas .med{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  padding:14px 15px;border-bottom:1px solid var(--pelo2);
  transition:background var(--t-corto) linear}
#ctalla .ctalla-medidas .med:last-child{border-bottom:0}
#ctalla .ctalla-medidas .med[aria-pressed="true"]{background:#FCFAF6}
.ctalla-medidas .punto{width:9px;height:9px;border-radius:999px;background:var(--pelo);
  flex:0 0 auto;transition:background var(--t-corto) linear,transform var(--t-corto) var(--curva)}
.ctalla-medidas .med[aria-pressed="true"] .punto{background:var(--oro);transform:scale(1.35)}
.ctalla-medidas .nom{flex:1 1 auto;font-size:14px;font-weight:600}
.ctalla-medidas .donde{display:block;font-size:11.5px;font-weight:500;color:var(--mudo);margin-top:2px}
.ctalla-medidas .cifra{font-size:19px;font-weight:700;letter-spacing:-.02em;flex:0 0 auto;
  font-variant-numeric:tabular-nums}
.ctalla-medidas .cifra em{font-style:normal;font-size:11px;font-weight:600;color:var(--mudo);margin-left:2px}
.ctalla-medidas .cifra.cambia{animation:ctalla-repone var(--t) var(--curva)}
@keyframes ctalla-repone{0%{opacity:.25;transform:translateY(-5px)}100%{opacity:1;transform:none}}

.ctalla-pie{margin:10px 2px 0;font-size:11px;font-weight:500;color:var(--tenue);line-height:1.5}

/* ── elasticidad ──────────────────────────────────────────────── */
.ctalla-elast{display:flex;align-items:center;gap:12px;background:var(--lavado);
  border-radius:14px;padding:14px 15px;margin-top:14px}
.ctalla-elast .barras{display:flex;gap:3px;flex:0 0 auto}
.ctalla-elast .barras i{width:7px;height:22px;border-radius:3px;background:var(--pelo);
  display:block;transition:background var(--t) var(--curva)}
.ctalla-elast .barras i.on{background:var(--tinta)}
.ctalla-elast b{display:block;font-size:13px;font-weight:700}
.ctalla-elast p{margin:3px 0 0;font-size:11.5px;font-weight:500;color:var(--graf);line-height:1.45}

/* ── bloques que se abren ─────────────────────────────────────── */
.ctalla-bloque{margin-top:12px;border:1px solid var(--pelo);border-radius:15px;overflow:hidden}
#ctalla .ctalla-bloque .tapa{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:16px 15px}
.ctalla-bloque .tapa .ic{width:34px;height:34px;border-radius:10px;background:var(--lavado);
  flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.ctalla-bloque .tapa .tx{flex:1 1 auto}
.ctalla-bloque .tapa .tx b{display:block;font-size:14px;font-weight:600}
.ctalla-bloque .tapa .tx span{display:block;font-size:11.5px;font-weight:500;color:var(--mudo);margin-top:2px}
.ctalla-bloque .tapa .flecha{flex:0 0 auto;transition:transform var(--t) var(--curva)}
.ctalla-bloque.abierto .flecha{transform:rotate(180deg)}
.ctalla-bloque .fuelle{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--t) var(--curva)}
.ctalla-bloque.abierto .fuelle{grid-template-rows:1fr}
.ctalla-bloque .fuelle>div{overflow:hidden}
.ctalla-bloque .dentro{padding:0 15px 16px}

#ctalla label.campo{display:block;font-size:9px;letter-spacing:.18em;font-weight:700;color:var(--mudo)}
.ctalla-linput{display:flex;align-items:center;gap:11px;margin-top:8px}
#ctalla .ctalla-linput input{flex:1 1 auto;height:52px;border-radius:11px;border:1.5px solid var(--pelo);
  background:var(--papel);padding:0 14px;font-size:17px;font-weight:600;font-family:inherit;
  color:var(--tinta);transition:border-color var(--t-corto) linear}
.ctalla-linput input:focus{outline:0;border-color:var(--tinta)}
.ctalla-linput .cm{font-size:12px;font-weight:600;color:var(--mudo);flex:0 0 auto}
.ctalla-como{margin:10px 0 0;font-size:11.5px;font-weight:500;color:var(--mudo);line-height:1.5}

.ctalla-fallo{margin-top:13px;border-radius:13px;background:var(--lavado);padding:14px;
  display:none}
.ctalla-fallo.viva{display:block;animation:ctalla-repone var(--t) var(--curva)}
.ctalla-fallo.buena{background:var(--verde-f)}
.ctalla-fallo .grande{display:flex;align-items:baseline;gap:9px}
.ctalla-fallo .grande b{font-size:27px;font-weight:700;letter-spacing:-.02em}
/* En el bloque del cuerpo ese hueco no lleva una talla sino una frase,
   así que ahí no va en cuerpo 27. */
#ctalla-fallo2 .grande b{font-size:14px;letter-spacing:0}
.ctalla-fallo.buena .grande b{color:var(--verde)}
.ctalla-fallo .grande span{font-size:12px;font-weight:600;color:var(--graf)}
.ctalla-fallo .nota{margin:7px 0 0;font-size:11.5px;font-weight:500;color:var(--mudo);line-height:1.5}
.ctalla-filas{margin-top:12px;display:flex;flex-direction:column;gap:7px}
.ctalla-filas .fila{display:flex;align-items:center;gap:10px}
.ctalla-filas .t{width:26px;font-size:11.5px;font-weight:700;color:var(--mudo);flex:0 0 auto}
.ctalla-filas .fila.ok .t{color:var(--verde)}
.ctalla-filas .b{flex:1 1 auto;height:7px;border-radius:999px;background:var(--pelo2);overflow:hidden}
.ctalla-filas .b i{display:block;height:100%;border-radius:999px;background:var(--tenue);
  transition:width var(--t) var(--curva)}
.ctalla-filas .fila.ok .b i{background:var(--verde)}
.ctalla-filas .d{width:92px;text-align:right;font-size:11px;font-weight:600;color:var(--mudo);
  flex:0 0 auto;font-variant-numeric:tabular-nums}

.ctalla-cargando{padding:56px 0;text-align:center;font-size:12.5px;font-weight:500;color:var(--mudo)}