/* ==========================================================================
   INVITACIÓN DIGITAL — TEMA "MARFIL & ORO"
   Minimalista blanco, textura de papel, relieve letterpress, oro viejo.

   PALETA (teoría del color: monocromático cálido + acento metálico 60/30/10)
   60% marfil  · 30% greige/tinta · 10% oro (solo en lo que jala la vista)
   ========================================================================== */

:root{
  --papel:       #FAF7F1;   /* dominante */
  --papel-hondo: #F3EEE4;   /* secciones alternas */
  --papel-alto:  #FDFBF7;   /* relieve alto */
  --tinta:       #2E2A26;   /* texto principal   — 13.9:1 sobre marfil (AAA) */
  --tinta-suave: #6B6259;   /* texto secundario  —  5.6:1 sobre marfil (AA)  */
  --oro:         #A98449;   /* acento decorativo (solo tamaños grandes)      */
  --oro-hondo:   #8C6B36;   /* fondo de botón    —  4.9:1 con texto blanco   */
  --oro-claro:   #E3CFA4;
  --linea:       #DFD6C6;

  --f-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-script:  "Pinyon Script", "Cormorant Garamond", cursive;
  --f-sans:    "Jost", "Helvetica Neue", Arial, sans-serif;

  --ancho: 640px;
  --sombra-alta: 0 18px 40px -30px rgba(46,42,38,.55);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  /* El color base. La trama de lienzo la pone body::after encima. */
  background-color:var(--papel);
  background-image:radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.8), transparent 62%);
  color:var(--tinta);
  font-family:var(--f-display);
  font-size:1.0625rem;
  line-height:1.7;
  overflow-x:hidden;
}
body.cerrado{ overflow:hidden; height:100dvh; }

/* ── Grano fino + fibras de algodón sobre TODA la página ──────────────── */
body::after{
  content:"";
  position:fixed; inset:0; z-index:70;   /* encima de todo, hasta del sobre */
  pointer-events:none;
  opacity:.42;
  mix-blend-mode:multiply;
  background-image:
    /* trama de lienzo: foto real, hecha mosaico en espejo para que no se
       note la unión al repetirse. 36 KB. */
    url("img/lienzo.webp"),
    /* grano fino encima, para que la trama no se vea plana */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
  background-size:310px 310px, 220px 220px;
  background-repeat:repeat, repeat;
}

/* La biblioteca de dibujos no se ve, solo alimenta a los <use> */
.biblioteca{ position:absolute; width:0; height:0; overflow:hidden; }

img{ max-width:100%; display:block; }
h1,h2,h3{ margin:0; font-weight:400; }
p{ margin:0; }

/* ══════════════════════════════════════════════════════════════════════
   PIEZAS DE DISEÑO REUTILIZABLES
   ══════════════════════════════════════════════════════════════════════ */

/* Texto hundido en el papel (letterpress) */
.emboss{
  color:var(--tinta);
  text-shadow:
    0 1px 0 rgba(255,255,255,.95),
    0 -1px 1px rgba(46,42,38,.22);
}

/* Texto en hoja de oro, con brillo que recorre */
.foil{
  background:linear-gradient(100deg,
    #7A5C2A 0%, #A98449 17%, #D6BC82 32%, #A98449 47%,
    #8C6B36 62%, #C7A96C 80%, #7A5C2A 100%);
  background-size:260% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  animation:foil 11s ease-in-out infinite;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.85));
}
@keyframes foil{
  0%,100%{ background-position:0% 50%; }
  50%    { background-position:100% 50%; }
}

/* Tarjeta con relieve: alto por arriba, hundido por abajo */
.relieve{
  background:linear-gradient(178deg,var(--papel-alto) 0%,#F4EFE6 100%);
  border:1px solid var(--linea);
  border-radius:3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -18px 26px -22px rgba(46,42,38,.30),
    0 1px 0 rgba(255,255,255,.75),
    var(--sombra-alta);
}

/* Etiquetita en versalitas */
.etiqueta{
  font-family:var(--f-sans);
  font-size:.6875rem;
  font-weight:400;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--tinta-suave);
  margin-bottom:1.15rem;
}

.titulo{
  font-family:var(--f-display);
  font-size:clamp(1.75rem,7vw,2.4rem);
  font-style:italic;
  font-weight:300;
  line-height:1.25;
  margin-bottom:1.6rem;
}

/* Filete con rombo al centro */
.regla{
  width:min(230px,64%);
  height:1px;
  margin:1.6rem auto;
  background:linear-gradient(90deg,transparent,var(--oro-claro) 18%,var(--oro) 50%,var(--oro-claro) 82%,transparent);
  position:relative;
}
.regla::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:6px; height:6px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--oro);
  box-shadow:0 1px 0 rgba(255,255,255,.9);
}

/* ══════════════════════════════════════════════════════════════════════
   RELIEVE EN SECO (blind emboss)
   El truco de imprenta: la figura va del color del papel, con una luz
   arriba-izquierda y una sombra abajo-derecha. El ojo lo lee como
   levantado del papel, aunque no haya tinta.
   ══════════════════════════════════════════════════════════════════════ */
.relieve-seco{
  color:#F7F2E8;                        /* casi el papel, apenas un tono */
  filter:
    drop-shadow(-0.5px -1px 0   rgba(255,255,255,.98))
    drop-shadow( 1px    1.5px 1px rgba(103,86,62,.42))
    drop-shadow( 0      3px   5px rgba(103,86,62,.14));
}
/* Variante con un hilo de oro, para lo que sí queremos que brille */
.relieve-oro{
  color:#D9C08A;
  filter:
    drop-shadow(-0.5px -1px 0 rgba(255,255,255,.9))
    drop-shadow( 1px   1.5px 1px rgba(103,86,62,.38));
}

