/* La web fitm.app. Sale de la maqueta aprobada el 2026-10-02 (maquetas/portada-catalogo, ver
   docs/decisiones/web.md): todo sobre el mismo blanco, Unbounded para títulos y cifras, Instrument
   Sans para el resto. */
:root {
  --page: #FFFFFF; --text: #121211; --muted: #6B6B68; --peana: #F1F1EF; --borde: #E2E2DE;
  --verde: #1E9E57; --rojo: #FF3B30;
  --display: 'Unbounded', system-ui, sans-serif; --cuerpo: 'Instrument Sans', system-ui, sans-serif;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { background: var(--page); color: var(--text); font-family: var(--cuerpo); }
body { margin: 0; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
[hidden] { display: none !important; }
button, input { font: inherit; color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.sitio { container: sitio / inline-size; background: var(--page); }
.envol { max-width: 1040px; margin: 0 auto; padding-inline: 32px; }
@container sitio (max-width: 640px) { .envol { padding-inline: 20px; } }
.nav { display: flex; align-items: center; height: 56px; gap: 28px; padding-inline: 32px; background: rgba(255,255,255,.86); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); z-index: 10; }
.logo { font-family: var(--display); font-weight: 800; font-size: 21px; letter-spacing: -0.045em; margin-right: auto; }
.logo span { font-weight: 600; }
.nav a { color: var(--text); text-decoration: none; font-size: 14px; font-weight: 500; }
.nav .boton { padding: 7px 16px; font-size: 13.5px; }
@container sitio (max-width: 640px) { .nav .solo-pc { display: none; } }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 99px; background: var(--text); color: var(--page) !important; font-weight: 700; padding: 12px 22px; font-size: 15px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.boton.claro { background: var(--page); color: var(--text) !important; box-shadow: inset 0 0 0 1.5px var(--borde); }
.enlace { color: var(--text); font-weight: 700; text-decoration: none; font-size: 15px; white-space: nowrap; }
.enlace::after { content: ' →'; }

/* la vitrina (igual que la aprobada) */
.esc { position: relative; width: 100%; overflow: hidden; container-type: inline-size; background: var(--page); }
.esc[data-f="pc"] { aspect-ratio: 16 / 9; }
/* La vitrina cabe entera en la ventana (2026-10-25, el usuario: al recargar no se veía todo el
   movimiento): si la ventana es baja, la escena se achica y se centra. */
.esc[data-f="pc"] { width: min(100%, calc((100svh - 56px) * 16 / 9)); margin-inline: auto; }
.esc[data-f="movil"] { width: min(100%, calc((100svh - 56px) * 9 / 16)); margin-inline: auto; }
.esc[data-f="movil"] { aspect-ratio: 9 / 16; }
.esc > * { position: absolute; }
.titulo { left: 0; right: 0; text-align: center; font-family: var(--display); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; margin: 0; text-wrap: balance; }
.buscador { display: flex; align-items: center; background: var(--page); border: 1.5px solid var(--text); border-radius: 99px; color: var(--muted); translate: -50% 0; left: 50%; z-index: 7; cursor: text; }
.buscador svg { flex: none; }
.buscador input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); padding: 0; }
.buscador input::placeholder { color: var(--muted); opacity: 1; }
.buscador .foto { color: var(--text); }
.resultados { z-index: 8; translate: -50% 0; left: 50%; background: var(--page); border-radius: 18px; box-shadow: 0 0 0 1px var(--borde), 0 24px 50px -18px rgba(0,0,0,.25); padding: 6px; display: none; }
.resultados.abierto { display: block; }
.res { display: flex; align-items: center; gap: .8em; padding: .45em .6em; border-radius: 12px; }
.res:first-child { background: #F6F6F4; }
.res .hueco { width: 2.6em; border-radius: .5em; }
.res b { display: block; font-weight: 600; }
.res small { color: var(--muted); }
.res .cifra { margin-left: auto; text-align: right; color: var(--muted); font-size: .85em; }
.res .cifra b { font-family: var(--display); font-weight: 700; color: var(--text); }
.linea { display: flex; align-items: center; justify-content: space-between; }
.yo { display: flex; align-items: center; font-weight: 700; }
.ava { border-radius: 50%; background: var(--text); color: var(--page); display: grid; place-items: center; font-family: var(--display); font-weight: 800; flex: none; }
.cuentas { display: flex; color: var(--muted); font-weight: 700; letter-spacing: .03em; }
.cuentas span { display: flex; }
.cuentas .elegida { color: var(--text); }
.late { animation: late .3s ease; }
@keyframes late { 50% { transform: scale(1.22); } }
.peana { background: var(--peana); translate: -50% -50%; }
.peana i { position: absolute; top: 7%; right: 7%; width: 16%; aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--verde); scale: 0; transition: scale .25s cubic-bezier(.3,1.6,.5,1); box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.peana.llena i { scale: 1; }
.prenda { z-index: 5; transition: left .9s cubic-bezier(.6,0,.25,1), top .9s cubic-bezier(.6,0,.25,1), width .9s cubic-bezier(.6,0,.25,1), height .9s cubic-bezier(.6,0,.25,1); }
.prenda img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .35s ease; }
.prenda .lisa { opacity: 0; }
.prenda .suelo { filter: drop-shadow(0 .5cqw .7cqw rgba(0,0,0,.16)); }
.perfil .prenda .lisa { opacity: 1; transition-delay: var(--d2); }
.perfil .prenda .suelo { opacity: 0; transition-delay: var(--d2); }

/* ---------- piezas comunes de debajo ---------- */
.seccion { padding-block: 88px 0; }
.seccion:last-of-type { padding-bottom: 96px; }
@container sitio (max-width: 640px) { .seccion { padding-block: 64px 0; } }
.grande { font-family: var(--display); font-weight: 800; letter-spacing: -0.04em; line-height: 1.04; margin: 0; text-wrap: balance; font-size: 48px; }
@container sitio (max-width: 640px) { .grande { font-size: 32px; } }
.medio { font-family: var(--display); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; margin: 0; font-size: 28px; text-wrap: balance; }
@container sitio (max-width: 640px) { .medio { font-size: 23px; } }
.sub { color: var(--muted); font-size: 18px; line-height: 1.5; margin: 12px 0 0; max-width: 42ch; text-wrap: pretty; }
@container sitio (max-width: 640px) { .sub { font-size: 16.5px; } }
.cab-fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.cab-fila .sub { margin-top: 6px; font-size: 16px; }

/* el hueco gris de una prenda: la foto con posición absoluta para que una prenda alta no estire la caja */
.hueco { position: relative; aspect-ratio: 1; border-radius: 16px; background: var(--peana); flex: none; }
.hueco > img { position: absolute; inset: 12%; width: 76%; height: 76%; object-fit: contain; transition: transform .5s cubic-bezier(.3,1.3,.5,1); }

/* carta del catálogo, con los dos botones de marcar */
.carta { min-width: 0; }
.carta .hueco { margin-bottom: 10px; }
.carta:hover .hueco > img { transform: scale(1.05) translateY(-2%); }
.carta b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.carta small { color: var(--muted); font-size: 12.5px; }
.carta small em { font-style: normal; font-family: var(--display); font-weight: 700; color: var(--text); display: inline-block; }
.marcar { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 6px; }
.marcar button { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--page); box-shadow: 0 1px 2px rgba(0,0,0,.08), inset 0 0 0 1px var(--borde); display: grid; place-items: center; cursor: pointer; color: var(--text); transition: transform .2s; }
.marcar button:active { transform: scale(.88); }
.marcar button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.marcar .m-t[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--verde); color: var(--verde); }
.marcar .m-q[aria-pressed="true"] { color: var(--rojo); }
.marcar .m-q[aria-pressed="true"] path { fill: currentColor; }
.aviso-app { height: 0; overflow: hidden; color: var(--muted); font-size: 14px; transition: height .3s ease, margin .3s ease; }
.aviso-app.visible { height: 22px; margin-top: 18px; }
.aviso-app a { color: var(--text); font-weight: 700; }

.fila-cartas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
@container sitio (max-width: 640px) { .fila-cartas { display: flex; overflow-x: auto; scrollbar-width: none; margin-inline: -20px; padding-inline: 20px; gap: 12px; } .fila-cartas .carta { flex: 0 0 42%; } }

/* lista en vivo */
.vivo { list-style: none; margin: 0; padding: 0; }
.vivo li { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--borde); overflow: hidden; transition: height .5s ease, opacity .5s ease; height: 77px; }
.vivo li.entra { height: 0; opacity: 0; }
.vivo .hueco { width: 56px; border-radius: 12px; }
.vivo b { display: block; font-size: 15px; font-weight: 600; }
.vivo small { color: var(--muted); font-size: 13px; }
.vivo .cuando { margin-left: auto; color: var(--muted); font-size: 13px; white-space: nowrap; }
.vivo .cuando.ahora { color: var(--text); font-weight: 700; }
.punto { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--verde); margin-right: 8px; vertical-align: 2px; animation: punto 1.6s ease-in-out infinite; }
@keyframes punto { 50% { opacity: .25; } }

