/* Tema «Papelería» (5-nov-2026, pedido de Alberto): blanco, papel de piedra, títulos serif finos, sans geométrica
 * y botones rectos en mayúsculas, en la línea de los sitios de invitaciones. Pisa los tokens de @theme de src/index.css;
 * los componentes no cambian. Rubik y Frank Ruhl Libre quedan para el hebreo. Lo carga index.html. */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,300;8..60,400;8..60,600&family=Jost:wght@400;500;600&family=Frank+Ruhl+Libre:wght@400;500&family=Rubik:wght@400;500&display=swap');
:root:root {
  --font-sans: 'Jost', 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Source Serif 4', 'Frank Ruhl Libre', Georgia, serif;
  --color-paper: #fbfaf7;
  --color-paper-2: #f1efe8;
  --color-ink: #2f2f2f;
  --color-ink-2: #4b4b4b;
  --color-ink-3: #6d6d6d;
  --color-navy: #2f3b36;
  --color-navy-2: #3d4b45;
  --color-gold: #2b8259;
  --color-gold-2: #236c4a;
  --color-line: #e2dfd6;
}
html body { letter-spacing: 0; background: #fff; }
.h-display { font-weight: 300; letter-spacing: -0.005em; line-height: 1.14; }
.eyebrow { color: #2b8259; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.card { border-color: var(--color-line); border-radius: 6px; }
.input { border-radius: 4px; }
.input:focus { box-shadow: 0 0 0 3px rgb(43 130 89 / .16); }
.btn { border-radius: 4px; font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; padding: 10px 18px; }
.btn-primary:hover:not(:disabled), .btn-gold:hover:not(:disabled) { background: #236c4a; }
.btn-ghost { background: #fff; color: #2b8259; border-color: #2b8259; }
.btn-ghost:hover:not(:disabled) { background: rgb(43 130 89 / .07); }
.btn-danger { border-radius: 4px; }
/* Colores fijos que quedaron en las clases: se pasan a la paleta nueva */
.bg-black { background: #2f3b36; }
.bg-\[\#0071e3\] { background-color: #2b8259; }
.text-\[\#0071e3\], .hover\:text-\[\#0071e3\]:hover { color: #2b8259; }
.text-\[\#2997ff\] { color: #a9dcc1; }
.bg-\[\#2997ff\] { background-color: #a9dcc1; }
.border-\[\#0071e3\] { border-color: #2b8259; }
.border-\[\#0071e3\]\/40 { border-color: rgb(43 130 89 / .4); }
.bg-\[\#0071e3\]\/\[\.05\] { background-color: rgb(43 130 89 / .06); }
.bg-\[\#eef5fe\], .hover\:bg-\[\#eef5fe\]:hover { background-color: #edf6f1; }
.hover\:bg-\[\#0077ed\]:hover { background-color: #236c4a; }
.bg-\[rgba\(251\,251\,253\,0\.8\)\] { background-color: rgb(255 255 255 / .94); }
.bg-\[rgb\(251\,251\,253\)\] { background-color: #fff; }
/* El logo azul pasa al verde del tema sin regenerar los PNG */
img[src*="roshym-logo-blue"] { filter: hue-rotate(-62deg) saturate(.72); }

/* Sobre animado de las invitaciones */
.env { position: relative; width: 100%; aspect-ratio: 7 / 5; perspective: 1400px; }
.env-back, .env-front, .env-flap, .env-liner { position: absolute; left: 0; width: 100%; }
.env-back { inset: 0; height: 100%; border-radius: 4px; box-shadow: 0 18px 40px -22px rgb(0 0 0 / .55); }
.env-front { inset: 0; height: 100%; z-index: 3; border-radius: 4px; clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%); }
.env-flap { top: 0; height: 58%; z-index: 4; transform-origin: top; transition: transform .7s cubic-bezier(.4, 0, .2, 1), z-index 0s .35s; clip-path: polygon(0 0, 100% 0, 50% 100%); filter: brightness(.96); }
.env-liner { top: 0; height: 58%; z-index: 1; opacity: 0; transition: opacity .3s .3s; }
.env-card { position: absolute; bottom: 4%; z-index: 2; transition: transform .95s cubic-bezier(.22, .8, .3, 1); }
.env.is-open .env-flap { transform: rotateX(180deg); z-index: 0; }
.env.is-open .env-liner { opacity: 1; }
.env.is-rise .env-card { transform: translateY(-62%); }
.env-seal { position: absolute; left: 50%; top: 54%; z-index: 5; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Source Serif 4', Georgia, serif; font-size: 22px; color: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / .3); transition: opacity .25s; }
.env.is-open .env-seal { opacity: 0; }
.invite-card-in { animation: inviteIn .6s ease-out both; }
@keyframes inviteIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .env-flap, .env-liner, .env-card, .env-seal { transition: none; }
  .invite-card-in { animation: none; }
}