/* ==========================================================================
   TEMA: BODA · OLIVO & VINO   —  dirección de arte "LA MESA DE LA BODA"
   Hecha el 2 de octubre de 2026, a partir de un video que le pasó a Abdiel su
   hija (una invitación de boda armada en Canva, verde olivo con vino).

   LA IDEA: la mesa de la boda vista desde arriba. Un sobre verde olivo con un
   paisaje pintado por dentro, la tarjeta color vino, flores, un platón de plata
   y polaroids en blanco y negro, todo puesto sobre el mantel. No es una página
   con secciones: es un COLLAGE, y cada pieza se toca y lleva a su sección
   (los detalles, confirmar, nuestra historia).

   De dónde salen las piezas (todas sin costo):
     · paisaje.webp, flores-a/b/c.webp, cala.webp, plato.webp y las fotos en
       blanco y negro: generador local de la compu (ComfyUI, Realistic Vision),
       recortadas con herramientas/recortar-blanco.js
     · el sobre, la tarjeta, los sellos y la ramita de olivo: código

   TEORÍA DEL COLOR: complementarios apagados. El verde olivo y el vino quedan
   casi enfrente en el círculo cromático, y bajados de tono se vuelven elegantes
   en vez de navideños. 60 papel · 30 olivo · 10 vino (botones y lo que se toca).

   CONTRASTE MEDIDO (fórmula WCAG):
     sobre papel  #FBFAF6 → tinta #3B2E2A 12.5 · suave #6B5E57 6.0 · olivo #5F6528 6.0 · vino 13.1
     sobre marfil #F3EFE6 → suave 5.4 · vino 12.0
     sobre vino   #5A1020 → blanco 13.7 · crema #F4EFE4 12.0 · arena #D8C9A0 8.4
     sobre olivo  #5F6528 → papel 6.0     (el olivo del sobre, #6E7430, da 5.0 con blanco)
     campos del formulario: tinta #2A2A14 sobre olivo claro #AEB56A → 6.7
   ========================================================================== */
