/* Ficha de producto v2 (ficha.php). Todo va bajo .fx para no chocar con el CSS global. */

/* overflow-x: hidden en html/body rompe position: sticky; clip recorta igual sin romperlo. */
html:has(#fx), body:has(#fx) { overflow-x: clip !important; }

.fx {
	--fxRosa: #ff3a8c; --fxRosaSuave: #fff0f6; --fxTx: #1d1d22; --fxMut: #6b6b76; --fxBd: #e6e6ec; --fxSoft: #f4f4f7; --fxOk: #0f9d58; --fxTop: 120px;
	max-width: 1600px; margin: 0 auto; padding: 0 24px 40px; color: var(--fxTx); text-align: left; font-size: 15px; line-height: 1.5;
}
.fx *, .fx *::before, .fx *::after { box-sizing: border-box; }
.fx h1, .fx h2, .fx h3, .fx p { margin: 0; padding: 0; }
.fx a { color: inherit; }
.fx button { font: inherit; }

/* Migas */
.fxMigas { font-size: 13px; color: var(--fxMut); padding: 14px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fxMigas a { text-decoration: none; } .fxMigas a:hover { text-decoration: underline; }
.fxMigaActual { color: var(--fxTx); }

/* Zona de compra */
.fxCompra { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.fxGaleria { position: sticky; top: calc(var(--fxTop) + 12px); }
.fxFoto { background: #fff; border: 1px solid var(--fxBd); border-radius: 20px; position: relative; overflow: hidden; }
/* El lienzo toma la proporción de la foto de la prenda: la posición del diseño está en % de esa foto
   (misma geometría que la ficha antigua: top = top + estampadoTop, centro x = 50% + estampadoLeft). */
.fxLienzo { position: relative; width: 100%; }
.fxPrenda { width: 100%; height: auto; display: block; }
/* Cambio de foto sin parpadeo (ficha.js cambiarLienzo): la nueva entra encima con fundido. */
/* Cambio de foto (ficha.js cambiarLienzo): la nueva carga invisible, la actual se atenúa, spinner si demora */
.fxFoto .fxLienzo.fxEntrando { position: absolute; top: 0; left: 0; right: 0; opacity: 0; pointer-events: none; }
.fxFoto .fxLienzo.fxSaliendo { opacity: .35; filter: blur(3px) saturate(.6); transition: opacity .18s ease, filter .18s ease; }
.fxFoto .fxLienzo.fxAparece:not(.fxAnim) { animation: fxAparece .32s cubic-bezier(.2,.7,.2,1) both; }
@keyframes fxAparece { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
.fxFoto.fxCargando::after {
	content: ""; position: absolute; left: 50%; top: 50%; z-index: 7;
	width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
	border: 3px solid rgba(0,0,0,.12); border-top-color: #E63973;
	animation: fxGira .7s linear infinite;
}
@keyframes fxGira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fxFoto .fxLienzo.fxAparece { animation-duration: .01s; } }
.fxMascara { position: absolute; inset: 0; -webkit-mask-size: 100%; mask-size: 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.fxDiseno { position: absolute; display: block; height: auto; opacity: .9; filter: contrast(.9) saturate(.9); }
.fxAmpliar { position: absolute; right: 14px; bottom: 14px; background: rgba(255,255,255,.92); border: 1px solid var(--fxBd); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--fxTx); }
.fxMinis { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding: 2px 2px 22px; }
.fxMini { flex: 0 0 72px; height: 72px; border-radius: 12px; border: 2px solid transparent; background: #fff; box-shadow: 0 0 0 1px var(--fxBd); padding: 3px; cursor: pointer; position: relative; overflow: visible; }
.fxMini.on { border-color: var(--fxTx); }
.fxMini { display: flex; align-items: center; justify-content: center; }
.fxMini .fxLienzo { border-radius: 9px; overflow: hidden; max-height: 100%; }
.fxMini > img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }
.fxMini .fxMiniLbl { position: absolute; bottom: -19px; left: -4px; right: -4px; font-size: 10px; color: var(--fxMut); text-align: center; white-space: nowrap; }
.fxMiniPlay { display: flex; align-items: center; justify-content: center; font-size: 22px; background: #111; color: #fff; width: 100%; height: 100%; border-radius: 9px; }

/* Panel */
.fxH1 { font-size: 28px; line-height: 1.2; font-weight: 800; color: var(--fxTx); }
.fxValoracion { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--fxMut); margin-top: 8px; text-decoration: none; }
.fxValoracion:hover { color: var(--fxTx); }
.fxEstrellas { position: relative; display: inline-block; color: #d9d9e0; letter-spacing: 1px; line-height: 1; }
.fxEstrellas::before { content: "★★★★★"; position: absolute; left: 0; top: 0; width: var(--p); overflow: hidden; color: #ffb400; white-space: nowrap; }
.fxPrecio { margin-top: 18px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fxPrecioGrande { font-size: 34px; font-weight: 800; letter-spacing: -.5px; }
.fxPrecioAntes { font-size: 17px; color: var(--fxMut); text-decoration: line-through; }
.fxPrecioFila { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
/* Oferta: bloque rosado sólido con el precio, el ahorro y el contador (como las tarjetas del catálogo) */
.fxPrecio.fxOferta { display: block; background: #E63973; color: #fff; border-radius: 16px; overflow: hidden; }
.fxOferta .fxPrecioFila { align-items: center; padding: 14px 18px; }
.fxOferta .fxPrecioGrande { color: #fff; font-weight: 900; }
.fxOferta .fxPrecioAntes { color: rgba(255,255,255,.75); }
.fxAhorro { margin-left: auto; background: #fff; color: #E63973; font-size: 13px; font-weight: 800; border-radius: 999px; padding: 5px 12px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.fxTimer { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 6px 18px; background: rgba(0,0,0,.2); font-size: 13px; font-weight: 600; }
.fxTimerCuenta { display: flex; align-items: center; gap: 7px; }
.fxTimer[hidden], .fxTimerCuenta[hidden], .fxAhorro[hidden], .fxDeal[hidden] { display: none; }
.fxTimer svg { width: 14px; height: 14px; fill: #fff; flex-shrink: 0; }
.fxTimer b { font-weight: 800; font-variant-numeric: tabular-nums; }
/* Logo de la promo + % sobre la foto */
.fxDeal { position: absolute; top: 18px; left: 18px; z-index: 6; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; pointer-events: none; }
.fxDealLogo { height: 30px; width: auto; display: block; margin-left: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.fxDealLogo[hidden] { display: none; }
.fxDealPct { background: #E63973; color: #fff; font-size: 18px; font-weight: 800; line-height: 1; padding: 7px 12px; border-radius: 999px; box-shadow: 0 4px 12px rgba(230,57,115,.35); }
@media (max-width: 900px) {
	.fxDeal { top: 12px; left: 12px; } .fxDealLogo { height: 26px; } .fxDealPct { font-size: 15px; padding: 5px 10px; }
	.fxOferta .fxPrecioFila { padding: 12px 14px; } .fxTimer { padding: 7px 14px; }
}
.fxPrecioEtq { font-size: 13px; color: var(--fxMut); }
.fxPrecio2 { font-size: 14px; color: var(--fxMut); margin-top: 2px; }
.fxPrecio2 b { color: var(--fxTx); }
.fxBloque { margin-top: 22px; }
/* "Prenda: Polera polo cuello redondo" en una línea, alineado a la izquierda. */
.fxTit { display: flex; align-items: baseline; gap: 6px; font-weight: 700; font-size: 14px; margin-bottom: 10px; flex-wrap: wrap; }
.fxTit > span { font-weight: 500; color: var(--fxMut); }
.fxLinkGuia { margin-left: 14px; font-weight: 600; font-size: 13px; } /* al ladito de "Talla", no en el otro extremo */
/* Grupos de prenda como tarjetas con ícono (más llamado a la acción). */
.fxGrupos { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px; }
/* Separador entre grupos y prendas: línea fina con rótulo al centro. */
.fxSeparador { display: flex; align-items: center; gap: 12px; margin: 16px 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fxMut); }
.fxSeparador::before, .fxSeparador::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--fxBd) 30%, var(--fxBd) 70%, transparent); }
.fxGrupo { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 14px; background: #fff; border: 1.5px solid var(--fxBd); color: var(--fxTx); cursor: pointer; text-align: left; transition: border-color .15s, transform .15s, box-shadow .15s; }
.fxGrupo:hover { border-color: var(--fxRosa); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,58,140,.12); }
.fxGrupo img { width: 26px; height: 26px; object-fit: contain; filter: brightness(0); opacity: .8; }
.fxGrupoTxt { display: flex; flex-direction: column; line-height: 1.15; }
.fxGrupoTxt b { font-size: 13px; font-weight: 700; }
.fxGrupoTxt small { font-size: 11px; color: var(--fxRosa); font-weight: 600; }
.fxGrupo.on { background: var(--fxTx); border-color: var(--fxTx); color: #fff; }
.fxGrupo.on img { filter: none; opacity: 1; }
.fxGrupo.on .fxGrupoTxt small { color: #ffb3d1; }
.fxPrendas { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.fxPrendaOp { border: 1.5px solid var(--fxBd); border-radius: 14px; padding: 8px 6px; text-align: center; text-decoration: none; font-size: 12px; line-height: 1.25; background: #fff; color: var(--fxTx) !important; }
.fxPrendaOp[hidden] { display: none; }
/* Los íconos de prenda son PNG blancos (hechos para fondo oscuro): se vuelven silueta oscura. */
.fxPrendaOp img { width: 38px; height: 38px; object-fit: contain; display: block; margin: 2px auto 6px; filter: brightness(0); opacity: .75; }
.fxPrendaOp.on { background: var(--fxRosaSuave); }
.fxPrendaOp.on img { opacity: 1; }
.fxPrendaOp:hover { border-color: #c9c9d3; }
.fxPrendaOp.on { border-color: var(--fxRosa); box-shadow: 0 0 0 3px var(--fxRosaSuave); }
.fxColores { display: flex; flex-wrap: wrap; gap: 10px; }
.fxColor { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); cursor: pointer; position: relative; padding: 0; }
.fxColor.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--fxTx); }
.fxColor.agot { opacity: .35; }
.fxColor.agot::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: #888; transform: rotate(45deg); }
.fxTallas { display: flex; flex-wrap: wrap; gap: 8px; }
.fxTalla { min-width: 52px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--fxBd); background: #fff; font-weight: 700; cursor: pointer; color: var(--fxTx); }
.fxTalla.on { border-color: var(--fxTx); background: var(--fxTx); color: #fff; }
.fxTalla.agot { color: #aaa; text-decoration: line-through; }
.fxTalla.on.agot { color: #ddd; }
.fxTallas.fxFalta .fxTalla { border-color: var(--fxRosa); animation: fxPulso .6s ease 2; }
@keyframes fxPulso { 50% { box-shadow: 0 0 0 4px var(--fxRosaSuave); } }
/* Videos adicionales (casi todos YouTube Shorts, verticales): centrados sobre negro. */
.fxVideoExtra { aspect-ratio: 1; background: #000; display: flex; justify-content: center; }
.fxVideoExtra iframe { height: 100%; aspect-ratio: 9 / 16; width: auto; border: 0; display: block; }
.fxSoloDiseno { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.fxSoloDiseno .fxPrenda { width: 70%; }
.fxAviso { font-size: 13px; color: var(--fxMut); background: var(--fxSoft); border-radius: 10px; padding: 8px 12px; margin-top: 10px; }
.fxDescripcionDiseno { font-size: 14px; color: #444; }
.fxOpciones { display: flex; flex-wrap: wrap; gap: 8px; }
.fxOpcion { padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--fxBd); background: #fff; cursor: pointer; font-size: 14px; color: var(--fxTx); display: inline-flex; align-items: center; gap: 6px; }
.fxOpcion.on { border-color: var(--fxTx); background: var(--fxTx); color: #fff; }
.fxStock { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.fxStock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.fxStock.alto { color: var(--fxOk); } .fxStock.medio { color: #c98a00; } .fxStock.bajo { color: #e06600; } .fxStock.sin { color: #d93025; }
.fxEnvio { font-size: 13px; color: var(--fxMut); margin-top: 4px; }
/* Franja de despacho express con cuenta regresiva (ficha.js pintarExpress). */
.fxExpress { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #e9f7ef; color: #0b6b3a; font-size: 14px; line-height: 1.35; }
.fxExpress[hidden] { display: none; }
.fxExpress .fxIco { width: 26px; height: 26px; flex: 0 0 auto; color: #0b6b3a; }
.fxExpress .fxIco .fxIcoAcento { stroke: #0f9d58; }
.fxExpress b { color: #0a5c32; }
.fxExpress > div { display: flex; flex-direction: column; gap: 3px; }
.fxExpressTag { align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #0f9d58; border-radius: 6px; padding: 2px 8px; }
.fxExpressReloj { font-variant-numeric: tabular-nums; }
.fxSinStock { margin-top: 10px; background: #fdecea; border-radius: 12px; padding: 12px; font-size: 13px; }
.fxAvisame { display: flex; gap: 8px; margin-top: 8px; }
.fxAvisame input { flex: 1; min-width: 0; border: 1px solid var(--fxBd); border-radius: 10px; padding: 9px 10px; font-size: 14px; }
.fxAvisame button { border: 0; border-radius: 10px; background: var(--fxTx); color: #fff; font-weight: 700; padding: 0 14px; cursor: pointer; }
.fxAccion { display: flex; gap: 10px; margin-top: 22px; }
.fxCant { display: flex; align-items: center; border: 1.5px solid var(--fxBd); border-radius: 14px; background: #fff; }
.fxCant button { width: 40px; height: 54px; border: 0; background: none; font-size: 20px; cursor: pointer; color: var(--fxTx); }
.fxCant input { width: 34px; text-align: center; border: 0; font-size: 16px; font-weight: 700; background: none; color: var(--fxTx); padding: 0; }
.fxBtnCarro { flex: 1; border: 0; border-radius: 14px; background: var(--fxRosa); color: #fff; font-size: 17px; font-weight: 800; cursor: pointer; box-shadow: 0 8px 20px rgba(255,58,140,.3); transition: transform .1s, opacity .15s; }
.fxBtnCarro:hover { transform: translateY(-1px); }
.fxBtnCarro:disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; }
.fxTituloFila { display: flex; align-items: flex-start; gap: 12px; }
.fxTituloFila .fxH1 { flex: 1; min-width: 0; }
.fxBtnFav { flex: 0 0 auto; width: 42px; height: 42px; margin-top: -2px; border: 1.5px solid var(--fxBd); border-radius: 50%; background: #fff; cursor: pointer; color: var(--fxRosa); transition: transform .15s, border-color .15s; }
.fxBtnFav:hover { border-color: var(--fxRosa); transform: scale(1.06); }
.fxAgregado { margin-top: 10px; font-size: 14px; color: var(--fxOk); font-weight: 600; }
.fxAgregado a { color: var(--fxRosa); }
/* Íconos de garantías (fichaIconos.php): línea en color de texto + detalle rosado. */
.fxIco { width: 24px; height: 24px; display: block; }
.fxIco .fxIcoAcento { stroke: var(--fxRosa); }
.fxAmpliar { display: inline-flex; align-items: center; gap: 6px; }
.fxAmpliar .fxIco { width: 16px; height: 16px; }
.fxValoracion .fxIco { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; margin-right: 2px; }
.fxAviso { display: flex; gap: 8px; align-items: flex-start; }
.fxAviso .fxIco { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.fxEnvio { display: flex; gap: 8px; align-items: center; }
.fxEnvio .fxIco { width: 18px; height: 18px; flex: 0 0 auto; }
.fxBtnFav { display: inline-flex; align-items: center; justify-content: center; }
.fxBtnFav .fxIco { width: 21px; height: 21px; }
.fxBtnFav.on .fxIco { fill: var(--fxRosa); stroke: var(--fxRosa); }
.fxAgregado { display: flex; align-items: center; gap: 6px; }
.fxAgregado .fxIco { width: 18px; height: 18px; }
.fxRevVerif { display: inline-flex; align-items: center; gap: 3px; }
.fxRevVerif .fxIco { width: 14px; height: 14px; }
.fxRevVerif .fxIco .fxIcoAcento { stroke: var(--fxOk); }
.fxIcoCirc { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--fxRosaSuave); color: var(--fxTx); flex: 0 0 auto; }
.fxIcoGrande { width: 76px; height: 76px; background: #fff; box-shadow: 0 4px 14px rgba(29,29,34,.08); }
.fxIcoGrande .fxIco { width: 34px; height: 34px; }
.fxGarantias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.fxGarantias > * { background: #fff; border: 1px solid var(--fxBd); border-radius: 14px; padding: 12px 8px; font-size: 12px; line-height: 1.3; text-align: center; color: #444; display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; }
.fxGarantias a:hover { border-color: var(--fxRosa); }
.fxValor { background: var(--fxSoft); border-radius: 24px; padding: 32px 24px; text-align: center; }
.fxValor h2 { margin-bottom: 24px; }
.fxValorGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 16px; max-width: 900px; margin: 0 auto; }
.fxValorGrid > div { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fxValorGrid b { font-size: 15px; margin-top: 6px; color: var(--fxTx); }
.fxValorGrid span:not(.fxIcoCirc) { font-size: 13px; color: var(--fxMut); max-width: 240px; }

/* Secciones de abajo */
.fxSeccion { margin-top: 56px; }
.fxSeccion h2 { font-size: 22px; font-weight: 800; margin-bottom: 14px; color: var(--fxTx); }
.fxSub { color: var(--fxMut); font-size: 14px; }
.fxResResumen { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--fxMut); margin: -4px 0 16px; }
.fxResNota { font-size: 40px; font-weight: 800; color: var(--fxTx); line-height: 1; }
.fxEstrellasG { font-size: 20px; }
/* Carrusel de fotos de clientes: sin barra de scroll, con flechas (ficha.js) y snap. */
.fxCarrusel { position: relative; margin: 12px 0 18px; }
.fxPista { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
.fxPista::-webkit-scrollbar { display: none; }
/* Difuminado en el borde por donde sigue el carrusel (clases que pone ficha.js). */
.fxCarrusel.fxFadeDer .fxPista { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 70px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 70px), transparent); }
.fxCarrusel.fxFadeIzq .fxPista { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 70px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 70px), transparent); }
.fxCarrusel.fxFadeIzq.fxFadeDer .fxPista { -webkit-mask-image: linear-gradient(to right, transparent, #000 70px, #000 calc(100% - 70px), transparent); mask-image: linear-gradient(to right, transparent, #000 70px, #000 calc(100% - 70px), transparent); }

/* Reseñas: la del producto fija a la izquierda, las generales en carrusel a la derecha. */
.fxResLayout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 8px; }
.fxResLayout.fxResDos { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.fxResTit { font-size: 15px !important; font-weight: 700; color: var(--fxTx); margin: 0 0 10px !important; }
.fxRevsCol { display: flex; flex-direction: column; gap: 12px; }
.fxRevsCol .fxRevsMas { display: flex; flex-direction: column; gap: 12px; }
.fxRevsCol .fxRevsMas[hidden] { display: none; }
/* Cada tarjeta con su propio alto (antes todas se estiraban a la más larga del carrusel). */
.fxPistaOpiniones { align-items: flex-start; padding: 2px; }
.fxPistaOpiniones .fxRevTexto { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.fxPistaOpiniones .fxRev.fxRevAbierta .fxRevTexto { -webkit-line-clamp: unset; display: block; }
.fxRevLeer { align-self: flex-start; border: 0; background: none; padding: 0; color: var(--fxRosa); font-weight: 600; font-size: 13px; cursor: pointer; }
.fxPistaOpiniones .fxRev { flex: 0 0 calc(50% - 5px); scroll-snap-align: start; }
.fxResLayout:not(.fxResDos) .fxPistaOpiniones .fxRev { flex-basis: calc(33.333% - 7px); }
.fxCarruselOpiniones { margin: 0; }
.fxCarruselOpiniones .fxCarruselBtn { top: 50%; }
.fxCarruselBtn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--fxBd); background: rgba(255,255,255,.95); color: var(--fxTx); box-shadow: 0 4px 14px rgba(0,0,0,.12); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .15s; }
.fxCarruselBtn:hover { transform: translateY(-50%) scale(1.06); }
.fxCarruselBtn[hidden] { display: none; }
.fxPrev { left: -14px; } .fxNext { right: -14px; }
@media (hover: none) { .fxCarruselBtn { display: none; } }
.fxUgcItem { flex: 0 0 160px; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #111; border: 0; padding: 0; cursor: pointer; position: relative; scroll-snap-align: start; }
.fxUgc img, .fxUgc video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fxUgcPlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 26px; text-shadow: 0 2px 8px rgba(0,0,0,.6); pointer-events: none; }
.fxRevs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fxRevsMas { display: contents; }
.fxRevsMas[hidden] { display: none; }
.fxRev { background: #fff; border: 1px solid var(--fxBd); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.fxRevCab { display: flex; justify-content: space-between; align-items: center; }
.fxRevEst { color: #ffb400; letter-spacing: 1px; } .fxRevEst span { color: #d9d9e0; }
.fxRevFecha { font-size: 12px; color: var(--fxMut); }
.fxRevTexto { font-size: 14px; color: #333; overflow-wrap: anywhere; }
.fxRevFotos { display: flex; gap: 6px; }
.fxRevFoto { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 0; padding: 0; cursor: pointer; background: #111; position: relative; }
.fxRevFoto .fxUgcPlay { font-size: 16px; }
.fxRevAutor { font-size: 12px; color: var(--fxTx); font-weight: 600; margin-top: auto; }
.fxRevVerif { color: var(--fxOk); font-weight: 500; margin-left: 4px; }
.fxRevResp { font-size: 12px; background: var(--fxSoft); border-radius: 10px; padding: 8px 10px; color: #444; }
.fxBtnMas { display: block; margin: 14px auto 0; border: 1.5px solid var(--fxBd); background: #fff; border-radius: 999px; padding: 10px 20px; font-weight: 700; cursor: pointer; color: var(--fxTx); }
.fxResTienda { font-size: 16px; font-weight: 700; margin: 26px 0 12px !important; color: var(--fxTx); }

/* Detalles del producto: pestañas verticales con ícono y subtítulo; panel grande a la derecha. */
.fxTabs { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; background: var(--fxSoft); border-radius: 24px; padding: 16px; }
.fxTabLista { display: flex; flex-direction: column; gap: 6px; }
.fxTab { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 16px; border: 1.5px solid transparent; background: transparent; color: var(--fxTx); cursor: pointer; position: relative; transition: background .15s, border-color .15s, box-shadow .15s; }
.fxTab:hover { background: rgba(255,255,255,.7); }
.fxTab:focus-visible { outline: 2px solid var(--fxRosa); outline-offset: 2px; }
.fxTab .fxIcoCirc { width: 40px; height: 40px; background: #fff; }
.fxTab .fxIco { width: 22px; height: 22px; }
.fxTabTxt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.fxTabTxt b { font-size: 14px; }
.fxTabTxt small { font-size: 12px; color: var(--fxMut); }
.fxTab.on { background: #fff; border-color: var(--fxBd); box-shadow: 0 6px 18px rgba(29,29,34,.06); }
.fxTab.on::before { content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--fxRosa); }
.fxTab.on .fxIcoCirc { background: var(--fxRosaSuave); }
.fxTabPaneles { background: #fff; border-radius: 18px; border: 1px solid var(--fxBd); padding: 26px 28px; min-height: 260px; }
.fxTabPanel[hidden] { display: none; }
.fxTabPanel { animation: fxPanelEntra .25s ease; }
@keyframes fxPanelEntra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fxTabPanel > h3 { font-size: 20px !important; font-weight: 800; margin-bottom: 10px !important; color: var(--fxTx); }
.fxTabPanel p, .fxTabPanel li { color: #444; font-size: 14.5px; line-height: 1.6; }
.fxTabPanel p + p, .fxTabPanel p + ul, .fxTabPanel ul + p { margin-top: 8px; }
.fxTabPanel ul { padding-left: 18px; margin: 8px 0 0; }
.fxTabPanel h2 { font-size: 16px; margin: 16px 0 6px; } .fxTabPanel h3 { font-size: 14px; margin: 12px 0 4px; }
.fxPasos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.fxPasos > div { background: var(--fxSoft); border-radius: 14px; padding: 14px; }
.fxPasos span { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: var(--fxRosa); color: #fff; font-weight: 800; font-size: 13px; align-items: center; justify-content: center; margin-bottom: 6px; }
.fxPasos b { display: block; font-size: 14px; margin-bottom: 4px; }
.fxPasos p { font-size: 13.5px !important; margin: 0; }
.fxPorPrenda[hidden] { display: none; }
.fxGuiaPrenda img { max-width: 260px; width: 100%; display: block; margin: 0 auto 10px; }
.fxGuiaPrenda table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fxGuiaPrenda th, .fxGuiaPrenda td { padding: 7px 6px; text-align: center; border-bottom: 1px solid var(--fxBd); }
.fxGuiaPrenda th { font-size: 11px; color: var(--fxMut); font-weight: 600; }
.fxNota { font-size: 12px !important; color: var(--fxMut) !important; margin-top: 10px !important; }
.fxNota a { color: var(--fxRosa); }
.fxVideo { margin-top: 12px; border-radius: 12px; overflow: hidden; max-width: 560px; }

.fxRel { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.fxRel a { text-decoration: none; }
.fxRelImg { display: flex; aspect-ratio: 1; border-radius: 14px; overflow: hidden; align-items: center; justify-content: center; border: 1px solid var(--fxBd); }
.fxRelImg img { width: 88%; height: 88%; object-fit: contain; transition: transform .2s; }
.fxRel a:hover .fxRelImg img { transform: scale(1.04); }
.fxRelNombre { display: block; font-size: 13px; font-weight: 600; margin-top: 6px; line-height: 1.3; }
.fxTags { display: flex; flex-wrap: wrap; gap: 8px; }
.fxTags a { font-size: 13px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--fxBd); text-decoration: none; }
.fxTags a:hover { border-color: var(--fxTx); }

/* Modal (ampliar foto / fotos de clientes), con fundido y leve zoom al abrir y cerrar */
.fxModal { position: fixed; inset: 0; background: rgba(10,8,12,.88); z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; transition: opacity .2s ease; }
.fxModal[hidden] { display: none; }
.fxModal.fxAbierto { opacity: 1; }
.fxModal .fxModalCont { transform: scale(.94); transition: transform .22s cubic-bezier(.2,.8,.2,1); }
.fxModal.fxAbierto .fxModalCont { transform: none; }
html.fxSinScroll { overflow: hidden !important; }

/* Post estilo red social para fotos de clientes */
.fxPost { display: flex; background: #fff; border-radius: 18px; overflow: hidden; max-width: min(1000px, 94vw); max-height: 88vh; box-shadow: 0 20px 60px rgba(0,0,0,.35); text-align: left; color: #1d1d22; }
.fxPostMedia { position: relative; background: #0d0d10; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-width: 0; }
.fxPostMedia img, .fxPostMedia video { display: block; max-width: 100%; max-height: 88vh; object-fit: contain; }
.fxPostNav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); color: #1d1d22; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.fxPostNav[hidden] { display: none; }
.fxPostPrev { left: 12px; } .fxPostNext { right: 12px; }
.fxPostInfo { width: 320px; flex: 0 0 320px; padding: 20px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.fxPostAutor { display: flex; align-items: center; gap: 10px; }
.fxPostAutor b { display: block; font-size: 15px; }
.fxPostAutor small { color: #6b6b76; font-size: 12px; }
.fxPostAvatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #ff3a8c, #ff9a3c); color: #fff; font-weight: 800; font-size: 17px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #ff3a8c33; }
.fxPostVerif { font-size: 12px; color: #0f9d58; font-weight: 600; }
.fxPostProd { display: block; font-size: 14px; font-weight: 700; color: #1d1d22; text-decoration: none; background: #f4f4f7; border-radius: 12px; padding: 10px 12px; }
.fxPostProd span { display: block; font-size: 12px; font-weight: 600; color: #ff3a8c; margin-top: 2px; }
a.fxPostProd:hover { background: #fff0f6; }
.fxPostEst { color: #ffb400; letter-spacing: 1px; font-size: 16px; } .fxPostEst span { color: #d9d9e0; }
.fxPostTexto { font-size: 14px; line-height: 1.5; color: #333; margin: 0; overflow-wrap: anywhere; }
.fxPostCont { margin-top: auto; font-size: 12px; color: #6b6b76; }
@media (max-width: 760px) {
	.fxPost { flex-direction: column; max-height: 92vh; overflow-y: auto; }
	.fxPostMedia img, .fxPostMedia video { max-height: 62vh; }
	.fxPostInfo { width: auto; flex: 0 0 auto; padding: 16px; }
}
.fxModalCont { max-width: min(94vw, 1000px); max-height: 90vh; display: flex; align-items: center; justify-content: center; }
/* Solo las fotos/videos sueltos (clientes) llevan fondo y bordes; dentro del lienzo el estampado
   y la etiqueta van transparentes sobre la prenda. */
.fxModalCont > img, .fxModalCont > video { max-width: 100%; max-height: 90vh; border-radius: 12px; background: #fff; }
.fxModalCont .fxLienzo { width: min(88vw, 82vh); background: #fff; border-radius: 16px; overflow: hidden; }
.fxModalCont .fxLienzo.fxEntrando { position: relative; opacity: 1; }
.fxModalCerrar { position: absolute; top: 10px; right: 16px; font-size: 36px; color: #fff; background: none; border: 0; cursor: pointer; line-height: 1; }

/* Barra fija de compra (celular) */

@media (max-width: 900px) {
	.fx { padding: 0 16px 90px; }
	.fxCompra { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.fxGaleria { position: static; }
	.fxH1 { font-size: 22px; }
	.fxPrecioGrande { font-size: 30px; }
	.fxTabs { grid-template-columns: minmax(0, 1fr); padding: 10px; border-radius: 18px; }
	.fxTabLista { flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 6px; }
	.fxTabLista::-webkit-scrollbar { display: none; }
	.fxTab { width: auto; flex: 0 0 auto; padding: 8px 12px 8px 8px; }
	.fxTab .fxIcoCirc { width: 34px; height: 34px; }
	.fxTabTxt small { display: none; }
	.fxTab.on::before { display: none; }
	.fxTabPaneles { padding: 18px; min-height: 0; }
	.fxPasos { grid-template-columns: 1fr; }
	.fxRevs { grid-template-columns: 1fr; }
	.fxResLayout.fxResDos { grid-template-columns: minmax(0, 1fr); }
	.fxPistaOpiniones .fxRev, .fxResLayout:not(.fxResDos) .fxPistaOpiniones .fxRev { flex-basis: 85%; }
	.fxRel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fxUgcItem { flex-basis: 130px; }
}
@media (max-width: 900px) {
	.fxValorGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fxIcoGrande { width: 64px; height: 64px; }
}
@media (max-width: 420px) {
	.fxGarantias { grid-template-columns: 1fr; }
	.fxGarantias > * { flex-direction: row; text-align: left; padding: 10px 12px; }
	.fxGarantias .fxIcoCirc { width: 38px; height: 38px; }
}

/* Pestaña "Técnica de estampado" */
.fxTecEtq { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fxRosa); margin-bottom: 4px; }
.fxTecnica > h3 { font-size: 22px !important; font-weight: 800; margin: 0 0 10px !important; color: var(--fxTx); }
.fxProsContras { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.fxProsContras > div { border-radius: 14px; padding: 14px 16px; }
.fxProsContras b { display: block; font-size: 13px; margin-bottom: 6px; }
.fxProsContras ul { list-style: none; padding: 0 !important; margin: 0 !important; }
.fxProsContras li { position: relative; padding-left: 22px; font-size: 13.5px !important; margin-top: 6px; }
.fxPros { background: #e9f7ef; } .fxPros b { color: #0a5c32; }
.fxPros li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #0f9d58; font-weight: 800; }
/* "Tip Gustore": en vez de listar contras, se recomienda cuándo conviene otra técnica. */
.fxTip { background: #eef4ff; }
.fxTip b { display: flex !important; align-items: center; gap: 6px; color: #1e3a8a; }
.fxTip b .fxIco { width: 18px; height: 18px; color: #1e3a8a; }
.fxTip b .fxIco .fxIcoAcento { stroke: #3b82f6; }
.fxTip p { font-size: 13.5px !important; color: #1f2d4d !important; margin: 6px 0 0 !important; line-height: 1.55 !important; }
.fxVideoCard { position: relative; display: block; width: 100%; max-width: 560px; margin-top: 18px; padding: 0; border: 0; border-radius: 16px; overflow: hidden; cursor: pointer; background: #000; aspect-ratio: 16 / 9; }
.fxVideoCard img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; transition: transform .3s, opacity .3s; }
.fxVideoCard:hover img { transform: scale(1.03); opacity: .7; }
.fxVideoPlay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; border-radius: 50%; background: var(--fxRosa); color: #fff; display: flex; align-items: center; justify-content: center; padding-left: 4px; box-shadow: 0 8px 24px rgba(255,58,140,.45); transition: transform .2s; }
.fxVideoCard:hover .fxVideoPlay { transform: translate(-50%, -50%) scale(1.08); }
.fxVideoTxt { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 12px; background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; text-align: left; display: flex; flex-direction: column; }
.fxVideoTxt b { font-size: 15px; } .fxVideoTxt small { font-size: 12px; opacity: .85; }
.fxVideoMarco { max-width: 560px; margin-top: 18px; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; background: #000; }
.fxVideoMarco iframe { width: 100%; height: 100%; border: 0; display: block; }
.fxOtrasTec { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--fxBd); }
.fxOtrasTit { display: block; font-size: 14px; margin-bottom: 10px; }
.fxOtrasGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.fxOtraTec { background: var(--fxSoft); border-radius: 14px; padding: 12px 14px; }
.fxOtraTec[hidden] { display: none; }
.fxOtraTec h4 { margin: 0 0 4px; font-size: 14px; color: var(--fxTx); }
.fxOtraTec p { font-size: 12.5px !important; line-height: 1.5 !important; margin: 0; color: var(--fxMut) !important; }

/* Pestaña "Calidad de la prenda" (superficie.descripcionPrenda) */
.fxDescPrenda h4 { margin: 0 0 6px; font-size: 16px; color: var(--fxTx); }
.fxDescPrenda .product-specs h2 { font-size: 14px !important; margin: 14px 0 6px !important; color: var(--fxTx); }
.fxDescPrenda .product-specs ul { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.fxDescPrenda .product-specs li { background: var(--fxSoft); border-radius: 10px; padding: 8px 12px; margin: 0; font-size: 13.5px; }

/* Pestaña "Fotos de productos" */
.fxFotosProd { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 12px; }
.fxFotoProd { aspect-ratio: 1; border: 0; padding: 0; border-radius: 12px; overflow: hidden; cursor: pointer; background: var(--fxSoft); }
.fxFotoProd[hidden] { display: none; }
.fxFotoProd img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.fxFotoProd:hover img { transform: scale(1.05); }

@media (max-width: 900px) {
	.fxProsContras { grid-template-columns: 1fr; }
	.fxFotosProd { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Opiniones: sin difuminado (sobre tarjetas con borde se veía como un corte lavado). */
.fxCarruselOpiniones .fxPista { -webkit-mask-image: none !important; mask-image: none !important; scroll-padding-left: 2px; }
/* Flechas de opiniones arriba a la derecha, a la altura del título: nunca tapan una tarjeta. */
.fxResGenerales { position: relative; }
.fxResGenerales .fxResTit { padding-right: 96px; }
.fxCarruselOpiniones .fxCarruselBtn { top: -46px; transform: none; width: 36px; height: 36px; box-shadow: none; }
.fxCarruselOpiniones .fxCarruselBtn:hover { transform: none; border-color: var(--fxRosa); }
.fxCarruselOpiniones .fxPrev { left: auto; right: 44px; }
.fxCarruselOpiniones .fxNext { right: 0; }
.fxCarruselOpiniones .fxCarruselBtn[hidden] { display: flex; opacity: .35; pointer-events: none; }

/* "Compró" en las reseñas: un producto a la vez, con miniatura y flechas. */
.fxCompro { background: var(--fxSoft); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.fxComproLbl { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--fxMut); padding-left: 2px; }
.fxComproItem { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fxTx) !important; animation: fxPanelEntra .2s ease; }
.fxComproItem[hidden] { display: none; }
a.fxComproItem:hover b { color: var(--fxRosa); }
.fxComproImg { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(0,0,0,.06); }
.fxComproImg img { width: 82%; height: 82%; object-fit: contain; }
.fxComproPers .fxIco { width: 24px; height: 24px; color: rgba(0,0,0,.45); }
.fxComproTxt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.fxComproTxt b { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fxComproTxt small { font-size: 11.5px; color: var(--fxMut); }
.fxComproNav { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 11px; color: var(--fxMut); }
.fxComproBtn { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--fxBd); background: #fff; cursor: pointer; font-size: 15px; line-height: 1; color: var(--fxTx); display: inline-flex; align-items: center; justify-content: center; padding: 0 0 2px; }
.fxComproBtn:hover { border-color: var(--fxRosa); color: var(--fxRosa); }

/* Guía de tallas: botón junto a "Talla" y ventana emergente */
.fxLinkGuia { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; color: var(--fxTx) !important; }
.fxLinkGuia .fxIco { width: 18px; height: 18px; }
.fxGuiaModal { position: relative; background: #fff; color: #1d1d22; border-radius: 18px; padding: 24px; width: min(560px, 92vw); max-height: 86vh; overflow-y: auto; text-align: left; }
.fxGuiaModal h3 { margin: 0; font-size: 20px; font-weight: 800; }
.fxGuiaSub { margin: 2px 0 14px; color: #6b6b76; font-size: 13px; }
.fxGuiaModal .fxGuiaPrenda img { max-width: 240px; width: 100%; display: block; margin: 0 auto 12px; }
.fxGuiaModal table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fxGuiaModal th, .fxGuiaModal td { padding: 8px 6px; text-align: center; border-bottom: 1px solid #e6e6ec; }
.fxGuiaModal th { font-size: 11px; color: #6b6b76; font-weight: 600; }
.fxGuiaModal .fxNota { font-size: 12px; color: #6b6b76; margin-top: 10px; }
.fxGuiaModal .fxNota a { color: #ff3a8c; }
.fxGuiaCerrar { position: absolute; top: 8px; right: 12px; color: #6b6b76 !important; font-size: 28px; }

/* Compartir */
.fxCompartir { display: flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 13px; color: var(--fxMut); flex-wrap: wrap; }
.fxCompartir > span { margin-right: 4px; }
.fxCompartir a { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--fxTx) !important; transition: background .15s, color .15s; }
.fxCompartir a:hover { background: var(--fxRosaSuave); color: var(--fxRosa) !important; }
.fxCompartir svg { width: 18px; height: 18px; }

/* Fichas de atributos y garantías (ícono + título + subtítulo), en grilla de dos columnas. */
.fxGarantias { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin-top: 18px; }
.fxGarantias > .fxFicha { display: flex !important; flex-direction: row !important; align-items: center; gap: 12px; text-align: left !important; background: #fff; border: 1px solid var(--fxBd); border-radius: 14px; padding: 12px 14px !important; text-decoration: none; color: var(--fxTx) !important; }
.fxFicha[hidden] { display: none !important; }
.fxFicha > .fxIco { width: 26px; height: 26px; flex: 0 0 auto; }
.fxFicha > span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.fxFicha b { font-size: 13.5px; font-weight: 700; }
.fxFicha small { font-size: 12px; color: var(--fxMut); }
a.fxFicha:hover { border-color: var(--fxRosa); }
@media (max-width: 420px) { .fxGarantias { grid-template-columns: minmax(0, 1fr) !important; } }

/* Opiniones: todas del mismo alto. Texto a 4 líneas ("Leer más" abre ventana), "Compró" de alto fijo
   y pegado abajo junto al autor. */
.fxResenas .fxRev { height: 360px; overflow: hidden; }
.fxResenas .fxRevTexto { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; flex: 0 0 auto; }
.fxResenas .fxRevFotos { flex: 0 0 auto; }
.fxResenas .fxCompro { margin-top: auto; flex: 0 0 auto; }
.fxResenas .fxRevAutor { margin-top: 0; flex: 0 0 auto; }
.fxComproTxt b { -webkit-line-clamp: 1 !important; white-space: nowrap; display: block !important; }
.fxComproNavVacio { visibility: hidden; }
.fxComproPers { background: #eceef2 !important; }
.fxComproPers .fxIco { color: #6b6b76 !important; }
.fxRevModal { width: min(520px, 92vw); max-height: 86vh; overflow-y: auto; border-radius: 16px; }
.fxRevModal .fxRev { height: auto !important; overflow: visible !important; }
.fxRevModal .fxRevTexto { -webkit-line-clamp: unset !important; display: block !important; }
@media (max-width: 900px) { .fxResenas .fxRev { height: 380px; } }
.fxResenas .fxRev .fxRevResp { display: none; }
.fxRevModal .fxRevResp { display: block !important; }

/* "Puede que también te guste": diseños puestos en la prenda que se está viendo, en carrusel. */
.fxCarruselRel .fxRel { display: flex !important; grid-template-columns: none !important; gap: 14px; }
.fxRelCard { flex: 0 0 calc(20% - 12px); scroll-snap-align: start; text-decoration: none; color: var(--fxTx) !important; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--fxBd); border-radius: 18px; overflow: hidden; transition: box-shadow .2s, border-color .2s, transform .2s; }
.fxRelCard:hover { border-color: var(--fxRosa); box-shadow: 0 8px 22px rgba(29,29,34,.08); transform: translateY(-2px); }
.fxRelMock { position: relative; display: block; background: #f7f7f9; overflow: hidden; }
.fxRelPrenda { width: 100%; height: auto; display: block; }
.fxRelDiseno { position: absolute; height: auto; opacity: .92; filter: contrast(.9) saturate(.9); }
.fxRelCard .fxRelNombre { display: block; padding: 10px 12px 12px; font-size: 13px; font-weight: 600; line-height: 1.3; text-align: center; }
@media (max-width: 900px) { .fxRelCard { flex-basis: 46%; } }
.fxCarruselRel .fxPista { -webkit-mask-image: none !important; mask-image: none !important; padding: 2px 2px 6px; }

/* Despacho express en amarillo y opciones de envío más separadas. */
.fxExpress { background: #fff6d1 !important; color: #5c4300 !important; margin: 12px 0 14px !important; border: 1px solid #f7e39a; }
.fxExpress b { color: #4a3600 !important; }
.fxExpress .fxIco { color: #8a6500 !important; }
.fxExpress .fxIco .fxIcoAcento { stroke: #e0a800 !important; }
.fxExpressTag { background: #ffc61a !important; color: #3d2c00 !important; }
.fxStockBloque .fxEnvio { margin-top: 10px; }
.fxStockBloque .fxEnvio + .fxEnvio { margin-top: 8px; }

/* Mensajes por prenda: aviso importante junto a las tallas y nota chica bajo la foto. */
.fxAvisoPrenda { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: #eef4ff; border: 1px solid #d6e2fb; color: #1f2d4d; font-size: 13.5px; line-height: 1.5; }
.fxAvisoPrenda[hidden] { display: none; }
.fxAvisoPrenda .fxIco { width: 20px; height: 20px; flex: 0 0 auto; color: #1e3a8a; margin-top: 1px; }
.fxAvisoPrenda .fxIco .fxIcoAcento { stroke: #3b82f6; }
.fxNotaFoto { margin: -10px 4px 0; font-size: 11.5px; line-height: 1.4; color: var(--fxMut); }
.fxNotaFoto[hidden] { display: none; }

/* Stock pegado a las tallas. */
.fxTallas + .fxStock { display: inline-flex; margin-top: 10px; }
.fxStockBloque .fxExpress { margin-top: 0 !important; }

/* Nombre del cliente y "Compra verificada" alineados al centro en la misma fila. */
.fxRevAutor { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; line-height: 1.3; }
.fxRevAutor .fxRevVerif { margin-left: 0; line-height: 1; }
.fxRevAutor .fxRevVerif .fxIco { display: block; }
/* Variante obligatoria sin elegir al intentar agregar al carro. */
.fxVariante.fxFalta .fxOpcion { border-color: var(--fxRosa); animation: fxPulso .6s ease 2; }
/* Cabecera de reseñas: nota del diseño + tarjeta de Google. */
.fxResCabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-bottom: 18px; }
.fxResCabecera .fxResResumen { margin: 0; }
.fxGoogle { display: flex; align-items: center; gap: 12px; text-decoration: none; background: #fff; border: 1px solid #e6e8eb; border-radius: 16px; padding: 10px 16px; box-shadow: 0 4px 18px rgba(0,0,0,.07); transition: box-shadow .18s, transform .18s, border-color .18s; color: #202124; }
.fxGoogle:hover, .fxGoogle:focus { box-shadow: 0 10px 26px rgba(66,133,244,.18); transform: translateY(-2px); border-color: #d2e3fc; color: #202124; text-decoration: none; }
.fxGoogle > svg { flex: 0 0 auto; }
.fxGoogleInfo { display: flex; flex-direction: column; gap: 2px; }
.fxGoogleTop { display: flex; align-items: center; gap: 8px; }
.fxGoogleNota { font-size: 22px; font-weight: 900; line-height: 1; color: #202124; }
.fxGoogleTxt { font-size: 12px; font-weight: 600; color: #5f6368; }
.fxGoogleCta { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; font-size: 13px; font-weight: 800; color: #1a73e8; white-space: nowrap; }
@media (max-width: 600px) { .fxGoogle { width: 100%; } .fxGoogleCta { margin-left: auto; } }
/* Google a la derecha de la cabecera (sobre las opiniones de la tienda), sin sombra flotante. */
.fxResCabecera { justify-content: space-between; }
.fxResCabecera .fxGoogle { margin-left: auto; box-shadow: none; border-color: #ececf1; background: #fafafc; padding: 8px 14px; }
.fxResCabecera .fxGoogle:hover { background: #fff; box-shadow: 0 6px 18px rgba(66,133,244,.14); }
@media (max-width: 600px) { .fxResCabecera .fxGoogle { margin-left: 0; } }
/* Color que no viene en la talla elegida: visible pero apagado; al elegirlo se suelta la talla. */
.fxColor.noTalla { opacity: .3; filter: saturate(.6); }
.fxColor.noTalla:hover { opacity: .6; }

/* ===== Foto: encuadre al contenido + horneado + animación de vidrio (igual que el catálogo) =====
   #fxFoto lleva --fx-w/l/t (encuadre de la foto, MockupCatalogo::encuadre), --fx-a (alto/ancho) y
   --fx-r (alto/ancho de la foto). Lo pinta ficha.php y lo actualiza ficha.js (encuadrar). */
.fxFoto.fxConEnc { aspect-ratio: 1 / var(--fx-a, 1); background: #f4f4f5; width: min(100%, calc((100vh - 150px) / var(--fx-a, 1))); margin: 0 auto; } /* no más alta que la pantalla */
.fxFoto.fxConEnc > .fxLienzo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.fxFoto.fxConEnc > .fxLienzo.fxEnc { left: var(--fx-l); top: var(--fx-t); width: var(--fx-w); height: auto; }
.fxFoto.fxConEnc > .fxLienzo.fxEntrando { background: transparent; }
/* Vistas que no son la prenda (diseño solo, etiqueta, fotos extra, video): enteras sobre blanco */
.fxFoto.fxConEnc > .fxLienzo:not(.fxEnc):not(.fxMk) { display: flex; align-items: center; justify-content: center; background: #fff; }
.fxFoto.fxConEnc > .fxLienzo:not(.fxEnc):not(.fxMk) > img.fxPrenda { width: 100%; height: 100%; object-fit: contain; }
.fxFoto.fxConEnc > .fxLienzo.fxSoloDiseno > img.fxPrenda { width: 70%; height: auto; }
.fxFoto.fxConEnc > .fxLienzo.fxVideoExtra iframe { width: 100%; height: 100%; }
/* Horneada: una sola imagen ya encuadrada */
.fxMkImg { display: block; width: 100%; height: 100%; object-fit: cover; }
.fxFoto .fxMk .fxMkImg { position: absolute; inset: 0; }
/* Reflejo del vidrio, en la caja de la foto (horneada) o dentro del lienzo (composición) */
.fxReflCaja { position: absolute; left: var(--fx-l, 0); top: var(--fx-t, 0); width: var(--fx-w, 100%); aspect-ratio: 1 / var(--fx-r, 1); overflow: hidden; pointer-events: none; z-index: 2; }
.fxRefl { position: absolute; inset: 0; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; pointer-events: none; z-index: 2; }
.fxRefl > div { position: absolute; opacity: .2; background-size: 180% 100%; animation: fxEspejo 15s ease-in-out 0s infinite both; }
.fxFoto.fxConAnim { perspective: 1200px; }
.fxFoto .fxAnim { transform-style: preserve-3d; animation: fxVista3D 15s ease-in-out 0s infinite both; transform-origin: center; }
@keyframes fxVista3D { 0% { transform: rotateY(0); } 25% { transform: rotateY(10deg); } 75% { transform: rotateY(-10deg); } 100% { transform: rotateY(0); } }
@keyframes fxEspejo { 0% { background-position: 50% 0; } 25% { background-position: 100% 0; } 75% { background-position: 0 0; } 100% { background-position: 50% 0; } }
/* Miniaturas y modal "Ampliar": la horneada entera, sin reflejo ni animación */
.fxMini .fxMk { position: relative; width: 100%; height: 100%; }
.fxMini .fxRefl, .fxMini .fxReflCaja, .fxModalCont .fxRefl, .fxModalCont .fxReflCaja { display: none; }
.fxModalCont .fxMk .fxMkImg { height: auto; }
/* La galería mide lo que mide la foto (alto de pantalla / proporción) y se pega al panel de compra:
   el espacio que sobra queda hacia el borde, no entre la foto y el panel */
.fxGaleria.fxGalEnc { justify-self: end; width: min(100%, calc((100vh - 150px) / var(--fx-a, 1))); }
.fxGaleria.fxGalEnc .fxFoto.fxConEnc { width: 100%; }
@media (max-width: 760px) { .fxGaleria.fxGalEnc { justify-self: stretch; width: 100%; } }
/* Talla: "Guía de tallas" y "Cambio de talla gratis" como píldoras juntas */
.fxTit > .fxTallaPills { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin-left: 14px; font-weight: 600; color: var(--fxTx); }
/* Links de texto (no píldoras: con borde competían con los botones de talla) */
.fxPill { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; border-radius: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--fxTx); cursor: pointer; line-height: 1.3; }
.fxPill .fxIco { width: 16px; height: 16px; }
.fxPill.fxLinkGuia { margin-left: 0; padding: 0; border: 0; text-decoration: underline; text-underline-offset: 3px; }
.fxPill:hover { color: #000; }
.fxPillOk { color: var(--fxTx) !important; } /* el acento amarillo va en el ícono */
.fxPillOk .fxIco { width: 18px; height: 18px; background: #facc15; border-radius: 50%; padding: 2px; stroke: #422006; }
.fxPillOk .fxIco circle { display: none; }
.fxPillOk .fxIco .fxIcoAcento { stroke: #422006; stroke-width: 2.4; }
.fxPillOk:hover { color: #000 !important; }
/* Garantía de cambio de talla (guía de tallas y su ventana): amarillo, como el aviso de despacho express */
.fxGarantiaTalla { display: flex; gap: 12px; align-items: flex-start; background: #fefce8; border: 1px solid #fde68a; border-radius: 14px; padding: 12px 14px; margin: 10px 0 14px; font-size: 13.5px; line-height: 1.45; color: #713f12; text-align: left; }
.fxGarantiaTalla .fxIco { width: 22px; height: 22px; flex-shrink: 0; color: #ca8a04; stroke: #ca8a04; }
.fxGarantiaTalla b { color: #713f12; }
/* [hidden] tiene que ganarle a los display de arriba: "Agregado al carro" se veía siempre, y la
   píldora de guía en prendas sin guía */
.fxAgregado[hidden], .fxPill[hidden], .fxGarantiaTalla[hidden] { display: none; }
.fxGarantiaTalla b { display: block; font-size: 14.5px; margin-bottom: 3px; }
.fxGarantiaDet { display: block; font-size: 13px; opacity: .85; }
/* Escritorio: foto (del ancho que permite el alto de pantalla) + panel, centrados como un bloque, y las
   migas alineadas con el inicio de la foto. Antes la foto se pegaba al panel dentro de una columna ancha
   y las migas quedaban sueltas en el borde izquierdo. */
@media (min-width: 761px) {
	/* Todo el contenido de la ficha (también "Puede que también te guste", reseñas...) con el ancho del bloque */
	.fx.fxGalEnc { --fx-galw: min(calc((100vh - 150px) / var(--fx-a, 1.25)), 58vw, 900px); max-width: calc(var(--fx-galw) + 40px + 700px + 48px); }
	.fx.fxGalEnc .fxCompra { grid-template-columns: var(--fx-galw) minmax(0, 700px); justify-content: center; }
	.fx.fxGalEnc .fxGaleria.fxGalEnc { justify-self: stretch; width: auto; }
	.fx.fxGalEnc > .fxMigas { width: calc(var(--fx-galw) + 40px + 700px); max-width: 100%; margin-left: auto; margin-right: auto; }
}