/* Navegación y acciones compartidas: la misma identidad en todas las páginas. */
.site-ui { --ivory: #fffaf5; --wine: #54365f; --wine-dark: #382045; --blush: #f3edf0; --blush-deep: #e8dfe6; }
.site-ui .button {
  border-radius: 0.8rem;
  font-family: var(--text);
  font-weight: 600;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.site-ui .button:hover, .site-ui .button:focus-visible { transform: none; }
.site-ui .home-whatsapp-dock:hover, .site-ui .home-whatsapp-dock:focus-visible { transform: translateX(-50%); }
.site-ui .button-outline { border-color: #634a70; color: var(--wine-dark); background: #fffaf5; }
.site-ui .button-outline:hover, .site-ui .button-outline:focus-visible { background: #f1e7f2; color: var(--wine-dark); }
.site-ui .whatsapp-action-primary { border-color: #287549; background: #287549; color: #fff; font-family: var(--legible); }
.site-ui .whatsapp-action-primary:hover, .site-ui .whatsapp-action-primary:focus-visible { border-color: #1c5e38; background: #1c5e38; color: #fff; }
.site-ui .catalog-filter.is-active { box-shadow: none; }
.site-ui .account-tabs button.is-active { background: var(--wine); border-color: var(--wine); }
.site-ui .hero-copy > *, .site-ui .hero-showcase,
.site-ui main .page-header > *, .site-ui .catalog-filter-bar,
.site-ui .template-card, .site-ui .custom-invitation-cta > * { animation: none; }
.site-ui a:focus-visible, .site-ui button:focus-visible { outline: 2px solid #9270aa; outline-offset: 4px; }

.site-shell .site-header { position: relative; top: auto; border: 0; background: #fffaf5; backdrop-filter: none; }
/* El menú va centrado en la página, no en el espacio que sobra: los dos lados
   miden lo mismo (1fr) y nada de lo que llega tarde lo empuja (la letra de la
   marca, el selector de idioma o el de moneda, que no está en todas las
   páginas). La cuenta y los selectores tienen un lugar fijo a la derecha. */
.site-shell .site-header .header-inner {
  --header-actions-width: 10.6rem;
  width: min(84rem, calc(100% - 4rem));
  min-height: 6.5rem;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1.4rem;
}
@media (min-width: 60.01rem) {
  .site-shell .site-header .brand { grid-column: 1; grid-row: 1; justify-self: start; }
  .site-shell .site-header .primary-navigation { grid-column: 2; grid-row: 1; }
  .site-shell .site-header .site-account { grid-column: 3; grid-row: 1; justify-self: end; margin-right: calc(var(--header-actions-width) + 0.6rem); }
  .site-shell .site-header .header-inner > .header-actions { grid-column: 3; grid-row: 1; justify-self: end; display: flex; width: var(--header-actions-width); justify-content: flex-start; gap: 0.4rem; }
}
.site-shell .site-header .brand { width: auto; gap: 0.8rem; }
.site-shell .site-header .brand-logo { width: 3.5rem; flex: none; }
.site-shell .site-header .brand::after {
  content: 'Carta Nostra' / '';
  color: var(--wine-dark);
  font-family: var(--script);
  font-style: italic;
  font-size: 2.55rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1;
  white-space: nowrap;
}
.site-shell .site-header .primary-navigation {
  position: static;
  display: flex;
  width: max-content;
  height: auto;
  justify-self: center;
  align-items: center;
  flex-direction: row;
  padding: 0.3rem;
  gap: 0.3rem;
  overflow: visible;
  border: 1px solid #e5d8ce;
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.65);
  box-shadow: none;
}
.site-shell .site-header .primary-navigation a { padding: 0.65rem 1.4rem; font-size: 0.98rem; line-height: 1.3; color: var(--wine-dark); border-radius: 999px; text-align: center; }
.site-shell .site-header .primary-navigation a::after { display: none; }
.site-shell .site-header .primary-navigation a:hover { background: #f1e7f2; }
.site-shell .site-header .primary-navigation a[aria-current='page'] { color: #fff; background: var(--wine); }
.site-shell .site-header .primary-navigation .site-menu-extra { display: none; }
.site-shell .site-header .header-actions .button-small { display: none; }
.site-shell .site-header .header-actions { min-height: 2.3rem; }
.site-shell .site-header .site-account { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; color: var(--wine-dark); text-decoration: none; border-radius: 50%; }
.site-shell .site-account svg { width: 2.4rem; fill: none; stroke: currentColor; stroke-width: 1.3; }
.site-shell .site-account svg circle:nth-child(2), .site-shell .site-account svg path { fill: currentColor; stroke: none; }
.site-shell .site-account[aria-current='page'] { background: #f1e7f2; }
.site-shell .site-account.is-signed-in { padding: 0; border: 1px solid var(--wine); background: transparent; }
.site-shell .site-account .account-mark { margin: 0; background: transparent; color: var(--wine); }
.site-shell .site-account .account-name { display: none; }
.site-shell .cn-language-switcher { border-color: #67567140; }
.site-shell .cn-language-switcher button[aria-pressed='true'] { background: var(--wine); box-shadow: none; }

@media (max-width: 70rem) and (min-width: 60.01rem) {
  .site-shell .site-header .header-inner { gap: 0.7rem; width: calc(100% - 2rem); }
  .site-shell .site-header .brand::after { font-size: 2rem; }
  .site-shell .site-header .primary-navigation a { padding-inline: 1rem; }
}
@media (max-width: 60rem) {
  .site-shell .site-header .header-inner {
    width: calc(100% - 2.5rem);
    min-height: 0;
    padding: 0.5rem 0 0;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: 'marca cuenta toggle' 'menu menu menu';
    gap: 0.45rem 0.65rem;
  }
  .site-shell .site-header .brand { grid-area: marca; gap: 0.65rem; }
  .site-shell .site-header .brand-logo { width: 2.3rem; }
  .site-shell .site-header .brand::after { font-size: clamp(1.65rem, 5.8vw, 2.2rem); }
  .site-shell .site-header .site-account { grid-area: cuenta; width: 2.5rem; height: 2.5rem; }
  .site-shell .site-header .menu-toggle { grid-area: toggle; display: grid; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; background: transparent; gap: 0.25rem; }
  .site-shell .site-header .menu-toggle > span:not(.sr-only) { width: 1.4rem; height: 2px; background: var(--wine); }
  .site-shell .site-header .cn-language-switcher--mobile { display: none; }
  .site-shell .site-header .primary-navigation { grid-area: menu; width: min(100%, 30rem); min-height: 2.55rem; padding: 0.2rem; justify-content: space-between; gap: 0; }
  .site-shell .site-header .primary-navigation a { display: block; flex: 1; padding: 0.5rem 0.35rem; font-size: clamp(0.8rem, 3.4vw, 0.98rem); }
  .site-shell .site-header .primary-navigation .site-menu-extra { display: none; }
  .site-shell .site-header .primary-navigation.open { flex-wrap: wrap; border-radius: 1.4rem; }
  .site-shell .site-header .primary-navigation.open .site-menu-extra { display: block; flex: 1 0 45%; margin-top: 0.4rem; }
  .site-shell .site-header .header-actions { display: none; }
  .site-shell .site-header:has(.primary-navigation.open) .header-actions { display: flex; grid-column: 1 / -1; justify-self: center; justify-content: center; padding-bottom: 0.6rem; }
}

/* Cambio de página suave: el navegador funde la página que se va con la que
   llega (Chrome/Edge 126+, Safari 18.2+). Las cabeceras son iguales, así que
   solo se nota el cambio del contenido. Donde no hay soporte, corte normal. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 320ms; animation-timing-function: ease; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* El botón de WhatsApp aparece cuando llega el número: que entre suave. */
.site-ui .whatsapp-float:not([hidden]), .site-ui .home-whatsapp-dock:not([hidden]) { animation: site-whatsapp-in 360ms ease backwards; }
@keyframes site-whatsapp-in { from { opacity: 0; translate: 0 0.6rem; } }

/* La foto grande de «A medida» entra con un fundido sobre un tono parecido. */
.site-ui .custom-invitation-visual { background: linear-gradient(135deg, #efe7df, #ddd2c8); }
.site-ui .custom-invitation-visual img { transition: opacity 500ms ease, transform 700ms cubic-bezier(0.2, 0.75, 0.25, 1); }
.site-ui .custom-invitation-visual img.is-loading { opacity: 0; }
.site-shell .cn-language-switcher--late { animation: site-whatsapp-in 360ms ease backwards; }