/* ==========================================================================
   Catalogo de invitaciones digitales — invitaciones.colomer.dev
   --------------------------------------------------------------------------
   Sistema propio, pero la PALETA es la misma que la de colomer.dev desde el
   2026-09-21: crema #F8F5EF, espresso #211B17 y dorado #9B7537. Ver el :root.

   Hasta esa fecha este encabezado decia que no compartia paleta con el sitio
   principal "porque alla el tema es oscuro y tecnico". Eso dejo de ser cierto
   el 2026-09-18, cuando colomer.dev migro a crema y dorado, y el comentario
   quedo tres dias contando una razon que ya no existia. Los valores de aca
   nunca fueron oscuros: eran un papel y un dorado PARECIDOS pero distintos,
   que es lo peor de las dos opciones — no se leen como la misma marca ni como
   dos marcas distintas a proposito.

   Lo que NO se unifico, y es deliberado: las tipografias. Cormorant Garamond
   y Montserrat son fuentes de invitacion. Ponerle las del sitio
   principal (Space Grotesk, Inter) haria que el catalogo se leyera como una
   landing de software, que es exactamente lo contrario de lo que vende.

   Eran TRES: Pinyon Script se saco el 2026-09-21. Su unico uso era la firma
   manuscrita del pie, que paso a ser el medallon, y quedaba declarada sin que
   ninguna regla la usara mientras sus 39 KB se publicaban igual. Si algun dia
   vuelve a hacer falta una manuscrita, vuelven las tres cosas: el archivo en
   fuentes\, su @font-face y la variable.

   Prefijo de clases: inv-        Prefijo de variables: --inv-
   ========================================================================== */

/* ---------- Tipografias locales (§1.2: cero CDN) -------------------------- */
/* Copiadas de la primera invitacion que las uso. Las tres son SIL Open
   Font License 1.1: self-hosting y uso comercial permitidos. */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fuentes/cormorant-garamond.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fuentes/cormorant-garamond-italica.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fuentes/montserrat.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Sistema de diseno --------------------------------------------- */

:root {
  /* Papel y tinta — los mismos valores que colomer.dev desde el 2026-09-21.
     No son parecidos "a ojo": son identicos, para que el catalogo y el sitio
     principal no se vean como dos marcas al abrirlos uno al lado del otro.
     Los nombres de variable se quedan en --inv- porque el sistema es de acá
     (tipografias de invitacion, tarjetas de portada); lo que se unifico es la
     paleta, no el sistema. */
  --inv-papel:      #F8F5EF;  /* Fondo base */
  --inv-papel2:     #EFE9DF;  /* Seccion alterna, chips en reposo */
  --inv-tarjeta:    #FFFDF9;  /* Fondo de tarjeta: blanco CALIDO, no #FFF */
  --inv-tinta:      #211B17;  /* Titulos, maximo contraste */
  --inv-texto:      #4A413A;  /* Texto corrido */
  --inv-texto-t:    #6B635B;  /* Terciario: etiquetas, pie */
  --inv-linea:      #E4DCCF;  /* Bordes y separadores */

  /* Acento: el dorado de marca.
     OJO — #9B7537 NO sirve para texto chico: da 3,86:1 sobre el papel y no
     llega a 4,5:1. Por eso hay dos dorados y no uno, igual que en colomer.dev:
     este para iconos, bordes y texto grande, --inv-oro-osc para texto chico. */
  --inv-oro:        #9B7537;
  --inv-oro-osc:    #7A5A26;  /* Texto dorado chico sobre claro */
  --inv-oro-luz:    #C9A45C;  /* Dorado sobre fondo oscuro */

  /* WhatsApp — verde oficial, tiene que ser reconocible */
  --inv-whatsapp:   #25D366;

  /* Tipografias */
  --inv-display:    'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --inv-cuerpo:     'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Layout */
  --inv-maxw:       1180px;
  --inv-radio:      14px;
  --inv-sombra:     0 1px 2px rgba(31,27,23,.04), 0 8px 24px rgba(31,27,23,.06);
  --inv-sombra-alta:0 2px 4px rgba(31,27,23,.06), 0 18px 44px rgba(31,27,23,.13);
}

/* ---------- Base ---------------------------------------------------------- */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--inv-papel);
  color: var(--inv-texto);
  font-family: var(--inv-cuerpo);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--inv-display);
  color: var(--inv-tinta);
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
}

p { margin: 0; }

img { max-width: 100%; display: block; }

a { color: inherit; }

.inv-wrap {
  width: 100%;
  max-width: var(--inv-maxw);
  margin: 0 auto;
  padding: 0 26px;
}

/* Foco visible — no eliminarlo (§2.5 del sitio principal, mismo criterio) */
:focus-visible {
  outline: 2px solid var(--inv-oro-osc);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Etiqueta superior de seccion, en versalitas espaciadas */
.inv-eyebrow {
  display: block;
  font-family: var(--inv-cuerpo);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--inv-oro-osc);
  margin-bottom: 14px;
}

/* ---------- Cabecera ------------------------------------------------------ */

