/* IvaniaPhoto · publico/assets/css/catalogo.css
 * Ocampo-Infra Agent System · autor Roberto Ocampo
 *
 * Estilos propios del módulo c2-catalogo (portafolio, catálogo, campañas).
 *
 * REESCRITO 9/8/2026 (gate de diseño catalogo-vuelta2-20260908.md, bloqueante
 * GRAVE #2): este fichero fijaba a mano su PROPIA paleta/tipografía
 * ('Playfair Display', 'Montserrat', #D4AF37, #121212…) — una marca distinta
 * del resto del front público. Ahora usa EXCLUSIVAMENTE los tokens de
 * publico/assets/css/base.css (--ip-oro, --ip-noche, --ip-noche-alta,
 * --ip-marfil, --ip-humo, --serif 'Cormorant Garamond', --sans 'Jost'), los
 * MISMOS que /nosotros y /contacto. Cero 'Playfair Display', cero
 * 'Montserrat', cero color fuera de :root. Las páginas que llaman a
 * catalogo_pagina_abrir() con 'solo_ip2'=>true (galeria, paquetes, productos)
 * ya no cargan marco_css() (el `<style>` del panel) — por eso nada aquí
 * depende de --apagado/--oro/--negro (tokens del panel): todo es --ip-*.
 */

.ip-catalogo { min-height: 100vh; }

.ip-cat-caja { max-width: 1180px; margin: 0 auto; padding: 24px 16px 56px; }
/* Ya NO hay buffer propio (era 40px): las 6 plantillas del módulo pasan
   'compensar_cabecera'=>true (gate catalogo-vuelta3-20260908.md, bloqueante
   MEDIO #5 — antes sólo 3 de las 6 lo hacían, y las 3 restantes
   [paquete.php, galeria-categoria.php, lp.php] cargaban el CSS del panel
   sobre esta caja) y reservan el hueco bajo la cabecera fija vía
   `.ip2-cuerpo` (base.css); el margen de aquí quedaría duplicado si alguna
   vez faltara 'compensar_cabecera'. */
/* Tamaño del h1 = token de base.css (--fs-h2), NO un número propio (gate
   catalogo-vuelta3-20260908.md, menor #6): la misma escala que /nosotros y
   /contacto en vez de un tercer tamaño fijo sólo de este módulo. */
.ip-cat-caja h1 { font-weight: 400; font-size: var(--fs-h2); line-height: 1.2; font-family: var(--serif); margin: 0 0 6px; }

/* ── CTA y utilidades compartidas (antes estilos en línea, gate vuelta1) ── */
.ip-cat-cta { margin-top: 24px; }
.ip-cat-btn-centro { text-align: center; }
.ip-cat-form-inline { display: inline; }
/* Texto secundario de tarjeta/tabla — MISMA jerarquía que .prosa de c1 pero
   más chico, para líneas de metadato (entrega, "ideal para", atributos de
   variante) que no compiten con el resumen principal (gate catalogo-vuelta2-
   20260908.md bloqueante MEDIO #3: '.ip-lema' no tenía ninguna regla en este
   marco — ni la tenía antes, fuera de '.ip-publico .ip-lema', que ningún
   contenedor de aquí lleva). */
.ip-cat-meta { font-size: var(--fs-caption); color: var(--ip-humo); margin: 0 0 8px; }
/* Estado vacío ("aún no hay fotos"/"publicaremos pronto") — '.ip-vacia' es
   clase del PANEL (marco_css()), sin regla fuera de ahí; las plantillas de
   este módulo la siguen usando con 'solo_ip2'=>true, que YA no carga ese
   CSS (mismo defecto de fondo que motivó '.ip-cat-meta'/'.ip-cat-btn-centro'
   arriba). */
.ip-cat-caja .ip-vacia { padding: 24px 0; text-align: center; color: var(--ip-humo); font-size: 14px; }

/* ── Categorías (píldoras) ── */
.ip-cat-categorias { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 26px; }
.ip-cat-cat-pill { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px;
  border: 1px solid var(--ip-oro-oscuro); border-radius: 999px; color: var(--ip-marfil);
  text-decoration: none; font: 600 13px var(--sans); }
.ip-cat-cat-pill:hover { background: var(--ip-noche-alta); border-color: var(--ip-oro); color: var(--ip-oro-claro); }
.ip-cat-n { color: var(--ip-humo); font-weight: 400; }

