/* =========================================================
   Página del catálogo · mismo diseño del catálogo en PDF
   Paleta tomada del PDF:
   fondo #F5EFE5 · oro #B48A4A · verde #3E5C3A · papel #FFFAF3
   ========================================================= */
:root {
  --c-pagina: #EDE4D5;       /* fondo detrás de las láminas */
  --c-fondo: #F5EFE5;        /* fondo de cada lámina */
  --c-papel: #FFFAF3;        /* fondo de las tarjetas */
  --c-oro: #B48A4A;          /* líneas y marcos */
  --c-oro-borde: #C9A96A;    /* borde fino de las tarjetas */
  --c-oro-texto: #A67C3C;    /* oro un poco más oscuro para que el texto se lea bien */
  --c-verde: #3E5C3A;
  --c-verde-texto: #5E7154;  /* verde suave legible */
  --c-texto: #423A35;
  --c-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --c-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
}

[hidden] { display: none !important; }
/* El encabezado y el pie conservan la tipografía del sitio; el catálogo usa las del PDF */
body.pagina-catalogo { background: var(--c-pagina); color: var(--c-texto); }
body.sin-scroll { overflow: hidden; }

/* ===== Estructura general ===== */
.cat-pagina { padding: 92px clamp(10px, 3vw, 40px) clamp(30px, 5vw, 60px); }
.cat-pagina > * + * { margin-top: clamp(18px, 3vw, 36px); }
.cat-slide, .cat-colecciones { max-width: 1320px; margin-left: auto; margin-right: auto; }
.cat-slide { background: var(--c-fondo); position: relative; overflow: hidden; }
.cat-colecciones { display: grid; gap: clamp(18px, 3vw, 36px); }
.cat-colecciones:empty { display: none; }
.cat-aviso { background: var(--c-fondo); padding: 30px; text-align: center; }

/* ===== Regla dorada con detalle verde ===== */
.cat-regla { display: flex; align-items: center; gap: 10px; margin: clamp(18px, 2.4vw, 28px) 0; }
.cat-regla::before { content: ""; width: 78px; height: 2px; background: var(--c-oro); }
.cat-regla::after { content: ""; width: 7px; height: 7px; background: var(--c-verde); transform: rotate(45deg); }
.cat-regla-punto::after { border-radius: 50%; transform: none; width: 6px; height: 6px; }

/* ===== Portada ===== */
.cat-portada { display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(520px, 78svh, 760px); }
.cat-portada-texto { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(32px, 6vw, 90px); }
.cat-logo { display: block; width: min(100%, 460px); height: auto; margin-bottom: clamp(20px, 3vw, 36px); }
.cat-etiqueta { font: 400 clamp(.72rem, 1vw, .88rem)/1.2 var(--c-sans); letter-spacing: .32em; text-transform: uppercase; color: var(--c-texto); }
.cat-temporada { font: 400 clamp(1.15rem, 2vw, 1.55rem)/1.3 var(--c-serif); color: var(--c-verde-texto); }
.cat-portada-foto, .cat-intro-foto, .cat-cierre-foto { position: relative; min-height: 280px; }
.cat-portada-foto img, .cat-intro-foto img, .cat-cierre-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ===== Nuestras flores ===== */
.cat-intro { display: grid; grid-template-columns: .44fr .56fr; min-height: clamp(480px, 70svh, 660px); }
.cat-intro-foto { border-right: 3px solid var(--c-oro); }
.cat-intro-texto { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 6vw, 90px); }
.cat-titulo-grande { font: 400 clamp(2.5rem, 5.4vw, 4.6rem)/1.05 var(--c-serif); color: var(--c-verde); }
.cat-parrafo { max-width: 34em; border-left: 2px solid var(--c-oro); padding-left: clamp(16px, 2vw, 26px); font: 400 clamp(.98rem, 1.45vw, 1.15rem)/1.75 var(--c-sans); color: var(--c-texto); }
.cat-destacado { margin-top: clamp(28px, 5vw, 64px); font: 400 clamp(1.7rem, 3.4vw, 2.8rem)/1.2 var(--c-serif); color: var(--c-oro-texto); }

