@font-face { font-family: "Planne Brand"; src: url("/assets/fonts/PatuaOne-Regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
    @font-face { font-family: "Planne UI"; src: url("/assets/fonts/inter-var-latin.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; }
    :root {
      --planne-teal: #13b8a7;
      --planne-brand: "Planne Brand", Georgia, serif;
      --planne-ui: "Planne UI", system-ui, sans-serif;
      --paper: oklch(96.8% .012 83);
      --surface: oklch(99% .006 83);
      --ink: oklch(25% .025 58);
      --muted: oklch(48% .025 65);
      --line: oklch(82% .022 75);
      --accent: oklch(55% .075 66);
      --accent-dark: oklch(37% .052 61);
      --accent-soft: oklch(91% .04 72);
      --success: oklch(47% .09 151);
      --danger: oklch(52% .13 28);
      --display: "Bodoni Moda", Georgia, serif;
      --body: "Jost", system-ui, sans-serif;
      --space-1: .25rem;
      --space-2: .5rem;
      --space-3: .75rem;
      --space-4: 1rem;
      --space-5: 1.5rem;
      --space-6: 2rem;
      --space-7: 3rem;
      --space-8: 4rem;
      --ease-out: cubic-bezier(.16, 1, .3, 1);
    }

    html[data-invite-style="ilustrado"] {
      --accent: oklch(62% .12 5);
      --accent-dark: oklch(42% .09 5);
      --accent-soft: oklch(94% .04 5);
      --display: "Bonheur Royale", cursive;
      --body: "Quicksand", system-ui, sans-serif;
    }

    html[data-invite-style="gravado"] {
      --paper: oklch(96% .014 107);
      --surface: oklch(98.5% .008 107);
      --ink: oklch(23% .026 160);
      --muted: oklch(43% .026 160);
      --line: oklch(78% .03 106);
      --accent: oklch(38% .075 164);
      --accent-dark: oklch(27% .055 164);
      --accent-soft: oklch(91% .04 145);
      --display: "Bodoni Moda", Georgia, serif;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font: 400 1rem/1.55 var(--body);
      font-kerning: normal;
    }
    a { color: inherit; }
    button, input, select { font: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
    .skip-link { position: fixed; left: var(--space-4); top: -5rem; z-index: 10; padding: var(--space-3) var(--space-4); background: var(--ink); color: var(--surface); }
    .skip-link:focus { top: var(--space-4); }

    .invite-status {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-3);
      min-height: 44px;
      padding: var(--space-2) var(--space-4);
      background: var(--ink);
      color: var(--surface);
      font-size: .82rem;
      text-align: center;
    }
    .invite-status strong { font-weight: 600; }
    .model-select {
      min-height: 36px;
      border: 1px solid color-mix(in oklch, var(--surface) 55%, transparent);
      border-radius: 0;
      padding: 0 var(--space-2);
      background: var(--ink);
      color: var(--surface);
      cursor: pointer;
    }

    .site-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
      max-width: 1120px;
      margin: 0 auto;
      padding: var(--space-4) var(--space-5);
    }
    .brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; font-weight: 600; }
    .brand img { width: 32px; height: 32px; }
    .site-nav { display: flex; align-items: center; gap: var(--space-4); font-size: .88rem; }
    .site-nav a { padding: var(--space-2) 0; color: var(--muted); text-decoration: none; }
    .site-nav a:hover { color: var(--accent-dark); }

    .hero { max-width: 1120px; margin: 0 auto; padding: var(--space-5) var(--space-5) var(--space-8); }
    .hero-grid { display: grid; gap: var(--space-6); align-items: end; }
    .hero-copy { max-width: 45rem; }
    .eyebrow { margin: 0 0 var(--space-3); color: var(--accent-dark); font-size: .76rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
    h1, h2, h3, p { margin-top: 0; }
    h1 { max-width: 12ch; margin-bottom: var(--space-4); font-family: var(--display); font-size: clamp(3.2rem, 11vw, 7.1rem); font-weight: 400; letter-spacing: -.055em; line-height: .91; }
    html[data-invite-style="ilustrado"] h1 { font-size: clamp(4rem, 14vw, 8rem); letter-spacing: -.025em; line-height: .78; }
    .hero-lead { max-width: 38ch; margin-bottom: var(--space-5); color: var(--muted); font-size: 1.15rem; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 0 var(--space-5);
      border: 1px solid var(--accent);
      border-radius: 0;
      background: var(--accent);
      color: var(--surface);
      font-weight: 600;
      text-decoration: none;
      transition: transform 150ms var(--ease-out), background 150ms var(--ease-out);
      cursor: pointer;
    }
    .button:hover { background: var(--accent-dark); transform: translateY(-2px); }
    .button:active { transform: translateY(0); }
    .button.secondary { background: transparent; color: var(--accent-dark); }
    .button.secondary:hover { background: var(--accent-soft); }
    .hero-photo { position: relative; overflow: hidden; min-height: 360px; }
    .hero-photo::before { position: absolute; z-index: 1; inset: 16px; border: 1px solid color-mix(in oklch, var(--surface) 75%, transparent); content: ""; pointer-events: none; }
    .hero-photo img { display: block; width: 100%; height: 100%; min-height: 360px; object-fit: cover; filter: saturate(.78) contrast(.94); }
    html[data-invite-style="ilustrado"] .hero-photo { border-radius: 50% 50% 42% 42%; }
    html[data-invite-style="gravado"] .hero-photo { box-shadow: 12px 12px 0 var(--accent-soft); }

    main { overflow: hidden; }
    .event-summary { background: var(--accent-dark); color: var(--surface); }
    .summary-grid { display: grid; max-width: 1120px; margin: 0 auto; padding: var(--space-6) var(--space-5); }
    .summary-item { display: grid; gap: .15rem; padding: var(--space-4) 0; border-bottom: 1px solid color-mix(in oklch, var(--surface) 25%, transparent); }
    .summary-item:last-child { border-bottom: 0; }
    .summary-item dt { color: color-mix(in oklch, var(--surface) 72%, transparent); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
    .summary-item dd { margin: 0; font-family: var(--display); font-size: 1.45rem; line-height: 1.1; }

    .section { max-width: 1120px; margin: 0 auto; padding: clamp(3.5rem, 9vw, 7rem) var(--space-5); }
    .section-heading { display: grid; gap: var(--space-3); max-width: 39rem; margin-bottom: var(--space-6); }
    .section-heading h2 { margin: 0; font-family: var(--display); font-size: clamp(2.3rem, 6vw, 4rem); font-weight: 400; letter-spacing: -.04em; line-height: 1; }
    html[data-invite-style="ilustrado"] .section-heading h2 { font-size: clamp(3rem, 8vw, 5.2rem); line-height: .85; }
    .section-heading p { margin: 0; color: var(--muted); font-size: 1.06rem; }
    .story { display: grid; gap: var(--space-6); align-items: start; }
    .story-copy { max-width: 55ch; font-size: 1.08rem; }
    .story-copy p + p { margin-top: var(--space-4); }
    .pull-quote { margin: 0; padding: var(--space-5) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--accent-dark); font-family: var(--display); font-size: clamp(1.8rem, 4vw, 2.8rem); font-style: italic; line-height: 1.08; }

    .timeline { display: grid; gap: 0; max-width: 760px; }
    .timeline-item { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--space-4); padding: var(--space-5) 0; border-top: 1px solid var(--line); }
    .timeline-time { color: var(--accent-dark); font-size: .86rem; font-weight: 600; }
    .timeline-item h3 { margin-bottom: var(--space-1); font-family: var(--display); font-size: 1.65rem; font-weight: 500; letter-spacing: -.025em; line-height: 1.1; }
    .timeline-item p { max-width: 52ch; margin-bottom: 0; color: var(--muted); }

    .practical { background: var(--accent-soft); }
    .practical-inner { max-width: 1120px; margin: 0 auto; padding: clamp(3.5rem, 9vw, 7rem) var(--space-5); }
    .details-grid { display: grid; gap: var(--space-6); }
    .detail { padding-top: var(--space-4); border-top: 1px solid color-mix(in oklch, var(--accent-dark) 35%, transparent); }
    .detail h3 { margin-bottom: var(--space-2); font-family: var(--display); font-size: 1.65rem; font-weight: 500; line-height: 1.15; }
    .detail p, .detail li { color: color-mix(in oklch, var(--ink) 78%, var(--muted)); }
    .detail p:last-child { margin-bottom: 0; }
    .detail ul { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; padding-left: 1.1rem; }

    .venue { display: grid; gap: var(--space-6); align-items: stretch; }
    .venue-copy { display: grid; align-content: center; }
    .venue-copy address { margin-bottom: var(--space-4); color: var(--muted); font-style: normal; }
    .venue-map { min-height: 300px; border: 0; background: var(--line); }
    .venue-map iframe { width: 100%; height: 100%; min-height: 300px; border: 0; filter: saturate(.65) contrast(.92); }

    .faq { display: grid; max-width: 760px; }
    details { border-top: 1px solid var(--line); }
    details:last-child { border-bottom: 1px solid var(--line); }
    summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 64px; cursor: pointer; font-size: 1.05rem; font-weight: 600; list-style: none; }
    summary::-webkit-details-marker { display: none; }
    summary::after { flex: 0 0 auto; content: "+"; color: var(--accent-dark); font-family: var(--display); font-size: 1.8rem; font-weight: 400; }
    details[open] summary::after { content: "−"; }
    .faq-answer { max-width: 58ch; padding: 0 0 var(--space-5); color: var(--muted); }
    .faq-answer p { margin-bottom: 0; }

    .rsvp-section { background: var(--ink); color: var(--surface); }
    .rsvp-wrap { display: grid; gap: var(--space-6); max-width: 1120px; margin: 0 auto; padding: clamp(3.5rem, 9vw, 7rem) var(--space-5); }
    .rsvp-intro h2 { margin-bottom: var(--space-3); font-family: var(--display); font-size: clamp(2.7rem, 7vw, 5rem); font-weight: 400; letter-spacing: -.045em; line-height: .95; }
    .rsvp-intro p { max-width: 36ch; margin-bottom: 0; color: color-mix(in oklch, var(--surface) 75%, transparent); }
    .rsvp-form { display: grid; gap: var(--space-4); max-width: 520px; }
    .field { display: grid; gap: var(--space-2); }
    .field label, legend { font-size: .84rem; font-weight: 600; }
    .field input, .field select { width: 100%; min-height: 50px; border: 1px solid color-mix(in oklch, var(--surface) 45%, transparent); border-radius: 0; padding: 0 var(--space-3); background: transparent; color: var(--surface); }
    .field option { color: var(--ink); background: var(--surface); }
    fieldset { display: grid; gap: var(--space-3); margin: 0; padding: 0; border: 0; }
    .attendance-options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
    .attendance-options input { position: absolute; opacity: 0; pointer-events: none; }
    .attendance-options label { display: flex; min-height: 50px; align-items: center; justify-content: center; border: 1px solid color-mix(in oklch, var(--surface) 45%, transparent); cursor: pointer; font-weight: 600; }
    .attendance-options input:checked + label { border-color: var(--accent); background: var(--accent); color: var(--surface); }
    .rsvp-form .button { width: 100%; border-color: var(--accent); margin-top: var(--space-2); }
    .demo-note { margin: 0; color: color-mix(in oklch, var(--surface) 60%, transparent); font-size: .82rem; text-align: center; }
    .form-message { display: none; padding: var(--space-4); border: 1px solid color-mix(in oklch, var(--success) 75%, var(--surface)); color: var(--surface); }
    .form-message.show { display: block; animation: appear 300ms var(--ease-out) both; }

    .site-footer { border-top: 1px solid var(--line); margin: 0 auto; padding: var(--space-6) var(--space-5) max(2rem, env(safe-area-inset-bottom)); color: var(--muted); font: 400 .8rem/1.6 var(--planne-ui); }
    .footer-inner { max-width: 1072px; margin: auto; display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 24px 48px; }
    .planne-wordmark { font: 400 1.2rem/1.4 var(--planne-brand); letter-spacing: .01em; }
    .footer-copy { margin: 8px 0 0; }
    .footer-copy .planne-wordmark { font-size: .95rem; }
    .brand-heart { color: color-mix(in srgb, var(--planne-teal) 65%, #111827); }
    .footer-discover { max-width: 34ch; }
    .footer-invitation { margin: 8px 0 4px; }
    .footer-create { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--ink); font-weight: 500; text-decoration-color: var(--planne-teal); }
    .footer-create span[aria-hidden] { color: var(--ink); transition: transform 180ms var(--ease-out); }
    .footer-create:hover span[aria-hidden] { transform: translate(2px,-2px); }
    .footer-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 24px; }
    .footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
    .site-footer a:hover { text-decoration-color: var(--planne-teal); }
    @media (max-width: 600px) { .footer-inner { grid-template-columns: 1fr; gap: 20px; } .footer-discover { max-width: 38ch; } }
    .site-footer a { text-underline-offset: .2em; }
    .mobile-rsvp { display: none; }
    @keyframes appear { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    @media (min-width: 720px) {
      .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); }
      .hero-photo { min-height: 570px; }
      .hero-photo img { min-height: 570px; }
      .summary-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
      .summary-item { border-bottom: 0; border-right: 1px solid color-mix(in oklch, var(--surface) 25%, transparent); }
      .summary-item:last-child { border-right: 0; }
      .story { grid-template-columns: 1.1fr .9fr; }
      .details-grid { grid-template-columns: repeat(3, 1fr); }
      .venue { grid-template-columns: .85fr 1.15fr; }
      .rsvp-wrap { grid-template-columns: .85fr 1.15fr; align-items: start; }
    }
    @media (max-width: 719px) {
      .site-nav { display: none; }
      .hero { padding-top: var(--space-4); }
      .hero-photo { min-height: 440px; }
      .hero-photo img { min-height: 440px; }
      .mobile-rsvp { display: block; position: fixed; z-index: 4; right: var(--space-4); bottom: max(var(--space-4), env(safe-area-inset-bottom)); min-height: 48px; padding: 0 var(--space-4); background: var(--accent); color: var(--surface); font-size: .88rem; font-weight: 600; line-height: 48px; text-decoration: none; box-shadow: 0 10px 28px color-mix(in oklch, var(--ink) 35%, transparent); }
      .site-footer { padding-bottom: 5.5rem; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    }
    /* Revisão: papelaria do evento, informação legível e navegação móvel. */
    [hidden] { display: none !important; }
    .demo-bar { background: var(--surface); color: var(--muted); border-bottom: 1px solid var(--line); flex-wrap: wrap; font-size: .8rem; }
    .model-select { background: var(--surface); color: var(--ink); border-color: var(--line); min-height: 44px; }
    .site-header { flex-wrap: wrap; }
    .brand { font: 500 1.4rem var(--display); color: var(--accent-dark); }
    .site-nav { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
    .site-nav a { display: inline-flex; align-items: center; min-height: 44px; }
    .hero-grid { align-items: center; }
    h1 { font-weight: 400; letter-spacing: -.035em; line-height: 1.04; font-size: clamp(3.5rem, 7vw, 6rem); }
    .hero-lead { font-size: 1.05rem; max-width: 34ch; }
    .hero-meta { margin: 1.5rem 0; font-size: 1rem; color: var(--accent-dark); line-height: 1.8; }
    .hero-photo { aspect-ratio: 4 / 5; min-height: 0; }
    .hero-photo img { min-height: 0; height: 100%; }
    .hero-photo::before { content: none; }
    .button { background: var(--accent-dark); border-color: var(--accent-dark); border-radius: 4px; }
    .event-summary { background: transparent; color: var(--ink); }
    .summary-grid { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-top: 1rem; padding-bottom: 1rem; }
    .summary-item { border-color: var(--line); }
    .summary-item dt { color: var(--muted); font-size: .82rem; letter-spacing: .06em; }
    .summary-item dd { font-family: var(--body); font-size: 1.05rem; line-height: 1.5; }
    .section { padding-block: clamp(3rem, 6vw, 5rem); scroll-margin-top: 1rem; }
    .section + .section { padding-top: 1.5rem; }
    .section-heading h2, .venue-copy h2 { font: 400 clamp(2rem, 4vw, 3rem)/1.12 var(--display); letter-spacing: -.025em; }
    .section-heading .eyebrow { font: 500 .8rem/1.5 var(--body); color: var(--accent-dark); }
    .pull-quote { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.3; border-bottom: 0; }
    .timeline-time { font-size: 1rem; font-variant-numeric: tabular-nums; }
    .timeline-item h3, .detail h3 { font: 500 1.15rem/1.4 var(--body); letter-spacing: 0; }
    .practical { background: color-mix(in oklch, var(--accent-soft) 40%, var(--paper)); }
    .practical-inner { padding-block: clamp(3rem, 6vw, 5rem); }
    .rsvp-section { background: var(--surface); color: var(--ink); border-top: 1px solid var(--line); scroll-margin-top: 1rem; }
    .rsvp-intro h2 { font-size: clamp(2.4rem, 5vw, 3.5rem); line-height: 1.1; }
    .rsvp-intro p, .demo-note { color: var(--muted); }
    .field input, .field select { border-color: var(--muted); color: var(--ink); background: var(--surface); border-radius: 4px; }
    .field label, legend { font-size: 1rem; }
    .attendance-options label { border-color: var(--muted); border-radius: 4px; padding: .5rem; }
    .attendance-options input:checked + label { background: var(--accent-dark); border-color: var(--accent-dark); }
    .attendance-options input:focus-visible + label { outline: 3px solid var(--accent-dark); outline-offset: 3px; }
    .field-error { margin: 0; color: var(--danger); font-size: .9rem; }
    [aria-invalid="true"] { border-color: var(--danger) !important; }
    .form-message { color: var(--ink); overflow-wrap: anywhere; }
    .mobile-rsvp { background: var(--accent-dark); border-radius: 4px; }
    html[data-invite-style="ilustrado"] .section-heading h2 { font-size: clamp(2.8rem, 6vw, 4rem); line-height: 1.1; }
    html[data-invite-style="gravado"] .hero-photo { padding: 12px; border: 1px solid var(--accent); box-shadow: none; }
    html[data-invite-style="gravado"] .hero-copy { text-align: center; }
    html[data-invite-style="gravado"] .hero-lead { margin-inline: auto; }
    html[data-invite-style="gravado"] .hero-actions { justify-content: center; }
    html[data-invite-style="ilustrado"] .hero-copy { text-align: center; }
    html[data-invite-style="ilustrado"] .hero-lead { margin-inline: auto; }
    html[data-invite-style="ilustrado"] .hero-actions { justify-content: center; }
    html[data-invite-style="ilustrado"] .hero-photo { border-radius: 48% 52% 46% 54%; transform: rotate(-2deg); }
    html[data-invite-style="ilustrado"] .button { border-radius: 24px; }
    @media (min-width: 720px) {
      html[data-invite-style="gravado"] .hero-grid { grid-template-columns: 1fr; max-width: 720px; margin-inline: auto; }
      html[data-invite-style="gravado"] .hero-copy { order: 1; }
      html[data-invite-style="gravado"] h1 { max-width: none; }
      html[data-invite-style="gravado"] .hero-photo { width: 280px; margin-inline: auto; }
      html[data-invite-style="ilustrado"] .hero-photo { order: -1; }
    }
    @media (max-width: 719px) {
      .site-header { gap: .25rem; padding-bottom: .5rem; }
      .site-nav { width: 100%; justify-content: space-between; gap: .25rem; font-size: .85rem; }
      .hero { padding-bottom: 2rem; }
      .hero-photo { min-height: 0; max-height: 420px; }
      .hero-photo img { min-height: 0; }
      .hero-copy { padding-top: 1rem; }
      .summary-grid { margin-inline: 1.5rem; padding-inline: 0; }
      .summary-item { padding-block: .75rem; }
      .mobile-rsvp { left: 1rem; right: 1rem; text-align: center; bottom: 0; border-radius: 4px 4px 0 0; padding-bottom: env(safe-area-inset-bottom); }
    }
    /* Previews incorporados podem ser mais estreitos que um celular. O convite
       continua legível e rola apenas na vertical, sem cortar ações ou endereços. */
    @media (max-width: 319px) {
      :root { --space-4: .875rem; --space-5: 1rem; --space-6: 1.25rem; }
      html, body { width: 100%; max-width: 100%; overflow-x: clip; }
      .site-header { padding-inline: var(--space-4); }
      .site-nav { font-size: .72rem; }
      .site-nav a { min-height: 38px; }
      .hero, .section, .practical-inner, .rsvp-wrap { padding-inline: var(--space-4); }
      .hero-actions { display: grid; grid-template-columns: 1fr; }
      .hero-actions .button { width: 100%; padding-inline: var(--space-3); }
      .hero-meta, .summary-item dd, .venue-copy address, .detail p, .faq-answer { overflow-wrap: anywhere; }
      .summary-grid { margin-inline: var(--space-4); }
      .timeline-item { grid-template-columns: 1fr; gap: var(--space-2); }
      .attendance-options { grid-template-columns: 1fr; }
      .section-divider { gap: 10px; }
    }
    /* Ornamentos vetoriais locais: acompanham a cor e o modelo do convite. */
    .ornament-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
    main > section { position: relative; isolation: isolate; }
    .page-ornament { position: absolute; z-index: -1; pointer-events: none; color: var(--accent); width: clamp(100px, 16vw, 220px); height: 240px; right: -50px; top: 16px; opacity: .32; }
    main > section:nth-of-type(even) .page-ornament { left: -65px; right: auto; transform: rotate(180deg); top: auto; bottom: 12px; }
    .ornament-illustrated, .ornament-engraved { display: none; }
    .section-divider { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 24px auto 0; max-width: 280px; color: var(--accent); pointer-events: none; }
    .section-divider::before, .section-divider::after { content: ''; height: 1px; flex: 1; background: currentColor; opacity: .4; }
    .section-divider svg { width: 56px; height: 28px; }
    .hero::after { content: ''; position: absolute; inset: 12px 8px 24px; border: 1px solid color-mix(in oklch, var(--accent) 20%, transparent); z-index: -1; pointer-events: none; }
    .rsvp-section > .page-ornament { top: 0; right: 0; bottom: auto; left: auto; width: 90px; height: 110px; opacity: .22; }
    html[data-invite-style="ilustrado"] .ornament-editorial { display: none; }
    html[data-invite-style="ilustrado"] .ornament-illustrated { display: block; }
    html[data-invite-style="ilustrado"] .page-ornament { opacity: .48; color: var(--accent-dark); }
    html[data-invite-style="ilustrado"] .hero::after { border: 0; }
    html[data-invite-style="gravado"] .ornament-editorial { display: none; }
    html[data-invite-style="gravado"] .ornament-engraved { display: block; }
    html[data-invite-style="gravado"] .page-ornament { color: oklch(55% .075 66); opacity: .55; }
    html[data-invite-style="gravado"] .hero::after { border-style: double; border-width: 3px; }
    html[data-invite-style="gravado"] .section-divider { color: oklch(55% .075 66); }

    /* Estado sem foto de capa: um convite continua completo, sem espaço vazio. */
    .hero-no-photo { display: none; }
    .hero.no-cover { padding-top: clamp(2rem, 6vw, 4rem); }
    .hero.no-cover .hero-grid {
      display: grid;
      grid-template-columns: 1fr;
      min-height: min(510px, 68vh);
      max-width: 760px;
      margin-inline: auto;
      place-items: center;
      overflow: hidden;
      border: 1px solid color-mix(in oklch, var(--accent) 30%, var(--line));
      background: color-mix(in oklch, var(--accent-soft) 22%, var(--surface));
      position: relative;
    }
    .hero.no-cover .hero-copy { position: relative; z-index: 1; max-width: 590px; padding: clamp(2.5rem, 8vw, 5rem) 1.5rem; text-align: center; }
    .hero.no-cover .hero-lead { margin-inline: auto; }
    .hero.no-cover .hero-meta { margin-inline: auto; }
    .hero.no-cover .hero-actions { justify-content: center; }
    .hero.no-cover .hero-no-photo {
      display: grid;
      position: absolute;
      inset: 0;
      place-items: center;
      color: var(--accent);
      opacity: .17;
    }
    .hero-no-photo::before,
    .hero-no-photo::after { content: ''; position: absolute; width: clamp(160px, 26vw, 240px); aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; }
    .hero-no-photo::before { transform: translate(-30%, -20%); }
    .hero-no-photo::after { transform: translate(30%, 20%); }
    .hero-no-photo svg { width: min(85%, 460px); height: 360px; }
    html[data-invite-style="ilustrado"] .hero.no-cover .hero-grid { border: 0; background: color-mix(in oklch, var(--accent-soft) 72%, var(--surface)); border-radius: 46% 54% 44% 56%; }
    /* Sem foto, as flores ficam como moldura e não competem com a leitura. */
    html[data-invite-style="ilustrado"] .hero.no-cover .hero-no-photo { opacity: .16; }
    html[data-invite-style="ilustrado"] .hero.no-cover .hero-copy {
      background: color-mix(in oklch, var(--surface) 91%, white);
      border: 1px solid color-mix(in oklch, var(--accent) 18%, transparent);
      border-radius: 28px;
      box-shadow: 0 12px 30px color-mix(in oklch, var(--accent-dark) 11%, transparent);
    }
    html[data-invite-style="ilustrado"] .hero.no-cover h1 {
      font-family: var(--display);
      font-size: clamp(3.3rem, 10vw, 6rem);
      line-height: .92;
    }
    html[data-invite-style="ilustrado"] .hero.no-cover .hero-no-photo::before,
    html[data-invite-style="ilustrado"] .hero.no-cover .hero-no-photo::after { border-radius: 46% 54% 44% 56%; }
    html[data-invite-style="gravado"] .hero.no-cover .hero-grid { border: 5px double oklch(55% .075 66); background: var(--surface); }
    html[data-invite-style="gravado"] .hero.no-cover .hero-no-photo { color: oklch(55% .075 66); opacity: .3; }
    html[data-invite-style="gravado"] .hero.no-cover .hero-no-photo::before,
    html[data-invite-style="gravado"] .hero.no-cover .hero-no-photo::after { border-radius: 0; transform: none; width: calc(100% - 42px); height: calc(100% - 42px); }
    html[data-invite-style="gravado"] .hero.no-cover .hero-no-photo::after { width: calc(100% - 62px); height: calc(100% - 62px); }
    @media (max-width: 719px) {
      .page-ornament { width: 110px; height: 150px; right: -70px; opacity: .24; }
      main > section:nth-of-type(even) .page-ornament { left: -75px; }
      html[data-invite-style="ilustrado"] .page-ornament { opacity: .32; }
      .hero::after { inset: 8px 10px 12px; }
      .section-divider { max-width: 190px; margin-top: 16px; }
      .hero.no-cover .hero-grid { min-height: 500px; }
    }

/* Marca independente da paleta do evento; o papel preserva o loading original. */
.invite-loading { overflow: hidden; }
.invite-loading .site-header, .invite-loading main, .invite-loading .site-footer,
.invite-loading .mobile-rsvp { visibility: hidden; }
.invite-status { position: fixed; inset: 0; z-index: 30; flex-direction: column;
  gap: 24px; padding: 24px; overflow-y: auto; background: #f8fafc; color: #111827; font-family: var(--planne-ui); }
.loading-stationery { flex-shrink: 0; width: min(64vw, 240px, 42svh); aspect-ratio: .78; border: 1px solid #e5eaf0;
  outline: 1px solid #e5eaf0; outline-offset: -10px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; background: #fafbfc;
  animation: stationery-breathe 3.6s ease-in-out infinite; }
.loading-signature { position: relative; width: 96px; height: 100px; color: var(--planne-teal); font: 400 96px/1 var(--planne-brand); }
.loading-signature span { position: absolute; inset: 0; animation: planne-compose 3.6s var(--ease-out) infinite both; }
.loading-signature span:nth-child(1) { clip-path: inset(0 54% 0 0); }
.loading-signature span:nth-child(2) { clip-path: inset(0 0 53% 46%); animation-delay: 120ms; }
.loading-signature span:nth-child(3) { clip-path: inset(47% 0 0 46%); animation-delay: 240ms; }
.loading-stationery svg { width: 80px; height: 32px; color: var(--planne-teal); opacity: .65; }
.loading-rule { width: 48%; height: 1px; background: #c4dfdc; animation: planne-rule 3.6s var(--ease-out) infinite both; }
.loading-rule.short { width: 30%; animation-delay: 140ms; }
.loading-copy { max-width: 30ch; margin: 0; font-size: .85rem; color: #6b7280; }
.loading-brand { font: 400 1.5rem/1.2 var(--planne-brand); letter-spacing: .01em; }
.has-error .loading-stationery, .has-error .loading-stationery * { animation: none; }
.companion-names { display: grid; gap: 24px; }
.companion-names .field { padding-top: 16px; border-top: 1px solid var(--line); }
.rsvp-form.is-complete > :not(.rsvp-completion) { display: none; }
.rsvp-completion { align-self: center; text-align: center; padding: clamp(24px,5vw,48px) 24px;
  border: 1px solid var(--line); background: var(--paper); animation: appear 300ms var(--ease-out) both; }
.rsvp-completion h3 { font: 400 clamp(2rem,5vw,3rem)/1.1 var(--display); color: var(--accent-dark); margin: 16px 0; }
.rsvp-completion p { color: var(--muted); margin: 0; overflow-wrap: anywhere; }
.completion-ornament svg { width: 80px; height: 32px; color: var(--accent-dark); }
.rsvp-form[aria-busy="true"] { cursor: progress; }
.rsvp-form button:disabled { opacity: .65; cursor: default; }
.attendance-options input:focus-visible + label { outline: 2px solid var(--accent-dark); outline-offset: 3px; }
@keyframes stationery-breathe { 50% { transform: translateY(-4px); } }
@keyframes planne-compose { 0%, 100% { opacity: .18; transform: translateY(5px); } 22%, 78% { opacity: 1; transform: translateY(0); } }
@keyframes planne-rule { 0%, 100% { opacity: .35; transform: scaleX(.65); } 30%, 75% { opacity: 1; transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .loading-stationery, .loading-stationery .loading-signature span, .loading-stationery .loading-rule, .rsvp-completion, .form-message.show { animation: none; }
  .footer-create span[aria-hidden] { transition: none; transform: none; }
}