/* =========================================================
   Invitación Citlalli & Rogelio
   Paleta tierra · Cormorant Garamond + Jost
   ========================================================= */

:root{
  --bg:#efe7d9;
  --ink:#3b2f26;
  --ink-soft:#5c4c3e;
  --gold:#a56a3f;
  --gold-dark:#7d4f2e;
  --sand:#c99a6a;
  --cream:#f7f1e6;
  --dark:#3b2f26;
  --dark-text:#f2e8d8;
  --olive:#3b3305;
  --olive-soft:#5a5c2e;
  --serif:'Cormorant Garamond',serif;
  --sans:'Jost',system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-dark)}
::selection{background:var(--sand);color:#fff}
img{display:block;max-width:100%}
input,textarea,select,button{font-family:inherit}

/* ---------- Shared type ---------- */
.eyebrow{
  margin:0 0 8px;
  font-size:12px;
  letter-spacing:.44em;
  text-indent:.44em;
  font-weight:400;
}
.eyebrow--gold{color:var(--gold)}
.eyebrow--sand{color:var(--sand)}
.eyebrow--rose{color:#cf8084}

.section-title{
  margin:0 0 46px;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(30px,5vw,52px);
  line-height:1.1;
}
.section-title--left{margin:0 0 22px}

.prose{
  margin:0 0 18px;
  font-size:16px;
  line-height:1.85;
  color:var(--ink-soft);
  font-weight:300;
}
.prose--tight{margin:0 0 8px;line-height:1.8}
.prose--italic{
  margin:0;
  font-size:14px;
  line-height:1.8;
  color:#8a7355;
  font-style:italic;
  font-family:var(--serif);
  font-weight:400;
}

.btn-outline{
  display:inline-block;
  margin-top:20px;
  padding:14px 34px;
  border:1px solid var(--gold);
  color:var(--gold);
  font-size:12px;
  letter-spacing:.28em;
  text-indent:.28em;
  transition:background .25s,color .25s;
}
.btn-outline:hover{background:var(--gold);color:#fff}

/* ---------- Photo slots (graceful placeholder) ---------- */
.photo-slot{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(247,241,230,.55), transparent 55%),
    linear-gradient(150deg,#cdb692 0%,#b79a72 38%,#8a6a44 100%);
}
.photo-slot::after{
  content:attr(data-label);
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  text-align:center;
  font-size:11px;
  letter-spacing:.32em;
  text-indent:.32em;
  color:rgba(59,47,38,.55);
  text-transform:uppercase;
}
.photo-slot img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1; /* covers the placeholder label when the image loads */
}

/* ================= PORTADA ================= */
.cover{background:var(--bg);padding:0}
.cover__frame{max-width:640px;margin:0 auto}
.cover__frame img{position:relative;width:100%;height:auto} /* altura natural; relative para que el z-index tape el placeholder */
.cover__frame:not(:has(img)){aspect-ratio:3/4} /* placeholder box when portada image missing */

/* ================= INTRO ================= */
.intro{
  padding:clamp(40px,7vh,70px) 24px;
  text-align:center;
  max-width:640px;
  margin:0 auto;
}
.intro__title{
  margin:0;
  font-family:var(--serif);font-weight:600;
  font-size:clamp(28px,5vw,44px);line-height:1.25;
  letter-spacing:.05em;text-transform:uppercase;color:#a8862a;
}
.intro__verse{
  margin:22px auto 0;max-width:34ch;
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(16px,2.4vw,20px);line-height:1.6;color:#8a7355;
}
.intro__verse-ref{
  margin:12px 0 0;
  font-size:11px;letter-spacing:.3em;text-indent:.3em;color:#cf8084;
}

/* ================= CUENTA REGRESIVA ================= */
.countdown{
  position:relative;
  background:var(--olive);color:#f2e8d8;
  padding:clamp(66px,11vh,110px) 24px;text-align:center;
  margin-top:-1px;
}
.wave{position:absolute;left:0;width:100%;height:28px;pointer-events:none}
.wave--top{top:-27px}
.wave--bottom{bottom:-27px}
.countdown .section-title{margin-bottom:46px}
.countdown__grid{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(18px,6vw,72px);max-width:760px;margin:0 auto;
}
.countdown__unit{min-width:70px}
.countdown__num{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(46px,9vw,84px);line-height:1;
}
.countdown__label{
  font-size:11px;letter-spacing:.34em;text-indent:.34em;margin-top:8px;color:#c9b79a;
}

/* ================= NUESTRA HISTORIA ================= */
.story{
  position:relative;overflow:hidden;
  padding:clamp(70px,12vh,130px) clamp(24px,6vw,90px);
  max-width:1180px;margin:0 auto;
}
.story__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(36px,6vw,80px);align-items:center;
  max-width:900px;margin:0 auto;
}
.story__photo-wrap{position:relative;display:flex;justify-content:center;padding:30px 0}
.story__polaroid{
  width:min(320px,85%);transform:rotate(-3deg);
  filter:drop-shadow(0 22px 34px rgba(59,47,38,.28));
}
.story__text{text-align:left}
.story__title{
  margin:0 0 18px;
  font-family:var(--serif);font-weight:600;
  font-size:clamp(18px,2.2vw,22px);line-height:1.5;
  letter-spacing:.05em;text-transform:uppercase;color:#a8862a;
}
.story__body{
  margin:0 0 16px;font-family:var(--serif);
  font-size:15px;line-height:1.7;color:#7a6a45;
}
.story__body:last-child{margin-bottom:0}
/* Estrellas decorativas */
.story__star{position:absolute;pointer-events:none}
.story__star--tl{top:0;left:6%;width:44px;transform:rotate(-8deg)}
.story__star--bl{bottom:-4px;left:-8px;width:64px;transform:rotate(10deg)}
.story__star--tr{top:44px;right:38px;width:58px;transform:rotate(16deg)}
.story__star--tr2{top:120px;right:110px;width:34px;transform:rotate(-6deg)}
/* Playlist */
.story__playlist{margin-top:clamp(56px,9vh,88px);text-align:center}
.story__playlist-title{
  margin:0 0 28px;
  font-family:var(--serif);font-weight:600;
  font-size:clamp(16px,2vw,19px);line-height:1.55;
  letter-spacing:.06em;text-transform:uppercase;color:#4d5522;
}
.story__spotify-link{
  display:inline-block;width:min(300px,78%);transition:transform .25s;
}
.story__spotify-link:hover{transform:scale(1.03)}
.story__spotify{display:block;width:100%}
@media (max-width:640px){
  .story__star--tr,.story__star--tr2{display:none}
  .story__star--tl{left:2%}
}

/* ================= ITINERARIO ================= */
.schedule{
  background:var(--bg);
  padding:clamp(64px,11vh,120px) 20px;text-align:center;
}
.schedule__eyebrow{color:var(--olive-soft)}
.schedule__title{
  margin:0 0 clamp(40px,7vh,72px);
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(30px,5vw,52px);color:#4d5522;
}
/* Grid de momentos: 3 columnas en escritorio, vertical en celular */
.schedule__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(44px,6vh,74px) clamp(24px,3vw,40px);
  max-width:1000px;margin:0 auto;
}
.sched-item{display:flex;flex-direction:column;align-items:center;text-align:center}
.sched-item__badge{
  width:clamp(84px,10vw,104px);height:clamp(84px,10vw,104px);
  border-radius:50%;border:1px solid #c2b28c;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:clamp(20px,2.5vh,30px);
}
.sched-item__badge svg{width:46%;height:46%}
.sched-item__time{
  font-family:var(--serif);font-size:clamp(30px,3.4vw,44px);
  font-weight:400;color:#4d5522;line-height:1;letter-spacing:.01em;
}
.sched-item__name{
  margin-top:14px;font-size:13px;letter-spacing:.26em;text-indent:.26em;
  color:var(--olive);text-transform:uppercase;line-height:1.4;
}
.sched-item__sub{
  margin-top:12px;font-family:var(--serif);font-style:italic;
  font-size:15px;line-height:1.5;color:#8a7355;max-width:26ch;
}
.sched-item__loc{
  margin-top:16px;display:inline-block;
  padding:9px 20px;border:1px solid var(--gold);border-radius:999px;
  color:var(--gold);font-size:10.5px;letter-spacing:.2em;text-indent:.2em;
  text-transform:uppercase;transition:background .2s,color .2s;
}
.sched-item__loc:hover{background:var(--gold);color:var(--cream)}
@media (max-width:820px){
  .schedule__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,5vh,56px) 28px}
}
@media (max-width:560px){
  .schedule__grid{grid-template-columns:1fr;max-width:360px;gap:48px}
}

