/* ══════════════════════════════════════════════════════════════
   EL CATÁLOGO

   Una hoja pensada para imprimirse. Lo que se ve en pantalla es
   exactamente lo que sale en el PDF: mismas letras, misma retícula.
   Tres formatos y tres composiciones que se alternan, para que
   pasar páginas no se sienta tieso.
   ══════════════════════════════════════════════════════════════ */

body.catalogo{background:var(--mesa);padding:0 0 60px;margin:0}

/* Los tres formatos. La medida de la hoja manda sobre todo lo demás. */
body.f-carta{--ancho:21.6cm;--alto:27.9cm;--aire:2.2cm}
body.f-media{--ancho:21.6cm;--alto:14cm;--aire:1.4cm}
body.f-telefono{--ancho:10.8cm;--alto:19.2cm;--aire:1cm}

@page{margin:0}
body.f-carta{}
.hoja-cat{
  /* Altura definida, no mínima: sin ella la foto no sabe cuánto puede
     crecer (los porcentajes de alto no resuelven) y se queda pequeña. */
  width:var(--ancho);height:var(--alto);box-sizing:border-box;
  margin:0 auto 16px;padding:var(--aire);
  background:#fff;color:var(--tinta);
  display:flex;flex-direction:column;gap:calc(var(--aire)*.5);
  break-after:page;page-break-after:always;break-inside:avoid;
}
.hoja-cat:last-of-type{break-after:auto;page-break-after:auto}

/* La foto nunca se recorta: cabe entera, con papel alrededor si sobra. */
.foto-cat{display:flex;align-items:center;justify-content:center;overflow:hidden}
.foto-cat img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}

.hoja-cat h2{font:500 clamp(18px,2.4vw,26px)/1.15 var(--garamond);margin:0}
.hoja-cat h3{font:400 11px var(--mono);letter-spacing:.08em;color:var(--lapiz);margin:14px 0 6px}
.folio-cat{color:var(--sello);font:500 11px var(--mono);margin:0 0 2px}
.dato-cat{font:400 11px/1.5 var(--mono);color:var(--lapiz);margin:2px 0 0}
.mito-cat{font:400 13px/1.5 var(--garamond);margin:8px 0 0;max-width:34em}
.hoja-cat .lp{font:400 10.5px var(--mono);color:var(--lapiz);margin:2px 0 0}

/* 1. La pieza arriba: la foto manda y el dato queda al pie. */
.arriba-cat .foto-cat{flex:1;min-height:0}
.arriba-cat .dicho-cat{flex:none}

/* 2. La pieza al costado: foto a la izquierda, dato a la derecha.
   Las dos columnas centradas: con foto cuadrada en hoja vertical, dejar
   todo arriba abre un hueco abajo que parece un error de maquetación. */
.costado-cat{flex-direction:row;align-items:stretch;gap:var(--aire)}
.costado-cat .foto-cat{flex:1.1;min-width:0}
.costado-cat .dicho-cat{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0}

/* 3. El par: dos piezas en la misma hoja. */
.par-cat{flex-direction:row;gap:var(--aire);align-items:center}
.par-cat .ficha-cat{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.par-cat .foto-cat{flex:1;min-height:0;margin-bottom:6px}
.par-cat h2{font-size:17px}

/* Portada y cierre */
.portada-cat,.cierre-cat{justify-content:center}
.centro{text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center}
.sello-cat{
  display:inline-block;color:var(--sello);border:1.5px solid var(--sello);
  padding:2px 10px;font:500 13px var(--mono);transform:rotate(-1.6deg);margin:0 0 10px;
}
.portada-cat h1{font:500 34px/1.1 var(--garamond);margin:0}

/* Texto al final: statement, semblanza, trayectoria.
   La hoja NO crece: mide lo que mide el papel. Si el texto no cabe, el guion
   del catálogo lo reparte en hojas siguientes; lo que aun así sobrara se
   oculta antes que estirar la hoja y descuadrar la impresión. */
.texto-cat{justify-content:flex-start;gap:0;overflow:hidden}
.texto-cat h2{margin-bottom:14px}
.texto-cat p{font:400 13px/1.6 var(--garamond);margin:0 0 10px;max-width:34em}
/* En hoja apaisada el título va a la izquierda y el texto a la derecha. */
.f-media .texto-cat{display:grid;grid-template-columns:5cm minmax(0,1fr);column-gap:var(--aire);align-content:start}
.f-media .texto-cat>*{grid-column:2}
.f-media .texto-cat>h2{grid-column:1;grid-row:1/span 60;margin:0}
.f-media .texto-cat>h3:first-of-type,.f-media .texto-cat>h3:first-child{margin-top:0}
.tray-cat{list-style:none;padding:0;margin:0}
.tray-cat li{display:flex;gap:10px;align-items:baseline;padding:5px 0;
  border-top:1px solid var(--linea);font:400 12px/1.4 var(--garamond)}
.tray-cat li span{font:400 10px var(--mono);color:var(--lapiz);flex:none;min-width:4em}
.tray-cat li em{margin-left:auto;font-style:normal;font-size:10px;color:var(--lapiz);text-align:right}

/* Lo que solo existe en pantalla */
.barra-cat{
  position:sticky;top:0;z-index:5;display:flex;gap:16px;align-items:center;justify-content:space-between;
  padding:12px 20px;background:var(--papel);border-bottom:1px solid var(--linea);flex-wrap:wrap;
}
.barra-cat .btn{width:auto;min-width:180px;margin:0}
.aviso-cat{max-width:var(--ancho);margin:14px auto;padding:0 20px;text-align:center}

@media print{
  body.catalogo{background:#fff;padding:0}
  .no-imprimir{display:none !important}
  .hoja-cat{margin:0;box-shadow:none;width:var(--ancho);height:var(--alto);zoom:1 !important}
  @page{size:var(--ancho) var(--alto);margin:0}
}

/* En pantalla angosta el guion encoge la hoja entera (zoom) para que quepa,
   sin cambiar su forma: lo que se ve sigue siendo lo que se imprime. */