/* ============================================================================
   FICHA PARA ANUNCIOS · /ficha/<slug>
   La página por modelo de antes de unificarla con la ficha del home (PR #110), de vuelta como
   destino de las campañas. Una lámina por tienda, generada por herramientas/paginas-modelo.mjs
   (paginaAnuncio). Va sobre paginas.css (papel, cajetín, tinta, barra y pie de las legales); aquí
   solo lo suyo: arriba el texto y la foto lado a lado y la galería a todo el ancho. El texto largo
   sigue en la columna de lectura (780px).

   Las fotos siguen la regla del sitio: mientras bajan no se enseña nada en su lugar
   (ni marco vacío ni texto alt) y la que falla se quita. Lo hace el script del <head>
   de cada ficha (.js en <html>, .ok en la foto al cargar, hidden si falla); su lugar
   queda apartado por width/height para que nada brinque. Sin JS se ven como siempre.
   ========================================================================== */
.migas{margin-bottom:14px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.migas ol{list-style:none;display:flex;flex-wrap:wrap;row-gap:4px}
.migas li:not(:last-child)::after{content:"/";margin:0 .75em;opacity:.55}
.migas a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s ease,color .15s ease}
.migas a:hover{color:var(--ink);border-bottom-color:var(--orange)}
.migas [aria-current]{color:var(--ink)}

/* texto a la izquierda, foto a la derecha; en angosto, uno sobre otro en la columna de lectura */
.modelo{display:grid;gap:clamp(26px,4vw,56px);align-items:start}
.modelo__txt,.modelo__foto{width:100%;max-width:var(--col);margin:0 auto}
@media (min-width:1000px){
  .modelo{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
  .modelo__txt,.modelo__foto{max-width:none}
}
.modelo .cajetin{grid-template-columns:1fr 1fr}
.modelo .cajetin div:nth-child(odd){border-left:0}
.modelo .cajetin div:nth-child(n+3){border-top:1px solid var(--line)}
.acciones{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:clamp(18px,2.6vw,24px)}
.acciones .btn:not(.btn--wa):hover{background:var(--bone-2)}

.foto{margin:0}
.foto[hidden]{display:none}
.foto img{width:100%;height:auto;border:2px solid var(--ink);background:var(--papel);transition:opacity .35s ease}
.js .foto:not(.ok) img{opacity:0}
.modelo__foto img{box-shadow:0 10px 0 -4px rgba(var(--ink-rgb),.14),0 22px 36px -22px rgba(var(--ink-rgb),.5)}

/* la descripción es una hoja del expediente, como el documento de las legales */
.doc.doc--modelo{margin-bottom:0}
.doc--modelo h2 em{font-style:normal;color:var(--orange-t)}
html[data-color="marca"] .doc--modelo h2 em{
  color:inherit;padding:0 .06em;margin:0 -.06em;
  background:linear-gradient(var(--orange),var(--orange)) 0 86%/100% .17em no-repeat;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* versiones: cuatro columnas cortas, caben sin desplazar */
.tabla--versiones table{min-width:0}
.tabla--versiones tbody th{font-weight:600}
.tabla--versiones td{font-family:var(--mono);font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:560px){
  .tabla--versiones table{font-size:14px}
  .tabla--versiones th,.tabla--versiones td{padding:9px 8px}
  .tabla--versiones thead th{letter-spacing:.04em}
  .tabla--versiones td{font-size:12px}
}
.cajetin.cajetin--detalles{margin:0 0 12px}
.cajetin dt{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--muted);margin-bottom:3px}
.cajetin dd{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums}

/* galería: columnas que respetan la proporción de cada foto (dos en celular, tres en escritorio) */
.bloque.bloque--ancho{max-width:none}
.galeria{columns:3 150px;column-gap:14px}
.galeria .foto{break-inside:avoid;margin-bottom:14px}
/* con pocas fotos (hasta 4) las columnas dejan un hueco a media galería: van en renglones */
.galeria:not(:has(> .foto:nth-child(5))){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.galeria:not(:has(> .foto:nth-child(5))) .foto{margin-bottom:0}
@media (min-width:640px){.galeria:not(:has(> .foto:nth-child(5))){grid-template-columns:repeat(3,minmax(0,1fr))}}

/* los otros once modelos: fichitas en retícula, con líneas de cajetín */
.otros ul{
  list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  border:2px solid var(--ink);background:var(--papel);overflow:hidden;
}
.otros li{border-right:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 -1px -1px 0}
.otros a{display:flex;flex-direction:column;gap:3px;height:100%;padding:13px 15px 14px;text-decoration:none;transition:background .15s ease}
.otros a:hover{background:var(--bone-2)}
.otros a b{font-family:var(--disp);font-weight:700;font-size:16.5px;line-height:1.25}
.otros__cod,.otros__dat{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted)}
.otros__dat span{white-space:nowrap}   /* «2–4 personas» no se parte en la raya */
.otros a:hover .otros__cod{color:var(--orange-t)}