/* ================= UBICACIÓN ================= */
.venue{
  padding:clamp(70px,12vh,130px) clamp(24px,6vw,90px);
  max-width:1180px;margin:0 auto;
}
.venue__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(36px,6vw,72px);align-items:center;
}
.venue__map{
  aspect-ratio:4/3;border-radius:4px;overflow:hidden;
  box-shadow:0 24px 60px -30px rgba(59,47,38,.5);
  filter:sepia(.18) saturate(.9);
}
.venue__map iframe{width:100%;height:100%;border:0}

/* ================= VESTIMENTA ================= */
.dresscode{
  position:relative;
  background:var(--olive);color:var(--dark-text);
  padding:clamp(70px,12vh,130px) 24px;text-align:center;
}
.dresscode__title{
  margin:0 0 20px;
  font-family:var(--serif);font-weight:300;font-size:clamp(34px,6vw,64px);
}
.dresscode__text{
  margin:0 auto 44px;max-width:560px;
  font-size:15px;line-height:1.8;color:#d8c9b2;font-weight:300;
}
.dresscode__palette{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.swatch{
  width:52px;height:52px;border-radius:50%;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.6);
}
.dresscode__pinterest{
  display:inline-flex;align-items:center;gap:11px;margin-top:50px;
  padding:15px 34px;border:1px solid var(--sand);border-radius:999px;
  color:var(--dark-text);font-size:12px;letter-spacing:.24em;text-indent:.24em;
  transition:background .25s,color .25s;
}
.dresscode__pinterest:hover{background:var(--sand);color:var(--olive)}