/* ===== Láminas de colección ===== */
.cat-lamina { position: relative; background: var(--c-fondo); padding: clamp(30px, 4.6vw, 66px) clamp(22px, 4.6vw, 66px) clamp(32px, 4.6vw, 66px); }
.cat-lamina::before { content: ""; position: absolute; inset: clamp(8px, 1.4vw, 18px); border: 2px solid var(--c-oro); pointer-events: none; }
.cat-lamina h2 { font: 700 clamp(1.9rem, 4.2vw, 3.2rem)/1.1 var(--c-serif); color: var(--c-oro-texto); letter-spacing: .005em; }
.cat-lamina .cat-regla { margin: clamp(14px, 1.8vw, 22px) 0 clamp(22px, 3vw, 40px); }
.cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 34px); }

/* ===== Tarjeta de producto ===== */
.cat-card { display: flex; flex-direction: column; background: var(--c-papel); border: 1px solid var(--c-oro-borde); }
.cat-foto { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; overflow: hidden; background: #E9DCC6; cursor: zoom-in; }
.cat-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s ease; }
.cat-card:hover .cat-foto img { transform: scale(1.04); }
.cat-foto:focus-visible { outline: 3px solid var(--c-oro); outline-offset: -5px; }
.cat-info { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2vw, 22px) clamp(16px, 2vw, 22px); }
.cat-nombre { font: 400 clamp(1.08rem, 1.6vw, 1.32rem)/1.25 var(--c-serif); color: var(--c-verde); }
.cat-medida { font: 400 clamp(.78rem, 1vw, .86rem)/1.4 var(--c-sans); letter-spacing: .04em; color: var(--c-verde-texto); }
.cat-precio { margin-top: auto; padding-top: 12px; font: 700 clamp(1.4rem, 2vw, 1.7rem)/1 var(--c-serif); color: var(--c-oro-texto); }
.cat-cotizar {
  margin-top: auto; align-self: flex-start;
  font: 500 .72rem/1.2 var(--c-sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-oro-texto); border-bottom: 1px solid var(--c-oro); padding: 14px 0 4px;
  transition: color .3s ease, border-color .3s ease;
}
.cat-cotizar:hover { color: var(--c-verde); border-color: var(--c-verde); }
.cat-enlaces { display: flex; flex-wrap: wrap; gap: 4px 16px; padding-top: 8px; }
.cat-enlaces a { font: 500 .7rem/1.2 var(--c-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--c-verde); border-bottom: 1px solid var(--c-oro-borde); padding-bottom: 2px; }
.cat-enlaces a:hover { border-color: var(--c-verde); }

/* ===== Cierre ===== */
.cat-cierre { display: grid; grid-template-columns: .55fr .45fr; min-height: clamp(520px, 78svh, 760px); }
.cat-cierre-texto { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(32px, 6vw, 90px); }
.cat-cierre-foto { border-left: 3px solid var(--c-oro); }
.cat-logo-chico { width: min(100%, 300px); }
.cat-titulo-cierre { margin-bottom: clamp(20px, 3vw, 36px); }
.cat-cuerpo { font: 400 clamp(.98rem, 1.45vw, 1.15rem)/1.6 var(--c-sans); color: var(--c-texto); }
.cat-usuario { margin: clamp(14px, 2vw, 24px) 0 10px; font: 700 clamp(1.25rem, 2.4vw, 1.9rem)/1.2 var(--c-sans); color: var(--c-oro-texto); border-bottom: 2px solid transparent; transition: border-color .3s ease; }
.cat-usuario:hover { border-color: var(--c-oro); }
.cat-envios { font: 400 clamp(.9rem, 1.3vw, 1.05rem)/1.4 var(--c-sans); color: var(--c-verde-texto); }
.cat-botones { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: clamp(20px, 3vw, 32px); }
.cat-lema { font: italic 400 clamp(1.15rem, 2vw, 1.5rem)/1.3 var(--c-serif); color: var(--c-verde); }

