/* Colección Atelier: núcleo compartido.
   Solo andamiaje y acabados reutilizables. La dirección de arte vive en la hoja de cada diseño.
   Variables que cada diseño define en su raíz:
     --at-papel --at-tinta --at-tenue --at-acento --at-linea --at-fd (display) --at-ft (texto)
   Variables que escribe el script (invitacion-app.js): --tx --ty (giro, -1 a 1) y --sp (avance, 0 a 1). */

.inv[data-theme^="at-"]{
  --tx:0; --ty:0; --sp:0;
  --ease-papel:cubic-bezier(.2,.7,.1,1);
  background:var(--at-fondo,var(--at-papel)); color:var(--at-tinta);
  font-family:var(--at-ft),Georgia,serif; font-size:17px; line-height:1.6;
  font-variant-numeric:oldstyle-nums; font-kerning:normal; font-feature-settings:"liga" 1,"kern" 1;
}
.inv[data-theme^="at-"] .inv-main{overflow:hidden}
.inv[data-theme^="at-"] ::selection{background:var(--at-acento);color:var(--at-papel)}
.inv[data-theme^="at-"] :focus-visible{outline:1.5px solid currentColor;outline-offset:4px;border-radius:2px}
.inv[data-theme^="at-"] .inv-brand{background:transparent;color:var(--at-tenue)}

/* ---------- Apertura ---------- */
.inv .op[data-op="atelier"]{position:fixed;inset:0;z-index:60;overflow:hidden;display:grid;place-items:center;
  transition:opacity .9s var(--ease-papel),visibility 0s linear .9s}
.inv.is-open .op[data-op="atelier"]{opacity:0;visibility:hidden;pointer-events:none}
.inv .op[data-op="atelier"].is-skip{transition-duration:.4s,0s;transition-delay:0s,.4s}
.at-skip{position:absolute;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:5;
  min-height:44px;padding:0 18px;border:0;background:transparent;color:inherit;opacity:.62;
  font:500 11px/1 var(--at-ft),serif;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;transition:opacity .25s}
.at-skip:hover{opacity:1}
.op .at-para{margin:0;font:400 12px/1.4 var(--at-ft),serif;letter-spacing:.22em;text-transform:uppercase;opacity:.8}
.op .at-para strong{font-weight:500;letter-spacing:.14em}

/* ---------- Acabados reutilizables ---------- */
/* Papel de algodón: ruido fino multiplicado sobre el color de papel. */
.at-grano{position:relative;isolation:isolate}
.at-grano::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:multiply;opacity:var(--grano,1);
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .36  0 0 0 0 .3  0 0 0 0 .22  0 0 0 .085 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* Foil: metal que se mueve con la luz (--tx). Definir --f1 (sombra), --f2 (medio), --f3 (brillo). */
.at-foil{background:linear-gradient(105deg,var(--f1) 0%,var(--f2) 22%,var(--f3) calc(48% + var(--tx) * 30%),var(--f2) calc(58% + var(--tx) * 30%),var(--f1) 86%,var(--f2) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.at-foil-bg{background:linear-gradient(105deg,var(--f1) 0%,var(--f2) 22%,var(--f3) calc(48% + var(--tx) * 30%),var(--f2) calc(58% + var(--tx) * 30%),var(--f1) 86%,var(--f2) 100%)}

/* Versalitas reales y numerales */
.at-vs{font-variant-caps:all-small-caps;letter-spacing:.12em}
.at-num{font-variant-numeric:lining-nums tabular-nums}

/* Revelado al desplazarse: más lento y sin rebote, como papel. */
.js .inv[data-theme^="at-"] .rv{transform:translateY(18px);transition:opacity 1.1s var(--ease-papel),transform 1.1s var(--ease-papel);transition-delay:var(--d,0ms)}

/* ---------- Confirmación: base neutra que cada diseño viste ---------- */
.inv[data-theme^="at-"] .rsvp{display:grid;gap:20px;text-align:left;max-width:440px;margin:0 auto;padding:0;border-radius:0;background:transparent;box-shadow:none}
.inv[data-theme^="at-"] .seg{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;border-radius:0;background:transparent;box-shadow:inset 0 0 0 1px var(--at-linea)}
.inv[data-theme^="at-"] .seg label{position:relative;display:block;cursor:pointer}
.inv[data-theme^="at-"] .seg input{position:absolute;opacity:0;pointer-events:none}
.inv[data-theme^="at-"] .seg span{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 10px;border-radius:0;font-size:16px;font-weight:inherit;color:inherit;transition:background .3s,color .3s}
.inv[data-theme^="at-"] .seg input:checked + span{background:var(--at-tinta);color:var(--at-papel)}
.inv[data-theme^="at-"] .seg input:focus-visible + span{outline:1.5px solid var(--at-acento);outline-offset:-4px}
.inv[data-theme^="at-"] .fld{display:grid;gap:6px}
.inv[data-theme^="at-"] .fld > span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--at-tenue)}
.inv[data-theme^="at-"] .fld input,.inv[data-theme^="at-"] .fld select,.inv[data-theme^="at-"] .fld textarea{
  width:100%;min-height:46px;padding:10px 2px;border:0;border-bottom:1px solid var(--at-linea);border-radius:0;background:transparent;box-shadow:none;color:inherit;font:inherit;font-size:17px;outline:0;transition:border-color .3s}