/* ================= SUGERENCIAS DE REGALOS ================= */
.gifts{
  position:relative;overflow:hidden;
  padding:clamp(70px,12vh,130px) 24px;text-align:center;
}
.gifts__eyebrow{color:#d98b94;margin-bottom:18px}
.gifts__title{
  margin:0 0 26px;
  font-family:var(--serif);font-weight:600;
  font-size:clamp(26px,4.2vw,44px);line-height:1.25;
  letter-spacing:.04em;text-transform:uppercase;color:#4d5522;
}
.gifts__text{
  margin:0 auto 50px;max-width:600px;
  font-family:var(--serif);font-size:clamp(16px,2.2vw,19px);
  line-height:1.6;color:#6b5d40;
}
.gifts__grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,380px));gap:28px;
  justify-content:center;align-items:stretch;
  max-width:900px;margin:0 auto;
}
.gift-card{
  display:flex;flex-direction:column;justify-content:center;
  border:1px solid #c9c2a0;border-radius:10px;
  padding:38px 28px;background:#f9f4e7;
  box-shadow:0 18px 44px -30px rgba(59,47,38,.35);
}
.gift-card__name{
  font-family:var(--serif);font-weight:600;font-size:clamp(19px,2.4vw,23px);
  letter-spacing:.06em;text-transform:uppercase;color:#4d5522;margin-bottom:16px;
}
.gift-card__body{
  margin:0;font-family:var(--serif);font-size:14px;line-height:1.7;color:#6b5d40;
}
.gift-card__account{font-family:var(--serif);color:#6b5d40;line-height:1.6}
.gift-card__clabe{font-size:13px;letter-spacing:.06em;color:#4d5522}
.gift-card__holder{font-size:14px}
.gift-card__bank{font-size:13px}
.gift-card__divider{
  width:64%;margin:16px auto;border:0;border-top:1px solid #a99f78;
}
/* Estrellas decorativas */
.gifts__star{position:absolute;z-index:0;pointer-events:none}
.gifts__star--tr{top:36px;right:44px;width:92px;transform:rotate(14deg)}
.gifts__star--tr2{top:150px;right:130px;width:34px;transform:rotate(-10deg)}
.gifts__star--tl{top:110px;left:56px;width:30px;transform:rotate(18deg)}
.gifts__star--tl2{top:88px;left:100px;width:20px;transform:rotate(-12deg)}
.gifts__star--bl{bottom:18px;left:26px;width:120px;transform:rotate(-18deg)}
@media (max-width:640px){
  /* menos ruido en móvil: solo las estrellas de las esquinas */
  .gifts__star--tl,.gifts__star--tl2,.gifts__star--tr2{display:none}
  .gifts__star--tr{width:56px;top:14px;right:10px}
  .gifts__star--bl{width:84px;left:8px;bottom:12px}
}

/* ================= GALERÍA ================= */
.gallery{
  padding:clamp(60px,10vh,110px) clamp(16px,4vw,60px);
  max-width:1200px;margin:0 auto;text-align:center;
}
.gallery .section-title{margin-bottom:50px}
/* Mosaico por columnas: respeta la proporción natural de cada foto */
.gallery__grid{
  column-count:3;
  column-gap:12px;
}
.gallery__cell{
  break-inside:avoid;
  margin:0 0 12px;
  border-radius:3px;
  overflow:hidden;
}
.gallery__cell img{
  position:relative;z-index:1; /* sobre el placeholder de .photo-slot */
  width:100%;height:auto;      /* altura natural, sin recorte */
}
@media (max-width:900px){ .gallery__grid{column-count:2} }

/* ================= RSVP ================= */
.rsvp{
  background:#e6dcc9;
  padding:clamp(70px,12vh,130px) 24px;text-align:center;
}
.rsvp__inner{max-width:560px;margin:0 auto}
.rsvp .section-title{margin-bottom:16px}
.rsvp__deadline{margin:0 0 42px;font-size:14px;color:#7a6650;font-weight:300}
.rsvp__form{display:flex;flex-direction:column;gap:16px;text-align:left}
.rsvp__form input,
.rsvp__form select,
.rsvp__form textarea{
  padding:15px 18px;border:1px solid #c9b79a;background:#f6efe1;border-radius:4px;
  font-size:15px;color:var(--ink);outline:none;
}
.rsvp__form textarea{resize:vertical}
.rsvp__choice{display:flex;gap:12px}
.rsvp__toggle{
  flex:1;padding:15px;border:1px solid var(--gold);border-radius:4px;
  font-size:12px;letter-spacing:.2em;cursor:pointer;
  background:transparent;color:var(--gold);transition:background .2s,color .2s;
}
.rsvp__toggle.is-active{background:var(--gold);color:#fff}
.rsvp__submit{
  margin-top:6px;padding:17px;background:var(--olive);color:var(--dark-text);
  border:none;border-radius:4px;font-size:12px;letter-spacing:.3em;text-indent:.3em;
  cursor:pointer;transition:opacity .2s;
}
.rsvp__submit:hover{opacity:.88}
.rsvp__thanks{
  padding:56px 28px;background:#f6efe1;border:1px solid #d8c9ad;border-radius:6px;
}
.rsvp__thanks-title{font-family:var(--serif);font-size:34px;color:#4a3b2e;margin-bottom:12px}
.rsvp__thanks p{margin:0;color:#8a7355;font-size:15px}
#rsvp-redirect-note{
  margin-top:14px;font-family:var(--serif);font-style:italic;color:var(--gold);
}

/* ================= ILUSTRACIÓN DE LOS NOVIOS ================= */
.artwork{
  background:var(--bg);text-align:center;
  padding:clamp(64px,10vh,110px) 24px clamp(70px,11vh,120px);
}
.artwork img{
  display:block;width:min(400px,80%);margin:0 auto;
}
.artwork__verse{
  margin:34px auto 0;max-width:44ch;
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(16px,2.4vw,20px);line-height:1.6;color:#8a7355;
}
.artwork__verse-ref{
  margin:12px 0 0;
  font-size:11px;letter-spacing:.3em;text-indent:.3em;color:#cf8084;
}

/* ================= FOOTER ================= */
.footer{
  background:var(--olive);color:#d8c9b2;text-align:center;
  padding:clamp(56px,9vh,90px) 24px;
}
.footer__names{
  font-family:var(--serif);font-weight:300;font-size:clamp(34px,7vw,58px);
  color:var(--dark-text);line-height:1.1;
}
.footer__names span{font-style:italic;color:var(--sand)}
.footer__date{margin:20px 0 0;font-size:12px;letter-spacing:.4em;text-indent:.4em}
.footer__love{
  margin:28px 0 0;font-family:var(--serif);font-style:italic;font-size:18px;color:#9a8060;
}

/* ---------- Scroll reveal ---------- */
[data-reveal]{
  opacity:0;transform:translateY(28px);
  transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1);
}
[data-reveal].is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none;transition:none}
}

/* =========================================================
   SOBRE DE BIENVENIDA (overlay intro)
   Al tocar: el sello se rompe, la solapa se abre y el telón
   se desvanece directo hacia la invitación (sin tarjeta).
   Paleta tierra · adaptado del diseño "sobre_variante_relieve".
   ========================================================= */
:root{
  /* Telón olivo cálido */
  --sobre-0:#231d03;
  --sobre-1:#2a2504;
  --sobre-2:#3b3305;
  --sobre-3:#4a4310;
  --sobre-4:#565023;
  /* Papel del sobre */
  --papel:#ece6d8;
  --papel-claro:#f4efe4;
  --papel-sombra:#ddd4c1;
  /* Tinta / oro */
  --tinta:#3b2f26;
  --tinta-suave:#5c4c3e;
  --oro:#a56a3f;
  --oro-claro:#c99a6a;
  /* Cera del sello (terracota cálida de la paleta) */
  --cera-1:#c88a5c;
  --cera-2:#a56a3f;
  --cera-3:#7d4f2e;
  --cera-4:#5a3c23;
  --cera-grabado:#3b2f26;
  --t:1;
}
@media (prefers-reduced-motion:reduce){ :root{ --t:.35; } }

#sobre-intro{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:var(--olive);
  transition:opacity .9s ease, visibility .9s;
}
#sobre-intro.oculto{ opacity:0; visibility:hidden; }

.escenario{
  position:relative;
  width:min(100vw, calc(100dvh * .58));
  height:100dvh;
  overflow:hidden;
  perspective:1600px;
  box-shadow:0 0 60px rgba(0,0,0,.55);
  cursor:pointer;
}
.capa{ position:absolute; inset:0; }
.capa > svg{ width:100%; height:100%; display:block; }

.fondo{ z-index:1; }

.bolsillo{ z-index:3; }

.solapa{
  z-index:4;
  transform-origin:50% 0;
  filter:drop-shadow(0 8px 10px rgba(70,58,32,.20)) drop-shadow(0 1px 1px rgba(70,58,32,.18));
  transition:transform calc(1.2s * var(--t)) cubic-bezier(.6,0,.25,1), z-index 0s calc(.6s * var(--t));
}
.solapa .forro{ opacity:0; transition:opacity 0s calc(.6s * var(--t)); }
.abierto .solapa{ transform:rotateX(180deg); z-index:0; }
.abierto .solapa .forro{ opacity:1; }

.grano{
  z-index:5; pointer-events:none; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .4  0 0 0 0 .34  0 0 0 0 .2  0 0 0 .1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  transition:opacity .6s ease;
}
.abierto .grano{ opacity:0; }

.luz{ z-index:5; pointer-events:none; overflow:hidden; }
.luz::after{
  content:''; position:absolute; top:-20%; left:-60%; width:40%; height:140%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform:rotate(18deg);
  animation:barrido 7s ease-in-out infinite 2s;
}
@keyframes barrido{ 0%,70%{ left:-60%; } 100%{ left:130%; } }
.rompiendo .luz{ display:none; }

/* ---- Sello de cera borgoña (PNG con monograma C&R) ----
   Imagen con fondo transparente y su propia forma de cera. Cada mitad
   muestra la misma imagen recortada en vertical, para que al tocar se
   parta por el centro y las dos mitades caigan. */
.sello{
  position:absolute; z-index:7; left:50%;
  width:var(--sello); height:var(--sello);
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 8px 10px rgba(55,10,15,.38)) drop-shadow(0 2px 3px rgba(55,10,15,.30));
  pointer-events:none;
}
.sello .mitad{ position:absolute; inset:0; }
.sello .mitad img{
  width:100%; height:100%; display:block;
  object-fit:contain; object-position:center;
}
.sello .izq{ clip-path:polygon(0 0, 52% 0, 46% 21%, 55% 40%, 47% 58%, 54% 77%, 49% 100%, 0 100%); }
.sello .der{ clip-path:polygon(52% 0, 100% 0, 100% 100%, 49% 100%, 54% 77%, 47% 58%, 55% 40%, 46% 21%); }
.rompiendo .sello .izq{ animation:caerIzq calc(.9s * var(--t)) cubic-bezier(.4,0,.6,1) forwards; }
.rompiendo .sello .der{ animation:caerDer calc(.9s * var(--t)) cubic-bezier(.4,0,.6,1) forwards; }
@keyframes caerIzq{
  0%{ transform:none; }
  18%{ transform:translate(-3px,0) rotate(-3deg); opacity:1; }
  100%{ transform:translate(-34px,110px) rotate(-30deg); opacity:0; }
}
@keyframes caerDer{
  0%{ transform:none; }
  18%{ transform:translate(3px,0) rotate(3deg); opacity:1; }
  100%{ transform:translate(34px,120px) rotate(26deg); opacity:0; }
}