/* ===== Botones ===== */
.cat-boton {
  display: inline-block; padding: 14px 28px;
  font: 500 .74rem/1.2 var(--c-sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-oro-texto); border: 1px solid var(--c-oro); background: transparent;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.cat-boton:hover { background: var(--c-oro); color: var(--c-papel); }
.cat-boton-relleno { color: var(--c-papel); background: var(--c-verde); border-color: var(--c-verde); }
.cat-boton-relleno:hover { background: #2F472C; border-color: #2F472C; color: var(--c-papel); }

/* ===== Visor de fotos ===== */
.cat-visor { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; background: rgba(36, 30, 24, .93); backdrop-filter: blur(6px); animation: cat-aparecer .3s ease; }
@keyframes cat-aparecer { from { opacity: 0; } to { opacity: 1; } }
.cat-visor-contenido { max-width: min(92vw, 560px); margin: 0; text-align: center; color: var(--c-fondo); }
.cat-visor-contenido img { display: block; max-height: 64vh; max-width: 100%; width: auto; height: auto; margin: 0 auto 20px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.cat-visor-coleccion { font: 500 .68rem/1.2 var(--c-sans); letter-spacing: .28em; text-transform: uppercase; color: #E2C98F; margin-bottom: 6px; }
.cat-visor-contenido h3 { font: 400 clamp(1.4rem, 3vw, 1.9rem)/1.2 var(--c-serif); color: var(--c-papel); }
.cat-visor-medida { font: 400 .9rem/1.4 var(--c-sans); opacity: .8; margin: 6px 0 18px; }
.cat-boton-claro { color: #E2C98F; border-color: #E2C98F; }
.cat-boton-claro:hover { background: #E2C98F; color: #2A241D; }
.cat-visor-cerrar, .cat-visor-nav {
  position: absolute; width: 48px; height: 48px; padding: 0; background: transparent; color: #E2C98F;
  border: 1px solid rgba(226, 201, 143, .6); border-radius: 50%; font-size: 1.6rem; line-height: 1; cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.cat-visor-cerrar { top: 20px; right: 20px; }
.cat-visor-nav { top: 50%; transform: translateY(-50%); }
.cat-visor-ant { left: 18px; }
.cat-visor-sig { right: 18px; }
.cat-visor-cerrar:hover, .cat-visor-nav:hover { background: #E2C98F; color: #2A241D; }

/* ===== Aparición suave al desplazarse ===== */
.js .cat-revelar { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s ease; }
.js .cat-revelar.visible { opacity: 1; transform: none; }

/* ===== Celular y tableta ===== */
@media (max-width: 900px) {
  .cat-grid { gap: 14px; }
  .cat-nombre { font-size: 1.05rem; }
}
@media (max-width: 760px) {
  .cat-portada, .cat-intro, .cat-cierre { grid-template-columns: 1fr; min-height: 0; }
  .cat-portada-foto, .cat-intro-foto, .cat-cierre-foto { min-height: 0; aspect-ratio: 4 / 3; }
  .cat-intro-foto { border-right: 0; border-bottom: 3px solid var(--c-oro); }
  .cat-cierre-foto { border-left: 0; border-top: 3px solid var(--c-oro); }
  .cat-grid { grid-template-columns: 1fr; gap: 20px; }
  .cat-nombre { font-size: 1.2rem; }
  .cat-visor-nav { top: auto; bottom: 20px; transform: none; }
  .cat-visor-ant { left: 20px; }
  .cat-visor-sig { right: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .cat-revelar { opacity: 1; transform: none; transition: none; }
  .cat-visor { animation: none; }
  .cat-foto img { transition: none; }
}