/* ============================================================
     DISEÑO — PRODUCTION-POLISH PASS
     Auditoría forense de public/assets/stationery/: de 15 assets
     extraídos de RSVP_ASSETS.png, solo paper-texture.jpg pasó la
     prueba de transparencia limpia (sin halo/ghosting). Sello, tape,
     botánicos, bordes rasgados y marco de foto se reconstruyeron en
     CSS/SVG — ver docs/reference para el detalle. Regla: 5 assets
     excelentes > 15 mal recortados.

     ILUMINACIÓN: fuente única, superior-izquierda. Todo lo levantado
     proyecta sombra CORTA de contacto + sombra AMBIENTAL suave hacia
     abajo-derecha — nunca un solo blur genérico. El papel es el
     contenido; el vidrio (liquid glass) vive solo en el botón de
     menú y su cierre.
  ============================================================ */
  :root{
    --color-background-primary:#F6F1E7;
    --color-background-secondary:#EFE7D6;
    --color-text-primary:#8B7E72;
    --color-text-secondary:#6E6459;
    --color-text-tertiary:#9C9186;
    --color-accent:#A6774F;
    --color-border:#C9BEAF;
    --color-white:#ffffff;

    --font-display:'Cormorant Garamond', Georgia, serif;
    --font-body:'Jost', Helvetica, Arial, sans-serif;
    --font-script:'Caveat', cursive;

    --content-max: 640px;
    --content-max-wide: 900px;
    --section-pad-y: clamp(3.5rem, 9vw, 6.5rem);
    --section-pad-x: clamp(1.25rem, 6vw, 2.5rem);

    --radius-pill: 999px;

    --surface-canvas: var(--color-background-primary);
    --surface-paper: #FDFBF6;
    --surface-paper-warm: #F1E8D8;
    --paper-edge: #C9BEAF;
    --paper-grain: .05;
    /* grano sutil: micro-textura de fondo, no una "decoración" de la
       biblioteca (tape/flores/lacre/papel rasgado/moños/clips/pétalos/
       scrapbook) — se mantiene como SVG generado, extremadamente sutil. */
    --grain-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

    /* ---------- sombra dual: CONTACTO (corta, definida) + AMBIENTAL
       (suave, grande). Misma dirección de luz en todo el sitio:
       upper-left → sombra hacia lower-right. Nadie inventa su
       propia sombra. ---------- */
    --shadow-ink: 38,30,21;
    --contact-flat:   0 1px 1px rgba(var(--shadow-ink),.07);
    --contact-taped:  1px 2px 2px rgba(var(--shadow-ink),.10), 3px 7px 12px -6px rgba(var(--shadow-ink),.16);
    --contact-loose:  2px 3px 3px rgba(var(--shadow-ink),.13), 5px 13px 22px -8px rgba(var(--shadow-ink),.22);
    --contact-photo:  3px 5px 5px rgba(var(--shadow-ink),.17), 8px 20px 32px -9px rgba(var(--shadow-ink),.28);
    --contact-wax:    1px 2px 2px rgba(var(--shadow-ink),.34), 2px 5px 7px rgba(var(--shadow-ink),.2);
    --shadow-floating: 0 10px 22px -6px rgba(var(--shadow-ink),.28), 0 3px 8px rgba(var(--shadow-ink),.15);

    /* alias retro-compatibles */
    --elevation-1: var(--contact-flat);
    --elevation-2: var(--contact-loose);
    --elevation-3: var(--contact-photo);
    --elevation-4: var(--contact-wax);
    --elevation-5: var(--shadow-floating);
    --shadow-contact: var(--elevation-1);
    --shadow-paper: var(--elevation-2);
    --shadow-photo: var(--elevation-3);
    --shadow-floating-alias: var(--elevation-5);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  html, body{overflow-x:clip;}

  /* ================= SUPERFICIE — mesa editorial física =================
     Base: mosaico sin costura de CHIVIS65_PARCHMENT_BACKGROUND.png (recorte
     limpio de su zona de papel, sin flores/sello/texto — esos ya existen
     como piezas individuales en la librería y no deben duplicarse aquí),
     pre-mezclado 50/50 con el marfil del sitio para que el grano/fibra real
     del papel se note sin oscurecer el fondo. Encima: luz ambiental suave
     superior-izquierda + caída tonal hacia abajo-derecha + grano fino. El
     mosaico viaja CON la página (no fixed): una sola hoja continua de
     principio a fin, no un fondo por sección. */
  body{
    margin:0;
    background-color:var(--surface-canvas);
    background-image:url(../stationery/parchment-tile.jpg);
    background-repeat:repeat;
    background-size:760px 760px;
    color:var(--color-text-secondary);
    font-family:var(--font-body);
    font-weight:300;
    -webkit-font-smoothing:antialiased;
    position:relative;
  }
  body::before{
    content:'';
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(1300px 850px at 10% -10%, rgba(255,255,255,.55), transparent 56%),
      radial-gradient(1100px 750px at 102% 108%, rgba(32,25,17,.05), transparent 52%),
      linear-gradient(158deg, rgba(255,255,255,.09) 0%, transparent 38%, transparent 66%, rgba(32,25,17,.028) 100%);
  }
  body::after{
    content:'';
    position:fixed; inset:0; z-index:0; pointer-events:none;
    opacity:.05; mix-blend-mode:multiply;
    background-image:var(--grain-image);
    background-size:460px 460px;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;}

  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration:.001ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.001ms !important;
      scroll-behavior:auto !important;
    }
  }

  #view-site, #view-rsvp, .envelope-gate, .nav-panel{ position:relative; z-index:1; }

  /* ---------- papel base: grano real por-pieza, sombra de "loose paper". ---------- */
  .paper{
    position:relative;
    background:var(--surface-paper);
    background-image:linear-gradient(165deg, rgba(255,255,255,.5), rgba(0,0,0,.02) 55%, rgba(0,0,0,.035));
    border:1px solid var(--paper-edge);
    box-shadow:var(--elevation-2);
    border-radius:2px;
  }
  .paper::after{
    content:'';
    position:absolute; inset:0;
    background-image:var(--grain-image);
    background-size:260px 260px;
    opacity:var(--paper-grain);
    mix-blend-mode:multiply;
    pointer-events:none;
  }
  /* ---------- borde rasgado: clip-path orgánico, 4 variantes con ritmo
     distinto. Decisión técnica: el canto de una tarjeta debe estirarse a
     cualquier ancho responsivo — un PNG fijo ahí solo puede lograrlo
     distorsionándose (prohibido explícitamente). El clip-path no es un
     "fake" de un asset disponible: es la única forma honesta de que el
     borde rasgado se adapte sin deformarse. Los fragmentos de papel
     rasgado REALES de la librería (paper-cream-torn.png / paper-olive.png)
     se usan aparte, a su proporción nativa, como piezas de fondo. ---------- */
  .paper--torn-a, .paper--torn-b, .paper--torn-c, .paper--torn-d, .paper--torn{
    border-top:none;
  }
  .paper--torn-a, .paper--torn{
    clip-path:polygon(
      0% 7px, 3% 2px, 7% 5px, 12% 1px, 16% 6px, 21% 0px, 26% 4px, 32% 1px,
      38% 6px, 44% 2px, 50% 5px, 56% 0px, 62% 4px, 68% 1px, 74% 6px, 80% 2px,
      86% 5px, 91% 0px, 96% 4px, 100% 1px, 100% 100%, 0% 100%
    );
  }
  .paper--torn-b{
    clip-path:polygon(
      0% 2px, 4% 6px, 9% 1px, 14% 5px, 19% 0px, 25% 7px, 31% 2px, 37% 5px,
      43% 0px, 49% 6px, 55% 1px, 61% 4px, 67% 0px, 73% 6px, 79% 1px, 85% 5px,
      91% 0px, 96% 4px, 100% 2px, 100% 100%, 0% 100%
    );
  }
  .paper--torn-c{
    clip-path:polygon(
      0% 5px, 5% 0px, 10% 4px, 15% 1px, 21% 6px, 27% 2px, 33% 0px, 39% 5px,
      45% 1px, 51% 4px, 57% 0px, 63% 6px, 69% 2px, 75% 0px, 81% 5px, 87% 1px,
      93% 4px, 100% 0px, 100% 100%, 0% 100%
    );
  }
  .paper--torn-d{
    clip-path:polygon(
      0% 4px, 6% 1px, 11% 6px, 17% 0px, 23% 5px, 29% 1px, 35% 3px, 40% 0px,
      47% 6px, 53% 1px, 59% 4px, 65% 0px, 71% 5px, 77% 2px, 83% 6px, 89% 0px,
      95% 3px, 100% 1px, 100% 100%, 0% 100%
    );
  }

  /* ================= LACRE — asset real (CHIVIS65_ASSETS_PNG_LIMPIOS/sellos) =================
     sellos_01.png: limpio de verdad, sin halo, listo para usarse a
     cualquier tamaño. Reemplaza el blob CSS de la pasada anterior. */
  .seal-mark{
    position:relative;
    display:inline-block;
    width:56px; height:56px; flex-shrink:0;
    background-image:url(../stationery/seal-main.png);
    background-size:contain; background-repeat:no-repeat; background-position:center;
    filter:drop-shadow(1px 4px 5px rgba(var(--shadow-ink),.32));
  }
  .seal-mark span{ display:none; }
  .seal-mark--lg{ width:88px; height:88px; }
  .script-line{ font-family:var(--font-script); color:var(--color-text-secondary); line-height:1.3; }

  .ghost-stamp{
    position:absolute; z-index:0;
    width:92px; height:92px; border-radius:50%;
    border:1px dashed rgba(139,126,114,.22);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-size:.72rem; letter-spacing:.08em;
    color:rgba(139,126,114,.22);
    pointer-events:none;
    transform:rotate(-6deg);
  }
  .ghost-stamp::before{
    content:'';
    position:absolute; inset:8px;
    border-radius:50%;
    border:1px solid rgba(139,126,114,.14);
  }

  .paperclip{
    position:absolute; z-index:5; width:18px; height:auto; aspect-ratio:93/327;
    background-image:url(../stationery/clip-gold.png);
    background-size:contain; background-repeat:no-repeat;
    filter:drop-shadow(1px 3px 3px rgba(var(--shadow-ink),.3));
    pointer-events:none;
  }

  /* ================= TAPE — asset real (CHIVIS65_ASSETS_PNG_LIMPIOS/tapes) =================
     2 estilos curados, reusados con intención (lenguaje visual
     reconocible) — nunca más de 1-2 piezas por composición. */
  .tape{
    position:absolute; z-index:5; width:64px; height:28px;
    background-repeat:no-repeat; background-size:contain; background-position:center;
    pointer-events:none;
  }
  .tape--01, .tape--03{ background-image:url(../stationery/tape-a.png); }
  .tape--02, .tape--04{ background-image:url(../stationery/tape-b.png); }

  /* ================= FOTO IMPRESA FÍSICA — .physical-print =================
     Reemplaza el marco raster (halo blanco/borroso visible = el
     problema #1 reportado). Imagen NÍTIDA dentro de un papel real:
     borde blanco desigual leve, base más gruesa, grano sutil,
     rotación mínima, sombra de contacto + ambiental. Nada de blur ni
     glow alrededor de la fotografía. */
  .physical-print, .portada__photo, .cause-item__photo{
    position:relative;
    background:#FCFAF4;
    padding:.4rem .4rem 1.65rem;
    box-shadow:var(--elevation-3);
  }
  .physical-print::before, .portada__photo::before, .cause-item__photo::before{
    content:'';
    position:absolute; inset:0;
    background-image:var(--grain-image);
    background-size:210px 210px;
    opacity:.1;
    mix-blend-mode:multiply;
    pointer-events:none;
    z-index:2;
  }
  .physical-print img, .portada__photo img:first-child, .cause-item__photo img:first-child{
    position:relative; z-index:1;
    display:block; width:100%; height:auto;
    object-fit:cover;
  }

  /* ---------- micro-motion contextual (nunca fade-up genérico repetido) ---------- */
  .reveal-on-scroll{
    opacity:0; transform:translateY(10px) rotate(var(--reveal-rot, 0deg));
    transition:opacity .4s ease, transform .4s cubic-bezier(.22,.9,.28,1);
  }
  .reveal-on-scroll.is-visible{ opacity:1; transform:translateY(0) rotate(var(--reveal-rot-final, 0deg)); }
  .reveal-photo{ transform:scale(.97) rotate(var(--reveal-rot,0deg)); transition:opacity .45s ease, transform .5s cubic-bezier(.22,.9,.28,1); }
  .reveal-photo.is-visible{ transform:scale(1) rotate(var(--reveal-rot-final,0deg)); }
  @media (prefers-reduced-motion: reduce){
    .reveal-on-scroll, .reveal-photo{ opacity:1; transform:none; transition:none; }
  }

  .wrap{ max-width:var(--content-max); margin:0 auto; padding:0 var(--section-pad-x); }
  .wrap--wide{max-width:var(--content-max-wide);}

  /* ================= ENCABEZADO / NAVEGACIÓN ================= */
  .menu-trigger{
    position:fixed; top:clamp(.9rem,3vw,1.4rem); right:clamp(.9rem,3vw,1.4rem);
    z-index:40;
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px;
    background:rgba(255,255,255,.28);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border:1px solid rgba(255,255,255,.5);
    border-radius:50%;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.6),
      inset 0 0 0 1px rgba(255,255,255,.08),
      var(--elevation-5);
    color:var(--color-text-secondary);
    cursor:pointer;
    transition:transform .15s ease, background .2s ease;
  }
  .menu-trigger:active{ transform:scale(.94); }
  .menu-trigger__lines{ display:flex; flex-direction:column; gap:4px; width:20px; }
  .menu-trigger__lines span{ display:block; height:1px; background:currentColor; transition:transform .2s ease, opacity .2s ease; }
  .menu-trigger[aria-expanded="true"] .menu-trigger__lines span:first-child{ transform:translateY(5px) rotate(45deg); }
  .menu-trigger[aria-expanded="true"] .menu-trigger__lines span:last-child{ transform:translateY(-5px) rotate(-45deg); }

  .editorial-header{
    display:flex; align-items:center;
    max-width:var(--content-max);
    margin:0 auto;
    padding:1.1rem clamp(1.1rem,4vw,1.5rem) .25rem;
  }
  .editorial-header__back{
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; margin-left:-.6rem;
    background:none; border:none; text-decoration:none;
    color:var(--color-text-secondary); font-size:1.15rem;
    cursor:pointer;
  }

  .nav-panel{
    position:fixed; inset:0; z-index:60;
    display:flex; align-items:center; justify-content:center;
    padding:1.5rem;
    opacity:0; visibility:hidden;
    transition:opacity .3s ease, visibility 0s linear .3s;
  }
  .nav-panel.is-open{ opacity:1; visibility:visible; transition:opacity .3s ease; }
  .nav-panel__backdrop{
    position:absolute; inset:0;
    background:rgba(60,50,38,.24);
    backdrop-filter:blur(7px) saturate(115%);
    -webkit-backdrop-filter:blur(7px) saturate(115%);
  }
  .nav-panel__sheet{
    position:relative; z-index:1;
    width:100%; max-width:360px; max-height:88vh; overflow-y:auto;
    padding:2.5rem 2rem 2.25rem;
    text-align:left;
    box-shadow:var(--elevation-3);
    transform:translateY(18px) rotate(-1.1deg) scale(.98);
    transition:transform .38s cubic-bezier(.2,.9,.3,1.05);
  }
  .nav-panel.is-open .nav-panel__sheet{ transform:translateY(0) rotate(-.6deg) scale(1); }
  .nav-panel__close{
    position:absolute; top:clamp(.9rem,3vw,1.25rem); right:clamp(.9rem,3vw,1.25rem);
    width:40px; height:40px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.3);
    backdrop-filter:blur(16px) saturate(170%);
    -webkit-backdrop-filter:blur(16px) saturate(170%);
    border:1px solid rgba(255,255,255,.5); border-radius:50%;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.55), var(--elevation-1);
    color:var(--color-text-primary);
    cursor:pointer;
    transition:transform .15s ease;
  }
  .nav-panel__close:active{ transform:scale(.9); }
  .nav-panel__mark{
    font-family:var(--font-display); font-size:1.15rem; letter-spacing:.1em;
    color:var(--color-text-primary);
    text-align:center;
    margin:0 0 2.25rem;
  }
  .nav-panel ul{ list-style:none; margin:0 0 2rem; padding:0; }
  .nav-panel li{ border-bottom:1px solid var(--color-background-secondary); }
  .nav-panel li:last-child{ border-bottom:none; }
  .nav-panel a{
    display:flex; align-items:center;
    text-decoration:none;
    font-family:var(--font-display);
    font-size:1.4rem;
    color:var(--color-text-secondary);
    padding:.85rem 0;
    min-height:44px;
    transition:color .2s ease;
  }
  .nav-panel a:hover, .nav-panel a:focus-visible{ color:var(--color-text-primary); }
  .nav-panel a.active{ color:var(--color-accent); }
  .nav-panel__divider{ width:32px; height:1px; background:var(--color-border); margin:0 0 1.5rem; }
  .nav-panel__tagline{ font-size:1.15rem; text-align:center; margin:0; }
  body.nav-open, body.no-scroll{ overflow:hidden; }

  /* ================= BOTONES ================= */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
    font-family:var(--font-body);
    font-size:.95rem;
    letter-spacing:.02em;
    text-decoration:none;
    text-align:center;
    color:var(--color-text-primary);
    background:transparent;
    border:1px solid var(--color-border);
    border-radius:var(--radius-pill);
    padding:.9rem 1.9rem;
    min-height:44px;
    cursor:pointer;
    transition:background .2s ease, color .2s ease, border-color .2s ease, transform .12s ease;
  }
  .btn:hover{ background:var(--color-text-primary); border-color:var(--color-text-primary); color:var(--color-white); }
  .btn:active{ transform:scale(.98); }
  .btn.btn-primary{ background:var(--color-text-primary); border-color:var(--color-text-primary); color:var(--color-white); }
  .btn.btn-primary:hover{ background:var(--color-accent); border-color:var(--color-accent); }
  .btn.btn-block{display:flex; width:100%;}
  .btn[disabled]{opacity:.45; cursor:not-allowed;}
  .btn:hover[disabled]{background:transparent; color:var(--color-text-primary);}
  .btn-text{
    background:none;border:none;
    font-family:var(--font-body);
    color:var(--color-text-tertiary);
    text-decoration:underline;
    cursor:pointer;
    font-size:.9rem;
    padding:.6rem;
    min-height:44px;
  }
  .btn-row-center{display:flex; justify-content:center; gap:1rem; flex-wrap:wrap;}

  /* ================= SOBRE (pantalla 01) ================= */
  .envelope-gate{
    position:fixed; inset:0; z-index:100;
    background-color:var(--surface-canvas);
    background-image:url(../stationery/parchment-tile.jpg);
    background-repeat:repeat;
    background-size:760px 760px;
    display:flex; align-items:center; justify-content:center;
    padding:1.75rem 1.5rem;
    overflow-y:auto;
    transition:opacity .35s ease;
  }
  .envelope-gate[hidden]{ display:none; }
  .envelope-gate.is-dismissed{ opacity:0; pointer-events:none; }
  .envelope-gate__inner{ position:relative; text-align:center; width:100%; max-width:360px; margin:auto; }
  /* pétalo suelto, esquina opuesta a la ramita — el sobre sigue siendo el
     único protagonista del centro, respirando sin decoración alrededor */
  .envelope-gate__petal{
    position:fixed; z-index:0; right:-10px; top:-8px;
    width:64px; height:auto;
    opacity:.8;
    transform:rotate(18deg);
    filter:drop-shadow(1px 4px 7px rgba(var(--shadow-ink),.12));
    pointer-events:none;
  }
  .envelope-gate__kicker{
    font-family:var(--font-body); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
    color:var(--color-text-tertiary); margin:0 0 1.1rem;
  }
  .envelope-gate__divider{ width:26px; height:1px; background:var(--color-border); margin:0 auto 1.1rem; }
  .envelope-gate__eyebrow{
    font-family:var(--font-body); font-size:.85rem; letter-spacing:.1em; text-transform:uppercase;
    color:var(--color-text-secondary); margin:0 0 .3rem;
  }
  .envelope-gate__name{
    font-family:var(--font-display); font-weight:300; font-size:clamp(2rem,9vw,2.5rem);
    color:var(--color-text-primary); margin:0 0 2rem;
  }
  /* entra desde el borde inferior-izquierdo del viewport — nunca flota suelta */
  .envelope-gate__botanical{
    position:fixed; z-index:0; left:-18px; bottom:-14px;
    width:104px; height:auto;
    opacity:.85;
    filter:drop-shadow(2px 6px 10px rgba(var(--shadow-ink),.14));
    pointer-events:none;
  }

  .envelope{
    position:relative; z-index:1;
    width:min(280px, 78vw);
    aspect-ratio:1/0.86;
    margin:0 auto 2rem;
    perspective:1400px;
    transition:filter .5s ease;
    filter:drop-shadow(4px 10px 18px rgba(var(--shadow-ink),.18)) drop-shadow(1px 3px 4px rgba(var(--shadow-ink),.14));
  }
  .envelope.is-open{
    filter:drop-shadow(6px 26px 34px rgba(var(--shadow-ink),.28)) drop-shadow(2px 6px 8px rgba(var(--shadow-ink),.18));
  }
  .envelope__base{
    position:absolute; inset:0;
    background:
      radial-gradient(ellipse 70% 26% at 50% 52%, rgba(45,35,25,.10), transparent 70%),
      linear-gradient(180deg, rgba(255,255,255,.5), transparent 40%),
      linear-gradient(135deg, transparent 49.3%, rgba(70,56,40,.1) 49.3%, rgba(70,56,40,.1) 50.7%, transparent 50.7%),
      linear-gradient(45deg, transparent 49.3%, rgba(70,56,40,.1) 49.3%, rgba(70,56,40,.1) 50.7%, transparent 50.7%),
      var(--surface-paper-warm);
    background-size:auto, auto, auto, auto, cover;
    border:1px solid var(--color-border);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
  }
  .envelope__base::after{
    content:'';
    position:absolute; inset:0;
    background-image:var(--grain-image);
    background-size:220px 220px;
    opacity:.16;
    mix-blend-mode:multiply;
  }
  .envelope__flap{
    position:absolute; top:0; left:0; right:0; height:52%;
    background:linear-gradient(155deg, #F9F4E9, var(--surface-paper-warm) 88%);
    clip-path:polygon(0 0, 100% 0, 50% 100%);
    border:1px solid var(--color-border);
    transform-origin:top center;
    transform-style:preserve-3d;
    transition:transform .48s cubic-bezier(.4,0,.2,1), filter .48s ease;
    filter:drop-shadow(0 3px 3px rgba(var(--shadow-ink),.16));
    z-index:2;
  }
  .envelope__seal{
    position:absolute; left:50%; top:47%; transform:translate(-50%,-50%);
    z-index:3;
    transition:opacity .3s ease, transform .3s cubic-bezier(.4,0,.2,1);
  }
  .envelope.is-sealing .envelope__seal{ transform:translate(-50%,-50%) scale(.9); }
  .envelope.is-open .envelope__flap{ transform:rotateX(-162deg); filter:drop-shadow(0 18px 22px rgba(var(--shadow-ink),.3)); }
  .envelope.is-open .envelope__seal{ opacity:0; transform:translate(-50%,-50%) scale(.55); }

  .envelope-cta{
    display:inline-flex; align-items:center; gap:.6rem;
    font-family:var(--font-body); font-size:.85rem; letter-spacing:.08em; text-transform:uppercase;
    color:var(--color-white); background:var(--color-text-primary);
    border:none; border-radius:999px;
    padding:1rem 1.85rem;
    cursor:pointer;
    min-height:44px;
    transition:opacity .2s ease, transform .12s ease;
  }
  .envelope-cta:hover{ opacity:.9; }
  .envelope-cta:active{ transform:scale(.98); }
  .envelope-cta[aria-expanded="true"] svg{ transform:translateY(2px); }
  .envelope-gate__footer{
    font-family:var(--font-body); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--color-text-tertiary); line-height:1.9; margin:2rem 0 0;
  }
  @media (prefers-reduced-motion: reduce){
    .envelope, .envelope__flap, .envelope__seal{ transition:none; }
  }

  /* ================= PORTADA (pantalla 02) ================= */
  .portada{ padding:.5rem 1.25rem 2.25rem; text-align:center; overflow:visible; }
  .portada__composition{
    position:relative;
    max-width:290px; margin:0 auto 1.1rem;
    padding-top:2.25rem;
  }
  /* papel real (paper-olive.png), no un rectángulo CSS — cover preserva
     su proporción nativa, nunca se distorsiona */
  .portada__paper-behind{
    position:absolute; z-index:0;
    top:4%; left:-7%; width:58%; height:42%;
    background-image:url(../stationery/paper-olive.png);
    background-size:cover; background-position:center;
    box-shadow:var(--elevation-1);
    transform:rotate(-5deg);
    opacity:.92;
  }
  .portada__photo{
    z-index:2;
    width:78%; margin:0 0 0 auto;
    transform:rotate(-3.4deg);
  }
  .portada__photo img:first-child{ aspect-ratio:3/4; object-position:50% 22%; }
  .portada__seal{ position:absolute; top:-14px; right:-4px; z-index:4; }
  .portada__caption{
    position:relative; z-index:1;
    font-family:var(--font-script); font-size:1.15rem; line-height:1.05;
    color:var(--color-text-secondary); text-align:right;
    transform:rotate(-1.4deg);
    margin:.85rem .3rem 0 0;
  }
  .portada__card{
    position:relative; z-index:1;
    width:92%; max-width:280px; margin:-2.15rem auto 0 0;
    background:var(--surface-paper);
    border:1px solid var(--paper-edge);
    box-shadow:var(--elevation-2);
    padding:2.9rem 1.15rem 1.35rem;
    text-align:center;
    transform:rotate(1.6deg);
  }
  .portada__card::after{
    content:'';
    position:absolute; inset:0;
    background-image:var(--grain-image);
    background-size:260px 260px;
    opacity:var(--paper-grain);
    mix-blend-mode:multiply;
    pointer-events:none;
  }
  .portada__card-eyebrow{
    font-family:var(--font-body); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--color-text-tertiary); margin:0 0 .3rem;
  }
  .portada__card-name{
    font-family:var(--font-display); font-weight:300; font-size:clamp(1.6rem,6.5vw,1.9rem);
    color:var(--color-text-primary); margin:0 0 .85rem;
  }
  .portada__card-meta{
    font-family:var(--font-body); font-size:.64rem; letter-spacing:.06em; text-transform:uppercase;
    color:var(--color-text-tertiary); margin:0 0 .4rem;
  }
  .portada__card-venue{
    font-family:var(--font-display); font-size:1.1rem; color:var(--color-text-primary); margin:0 0 .15rem;
  }
  .portada__card-city{ font-family:var(--font-body); font-size:.74rem; color:var(--color-text-secondary); margin:0; }
  .portada__tagline{
    font-family:var(--font-body); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
    color:var(--color-text-tertiary); line-height:1.9; margin:2rem 0 0;
  }

  .countdown-piece{ text-align:center; margin:0 0 1.75rem; }
  .countdown-piece__label{
    font-family:var(--font-body); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--color-text-tertiary); margin:0 0 .5rem;
  }
  .countdown-editorial{ display:flex; justify-content:center; gap:clamp(.5rem,2.6vw,1.3rem); margin:0; }
  .countdown-unit{ display:flex; flex-direction:column; align-items:center; min-width:40px; }
  .countdown-unit__num{
    font-family:var(--font-display); font-size:clamp(1.5rem,4.6vw,2.1rem);
    color:var(--color-text-primary); line-height:1; font-variant-numeric:tabular-nums;
  }
  .countdown-unit__label{
    font-family:var(--font-body); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
    color:var(--color-text-tertiary); margin-top:.3rem;
  }
  .countdown-today{ font-family:var(--font-display); font-size:1.3rem; color:var(--color-text-primary); }
  .portada__cta{ margin-bottom:.5rem; }

  /* ================= FECHA + LUGAR (pantalla 03) =================
     Menos capas de papel falso: una sola "backing" implícita (la
     sombra de la tarjeta de ubicación sobre la de fecha) en vez de
     rectángulos extra. El paperclip queda como único detalle físico,
     y su sombra de contacto marca claramente qué objeto va encima. */
  .inserts-section{ position:relative; max-width:340px; margin:0 auto; padding:3rem 1.25rem 3.5rem; }
  .insert-piece{ position:relative; }
  .insert-piece--date{
    padding:2rem 1.4rem 1.7rem;
    text-align:center;
    margin:0 8% -2.6rem 0;
    max-width:272px;
    transform:rotate(-1.6deg);
  }
  .insert-piece__clip{
    position:absolute; left:50%; top:-1.2rem; z-index:6;
    transform:translateX(-50%) rotate(4deg);
    filter:drop-shadow(1px 4px 4px rgba(var(--shadow-ink),.32));
  }
  .insert-piece--date .insert-piece__label{
    font-family:var(--font-display); font-size:clamp(1.5rem,5vw,1.8rem);
    color:var(--color-text-primary); margin:0 0 1.5rem; line-height:1.25;
  }
  .insert-piece__row{
    display:flex; align-items:center; gap:1rem;
    padding:1rem 0; border-top:1px solid var(--color-background-secondary);
    text-align:left;
  }
  .insert-piece__row:first-of-type{ border-top:none; }
  .insert-piece__icon{
    width:34px; height:34px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    color:var(--color-text-primary);
  }
  .insert-piece__icon svg{ width:22px; height:22px; }
  .insert-piece__time{
    font-family:var(--font-display); font-size:1.15rem; color:var(--color-text-primary); margin:0;
  }
  .insert-piece__row-label{
    font-family:var(--font-body); font-size:.82rem; color:var(--color-text-secondary); margin:.1rem 0 0;
  }
  .insert-piece--location{
    position:relative; z-index:2;
    max-width:296px; margin:0 0 0 6%; padding:1.6rem 1.4rem;
    text-align:left;
    transform:rotate(1.1deg);
    box-shadow:var(--elevation-3);
  }
  .insert-piece__pin{ color:var(--color-accent); margin-bottom:.5rem; display:block; }
  .insert-piece__pin svg{ width:18px; height:18px; }
  .insert-piece__venue-name{ font-family:var(--font-display); font-size:1.2rem; color:var(--color-text-primary); margin:0 0 .2rem; }
  .insert-piece__venue-city{ font-family:var(--font-body); font-size:.78rem; color:var(--color-text-secondary); margin:0 0 .9rem; }
  .insert-piece__links{ display:flex; flex-direction:column; gap:.4rem; }
  .insert-piece__links a{
    font-family:var(--font-body); font-size:.8rem; color:var(--color-text-primary);
    text-decoration:none; display:inline-flex; align-items:center; gap:.35rem;
    min-height:32px;
  }
  .insert-piece__links a:hover{ color:var(--color-accent); }
  .inserts-section .ghost-stamp{ right:4%; bottom:-1rem; }

  /* ================= UNA CELEBRACIÓN CON PROPÓSITO (pantalla 04) ================= */
  .section-kicker{
    text-align:center; font-family:var(--font-body); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--color-text-tertiary); margin:0 0 .3rem;
  }
  .section-heading{
    text-align:center; font-family:var(--font-display); font-weight:400;
    font-size:clamp(1.9rem,7vw,2.4rem); color:var(--color-text-primary); margin:0 0 2rem;
  }
  .proposito{ max-width:340px; margin:0 auto; padding:3.5rem 1.25rem 1rem; }
  .proposito__composition{ position:relative; }
  .proposito__paper-behind{
    position:absolute; z-index:0;
    top:8%; left:-5%; right:-9%; bottom:-4%;
    background:var(--surface-paper-warm);
    border:1px solid var(--paper-edge);
    box-shadow:var(--elevation-1);
    transform:rotate(-2.6deg);
  }
  /* segunda hoja real asomando (paper-olive.png), no un gradiente CSS */
  .proposito__accent{
    position:absolute; z-index:0;
    top:-1.75rem; right:6%; width:42%; height:4.5rem;
    background-image:url(../stationery/paper-olive.png);
    background-size:cover; background-position:center;
    box-shadow:var(--elevation-1);
    transform:rotate(4deg);
  }
  .proposito__note{ position:relative; z-index:1; padding:2rem 1.4rem 2.1rem; transform:rotate(1.2deg); }
  .proposito__tape{ top:-13px; left:8%; transform:rotate(-9deg); }
  .proposito__lead{
    font-family:var(--font-display); font-weight:500; font-size:1.15rem; line-height:1.5;
    color:var(--color-text-primary); margin:0 0 1rem;
  }
  .proposito__body{
    font-family:var(--font-display); font-size:1.02rem; line-height:1.65;
    color:var(--color-text-secondary); margin:0 0 1rem;
  }
  .proposito__note .proposito__script{
    font-size:1.3rem; line-height:1.25; text-align:left;
    margin:1.5rem 0 0;
  }
  /* reposa junto a la carta, fuera de la zona de texto — nunca sobre ella */
  .proposito__botanical{
    position:absolute; z-index:2; right:-1.6rem; bottom:-2.4rem;
    width:86px; height:auto;
    transform:rotate(8deg);
    filter:drop-shadow(2px 5px 7px rgba(var(--shadow-ink),.16));
    pointer-events:none;
  }
  .proposito__cta{ text-align:center; margin:2.25rem 0 0; }

  /* ================= CELEBRAR COMPARTIENDO (pantalla 05) =================
     Foto impresa (.cause-item__photo) + nota de papel — dos objetos,
     dos elevaciones, overlap más profundo para que se lean como una
     sola composición pegada, no dos rectángulos flotando cerca. */
  .compartir{ max-width:380px; margin:0 auto; padding:2.5rem 1.25rem 1rem; }
  .compartir__intro{
    font-family:var(--font-display); font-size:1rem; line-height:1.6; text-align:center;
    color:var(--color-text-secondary); margin:0 0 2.5rem;
  }
  .compartir__intro--first{ margin-bottom:1.1rem; }
  .cause-stack{ position:relative; }
  .cause-item{ position:relative; display:flex; align-items:center; margin:0 0 2.25rem; }
  .cause-item:last-child{ margin-bottom:.5rem; }
  .cause-item--reverse{ flex-direction:row-reverse; }
  .cause-item__photo{ position:relative; z-index:2; width:44%; flex-shrink:0; }
  .cause-item__photo img:first-child{ aspect-ratio:1/1.08; }
  .cause-item__note{
    position:relative; z-index:1;
    flex:1; min-width:0;
    margin-left:-10%;
    padding:1.5rem 1.1rem 1.3rem 3.4rem;
    text-align:left;
  }
  .cause-item--reverse .cause-item__note{ margin-left:0; margin-right:-10%; padding:1.5rem 3.4rem 1.3rem 1.1rem; }
  .cause-item:nth-child(1){ transform:rotate(-1deg); }
  .cause-item:nth-child(1) .cause-item__photo{ transform:rotate(-2.2deg); }
  .cause-item:nth-child(1) .cause-item__note{ transform:rotate(1.4deg); }
  .cause-item:nth-child(2){ transform:rotate(.6deg); }
  .cause-item:nth-child(2) .cause-item__photo{ transform:rotate(2.6deg); }
  .cause-item:nth-child(2) .cause-item__note{ transform:rotate(-1.2deg); }
  .cause-item:nth-child(3){ transform:rotate(-.4deg); }
  .cause-item:nth-child(3) .cause-item__photo{ transform:rotate(-1.6deg); }
  .cause-item:nth-child(3) .cause-item__note{ transform:rotate(1.8deg); }
  .cause-item__title{ font-family:var(--font-display); font-size:1.2rem; color:var(--color-text-primary); margin:0 0 .3rem; line-height:1.15; }
  .cause-item__desc{ font-family:var(--font-body); font-size:.82rem; line-height:1.45; color:var(--color-text-secondary); margin:0 0 .55rem; }
  .cause-item__link{ font-family:var(--font-body); font-size:.78rem; color:var(--color-text-primary); text-decoration:none; display:inline-block; overflow-wrap:break-word; word-break:break-word; max-width:100%; }
  .cause-item__link:hover{ color:var(--color-accent); }
  .cause-item__tape{ z-index:4; top:.3rem; }
  .cause-item:nth-child(1) .cause-item__tape{ left:-11%; transform:rotate(-6deg); }
  .cause-item:nth-child(2) .cause-item__tape{ right:-11%; transform:rotate(6deg); }
  .cause-item:nth-child(3) .cause-item__tape{ left:-11%; transform:rotate(4deg); }
  /* reposa junto a la última causa, fuera de cualquier tarjeta */
  .compartir__botanical{
    position:absolute; z-index:0; left:-1.5rem; bottom:-1rem;
    width:78px; height:auto;
    transform:rotate(-10deg);
    filter:drop-shadow(2px 5px 7px rgba(var(--shadow-ink),.14));
    pointer-events:none;
  }

  /* ================= RSVP CTA — cierre de la invitación ================= */
  .rsvp-cta-section{ max-width:340px; margin:0 auto; padding:3rem 1.25rem 3.5rem; }
  /* el moño vive en el wrapper (hermano de la tarjeta), no adentro: el
     borde rasgado recorta cualquier hijo que sobresalga de su propio canto */
  .rsvp-cta-card-wrap{ position:relative; }
  /* segunda hoja asomando detrás, como si la tarjeta de respuesta viniera
     sujeta a otra pieza de papelería — no una tarjeta flotando sola */
  .rsvp-cta-card__backing{
    position:absolute; z-index:0; inset:10px -8px -12px 6px;
    background-image:url(../stationery/paper-olive.png);
    background-size:cover; background-position:center;
    transform:rotate(2.2deg);
    box-shadow:var(--elevation-1);
    border-radius:2px;
  }
  .rsvp-cta-card{ position:relative; z-index:1; text-align:center; padding:2.5rem 1.5rem 1.75rem; transform:rotate(-1deg); }
  .rsvp-cta-card .seal-mark{ margin:0 auto 1.1rem; }
  .rsvp-cta-card__ribbon{
    position:absolute; z-index:4; top:-1.4rem; right:-.9rem;
    width:64px; height:auto;
    transform:rotate(12deg);
    filter:drop-shadow(2px 5px 6px rgba(var(--shadow-ink),.2));
    pointer-events:none;
  }
  .rsvp-cta-card__title{ font-family:var(--font-display); font-size:1.6rem; color:var(--color-text-primary); margin:0 0 .6rem; }
  .rsvp-cta-card__body{ font-family:var(--font-body); font-size:.9rem; color:var(--color-text-secondary); margin:0 0 1.5rem; }

  /* ================= RSVP — reconstrucción visual =================
     La respuesta es una TARJETA FÍSICA sacada de la invitación, no un
     formulario web. Misma lógica de negocio (rsvp-logic.js) — solo
     cambia cómo se ve. */
  .rsvp-shell{
    max-width:460px;
    margin:0 auto;
    padding:.5rem var(--section-pad-x) 4rem;
  }
  .rsvp-shell__stage{ position:relative; }
  .rsvp-shell__backing{
    position:absolute; z-index:0;
    top:16px; left:-10px; right:-6px; bottom:10px;
    background-color:var(--surface-paper-warm);
    background-image:url(../stationery/paper-cream-torn.png);
    background-repeat:no-repeat;
    background-position:top center;
    background-size:100% auto;
    border:1px solid var(--paper-edge);
    box-shadow:var(--elevation-1);
    transform:rotate(-1.4deg);
  }
  #rsvpRoot{ position:relative; z-index:1; }
  .rsvp-card{ padding:2.25rem 1.6rem 2rem; margin-bottom:1.5rem; }
  .rsvp-card__tape{ top:-13px; right:14%; transform:rotate(6deg); }
  /* detalle mínimo en la esquina externa — nunca entre el huésped y los
     controles SÍ/NO, que quedan libres de cualquier decoración */
  .rsvp-card__petal{
    position:absolute; z-index:0; left:-14px; bottom:22%;
    width:46px; height:auto;
    opacity:.85;
    transform:rotate(-16deg);
    filter:drop-shadow(1px 3px 5px rgba(var(--shadow-ink),.14));
    pointer-events:none;
  }
  /* el sello va PRENDIDO al canto superior de la tarjeta — mitad afuera,
     mitad encima del papel — nunca flotando suelto dentro de la carta.
     Vive FUERA del elemento con clip-path (el borde rasgado recorta
     cualquier hijo que sobresalga), como hermano dentro de este wrapper. */
  .sealed-card{ position:relative; }
  .rsvp-card__seal{
    position:absolute; z-index:5; top:-26px; left:50%; transform:translateX(-50%);
    display:flex; justify-content:center;
  }
  .rsvp-card__seal .seal-mark{ transform:scale(.8); }
  .rsvp-prompt{
    font-family:var(--font-display); font-weight:400;
    font-size:clamp(1.75rem,7vw,2.1rem); line-height:1.2;
    color:var(--color-text-primary);
    margin:0 0 .6rem;
  }
  .rsvp-prompt--center{ text-align:center; }
  .rsvp-copy{
    font-family:var(--font-body); font-size:.9rem; line-height:1.5;
    color:var(--color-text-secondary); margin:0 0 1.2rem;
  }
  .rsvp-prompt__rule{ width:40px; height:1px; background:var(--color-border); margin:0 0 1.6rem; }
  .rsvp-prompt__rule--center{ margin-left:auto; margin-right:auto; }

  /* ---------- respuesta táctil grande: NO son radios. Fila impresa +
     interacción digital encima. Selected = relleno taupe cálido,
     borde interno fino, check, feedback de presión. Mínimo 56px de
     alto para huéspedes mayores. ---------- */
  .choice-list{ display:flex; flex-direction:column; gap:.85rem; margin-bottom:1.75rem; }
  .choice-pill{
    display:flex; align-items:center; gap:1rem;
    width:100%; text-align:left;
    font-family:var(--font-display); font-size:1.15rem;
    color:var(--color-text-secondary);
    background:var(--surface-paper);
    border:1.5px solid var(--color-border);
    border-radius:14px;
    padding:1.05rem 1.3rem;
    min-height:60px;
    cursor:pointer;
    transition:border-color .18s ease, color .18s ease, transform .1s ease, background .18s ease, box-shadow .18s ease;
    box-shadow:var(--elevation-1);
  }
  .choice-pill:hover{ border-color:var(--color-text-primary); }
  .choice-pill:active{ transform:scale(.985); }
  .choice-pill__mark{
    width:26px; height:26px; flex-shrink:0; border-radius:7px;
    border:1.5px solid var(--color-border);
    position:relative;
    background:var(--color-white);
    transition:border-color .18s ease, background .18s ease;
  }
  .choice-pill.selected{
    border-color:var(--color-accent);
    color:var(--color-text-primary);
    background:linear-gradient(165deg, rgba(166,119,79,.14), rgba(166,119,79,.07));
    box-shadow:inset 0 0 0 1px rgba(166,119,79,.28), var(--elevation-1);
  }
  .choice-pill.selected .choice-pill__mark{ background:var(--color-accent); border-color:var(--color-accent); }
  .choice-pill.selected .choice-pill__mark::after{
    content:''; position:absolute; left:8px; top:4px; width:7px; height:12px;
    border-right:2.5px solid #fff; border-bottom:2.5px solid #fff; transform:rotate(40deg);
  }

  .rsvp-divider{ height:1px; background:var(--color-background-secondary); margin:0 0 1.4rem; }
  /* pie impreso, no metadata de formulario */
  .rsvp-seats-info{ text-align:center; margin:0 0 1.6rem; }
  .rsvp-seats-info__label{
    font-family:var(--font-body); font-style:italic; font-size:.74rem; letter-spacing:.05em;
    color:var(--color-text-tertiary); margin:0 0 .15rem;
  }
  .rsvp-seats-info__inline{
    font-family:var(--font-display); font-size:1.05rem; color:var(--color-text-primary);
  }

  .rsvp-note-wrap{ position:relative; max-width:280px; margin:1.75rem auto 0; }
  .rsvp-note{ padding:1.4rem 1.5rem; text-align:center; box-shadow:var(--elevation-2); transform:rotate(-1.6deg); }
  .rsvp-note .script-line{ font-size:1.35rem; }
  .rsvp-note__tape{ top:-13px; left:50%; transform:translateX(-50%) rotate(-3deg); }

  /* ================= RSVP: personas (familia/+1) =================
     Mismo lenguaje visual que las choice-pill: casillas grandes
     (28px), relleno cálido al marcar, nunca el checkbox nativo. */
  .check-row{
    display:flex; align-items:flex-start; gap:.9rem;
    padding:1.05rem 0;
    border-bottom:1px solid var(--color-background-secondary);
  }
  .check-row input[type="checkbox"]{
    appearance:none; -webkit-appearance:none;
    width:28px; height:28px; margin:1px 0 0; flex-shrink:0;
    border:1.5px solid var(--color-border); border-radius:7px;
    background:var(--color-white);
    position:relative; cursor:pointer;
    transition:background .18s ease, border-color .18s ease;
  }
  .check-row input[type="checkbox"]:checked{ background:var(--color-accent); border-color:var(--color-accent); }
  .check-row input[type="checkbox"]:checked::after{
    content:''; position:absolute; left:8px; top:4px; width:7px; height:13px;
    border-right:2.5px solid #fff; border-bottom:2.5px solid #fff; transform:rotate(40deg);
  }
  .check-row input[type="checkbox"]:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; }
  .check-row__body{ flex:1; min-width:0; padding-top:.15rem; }
  .check-row__name{ font-family:var(--font-display); font-size:1.2rem; color:var(--color-text-primary); }
  .check-row__meta{
    font-family:var(--font-body); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase;
    color:var(--color-text-tertiary); margin-top:.15rem;
  }
  .check-row__sub{ margin-top:1rem; padding-top:1rem; border-top:1px dashed var(--color-border); }
  .check-row__sub-label{ font-family:var(--font-body); font-size:.85rem; color:var(--color-text-secondary); margin:0 0 .6rem; }

  .mini-choice{ display:flex; gap:.5rem; }
  .mini-choice button{
    font-family:var(--font-body); font-size:.82rem; letter-spacing:.02em;
    padding:.55rem 1.1rem; min-height:44px;
    border-radius:var(--radius-pill); border:1.5px solid var(--color-border);
    background:var(--color-white); color:var(--color-text-primary);
    cursor:pointer; transition:all .18s ease;
  }
  .mini-choice button.selected{ background:var(--color-accent); border-color:var(--color-accent); color:var(--color-white); }

  .additional-heading{
    font-family:var(--font-body); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
    color:var(--color-text-tertiary); margin:1.75rem 0 .3rem;
  }
  .seats-note{ font-family:var(--font-body); font-size:.85rem; color:var(--color-text-secondary); margin:0 0 1rem; }

  .field{margin-bottom:1.25rem;}
  .field label{
    display:block;
    font-family:var(--font-body); font-size:.78rem; letter-spacing:.03em;
    color:var(--color-text-tertiary); margin-bottom:.5rem;
  }
  .field input[type="text"], .field input[type="email"], .field select{
    width:100%;
    font-family:var(--font-display); font-size:1.05rem; color:var(--color-text-primary);
    background:var(--color-white);
    border:1px solid var(--color-border); border-radius:10px;
    padding:.85rem 1rem;
    transition:border-color .2s ease;
  }
  .field textarea{
    width:100%;
    font-family:var(--font-display); font-size:1.05rem; color:var(--color-text-primary);
    background:var(--color-white);
    border:1px solid var(--color-border); border-radius:14px;
    padding:1rem 1.1rem;
    resize:vertical; min-height:100px;
  }
  .field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible{
    outline:none; border-color:var(--color-text-primary);
    box-shadow:0 0 0 3px rgba(166,119,79,.22);
  }
  .field input::placeholder, .field textarea::placeholder{ color:var(--color-text-tertiary); opacity:.7; font-family:var(--font-body); font-size:.95rem; }
  .required-mark{color:var(--color-accent);}
  .party-name-field{ margin:.75rem 0 0; }

  .field-reveal{ display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .3s ease, opacity .25s ease; }
  .field-reveal.is-open{ grid-template-rows:1fr; opacity:1; }
  .field-reveal > *{ overflow:hidden; min-height:0; }
  .field-reveal .field{ margin-bottom:0; }

  .rsvp-nav-buttons{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:2rem; }
  .rsvp-nav-buttons .btn{flex:1;}

  /* ---------- ficha de invitado (intro RSVP): tarjeta impresa, no
     un rectángulo con "ESTA INVITACIÓN ES PARA" genérico. ---------- */
  .invite-card{ padding:2.25rem 1.6rem; text-align:center; margin-bottom:1.25rem; }
  .invite-card .invite-hello{
    font-family:var(--font-body); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--color-text-tertiary); margin:0 0 .6rem;
  }
  .invite-card .invite-name{ font-family:var(--font-display); font-size:clamp(1.6rem,5vw,1.9rem); color:var(--color-text-primary); margin:0 0 .6rem; }
  .invite-card .invite-seats{ font-family:var(--font-body); font-size:.9rem; color:var(--color-text-secondary); margin:0; }

  /* ---------- nota adjunta pequeña ("ya recibimos tu respuesta…"):
     antes era un alert bordeado gigante. Ahora es una notita física
     angosta, rotada, con su propia cinta — no compite con la
     tarjeta principal. ---------- */
  .rsvp-attached-note{
    position:relative;
    max-width:280px; margin:0 auto 1.5rem;
    background:var(--surface-paper-warm);
    border:1px solid var(--paper-edge);
    box-shadow:var(--elevation-1);
    padding:.9rem 1.1rem;
    text-align:center;
    transform:rotate(-1.1deg);
  }
  .rsvp-attached-note p{
    font-family:var(--font-body); font-style:italic; font-size:.82rem; line-height:1.4;
    color:var(--color-text-secondary); margin:0;
  }
  .rsvp-attached-note__tape{ top:-11px; left:50%; transform:translateX(-50%) rotate(2deg); }

  /* resumen ASISTEN / NO ASISTEN: segunda tarjeta, claramente debajo. */
  .review-list{
    position:relative;
    background:var(--surface-paper); border:1px solid var(--paper-edge);
    box-shadow:var(--elevation-1); padding:1.6rem 1.5rem 1.4rem; margin:0 0 1.5rem;
    transform:rotate(-.8deg);
  }
  .review-heading{
    font-family:var(--font-body); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
    color:var(--color-text-tertiary); margin:0 0 .5rem;
  }
  .review-item{ font-family:var(--font-display); font-size:1.05rem; margin:0 0 .4rem; }
  .review-item--yes{color:var(--color-text-primary);}
  .review-item--no{color:var(--color-text-tertiary);}
  .review-item--sub{padding-left:1.5rem; font-size:.95rem;}
  /* nota discreta bajo cada asistente — informativa, nunca compite con el nombre */
  .review-item__oct{ font-family:var(--font-body); font-size:.78rem; color:var(--color-text-tertiary); margin:-.25rem 0 .55rem; }
  .review-total{
    font-family:var(--font-body); font-size:.8rem; color:var(--color-text-tertiary);
    margin:1.1rem 0 0; padding-top:1rem; border-top:1px solid var(--color-background-secondary);
  }

  /* ================= RSVP: confirmación final (pantalla 07) =================
     UNA carta domina, UNA sola hoja detrás, lacre CSS limpio, botánico
     real asomando detrás de la carta (físicamente anclado, no suelto),
     tarjeta de asistentes claramente separada debajo. */
  .rsvp-final{ text-align:center; padding-top:2.5rem; }
  .rsvp-final__seal{ display:flex; justify-content:center; margin:0 0 -26px; position:relative; z-index:2; }
  .rsvp-final__card-wrap{ position:relative; margin-bottom:0; }
  /* pantalla de cierre: la más calmada de todo el sitio — una sola hoja
     beige lisa detrás, sin textura de asset ni botánico. Menos aquí es
     más: la jerarquía la dan el papel, el sello y la sombra, no más piezas. */
  .rsvp-final__paper-behind{
    position:absolute; z-index:1;
    top:14px; left:-9%; right:-9%; bottom:-8px;
    background:var(--surface-paper-warm);
    border:1px solid var(--paper-edge);
    box-shadow:var(--elevation-1);
    transform:rotate(1.6deg);
  }
  .rsvp-final__card{ position:relative; z-index:2; padding:3rem 1.75rem 2.25rem; }
  .rsvp-final__title{ font-family:var(--font-display); font-weight:400; font-size:2rem; color:var(--color-text-primary); margin:0 0 .75rem; }
  .rsvp-final__lead{ font-family:var(--font-body); font-size:.95rem; color:var(--color-text-secondary); margin:0 0 1.4rem; }
  .rsvp-final__rule{ width:32px; height:1px; background:var(--color-border); margin:0 auto 1.4rem; }
  .rsvp-final__message{ font-family:var(--font-display); font-size:1.1rem; line-height:1.6; color:var(--color-text-secondary); margin:0 0 1.5rem; }
  .rsvp-final__signature{ font-family:var(--font-script); font-size:1.8rem; color:var(--color-text-primary); margin:0; }
  .rsvp-final__bridge-tape{ top:auto; bottom:-13px; right:18%; z-index:4; transform:rotate(-5deg); }
  .rsvp-final .review-list{ margin-top:0; }

  /* ================= mensajes / errores ================= */
  .form-error{ font-family:var(--font-body); font-size:.85rem; color:var(--color-accent); text-align:center; margin:1rem 0 0; }
  .form-error[hidden]{display:none;}
  .rsvp-lead{ font-family:var(--font-display); font-size:1.1rem; line-height:1.6; color:var(--color-text-secondary); text-align:center; margin:0 0 1.5rem; }

  /* ---------- badge de modo desarrollo: antes un banner grande
     dominaba cada screenshot. Ahora una píldora chica, discreta. ---------- */
  .dev-banner{
    display:inline-flex; align-items:center; gap:.4rem;
    max-width:max-content; margin:0 auto 1.1rem;
    font-family:var(--font-body); font-size:.68rem; letter-spacing:.02em;
    color:var(--color-accent); border:1px solid rgba(166,119,79,.35); border-radius:999px;
    padding:.3rem .7rem .3rem .6rem;
    background:rgba(166,119,79,.06);
  }
  .dev-banner::before{ content:'●'; font-size:.5rem; }
  .dev-banner[hidden]{display:none;}

  footer{
    text-align:center; padding:2.5rem 1rem 3.5rem; font-family:var(--font-body);
    font-size:.8rem; letter-spacing:.04em; color:var(--color-text-tertiary);
  }

  .view{display:none;}
  .view.active{display:block; animation:view-in .38s ease both;}
  @keyframes view-in{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
  .visually-hidden{ position:absolute; width:1px;height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

  /* ================= MOBILE: objetivos táctiles, sin desbordes ================= */
  @media (max-width:380px){
    .rsvp-prompt{ font-size:1.6rem; }
    .cause-item__desc{ display:none; }
  }

  /* ================= DESKTOP =================
     Misma invitación sobre una superficie más grande. Más negative
     space entre bloques, no componentes gigantes; se corrigen los
     huecos verticales accidentales en Causas. */
  @media (min-width:860px){
    .envelope{ width:320px; }
    .envelope-gate__name{ font-size:2.8rem; }

    .portada{ padding-top:1.5rem; }
    .portada__composition{
      max-width:820px;
      display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:3.5rem;
      text-align:left; padding-top:0;
    }
    .portada__photo{ width:100%; margin:0; justify-self:end; max-width:360px; grid-column:1; grid-row:1; }
    .portada__caption{ grid-column:1; grid-row:2; justify-self:end; max-width:360px; margin-top:1rem; }
    .portada__card{ grid-column:2; grid-row:1 / 3; align-self:center; margin:0; max-width:360px; text-align:left; padding:2.5rem; }
    .portada__card-eyebrow, .portada__card-meta{ text-align:left; }

    .inserts-section{ max-width:640px; }
    .insert-piece--date, .insert-piece--location{ max-width:460px; }

    .compartir{ max-width:680px; }
    .cause-item__desc{ display:block; }
    .cause-item{ margin-bottom:1.1rem; }
    /* el overlap por-porcentaje crece demasiado en px a este ancho y
       tapaba el título — se fija en píxeles a partir de aquí */
    .cause-item__note{ margin-left:-48px; padding-left:3.4rem; }
    .cause-item--reverse .cause-item__note{ margin-left:0; margin-right:-48px; padding-right:3.4rem; }

    .rsvp-shell{ max-width:520px; }
    .rsvp-card{ padding:3rem 2.5rem; }

    .nav-panel__sheet{ max-width:420px; }
  }