:root{
  --papel:#FBFAF6;  --papel-hondo:#F3EFE6;
  --tinta:#3B2E2A;  --tinta-suave:#6B5E57;
  --marca:#5F6528;  --marca-claro:#8C9248;
  --acento:#5A1020; --acento-hondo:#3E0914;
  --olivo:#6E7430;  --olivo-hondo:#5F6528; --olivo-claro:#AEB56A;
  --vino:#5A1020;   --vino-claro:#8A3B4A;
  --crema:#F4EFE4;  --arena:#D8C9A0;
  --f-display:"Cormorant Garamond", Georgia, serif;
  --f-texto:"Jost", system-ui, sans-serif;
  --f-letra:"Imperial Script", "Pinyon Script", "Snell Roundhand", cursive;
  --radio:2px;
  --sombra:0 14px 26px -16px rgba(40,25,20,.5);
  --sombra-alta:0 26px 44px -22px rgba(40,25,20,.6);

  /* La medida del collage: 100 unidades = el ancho del celular (tope 520 px) */
  --u:min(1vw, 5.2px);
  /* El "eco" de imprenta: cada renglón deja su sombra un poco más abajo */
  --eco:0 .5em 0 rgba(255,255,255,.16);
  --eco-tinta:0 .5em 0 rgba(59,46,42,.13);

  --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3  0 0 0 0 .26  0 0 0 0 .18  0 0 0 .5 -.19'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grano-claro:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .92  0 0 0 0 .86  0 0 0 .5 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  /* La tarjeta vino: orillas con muesca y copete, como las de imprenta fina */
  --placa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 440'%3E%3Cdefs%3E%3ClinearGradient id='v' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23641426'/%3E%3Cstop offset='1' stop-color='%234C0B19'/%3E%3C/linearGradient%3E%3Cpath id='p' d='M44 28Q92 28 110 16Q126 6 140 6Q154 6 170 16Q188 28 236 28V38A26 26 0 0 0 262 64H272V376H262A26 26 0 0 0 236 402V412Q188 412 170 424Q154 434 140 434Q126 434 110 424Q92 412 44 412V402A26 26 0 0 0 18 376H8V64H18A26 26 0 0 0 44 38Z'/%3E%3C/defs%3E%3Cuse href='%23p' fill='url(%23v)'/%3E%3Cuse href='%23p' fill='none' stroke='%239A4A59' stroke-width='1.3' transform='translate(140 220) scale(.925 .95) translate(-140 -220)'/%3E%3C/svg%3E");
  /* El frente de un sobre: dos dobleces en V */
  --frente-olivo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' preserveAspectRatio='none'%3E%3Crect width='100' height='60' fill='%236E7430'/%3E%3Cpolygon points='0,0 50,36 100,0' fill='%23626829'/%3E%3Cpolygon points='0,60 50,28 100,60' fill='%23777D37'/%3E%3Cg fill='none' stroke='%234C5120' stroke-opacity='.7' stroke-width='1' vector-effect='non-scaling-stroke'%3E%3Cpolyline points='0,0 50,36 100,0' vector-effect='non-scaling-stroke'/%3E%3Cpolyline points='0,60 50,28 100,60' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E");
  --frente-crema:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' preserveAspectRatio='none'%3E%3Crect width='100' height='60' fill='%23F1EDE2'/%3E%3Cpolygon points='0,0 50,38 100,0' fill='%23F7F4EC'/%3E%3Cg fill='none' stroke='%23C9C0AE' stroke-width='1' vector-effect='non-scaling-stroke'%3E%3Cpolyline points='0,0 50,38 100,0' vector-effect='non-scaling-stroke'/%3E%3Cpolyline points='0,60 34,25' vector-effect='non-scaling-stroke'/%3E%3Cpolyline points='100,60 66,25' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E");
  --sello-olivo:radial-gradient(circle at 36% 30%, #B3BA72 0%, #7F863E 46%, #535A22 100%);
}

html{ overflow-x:hidden; overflow-x:clip; }
body{ background:var(--grano), var(--papel); overflow-x:clip; }
.etiqueta{ color:var(--marca); letter-spacing:.32em; font-weight:500; font-family:var(--f-texto); }
.ramita{ display:block; width:4.4rem; height:auto; margin:.2rem auto 0; color:var(--marca-claro); }


/* ══════════════════════════════════════════════════════════════════════
   LA ENTRADA — un sobre verde olivo cerrado con lacre color vino
   Al romper el sello: la solapa se levanta (por dentro trae el paisaje) y
   la tarjeta se asoma.
   ══════════════════════════════════════════════════════════════════════ */
.entrada{
  --e:min(80vw, 340px);                       /* ancho del sobre */
  overflow:hidden;
  justify-content:flex-start;
  padding-top:max(6dvh, calc(54dvh - var(--e) * .352 - 8.2rem));
  background:var(--grano), var(--papel);
}
.entrada__para{ color:var(--marca); letter-spacing:.4em; font-weight:500; }
.entrada__nombre{
  font-family:var(--f-letra); font-weight:400;
  font-size:clamp(2.1rem,9.2vw,3rem); line-height:1.1;
  color:var(--vino);
  max-width:88vw; margin:.3rem 0 0; padding:0 .2em;
  text-wrap:balance;
}
.sobre-o{
  position:absolute; left:50%; top:54dvh;
  width:var(--e); aspect-ratio:1.42;
  transform:translate(-50%,-50%);
  perspective:1100px;
  background:#4A4F1E;                           /* el fondo del sobre, por dentro */
  border-radius:3px;
  filter:drop-shadow(0 22px 22px rgba(50,45,15,.34));
}
.sobre-o__carta{
  position:absolute; left:7%; right:7%; top:8%; height:84%;
  z-index:1;
  background:var(--placa) center/100% 100% no-repeat;
  transition:transform .8s cubic-bezier(.3,.9,.3,1) .3s;
}
.sobre-o__cuerpo{
  position:absolute; inset:0;
  background:var(--frente-olivo) center/100% 100% no-repeat;
  z-index:2;
  clip-path:polygon(0 0, 50% 60%, 100% 0, 100% 100%, 0 100%);
  border-radius:3px;
}
.sobre-o__solapa{
  position:absolute; left:0; right:0; top:0; height:62%; z-index:3;
  transform-origin:50% 0; transform-style:preserve-3d;
  /* a media vuelta (cuando se ve de canto) pasa atrás de la tarjeta */
  transition:transform .95s cubic-bezier(.45,0,.2,1), z-index 0s .42s;
}
.sobre-o__cara,.sobre-o__forro{
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.sobre-o__cara{
  clip-path:polygon(0 0, 100% 0, 54% 96%, 50% 100%, 46% 96%);
  background:linear-gradient(180deg, #7A8038 0%, #6A702D 100%);
}
/* La cara de adentro se voltea dos veces (la suya y la de la solapa): por eso su
   forma se dibuja de cabeza, con el pico arriba. */
.sobre-o__forro{
  transform:rotateX(180deg);
  clip-path:polygon(0 100%, 100% 100%, 54% 4%, 50% 0, 46% 4%);
  background:#6E7430;
}
.sobre-o__forro::after{
  content:""; position:absolute; inset:9% 7% 0;
  clip-path:polygon(0 100%, 100% 100%, 54% 4%, 50% 0, 46% 4%);
  background:url("paisaje.webp") center 60%/cover no-repeat;
}
body.revelado .sobre-o__solapa{ transform:rotateX(180deg); z-index:0; }
body.revelado .sobre-o__carta{ transform:translateY(-58%); }
/* el nombre se quita para que la solapa abra limpia */
.entrada__para,.entrada__nombre{ transition:opacity .3s ease; }
body.revelado .entrada__para, body.revelado .entrada__nombre{ opacity:0; }

.gancho.lacre{
  position:absolute; left:50%; top:calc(54dvh + var(--e) * .0845 - 41px);
  width:82px; margin-left:-41px; z-index:2;
  animation:respirar 3.6s ease-in-out infinite;
}
.gancho.lacre .gancho__svg{ filter:drop-shadow(0 7px 8px rgba(40,5,10,.45)); }
@keyframes respirar{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
.gancho.lacre.abre{ animation:cuartear .7s cubic-bezier(.3,.9,.4,1) forwards; }
@keyframes cuartear{
  0%  { transform:scale(1) rotate(0); opacity:1; }
  25% { transform:scale(1.14) rotate(-5deg); }
  100%{ transform:scale(.5) rotate(-18deg) translateY(70px); opacity:0; }
}
.entrada__pista{
  position:absolute; left:0; right:0; top:calc(54dvh + var(--e) * .352 + 1.6rem);
  margin:0;
  font-family:var(--f-texto); font-weight:500; font-size:.72rem;
  letter-spacing:.36em; text-transform:uppercase; color:var(--marca);
}
.entrada__marcador{ display:none; }


/* ══════════════════════════════════════════════════════════════════════
   LA PORTADA — el collage. Todo se mide en "u" (centésimas del ancho).
   ══════════════════════════════════════════════════════════════════════ */
.portada{
  display:block; position:relative;
  width:calc(100 * var(--u)); height:calc(286 * var(--u)); min-height:0;
  margin:0 auto; padding:0;
}
.portada__flecha{ display:none; }
.c{ position:absolute; display:block; margin:0; }

/* la tarjeta vino con el texto */
.portada__tarjeta{
  position:absolute; z-index:3;
  left:calc(2 * var(--u)); top:calc(27 * var(--u));
  width:calc(53 * var(--u)); height:calc(83.3 * var(--u));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:calc(1.8 * var(--u));
  padding:calc(13 * var(--u)) calc(5.4 * var(--u)) calc(8.4 * var(--u));
  background:var(--placa) center/100% 100% no-repeat;
  color:var(--crema);
  transform:rotate(-2deg);
  filter:drop-shadow(0 calc(2.4 * var(--u)) calc(2.6 * var(--u)) rgba(30,5,10,.42));
}
.portada__arriba{
  font-family:var(--f-display); font-weight:400;
  font-size:calc(2.85 * var(--u)); line-height:1.3;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--crema); text-shadow:var(--eco);
  max-width:calc(32 * var(--u));
}
.portada__nombre{
  font-family:var(--f-letra); font-weight:400;
  font-size:calc(11.7 * var(--u)); line-height:.96;
  color:#fff; text-shadow:0 .34em 0 rgba(255,255,255,.13);
  margin:calc(1.4 * var(--u)) 0 calc(3.4 * var(--u));
  white-space:nowrap;
}
.portada__nombre .amp{ font-size:.9em; }
.portada__fecha{
  border:0; padding:0; gap:.38em;
  font-family:var(--f-display); font-size:calc(2.85 * var(--u));
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--crema); text-shadow:var(--eco);
}
.portada__fecha .fcol{ flex-direction:row; gap:.38em; font-size:1em; letter-spacing:inherit; color:inherit; }
.portada__fecha .fcol:first-child{ display:none; }
.portada__fecha .fcol b{ font-weight:400; }
.portada__fecha .fcol small{ font-size:1em; opacity:1; }
.portada__fecha .fnum{ font-family:var(--f-display); font-weight:400; font-size:1em; line-height:inherit; color:inherit; }
.portada__lugar{
  margin:0;
  font-family:var(--f-display); font-size:calc(2.85 * var(--u)); line-height:1.3;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--crema); text-shadow:var(--eco);
  max-width:calc(28 * var(--u));
}

/* el sobre abierto, con el paisaje pintado en la solapa */
.c-sobre{
  z-index:1;
  left:calc(43 * var(--u)); top:calc(2 * var(--u));
  width:calc(58 * var(--u)); height:calc(61 * var(--u));
  transform:rotate(5deg);
  filter:drop-shadow(0 calc(2 * var(--u)) calc(2.4 * var(--u)) rgba(50,45,15,.36));
}
.c-sobre__solapa{
  position:absolute; left:0; right:0; top:0; height:47%;
  background:var(--olivo);
  clip-path:polygon(41% 5%, 46% 1%, 54% 1%, 59% 5%, 100% 100%, 0 100%);
}
.c-sobre__solapa::after{
  content:""; position:absolute; inset:9% 8% 0;
  background:url("paisaje.webp") center 30%/cover no-repeat;
  clip-path:polygon(40% 5%, 46% 0, 54% 0, 60% 5%, 100% 100%, 0 100%);
}
.c-sobre__cuerpo{
  position:absolute; left:0; right:0; top:46.5%; bottom:0;
  background:var(--frente-olivo) center/100% 100% no-repeat;
  border-radius:0 0 calc(.6 * var(--u)) calc(.6 * var(--u));
}
.c-sobre__mono{
  position:absolute; left:24%; top:66%;
  width:calc(11 * var(--u)); height:calc(14 * var(--u));
  display:grid; place-items:center;
  border:1px solid #C9BE7C; border-radius:50%;
  outline:1px solid rgba(201,190,124,.55); outline-offset:calc(.5 * var(--u));
  font-family:var(--f-letra); font-size:calc(4.6 * var(--u)); line-height:1; color:#D8CE8E;
}

/* flores (recortadas) */
.c-flores,.c-cala{ height:auto; pointer-events:none; }
.c-flores--a{ z-index:4; left:calc(-5 * var(--u)); top:calc(-3 * var(--u)); width:calc(29 * var(--u)); transform:rotate(15deg); filter:drop-shadow(0 calc(1.2 * var(--u)) calc(1.4 * var(--u)) rgba(30,20,10,.35)); }
.c-flores--b{ z-index:4; left:calc(63 * var(--u)); top:calc(160 * var(--u)); width:calc(40 * var(--u)); transform:rotate(-14deg);  filter:drop-shadow(0 calc(1.2 * var(--u)) calc(1.4 * var(--u)) rgba(30,20,10,.35)); }
.c-flores--c{ z-index:4; left:calc(28 * var(--u)); top:calc(231 * var(--u)); width:calc(28 * var(--u)); transform:rotate(18deg); filter:drop-shadow(0 calc(1.2 * var(--u)) calc(1.4 * var(--u)) rgba(30,20,10,.35)); }
.c-cala{ z-index:4; left:calc(45 * var(--u)); top:calc(89 * var(--u)); width:calc(14 * var(--u)); transform:rotate(-26deg); filter:drop-shadow(0 calc(.8 * var(--u)) calc(1 * var(--u)) rgba(30,20,10,.3)); }

/* polaroids */
.c-polaroid{
  z-index:2;
  padding:calc(1.7 * var(--u)) calc(1.7 * var(--u)) calc(6.4 * var(--u));
  background:#FDFCF9;
  box-shadow:0 calc(2 * var(--u)) calc(3 * var(--u)) calc(-1.2 * var(--u)) rgba(40,30,20,.55), 0 0 0 1px rgba(59,46,42,.06);
}
.c-polaroid img{ display:block; width:100%; height:auto; aspect-ratio:1 / 1; object-fit:cover; filter:grayscale(1) contrast(1.06); }
.c-polaroid--1{ z-index:3; left:calc(64 * var(--u)); top:calc(91 * var(--u));  width:calc(33 * var(--u)); transform:rotate(5deg); }
.c-polaroid--2{ left:calc(50 * var(--u)); top:calc(129 * var(--u)); width:calc(40 * var(--u)); transform:rotate(-4deg); }
.c-polaroid--2 img{ aspect-ratio:5 / 4; }
.c-polaroid--3{ left:calc(4 * var(--u));  top:calc(181 * var(--u)); width:calc(33 * var(--u)); transform:rotate(5deg); }
.c-polaroid--4{ left:calc(11 * var(--u)); top:calc(215 * var(--u)); width:calc(32 * var(--u)); transform:rotate(-5deg); }

/* sellos de cera, en olivo */
.c-sello{
  z-index:5;
  width:calc(13 * var(--u)); height:calc(13 * var(--u));
  display:grid; place-items:center;
  border-radius:47% 53% 50% 50% / 52% 48% 52% 48%;
  background:var(--sello-olivo);
  box-shadow:inset 0 0 0 calc(1.5 * var(--u)) rgba(255,255,255,.07), inset 0 0 0 calc(1.7 * var(--u)) rgba(60,65,20,.35), 0 calc(1 * var(--u)) calc(1.4 * var(--u)) rgba(40,40,10,.4);
  font-family:var(--f-letra); font-size:calc(5 * var(--u)); line-height:1; color:#474C1B;
  text-shadow:0 1px 0 rgba(220,225,160,.5);
}
.c-sello--1{ left:calc(42 * var(--u)); top:calc(126 * var(--u)); transform:rotate(-8deg); }
.c-sello--2{ left:calc(81 * var(--u)); top:calc(236 * var(--u)); transform:rotate(10deg); }

/* el platón de plata y, encima, la tarjeta de los detalles */
.c-plato{ z-index:1; left:calc(-8 * var(--u)); top:calc(101 * var(--u)); width:calc(66 * var(--u)); height:auto; pointer-events:none; filter:drop-shadow(0 calc(1.6 * var(--u)) calc(2 * var(--u)) rgba(40,40,40,.3)); }
.c-detalles,.c-confirma,.c-historia{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; text-align:center;
  -webkit-tap-highlight-color:transparent;
  transition:transform .25s ease, filter .25s ease;
}
.c-detalles b,.c-confirma b,.c-historia b{ font-family:var(--f-letra); font-weight:400; line-height:.92; }
.c-detalles small,.c-confirma small,.c-historia small{
  font-family:var(--f-display); font-size:calc(2.5 * var(--u));
  letter-spacing:.16em; text-transform:uppercase;
}
.c-detalles{
  z-index:3;
  left:calc(5 * var(--u)); top:calc(108 * var(--u));
  width:calc(42 * var(--u)); height:calc(37 * var(--u));
  gap:calc(.8 * var(--u));
  background:#F8F5EE;
  color:var(--tinta);
  /* la orilla ondulada de una tarjeta troquelada */
  --r:calc(2.2 * var(--u));
  -webkit-mask:
    linear-gradient(#000 0 0) center / calc(100% - 2 * var(--r)) calc(100% - 2 * var(--r)) no-repeat,
    radial-gradient(50% 50%, #000 96%, #0000 100%) 0 0 / calc(2 * var(--r)) calc(2 * var(--r)) round;
          mask:
    linear-gradient(#000 0 0) center / calc(100% - 2 * var(--r)) calc(100% - 2 * var(--r)) no-repeat,
    radial-gradient(50% 50%, #000 96%, #0000 100%) 0 0 / calc(2 * var(--r)) calc(2 * var(--r)) round;
  transform:rotate(-3deg);
}
.c-detalles::before{                                   /* filete doble por dentro */
  content:""; position:absolute; inset:calc(3.4 * var(--u));
  border:1px solid #A9A08E; outline:1px solid rgba(169,160,142,.5); outline-offset:calc(.8 * var(--u));
  border-radius:calc(1.4 * var(--u));
  pointer-events:none;
}
.c-detalles b{ font-size:calc(8.1 * var(--u)); text-shadow:var(--eco-tinta); }
.c-detalles small{ color:var(--tinta-suave); margin-top:calc(2.2 * var(--u)); }
.c-detalles .ramita{ width:calc(13 * var(--u)); margin-top:calc(.4 * var(--u)); color:#9A917E; }

/* el sobre crema: confirmar */
.c-confirma{
  z-index:2;
  z-index:3;
  left:calc(3 * var(--u)); top:calc(148 * var(--u));
  width:calc(56 * var(--u)); height:calc(36.4 * var(--u));
  padding-top:calc(3.6 * var(--u)); gap:calc(1 * var(--u));
  background:var(--frente-crema) center/100% 100% no-repeat;
  color:var(--tinta);
  transform:rotate(-3deg);
  box-shadow:0 calc(2 * var(--u)) calc(3 * var(--u)) calc(-1.4 * var(--u)) rgba(40,30,20,.5), 0 0 0 1px rgba(59,46,42,.07);
}
.c-confirma b{ font-size:calc(9.8 * var(--u)); text-shadow:var(--eco-tinta); }
.c-confirma small{ color:var(--tinta-suave); margin-top:calc(3.2 * var(--u)); }

/* el arco olivo: nuestra historia */
.c-historia{
  z-index:2;
  z-index:3;
  left:calc(41 * var(--u)); top:calc(188 * var(--u));
  width:calc(50 * var(--u)); height:calc(60 * var(--u));
  padding-top:calc(5 * var(--u)); gap:calc(1.4 * var(--u));
  background:linear-gradient(180deg, #747A33 0%, #666C2B 100%);
  border-radius:calc(25 * var(--u)) calc(25 * var(--u)) 0 0;
  color:#fff;
  box-shadow:0 calc(2 * var(--u)) calc(3 * var(--u)) calc(-1.4 * var(--u)) rgba(40,40,10,.5);
}
.c-historia::before{
  content:""; position:absolute; inset:calc(1.6 * var(--u)) calc(1.6 * var(--u)) calc(1.6 * var(--u));
  border:1px solid rgba(244,239,228,.75);
  border-radius:calc(23.4 * var(--u)) calc(23.4 * var(--u)) 0 0;
  pointer-events:none;
}
.c-historia b{ font-size:calc(9 * var(--u)); text-shadow:0 .4em 0 rgba(255,255,255,.14); }
.c-historia small{ color:var(--crema); margin-top:calc(2.6 * var(--u)); }
.c-historia .ramita{ width:calc(17 * var(--u)); margin-top:calc(1 * var(--u)); color:var(--crema); }

@media (hover:hover){
  .c-detalles:hover{ transform:rotate(-3deg) translateY(calc(-1 * var(--u))) scale(1.03); }
  .c-confirma:hover{ transform:rotate(-3deg) translateY(calc(-1 * var(--u))) scale(1.02); }
  .c-historia:hover{ transform:translateY(calc(-1 * var(--u))) scale(1.02); }
}
.c-detalles:active,.c-confirma:active,.c-historia:active{ filter:brightness(.94); }
.c-detalles:focus-visible,.c-confirma:focus-visible,.c-historia:focus-visible{ outline:3px solid var(--vino); outline-offset:4px; }

/* EL DISCO — un vinil que se asoma debajo de la tarjeta. Se toca y pone la canción
   (lo prende el núcleo: cualquier pieza con data-musica). Mientras suena, gira. */
.c-disco{
  z-index:2;
  left:calc(50 * var(--u)); top:calc(54 * var(--u));
  width:calc(43 * var(--u)); height:calc(43 * var(--u));
  padding:0; border:0; background:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  filter:drop-shadow(0 calc(1.8 * var(--u)) calc(2.2 * var(--u)) rgba(20,15,10,.5));
}
.c-disco__plato{
  position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle, #F4EFE4 0 2%, transparent 2.4%),
    radial-gradient(circle, #641426 0 36%, #2B0810 36.6% 37.6%, transparent 38.2%),
    repeating-radial-gradient(circle, #161616 0 1.1%, #232323 1.1% 1.7%),
    #161616;
  display:grid; place-items:center;
}
.c-disco__plato::before{                       /* el brillo del vinil: dos gajos de luz */
  content:""; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 20deg, transparent 0 6%, rgba(255,255,255,.26) 11%, transparent 17% 50%, rgba(255,255,255,.2) 60%, transparent 67%);
  -webkit-mask:radial-gradient(circle, transparent 0 38.5%, #000 39%);
          mask:radial-gradient(circle, transparent 0 38.5%, #000 39%);
}
.c-disco__plato::after{                        /* la orilla */
  content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:inset 0 0 0 calc(.5 * var(--u)) #0C0C0C, inset 0 0 0 calc(.7 * var(--u)) rgba(255,255,255,.12);
}
.c-disco__etiqueta{
  position:relative; width:72%; height:72%;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:calc(4.4 * var(--u)) 0 calc(6.2 * var(--u));
  color:var(--crema);
}
.c-disco__etiqueta b{ font-family:var(--f-letra); font-weight:400; font-size:calc(6.4 * var(--u)); line-height:1; }
.c-disco__etiqueta small{ font-family:var(--f-display); font-size:calc(1.7 * var(--u)); letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; color:var(--arena); }
/* el letrerito: una etiqueta negra ovalada, como las de la mesa */
.c-disco__toca{
  position:absolute; left:71%; top:calc(-2.2 * var(--u)); transform:translateX(-50%) rotate(7deg);
  display:grid; place-items:center;
  padding:calc(1.1 * var(--u)) calc(3 * var(--u)) calc(1.2 * var(--u));
  background:#1C1917; color:var(--crema);
  border-radius:999px; box-shadow:inset 0 0 0 1px rgba(216,201,160,.6), 0 calc(.8 * var(--u)) calc(1.2 * var(--u)) rgba(20,15,10,.4);
  font-family:var(--f-display); font-style:italic; font-size:calc(3 * var(--u)); line-height:1.1; white-space:nowrap;
}
.c-disco__toca i{ grid-area:1 / 1; transition:opacity .35s ease; }
.c-disco__toca i:last-child{ opacity:0; }
body.suena .c-disco__toca i:first-child{ opacity:0; }
body.suena .c-disco__toca i:last-child{ opacity:1; }
body.suena .c-disco__plato{ animation:girar-disco 3.4s linear infinite; }
@keyframes girar-disco{ to{ transform:rotate(360deg); } }
/* quieto, late tantito para que se antoje tocarlo */
.carta.visible .c-disco{ animation:posar .9s cubic-bezier(.2,.8,.2,1) .5s both, asomar 2.8s ease-in-out 2.4s 3; }
@keyframes asomar{ 0%,100%{ rotate:0deg; } 30%{ rotate:-9deg; } 60%{ rotate:6deg; } }
.c-disco:focus-visible{ outline:3px solid var(--vino); outline-offset:4px; border-radius:50%; }

/* la firma del collage */
.c-firma{
  left:0; right:0; top:calc(261 * var(--u));
  display:flex; flex-direction:column; align-items:center;
  color:var(--tinta);
}
.c-firma small{ font-family:var(--f-display); font-size:calc(2.8 * var(--u)); letter-spacing:.2em; text-transform:uppercase; color:var(--tinta-suave); }
.c-firma b{ font-family:var(--f-letra); font-weight:400; font-size:calc(10.4 * var(--u)); line-height:1.1; text-shadow:var(--eco-tinta); }
.c-firma span{ font-family:var(--f-display); font-size:calc(3 * var(--u)); letter-spacing:.18em; color:var(--tinta-suave); margin-top:calc(1.6 * var(--u)); }

/* Las piezas se van posando sobre la mesa al abrir el sobre */
.carta.visible .portada > *{ animation:posar .9s cubic-bezier(.2,.8,.2,1) both; }
.carta.visible .c-sobre{ animation-delay:.1s; }
.carta.visible .portada__tarjeta{ animation-delay:.3s; }
.carta.visible .c-flores--a{ animation:posar .9s cubic-bezier(.2,.8,.2,1) .55s both, mecer 7s ease-in-out 1.8s infinite alternate; }
.carta.visible .c-polaroid--1{ animation-delay:.7s; }
.carta.visible .c-cala{ animation-delay:.85s; }
@keyframes posar{ from{ opacity:0; translate:0 calc(-5 * var(--u)); scale:1.07; } to{ opacity:1; translate:0 0; scale:1; } }
/* las flores respiran apenas */
@keyframes mecer{ to{ rotate:1.8deg; } }


/* ══════════════════════════════════════════════════════════════════════
   LAS SECCIONES
   ══════════════════════════════════════════════════════════════════════ */
.titulo{
  font-family:var(--f-letra); font-weight:400;
  font-size:clamp(3rem,13.5vw,4.2rem); line-height:1;
  color:var(--tinta); text-shadow:var(--eco-tinta);
  margin:.4rem 0 1.9rem; padding:0 .1em;
}

/* para quién es */
.saludo{ padding-top:2.2rem; }
.saludo__nombre{ font-family:var(--f-letra); font-weight:400; font-size:clamp(2.7rem,12vw,3.6rem); line-height:1.1; color:var(--vino); margin:.4rem 0 .9rem; }
.saludo__pases{
  background:transparent; color:var(--marca);
  border:1px solid var(--marca-claro); border-radius:2px;
  font-family:var(--f-texto); font-weight:500; letter-spacing:.2em; text-transform:uppercase; font-size:.7rem;
  padding:.5rem 1.2rem;
}

/* la foto grande: bloque vino, foto con orilla de encaje */
.momento{
  background:var(--grano-claro), var(--vino);
  padding:3.6rem 1.5rem 1.2rem;
}
.momento__foto{
  width:min(80%,340px);
  border:0; border-radius:0;
  padding:5.2%;
  background:#F6F2EA;
  box-shadow:none;
  filter:grayscale(1) contrast(1.05) drop-shadow(0 18px 22px rgba(20,0,5,.5));
  --r:9px;
  -webkit-mask:
    linear-gradient(#000 0 0) center / calc(100% - 2 * var(--r)) calc(100% - 2 * var(--r)) no-repeat,
    radial-gradient(50% 50%, #000 96%, #0000 100%) 0 0 / calc(2 * var(--r)) calc(2 * var(--r)) round;
          mask:
    linear-gradient(#000 0 0) center / calc(100% - 2 * var(--r)) calc(100% - 2 * var(--r)) no-repeat,
    radial-gradient(50% 50%, #000 96%, #0000 100%) 0 0 / calc(2 * var(--r)) calc(2 * var(--r)) round;
}

.flotantes{ display:none; }

/* la cuenta regresiva: sigue en vino, números grandes */
.seccion.alterna.cuenta{
  background:var(--grano-claro), var(--vino);
  color:var(--crema);
  padding-top:2.4rem; padding-bottom:4rem;
}
.cuenta .etiqueta{ color:var(--arena); }
.cuenta .titulo{ color:#fff; text-shadow:var(--eco); margin-bottom:1.2rem; }
.cuenta__grid{ gap:0; }
.cuenta__caja{ background:none; border:0; box-shadow:none; border-radius:0; padding:.2rem 0; position:relative; }
.cuenta__caja + .cuenta__caja::before{
  content:":"; position:absolute; left:-.14em; top:.02em;
  font-family:var(--f-display); font-size:clamp(2.3rem,10.5vw,3.2rem); line-height:1; color:var(--arena);
}
.cuenta__caja .n{ font-family:var(--f-display); font-weight:400; font-size:clamp(2.5rem,11.5vw,3.5rem); color:#fff; }
.cuenta__caja .l{ color:var(--arena); letter-spacing:.2em; font-size:.6rem; font-weight:500; margin-top:.5rem; }

/* nuestra historia */
.dedicatoria{ padding-top:4rem; padding-bottom:3.6rem; }
.dedicatoria .titulo{ margin-bottom:2.3rem; }
.dedicatoria__texto{ font-style:italic; font-size:clamp(1.25rem,5.4vw,1.5rem); line-height:1.55; }
.dedicatoria__firma{ font-family:var(--f-display); font-style:italic; font-weight:500; font-size:1.2rem; color:var(--marca); margin-top:.3rem; }

/* bloques marfil, con filete doble de olivo */
.seccion.alterna{
  position:relative;
  background:var(--grano), var(--papel-hondo);
  padding-top:4rem; padding-bottom:4rem;
}
.seccion.alterna::before,.seccion.alterna::after{
  content:""; position:absolute; left:8%; right:8%; height:4px;
  border-top:1px solid var(--marca-claro); border-bottom:1px solid rgba(140,146,72,.4);
}
.seccion.alterna::before{ top:.9rem; } .seccion.alterna::after{ bottom:.9rem; }
.seccion.cuenta::before,.seccion.cuenta::after,
.seccion.rsvp::before,.seccion.rsvp::after,
#plan::before,#plan::after{ display:none; }

/* los detalles */
.tarjetas{ gap:.8rem; }
.tarjeta{
  background:#FDFCF9; border:1px solid rgba(140,146,72,.55); border-radius:2px;
  outline:1px solid rgba(140,146,72,.3); outline-offset:-6px;
  box-shadow:var(--sombra);
  padding:1.5rem .8rem 1.3rem;
}
.tarjeta__icono{ color:var(--vino); width:38px; height:38px; }
.tarjeta__icono svg{ stroke-width:1.6; }
.tarjeta b{ font-weight:600; font-size:1.22rem; }
.tarjeta small{ font-size:.82rem; }

/* la galería: polaroids sobre la mesa */
.galeria__grid{ gap:1.1rem .9rem; }
.foto img{
  border:0; border-radius:0;
  padding:7px 7px 30px; background:#FDFCF9;
  box-shadow:0 16px 26px -16px rgba(40,30,20,.6), 0 0 0 1px rgba(59,46,42,.06);
  filter:grayscale(1) contrast(1.05);
}
.galeria__grid .foto:nth-child(odd) img{ transform:rotate(-1.4deg); }
.galeria__grid .foto:nth-child(even) img{ transform:rotate(1.6deg); }
.galeria__grid .foto--ancha img{ transform:rotate(-.6deg); }
.foto__hueco{ border:1px dashed var(--marca-claro); background:#FDFCF9; border-radius:0; }

/* el plan: bloque olivo */
#plan{ background:var(--grano-claro), var(--olivo-hondo); color:var(--papel); }
#plan .etiqueta{ color:#E0E4B4; }
#plan .titulo{ color:#fff; text-shadow:var(--eco); }
#plan .linea::before{ width:1px; background:rgba(244,239,228,.55); }
#plan .linea__paso::before{ width:11px; height:11px; left:-5px; top:1.25rem; border:1px solid var(--crema); background:var(--olivo-hondo); border-radius:50%; }
#plan .linea__paso.destaca::before{ background:var(--crema); }
#plan .linea__hora{ color:#fff; font-size:1.25rem; font-weight:500; }
#plan .linea__que b{ font-size:1.28rem; font-weight:600; }
#plan .linea__que small{ color:#EEF0D3; font-size:.9rem; }

.lugares__dir{ font-family:var(--f-display); font-style:italic; font-size:1.15rem; color:var(--tinta); }
.lugares__hora{ font-weight:500; letter-spacing:.06em; }
.mapa{ border:8px solid #FDFCF9; border-radius:0; box-shadow:0 0 0 1px rgba(140,146,72,.45), var(--sombra); }
.parrafo{ font-family:var(--f-display); font-size:1.22rem; line-height:1.5; }
.parrafo--chico{ font-family:var(--f-display); font-style:italic; font-size:1.06rem; }
.notas__lista{ margin-top:1.3rem; }
.notas__lista li{ background:#FDFCF9; border-left:3px solid var(--vino); border-radius:0; font-size:.95rem; }

/* dudas: renglones, no cajas */
.faq__item{ background:none; box-shadow:none; border-radius:0; border-bottom:1px solid rgba(140,146,72,.5); }
.faq__item summary{ font-size:1.22rem; font-weight:500; padding-left:.2rem; }
.faq__item summary::after{ color:var(--vino); font-weight:400; }
.faq__item p{ padding-left:.2rem; font-size:.95rem; }

/* botones: formales, vino */
.boton{
  border-radius:2px; box-shadow:none;
  font-family:var(--f-texto); font-weight:500; letter-spacing:.2em; text-transform:uppercase; font-size:.8rem;
  padding:1.05rem 1.6rem;
  background:var(--vino); color:var(--crema);
}
.boton:active{ transform:translateY(2px); box-shadow:none; }
.boton--grande{ font-size:.84rem; }
.boton--linea{ background:transparent; border:1px solid var(--vino); color:var(--vino); }

/* confirmar: bloque olivo, campos en olivo claro, como en la referencia */
.seccion.rsvp{ background:var(--grano-claro), var(--olivo-hondo); color:var(--papel); }
.rsvp .etiqueta{ color:#E0E4B4; }
.rsvp .titulo{ color:#fff; text-shadow:var(--eco); }
.rsvp__intro{ color:var(--papel); font-family:var(--f-display); font-size:1.15rem; }
.formulario{ background:none; box-shadow:none; border-radius:0; padding:0; }
.formulario__quien{ color:var(--papel); }
.formulario__quien b{ color:#fff; }
.campo > span{ font-family:var(--f-display); font-style:italic; font-weight:500; font-size:1.1rem; color:#fff; }
.campo > span small{ color:#EEF0D3; }
.campo select,.campo textarea,.campo input{
  border:1px solid rgba(244,239,228,.5); border-radius:2px;
  background:var(--olivo-claro); color:#2A2A14;
}
.campo textarea::placeholder{ color:#4A4D25; }
.campo select:focus,.campo textarea:focus,.campo input:focus{ border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.3); }
.campo__ayuda,.formulario__nota{ color:#EEF0D3; }

/* el pie: vino */
.pie{ background:var(--grano-claro), var(--vino); padding-top:3.8rem; }
.pie__nombre{ font-family:var(--f-letra); font-weight:400; font-size:3.5rem; line-height:1.1; color:#fff; text-shadow:var(--eco); }
.pie__fecha{ color:var(--arena); margin-top:1.2rem; }

@media (prefers-reduced-motion:reduce){
  .carta.visible .c-flores--a{ animation:none; }
}


/* ══════════════════════════════════════════════════════════════════════
   LA INVITACIÓN PARA IMPRIMIR (/boda-olivo/impresa/) — la misma mesa, en papel
   Frente: papel con grano, flores en dos esquinas, la ramita y los nombres en
   letra de pluma color vino. Reverso: olivo, con el sello de lacre y el código
   que abre la invitación digital. (Las medidas van en --mm: nucleo/impresa.css.)
   Contraste: los mismos pares ya medidos arriba (tinta y vino sobre papel,
   papel sobre olivo 6.0).
   ══════════════════════════════════════════════════════════════════════ */
body.imprenta{ background:var(--grano), var(--papel-hondo); }
.imprenta .cara--frente{ background:var(--grano), var(--papel); }
.imprenta .cara--frente::after{ border-color:var(--olivo-claro); }
.imprenta .ramita{ width:calc(var(--mm) * 24); margin:0 0 calc(var(--mm) * 3.5); color:var(--olivo-hondo); }
.imprenta .imp__nombre{ font-family:var(--f-letra); font-weight:400; font-size:calc(var(--mm) * 24); line-height:.84; color:var(--vino); margin:calc(var(--mm) * 8) 0 calc(var(--mm) * 7); }
.imprenta .imp__nombre .amp{ display:inline; font-family:var(--f-display); font-style:italic; font-size:.4em; color:var(--olivo-hondo); }
.imp__flor{ position:absolute; z-index:1; height:auto; pointer-events:none; }
.imp__flor--a{ left:calc(var(--mm) * -21); top:calc(var(--mm) * -23); width:calc(var(--mm) * 62); transform:rotate(166deg); }      /* de cabeza: así la sombra que trae la foto queda fuera de la tarjeta */
.imp__flor--b{ right:calc(var(--mm) * -17); bottom:calc(var(--mm) * -16); width:calc(var(--mm) * 52); transform:rotate(12deg); }
.imprenta .cara--reverso{ background:var(--grano-claro), var(--olivo-hondo); }
.imprenta .imp__mono{ display:grid; place-items:center; width:calc(var(--mm) * 30); height:calc(var(--mm) * 30); border-radius:50%; background:radial-gradient(circle at 36% 30%, #A2384A 0%, #6B1626 46%, #3A0811 100%); box-shadow:0 calc(var(--mm) * 1) calc(var(--mm) * 2.5) rgba(0,0,0,.35), inset 0 0 0 calc(var(--mm) * 1.6) rgba(46,6,13,.35); font-size:calc(var(--mm) * 10.5); color:#F0C3CA; }
.imp__flor--c{ right:calc(var(--mm) * -5); bottom:calc(var(--mm) * -24); width:calc(var(--mm) * 34); transform:rotate(14deg); }