/* Ramas de esquina.
   El <span> se encarga de voltear la rama hacia adentro; el <svg> de
   adentro es el que se mece, así una cosa no le estorba a la otra. */
.esquina{
  position:absolute;
  width:74px; height:74px;
  display:block;
  pointer-events:none;
}
.esquina svg{
  display:block;
  width:100%; height:100%;
  color:#F7F2E8;
  filter:
    drop-shadow(-0.5px -1px 0   rgba(255,255,255,.98))
    drop-shadow( 1px    1.5px 1px rgba(103,86,62,.44))
    drop-shadow( 0      3px   5px rgba(103,86,62,.13));
  /* el tallo nace abajo-izquierda: ahí va el punto donde se dobla */
  transform-origin:6% 95%;
  animation:mecer 7.5s ease-in-out infinite;
}
/* Cada esquina con su ritmo, para que no se mezan todas igual */
.esquina--sd svg{ animation-duration:8.6s; animation-delay:-2.1s; }
.esquina--ii svg{ animation-duration:6.9s; animation-delay:-4.3s; }
.esquina--id svg{ animation-duration:9.2s; animation-delay:-1.2s; }

/* Viento: un balanceo chiquito, no un abanicazo */
@keyframes mecer{
  0%,100%{ transform:rotate(-3.2deg) translateY(0); }
  30%    { transform:rotate(2.6deg)  translateY(-1.5px); }
  55%    { transform:rotate(-1.2deg) translateY(.5px); }
  78%    { transform:rotate(1.8deg)  translateY(-.5px); }
}

/* La ramita crece de abajo-izquierda hacia arriba-derecha, así que
   cada esquina la voltea para que siempre abrace hacia adentro. */
.esquina--si{ top:8px;    left:8px;   transform:scaleY(-1); }
.esquina--sd{ top:8px;    right:8px;  transform:scale(-1,-1); }
.esquina--ii{ bottom:8px; left:8px;   }
.esquina--id{ bottom:8px; right:8px;  transform:scaleX(-1); }