/* fits y diario pequeños */
.flatlay { position: relative; aspect-ratio: 1; border-radius: 22px; background: #F8F8F8; overflow: hidden; }
.flatlay img { position: absolute; object-fit: contain; opacity: 0; translate: 0 8px; transition: opacity .5s ease, translate .5s ease; }
.activa .flatlay img, .flatlay.activa img { opacity: 1; translate: 0 0; }
.semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.dia { text-align: center; }
.dia small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.dia b { display: block; font-family: var(--display); font-weight: 700; font-size: 14px; margin: 2px 0 6px; }
.dia .hueco { aspect-ratio: 3 / 4; border-radius: 10px; }
.dia.hoy .hueco { box-shadow: inset 0 0 0 1.5px var(--text); }
.dia.vacio .hueco { background: none; box-shadow: inset 0 0 0 1.5px var(--borde); }

.avisame { text-align: center; }
.form { display: flex; gap: 8px; justify-content: center; margin-top: 26px; }
.form input { width: min(300px, 100%); min-width: 0; border: 1.5px solid var(--borde); border-radius: 99px; padding: 12px 20px; font-size: 15px; background: var(--page); outline: 0; }
.form input:focus { border-color: var(--text); }
.nota { color: var(--muted); font-size: 13px; margin-top: 14px; }
.pie { border-top: 1px solid var(--borde); padding-block: 28px 36px; font-size: 13px; color: var(--muted); }
.pie .envol { display: flex; gap: 10px 22px; flex-wrap: wrap; align-items: center; }
.pie .logo { font-size: 16px; color: var(--text); margin-right: auto; }
.pie a { color: var(--muted); text-decoration: none; }

/* ---------- 1: escaparate ---------- */
.dos-tarjetas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
@container sitio (max-width: 640px) { .dos-tarjetas { grid-template-columns: 1fr; } }
.tarjeta { border: 1px solid var(--borde); border-radius: 26px; padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.tarjeta .flatlay { aspect-ratio: 4 / 3; }
.tarjeta p { margin: 6px 0 0; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.tarjeta .semana { margin-block: auto; }

/* ---------- 2: capítulos ---------- */
.capitulos { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; }
@container sitio (max-width: 640px) { .capitulos { grid-template-columns: 1fr; gap: 0; } }
.cap { min-height: max(440px, calc(100vh - 160px)); display: flex; flex-direction: column; justify-content: center; opacity: .22; transition: opacity .15s linear; }
.cap .medio { font-size: 40px; }
@container sitio (max-width: 640px) { .cap { min-height: 0; opacity: 1 !important; padding-block: 28px; } .cap .medio { font-size: 26px; } }
.cap .tel { display: none; }
@container sitio (max-width: 640px) { .cap .tel { display: block; width: 220px; margin-top: 24px; } .lado-tel { display: none; } }
/* El iPhone de al lado cabe siempre entero y centrado en la ventana: como.js pone --k (su escala)
   según el alto de la ventana. */
.lado-tel { position: sticky; top: calc((100vh - 555px * var(--k, 1)) / 2 + 32px); height: calc(560px * var(--k, 1)); align-self: start; }
.lado-tel .tel { transform: scale(var(--k, 1)); transform-origin: top center; }
.tel { position: relative; width: 270px; max-width: 100%; margin: 0 auto; aspect-ratio: 9 / 18.5; border-radius: 40px; border: 9px solid #121211; background: var(--page); overflow: hidden; box-shadow: 0 30px 60px -24px rgba(0,0,0,.3); }
.pantalla { position: absolute; inset: 0; padding: 34px 14px 14px; display: flex; flex-direction: column; gap: 10px; opacity: 0; transition: opacity .18s ease, translate 0s .2s; }
/* La que se va desaparece rápido; la nueva entra después, subiendo un poco: nunca dos encimadas. */
.lado-tel .pantalla { translate: 0 10px; }
.lado-tel .pantalla.activa { translate: 0 0; transition: opacity .4s ease .16s, translate .5s cubic-bezier(.2,.7,.2,1) .16s; }
.pantalla.activa, .cap .pantalla { opacity: 1; }
.cap .tel { position: relative; }
.pantalla h5 { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -0.02em; margin: 0; }
.pantalla small { color: var(--muted); font-size: 11.5px; }
.p-busc { display: flex; align-items: center; gap: 6px; border: 1.5px solid var(--text); border-radius: 99px; padding: 7px 11px; font-size: 12px; }
.p-busc .cursor { width: 1.5px; height: 13px; background: var(--text); animation: punto 1s steps(1) infinite; }
.p-fila { display: flex; align-items: center; gap: 9px; font-size: 12px; opacity: 0; translate: 0 6px; transition: opacity .35s ease, translate .35s ease; }
.escrito .p-fila { opacity: 1; translate: 0 0; }
.p-fila .hueco { width: 40px; border-radius: 9px; }
.p-fila b { display: block; font-weight: 600; }
.visor { flex: 1; border-radius: 18px; background: #F8F8F8; position: relative; overflow: hidden; }
.visor img { position: absolute; inset: 14% 14% 26%; width: 72%; height: 60%; object-fit: contain; }
.visor .esquinas { position: absolute; inset: 10% 10% 22%; border: 2px solid var(--text); border-radius: 14px; clip-path: polygon(0 0,22% 0,22% 3px,78% 3px,78% 0,100% 0,100% 22%,calc(100% - 3px) 22%,calc(100% - 3px) 78%,100% 78%,100% 100%,78% 100%,78% calc(100% - 3px),22% calc(100% - 3px),22% 100%,0 100%,0 78%,3px 78%,3px 22%,0 22%); }
.visor .hoja { position: absolute; left: 8px; right: 8px; bottom: 8px; background: var(--page); box-shadow: 0 6px 18px rgba(0,0,0,.1); border-radius: 14px; padding: 10px 12px; font-size: 12px; translate: 0 120%; transition: translate .5s cubic-bezier(.3,1.2,.5,1) .5s; }
.activa .visor .hoja, .cap.activa .visor .hoja { translate: 0 0; }
.visor .hoja b { display: block; font-size: 12.5px; }
.ficha-foto { aspect-ratio: 1; border-radius: 14px; background: #F8F8F8; position: relative; }
.ficha-foto img { position: absolute; inset: 12%; width: 76%; height: 76%; object-fit: contain; }
.p-botones { display: flex; gap: 6px; }
.p-botones span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; border-radius: 99px; padding: 8px 4px; font-size: 11.5px; font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--borde); transition: box-shadow .3s ease .6s; }
.p-botones span { transition: box-shadow .25s ease, transform .25s ease; }
.p-botones span.on { box-shadow: inset 0 0 0 1.5px var(--text); animation: toque .32s ease; }
.p-botones .t.on svg { color: var(--verde); }
.p-botones .q.on svg { color: var(--rojo); }
.p-botones .q.on path { fill: currentColor; }
.pantalla .flatlay { aspect-ratio: 1; }
.seg { display: inline-flex; gap: 3px; background: var(--peana); border-radius: 99px; padding: 4px; }
.seg button { border: 0; background: none; padding: 8px 18px; border-radius: 99px; font-size: 14.5px; font-weight: 700; color: var(--muted); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--page); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; transition: opacity .25s ease; }
.rejilla.cambia { opacity: 0; }
@container sitio (max-width: 640px) { .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } }

/* ---------- 3: catálogo con historia ---------- */
/* la cinta de Recién añadidas */
.marquesina { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.pista { display: flex; width: max-content; animation: cinta 60s linear infinite; }
.marquesina:hover .pista { animation-play-state: paused; }
@keyframes cinta { to { transform: translateX(-50%); } }
.tramo { display: flex; }
.recien { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; white-space: nowrap; font-size: 14px; }
.recien img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,.12)); }
.recien b { font-weight: 600; }
.recien small { color: var(--muted); font-size: 12.5px; }
.recien.rotulo { font-weight: 700; }
.heroe { overflow: hidden; transition: height .9s cubic-bezier(.6,0,.25,1); }
.marca-linea { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.pill-mini { border: 0; background: var(--page); cursor: pointer; font-family: inherit; transition: box-shadow .2s ease; display: inline-flex; align-items: center; gap: 5px; border-radius: 99px; padding: 5px 11px; font-size: 13px; font-weight: 700; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--borde); flex: none; }
.pill-mini.t svg { color: var(--verde); }
.pill-mini:hover { box-shadow: inset 0 0 0 1.5px var(--muted); }
.pill-mini[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--text); }
.pill-mini.q[aria-pressed="true"] svg { color: var(--rojo); }
.pill-mini.q[aria-pressed="true"] path { fill: currentColor; }
.marca-linea { color: var(--muted); }
.ticker { display: flex; align-items: center; justify-content: center; gap: 4px; height: 22px; overflow: hidden; font-size: 14px; color: var(--muted); }
.ticker span { display: inline-block; transition: translate .45s ease, opacity .45s ease; }
.ticker span.sale { translate: 0 -100%; opacity: 0; }
.ticker span.entra { translate: 0 100%; opacity: 0; transition: none; }
.ticker b { color: var(--text); font-weight: 600; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
@container sitio (max-width: 640px) { .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -20px; padding-inline: 20px; } }
.chips button { border: 0; border-radius: 99px; padding: 8px 16px; font-size: 14px; font-weight: 600; background: var(--page); box-shadow: inset 0 0 0 1px var(--borde); cursor: pointer; white-space: nowrap; }
.chips button[aria-pressed="true"] { background: var(--text); color: var(--page); box-shadow: none; }
.rejilla .carta { transition: opacity .3s ease, scale .3s ease; }
.rejilla .carta.fuera { opacity: 0; scale: .96; }
/* Las dos tarjetas ocupan dos columnas y miden lo mismo que una prenda: dos columnas iguales con el
   hueco de la rejilla, la imagen cuadrada como la foto de una prenda y nada que empuje la fila. */