.chispa{
  position:absolute; z-index:8;
  width:var(--s); height:var(--s); border-radius:50%;
  background:var(--c); box-shadow:0 0 8px var(--c);
  pointer-events:none;
  animation:chispa calc(var(--d) * var(--t)) cubic-bezier(.15,.7,.3,1) forwards;
}
@keyframes chispa{
  from{ transform:translate(-50%,-50%) scale(1); opacity:1; }
  to{ transform:translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.2); opacity:0; }
}

/* ---- "Toca aquí" ---- */
.toque{
  position:absolute; z-index:7; left:50%;
  width:calc(var(--sello) * 1.7);
  transform:translateX(-50%);
  color:var(--tinta);
  pointer-events:none;
  transition:opacity .4s ease;
}
.toque svg{ width:100%; height:auto; display:block; overflow:visible; }
.toque text{
  font-family:var(--serif); font-weight:600;
  font-size:13px; letter-spacing:.24em; fill:currentColor;
}
.toque .mano{ animation:tap 1.8s ease-in-out infinite; transform-box:fill-box; transform-origin:50% 0; }
.toque .rayos{ animation:rayos 1.8s ease-in-out infinite; }
@keyframes tap{ 0%,100%{ transform:translate(0,0); } 40%{ transform:translate(-1px,-3px); } 55%{ transform:translate(0,0) scale(.94); } }
@keyframes rayos{ 0%,45%{ opacity:.2; } 58%{ opacity:1; } 100%{ opacity:.2; } }
.rompiendo .toque{ opacity:0; }