/* Cresta: dos ramitas con un rombo de oro al centro */
.cresta{
  display:flex; align-items:center; justify-content:center;
  gap:.5rem;
  margin:0 auto 1.5rem;
  width:min(280px,80%);
}
.cresta--flip{ margin:1.5rem auto 0; transform:scaleY(-1); }
.cresta--chica{ width:min(210px,66%); }
/* Dentro del marco de la portada la cresta se aparta de las esquinas */
.marco .cresta{ width:min(224px,58%); margin-bottom:2.1rem; }
.marco .cresta--flip{ margin-top:2.1rem; margin-bottom:0; }
.cresta__rama{
  width:50%; height:auto;
  color:#F5EFE3;
  filter:
    drop-shadow(-0.5px -1px 0 rgba(255,255,255,.98))
    drop-shadow( 1px   1.5px 1px rgba(103,86,62,.40));
  transform:scaleX(-1);          /* la rama apunta hacia el centro */
}
.cresta__rama--flip{ transform:none; }
.cresta__rombo{
  flex:none;
  width:9px; height:9px;
  transform:rotate(45deg);
  background:linear-gradient(135deg,#E5CE9C,#A98449 55%,#7A5C2A);
  box-shadow:0 1px 0 rgba(255,255,255,.9), 0 2px 3px -1px rgba(103,86,62,.55);
}

/* Sello de lacre con monograma */
.sello{
  width:74px; height:74px;
  margin:1.5rem auto;
  border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(circle at 34% 28%, #D9BE86 0%, #A98449 46%, #7C5C2C 100%);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.45),
    inset 0 -3px 6px rgba(0,0,0,.35),
    0 6px 14px -8px rgba(46,42,38,.7);
}
.sello span{
  font-family:var(--f-display);
  font-size:2rem; line-height:1;
  color:#F6EBD4;
  text-shadow:0 -1px 1px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.35);
}
.sello--pie{ width:56px; height:56px; }
.sello--pie span{ font-size:1.5rem; }

/* Botones */
.btn{
  display:inline-block;
  font-family:var(--f-sans);
  font-size:.75rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--tinta);
  background:linear-gradient(178deg,var(--papel-alto),#F1EBE0);
  border:1px solid var(--oro-claro);
  border-radius:2px;
  padding:.85rem 1.6rem;
  margin-top:1.1rem;
  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 4px 12px -8px rgba(46,42,38,.6);
}
.btn:hover{ transform:translateY(-2px); border-color:var(--oro); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 10px 18px -12px rgba(46,42,38,.75); }

.btn--oro{
  width:100%;
  color:#FFFDF8;
  background:linear-gradient(178deg,#A98449 0%,var(--oro-hondo) 100%);
  border-color:var(--oro-hondo);
  padding:1.05rem 1.4rem;
  text-shadow:0 1px 1px rgba(0,0,0,.28);
}
.btn--oro:hover{ background:linear-gradient(178deg,#B99055 0%,#96742F 100%); }

/* ══════════════════════════════════════════════════════════════════════
   SOBRE DE ENTRADA
   ══════════════════════════════════════════════════════════════════════ */
.sobre{
  position:fixed; inset:0; z-index:60;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:1.5rem;
  background-color:var(--papel);
  transition:opacity .9s ease, visibility .9s;
}
.sobre.abierto{ opacity:0; visibility:hidden; }

/* Textos de la tarjeta interior */
.sobre__label{
  font-family:var(--f-sans);
  font-size:.6rem; letter-spacing:.36em; text-transform:uppercase;
  color:var(--tinta-suave);
}
.sobre__evento{
  font-family:var(--f-script);
  font-size:2.3rem; line-height:1.35;
  margin-top:.2rem;
}

/* ── La escena 3D del sobre ───────────────────────────────────────────── */
.sobre__escena{
  position:relative;
  width:min(330px,86vw);
  aspect-ratio:1 / 1.28;
  perspective:1400px;
  animation:entra 1s cubic-bezier(.22,1,.36,1) both;
}
@keyframes entra{ from{ opacity:0; transform:translateY(24px) scale(.96); } to{ opacity:1; transform:none; } }

/* Tarjeta que vive DENTRO del sobre y sale al abrirlo */
.sobre__papel{
  position:absolute;
  left:6%; right:6%;
  bottom:5%;
  height:86%;
  z-index:2;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:1.5rem 1.1rem;
  background:linear-gradient(178deg,#FEFCF8,#F3EDE2);
  border:1px solid var(--linea);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 10px 26px -18px rgba(46,42,38,.7);
  transition:transform 1.15s cubic-bezier(.22,1,.36,1) .35s;
}
.sobre__papel::before{
  content:"";
  position:absolute; inset:8px;
  border:1px solid var(--oro-claro);
  opacity:.65; pointer-events:none;
}

/* Parte de atrás del sobre */
.sobre__cuerpo{
  position:absolute; inset:0;
  z-index:1;
  background:linear-gradient(170deg,#F6F0E4,#EBE3D4);
  border:1px solid var(--linea);
  box-shadow:0 30px 60px -34px rgba(46,42,38,.85);
}

/* Bolsillo del frente, con el nombre de quien recibe */
.sobre__frente{
  position:absolute; left:0; right:0; bottom:0;
  height:62%;
  z-index:3;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:1rem;
  background:linear-gradient(172deg,#FBF6EC,#F0E9DB);
  border:1px solid var(--linea);
  border-top:0;
  /* las dobleces laterales del sobre */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 34px 0 40px -38px rgba(103,86,62,.55),
    inset -34px 0 40px -38px rgba(103,86,62,.55),
    0 -2px 6px -2px rgba(103,86,62,.16);
}
.sobre__frente::before,
.sobre__frente::after{
  content:"";
  position:absolute; top:0; bottom:0; width:52%;
  border-top:1px solid rgba(103,86,62,.10);
  pointer-events:none;
}
.sobre__frente::before{ left:0;  transform-origin:top left;  transform:skewX(24deg) scaleY(.0); }
.sobre__frente::after { right:0; transform-origin:top right; transform:skewX(-24deg) scaleY(.0); }

.sobre__para{
  font-family:var(--f-sans);
  font-size:.58rem; letter-spacing:.4em; text-transform:uppercase;
  color:var(--tinta-suave);
}
.sobre__nombre{
  font-family:var(--f-display);
  font-style:italic;
  font-size:1.35rem;
  line-height:1.35;
  color:var(--tinta);
  min-height:1.9rem;
  margin-top:.3rem;
  text-shadow:0 1px 0 rgba(255,255,255,.85);
}

/* Solapa triangular que se abre */
.sobre__solapa{
  position:absolute; left:0; right:0; top:0;
  height:44%;
  z-index:4;
  transform-origin:top center;
  transform:rotateX(0deg);
  transform-style:preserve-3d;
  transition:transform 1.05s cubic-bezier(.62,.02,.34,1), z-index 0s linear .5s;
  background:linear-gradient(184deg,#F8F2E6,#EFE7D7);
  border:1px solid var(--linea);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  box-shadow:0 6px 10px -8px rgba(103,86,62,.55);
}

/* Lacre de cera con el monograma prensado */
.lacre{
  position:absolute;
  left:50%; top:41%;
  width:78px; height:78px;
  margin-left:-39px;
  z-index:5;
  display:grid; place-items:center;
  cursor:pointer;
  transition:transform .6s cubic-bezier(.34,1.56,.64,1), opacity .45s ease;
  filter:drop-shadow(0 6px 10px rgba(70,52,26,.45));
}
.lacre:hover{ transform:scale(1.06) rotate(-3deg); }
.lacre__disco{ width:100%; height:100%; }
.lacre__borde{
  fill:#A5813F;
  stroke:#7A5C2A;
  stroke-width:1;
}
.lacre::after{                       /* brillo de cera derretida */
  content:"";
  position:absolute; inset:9px;
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,240,205,.55), transparent 46%),
    radial-gradient(circle at 66% 78%, rgba(60,40,10,.42), transparent 52%);
  pointer-events:none;
}
.lacre__letra{
  position:absolute;
  font-family:var(--f-display);
  font-size:2.05rem; line-height:1;
  color:#8A6A31;
  /* el monograma se ve PRENSADO en la cera: sombra arriba, luz abajo */
  text-shadow:0 -1px 1px rgba(52,34,8,.75), 0 1.5px 0 rgba(255,232,186,.5);
}

/* ── Estados al abrir ─────────────────────────────────────────────────── */
.sobre.abriendo .sobre__solapa{ transform:rotateX(-172deg); z-index:0; }
.sobre.abriendo .lacre{ opacity:0; transform:scale(.7) translateY(-8px); transition-duration:.4s; }
.sobre.abriendo .sobre__papel{ transform:translateY(-42%); }

.sobre__btn{
  font-family:var(--f-sans);
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:#FFFDF8;
  background:linear-gradient(178deg,#A98449,var(--oro-hondo));
  border:1px solid var(--oro-hondo);
  border-radius:2px;
  padding:.95rem 2.1rem;
  margin-top:1.5rem;
  cursor:pointer;
  text-shadow:0 1px 1px rgba(0,0,0,.28);
  box-shadow:0 8px 18px -12px rgba(46,42,38,.9);
  transition:transform .25s ease;
}
.sobre__btn:hover{ transform:translateY(-2px); }
.sobre__nota{
  font-family:var(--f-sans);
  font-size:.625rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--tinta-suave);
  margin-top:.9rem;
  animation:latido 2.6s ease-in-out infinite;
}
@keyframes latido{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }

/* ══════════════════════════════════════════════════════════════════════
   ESTRUCTURA GENERAL
   ══════════════════════════════════════════════════════════════════════ */
#carta{ opacity:0; transition:opacity 1.1s ease .15s; }
#carta.visible{ opacity:1; }

.seccion{
  padding:4.5rem 1.5rem;
  max-width:var(--ancho);
  margin:0 auto;
  text-align:center;
  position:relative;
}
.alterna{
  max-width:none;
  background:var(--papel-hondo);
  position:relative;
}
/* Orilla rasgada (deckle), como el papel hecho a mano cortado a mano */
.alterna::before,
.alterna::after{
  content:"";
  position:absolute; left:0; right:0;
  height:13px;
  z-index:2;
  pointer-events:none;
  background-repeat:repeat-x;
  background-size:240px 13px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='13' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L240 0 L240 6 C226 9.5 214 3.5 200 6.5 C186 9.5 173 3 159 6 C145 9 133 2.5 119 6 C105 9.5 93 3 79 7 C65 11 53 4 39 7 C25 10 13 3.5 0 7 Z' fill='%23FAF7F1'/%3E%3C/svg%3E");
}
.alterna::before{ top:-1px; }
.alterna::after { bottom:-1px; transform:scaleY(-1); }
.alterna > *{ max-width:var(--ancho); margin-left:auto; margin-right:auto; }

/* Aparecer al hacer scroll */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1); }
.reveal.dentro{ opacity:1; transform:none; }

/* ══════════════════════════════════════════════════════════════════════
   PORTADA
   ══════════════════════════════════════════════════════════════════════ */
.portada{
  min-height:100dvh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding-block:5rem;
}
.marco{
  width:100%;
  padding:2.6rem 1.4rem;
  position:relative;
}
.marco::before{
  content:"";
  position:absolute; inset:0;
  border:1px solid var(--linea);
  box-shadow:inset 0 0 0 6px var(--papel), inset 0 0 0 7px rgba(227,207,164,.55);
  pointer-events:none;
}

.portada__kicker{
  font-family:var(--f-sans);
  font-size:.7rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--tinta-suave);
}
.portada__xv{
  font-family:var(--f-display);
  font-size:clamp(4.5rem,26vw,7.5rem);
  font-weight:300;
  line-height:.9;
  letter-spacing:.02em;
  margin:.2rem 0;
}
.portada__nombre{
  font-family:var(--f-display);
  font-size:clamp(2.35rem,11vw,3.5rem);
  font-weight:300;
  font-style:italic;
  line-height:1.08;
}
.portada__nombre span{ font-size:.72em; }

.portada__fecha{
  display:flex; align-items:center; justify-content:center;
  gap:1.1rem;
  margin-top:.4rem;
}
.portada__fecha .fcol{ display:flex; flex-direction:column; }
.portada__fecha .dia{
  font-family:var(--f-display);
  font-size:3.5rem; line-height:1; font-weight:300;
  padding:0 1.05rem;
  border-left:1px solid var(--linea);
  border-right:1px solid var(--linea);
}
.portada__fecha span{
  font-family:var(--f-sans);
  font-size:.68rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--tinta-suave);
}
.portada__lugar{
  font-family:var(--f-display);
  font-style:italic;
  font-size:.95rem;
  color:var(--tinta-suave);
  margin-top:1.15rem;
}

.scroll-hint{ margin-top:2.5rem; }
.scroll-hint span{
  display:block; width:1px; height:52px; margin:0 auto;
  background:linear-gradient(180deg,transparent,var(--oro));
  animation:baja 2.4s ease-in-out infinite;
}
@keyframes baja{ 0%,100%{ opacity:.25; transform:scaleY(.55); transform-origin:top; } 50%{ opacity:1; transform:scaleY(1); transform-origin:top; } }

/* ══════════════════════════════════════════════════════════════════════
   SALUDO PERSONALIZADO
   ══════════════════════════════════════════════════════════════════════ */
.saludo__nombre{
  font-family:var(--f-script);
  font-size:clamp(1.7rem,8.2vw,2.9rem);
  line-height:1.4;
  margin-bottom:1.9rem;
  padding-inline:.35em;      /* aire para las colas de la letra cursiva */
  overflow-wrap:break-word;
}
.pases{
  display:inline-block;
  padding:1.35rem 2.6rem;
}
.pases__num{
  font-family:var(--f-display);
  font-size:3.4rem; line-height:1; font-weight:300;
}
.pases__txt{
  font-family:var(--f-sans);
  font-size:.66rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--tinta-suave);
  margin-top:.4rem;
}
.saludo__nota{
  font-style:italic;
  color:var(--tinta-suave);
  max-width:27rem;
  margin:1.9rem auto 0;
}

/* ══════════════════════════════════════════════════════════════════════
   CORTE DE HONOR
   ══════════════════════════════════════════════════════════════════════ */
.corte__rol{
  font-family:var(--f-sans);
  font-size:.62rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--tinta-suave);
  margin-bottom:.9rem;
}
.corte__lista{
  list-style:none; margin:0 0 1.8rem; padding:0;
  display:grid; grid-template-columns:1fr; gap:.15rem;
}
.corte__lista li{
  font-family:var(--f-display);
  font-size:1.12rem;
  line-height:1.85;
}
.padrinos{ display:grid; gap:1.3rem; margin-top:1.6rem; }
.padrinos__uno .etiqueta{ display:block; margin-bottom:.35rem; font-size:.6rem; }
.padrinos__uno p{ font-family:var(--f-display); font-size:1.1rem; font-style:italic; }