/* ── Rejilla de fotos ── */
.ip-cat-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px; }
.ip-cat-foto { display: block; background: var(--ip-noche-alta); border-radius: 4px; overflow: hidden;
  aspect-ratio: 3/2; }
.ip-cat-foto img { display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .25s ease; background: var(--ip-noche-alta); }
.ip-cat-foto:hover img { transform: scale(1.03); }

.ip-cat-categoria-cab { display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.ip-cat-cargar-mas { display: block; margin: 22px auto 0; }
.ip-cat-centinela { height: 1px; }

/* ── Catálogo (paquetes/productos) ── */
.ip-cat-paquetes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px; margin-top: 20px; }
/* auto-fit con 3 paquetes deja una 4.ª pista fantasma de 0px en escritorio
   ancho (inocuo, pero repeat(3,1fr) explícito es más honesto — gate
   catalogo-vuelta2-20260908.md, menor). */
@media (min-width: 900px) { .ip-cat-paquetes { grid-template-columns: repeat(3, 1fr); } }
.ip-cat-paquete { border: 1px solid rgba(244,238,228,.14); border-radius: 8px; padding: 20px;
  background: var(--ip-noche-alta); display: flex; flex-direction: column; gap: 8px; position: relative; }
.ip-cat-paquete.ip-cat-popular { border-color: var(--ip-oro); }
.ip-cat-popular-badge { position: absolute; top: -11px; right: 16px; background: var(--ip-oro);
  color: var(--ip-noche); font: 700 10px var(--sans); letter-spacing: .07em;
  padding: 3px 10px; border-radius: 999px; text-transform: uppercase; }
.ip-cat-paquete h2 { font: 400 22px var(--serif); margin: 0; }
.ip-cat-precio { font: 700 26px var(--sans); color: var(--ip-oro); }
.ip-cat-precio-antes { font-size: 15px; color: var(--ip-humo); text-decoration: line-through; margin-right: 6px; }
.ip-cat-lista { list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--ip-marfil); }
.ip-cat-lista li { padding: 3px 0; border-bottom: 1px dashed rgba(244,238,228,.14); }
.ip-cat-lista li:before { content: '✓ '; color: var(--ip-oro); }
/* "Ver detalles" al pie de CUALQUIER tarjeta, aunque la vecina tenga más
   texto y estire la fila a su altura (gate catalogo-vuelta3-20260908.md,
   bloqueante MEDIO #4): `.ip-cat-paquete` ya es flex-column, sólo faltaba
   empujar el botón al fondo. */
.ip-cat-paquete .ip-cat-btn-centro { margin-top: auto; }

.ip-cat-productos-cat { margin: 26px 0; }
.ip-cat-productos-cat h2 { font: 400 22px var(--serif);
  border-bottom: 1px solid rgba(244,238,228,.14); padding-bottom: 6px; }
/* h3 SÓLO cuando un producto tiene más de una variante (gate 9/8/2026,
   bloqueante #5): antes salía uno por CADA tamaño, repitiendo el nombre que
   la fila de abajo ya decía. */
.ip-cat-productos-cat h3 { font-size: 14px; margin: 14px 0 4px; color: var(--ip-humo); }
.ip-cat-tabla-precio { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 18px; }
.ip-cat-tabla-precio th { padding: 6px 4px; border-bottom: 1px solid rgba(244,238,228,.14); text-align: left;
  font: 600 11px var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--ip-humo); }
.ip-cat-tabla-precio th:last-child { text-align: right; }
.ip-cat-tabla-precio td { padding: 6px 4px; border-bottom: 1px solid rgba(244,238,228,.08); }
.ip-cat-tabla-precio td:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--ip-oro); }
/* Botón compacto para una celda de tabla (gate catalogo-vuelta2-20260908.md
   bloqueante GRAVE #2c): "Añadir al carrito" usaba `.ip-boton.suave` (clase
   del panel, 11px) junto a "Ver detalles" `.boton` (14.4px) — dos sistemas de
   botón en una página. Ahora ambos son `.boton`; este modificador sólo ajusta
   tamaño para que quepa en la tabla, sin duplicar el sistema.
   Prefijo `.ip2` (gate catalogo-vuelta3-20260908.md, bloqueante MEDIO #1):
   esta regla y `.ip2 .boton` en base.css tenían la MISMA especificidad
   (0,2,0) y ganaba quien se imprimiera al final — base.css, porque
   `catalogo.css` se enlaza ANTES en `<head>` (el marco no ofrece hoy un
   punto para insertar CSS de módulo después de base.css). Con `.ip2` delante
   la especificidad sube a (0,3,0) y esta regla gana SIN depender del orden. */
