/* Merka — la ficha y la tienda (rediseño del 28 sep 2026). Solo la cargan esas dos pantallas. */

/* ==========================================================================
   Ficha de producto (§2.6): galería | datos, y debajo descripción y filas.
   ========================================================================== */
main.fi-main { max-width: none; padding: 0; }
.fi { max-width: 1280px; margin: 0 auto; padding: 24px clamp(16px, 1.6vw, 24px) 56px; display: flex; flex-direction: column; gap: 28px; }
.fi h2 { font-size: 22px; font-weight: 800; margin: 0; }
.fi-ruta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--gris); }
.fi-ruta a { color: var(--tinta); }
.fi-ruta-actual { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.fi-franja { background: var(--suave); color: var(--ambar); border-radius: 14px; padding: 12px 16px; font-size: 15px; }
.fi-franja a { color: inherit; }
.fi-franja.vendido { background: var(--tinta); color: #fff; }
.fi-dueno { background: #fff; border-radius: var(--esquina); box-shadow: var(--sombra-1); padding: 16px; font-size: 15px; }
.fi-dueno.borrador { background: var(--amarillo-suave); }
.fi-dueno ul { margin: 6px 0 0; padding-left: 18px; }
.fi-dueno form { margin-top: 10px; }
.fi-principal { display: flex; flex-wrap: wrap; gap: clamp(24px, 3vw, 44px); align-items: flex-start; }
.fi-galeria { flex: 1 1 440px; min-width: 0; max-width: 680px; display: flex; flex-direction: column; gap: 12px; }
.fi-foto { position: relative; border-radius: 20px; overflow: hidden; background: #ededeb; box-shadow: var(--sombra-2); }
.fi-pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.fi-pista::-webkit-scrollbar { display: none; }
.fi-pista img { flex: 0 0 100%; width: 100%; min-width: 0; aspect-ratio: 1; object-fit: cover; scroll-snap-align: start; display: block; background: #ededeb; }
.fi-sin-foto { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; color: var(--gris); }
.fi-chip { position: absolute; top: 14px; left: 14px; font-size: 13px; font-weight: 700; color: #fff; background: var(--azul); border-radius: 999px; padding: 5px 12px; pointer-events: none; }
.fi-flecha {
  position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; padding: 0; border: 0; border-radius: 999px;
  background: rgba(255,255,255,.92); color: var(--tinta); display: none; align-items: center; justify-content: center; box-shadow: rgba(26,26,26,.14) 0 2px 8px;
}
.js .fi-flecha { display: flex; }
.fi-flecha:hover { background: #fff; }
.fi-flecha.ant { left: 12px; }
.fi-flecha.sig { right: 12px; }
.fi-contador { display: none; position: absolute; right: 14px; bottom: 14px; font-size: 13px; font-weight: 600; color: #fff; background: rgba(26,26,26,.62); border-radius: 999px; padding: 4px 10px; pointer-events: none; }
.js .fi-contador { display: block; }
.fi-miniaturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px; }
.fi-miniaturas a { display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #ededeb; opacity: .7; transition: opacity 160ms ease, box-shadow 160ms ease; }
.fi-miniaturas a:hover, .fi-miniaturas a[aria-current] { opacity: 1; }
.fi-miniaturas a[aria-current] { box-shadow: 0 0 0 2px var(--azul); }
.fi-miniaturas img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fi-info { flex: 1 1 360px; min-width: 0; max-width: 520px; position: sticky; top: 88px; display: flex; flex-direction: column; gap: 18px; }
.fi-cabeza { display: flex; flex-direction: column; gap: 10px; }
.fi-cat { font-size: 14px; color: var(--gris); }
.fi h1 { margin: 0; font-size: clamp(26px, 2.4vw, 34px); font-weight: 800; line-height: 1.15; letter-spacing: -.4px; text-wrap: pretty; }
.fi-precio { font-size: clamp(30px, 2.8vw, 38px); font-weight: 800; letter-spacing: -.6px; }
.fi-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 15px; }
.fi-meta span { display: flex; align-items: center; gap: 6px; }
.fi-meta .i { color: var(--azul); }
.fi-escribir {
  width: 100%; min-height: 54px; padding: 14px 20px; border: 0; border-radius: 16px 16px 16px 6px; background: var(--amarillo); color: var(--tinta);
  display: flex; align-items: center; justify-content: center; gap: 10px; font: inherit; font-size: 17px; font-weight: 700; text-decoration: none;
  box-shadow: rgba(180,150,0,.28) 0 8px 18px; cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease;
}
.fi-escribir:hover { transform: translateY(-2px); box-shadow: rgba(180,150,0,.34) 0 12px 24px; }
.fi-info form { margin: 0; }
.fi-nota { margin: -8px 0 0; font-size: 14px; color: var(--gris); }
.fi-compartir { display: flex; flex-wrap: wrap; gap: 8px; }
.fi-pildora {
  width: auto; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 0; border-radius: 999px; background: #fff;
  color: var(--tinta); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: var(--sombra-1); cursor: pointer;
}
.fi-pildora[hidden] { display: none; }
.fi-pildora:hover { color: var(--azul); }
.fi-vendedor { background: #fff; border-radius: 18px; box-shadow: var(--sombra-2); padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.fi-vendedor-fila { display: flex; align-items: center; gap: 12px; }
.fi-vendedor-fila > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fi-vendedor-fila strong { font-size: 18px; }
.fi-inicial { width: 52px; height: 52px; flex: none; border-radius: 16px; background: var(--azul); color: var(--amarillo); font-size: 22px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.fi-gris { font-size: 14px; color: var(--gris); }
.fi-rep { font-size: 14px; }
.fi-boton-azul { display: block; padding: 11px 14px; border-radius: 12px 12px 12px 4px; background: var(--azul); color: #fff; font-size: 15px; font-weight: 700; text-align: center; text-decoration: none; }
.fi-boton-azul:hover { background: #1b2050; }
.fi-confianza { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fi-confianza li { display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.35; }
.fi-confianza .i { color: var(--azul); }
.fi-detalle { display: flex; flex-wrap: wrap; gap: clamp(20px, 2.4vw, 32px); align-items: flex-start; }
.fi-caja { flex: 1 1 440px; min-width: 0; background: #fff; border-radius: 20px; box-shadow: var(--sombra-2); padding: clamp(20px, 2vw, 28px); display: flex; flex-direction: column; gap: 12px; }
.fi-caja + .fi-caja { flex-basis: 320px; }
/* La calificación del producto (4 oct 2026): a todo el ancho, aparte de la de la tienda. */
.fi-caja.fi-calificacion { flex-basis: 100%; }
.fi-calif-nota { margin: 0; font-size: 16px; }
.fi-calif-nota strong { font-size: 22px; font-weight: 800; }
.fi-calif-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%,260px),1fr)); gap: 12px; }
.fi-calif-lista li { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 14px; background: var(--suave); }
.fi-calif-lista p { margin: 0; line-height: 1.45; }
.fi-descripcion { margin: 0; font-size: 17px; line-height: 1.6; max-width: 62ch; white-space: pre-line; overflow-wrap: anywhere; }
.fi-datos { margin: 0; }
.fi-datos div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid #f1f1ef; font-size: 15px; }
.fi-datos dt { color: var(--gris); }
.fi-datos dd { margin: 0; font-weight: 600; text-align: right; }
.fi-fila { display: flex; flex-direction: column; gap: 16px; }
.fi-fila-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; }
.fi-fila-cabeza h2 { font-size: clamp(22px, 2vw, 28px); }
.fi-fila-cabeza a { color: var(--azul); font-size: 15px; font-weight: 600; }
.fi-gancho, .fi-reportar { margin: 0; font-size: 15px; }
.fi-reportar .reportar { font-size: 14px; }
.fi-barra { display: none; }
.fi-escribir.chico { width: auto; min-height: 48px; height: 48px; padding: 0 18px; font-size: 16px; border-radius: 14px 14px 14px 5px; box-shadow: none; }
@media (max-width: 760px) {
  .fi { padding-top: 16px; gap: 20px; }
  .fi-galeria { margin: 0 -16px; max-width: none; flex-basis: 100%; }
  .fi-foto { border-radius: 0; box-shadow: none; background: none; }
  .fi-pista { gap: 8px; padding: 0 16px; scroll-padding: 0 16px; }
  .fi-pista img { flex-basis: calc(100% - 40px); width: calc(100% - 40px); border-radius: 16px; }
  .fi-pista img:only-child { flex-basis: 100%; width: 100%; }
  .fi-flecha, .js .fi-flecha, .fi-miniaturas { display: none; }
  /* Guardar, copiar y compartir: se tocan con el dedo. */
  .fi-pildora { min-height: 44px; }
  .fi-chip { left: 28px; }
  .fi-contador, .js .fi-contador { right: 28px; }
  .fi-info { position: static; max-width: none; }
  .fi-confianza { grid-template-columns: 1fr; }
  .fi-confianza li { flex-direction: row; align-items: center; }
  .fi-barra {
    display: flex; position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 57; align-items: center; gap: 12px;
    padding: 10px 16px; background: #fff; box-shadow: rgba(26,26,26,.12) 0 -6px 18px;
  }
  .fi-barra form { margin: 0; }
  .fi-barra-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .fi-barra-txt span { font-size: 13px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fi-barra-txt strong { font-size: 20px; font-weight: 800; }
  main.fi-main { padding-bottom: 72px; }
}

/* Los botones del dueño en la ficha (vender/_acciones). */
.fi-dueno .acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.fi-dueno .acciones form { margin: 0; flex: 1 1 140px; }
.fi-dueno .acciones button, .fi-dueno .acciones .boton-enlace {
  display: block; width: 100%; padding: 11px 12px; border: 0; border-radius: 12px 12px 12px 4px; font: inherit; font-size: 15px; font-weight: 700;
  text-align: center; text-decoration: none; background: var(--amarillo); color: var(--tinta); cursor: pointer; flex: 1 1 140px;
}
.fi-dueno .acciones .secundario { background: var(--suave); font-weight: 600; }
.fi-dueno .acciones .peligro { background: #fff; color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.fi-dueno.borrador button { width: auto; padding: 11px 18px; border-radius: 12px 12px 12px 4px; background: var(--amarillo); color: var(--tinta); }
.fi-pildora.compartir::before { content: none; }

/* ==========================================================================
   Tienda (§2.5): banda azul de borde a borde y la rejilla debajo.
   ========================================================================== */
main.ti-main { max-width: none; padding: 0; }
.ti-banda { background: var(--azul); color: #fff; }
.ti-banda-in { max-width: 1440px; margin: 0 auto; padding: 28px clamp(16px, 1.6vw, 24px) 20px; display: flex; flex-direction: column; gap: 20px; }
.ti-banda h1 { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.2; color: #fff; }
.ti-buscar { position: relative; display: flex; gap: 8px; margin: 0; }
.ti-buscar > input[type=search] {
  flex: 1; min-width: 0; height: 48px; padding: 0 16px; border: 0; border-radius: 12px; background: #fff;
  font: inherit; font-size: 17px; color: var(--tinta);
}
.ti-boton-buscar { width: auto; min-height: 48px; padding: 0 20px; border: 0; border-radius: 12px; background: var(--amarillo); color: var(--tinta); font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.ti-filtros { flex: none; }
.ti-filtros summary {
  list-style: none; display: flex; align-items: center; min-height: 48px; padding: 0 20px; border: 1px solid rgba(255,255,255,.4);
  border-radius: 12px; font-size: 17px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.ti-filtros summary::-webkit-details-marker { display: none; }
.ti-filtros[open] summary { background: #fff; color: var(--azul); }
.ti-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20; background: #fff; color: var(--tinta);
  border-radius: 14px; box-shadow: var(--sombra-capa); padding: 16px; display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-end;
}
.ti-panel fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ti-panel legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--gris); }
.ti-precio { display: flex; gap: 8px; }
.ti-precio input { width: 130px; height: 42px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--suave); font: inherit; font-size: 16px; }
.ti-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ti-chip { display: inline-flex; margin: 0; font-weight: 600; cursor: pointer; }
.ti-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ti-chip span { padding: 9px 14px; border-radius: 999px; background: var(--suave); font-size: 14px; }
.ti-chip input:checked + span { background: var(--azul); color: #fff; }
.ti-chip input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }
.ti-panel-pie { display: flex; align-items: center; gap: 16px; }
.ti-panel-pie a { color: var(--enlace); font-size: 15px; }
.ti-resumen { margin: 0; background: #fff; color: var(--tinta); border-radius: 12px; padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 15px; }
.ti-resumen span { flex: 1; min-width: 140px; }
.ti-resumen a { color: var(--enlace); }

/* Las categorías: una línea; «Más» abre la segunda. */
.ti-cats { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-top: 4px; }
.ti-cats::-webkit-scrollbar { display: none; }
.ti-cats.medida { overflow: hidden; }
.ti-cats.abierta { flex-wrap: wrap; row-gap: 14px; }
.ti-cat {
  flex: 0 0 80px; min-width: 80px; width: 80px; padding: 2px 0 6px; border: 0; background: none; color: #eceef7; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; cursor: pointer; transition: transform 180ms ease;
}
.ti-cat[hidden] { display: none; }
.ti-cat:hover { transform: translateY(-4px); }
.ti-cat:active { transform: translateY(-1px) scale(.96); }
.ti-cat-ico { width: 34px; height: 34px; display: block; }
.ti-cat span { font-size: 12px; font-weight: 500; line-height: 1.2; text-align: center; }
.ti-cat[aria-current] { color: var(--amarillo); }
.ti-cat[aria-current] span { font-weight: 700; }
.ti-cat[aria-current]::after { content: ""; width: 20px; height: 3px; border-radius: 2px; background: var(--amarillo); }
.ti-mas { color: #fff; }
.ti-cat:focus-visible { outline: 2px solid var(--amarillo); outline-offset: 2px; border-radius: 12px; }

.ti-cuerpo { max-width: 1440px; margin: 0 auto; padding: 24px clamp(16px, 1.6vw, 24px) 48px; display: flex; flex-direction: column; gap: 24px; }
.ti-vacio { background: #fff; border-radius: 14px; box-shadow: var(--sombra-1); padding: 24px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ti-vacio strong { font-size: 19px; }
.ti-vacio p { margin: 0; color: var(--gris); }
.ti-vacio-botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.ti-paginas { border-top: 1px solid var(--linea); padding-top: 16px; display: flex; justify-content: space-between; font-size: 17px; }
.ti-paginas a { color: var(--tinta); font-weight: 600; }
@media (max-width: 600px) {
  .ti-banda-in { padding-top: 20px; gap: 16px; }
  .ti-buscar { flex-wrap: wrap; }
  .ti-buscar > input[type=search] { flex-basis: 100%; }
  .ti-boton-buscar { flex: 1; }
  .ti-panel { position: static; flex-basis: 100%; margin-top: 8px; }
  .ti-filtros { flex: 1; }
  .ti-filtros[open] { flex-basis: 100%; }
  .ti-filtros summary { justify-content: center; }
  .ti-precio input { width: 100%; }
}

/* ==========================================================================
   Perfil público / tienda del vendedor (§2.7), con el "nada más" del §4.
   ========================================================================== */
/* Con aire a los lados también en la tableta (3 oct 2026: entre 761 y 1300 px iba pegada a los bordes). */
.pf { width: calc(100% - 2 * clamp(16px, 3vw, 32px)); max-width: 1280px; margin: 0 auto; padding: 20px 0 48px; display: flex; flex-direction: column; gap: 24px; }
main.pf-main { max-width: none; padding: 0; }
.pf-propio { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; background: var(--azul); color: #fff; border-radius: 14px; padding: 12px 16px; font-size: 15px; }
.pf-propio span { flex: 1 1 220px; }
.pf-propio a { color: var(--amarillo); font-weight: 700; }
.pf-cabecera { background: #fff; border-radius: 20px; box-shadow: var(--sombra-2); overflow: hidden; }
.pf-portada {
  position: relative; height: clamp(120px, 14vw, 200px); overflow: hidden; background: var(--azul);
  background-image: radial-gradient(ellipse 50% 90% at 88% 10%, rgba(255,234,65,.22) 0%, rgba(255,234,65,0) 60%), linear-gradient(120deg, #252B60 0%, #333b7a 100%);
}
/* La portada con imagen: el mismo marco 3:1 en todas las pantallas (1 oct
   2026), para que el encuadre que se elige sea el que se ve en todas. */
.pf-portada.con-imagen { height: auto; aspect-ratio: 3 / 1; background: var(--suave); }
.pf-portada.con-imagen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-portada span {
  position: absolute; left: clamp(20px, 3vw, 40px); bottom: -22px; font-size: clamp(64px, 8vw, 120px); font-weight: 800;
  letter-spacing: -3px; line-height: 1; color: #fff; opacity: .06; white-space: nowrap;
}
.pf-datos { padding: 0 clamp(18px, 2.6vw, 32px) 22px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 24px; }
.pf-logo {
  position: relative; z-index: 1; flex: none; margin-top: -48px; width: 104px; height: 104px; border-radius: 28px 28px 28px 8px; background: var(--amarillo); color: var(--azul);
  font-size: 40px; font-weight: 800; display: flex; align-items: center; justify-content: center; object-fit: cover;
  box-shadow: #fff 0 0 0 5px, rgba(26,26,26,.14) 0 10px 24px;
}
.pf-tienda .pf-logo { width: clamp(96px, 11vw, 144px); height: clamp(96px, 11vw, 144px); margin-top: clamp(-72px, -6vw, -48px); font-size: clamp(40px, 5vw, 60px); background-color: #fff; }
.pf-tienda span.pf-logo { background: var(--amarillo); }
.pf-tienda .pf-quien h1 { font-size: clamp(30px, 3.4vw, 46px); letter-spacing: -1.2px; }
.pf-tienda .pf-quien p { font-size: 16px; }
.pf-compartir { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 20px; border-radius: 14px 14px 14px 4px; background: var(--amarillo); color: var(--tinta); font-size: 15px; font-weight: 700; text-decoration: none; box-shadow: rgba(26,26,26,.12) 0 6px 14px; }
.pf-compartir:hover { box-shadow: var(--sombra-hover); }
.pf-descripcion { margin: 0; padding: 0 clamp(18px, 2.6vw, 32px) 4px; max-width: 70ch; font-size: 16px; line-height: 1.5; color: var(--tinta); white-space: pre-line; }
.pf-cifras { list-style: none; margin: 0; padding: 16px clamp(18px, 2.6vw, 32px) 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.pf-cifras li { display: flex; align-items: baseline; gap: 6px; padding: 10px 16px; border-radius: 14px; background: var(--suave); font-size: 14px; color: var(--gris); }
.pf-cifras strong { font-size: 18px; font-weight: 800; color: var(--tinta); }
.pf-cifras .pf-antiguedad { align-items: center; color: var(--tinta); }
.pf-categorias { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.pf-categorias a { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 16px; border-radius: 999px; background: #fff; box-shadow: var(--sombra-1); color: var(--tinta); font-size: 15px; font-weight: 600; text-decoration: none; }
.pf-categorias a span { color: var(--gris); font-weight: 500; }
.pf-categorias a[aria-current] { background: var(--azul); color: #fff; }
.pf-categorias a[aria-current] span { color: rgba(255,255,255,.75); }
.pf-vacio { margin: 0; color: var(--gris); }
.pf-quien { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 12px; }
.pf-quien h1 { margin: 0; font-size: clamp(26px, 2.6vw, 36px); font-weight: 800; line-height: 1.05; letter-spacing: -.8px; }
.pf-quien p { margin: 0; font-size: 15px; color: var(--gris); }
.pf-quien strong { color: var(--tinta); font-weight: 600; }
.pf-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.pf-meta > span { color: var(--tinta); }
.pf-gris { color: var(--gris); font-weight: 400; }
.pf-acciones { flex: none; display: flex; flex-wrap: wrap; gap: 8px; }
.pf-seccion { display: flex; flex-direction: column; gap: 16px; }
.pf-seccion h2 { margin: 0; font-size: clamp(22px, 2vw, 28px); font-weight: 800; }
.pf-lados { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.pf-lado { background: #fff; border-radius: 18px; box-shadow: var(--sombra-1); padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.pf-lado h3 { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--gris); }
.pf-lado p { margin: 0; font-size: 15px; }
.pf-nota { font-size: 22px !important; font-weight: 800; }
.pf-nota .pf-gris { font-size: 15px; }
@media (max-width: 760px) {
  .pf { width: auto; padding: 16px 16px 40px; }
  .pf-datos { align-items: flex-start; }
  .pf-acciones { flex-basis: 100%; }
  /* Botones parejos (3 oct 2026): llenan la fila con el contenido al
     centro; si dos no caben, uno debajo del otro, del mismo ancho. El
     principal (Escribir en la tienda, WhatsApp en la ficha) va entero. */
  .pf-acciones > *, .fi-compartir > * { flex: 1 1 130px; justify-content: center; }
  .fi-compartir > form { display: flex; }
  .fi-compartir > form > button { flex: 1; justify-content: center; min-height: 44px; }
  .fi-compartir .fi-pildora { min-height: 44px; }
  .pf-acciones > .pf-escribir-tienda, .fi-compartir > .compartir { flex-basis: 100%; }
  .pf-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .pf-cifras li { flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 12px; font-size: 13px; }
  .pf-cifras .pf-antiguedad { flex-direction: row; align-items: center; gap: 6px; }
  .pf-cifras strong { font-size: 16px; }
}
/* ==========================================================================
   La tienda del vendedor como experiencia propia (1 oct 2026): la cabecera
   de Merka se achica a una franja blanca con iconos; manda la tienda.
   ========================================================================== */
.cab.cab-tienda { background: #fff; border-bottom: 1px solid var(--linea); }
.cab-tienda .cab-in { height: 56px; }
.cab-tienda .cab-icono { display: block; width: 34px; height: 34px; border-radius: 10px; }
.cab-tienda .cab-busca, .cab-tienda .cab-ciudad { display: none; }
.cab-tienda .cab-lupa { display: flex; width: 40px; height: 40px; border-radius: 12px; align-items: center; justify-content: center; color: var(--azul); background: none; }
.cab-tienda .cab-nav a { width: 48px; height: 44px; color: var(--azul); }
.cab-tienda .cab-nav a:hover, .cab-tienda .cab-lupa:hover, .cab-tienda .cab-entrar:hover { background: var(--suave); }
.cab-tienda .cab-nav a[aria-current] { background: var(--suave); }
.cab-tienda .cab-nav .punto { top: 2px; right: 4px; }
.cab-tienda .cab-avatar { width: 34px; height: 34px; font-size: 15px; }
.cab-entrar { display: flex; width: 40px; height: 40px; border-radius: 12px; align-items: center; justify-content: center; color: var(--azul); }
.pf-tienda { padding-top: 16px; }

/* La franja de la tienda en las pestañas que no son Inicio. */
.pf-franja { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; background: #fff; border-radius: 20px; box-shadow: var(--sombra-2); padding: 14px clamp(16px, 2vw, 24px); }
.pf-franja-marca { display: flex; align-items: center; gap: 14px; min-width: 0; color: var(--tinta); text-decoration: none; }
.pf-franja-marca > span { display: flex; flex-direction: column; min-width: 0; }
.pf-franja-marca strong { font-size: 20px; font-weight: 800; letter-spacing: -.4px; overflow-wrap: anywhere; }
.pf-franja-marca > span > span { font-size: 14px; color: var(--gris); }
.pf-franja-logo { flex: none; width: 52px; height: 52px; border-radius: 16px 16px 16px 5px; object-fit: cover; background: var(--amarillo); color: var(--azul); font-size: 22px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

/* Las pestañas: pegadas arriba al bajar, con el buscador de la tienda. */
.pf-pestanas { position: sticky; top: 56px; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 8px; background: rgba(246,246,246,.94); backdrop-filter: blur(8px); border-radius: 16px; }
.pf-pestanas-lista { flex: 1 1 auto; min-width: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.pf-pestanas-lista::-webkit-scrollbar { display: none; }
.pf-pestanas-lista a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 12px; color: var(--tinta); font-size: 15px; font-weight: 600; text-decoration: none; }
.pf-pestanas-lista a:hover { background: #fff; }
.pf-pestanas-lista a[aria-current] { background: var(--azul); color: #fff; }
.pf-buscar { flex: 0 1 260px; min-width: 0; display: flex; align-items: center; gap: 8px; height: 44px; margin: 0; padding: 0 14px; background: #fff; border-radius: 999px; color: var(--gris); box-shadow: var(--sombra-1); }
.pf-buscar input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; font: inherit; font-size: 15px; outline: none; }
.pf-seccion-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.pf-seccion h1 { margin: 0; font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; letter-spacing: -.6px; }
.pf-ver-todo { font-size: 15px; font-weight: 700; color: var(--azul); }
.pf-paginas { display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 15px; color: var(--gris); }
.pf-paginas a { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 12px; background: #fff; box-shadow: var(--sombra-1); color: var(--tinta); font-weight: 600; text-decoration: none; }

/* Categorías: una tarjeta por categoría, con su foto. */
.pf-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 16px; }
.pf-cat { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 18px; background: #fff; box-shadow: var(--sombra-1); color: var(--tinta); text-decoration: none; transition: box-shadow 160ms ease, transform 160ms ease; }
.pf-cat:hover { box-shadow: var(--sombra-hover); transform: translateY(-2px); }
.pf-cat-foto { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--suave); margin-bottom: 6px; }
.pf-cat-foto img { width: 100%; height: 100%; object-fit: cover; }
.pf-cat strong { font-size: 16px; }
.pf-cat > span:last-child { font-size: 14px; color: var(--gris); }

/* El Inicio de la tienda por secciones (3 oct 2026): filas que se deslizan
   (seis a la vista en el escritorio, cuatro en la tableta, dos y algo en el
   celular, para que se note que hay más) y, con ratón, flechas. */
.pf-fila { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 5 * 16px) / 6); gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 6px; scrollbar-width: none; padding: 6px; margin: -6px; }
.pf-fila::-webkit-scrollbar { display: none; }
.pf-fila > * { min-width: 0; scroll-snap-align: start; }
.pf-fila-cats { grid-auto-columns: calc((100% - 4 * 16px) / 5); }
.pf-seccion-cabeza:has(.pf-fila-mandos) { align-items: center; }
.pf-fila-mandos { display: flex; align-items: center; gap: 8px; }
.pf-flecha { width: 40px; height: 40px; padding: 0; border-radius: 999px; background: #fff; color: var(--tinta); box-shadow: var(--sombra-1); display: inline-flex; align-items: center; justify-content: center; }
.pf-flecha[hidden] { display: none; }
.pf-flecha:disabled { opacity: .35; cursor: default; }
.pf-cuantos { margin-left: 6px; font-size: 15px; font-weight: 600; color: var(--gris); letter-spacing: 0; }
@media (max-width: 1100px) {
  .pf-fila { grid-auto-columns: calc((100% - 3 * 16px) / 4); }
  .pf-fila-cats { grid-auto-columns: calc((100% - 3 * 16px) / 4); }
}

/* La cabecera del Inicio en el escritorio (3 oct 2026): los datos a la
   izquierda y la portada a la derecha, en su mismo 3:1 (el encuadre que
   eligió el vendedor) pero más angosta, para que los productos se vean sin
   bajar. La descripción, en cuatro líneas: entera está en Información. */
@media (min-width: 1000px) {
  .pf-tienda .pf-cabecera { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: auto 1fr auto; grid-template-areas: "datos portada" "desc portada" "cifras cifras"; }
  .pf-tienda .pf-portada { grid-area: portada; align-self: start; margin: 14px 14px 0 0; border-radius: 16px; }
  .pf-tienda .pf-datos { grid-area: datos; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px 16px; padding: 26px 28px 0; }
  .pf-tienda .pf-datos .pf-quien { padding-top: 0; }
  .pf-tienda .pf-datos .pf-acciones { grid-column: 1 / -1; }
  .pf-tienda .pf-logo { width: 76px; height: 76px; margin-top: 0; font-size: 34px; border-radius: 22px 22px 22px 7px; }
  .pf-tienda .pf-quien h1 { font-size: clamp(28px, 2.4vw, 38px); }
  .pf-tienda .pf-descripcion { grid-area: desc; padding: 16px 28px 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .pf-tienda .pf-cifras { grid-area: cifras; padding: 14px 28px 18px; }
  .pf-tienda .pf-cifras li { padding: 8px 14px; }
  .pf-tienda .pf-cifras strong { font-size: 16px; }
}

/* En el celular (3 oct 2026): el logo al lado del nombre, una sola fila de
   botones (Escribir con su nombre; Compartir y Copiar, íconos), la
   descripción en dos líneas y las cifras en una franja que se desliza. Así
   los productos asoman en la primera pantalla. */
@media (max-width: 760px) {
  .pf-tienda .pf-datos { flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; padding: 0 16px 14px; }
  .pf-tienda .pf-logo { width: 76px; height: 76px; margin-top: -38px; font-size: 32px; border-radius: 22px 22px 22px 7px; }
  .pf-tienda .pf-datos .pf-quien { flex: 1 1 160px; padding-top: 0; gap: 2px; }
  .pf-tienda .pf-quien h1 { font-size: 26px; letter-spacing: -.8px; }
  .pf-tienda .pf-quien p { font-size: 14px; }
  .pf-cabecera .pf-acciones { flex-wrap: nowrap; gap: 8px; }
  .pf-cabecera .pf-acciones > * { flex: none; }
  .pf-cabecera .pf-acciones > .pf-escribir-tienda { flex: 1 1 auto; justify-content: center; }
  .pf-cabecera .pf-compartir { width: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .pf-cabecera .pf-compartir span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pf-tienda .pf-descripcion { padding: 0 16px; font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pf-cabecera .pf-cifras { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 8px; padding: 10px 16px 14px; }
  .pf-cabecera .pf-cifras::-webkit-scrollbar { display: none; }
  .pf-cabecera .pf-cifras li { flex: none; flex-direction: row; align-items: baseline; gap: 5px; padding: 7px 12px; font-size: 13px; }
  .pf-cabecera .pf-cifras strong { font-size: 15px; }
  .pf-fila, .pf-fila-cats { grid-auto-columns: 42%; gap: 12px; }
  .pf-cuantos { display: block; margin: 2px 0 0; font-size: 14px; }
}
/* Entre 1000 y 1199 px la columna de los datos no alcanza para «Compartir»
   con su nombre: el ícono, como en el celular. */
@media (min-width: 1000px) and (max-width: 1199px) {
  .pf-cabecera .pf-compartir { width: 44px; padding: 0; justify-content: center; }
  .pf-cabecera .pf-compartir span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* «Copiar enlace» de la cabecera, solo el ícono donde no cabe con su nombre
   (celular y la columna del escritorio); al copiar, el aviso se ve igual. */
@media (max-width: 760px), (min-width: 1000px) {
  .pf-cabecera .pf-acciones .fi-pildora { width: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .pf-cabecera .pf-acciones .fi-pildora span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pf-cabecera .pf-acciones .fi-pildora.copiado { width: auto; padding: 0 14px; }
  .pf-cabecera .pf-acciones .fi-pildora.copiado span { position: static; width: auto; height: auto; clip: auto; }
}

/* Información. */
.pf-info { background: #fff; border-radius: 20px; box-shadow: var(--sombra-2); overflow: hidden; }
.pf-info-texto { margin: 0; padding: 22px clamp(18px, 2.6vw, 32px) 0; max-width: 70ch; font-size: 16px; line-height: 1.55; white-space: pre-line; }
.pf-info-datos { margin: 0; padding: 18px clamp(18px, 2.6vw, 32px) 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; }
.pf-info-datos dt { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--gris); }
.pf-info-datos dd { margin: 2px 0 0; font-size: 16px; font-weight: 600; }

/* Opiniones. */
.pf-resumen { margin: 0; font-size: 16px; color: var(--gris); }
.pf-resumen strong { color: var(--tinta); font-size: 18px; }
.pf-resumen .estrella { color: var(--estrella); }
.pf-opiniones { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.pf-opinion { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 18px; background: #fff; box-shadow: var(--sombra-1); }
.pf-opinion p { margin: 0; }
.pf-opinion-estrellas { color: var(--estrella); font-size: 18px; letter-spacing: 2px; }
.pf-apagada { color: var(--borde); }
.pf-opinion-texto { font-size: 16px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.pf-opinion-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; font-size: 14px; color: var(--gris); }

/* Escribir: primero el producto. */
.pf-ayuda { margin: 0; color: var(--gris); font-size: 15px; max-width: 70ch; }
.pf-propio-nota { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--amarillo-suave); font-size: 15px; }
.pf-contactar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pf-contactar li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 16px; background: #fff; box-shadow: var(--sombra-1); }
.pf-contactar form { margin: 0; flex: none; }
.pf-contactar-producto { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--tinta); text-decoration: none; }
.pf-contactar-producto > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.pf-contactar-producto strong { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-contactar-producto > span:last-child > span { font-size: 15px; font-weight: 700; }
.pf-contactar-foto { flex: none; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: var(--suave); }
.pf-contactar-foto img { width: 100%; height: 100%; object-fit: cover; }
.pf-escribir, .pf-escribir-tienda { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px; border: 0; border-radius: 14px 14px 14px 4px; background: var(--azul); color: #fff; font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; }
.pf-escribir.apagado { background: var(--suave); color: var(--gris); cursor: default; }
.pf-escribir-tienda:hover, .pf-escribir:hover { background: var(--azul-hover); }

@media (max-width: 760px) {
  .pf-pestanas { position: static; flex-wrap: wrap; gap: 6px; padding: 6px; }
  .pf-pestanas-lista { flex: 1 1 0; }
  .pf-buscar { flex: 0 0 44px; padding: 0; justify-content: center; cursor: pointer; }
  .pf-buscar-lupa { display: flex; flex: none; width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; }
  .pf-buscar input { flex: 0 0 0; width: 0; }
  .pf-buscar:focus-within, .pf-buscar.con-texto { flex: 1 1 100%; justify-content: flex-start; padding: 0 14px 0 0; }
  .pf-buscar:focus-within .pf-buscar-lupa, .pf-buscar.con-texto .pf-buscar-lupa { width: 40px; }
  .pf-buscar:focus-within input, .pf-buscar.con-texto input { flex: 1 1 auto; width: auto; }
  .pf-franja .pf-acciones { flex-basis: 100%; }
}


/* «Selección de Merka» (2 oct 2026): solo administración la ve en la ficha. */
.fi-seleccion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 24px 0 0; padding: 12px 14px; border-radius: 14px; background: #fff8c4; font-size: 15px; }
.fi-seleccion button { width: auto; padding: 10px 16px; border-radius: 12px; background: var(--azul); color: #fff; font-size: 15px; font-weight: 700; }
/* Dónde se busca (2 oct 2026): un toque, «Toda Colombia» siempre a la vista. */
.ti-donde { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.ti-donde .i { color: var(--amarillo); }
.ti-donde a { display: inline-flex; align-items: center; min-height: 38px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-weight: 600; text-decoration: none; }
.ti-donde a[aria-current] { background: #fff; color: var(--azul); }
.ti-donde a.ti-donde-cambiar { background: none; padding: 6px 4px; font-weight: 400; text-decoration: underline; }
@media (max-width: 760px) {
  .ti-donde { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .ti-donde a, .ti-donde .i { flex: none; }
}
/* La ficha de algo que no le llega a quien mira. */