/* ══════════════════════════════════════════════════════════════════════
   ITINERARIO
   ══════════════════════════════════════════════════════════════════════ */
.linea{
  list-style:none; margin:0; padding:0;
  max-width:23rem; margin-inline:auto;
  text-align:left;
  position:relative;
}
.linea::before{               /* el hilo de oro que une la noche */
  content:"";
  position:absolute; left:5px; top:10px; bottom:10px;
  width:1px;
  background:linear-gradient(180deg,transparent,var(--oro-claro) 8%,var(--oro) 50%,var(--oro-claro) 92%,transparent);
}
.linea__paso{
  position:relative;
  padding:.95rem 0 .95rem 2.2rem;
  display:flex; flex-direction:column;
}
.linea__paso::before{         /* el rombito de cada momento */
  content:"";
  position:absolute; left:0; top:1.45rem;
  width:11px; height:11px;
  transform:rotate(45deg);
  background:linear-gradient(135deg,#E5CE9C,#A98449 55%,#7A5C2A);
  box-shadow:0 1px 0 rgba(255,255,255,.9), 0 2px 4px -1px rgba(103,86,62,.6);
}
.linea__hora{
  font-family:var(--f-display);
  font-size:1.5rem; line-height:1.15; font-weight:300;
  font-variant-numeric:tabular-nums;
}
.linea__hora small{
  font-family:var(--f-sans);
  font-size:.58rem; letter-spacing:.2em;
  color:var(--tinta-suave);
  margin-left:.2rem;
  text-shadow:none;
}
.linea__que{
  font-family:var(--f-display);
  font-style:italic;
  font-size:1.02rem;
  color:var(--tinta-suave);
  margin-top:.1rem;
}

/* ══════════════════════════════════════════════════════════════════════
   PÉTALOS QUE CAEN
   ══════════════════════════════════════════════════════════════════════ */
.petalos{
  position:fixed; inset:0;
  z-index:8;
  pointer-events:none;
  overflow:hidden;
}
.petalo{
  position:absolute;
  top:-8vh;
  width:11px; height:14px;
  border-radius:60% 60% 55% 55% / 70% 70% 40% 40%;
  background:linear-gradient(150deg, rgba(255,252,246,.95), rgba(232,214,183,.75));
  box-shadow:0 1px 2px rgba(103,86,62,.18);
  opacity:0;
  animation:caer linear infinite;
}
@keyframes caer{
  0%   { transform:translate3d(0,0,0) rotate(0deg);            opacity:0; }
  8%   { opacity:.85; }
  50%  { transform:translate3d(26px,52vh,0) rotate(180deg);    opacity:.8; }
  92%  { opacity:.5; }
  100% { transform:translate3d(-16px,108vh,0) rotate(400deg);  opacity:0; }
}

/* ══════════════════════════════════════════════════════════════════════
   EL MOMENTO — la lámina
   El video ya trae las dos capas montadas (muro de flores atrás, ella
   recortada encima) y viene sobre el MISMO marfil del papel. Por eso no
   lleva caja ni borde: se funde con la hoja y parece impreso.
   Encima van los pétalos y las mariposas, que sí son de código.
   ══════════════════════════════════════════════════════════════════════ */
.momento{
  position:relative;
  width:100%;
  padding:.4rem 0 2.6rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
}
.momento__video{
  display:block;
  width:min(86%,398px);
  height:auto;
  /* Sombra apenas, para que la lámina se despegue un pelín del papel */
  filter:drop-shadow(0 10px 22px rgba(103,86,62,.16));
}
.momento__alas{
  position:absolute; inset:0;
  z-index:2;
  pointer-events:none;
  overflow:hidden;
}
.momento__texto{
  position:relative;
  z-index:3;
  text-align:center;
  padding:1.5rem 1.5rem 0;
}
.momento__kicker{
  font-family:var(--f-sans);
  font-size:.64rem; letter-spacing:.44em; text-transform:uppercase;
  color:var(--tinta-suave);
}
.momento__nombre{
  font-family:var(--f-script);
  font-size:clamp(2.7rem,14vw,4.6rem);
  line-height:1.25;
  margin-top:.4rem;
}
.momento__filete{
  width:min(200px,54%);
  height:1px;
  margin:1.1rem auto;
  background:linear-gradient(90deg,transparent,var(--oro) 50%,transparent);
}
.momento__fecha{
  font-family:var(--f-sans);
  font-size:.7rem; letter-spacing:.36em; text-transform:uppercase;
  color:var(--tinta-suave);
}

/* ══════════════════════════════════════════════════════════════════════
   MARIPOSAS
   Cada ala es un dibujo aparte. Aletear = achicarla y agrandarla desde
   el cuerpo (scaleX). El vuelo lo hace un contenedor de afuera, para que
   las dos cosas no se estorben.
   ══════════════════════════════════════════════════════════════════════ */
.mariposas{
  position:fixed; inset:0;
  z-index:8;
  pointer-events:none;
  overflow:hidden;
}
.vuelo{
  position:absolute;
  top:0; left:0;
  width:34px;
  animation:volar linear infinite;
  will-change:transform;
}
.mariposa{
  display:block;
  width:100%; height:auto;
  animation:cabecear 3.4s ease-in-out infinite;
  filter:drop-shadow(0 2px 3px rgba(103,86,62,.35));
}
.mariposa .ala{
  transform-box:fill-box;
  transform-origin:50% 50%;
  animation:aletear var(--aleteo, .34s) ease-in-out infinite alternate;
}
.mariposa .ala--izq{ transform-origin:100% 50%; }
.mariposa .ala--der{ transform-origin:0% 50%; }
@keyframes aletear{
  from{ transform:scaleX(1); }
  to  { transform:scaleX(.28); }
}
/* Un vaivén suave mientras vuela, para que no parezca que va en riel */
@keyframes cabecear{
  0%,100%{ transform:rotate(-9deg); }
  50%    { transform:rotate(11deg); }
}
/* Las que vuelan DENTRO del momento: recorrido más corto, porque la
   sección mide menos que la pantalla completa. */
/* Petalos que caen dentro del momento. Recorrido corto, porque la
   seccion mide menos que la pantalla; lo que se pase lo corta el
   overflow del contenedor. */
.petalo--cine{
  top:-12%;
  animation-name:caerCine;
  background:linear-gradient(150deg, rgba(255,252,246,.98), rgba(214,188,130,.85));
  box-shadow:0 1px 3px rgba(103,86,62,.22);
}
@keyframes caerCine{
  0%   { transform:translate3d(0,0,0) rotate(0deg);           opacity:0; }
  12%  { opacity:.92; }
  55%  { transform:translate3d(24px,44vh,0) rotate(210deg);   opacity:.85; }
  90%  { opacity:.55; }
  100% { transform:translate3d(-16px,92vh,0) rotate(430deg);  opacity:0; }
}

.vuelo--cine{ animation-name:volarCine; }
@keyframes volarCine{
  0%  { transform:translate3d(0, 34vh, 0)   scale(.78); opacity:0; }
  12% { opacity:.95; }
  45% { transform:translate3d(15vw, 15vh, 0) scale(1); }
  75% { transform:translate3d(-5vw, 2vh, 0)  scale(.9); }
  90% { opacity:.85; }
  100%{ transform:translate3d(11vw, -14vh, 0) scale(.75); opacity:0; }
}

/* El recorrido: entra por abajo, sube cruzando y se va por arriba */
@keyframes volar{
  0%  { transform:translate3d(0, 108vh, 0)  scale(.75); opacity:0; }
  8%  { opacity:.9; }
  25% { transform:translate3d(16vw, 74vh, 0) scale(.9); }
  50% { transform:translate3d(-6vw, 46vh, 0) scale(1); }
  75% { transform:translate3d(22vw, 20vh, 0) scale(.85); }
  92% { opacity:.8; }
  100%{ transform:translate3d(6vw, -14vh, 0) scale(.7); opacity:0; }
}

/* ══════════════════════════════════════════════════════════════════════
   DESTELLOS DORADOS
   Puntitos de luz que prenden y apagan. Van en la misma capa que los
   pétalos para no agregar otra.
   ══════════════════════════════════════════════════════════════════════ */
.destello{
  position:absolute;
  width:6px; height:6px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,247,224,.98) 0%, rgba(201,168,104,.75) 38%, rgba(201,168,104,0) 72%);
  opacity:0;
  animation:brillar ease-in-out infinite;
}
@keyframes brillar{
  0%,100%{ opacity:0;   transform:scale(.4) rotate(0deg); }
  45%    { opacity:.95; transform:scale(1.5) rotate(45deg); }
  60%    { opacity:.35; transform:scale(1)  rotate(70deg); }
}