.ip2 .ip-cat-tabla-precio .boton--compacto { padding: .4rem .8rem; font-size: .8rem; min-height: 0; white-space: nowrap; }
/* La columna de precio no necesita crecer; dejarla mínima le devuelve el
   espacio a la columna del nombre (bloqueante MEDIO #1: a 390px el nombre
   quedaba en 87px y partía "Impresión 8x10" en dos líneas). */
.ip-cat-tabla-precio td:nth-child(2) { white-space: nowrap; width: 1%; }

/* ── Detalle de paquete (antes estilos en línea, gate catalogo-vuelta4-
   20260908.md, menor #2: máx-width propio de la caja angosta, h2 de sección
   más chico que el h1, precio y acciones con su propio ritmo vertical). ── */
.ip-cat-caja--estrecha { max-width: 760px; }
.ip-cat-precio-caja { margin: 14px 0; }
.ip-cat-detalle h2 { font-size: 17px; }
.ip-cat-meta--sep { margin-top: 14px; }
.ip-cat-acciones { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Campaña / lp (antes estilos en línea, gate catalogo-vuelta4-20260908.md,
   menor #2) ── */
.ip-cat-caja--lp { max-width: 720px; }
.ip-cat-lp-hero { text-align: center; padding: 40px 16px 10px; }
.ip-cat-lp-ancho { max-width: 480px; margin: 0 auto 20px; }
.ip-cat-lp-quote { text-align: center; color: var(--ip-humo); font: italic 15px var(--serif); }
.ip-cat-lp-quote footer { font-size: 12px; margin-top: 4px; }
.ip-cat-lp-form { max-width: 420px; margin: 22px auto; background: var(--ip-noche-alta);
  border: 1px solid rgba(244,238,228,.14); border-radius: 8px; padding: 22px; }
.ip-cat-lp-ok { max-width: 420px; margin: 22px auto; text-align: center; color: var(--ip-oro-claro); }
.ip-cat-lp-enviar { width: 100%; }
.ip-cat-lp-telefono { text-align: center; margin-top: 10px; }

/* ── Lightbox (ADR-007) ── */
.ip-lb-overlay { display: none; position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,.92); align-items: center; justify-content: center; }
.ip-lb-overlay.ip-lb-abierto { display: flex; }
.ip-lb-figura { margin: 0; max-width: 95vw; max-height: 90vh; display: flex;
  flex-direction: column; align-items: center; gap: 8px; }
.ip-lb-img { max-width: 95vw; max-height: 84vh; object-fit: contain; display: block;
  border: 1px solid rgba(244,238,228,.14); }
.ip-lb-cap { color: var(--ip-marfil); font-size: 13px; text-align: center; max-width: 90vw; }
.ip-lb-cerrar { position: absolute; top: 14px; right: 18px; background: none; border: 0;
  color: var(--ip-marfil); font-size: 34px; line-height: 1; cursor: pointer; }
.ip-lb-prev, .ip-lb-next { position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.08); border: 1px solid rgba(244,238,228,.14); color: var(--ip-marfil);
  font-size: 30px; width: 46px; height: 46px; border-radius: 999px; cursor: pointer; }
.ip-lb-prev { left: 14px; } .ip-lb-next { right: 14px; }
.ip-lb-prev:hover, .ip-lb-next:hover, .ip-lb-cerrar:hover { color: var(--ip-oro); }
.ip-lb-original { position: absolute; bottom: 16px; color: var(--ip-humo); font-size: 11px;
  text-decoration: underline; }

@media (max-width: 640px) {
  .ip-cat-rejilla { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .ip-cat-caja { padding: 16px 12px 40px; }
  .ip-lb-prev, .ip-lb-next { width: 38px; height: 38px; font-size: 24px; }
}

/* Menor #1 (gate catalogo-vuelta4-20260908.md): a 320px ES "Añadir al
   carrito" + nombre + precio abrían el viewport a 353px. El aria-label ya
   lleva el texto completo ("Añadir <producto> al carrito"); el botón visible
   se acorta a "Añadir" bajo 360px. */
@media (max-width: 360px) {
  .ip-cat-solo-ancho { display: none; }
}