.historia { grid-column: span 2; align-self: start; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; }
@container sitio (max-width: 640px) { .historia { grid-template-columns: 1fr; padding: 20px; } }
.historia h3 { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -0.03em; line-height: 1.1; margin: 0; }
.historia p { margin: 8px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.historia .grande-marcar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.historia .pill { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 99px; padding: 9px 14px; font-size: 13.5px; font-weight: 700; background: var(--page); box-shadow: inset 0 0 0 1.5px var(--borde); cursor: pointer; }
.historia .pill[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--text); }
.historia .pill.t svg { color: var(--borde); }
.historia .pill.t[aria-pressed="true"] svg { color: var(--verde); }
.historia .pill.q[aria-pressed="true"] svg { color: var(--rojo); }
.historia .pill.q[aria-pressed="true"] path { fill: currentColor; }
.oculta { display: none !important; }
.mas { display: flex; justify-content: center; margin-top: 36px; }
.franja { border-top: 1px solid var(--borde); padding-top: 56px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.franja .form { margin: 0; }

/* ---------- lo refinado ---------- */
/* «¿La tienes o la quieres?»: sin descripción, la respuesta son los botones */
.pregunta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pregunta h3 { font-size: 26px; }
.pregunta .grande-marcar { margin-top: 20px; gap: 8px; }
.pregunta .pill { padding: 9px 13px; font-size: 14px; }
.pregunta .pill.t svg { color: var(--verde); }
@container sitio (max-width: 640px) { .pregunta { grid-template-columns: 1fr; } .pregunta > .hueco { order: -1; aspect-ratio: 4 / 3; } .pregunta h3 { font-size: 21px; } .pregunta .grande-marcar { margin-top: 14px; } }
.toque { animation: toque .32s ease; }
@keyframes toque { 40% { transform: scale(.9); } }
.tiendas { display: flex; gap: 8px; flex-wrap: wrap; }
.boton.pronto { opacity: .45; cursor: default; pointer-events: none; }
.toast:has(.solo) { padding: 13px 22px; }
/* la ficha en la web */
.carta[data-n] { cursor: pointer; }
.migas { margin: 0 0 22px; font-size: 14px; color: var(--muted); }
.migas a { color: var(--text); font-weight: 600; text-decoration: none; }
.migas span { margin-inline: 6px; }
.ficha { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
@container sitio (max-width: 640px) { .ficha { grid-template-columns: 1fr; gap: 24px; } }
.ficha-foto { position: relative; aspect-ratio: 1; border-radius: 26px; background: #F8F8F8; }
.ficha-foto img { position: absolute; inset: 12%; width: 76%; height: 76%; object-fit: contain; }
.ficha-datos { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 8px; }
.ficha-datos .marca { font-weight: 700; font-size: 15px; }
.ficha-nombre { font-family: var(--display); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; font-size: 36px; margin: 0; text-wrap: balance; }
@container sitio (max-width: 640px) { .ficha-nombre { font-size: 27px; } }
.ficha-datos .codigo { font-size: 13px; color: var(--muted); }
.ficha-datos .tipo { font-size: 15px; color: var(--muted); margin-top: 6px; }
.ficha-datos .grande-marcar { display: flex; gap: 8px; margin-top: 22px; }
.ficha-datos .pill { display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 99px; padding: 12px 20px; font-size: 15px; font-weight: 700; background: var(--page); box-shadow: inset 0 0 0 1.5px var(--borde); cursor: pointer; white-space: nowrap; }
.ficha-datos .pill.t svg { color: var(--verde); }
.cifras-ficha { display: flex; gap: 22px; margin-top: 18px; color: var(--muted); font-size: 14.5px; }
.cifras-ficha b { font-family: var(--display); font-weight: 700; color: var(--text); font-size: 17px; margin-right: 4px; }
.precio { display: flex; flex-direction: column; gap: 2px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--borde); align-self: stretch; }
.precio span { font-size: 13px; color: var(--muted); }
.precio b { font-family: var(--display); font-weight: 700; font-size: 22px; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.carta.esta .hueco { box-shadow: inset 0 0 0 1.5px var(--text); }
/* las prendas que lleva el fit, flotando en fila */
.prendas-fit { display: flex; align-items: flex-end; gap: 22px; margin-top: 28px; }
/* en la tarjeta de Inicio, la fila cabe en su columna: más pequeña y, si no cabe, baja de línea */
.historia .prendas-fit { gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.historia .prendas-fit img { height: 38px; max-width: 44px; }
.prendas-fit img { height: 52px; width: auto; max-width: 64px; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(0,0,0,.12)); opacity: 0; translate: 0 8px; transition: opacity .4s ease, translate .4s ease; }
.activa .prendas-fit img { opacity: 1; translate: 0 0; }
.pantalla .prendas-fit { margin-top: 0; gap: 6px; justify-content: space-between; }
.pantalla .prendas-fit img { height: 34px; max-width: 40px; }
/* en el iPhone, lo principal ocupa lo que queda de pantalla: nada de pantallas medio vacías */
.pantalla .llena { flex: 1; min-height: 0; aspect-ratio: auto; }
.p-dato { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; padding: 8px 0; border-top: 1px solid var(--borde); }
.p-dato b { font-family: var(--display); font-weight: 700; font-size: 12.5px; }
.p-versiones { display: flex; gap: 6px; }
.p-versiones .hueco { flex: 1; border-radius: 8px; }
.p-dia { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; border-top: 1px solid var(--borde); padding-top: 10px; }
.dia .hueco { transition: box-shadow .3s ease; }
/* el fit puesto, de arriba abajo como en el cuerpo */
.puesto { position: relative; aspect-ratio: 3 / 4; border-radius: 18px; background: #F8F8F8; overflow: hidden; }
.puesto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; scale: 1.03; transition: opacity .6s ease, scale .8s ease; }
.activa .puesto img { opacity: 1; scale: 1; }
.etq-gen { position: absolute; right: 10px; top: 10px; z-index: 5; color: var(--muted); background: rgba(255,255,255,.8); font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 99px; }
.etq-fit { position: absolute; left: 10px; bottom: 10px; z-index: 5; background: var(--page); font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 99px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
/* el aviso de entrar, pegado abajo */
.toast-envol { position: sticky; bottom: 16px; height: 0; z-index: 20; }
.toast { position: absolute; left: 50%; bottom: 0; translate: -50% 140%; opacity: 0; display: flex; align-items: center; gap: 10px; background: var(--page); border-radius: 99px; padding: 8px 8px 8px 20px; box-shadow: 0 0 0 1px var(--borde), 0 18px 40px -12px rgba(0,0,0,.28); white-space: nowrap; font-size: 14.5px; font-weight: 600; transition: translate .4s cubic-bezier(.3,1.2,.5,1), opacity .3s ease; }
.toast.visible { translate: -50% 0; opacity: 1; }
.toast .boton { padding: 9px 16px; font-size: 13.5px; }
@container sitio (max-width: 640px) { .toast { white-space: normal; width: calc(100% - 32px); border-radius: 22px; flex-wrap: wrap; padding: 14px; } .toast span { flex-basis: 100%; } .toast .boton { flex: 1; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; } }

/* ---------- lo propio de la web (fuera de la maqueta) ---------- */
.nav { position: sticky; top: 0; border-bottom: 1px solid transparent; }
@container sitio (max-width: 640px) { .nav { height: 52px; padding-inline: 20px; gap: 20px; border-bottom-color: var(--borde); } }
a.logo { color: var(--text); text-decoration: none; }
a.carta { display: block; color: inherit; text-decoration: none; }
.carta .c-marca { display: block; margin-bottom: 1px; }
.carta b { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* una prenda sin foto todavía lleva la genérica de su tipo, en gris, como en la app */
.generica > img { opacity: .55; }
a.res { color: inherit; text-decoration: none; }
a.res:hover { background: #F6F6F4; }
.buscador a { display: grid; place-items: center; color: var(--text); }
a.recien { color: inherit; text-decoration: none; }
/* el aviso de entrar, pegado abajo de la ventana */
.toast-envol { position: fixed; left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); height: 0; }
@media (max-width: 640px) { .toast { white-space: normal; width: calc(100% - 32px); border-radius: 22px; flex-wrap: wrap; padding: 14px; } .toast span { flex-basis: 100%; } .toast .boton { flex: 1; } }
/* ficha: frente y espalda */
.ficha-foto { overflow: hidden; }
.angulos { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; display: flex; gap: 3px; background: var(--page); border-radius: 99px; padding: 4px; box-shadow: 0 0 0 1px var(--borde); }
.angulos button { border: 0; background: none; border-radius: 99px; padding: 6px 14px; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; }
.angulos button[aria-pressed="true"] { background: var(--text); color: var(--page); }
/* Prendas: buscador y orden */
.cab-prendas { flex-wrap: wrap; align-items: center; }
.busca-catalogo { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--text); border-radius: 99px; padding: 0 18px; height: 48px; margin-bottom: 18px; max-width: 520px; color: var(--muted); }
.busca-catalogo input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 15.5px; color: var(--text); }
.busca-catalogo:focus-within { box-shadow: 0 0 0 3px rgba(18,18,17,.08); }
.vacio { color: var(--muted); font-size: 16px; line-height: 1.5; margin: 12px 0 32px; max-width: 60ch; }
/* textos legales */
.legal { max-width: 720px; margin: 0 auto; padding: 56px 32px 24px; font-size: 16.5px; line-height: 1.65; }
@container sitio (max-width: 640px) { .legal { padding: 36px 20px 8px; font-size: 16px; } }
.legal h1 { font-family: var(--display); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; font-size: 34px; margin: 0 0 18px; text-wrap: balance; }
.legal h2 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; font-size: 21px; margin: 44px 0 10px; line-height: 1.25; }
.legal h3 { font-size: 17px; margin: 28px 0 6px; }
.legal p, .legal li { color: #2A2A28; }
.legal ul, .legal ol { padding-left: 1.3em; }
.legal li { margin: 4px 0; }
.legal hr { border: 0; border-top: 1px solid var(--borde); margin: 32px 0; }
.legal a { color: var(--text); }
.legal table { border-collapse: collapse; width: 100%; font-size: 14.5px; margin: 16px 0; display: block; overflow-x: auto; }
.legal th, .legal td { border-bottom: 1px solid var(--borde); padding: 8px 10px; text-align: left; vertical-align: top; }
.legal .otro-idioma { color: var(--muted); font-size: 14px; }
/* una foto de verdad del catálogo ya trae su fondo de estudio: llena el hueco, como en la app */
.con-foto { background: #F8F8F8; overflow: hidden; }
.con-foto > img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carta:hover .con-foto > img { transform: scale(1.03); }

/* ---------- Fitmarket y Fitm+ en la portada (2026-10-15, maqueta maquetas/web-al-dia) ---------- */
/* El negro metalizado del bloque de Fitmarket, el mismo que en la ficha de la app en modo claro. */
.fm { position: relative; overflow: hidden; border-radius: 28px; padding: 40px; color: #F2F2EF;
  background: linear-gradient(118deg, #3A3A39 0%, #0C0C0C 38%, #2C2C2D 55%, #080808 76%, #343433 100%); }
.fm::before { content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; background: rgba(255,255,255,.18); }
.fm-arriba { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.fm-logo { font-family: var(--display); font-weight: 800; letter-spacing: -0.045em; font-size: 34px; line-height: 1; }
.fm-logo span { font-weight: 600; }
.fm-logo .arket { color: #74736F; }
.fm p { margin: 12px 0 0; color: #A09F9B; font-size: 17px; }
.fm .boton { background: #F2F2EF; color: #121211 !important; }
.anuncios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
.anuncios:empty { display: none; }
.anuncio { color: inherit; text-decoration: none; min-width: 0; }
.anuncio .hueco { aspect-ratio: 4 / 5; border-radius: 14px; background: #F8F8F8; overflow: hidden; display: grid; place-items: center; }
.anuncio .hueco img { width: 100%; height: 100%; object-fit: cover; }
.anuncio .hueco.generica img { width: 70%; height: auto; object-fit: contain; }
.anuncio b { display: block; font-family: var(--display); font-size: 16px; margin-top: 9px; }
.anuncio small { display: block; font-size: 13px; color: #A09F9B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anuncio small strong { color: #F2F2EF; }
.anuncio i { display: block; font-style: normal; font-size: 12px; color: #74736F; margin-top: 2px; }
.fm-pagina .anuncios { grid-template-columns: repeat(4, 1fr); }
@container sitio (max-width: 640px) {
  .fm { padding: 26px 20px; } .fm-logo { font-size: 28px; }
  .anuncios, .fm-pagina .anuncios { grid-template-columns: 1fr 1fr; }
}

/* Fitm+: la lista a la izquierda y, a la derecha, una prenda en su peana con las cuatro funciones al pie (B1). */
.plus { margin-top: 22px; border-radius: 28px; padding: 36px 40px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: center; }
.plus > * { min-width: 0; }
.plus h2 { font-family: var(--display); font-size: 34px; margin: 0; letter-spacing: -0.02em; }
.metal { background: linear-gradient(160deg, #FFF3CF 0%, #E9CF8A 38%, #A8853D 55%, #F5DFA0 78%, #E9CF8A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plus h2 .metal { font-size: .8em; position: relative; top: -.45em; margin-left: 2px; }
.plus ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 9px; font-size: 16px; }
.plus li span { color: var(--muted); margin-left: 4px; }
.plus li.con-boton { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.plus li .pill-mini { margin: 0; color: var(--text); box-shadow: inset 0 0 0 1px var(--borde); border-radius: 99px; padding: 3px 10px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.plus .pronto-chip { display: inline-block; font-size: 11px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--borde); border-radius: 99px; padding: 2px 8px; margin-left: 6px; color: var(--muted); }
.plus-lado { width: 100%; max-width: 340px; justify-self: center; aspect-ratio: 1; border-radius: 26px; background: #F8F8F8; display: flex; flex-direction: column; padding-top: 9%; }
.plus-lado .plus-prenda { flex: 1; display: grid; place-items: center; }
.plus-lado .plus-prenda img { width: 56%; filter: drop-shadow(0 12px 16px rgba(0,0,0,.13)); }
.plus-lado .funciones { display: flex; justify-content: space-around; margin: 0 10%; padding: 14px 0 20px; }
.plus-lado svg { width: 24px; height: 24px; display: block; }
@container sitio (max-width: 640px) {
  .plus { grid-template-columns: 1fr; padding: 26px 20px; } .plus h2 { font-size: 28px; } .plus ul { font-size: 15px; }
}

/* Cómo funciona, capítulo 6: la pantalla de un anuncio, en el oscuro de Fitmarket. */
.pantalla.oscura { background: #0F0F0F; color: #F2F2EF; }
.pantalla.oscura .p-cab { display: flex; justify-content: space-between; font-size: 11px; color: #A09F9B; }
.pantalla.oscura .ft { aspect-ratio: 4 / 5; border-radius: 14px; background: #F8F8F8; display: grid; place-items: center; }
.pantalla.oscura .ft img { width: 80%; }
.pantalla.oscura b { font-family: var(--display); font-size: 18px; }
.pantalla.oscura small { color: #A09F9B; }
.pantalla.oscura small strong { color: #F2F2EF; }
.pantalla.oscura .escribir { margin-top: auto; background: #F2F2EF; color: #111; border-radius: 99px; text-align: center; font-weight: 700; font-size: 12.5px; padding: 10px; }

/* El idioma en el menú (2026-10-15): ES · EN, también en el móvil. */
.nav .idioma { display: inline-flex; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--borde); padding: 3px; }
.nav .idioma button { border: 0; background: none; font: 600 12px var(--cuerpo); color: var(--muted); padding: 4px 9px; border-radius: 99px; cursor: pointer; }
.nav .idioma button[aria-pressed="true"] { background: var(--text); color: var(--page); }

/* Cómo funciona, 2026-10-25: el Diario como en la app (la foto arriba, la tira de días debajo y de un
   día a otro de lado). */
.diario .p-dia { border-top: 0; padding-top: 0; }
.diario-fits { overflow: hidden; }
.diario-fits .carril { display: flex; height: 100%; transition: translate .5s cubic-bezier(.3,.7,.2,1); }
.marco-dia { flex: 0 0 100%; position: relative; height: 100%; }
.marco-dia.vacio { background: none; box-shadow: inset 0 0 0 1.5px var(--borde); border-radius: 18px; }
.diario-fits .marco-dia img { opacity: 1; scale: 1; }
.diario .semana { gap: 4px; }
.diario .dia b { margin-bottom: 4px; }
.diario .dia .hueco { aspect-ratio: 1; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .diario-fits .carril { transition: none; } }
/* Las pantallas que no se ven no se llevan los toques de la que sí. */
.lado-tel .pantalla:not(.activa) { pointer-events: none; }
/* El día sin fit no es el aviso .vacio de las listas. */
.dia.vacio, .marco-dia.vacio { margin: 0; font-size: inherit; line-height: inherit; color: inherit; max-width: none; }

/* Cómo funciona, 2026-10-25: las filas como en Buscar (la marca encima del modelo, sin cifras). */
.p-fila small { display: block; font-size: 10.5px; line-height: 1.2; }
.p-fila .pill-mini { margin-left: auto; font-size: 10.5px; padding: 4px 8px; gap: 3px; }

/* Hazle una foto: Añadir y Crear prenda como en la app. La fase la pone como.js en data-fase:
   0 la foto lista, 1 buscando, 2 la foto encogida y las opciones, 3 el toque en «No es ninguna»,
   4 Crear prenda, ya rellena con lo leído. */
.foto-rec { padding: 0; }
.rec-anadir, .rec-crear { position: absolute; inset: 0; padding: 32px 12px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--page); }
.p-titulo { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.p-titulo b { font-family: var(--display); font-size: 13px; letter-spacing: -0.02em; }
.p-campo-busc { display: flex; align-items: center; gap: 6px; border: 1px solid var(--borde); border-radius: 99px; padding: 7px 11px; font-size: 11.5px; color: var(--muted); }
.p-campo-busc i { font-style: normal; }
.foto-rec .visor { flex: 1 1 0; min-height: 0; }
.foto-rec .barrido { position: absolute; left: 6%; right: 6%; top: 8%; height: 2px; border-radius: 2px; background: var(--text); box-shadow: 0 0 14px 4px rgba(255,255,255,.9); opacity: 0; }
.foto-rec[data-fase="1"] .barrido { opacity: 1; animation: barrido 1.1s ease-in-out infinite alternate; }
@keyframes barrido { to { top: 74%; } }
.foto-rec[data-fase="1"] .barrido { animation-duration: .8s; }
.rec-plegable { display: flex; flex-direction: column; gap: 8px; max-height: 120px; overflow: hidden; transition: max-height .5s ease, opacity .3s ease; }
.foto-rec[data-fase="2"] .rec-plegable, .foto-rec[data-fase="3"] .rec-plegable, .foto-rec[data-fase="4"] .rec-plegable { max-height: 0; opacity: 0; }
.rec-etiqueta { display: flex; align-items: center; gap: 7px; border-radius: 16px; background: #F8F8F8; padding: 10px; font-size: 11.5px; }
.rec-etiqueta .ico-etiqueta { display: grid; color: var(--muted); font-size: 16px; }
.rec-etiqueta .chip { font-size: 9.5px; font-weight: 700; border-radius: 99px; padding: 2px 6px; box-shadow: inset 0 0 0 1px var(--borde); }
.rec-etiqueta .mas-hueco { margin-left: auto; color: var(--muted); font-size: 15px; }
.rec-reconocer { display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--text); color: var(--page); border-radius: 99px; padding: 9px; font-size: 12px; font-weight: 700; transition: transform .15s ease; }
.rec-reconocer svg { font-size: 15px; }
.foto-rec[data-fase="1"] .rec-reconocer { animation: toque .32s ease; }
.rec-reconocer .txt-buscando, .foto-rec[data-fase="1"] .txt-reconocer { display: none; }
.foto-rec[data-fase="1"] .txt-buscando { display: inline; }
.rec-lista { display: flex; flex-direction: column; gap: 6px; max-height: 0; overflow: hidden; opacity: 0; transition: opacity .4s ease .3s, max-height .6s ease; }
.foto-rec[data-fase="2"] .rec-lista, .foto-rec[data-fase="3"] .rec-lista, .foto-rec[data-fase="4"] .rec-lista { opacity: 1; max-height: 340px; }
.foto-rec[data-fase="2"] .p-fila, .foto-rec[data-fase="3"] .p-fila, .foto-rec[data-fase="4"] .p-fila { opacity: 1; translate: 0 0; }
.rec-lista h6 { margin: 2px 0 0; font-family: var(--display); font-size: 12.5px; letter-spacing: -0.02em; }
.rec-lista .p-fila .hueco { width: 34px; flex: none; }
.rec-lista .p-fila .pill-mini { flex: none; }
.rec-no { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 600; padding: 9px 6px; border-top: 1px solid var(--borde); border-radius: 8px; transition: background .2s ease; }
.rec-no span:last-child { color: var(--muted); font-size: 14px; }
.foto-rec[data-fase="3"] .rec-no { background: var(--peana); }
/* Crear prenda como la aprobada (maquetas/crear-prenda, opción B): etiqueta en negrita, píldoras,
   Tipo y Color como filas con su flecha; al entrar, lo leído aparece campo a campo y la pantalla baja
   despacio hasta «¿La tienes o te gusta?». */
.rec-crear { padding: 0; overflow: hidden; opacity: 0; translate: 22% 0; pointer-events: none; transition: opacity .35s ease, translate .45s ease; }
.foto-rec[data-fase="4"] .rec-crear { opacity: 1; translate: 0 0; }
.rec-scroll { padding: 32px 12px 18px; display: flex; flex-direction: column; transition: translate 1.3s cubic-bezier(.45,0,.25,1) .9s; }
.foto-rec[data-fase="4"] .rec-scroll { translate: 0 var(--bajar, 0px); }
.rec-crear .p-titulo { margin-bottom: 2px; }
.p-et { font-size: 10.5px; font-weight: 700; margin: 11px 0 5px; }
.p-et em { font-style: normal; font-weight: 400; color: var(--muted); }
.p-input { height: 32px; border: 1px solid var(--borde); border-radius: 16px; padding: 0 12px; display: flex; align-items: center; font-size: 11px; }
.p-input.mitad { width: 50%; }
.p-selector { height: 38px; border: 1px solid var(--borde); border-radius: 19px; padding: 0 10px 0 5px; display: flex; align-items: center; gap: 8px; font-size: 11px; }
.p-selector .mini { width: 28px; height: 28px; border-radius: 50%; background: #F8F8F8; display: grid; place-items: center; overflow: hidden; flex: none; }
.p-selector .mini img { width: 78%; height: 78%; object-fit: contain; }
.p-selector .valor { flex: 1; display: flex; align-items: center; }
.p-selector i { font-style: normal; color: var(--muted); font-size: 14px; }
.p-selector .punto { width: 20px; height: 20px; border-radius: 50%; margin-left: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.punto.camel { background: #B98A5A; }
.rec-crear .valor { opacity: 0; transition: opacity .4s ease; }
.foto-rec[data-fase="4"] .valor { opacity: 1; }
.foto-rec[data-fase="4"] .p-selector .valor { transition-delay: .5s; }
.foto-rec[data-fase="4"] .p-selector + .p-et + .p-selector .valor { transition-delay: .9s; }
.p-pregunta { font-size: 12px; font-weight: 700; margin: 18px 0 8px; }
.p-nota { text-align: center; margin-top: 7px; font-size: 10px; }
/* La foto encogida (como.js le pone la altura): despacio, sin golpe. */
.foto-rec .visor { transition: height .8s cubic-bezier(.45,0,.2,1); }
@media (prefers-reduced-motion: reduce) { .foto-rec[data-fase="1"] .barrido { animation: none; } }

/* Márcala: la ficha como en la app. */
.ficha-app { gap: 8px; }
.p-barra { display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 700; margin-top: -6px; }
.p-barra svg { width: 14px; height: 14px; }
.ficha-app .ficha-foto { aspect-ratio: 5 / 4; border-radius: 18px; }
.ficha-app h5 { margin-top: 1px; }
.p-gente { display: flex; align-items: center; gap: 6px; }
.p-gente b { font-family: var(--display); color: var(--text); }
.caras { display: flex; }
.caras i { width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--page); background: #C9C2B6; }
.caras i + i { margin-left: -5px; background: #8E9AA6; }
.caras i + i + i { background: #5F5A54; }
.p-fila > div { min-width: 0; }
.p-fila b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-barra .menu { font-size: 13px; font-weight: 400; }
.p-gente small { font-size: 10.5px; display: flex; flex-wrap: wrap; column-gap: 8px; }
.p-gente small span { white-space: nowrap; }
.rec-lista .p-fila .pill-mini { font-size: 9.5px; padding: 3px 7px; }
.rec-no span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; }
.rec-lista .p-fila { gap: 9px; padding: 3px 0; }
.rec-lista .p-fila .hueco { width: 42px; border-radius: 11px; }
.rec-lista .p-fila b { font-size: 12px; }
.rec-no span:first-child { font-size: 10px; }

/* El menú, 2026-10-25: el idioma junto al logo y el icono de la app en vez del botón «La app». */
.nav .idioma { margin-right: 4px; }
.nav .icono-app { display: grid; flex: none; }
.nav .icono-app img { width: 32px; height: 32px; border-radius: 22.5%; display: block; box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: transform .2s ease; }
.nav .icono-app:hover img { transform: scale(1.06); }

.historia .puesto { aspect-ratio: 1; }
.historia .puesto img { object-fit: contain; }

/* El buscador de Prendas, como el de la portada: centrado, a lo ancho y con su misma altura. */
.cab-centrada { text-align: center; display: grid; justify-items: center; gap: 22px; margin-bottom: 30px; }
.cab-centrada .busca-catalogo { width: 100%; max-width: 560px; height: 54px; margin: 0; padding: 0 22px; }
.barra-filtros { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 26px; }
.barra-filtros .chips { margin: 0; }
.barra-filtros .seg button { padding: 7px 14px; font-size: 13.5px; }
/* Los tipos en una sola fila que se desliza de lado, y el orden siempre a la derecha. */
.barra-filtros { flex-wrap: nowrap; }
.barra-filtros .chips { flex: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); }
.barra-filtros .chips::-webkit-scrollbar { display: none; }
.barra-filtros .seg { flex: none; }
@container sitio (max-width: 640px) { .barra-filtros { flex-wrap: wrap; } .barra-filtros .chips { flex-basis: 100%; } }

/* ---------- La web nueva (2026-10-25, maquetas/web-nueva; mirando a Apple, GOAT y StockX) ---------- */
/* El encabezado de sección: el título en negrita (y su continuación en gris), y a la derecha
   «Ver… ›» o las flechas del estante. */
.cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.cab h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: -0.03em; line-height: 1.2; text-wrap: balance; }
.cab h2 > span:not(.metal) { color: var(--muted); }
.cab .ver { flex: none; font-size: 14.5px; font-weight: 600; white-space: nowrap; color: var(--text); text-decoration: none; }
.cab .ver:hover { text-decoration: underline; text-underline-offset: 4px; }
.flechas { flex: none; display: flex; gap: 8px; }
.flechas button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--peana); cursor: pointer; font-size: 18px; line-height: 1; display: grid; place-items: center; }
.flechas button:hover { background: var(--borde); }
@container sitio (max-width: 640px) { .cab h2 { font-size: 21px; } .flechas { display: none; } }

/* El estante: una fila que se desliza de lado, alineada al borde de todo lo demás. */
.estante { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 16px) / 4); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.estante::-webkit-scrollbar { display: none; }
.estante > * { scroll-snap-align: start; }
@container sitio (max-width: 640px) { .estante { grid-auto-columns: 44%; } }

/* El ✓ y el ♡ de cada prenda salen al pasar el ratón (en el móvil, siempre). */
@media (hover: hover) {
  .carta .marcar { opacity: 0; translate: 0 4px; transition: opacity .2s ease, translate .2s ease; }
  .carta:hover .marcar, .carta:focus-within .marcar, .carta .marcar:has([aria-pressed="true"]) { opacity: 1; translate: 0 0; }
}
#catalogo .rejilla { gap: 28px 16px; }

/* Cómo funciona: la banda gris con tres tarjetas blancas. */
.banda { background: #F5F5F4; margin-top: 88px; padding-block: 64px 72px; }
.banda .estante.tres { grid-auto-columns: calc((100% - 2 * 18px) / 3); gap: 18px; padding: 6px 2px 18px; }
@container sitio (max-width: 640px) { .banda .estante.tres { grid-auto-columns: 82%; } }
.tarjeta-b { background: #fff; border-radius: 22px; padding: 26px; box-shadow: 0 2px 12px rgba(0,0,0,.06); display: flex; flex-direction: column; gap: 14px; min-height: 380px; transition: box-shadow .25s ease, translate .25s ease; }
.tarjeta-b:hover { box-shadow: 0 8px 26px rgba(0,0,0,.1); translate: 0 -2px; }
.tarjeta-b h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: -0.03em; line-height: 1.15; }
.tarjeta-b .imagen { margin-top: auto; border-radius: 16px; background: var(--peana); aspect-ratio: 4 / 3; position: relative; overflow: hidden; }
.tarjeta-b .imagen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.tarjeta-b .imagen.sola img { inset: 14%; width: 72%; height: 72%; }
.tarjeta-b .botones { display: flex; gap: 8px; flex-wrap: wrap; }
.tarjeta-b .pill { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 99px; padding: 8px 13px; font-size: 13.5px; font-weight: 700; background: #fff; box-shadow: inset 0 0 0 1.5px var(--borde); cursor: pointer; }
.tarjeta-b .pill[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--text); }
.tarjeta-b .pill.t[aria-pressed="true"] svg { color: var(--verde); }
.tarjeta-b .pill.q[aria-pressed="true"] svg { color: var(--rojo); }
.tarjeta-b .pill.q[aria-pressed="true"] path { fill: currentColor; }
.tarjeta-b .tira { display: flex; gap: 8px; }
.tarjeta-b .tira img { height: 34px; }
.semana-b { margin-top: auto; display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; text-align: center; font-size: 11px; color: var(--muted); }
.semana-b b { display: block; font-family: var(--display); color: var(--text); font-size: 13px; margin: 1px 0 5px; }
.semana-b i { display: block; aspect-ratio: 3 / 4; border-radius: 8px; background: var(--peana); position: relative; }
.semana-b i img { position: absolute; inset: 10%; width: 80%; height: 80%; object-fit: contain; }
.semana-b .hoy i { box-shadow: inset 0 0 0 1.5px var(--text); }

/* Fitm+: una sección más, sin caja. */
.plus-b { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.plus-b .cab { margin-bottom: 18px; }
.plus-b .metal { font-size: .8em; position: relative; top: -.45em; margin-left: 2px; background: linear-gradient(160deg, #F5DFA0, #C9A456 40%, #9C7A2E 60%, #E9CF8A 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plus-b ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; font-size: 16px; }
.plus-b li span { color: var(--muted); }
.plus-b .lado { aspect-ratio: 1; max-width: 340px; width: 100%; justify-self: center; border-radius: 26px; background: var(--peana); display: grid; place-items: center; }
.plus-b .lado img { width: 62%; }
@container sitio (max-width: 640px) { .plus-b { grid-template-columns: 1fr; } }

/* Prendas: el título y el buscador centrados; a la izquierda los tipos, y arriba de la cuadrícula
   cuántas hay y el orden. */
.catalogo { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 36px; align-items: start; }
.lateral { position: sticky; top: 80px; }
.lateral h4 { margin: 0 0 8px; font-size: 13px; font-weight: 700; }
.lateral ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lateral button { width: calc(100% + 8px); text-align: left; border: 0; background: none; border-radius: 8px; padding: 5px 8px; margin-left: -8px; font-size: 14px; color: var(--muted); cursor: pointer; display: flex; justify-content: space-between; gap: 8px; }
.lateral button:hover { color: var(--text); }
.lateral button[aria-pressed="true"] { color: var(--text); font-weight: 700; }
.lateral em { font-style: normal; font-size: 12px; color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.catalogo .chips-movil { display: none; }
.barra-cat { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; min-height: 30px; font-size: 13.5px; color: var(--muted); }
.orden { position: relative; }
.orden > button { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; font-size: 13.5px; font-weight: 600; color: var(--text); cursor: pointer; padding: 4px 0; }
.orden > button::after { content: ''; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; rotate: 45deg; translate: 0 -2px; }
.orden ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 8; list-style: none; margin: 0; padding: 6px; background: var(--page); border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.12), 0 0 0 1px var(--borde); min-width: 200px; }
.orden li button { width: 100%; text-align: left; border: 0; background: none; border-radius: 9px; padding: 8px 10px; font-size: 14px; cursor: pointer; color: var(--text); }
.orden li button:hover { background: var(--peana); }
.orden li button[aria-pressed="true"] { font-weight: 700; }
.catalogo .rejilla { gap: 28px 16px; }
@container sitio (max-width: 900px) { .catalogo .rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container sitio (max-width: 640px) {
  .catalogo { grid-template-columns: 1fr; gap: 0; }
  .lateral { display: none; }
  .catalogo .chips-movil { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 16px; }
  .catalogo .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
}
.catalogo > * { min-width: 0; }

/* ---------- Fitmarket en la web (2026-10-25, maquetas/fitmarket-web) ---------- */
/* Siempre en oscuro, como en la app: html.fitmarket cambia los colores de toda la página y el menú. */
html.fitmarket { --page: #0F0F0F; --text: #F2F2EF; --muted: #A09F9B; --peana: #1D1D1C; --borde: #2F2F2D; color-scheme: dark; }
html.fitmarket .nav { background: rgba(15,15,15,.86); }
html.fitmarket .logo .arket { color: #74736F; font-weight: 800; }
html.fitmarket .idioma button[aria-pressed="true"] { color: #111; }
html.fitmarket .boton { color: #111 !important; }
html.fitmarket .icono-app img { box-shadow: 0 0 0 1px var(--borde); }
.fm-web { padding-block: 44px 24px; }
.fm-cabeza { display: grid; justify-items: center; gap: 20px; text-align: center; margin-bottom: 30px; }
.fm-lema { margin: 0; color: var(--muted); font-size: 17px; }
.fm-buscador { width: 100%; max-width: 560px; height: 54px; margin: 0; padding: 0 7px 0 22px; text-align: left; }
.sitio-fm { flex: none; position: relative; }
.sitio-fm > .abre { display: flex; align-items: center; gap: 6px; height: 38px; border-radius: 19px; padding: 0 13px; border: 0; background: var(--peana); color: var(--text); font-size: 13.5px; font-weight: 600; cursor: pointer; max-width: 170px; }
.sitio-fm > .abre span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-filtros { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.fm-filtros .separa { width: 1px; background: var(--borde); margin-inline: 4px; }
.chip-fm { border: 0; border-radius: 99px; padding: 8px 15px; background: var(--peana); color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.chip-fm[aria-pressed="true"], .chip-fm.lleno { background: var(--text); color: #111; }
.desplegable { position: relative; }
.desplegable .chip-fm::after { content: ''; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; rotate: 45deg; translate: 0 -2px; margin-left: 2px; }
.desplegable ul { position: absolute; left: 0; top: calc(100% + 6px); z-index: 12; list-style: none; margin: 0; padding: 6px; background: #1A1A19; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 0 1px var(--borde); min-width: 190px; max-height: 320px; overflow-y: auto; text-align: left; }
.sitio-fm ul { left: auto; right: 0; }
.desplegable li button { width: 100%; text-align: left; border: 0; background: none; border-radius: 9px; padding: 8px 10px; font-size: 14px; cursor: pointer; color: var(--text); }
.desplegable li button:hover { background: var(--peana); }
.desplegable li button[aria-pressed="true"] { font-weight: 700; }
.fm-vacio { text-align: center; margin-inline: auto; }

/* La tarjeta A de la app. */
.fm-rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 16px; }
@container sitio (max-width: 900px) { .fm-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container sitio (max-width: 640px) { .fm-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; } .fm-filtros .separa { display: none; } }
.fm-tarjeta { display: block; min-width: 0; color: var(--text); text-decoration: none; }
.fm-tarjeta .foto { position: relative; aspect-ratio: 4 / 5; border-radius: 14px; background: #F8F8F8; overflow: hidden; }
.fm-tarjeta .foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.fm-tarjeta .foto.generica img { inset: 14%; width: 72%; height: 72%; object-fit: contain; }
.fm-tarjeta:hover .foto img { transform: scale(1.04); }
.fm-tarjeta .talla { position: absolute; top: 8px; right: 8px; max-width: 86%; background: #111; color: #F2F2EF; font-size: 11px; font-weight: 700; border-radius: 7px; padding: 3px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-tarjeta .precio { display: block; margin-top: 9px; font-family: var(--display); font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.fm-tarjeta .nombre { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-tarjeta .nombre strong { color: var(--text); }

/* Un anuncio. */
.fm-anuncio .migas { font-size: 13.5px; margin-bottom: 22px; }
.fm-anuncio .migas a { color: var(--muted); text-decoration: none; }
.fm-anuncio .migas a:hover { color: var(--text); }
.fm-ficha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
@container sitio (max-width: 760px) { .fm-ficha { grid-template-columns: 1fr; gap: 24px; } }
.fm-fotos { display: grid; gap: 10px; }
.fm-fotos .grande { position: relative; aspect-ratio: 4 / 5; border-radius: 22px; background: #F8F8F8; overflow: hidden; }
.fm-fotos .grande img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fm-fotos .grande.generica img { inset: 12%; width: 76%; height: 76%; object-fit: contain; }
.fm-fotos .miniaturas { display: flex; gap: 10px; flex-wrap: wrap; }
.fm-fotos .miniaturas button { width: 72px; aspect-ratio: 4 / 5; border-radius: 12px; border: 0; padding: 0; background: #F8F8F8; overflow: hidden; cursor: pointer; opacity: .55; transition: opacity .2s ease; }
.fm-fotos .miniaturas button[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--text); }
.fm-fotos .miniaturas img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fm-lado { position: sticky; top: 80px; display: grid; }
.fm-lado .precio-grande { font-family: var(--display); font-weight: 700; font-size: 38px; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fm-prenda { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 17px; color: var(--muted); text-decoration: none; justify-self: start; }
.fm-prenda strong { color: var(--text); }
.fm-prenda:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.fm-lado .cuando { margin-top: 4px; font-size: 13.5px; color: #74736F; }
.fm-lado .datos { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; border-block: 1px solid var(--borde); }
.fm-lado .datos > div { padding: 14px 0; text-align: center; }
.fm-lado .datos > div + div { border-left: 1px solid var(--borde); }
.fm-lado .datos small { display: block; color: var(--muted); font-size: 12.5px; }
.fm-lado .datos b { font-size: 16px; }
.fm-lado .descripcion { margin: 22px 0 0; font-size: 15.5px; line-height: 1.6; color: #D9D8D4; white-space: pre-line; overflow-wrap: anywhere; }
.fm-lado .descripcion + .descripcion { margin-top: 10px; }
.fm-lado .donde { margin-top: 20px; display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.fm-lado .donde svg { color: var(--muted); }
.fm-lado .escribir { margin-top: 30px; height: 52px; border-radius: 26px; border: 0; background: var(--text); color: #111; font-weight: 700; font-size: 15.5px; cursor: pointer; }
.fm-lado .aviso-venta { margin: 10px 0 0; text-align: center; font-size: 12.5px; color: #74736F; line-height: 1.5; }
.fm-mas { margin-top: 72px; }
.fm-no-esta { display: grid; justify-items: center; gap: 22px; text-align: center; padding-block: 60px; }
@media (prefers-reduced-motion: reduce) { .fm-tarjeta .foto img { transition: none; } }
/* El filtro por color de Prendas: los círculos de la app, sin nombres (el nombre va en la lectura de pantalla). */
.lateral .h-color { margin-top: 26px; }
.colores-filtro { display: flex; flex-wrap: wrap; gap: 7px; }
.colores-filtro button { width: 24px; height: 24px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.colores-filtro button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 0 0 2px var(--page), 0 0 0 3.5px var(--text); }
/* Cómo funciona (2026-10-25, el usuario): el fit se ve entero, sin las prendas encima, y el Diario
   lleva la foto del día arriba y la tira debajo, sin hueco en medio. */
.tarjeta-b .imagen.alta { aspect-ratio: auto; flex: 1; min-height: 220px; }
.tarjeta-b .imagen.dia { margin-top: 0; }
.tarjeta-b .semana-b { margin-top: 0; }
.tarjeta-b .semana-b i { aspect-ratio: 1; }
.plus-b .plus-lado { justify-self: center; }
/* (2026-10-25, segunda vuelta) Las fotos de los fits llenan su recuadro (su fondo gris con degradado
   dejaba ver los bordes de la foto), y en «¿La tienes o te gusta?» la prenda va justo bajo los botones.
   Las tres tarjetas, del mismo alto. */
.banda .tarjeta-b { min-height: 440px; }
.tarjeta-b .imagen { margin-top: 0; flex: 1; aspect-ratio: auto; min-height: 200px; }
.tarjeta-b .imagen.alta img { object-fit: cover; object-position: center 40%; }
/* Prendas (2026-10-25, el usuario): sin el título «Tipo» ni las cifras de cada tipo; los colores, con aire. */
.colores-filtro { gap: 11px; max-width: 160px; }
/* (2026-10-25, tercera vuelta) El Diario de la tarjeta: la foto con la forma de las fotos de fit (3:4,
   entera, con los pies) y la semana se puede tocar; el día sin fit, un marco vacío. */
.tarjeta-b .imagen.dia { flex: none; aspect-ratio: 3 / 4; min-height: 0; }
.tarjeta-b .imagen.dia img, .tarjeta-b .imagen.dia .sin-fit { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; }
.tarjeta-b .imagen.dia .ver { opacity: 1; }
.tarjeta-b .imagen.dia .sin-fit { background: var(--page); box-shadow: inset 0 0 0 1.5px var(--borde); border-radius: 16px; }
.semana-b button { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.semana-b button[aria-pressed="true"] i { box-shadow: inset 0 0 0 1.5px var(--text); }
.semana-b button:hover i { box-shadow: inset 0 0 0 1.5px var(--borde); }
.semana-b button[aria-pressed="true"]:hover i { box-shadow: inset 0 0 0 1.5px var(--text); }
/* La franja de la app, con el mismo aire que entre secciones (2026-10-26: a 40 px quedaba pegada a Fitm+). */
#plus { padding-bottom: 0; }

/* Que cada página aparezca de una vez (revelar en comun.js). */
.cargando { opacity: 0; }
.revela { transition: opacity .4s ease; }
/* Al pasar de una página a otra, un fundido y la barra quieta (View Transitions entre documentos;
   donde no hay, salta como siempre). */
@view-transition { navigation: auto; }
.nav { view-transition-name: barra; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } .revela { transition: none; } }
/* La portada, igual en los dos idiomas: los títulos de las tarjetas guardan sitio para dos líneas. */
.tarjeta-b h3 { min-height: 2.3em; }

/* ---------- Para marcas (2026-10-25, maquetas/para-marcas) ---------- */
/* Todo con «mk-»: .tel, .banda o .lanzamiento ya existen en otras páginas y chocaban en la maqueta. */
.mk-arriba { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-block: 64px 24px; }
@container sitio (max-width: 860px) { .mk-arriba { grid-template-columns: 1fr; gap: 36px; padding-top: 40px; } }
.mk-arriba .sub { max-width: 40ch; }
.mk-acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.mk-tel { width: 270px; max-width: 100%; aspect-ratio: 9 / 18.5; margin: 0 auto; border-radius: 40px; border: 9px solid #121211; background: #fff; overflow: hidden; box-shadow: 0 30px 60px -24px rgba(0,0,0,.3); padding: 34px 14px 14px; display: flex; flex-direction: column; gap: 12px; font-size: 11.5px; }
.mk-barra { font-size: 18px; line-height: 1; margin-top: -8px; }
.mk-cab { display: flex; align-items: center; gap: 12px; }
.mk-logo { width: 52px; height: 52px; border-radius: 50%; background: #2F3B2C; color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 17px; flex: none; }
.mk-logo.chico { width: 40px; height: 40px; font-size: 15px; }
.mk-nombre { display: flex; align-items: center; gap: 5px; font-family: var(--display); font-weight: 700; font-size: 15px; }
.mk-perfil .mk-nombre { font-size: 14px; }
.mk-ok { width: 15px; height: 15px; border-radius: 50%; background: var(--text); color: #fff; display: grid; place-items: center; }
.mk-cab small { display: block; color: var(--muted); font-size: 11px; }
.mk-botones { display: flex; gap: 8px; }
.mk-botones span { flex: 1; text-align: center; border-radius: 99px; padding: 7px 0; font-weight: 700; font-size: 11.5px; box-shadow: inset 0 0 0 1.5px var(--borde); }
.mk-botones .lleno { background: var(--text); color: #fff; box-shadow: none; }
.mk-titulo { font-family: var(--display); font-weight: 700; font-size: 13px; margin-top: 4px; }
.mk-lanz, .mk-modelo, .mk-lz { display: flex; align-items: center; gap: 10px; }
.mk-fecha { width: 40px; height: 42px; border-radius: 10px; background: var(--peana); display: grid; place-items: center; align-content: center; line-height: 1; flex: none; }
.mk-fecha b { font-family: var(--display); font-size: 15px; }
.mk-fecha small { font-size: 10px; color: var(--muted); }
.mk-txt { min-width: 0; flex: 1; }
.mk-txt b { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-txt small { color: var(--muted); font-size: 11px; }
.mk-campana { width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--text); display: grid; place-items: center; flex: none; }
.mk-modelo i { width: 44px; height: 44px; border-radius: 10px; background: var(--peana); display: grid; place-items: center; flex: none; }
.mk-modelo i img { width: 78%; }
.mk-gamas { display: flex; gap: 4px; margin-top: 3px; }
.mk-gamas em { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.mk-flecha { color: var(--muted); }
.mk-todas { margin-top: auto; display: flex; align-items: center; gap: 8px; background: var(--text); color: #fff; border-radius: 99px; padding: 6px 12px 6px 6px; font-weight: 700; font-size: 11.5px; }
.mk-todas span:last-child { margin-left: auto; }
.mk-apiladas { display: flex; }
.mk-apiladas i { width: 24px; height: 24px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 1.5px var(--text); }
.mk-apiladas i + i { margin-left: -7px; }
.mk-apiladas img { width: 70%; }

/* Lo que tiene tu marca: la banda de la portada, con las tarjetas a la medida de lo que llevan. */
.mk-banda { margin-top: 64px; }
.mk-banda .estante.tres { grid-auto-columns: calc((100% - 2 * 18px) / 3); }
.mk-tarjeta { min-height: 0; gap: 10px; min-width: 0; overflow: hidden; }
.mk-tarjeta p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.mk-tarjeta h3 { min-height: 0; }
.mk-dibujo { margin-top: 8px; flex: 1; display: grid; align-content: center; gap: 12px; min-width: 0; }
.mk-perfil { border: 1px solid var(--borde); border-radius: 18px; padding: 14px; display: grid; gap: 12px; }
.mk-prendas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mk-prendas img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: 4px; }
.mk-ficha { display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 10px; }
.mk-grande { position: relative; aspect-ratio: 4 / 3; }
.mk-grande img { position: absolute; inset: 4%; width: 92%; height: 92%; object-fit: contain; }
.mk-vistas { display: grid; gap: 6px; align-content: center; }
.mk-vistas span { aspect-ratio: 1; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--borde); overflow: hidden; display: grid; place-items: center; }
.mk-vistas span.si { box-shadow: inset 0 0 0 1.5px var(--text); }
.mk-vistas img { width: 76%; height: 76%; object-fit: contain; }
.mk-vistas img.espalda { transform: scaleX(-1); filter: brightness(.92); }
.mk-vistas img.detalle { transform: scale(2.4) translate(8%, 10%); }
.mk-lanzamientos { display: grid; }
.mk-lz { gap: 12px; padding: 7px 0; }
.mk-lz + .mk-lz { border-top: 1px solid var(--borde); }
.mk-lz .n { font-size: 13.5px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-lz .mk-campana { width: 30px; height: 30px; }
/* Las estadísticas: el gráfico de columnas de la app (grafico-columnas y punto-en-vivo). */
.mk-vivo { display: grid; gap: 10px; }
.mk-cifra b { display: block; font-family: var(--display); font-weight: 700; font-size: 30px; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.mk-cifra small { color: var(--muted); font-size: 12.5px; }
.mk-grafico { display: flex; }
.mk-zona { flex: 1; display: flex; height: 96px; border-block: 1px solid var(--borde); }
.mk-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.mk-col i { display: block; width: 62%; max-width: 24px; height: 0; border-radius: 4px 4px 0 0; background: #9A9A96; transition: height .6s cubic-bezier(.2,.8,.2,1); }
.mk-vivo.ver .mk-col i { height: calc(var(--h) * .82); }
.mk-col i.ahora { background: var(--text); }
.mk-punto { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--text); margin-bottom: 4px; flex: none; }
.mk-punto::after { content: ''; position: absolute; left: -4px; top: -4px; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--text); animation: mk-aro 1.8s ease-out infinite; }
@keyframes mk-aro { from { transform: scale(.5); opacity: .7; } to { transform: scale(1.6); opacity: 0; } }
.mk-eje { width: 24px; flex: none; padding-left: 6px; font-size: 10px; color: var(--muted); margin-top: -6px; }
.mk-horas { display: flex; margin-top: 6px; }
.mk-horas span { flex: 1; text-align: center; font-size: 10px; color: var(--muted); }
.mk-horas span.si { color: var(--text); font-weight: 700; }
.mk-horas .mk-eje { margin-top: 0; }
.mk-equipo { display: grid; gap: 6px; font-size: 12.5px; }
.mk-equipo div { display: flex; justify-content: space-between; gap: 8px; background: var(--peana); border-radius: 10px; padding: 7px 10px; min-width: 0; }
.mk-equipo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-equipo small { color: var(--muted); flex: none; }
@media (prefers-reduced-motion: reduce) { .mk-punto::after { animation: none; } .mk-col i { transition: none; } }

/* Escríbenos: el título encima del formulario, centrado. */
.mk-escribe { max-width: 640px; margin: 0 auto; display: grid; gap: 4px; }
.mk-escribe .cab { justify-content: center; }
#form-marcas { display: grid; gap: 14px; }
.mk-fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@container sitio (max-width: 560px) { .mk-fila2 { grid-template-columns: 1fr; } }
#form-marcas label { display: grid; gap: 6px; font-size: 13.5px; font-weight: 700; }
#form-marcas label i { font-style: normal; font-weight: 400; color: var(--muted); }
#form-marcas input, #form-marcas textarea { height: 52px; border-radius: 26px; border: 1px solid var(--borde); padding: 0 18px; font-size: 15px; font-weight: 400; background: var(--page); color: var(--text); outline: none; }
#form-marcas textarea { height: 120px; border-radius: 22px; padding: 14px 18px; resize: vertical; font-family: inherit; }
#form-marcas input:focus, #form-marcas textarea:focus { border-color: var(--text); }
#form-marcas .boton { justify-self: center; margin-top: 4px; }
#form-marcas .boton:disabled { opacity: .6; }
.mk-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mk-nota { margin: 0; text-align: center; font-size: 12.5px; color: var(--muted); }
.mk-nota.bien { color: var(--verde); font-weight: 600; font-size: 14px; }
.mk-nota.mal { color: var(--rojo); font-weight: 600; }
.mk-banda .tarjeta-b { min-height: 0; }
/* Fitmarket con la cabecera de la portada (2026-10-25, el usuario): la frase es el título, con la misma
   letra, tamaño y aire que «Tu ropa, tu colección.» (4,8 % del ancho de la vitrina, que cabe en la
   ventana; 9,4 % en el móvil) y el buscador debajo, como allí. */
.fm-web { padding-top: 0; }
.fm-cabeza { padding-top: clamp(40px, 7vh, 76px); gap: 0; margin-bottom: 34px; }
.fm-titulo { margin: 0 0 36px; font-family: var(--display); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; text-wrap: balance; max-width: 16ch;
  font-size: max(30px, min(4.8vw, calc((100svh - 56px) * 16 / 9 * 0.048))); }
.fm-cabeza .fm-buscador { margin-bottom: 22px; }
@container sitio (max-width: 640px) { .fm-titulo { font-size: 9.4vw; margin-bottom: 26px; } }
/* Las medidas salen de la misma cuenta que la vitrina (--esc, su ancho): el título a 10,5 % de su alto,
   34 de aire y el buscador al 40 % de ancho y 4,2 % de alto. */
html.fitmarket { --esc: min(100vw, calc((100svh - 56px) * 16 / 9)); }
.fm-cabeza { padding-top: calc(var(--esc) * 9 / 16 * 0.105); }
.fm-titulo { margin-bottom: 34px; }
.fm-cabeza .fm-buscador { width: min(100%, calc(var(--esc) * 0.40)); max-width: none; height: max(48px, calc(var(--esc) * 0.042)); }
@container sitio (max-width: 640px) { .fm-cabeza { padding-top: 40px; } .fm-cabeza .fm-buscador { width: 100%; } }
.fm-cabeza > * { min-width: 0; max-width: 100%; }
.fm-cabeza .fm-buscador input { width: 0; }

/* La banda «Toda tu ropa, en un sitio.» cabe en la pantalla (2026-10-26, el usuario: medía 756 px en una
   ventana de 860). Sin alto mínimo, menos aire, y las tres imágenes del mismo alto según la ventana;
   los fits, enteros. */
.banda { padding-block: 48px 52px; }
.banda .tarjeta-b { min-height: 0; padding: 22px; gap: 12px; }
.banda .tarjeta-b h3 { min-height: 2.3em; }
.banda .tarjeta-b .imagen, .banda .tarjeta-b .imagen.dia { flex: none; aspect-ratio: auto; min-height: 0; height: clamp(190px, 30svh, 260px); }
.banda .tarjeta-b .imagen.alta img, .banda .tarjeta-b .imagen.dia img { object-fit: contain; }
.banda .tarjeta-b .imagen.dia .sin-fit { inset: 0 18%; width: auto; }
.banda .tarjeta-b .imagen.sola img { inset: 10%; width: 80%; height: 80%; }
/* La tarjeta del Diario es la más alta (lleva la semana): en las otras dos la imagen llena lo que sobra. */
.banda .tarjeta-b .imagen:not(.dia) { flex: 1 0 auto; }
/* «Fitm, en tu dispositivo móvil», centrado entre su línea y el pie (2026-10-26, el usuario: quedaba
   arriba, con 56 px encima y 96 debajo). */
#descargar { padding-bottom: 0; }
#descargar .franja { padding-block: 76px; }
@container sitio (max-width: 640px) { #descargar .franja { padding-block: 56px; } }
/* Los fits de la banda: fotos ensanchadas con su propio fondo de estudio (img/fit-*-ancho.webp), así
   que llenan la caja sin franjas a los lados y sin cortar la persona. */
.banda .tarjeta-b .imagen.alta img, .banda .tarjeta-b .imagen.dia img { object-fit: cover; object-position: center; }
.banda .tarjeta-b .imagen.dia .sin-fit { inset: 0; }
/* Las prendas, del tamaño de las de Prendas en toda la web (2026-10-26, el usuario: en la portada y en
   Fitmarket eran más grandes, 232 px frente a 178). Cinco columnas a lo ancho dan 182; con la ventana
   más estrecha, cuatro; en el móvil, dos como siempre. */
#catalogo .rejilla, .fm-rejilla { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#estante-recien { grid-auto-columns: calc((100% - 4 * 16px) / 5); }
@container sitio (max-width: 900px) {
  #catalogo .rejilla, .fm-rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #estante-recien { grid-auto-columns: calc((100% - 3 * 16px) / 4); }
}
@container sitio (max-width: 640px) {
  #catalogo .rejilla, .fm-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #estante-recien { grid-auto-columns: 44%; }
}
/* Con cuatro columnas, ocho prendas en Tendencias (dos filas llenas). */
@container sitio (max-width: 900px) and (min-width: 641px) { #catalogo .rejilla > :nth-child(n+9) { display: none; } }
/* El borde blanco alrededor de la pantalla de Fitmarket en Cómo funciona (2026-10-26, el usuario): el
   iPhone tenía el fondo blanco y asomaba por las esquinas y al entrar la pantalla. Con una pantalla
   oscura delante, el iPhone es negro. */
.tel:has(.pantalla.oscura.activa), .cap .tel:has(.pantalla.oscura) { background: #0F0F0F; }
@container sitio (max-width: 900px) and (min-width: 641px) { .fm-mas .fm-rejilla > :nth-child(n+5) { display: none; } }
@container sitio (max-width: 640px) { .fm-mas .fm-rejilla > :nth-child(n+5) { display: none; } }

/* «Véndela» en Cómo funciona (2026-10-26, opción A de maquetas/vendela): Vender → Explorar → la
   pregunta, con las pantallas de Fitmarket. Todo con «vr-»: .fotos, .mapa o .rejilla ya existen.
   Fases (data-fase): 0 vacía, 1 la foto del abrigo (solo esa: el usuario, 2026-10-26), 3 Como nuevo, 4 toca Publicar, 5 Explorar, 6 tu abrigo,
   7 la pregunta, 8 se va. */
.pantalla.vr { padding: 0; gap: 0; }
.vr-vender, .vr-explorar { position: absolute; inset: 0; padding: 34px 14px 14px; display: flex; flex-direction: column; gap: 9px; transition: opacity .35s ease; }
.vr-explorar { opacity: 0; }
.vr:is([data-fase="5"], [data-fase="6"], [data-fase="7"], [data-fase="8"]) .vr-vender { opacity: 0; }
.vr:is([data-fase="5"], [data-fase="6"], [data-fase="7"], [data-fase="8"]) .vr-explorar { opacity: 1; }
.vr .p-titulo { display: flex; align-items: center; gap: 8px; }
.vr .p-titulo span { font-size: 18px; line-height: 1; }
.vr .p-titulo b { font: 700 14px var(--display); letter-spacing: -0.02em; }
.vr small { color: #A09F9B; font-size: 10.5px; }
.vr-prenda { display: flex; align-items: center; gap: 10px; }
.vr-prenda .h { width: 40px; height: 40px; border-radius: 10px; background: #F8F8F8; display: grid; place-items: center; flex: none; }
.vr-prenda .h img { width: 80%; }
.vr-prenda small { display: block; }
.vr-prenda b { font-size: 12.5px; }
.vr-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.vr-fotos span { position: relative; aspect-ratio: 4 / 5; border-radius: 10px; box-shadow: inset 0 0 0 1.5px #2F2F2D; overflow: hidden; display: grid; place-items: center; color: #A09F9B; font-size: 16px; }
.vr-fotos img { position: absolute; inset: 0; width: 100%; height: 100%; background: #F8F8F8; opacity: 0; scale: .9; transition: opacity .3s ease, scale .35s cubic-bezier(.2,.8,.2,1); }
.vr-fotos img.vr-peana { object-fit: contain; padding: 12%; }
.vr:not([data-fase="0"]) .vr-fotos span:first-child img { opacity: 1; scale: 1; }
.vr-dos { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.vr-campo { border-radius: 12px; background: #1D1D1C; padding: 7px 10px; }
.vr-campo small { display: block; }
.vr-campo b { font: 700 13px var(--display); display: block; min-height: 16px; }
.vr-campo .cursor { display: inline-block; width: 1.5px; height: 12px; background: #F2F2EF; vertical-align: -1px; animation: punto 1s steps(1) infinite; }
.vr-estados { display: flex; gap: 5px; flex-wrap: wrap; }
.vr-estados span { border-radius: 99px; padding: 4px 9px; font-size: 10.5px; box-shadow: inset 0 0 0 1px #2F2F2D; color: #A09F9B; transition: background .25s ease, color .25s ease; }
.vr:is([data-fase="3"], [data-fase="4"], [data-fase="5"]) .vr-estados .como { background: #F2F2EF; color: #111; box-shadow: none; font-weight: 700; }
.vr-donde { display: grid; gap: 4px; }
/* El mapa, en la proporción del de la app (150 de alto en un ancho de unos 350). */
.vr-mapa { position: relative; aspect-ratio: 2.3; border-radius: 12px; overflow: hidden; background:
    linear-gradient(115deg, transparent 46%, #2A2A28 46% 48.5%, transparent 48.5%),
    linear-gradient(25deg, transparent 58%, #262624 58% 60%, transparent 60%),
    linear-gradient(160deg, transparent 28%, #242422 28% 30%, transparent 30%),
    linear-gradient(75deg, transparent 70%, #222220 70% 71.5%, transparent 71.5%), #191918; }
.vr-mapa::after { content: ''; position: absolute; left: 50%; top: 50%; width: 38%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: rgba(242,242,239,.12); box-shadow: inset 0 0 0 1.5px rgba(242,242,239,.7); }
.vr-mapa b { position: absolute; left: 8px; top: 6px; font-size: 10.5px; }
.vr-publicar { margin-top: auto; background: #F2F2EF; color: #111; border-radius: 99px; text-align: center; font-weight: 700; font-size: 12.5px; padding: 10px; transition: scale .15s ease, opacity .15s ease; }
.vr[data-fase="4"] .vr-publicar { scale: .95; opacity: .8; }
.vr-logo .fm-logo { font: 800 14px var(--display); letter-spacing: -0.04em; }
.vr-busca { display: flex; align-items: center; gap: 6px; border-radius: 99px; background: #1D1D1C; padding: 7px 10px; color: #A09F9B; font-size: 11px; white-space: nowrap; overflow: hidden; }
.vr-busca svg { width: 13px; height: 13px; flex: none; }
/* La cuadrícula sigue por debajo del borde, como en la app: se corta la tercera fila. */
.vr-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 8px; }
.vr-tarj { display: grid; gap: 3px; min-width: 0; }
.vr-tarj .f { position: relative; aspect-ratio: 4 / 5; border-radius: 12px; background: #F8F8F8; display: grid; place-items: center; overflow: hidden; }
.vr-tarj .f img { width: 74%; }
.vr-tarj .t { position: absolute; top: 6px; right: 6px; background: #111; color: #fff; border-radius: 6px; padding: 1px 5px; font-size: 9.5px; font-weight: 700; }
.vr-tarj > b { font: 700 13px var(--display); letter-spacing: -0.02em; }
.vr-tarj > small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vr-tarj > small strong { color: #F2F2EF; }
.vr-tarj.nueva { opacity: 0; scale: .9; transition: opacity .45s ease, scale .5s cubic-bezier(.2,.8,.2,1); }
.vr:is([data-fase="6"], [data-fase="7"], [data-fase="8"]) .vr-tarj.nueva { opacity: 1; scale: 1; }
.vr-aviso { position: absolute; left: 10px; right: 10px; top: 30px; z-index: 2; display: flex; gap: 8px; align-items: flex-start; background: rgba(38,38,36,.96); border-radius: 16px; padding: 9px 10px; box-shadow: 0 10px 24px rgba(0,0,0,.4); translate: 0 -150%; transition: translate .5s cubic-bezier(.2,.8,.2,1); font-size: 10.5px; line-height: 1.35; }
.vr[data-fase="7"] .vr-aviso { translate: 0 0; }
.vr-aviso .ava { width: 28px; height: 28px; border-radius: 50%; flex: none; background: linear-gradient(135deg, #7C8B6A, #3F4A35); }
.vr-aviso q { display: block; color: #F2F2EF; quotes: '«' '»'; }
@media (prefers-reduced-motion: reduce) { .vr-vender, .vr-explorar, .vr-fotos img, .vr-tarj.nueva, .vr-aviso { transition: none; } }
/* .pantalla.oscura b (el anuncio de antes) ponía todo lo negrita a 18 px en Unbounded. */
.pantalla.vr b { font-family: var(--cuerpo); font-size: inherit; }
.pantalla.vr .p-titulo b, .pantalla.vr .vr-campo b, .pantalla.vr .vr-tarj > b { font-family: var(--display); }
.pantalla.vr .p-titulo b { font-size: 14px; }
.pantalla.vr .vr-prenda b { font-size: 12.5px; }
.pantalla.vr .vr-campo b, .pantalla.vr .vr-tarj > b { font-size: 13px; }
.pantalla.vr .vr-mapa b, .pantalla.vr .vr-aviso b { font-size: 10.5px; font-weight: 700; }


/* ---------- Perfiles en fitm.app/<usuario> (2026-10-26, maquetas/perfil-web) ---------- */
/* Todo con «pf-». La misma disposición que el perfil de la app; las prendas, con las cartas de Prendas. */
.pf-cabeza { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center; }
@container sitio (max-width: 640px) { .pf-cabeza { grid-template-columns: auto minmax(0, 1fr); gap: 16px; } .pf-seguir { grid-column: 1 / -1; justify-self: stretch; } }
.pf-avatar { width: 104px; height: 104px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--peana); font: 800 38px var(--display); color: var(--muted); flex: none; }
.pf-avatar img { width: 100%; height: 100%; object-fit: cover; }
@container sitio (max-width: 640px) { .pf-avatar { width: 76px; height: 76px; font-size: 28px; } }
.pf-nombre { display: flex; align-items: baseline; gap: 6px; margin: 0; font: 800 30px/1.1 var(--display); letter-spacing: -0.035em; overflow-wrap: anywhere; }
@container sitio (max-width: 640px) { .pf-nombre { font-size: 22px; } }
.pf-mas { font-size: .6em; position: relative; top: -.5em; background: linear-gradient(160deg, #F5DFA0, #C9A456 40%, #9C7A2E 60%, #E9CF8A 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pf-bio { margin: 6px 0 0; font-size: 15px; max-width: 52ch; }
.pf-social { margin-top: 8px; display: flex; gap: 14px; color: var(--muted); font-size: 14px; }
.pf-social b { color: var(--text); font-weight: 700; }
.pf-seguir { padding: 11px 26px; }
.pf-seccion { margin-top: 44px; }
.pf-seccion .cab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.pf-ver { border: 0; background: none; font: 600 14px var(--cuerpo); color: var(--text); cursor: pointer; padding: 0; }
.pf-destacados { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.pf-destacado { position: relative; aspect-ratio: 160 / 172; border-radius: 18px; background: var(--peana); }
.pf-destacado img { position: absolute; inset: 17%; width: 66%; height: 66%; object-fit: contain; }
@container sitio (max-width: 640px) { .pf-destacados { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pf-destacado:nth-child(n+4) { display: none; } }
.pf-dias { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.pf-dia { position: relative; aspect-ratio: 3 / 4.1; border: 0; padding: 0; border-radius: 14px; overflow: hidden; background: #F8F8F8; cursor: pointer; }
.pf-dia img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf-dia.sin-foto img { inset: 18%; width: 64%; height: 64%; object-fit: contain; }
@container sitio (max-width: 640px) { .pf-dias { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pf-dia:nth-child(n+4) { display: none; } }
.pf-pestanas { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-bottom: 1px solid var(--borde); margin-top: 44px; }
.pf-pestanas button { border: 0; background: none; padding: 14px 0 12px; color: #9A9A96; cursor: pointer; display: grid; place-items: center; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pf-pestanas button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--text); }
.pf-pestanas svg { width: 24px; height: 24px; }
.pf-rejilla { margin-top: 24px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
@container sitio (max-width: 900px) { .pf-rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container sitio (max-width: 640px) { .pf-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pf-fit { display: grid; gap: 8px; }
.pf-fit-fotos { aspect-ratio: 3 / 4; border-radius: 14px; background: #F8F8F8; display: grid; grid-template-columns: 1fr 1fr; place-items: center; padding: 14px; gap: 6px; }
.pf-fit-fotos img { width: 82%; max-height: 100%; object-fit: contain; }
.pf-vacio { margin: 32px 0 0; text-align: center; color: var(--muted); }
.pf-candado { margin-top: 40px; padding-top: 36px; border-top: 1px solid var(--borde); display: grid; justify-items: center; gap: 8px; }
.pf-candado svg { width: 28px; height: 28px; }
.pf-candado b { font: 700 17px var(--display); letter-spacing: -0.02em; }

/* ---------- Marcas en fitm.app/m/<marca> (2026-10-26, maquetas/marca-web) ---------- */
/* Todo con «mr-». La disposición de la página de marca de la app; los modelos, con las cartas de Prendas. */
.mr-cabeza { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center; }
@container sitio (max-width: 640px) { .mr-cabeza { grid-template-columns: auto minmax(0, 1fr); gap: 16px; } .mr-seguir { grid-column: 1 / -1; justify-self: stretch; } }
.mr-logo { width: 104px; height: 104px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--peana); font: 800 34px var(--display); color: var(--muted); flex: none; }
.mr-logo img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
@container sitio (max-width: 640px) { .mr-logo { width: 76px; height: 76px; font-size: 26px; } }
.mr-nombre { display: flex; align-items: center; gap: 8px; margin: 0; font: 800 30px/1.1 var(--display); letter-spacing: -0.035em; overflow-wrap: anywhere; }
@container sitio (max-width: 640px) { .mr-nombre { font-size: 22px; } }
.mr-sello { width: 22px; height: 22px; flex: none; color: var(--text); }
.mr-donde { margin-top: 4px; color: var(--muted); font-size: 14px; }
.mr-donde a { color: var(--text); font-weight: 600; text-decoration: none; }
.mr-texto { margin: 8px 0 0; font-size: 15px; max-width: 56ch; }
.mr-seguir { padding: 11px 26px; }
.mr-seccion { margin-top: 48px; }
.mr-lanzamientos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@container sitio (max-width: 760px) { .mr-lanzamientos { grid-template-columns: 1fr; } }
.mr-lz { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--borde); min-width: 0; }
.mr-fecha { width: 52px; height: 56px; border-radius: 14px; background: var(--peana); display: grid; place-items: center; align-content: center; line-height: 1; flex: none; }
.mr-fecha b { font: 700 20px var(--display); }
.mr-fecha small { font-size: 12px; color: var(--muted); margin-top: 3px; }
.mr-lz .que { flex: 1; min-width: 0; display: grid; }
.mr-lz .que b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-lz .que small { color: var(--muted); font-size: 13px; }
.mr-campana { width: 38px; height: 38px; border-radius: 50%; border: 0; background: none; box-shadow: inset 0 0 0 1.5px var(--text); display: grid; place-items: center; cursor: pointer; flex: none; color: var(--text); }
.mr-campana svg { width: 17px; height: 17px; }
.mr-rejilla { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@container sitio (max-width: 900px) { .mr-rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mr-rejilla > :nth-child(n+5) { display: none; } }
@container sitio (max-width: 640px) { .mr-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mr-rejilla > :nth-child(n+5) { display: none; } }
.mr-modelo > b { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-puntos { display: flex; gap: 5px; margin-top: 2px; }
.mr-puntos i { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
/* En la comunidad: el muro estilo Pinterest (altos, fits del día; bajos, fotos de su prenda). */
.mr-muro { columns: 4 200px; column-gap: 14px; }
.mr-muro > div { break-inside: avoid; margin-bottom: 14px; border-radius: 16px; overflow: hidden; background: #F8F8F8; position: relative; }
.mr-muro .alto { aspect-ratio: 3 / 4; }
.mr-muro .bajo { aspect-ratio: 1; }
.mr-muro img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@container sitio (max-width: 640px) { .mr-muro { columns: 2; column-gap: 10px; } .mr-muro > div { margin-bottom: 10px; } }
/* La marca en la ficha web lleva a su página (la flechita, como en la app). */
.ficha-datos a.marca { color: var(--text); text-decoration: none; }
.ficha-datos a.marca span { color: var(--muted); }
.ficha-datos a.marca:hover span { color: var(--text); }

/* ---------- Fitmarket por zonas (2026-10-26, maquetas/fitmarket-zonas) ---------- */
/* La píldora del buscador dice dónde buscas; abre el panel. La comuna, bajo cada anuncio. */
.zona-fm { flex: none; display: flex; align-items: center; gap: 6px; height: 38px; max-width: 200px; border: 0; border-radius: 19px; padding: 0 13px; background: var(--peana); color: var(--text); font: 600 13.5px var(--cuerpo); cursor: pointer; }
.zona-fm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zona-fm.lleno { background: var(--text); color: #111; }
.fm-tarjeta .comuna { display: block; margin-top: 2px; font-size: 12.5px; color: #74736F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-velo { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.55); display: grid; place-items: start center; padding: max(72px, 10vh) 16px 16px; overflow-y: auto; }
.fm-velo[hidden] { display: none; }
.fm-panel { width: min(460px, 100%); background: #181817; color: var(--text); border-radius: 22px; box-shadow: 0 0 0 1px var(--borde), 0 30px 60px -20px rgba(0,0,0,.6); padding: 18px; display: grid; gap: 14px; }
.fm-panel-cab { display: flex; align-items: center; justify-content: space-between; }
.fm-panel-cab h2 { margin: 0; font: 700 17px var(--display); letter-spacing: -0.02em; }
.fm-cerrar { border: 0; background: none; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; padding: 2px 6px; }
.fm-campo { position: relative; display: flex; align-items: center; gap: 8px; height: 46px; border-radius: 23px; background: var(--peana); padding: 0 16px; color: var(--muted); }
.fm-campo input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: 15px var(--cuerpo); outline: none; }
.fm-campo:focus-within { box-shadow: inset 0 0 0 1.5px var(--text); }
.fm-sugerencias { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 2; list-style: none; margin: 0; padding: 6px; background: #1F1F1E; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 0 1px var(--borde); }
.fm-sugerencias button { width: 100%; text-align: left; border: 0; background: none; border-radius: 9px; padding: 9px 10px; font: 14.5px var(--cuerpo); color: var(--text); cursor: pointer; }
.fm-sugerencias button:hover, .fm-sugerencias li:first-child button { background: var(--peana); }
.fm-ubicacion { justify-self: start; display: flex; align-items: center; gap: 10px; border: 0; background: none; color: var(--text); font: 600 14.5px var(--cuerpo); cursor: pointer; padding: 2px 4px; }
.fm-elegidas { display: flex; flex-wrap: wrap; gap: 6px; }
.fm-elegidas:empty { display: none; }
.fm-chip { border: 0; border-radius: 99px; padding: 7px 13px; background: var(--peana); color: var(--muted); font: 600 13.5px var(--cuerpo); cursor: pointer; }
.fm-chip.si { background: var(--text); color: #111; }
.fm-chip.si span { margin-left: 4px; opacity: .6; }
.fm-panel-pie { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.fm-quitar { margin-right: auto; border: 0; background: none; color: var(--muted); font: 600 14px var(--cuerpo); cursor: pointer; padding: 0; }
.fm-ver { padding: 11px 22px; }

/* ---------- Ayuda, fitm.app/ayuda (2026-10-26, maquetas/ayuda) ---------- */
.ay-envol { max-width: 820px; }
.ay-cabeza { text-align: center; display: grid; justify-items: center; gap: 22px; }
.ay-cabeza h1 { margin: 0; }
.ay-buscador { width: min(100%, 560px); height: 54px; margin: 0; }
.ay-buscador input { width: 0; }
.ay-temas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; }
.ay-temas a { border-radius: 99px; padding: 8px 15px; background: var(--peana); color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; }
.ay-temas a:hover { background: var(--borde); }
.ay-tema { margin-top: 52px; scroll-margin-top: 80px; }
.ay-tema h2 { margin: 0 0 6px; font: 700 21px var(--display); letter-spacing: -0.025em; }
.ay-tema details { border-bottom: 1px solid var(--borde); }
.ay-tema summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 2px; font-size: 16.5px; font-weight: 600; cursor: pointer; }
.ay-tema summary::-webkit-details-marker { display: none; }
.ay-tema summary::after { content: ''; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); rotate: 45deg; translate: 0 -3px; flex: none; transition: rotate .2s ease, translate .2s ease; }
.ay-tema details[open] summary::after { rotate: 225deg; translate: 0 3px; }
.ay-tema details p { margin: 0 0 18px; padding-right: 30px; font-size: 15.5px; max-width: 64ch; color: var(--text); opacity: .85; }
.ay-tema .camino { font-weight: 600; white-space: nowrap; }
.ay-tema a { color: var(--text); }
.ay-nada { margin-top: 40px; text-align: center; color: var(--muted); }
.ay-escribe { margin-top: 64px; border-radius: 22px; background: var(--peana); padding: 28px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.ay-escribe h3 { margin: 0; font: 700 19px var(--display); letter-spacing: -0.02em; }
.ay-escribe p { margin: 4px 0 0; color: var(--muted); font-size: 14.5px; }
/* El «+» de Fitm+, siempre en dorado metalizado. */
.oro { background: linear-gradient(160deg, #F5DFA0, #C9A456 40%, #9C7A2E 60%, #E9CF8A 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-reduced-motion: reduce) { .ay-tema summary::after { transition: none; } }