/* ══════════════════════════════════════════════════════════════════════
   CUENTA REGRESIVA
   ══════════════════════════════════════════════════════════════════════ */
.cuenta__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; }
.cuenta__caja{ padding:1.1rem .3rem; }
.cuenta__caja .n{
  display:block;
  font-family:var(--f-display);
  font-size:clamp(1.5rem,7vw,2.15rem);
  font-weight:300; line-height:1;
  font-variant-numeric:tabular-nums;
}
.cuenta__caja .l{
  display:block;
  font-family:var(--f-sans);
  font-size:.56rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--tinta-suave);
  margin-top:.5rem;
}

/* ══════════════════════════════════════════════════════════════════════
   DEDICATORIA
   ══════════════════════════════════════════════════════════════════════ */
/* El ramo recortado. Se mece desde el nudo del listón, como si alguien
   lo trajera en la mano. La sombra se genera aparte para que siga la
   silueta real de las flores y no un rectángulo. */
.ramo{
  display:block;
  width:min(340px,88%);
  height:auto;
  margin:0 auto 1.2rem;
  /* mismo color que la sección: mientras carga, no se ve el hueco */
  background:var(--papel-hondo);
  /* Ya no lleva balanceo: ahora los pétalos y las ramitas se mueven
     de verdad dentro del video. Girar además la caja se vería falso. */
}
@media (min-width:700px){ .ramo{ width:min(430px,64%); } }