.inv-header {
  border-bottom: 1px solid var(--inv-linea);
  background: rgba(250, 247, 242, .92);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.inv-header .inv-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 68px;
}

/* El logo del nav: simbolo + nombre en una fila.
   El simbolo va en 30x28 (colomer.dev usa 34x32: alla el nombre es mas grande);
   el nombre se queda en Cormorant
   Garamond (la display de ACA), no en la del sitio principal — por eso no se
   ven identicos puestos al lado, y es a proposito: misma marca, dos voces. */
.inv-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
}

.inv-logo-simbolo {
  width: 30px;
  height: 28px;
  flex-shrink: 0;
}

.inv-logo-nombre {
  font-family: var(--inv-display);
  font-size: 23px;
  font-weight: 600;
  color: var(--inv-tinta);
  letter-spacing: -.01em;
  line-height: 1;
}

.inv-logo-nombre span { color: var(--inv-oro-osc); }

.inv-header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--inv-tinta);
  text-decoration: none;
  border: 1px solid var(--inv-linea);
  border-radius: 999px;
  padding: 9px 18px;
  transition: border-color .2s, background .2s;
}

.inv-header-cta:hover {
  border-color: var(--inv-oro);
  background: var(--inv-papel2);
}

.inv-header-cta svg {
  width: 16px;
  height: 16px;
  fill: var(--inv-whatsapp);
}

/* ---------- Portada ------------------------------------------------------- */

.inv-hero {
  padding: clamp(56px, 9vw, 104px) 0 clamp(38px, 5vw, 58px);
  text-align: center;
}

.inv-hero h1 {
  font-size: clamp(40px, 7vw, 68px);
  font-weight: 400;
  letter-spacing: -.015em;
}

.inv-hero h1 em {
  font-style: italic;
  color: var(--inv-oro-osc);
}

.inv-hero p {
  max-width: 620px;
  margin: 22px auto 0;
  font-size: clamp(15px, 1.6vw, 17px);
  color: var(--inv-texto);
}

/* Filete decorativo bajo el titulo */
.inv-filete {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 28px auto 0;
  max-width: 240px;
  color: var(--inv-oro-luz);
}

.inv-filete::before,
.inv-filete::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
}

.inv-filete svg { width: 13px; height: 13px; stroke: var(--inv-oro); fill: none; stroke-width: 1.4; }

/* ---------- Filtros ------------------------------------------------------- */

.inv-filtros {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 0 0 clamp(34px, 5vw, 50px);
}

.inv-filtro {
  font-family: var(--inv-cuerpo);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--inv-texto);
  background: var(--inv-papel2);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 9px 20px;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}

.inv-filtro:hover { border-color: var(--inv-oro-luz); }

.inv-filtro-activo {
  background: var(--inv-tinta);
  color: var(--inv-papel);
  border-color: var(--inv-tinta);
}

/* Sin JavaScript los filtros no sirven de nada, asi que no se muestran.
   El catalogo completo queda visible igual: las tarjetas estan en el HTML. */
.inv-filtros { display: none; }
.inv-js .inv-filtros { display: flex; }

/* ---------- Rejilla de invitaciones --------------------------------------- */

.inv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding-bottom: clamp(60px, 8vw, 96px);
}

.inv-card {
  display: flex;
  flex-direction: column;
  background: var(--inv-tarjeta);
  border: 1px solid var(--inv-linea);
  border-radius: var(--inv-radio);
  overflow: hidden;
  box-shadow: var(--inv-sombra);
  transition: box-shadow .28s ease, transform .28s ease;
}

.inv-card:hover {
  box-shadow: var(--inv-sombra-alta);
  transform: translateY(-4px);
}

/* La tarjeta es display:flex, asi que el atributo hidden por si solo no la
   esconde. Hace falta esta regla explicita — la usa el filtro. */
.inv-card[hidden] { display: none; }

/* Marco de la captura. El degradado va en atributo style= porque es dato de
   esa invitacion, no estilo compartido — mismo criterio que el sitio principal. */
/* Cada tarjeta trae su par de tonos en atributo style= (--tono-a y --tono-b).
   Son dato de esa invitacion, no estilo compartido — mismo criterio que el
   sitio principal. De ahi salen TANTO el fondo COMO la vinieta. */