.inv[data-theme^="at-"] .fld select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 12px) 55%,calc(100% - 7px) 55%;background-size:5px 5px;background-repeat:no-repeat;-webkit-appearance:none;appearance:none}
.inv[data-theme^="at-"] .fld textarea{resize:vertical;min-height:84px}
.inv[data-theme^="at-"] .fld input:focus,.inv[data-theme^="at-"] .fld select:focus,.inv[data-theme^="at-"] .fld textarea:focus{border-bottom-color:var(--at-tinta);box-shadow:0 1px 0 var(--at-tinta)}
.inv[data-theme^="at-"] .fld input::placeholder,.inv[data-theme^="at-"] .fld textarea::placeholder{color:var(--at-tenue);opacity:.7;font-style:italic}
.inv[data-theme^="at-"] .fld.bad input{border-bottom-color:#A3362A;box-shadow:0 1px 0 #A3362A}
.inv[data-theme^="at-"] .fld-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.inv[data-theme^="at-"] .fld-row:has(> :only-child){grid-template-columns:1fr}
.inv[data-theme^="at-"] .rsvp.is-no [data-if-yes]{display:none}
.inv[data-theme^="at-"] .rsvp .btn .arr{display:none}
.inv[data-theme^="at-"] .rsvp .btn{justify-self:center;width:auto;min-height:54px;margin-top:10px;padding:0 34px;border-radius:0;white-space:nowrap;background:var(--at-tinta);color:var(--at-papel);
  font:500 12px/1 var(--at-ft),serif;letter-spacing:.24em;text-transform:uppercase}
.inv[data-theme^="at-"] .form-msg{margin:0;text-align:center;font-size:14px;color:#A3362A;min-height:1em}
.inv[data-theme^="at-"] .rsvp-done{text-align:center}
.inv[data-theme^="at-"] .rsvp-done .stamp{display:none}
.inv[data-theme^="at-"] .done-t{font:400 clamp(28px,7vw,40px)/1.1 var(--at-fd),serif;margin:0 0 10px}
.inv[data-theme^="at-"] .btn-line{min-height:44px;margin-top:18px;padding:0 18px;border:0;background:transparent;box-shadow:inset 0 0 0 1px var(--at-linea);color:inherit;font-size:13px;letter-spacing:.08em}
.inv[data-theme^="at-"] .pass{max-width:none;margin:0 auto 26px;padding:0;border-radius:0;background:transparent;box-shadow:none;text-align:center}
.inv[data-theme^="at-"] .pass-l{margin:0;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--at-tenue)}
.inv[data-theme^="at-"] .pass-n{margin:6px 0 4px;font:400 clamp(26px,6.6vw,36px)/1.1 var(--at-fd),serif}
.inv[data-theme^="at-"] .pass-c{margin:0;color:var(--at-tenue)}
.inv[data-theme^="at-"] .lead{margin:0 auto 28px;max-width:34ch;text-align:center;color:var(--at-tenue)}
.inv[data-theme^="at-"] .alt{margin-top:18px;text-align:center;font-size:14px;color:var(--at-tenue)}

/* Galería y CLABE */
.inv[data-theme^="at-"] .gal-i{display:block;padding:0;border:0;background:none;overflow:hidden}
.inv[data-theme^="at-"] .gal-i img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-papel)}
.inv[data-theme^="at-"] .gal-i:hover img{transform:scale(1.03)}
.at-clabe{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:12px 0 0;font-variant-numeric:lining-nums tabular-nums;letter-spacing:.08em}
.at-clabe .copy{min-height:36px;padding:0 14px;border:0;background:transparent;box-shadow:inset 0 0 0 1px var(--at-linea);color:inherit;font-size:11px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.at-sw{display:inline-flex;gap:8px;justify-content:center}
.at-sw i{display:block;width:22px;height:22px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.at-link{display:inline-block;padding:6px 0;border-bottom:1px solid currentColor;text-decoration:none;font-size:12px;letter-spacing:.2em;text-transform:uppercase}

@media (prefers-reduced-motion:reduce){
  .inv .op[data-op="atelier"]{transition-duration:.4s,0s;transition-delay:0s,.4s}
  .inv[data-theme^="at-"] *{animation-duration:.01ms!important;animation-iteration-count:1!important}
}