.dedicatoria blockquote{ margin:0 0 2.4rem; }
.dedicatoria blockquote p{
  font-family:var(--f-display);
  font-style:italic;
  font-size:clamp(1.2rem,5.2vw,1.5rem);
  line-height:1.6;
  color:var(--tinta);
  max-width:28rem; margin:0 auto;
}
.nombres{
  font-family:var(--f-display);
  font-size:1.15rem;
  line-height:1.75;
  margin-bottom:2rem;
}
.dedicatoria .etiqueta:not(:first-of-type){ margin-top:.5rem; }

/* ══════════════════════════════════════════════════════════════════════
   GALERÍA — arcos con tratamiento de color unificado
   ══════════════════════════════════════════════════════════════════════ */
.galeria__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.85rem;
}
.galeria__grid .foto:first-child{ grid-column:1 / -1; }
.foto{
  margin:0;
  overflow:hidden;
  border-radius:999px 999px 4px 4px;
  border:1px solid var(--linea);
  padding:6px;
  background:linear-gradient(178deg,var(--papel-alto),#F1EBE0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), var(--sombra-alta);
}
.foto img{
  width:100%; height:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:999px 999px 3px 3px;
  /* Tratamiento único: hace que fotos de distintas fuentes se vean de la misma sesión.
     Sube el sepia si las fotos del cliente vienen muy disparejas. */
  filter:sepia(.52) saturate(.58) contrast(1.03) brightness(1.07);
  /* Deriva lenta: la foto nunca queda del todo quieta. Es solo transform,
     así que el teléfono lo resuelve con la tarjeta de video, sin esfuerzo. */
  animation:deriva 24s ease-in-out infinite alternate;
}
@keyframes deriva{
  from{ transform:scale(1.05) translate( .8%,  .6%); }
  to  { transform:scale(1.13) translate(-1.4%, -1.1%); }
}
.galeria__grid .foto:nth-child(2) img{ animation-duration:29s; animation-delay:-6s;  }
.galeria__grid .foto:nth-child(3) img{ animation-duration:21s; animation-delay:-11s; }
.galeria__grid .foto:nth-child(4) img{ animation-duration:27s; animation-delay:-3s;  }
.galeria__grid .foto:nth-child(5) img{ animation-duration:23s; animation-delay:-14s; }
.galeria__grid .foto:first-child img{ aspect-ratio:4/3; }

/* ══════════════════════════════════════════════════════════════════════
   LUGARES
   ══════════════════════════════════════════════════════════════════════ */
.lugar{ padding:2.2rem 1.5rem; margin-bottom:1.1rem; }
.lugar__ico{ width:34px; margin:0 auto 1rem; color:var(--oro); }
.lugar__ico svg{ width:100%; height:auto; }
.lugar__tipo{
  font-family:var(--f-sans);
  font-size:.64rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--tinta-suave);
}
.lugar__hora{
  font-family:var(--f-display);
  font-size:2.15rem; font-weight:300; line-height:1.3;
}
.lugar__nombre{
  font-family:var(--f-display);
  font-style:italic;
  font-size:1.28rem;
  margin-top:.35rem;
}
.lugar__dir{ font-size:.94rem; color:var(--tinta-suave); margin-top:.2rem; }