.inv-thumb {
  position: relative;
  height: 316px;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 16px;
  background: linear-gradient(150deg, var(--tono-a, #2A2118), var(--tono-b, #14100B));
}

/* Se muestra la parte de ARRIBA de la captura y se corta abajo.
   Al reves -mostrando el pie- se pierde lo que identifica al diseno: en las
   capturas de 500x1020 el nombre del evento y la fecha viven en el primer
   tercio, y el recorte superior se comia justo esa franja. Comprobado el
   2026-08-27 mirando las 13, y otra vez el 2026-09-01 con las capturas nuevas.

   La vinieta va del tono propio de la invitacion a transparente, NO de negro:
   cuatro de las portadas son de papel claro y una vinieta negra les quedaria
   como un manchon. Usa --tono-b porque abajo es donde el degradado de 150deg
   llega. */
.inv-thumb::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  background: linear-gradient(to top, var(--tono-b, #14100B), transparent);
  pointer-events: none;
}

/* Marcador de captura pendiente. Se reemplaza por el <img> en cuanto exista
   la imagen — es un cambio de una linea por tarjeta.
   Lleva chip oscuro propio para que se lea tambien sobre portadas claras, y
   z-index para quedar por encima de la vinieta. */
.inv-pendiente {
  position: relative;
  z-index: 1;
  width: 57%;
  max-width: 208px;
  aspect-ratio: 400 / 816;
  border: 1px dashed rgba(255,255,255,.30);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: rgba(0,0,0,.34);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 16px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.68);
  line-height: 1.7;
}

/* La captura asoma desde abajo y se corta: da a entender que la invitacion
   sigue, y mantiene la tarjeta a una altura razonable. */
.inv-thumb img {
  width: 57%;
  max-width: 208px;
  height: auto;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -2px 10px rgba(0,0,0,.28), 0 12px 30px rgba(0,0,0,.34);
  transition: transform .35s ease;
}

.inv-card:hover .inv-thumb img { transform: translateY(-7px); }

.inv-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 24px;
}

.inv-tipo {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--inv-oro-osc);
  margin-bottom: 9px;
}

.inv-body h3 {
  font-size: 25px;
  margin-bottom: 9px;
}

.inv-body p {
  font-size: 14px;
  line-height: 1.62;
  color: var(--inv-texto);
}

.inv-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}

.inv-tags span {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--inv-texto-t);
  background: var(--inv-papel2);
  border-radius: 999px;
  padding: 4px 11px;
}

/* Enlace "Ver invitacion" — se pega al fondo para que todas las tarjetas
   alineen el boton aunque los textos tengan largos distintos. */
.inv-ver {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--inv-oro-osc);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}

.inv-ver:hover { border-bottom-color: var(--inv-oro); }

.inv-ver svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  transition: transform .2s;
}

.inv-ver:hover svg { transform: translate(2px, -2px); }

/* Invitacion sin enlace publico. Ocupa el lugar del boton para que la tarjeta
   no quede corta al lado de sus hermanas — mismo patron que el sitio principal. */
.inv-estado {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 18px;
  font-size: 12.5px;
  font-style: italic;
  color: var(--inv-texto-t);
}

/* ---------- Cierre -------------------------------------------------------- */

.inv-cierre {
  background: var(--inv-papel2);
  border-top: 1px solid var(--inv-linea);
  padding: clamp(56px, 8vw, 90px) 0;
  text-align: center;
}

.inv-cierre h2 {
  font-size: clamp(30px, 4.4vw, 44px);
  font-weight: 400;
}

.inv-cierre h2 em { font-style: italic; color: var(--inv-oro-osc); }

.inv-cierre p {
  max-width: 560px;
  margin: 18px auto 0;
  font-size: 15.5px;
}

.inv-boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  padding: 15px 32px;
  background: var(--inv-tinta);
  color: var(--inv-papel);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  border-radius: 999px;
  transition: background .22s, transform .22s;
}

.inv-boton:hover {
  background: #332C25;
  transform: translateY(-2px);
}

.inv-boton svg { width: 18px; height: 18px; fill: var(--inv-whatsapp); }

/* ---------- Pie ----------------------------------------------------------- */

.inv-footer {
  padding: 34px 0 40px;
  text-align: center;
  border-top: 1px solid var(--inv-linea);
}

/* El medallon del pie. Va centrado porque todo el pie lo esta.
   El border-bottom de .inv-footer a se le quita aparte: sin eso queda una
   raya cruzando el medallon. Lleva .inv-footer adelante a proposito: con
   .inv-foot-medallon solo, (0,1,0) pierde contra .inv-footer a, que es (0,1,1). */
.inv-footer .inv-foot-medallon {
  display: block;
  width: 122px;
  margin: 0 auto 14px;
  border-radius: 50%;
  border-bottom: 0;
}

.inv-foot-medallon img {
  display: block;
  width: 100%;
  height: auto;
}

.inv-footer p {
  font-size: 12.5px;
  color: var(--inv-texto-t);
  margin-top: 6px;
}

.inv-footer a {
  color: var(--inv-texto-t);
  text-decoration: none;
  border-bottom: 1px solid var(--inv-linea);
}

.inv-footer a:hover { color: var(--inv-oro-osc); }

/* ---------- Puntos de quiebre --------------------------------------------- */

@media (max-width: 920px) {
  .inv-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .inv-thumb { height: 292px; }
}

@media (max-width: 560px) {
  .inv-wrap { padding: 0 18px; }
  .inv-grid { grid-template-columns: 1fr; gap: 22px; }
  .inv-thumb { height: 330px; }
  .inv-thumb img { width: 64%; max-width: 218px; }
  .inv-header-cta span { display: none; }
  .inv-header-cta { padding: 9px 12px; }
}

/* ---------- Movimiento reducido ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .inv-card:hover { transform: none; }
  .inv-card:hover .inv-thumb img { transform: none; }
  .inv-boton:hover { transform: none; }
}