/* luut v3 — los colores de la invitación Hacienda: papel, cacao, siena del sello, arena y oliva. Lo que comparten la página de ventas, el editor, el panel y la puerta:
   las dos letras, la marca de los dos anillos, los íconos y las curvas de movimiento */
@font-face { font-family: 'Cormorant Garamond'; font-weight: 500; font-style: normal; font-display: swap; src: url(/fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 600; font-style: normal; font-display: swap; src: url(/fonts/cormorant-garamond-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/jost-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 500; font-style: normal; font-display: swap; src: url(/fonts/jost-latin-500-normal.woff2) format('woff2'); }

:root {
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
}

/* la marca: dos anillos y el nombre, en la serif; sin mayúsculas espaciadas */
.marca { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 600 1.15rem/1 var(--serif); letter-spacing: .01em; color: inherit; }
.marca::before { content: ''; flex: none; width: 30px; height: 18px; background: currentColor; opacity: .9;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='14' cy='12' r='9'/%3E%3Ccircle cx='26' cy='12' r='9'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='14' cy='12' r='9'/%3E%3Ccircle cx='26' cy='12' r='9'/%3E%3C/svg%3E") center / contain no-repeat; }

.ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
[data-ico] { display: inline-flex; font-style: normal; }

/* lo que el navegador dibuja también lleva la marca: selección, cursor de texto y foco */
::selection { background: #E6D3BF; color: #3B2A20; }
input, textarea { caret-color: var(--or, #A0522D); }
:focus-visible { outline: 2px solid var(--or, #A0522D); outline-offset: 2px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }
html { scrollbar-color: #d4bfa9 transparent; }