.mapa{ padding:6px; margin-top:1.4rem; overflow:hidden; }
.mapa iframe{ display:block; width:100%; height:270px; border:0; filter:grayscale(.55) contrast(1.02); }

/* ══════════════════════════════════════════════════════════════════════
   TARJETITAS (vestimenta / regalos)
   ══════════════════════════════════════════════════════════════════════ */
.dos{ display:grid; grid-template-columns:repeat(2,1fr); gap:.85rem; }
.tarjetita{ padding:1.5rem .9rem; }
.tarjetita .ico{ color:var(--oro); font-size:.7rem; display:block; margin-bottom:.6rem; }
.tarjetita p{ font-family:var(--f-display); font-size:1.15rem; font-style:italic; }
.tarjetita small{
  display:block;
  font-family:var(--f-sans);
  font-size:.7rem; line-height:1.55;
  color:var(--tinta-suave);
  margin-top:.35rem;
}
.reserva{ margin-top:1.7rem; font-style:italic; color:var(--tinta-suave); }
.reserva strong{ font-style:normal; font-size:1.2rem; letter-spacing:.06em; }
.regalos__txt{ font-style:italic; color:var(--tinta-suave); max-width:26rem; margin:0 auto 1.6rem; }

/* ══════════════════════════════════════════════════════════════════════
   NOTAS
   ══════════════════════════════════════════════════════════════════════ */
.notas__lista{ list-style:none; margin:0; padding:0; max-width:26rem; margin-inline:auto; text-align:left; }
.notas__lista li{
  padding:.85rem 0;
  border-bottom:1px solid var(--linea);
  font-size:1rem;
  color:var(--tinta);
  display:flex; gap:.75rem; align-items:baseline;
}
.notas__lista li:last-child{ border-bottom:0; }
.notas__lista span{ color:var(--oro); font-size:.6rem; }

/* ══════════════════════════════════════════════════════════════════════
   FAQ
   ══════════════════════════════════════════════════════════════════════ */
.faq__lista{ text-align:left; display:grid; gap:.6rem; }
.faq details{ padding:0 1.2rem; }
.faq summary{
  cursor:pointer;
  list-style:none;
  padding:1.05rem 1.6rem 1.05rem 0;
  font-family:var(--f-display);
  font-size:1.08rem;
  font-style:italic;
  position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+";
  position:absolute; right:0; top:50%;
  transform:translateY(-50%);
  color:var(--oro);
  font-family:var(--f-sans);
  font-size:1.1rem;
  transition:transform .3s ease;
}
.faq details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq details p{
  padding:0 0 1.15rem;
  font-size:.96rem;
  color:var(--tinta-suave);
  border-top:1px solid var(--linea);
  padding-top:.9rem;
}

/* ══════════════════════════════════════════════════════════════════════
   RSVP
   ══════════════════════════════════════════════════════════════════════ */
.rsvp__form{ padding:2rem 1.5rem; text-align:left; }
.rsvp__quien{
  font-family:var(--f-display);
  font-style:italic;
  font-size:1.15rem;
  text-align:center;
  padding-bottom:1.3rem;
  margin-bottom:1.4rem;
  border-bottom:1px solid var(--linea);
}
.campo{ margin-bottom:1.15rem; }
.campo label{
  display:block;
  font-family:var(--f-sans);
  font-size:.64rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--tinta-suave);
  margin-bottom:.5rem;
}
.campo .opc{ letter-spacing:.06em; text-transform:none; }
.campo select,
.campo textarea{
  width:100%;
  font-family:var(--f-display);
  font-size:1.02rem;
  color:var(--tinta);
  background:var(--papel);
  border:1px solid var(--linea);
  border-radius:2px;
  padding:.8rem .9rem;
  box-shadow:inset 0 2px 4px -2px rgba(46,42,38,.22);
  resize:vertical;
}
.campo select:focus,
.campo textarea:focus{ outline:2px solid var(--oro); outline-offset:1px; border-color:var(--oro); }
.ayuda{
  display:block;
  font-family:var(--f-sans);
  font-size:.68rem;
  color:var(--tinta-suave);
  margin-top:.45rem;
}
.rsvp__nota{
  font-family:var(--f-sans);
  font-size:.66rem;
  text-align:center;
  color:var(--tinta-suave);
  margin-top:.9rem;
}
#campoPases.oculto{ display:none; }

/* ══════════════════════════════════════════════════════════════════════
   PIE
   ══════════════════════════════════════════════════════════════════════ */
.pie{
  padding:4rem 1.5rem 2.5rem;
  text-align:center;
  background:var(--papel-hondo);
  border-top:1px solid var(--linea);
}
.pie__nombre{ font-family:var(--f-script); font-size:2.3rem; line-height:1.4; }
.pie__fecha{
  font-family:var(--f-sans);
  font-size:.7rem; letter-spacing:.4em;
  color:var(--tinta-suave);
  margin-top:.3rem;
}
.pie__gracias{ font-style:italic; color:var(--tinta-suave); margin-top:1.1rem; }
/* Folio: le dice al invitado "eres uno de pocos", sin decirlo */
.pie__folio{
  font-family:var(--f-sans);
  font-size:.58rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--tinta-suave);
  opacity:.75;
  margin-top:1.6rem;
}

/* Firma SeqLogic — adaptada a fondo claro */
.seqlogic-watermark-container{
  margin-top:2.5rem;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  border-top:1px solid var(--linea);
  padding-top:2rem;
  width:100%; max-width:300px;
  margin-left:auto; margin-right:auto;
}
.seqlogic-watermark-title{
  font-family:var(--f-sans);
  font-size:.75rem;
  color:var(--tinta-suave);
  letter-spacing:2px;
  text-transform:uppercase;
}
.seqlogic-watermark{
  width:130px; height:auto;
  opacity:.45;
  filter:grayscale(1) brightness(.35);
  transition:opacity .4s ease, filter .4s ease, transform .4s ease;
}
.seqlogic-watermark:hover{
  opacity:1;
  filter:grayscale(0) brightness(1) drop-shadow(0 0 10px rgba(0,144,224,.45));
  transform:scale(1.03);
}
.seqlogic-social-links{ display:flex; gap:1rem; margin-top:.5rem; justify-content:center; }
.seqlogic-social-icon{
  color:var(--tinta-suave);
  transition:all .3s ease;
  padding:.5rem; border-radius:50%;
  background:rgba(46,42,38,.04);
  display:flex; align-items:center; justify-content:center;
}
.seqlogic-social-icon:hover{ transform:translateY(-3px); background:rgba(46,42,38,.08); }
.seqlogic-social-icon.facebook:hover{ color:#1877F2; box-shadow:0 0 10px rgba(24,119,242,.3); background:rgba(24,119,242,.1); }
.seqlogic-social-icon.youtube:hover{ color:#FF0000; box-shadow:0 0 10px rgba(255,0,0,.3); background:rgba(255,0,0,.1); }

/* ══════════════════════════════════════════════════════════════════════
   BOTÓN DE MÚSICA
   ══════════════════════════════════════════════════════════════════════ */
.musica{
  position:fixed; right:1rem; bottom:1rem; z-index:20;
  width:46px; height:46px;
  border-radius:50%;
  display:grid; place-items:center;
  color:var(--oro-hondo);
  background:linear-gradient(178deg,var(--papel-alto),#EFE8DC);
  border:1px solid var(--oro-claro);
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 18px -12px rgba(46,42,38,.9);
  transition:transform .3s ease, opacity .3s ease;
}
.musica[hidden]{ display:none; }   /* si no hay archivo de música, no aparece */
.musica svg{ width:19px; height:19px; }
.musica.apagada{ opacity:.5; }
.musica.apagada::after{
  content:"";
  position:absolute; left:9px; right:9px; top:50%;
  height:1px; background:currentColor;
  transform:rotate(-42deg);
}
.musica:hover{ transform:scale(1.07); }
/* Si el navegador no dejó que la música entrara sola, el botón late
   un momento para que el invitado lo vea y lo prenda. */
.musica--llama{ animation:latidoBtn 2.3s ease-in-out infinite; }
@keyframes latidoBtn{
  0%,100%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 18px -12px rgba(46,42,38,.9), 0 0 0 0   rgba(169,132,73,.5); }
  60%    { box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 18px -12px rgba(46,42,38,.9), 0 0 0 12px rgba(169,132,73,0); }
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE Y ACCESIBILIDAD
   ══════════════════════════════════════════════════════════════════════ */
/* El nombre se descubre de izquierda a derecha, como si lo escribieran */
.saludo__nombre{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.7s cubic-bezier(.45,.02,.2,1) .35s;
}
.saludo.dentro .saludo__nombre{ clip-path:inset(0 -8% 0 0); }

@media (min-width:700px){
  .seccion{ padding:6rem 2rem; }
  .galeria__grid{ grid-template-columns:repeat(3,1fr); }
  .galeria__grid .foto:first-child{ grid-column:1 / -1; }
  .mapa iframe{ height:340px; }
  .corte__lista{ grid-template-columns:repeat(2,1fr); }
  .padrinos{ grid-template-columns:repeat(3,1fr); }
}

/* En celular: nada de animaciones caras que traguen batería */
@media (max-width:520px){
  .foil{ animation:none; background-position:22% 50%; }
  .foto:hover img{ transform:none; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .petalos, .mariposas{ display:none; }
  .saludo__nombre{ clip-path:none !important; }
}

/* Impresión: que salga limpio si alguien la imprime */
@media print{
  body::after, .musica, .sobre, .scroll-hint{ display:none !important; }
  #carta{ opacity:1 !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .foil{ -webkit-text-fill-color:#8C6B36; color:#8C6B36; }
}