/* ==========================================================================
   TEMA: BODA · MÁRMOL & ORO   —  dirección de arte "CARTA EN MÁRMOL"
   Rediseñada el 2 de octubre de 2026.

   LA IDEA: una invitación de papelería fina. Papel de algodón grueso con
   RELIEVE EN SECO (flores blancas sobre blanco), mármol cálido y un hilo
   de oro viejo. Se abre como un sobre de verdad: se rompe el lacre y la
   solapa se levanta.
     · relieve.webp  → el arco de flores en relieve (entrada y portada)
     · marmol.webp   → los bloques de mármol
   Hermana de la de XV (Marfil & Oro), pero más sobria: aquí no hay color,
   solo luz, sombra y oro.

   TEORÍA DEL COLOR: monocromático cálido (blancos y marfiles) con un solo
   acento, oro viejo. El blanco dice ceremonia; el oro, celebración.
   60 blanco cálido · 30 mármol y marfil · 10 oro (líneas y el botón).

   CONTRASTE MEDIDO (fórmula WCAG):
     sobre papel   #FBF8F3 → tinta 11.6 · suave 5.7 · oro de texto 5.9
     sobre marfil  #F1EADF → tinta 10.3 · suave 5.1 · oro de texto 5.2
     blanco sobre el botón de oro #7A5C24 → 6.2
     sobre el pie  #3A342C → marfil 10.8 · oro claro #D9BE85 6.8
     El nombre en "hoja de oro" es texto MUY grande (≥ 3:1 exigido): su
     tono más claro, #A8842F, da 3.3 sobre el papel.
   ========================================================================== */
:root{
  --papel:#FBF8F3;  --papel-hondo:#F1EADF;
  --tinta:#3A342C;  --tinta-suave:#6B6154;
  --marca:#7A5C24;  --marca-claro:#B8975A;
  --acento:#7A5C24; --acento-hondo:#5E4619;
  --hilo:rgba(184,151,90,.55);                       /* la línea fina de oro */
  --f-display:"Cormorant Garamond", Georgia, serif;
  --f-texto:"Jost", system-ui, sans-serif;
  --radio:3px;
  --sombra:0 12px 26px -16px rgba(90,70,40,.45);
  --sombra-alta:0 22px 44px -22px rgba(90,70,40,.55);

  --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='.2'/%3E%3C/svg%3E");
  --ornamento:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 16'%3E%3Cg fill='none' stroke='%23B8975A' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M2 8H64M106 8H168'/%3E%3Cpath d='M85 2.5l5.5 5.5-5.5 5.5-5.5-5.5z'/%3E%3Cpath d='M70 8q4-5 8 0q-4 5-8 0zM92 8q4-5 8 0q-4 5-8 0z'/%3E%3C/g%3E%3Ccircle cx='85' cy='8' r='1.3' fill='%23B8975A'/%3E%3C/svg%3E");
  --ornamento-claro:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 16'%3E%3Cg fill='none' stroke='%23D9BE85' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M2 8H64M106 8H168'/%3E%3Cpath d='M85 2.5l5.5 5.5-5.5 5.5-5.5-5.5z'/%3E%3Cpath d='M70 8q4-5 8 0q-4 5-8 0zM92 8q4-5 8 0q-4 5-8 0z'/%3E%3C/g%3E%3Ccircle cx='85' cy='8' r='1.3' fill='%23D9BE85'/%3E%3C/svg%3E");
  --solapa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='p' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FFFDF9'/%3E%3Cstop offset='1' stop-color='%23F3ECDF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='0,0 100,0 50,100' fill='url(%23p)'/%3E%3Cpolyline points='4,1.2 50,93.5 96,1.2' fill='none' stroke='%23B8975A' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cpolyline points='7.5,1.2 50,88 92.5,1.2' fill='none' stroke='%23B8975A' stroke-opacity='.45' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --sobre:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='none' vector-effect='non-scaling-stroke'%3E%3Cpolyline points='0,100 50,56 100,100' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke' transform='translate(0,-.25)'/%3E%3Cpolyline points='0,100 50,56 100,100' stroke='%23CDBFA6' stroke-opacity='.75' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E");
  --oro-hoja:linear-gradient(100deg, #6E5320 0%, #A8842F 30%, #7A5C24 52%, #A8842F 74%, #6E5320 100%);
}

body{ background:var(--grano), var(--papel); }

.titulo,.dedicatoria__texto{ font-weight:500; }
.etiqueta{ color:var(--marca); letter-spacing:.34em; }

/* El nombre de los novios: caligrafía en hoja de oro */
.portada__nombre,.pie__nombre{ font-family:"Pinyon Script", var(--f-display); font-weight:400; }
.portada__nombre{
  font-size:clamp(3rem,15vw,5rem); line-height:1.02;
  background:var(--oro-hoja); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  padding:.1em .15em .18em;                 /* la caligrafía se sale de su caja: que no se corte */
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.9));
}
.portada__nombre .amp{
  display:block; font-family:var(--f-display); font-style:italic; font-size:.36em;
  margin:-.1em 0 -.05em;
}


/* ══════════════════════════════════════════════════════════════════════
   LA ENTRADA — un sobre de papel grueso, con solapa y lacre
   ══════════════════════════════════════════════════════════════════════ */
.entrada{
  overflow:hidden;
  justify-content:flex-end; padding-bottom:13dvh;
  background:var(--grano), var(--sobre) center/100% 100% no-repeat, linear-gradient(180deg, #FDFBF7 0%, #F4EEE3 100%);
}
.sobre{ position:absolute; inset:0; pointer-events:none; perspective:1400px; }
.sobre__solapa{
  position:absolute; left:0; right:0; top:0; height:50dvh;
  background:var(--solapa) center/100% 100% no-repeat;
  filter:drop-shadow(0 7px 9px rgba(90,70,40,.26));
  transform-origin:50% 0;
  transition:transform 1s cubic-bezier(.45,0,.2,1);
}
/* Al romper el lacre, la solapa se levanta */
body.revelado .sobre__solapa{ transform:rotateX(176deg); }

.gancho.lacre{
  position:absolute; top:calc(50dvh - 88px); left:50%;
  width:150px; margin-left:-75px;
  animation:respirar 3.6s ease-in-out infinite;
}
.gancho.lacre .gancho__svg{ filter:drop-shadow(0 8px 10px rgba(70,50,20,.42)) drop-shadow(0 1px 1px rgba(70,50,20,.5)); }
@keyframes respirar{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.045); } }
/* El lacre se cuartea y se desprende */
.gancho.lacre.abre{ animation:cuartear .85s cubic-bezier(.3,.9,.4,1) forwards; }
@keyframes cuartear{
  0%  { transform:scale(1) rotate(0); opacity:1; }
  20% { transform:scale(1.12) rotate(-4deg); }
  45% { transform:scale(1.04) rotate(3deg); }
  100%{ transform:scale(.5) rotate(-16deg) translateY(60px); opacity:0; }
}
.entrada__para{ color:var(--marca); letter-spacing:.4em; }
.entrada__nombre{
  font-family:"Pinyon Script", var(--f-display); font-weight:400;
  font-size:clamp(2.1rem,9.5vw,3rem); line-height:1.1;
  color:var(--tinta);
  margin:.1rem 0 .7rem;
}
.entrada__pista{
  font-family:var(--f-texto); font-weight:500; font-size:.72rem;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--marca);
  border-top:1px solid var(--hilo); border-bottom:1px solid var(--hilo);
  padding:.5rem 1.1rem; margin-top:.4rem;
}


/* ══════════════════════════════════════════════════════════════════════
   LA PORTADA — el arco de flores en relieve
   ══════════════════════════════════════════════════════════════════════ */
.portada{
  isolation:isolate;
  background:
    radial-gradient(46% 30% at 50% 50%, rgba(251,248,243,.92) 0%, rgba(251,248,243,.6) 60%, rgba(251,248,243,0) 100%),
    linear-gradient(rgba(255,243,220,.3), rgba(255,243,220,.3)),      /* un velo cálido: el papel de la foto tira a gris */
    url("relieve.webp") center/cover no-repeat,
    var(--papel);
}
.portada__arriba{
  font-family:var(--f-texto); font-size:.74rem; font-weight:500;
  letter-spacing:.42em; text-transform:uppercase; color:var(--marca);
  margin-bottom:.6rem;
}
.portada__fecha{
  border-top:1px solid var(--marca-claro); border-bottom:1px solid var(--marca-claro);
  padding:.75rem 1.4rem; gap:1.2rem; margin-top:.4rem;
  position:relative;
}
.portada__fecha::before, .portada__fecha::after{       /* segunda línea, más fina: doble filete */
  content:""; position:absolute; left:8%; right:8%; height:1px; background:var(--hilo);
}
.portada__fecha::before{ top:-5px; } .portada__fecha::after{ bottom:-5px; }
.portada__fecha .fcol{ color:var(--tinta); letter-spacing:.24em; font-size:.72rem; }
.portada__fecha .fnum{ font-family:var(--f-display); font-weight:500; font-size:3.1rem; color:var(--marca); }
.portada__lugar{ margin-top:1.3rem; font-style:italic; font-family:var(--f-display); font-size:1.12rem; color:var(--tinta); }
.portada__flecha span{ border-color:var(--marca-claro); border-width:1.5px; }


/* ══════════════════════════════════════════════════════════════════════
   LAS SECCIONES
   ══════════════════════════════════════════════════════════════════════ */
.titulo{
  font-size:clamp(1.9rem,8vw,2.6rem); color:var(--tinta);
  padding-bottom:1.25rem; margin-bottom:1.6rem;
  background:var(--ornamento) no-repeat center bottom/170px 16px;
}
.saludo__nombre{ font-family:"Pinyon Script", var(--f-display); font-weight:400; font-size:clamp(2.2rem,10vw,3rem); line-height:1.15; }
.saludo__pases{
  background:transparent; color:var(--marca);
  border:1px solid var(--marca-claro); border-radius:2px;
  font-weight:500; letter-spacing:.18em; text-transform:uppercase; font-size:.72rem;
  padding:.5rem 1.2rem;
}

/* Bloques de mármol */
.seccion.alterna, .momento{
  position:relative;
  background:
    linear-gradient(180deg, rgba(251,248,243,.5), rgba(251,248,243,.22)),
    url("marmol.webp") center/cover no-repeat,
    var(--papel-hondo);
}
.seccion.alterna{ padding-top:4.2rem; padding-bottom:4.2rem; }
.seccion.alterna::before, .seccion.alterna::after{      /* filete de oro arriba y abajo del bloque */
  content:""; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--marca-claro) 22%, var(--marca-claro) 78%, transparent);
}
.seccion.alterna::before{ top:0; } .seccion.alterna::after{ bottom:0; }
.seccion.alterna > *{ position:relative; }

/* La foto grande: una impresión con paspartú, sobre mármol */
.momento{ padding-top:3rem; padding-bottom:3.4rem; }
.momento__foto{
  border:14px solid #FFFEFB; border-radius:2px;
  outline:1px solid var(--marca-claro); outline-offset:-8px;      /* el filete de oro dentro del paspartú */
  box-shadow:
    0 0 0 1px rgba(184,151,90,.35),
    inset 0 0 0 1px rgba(120,100,70,.2),
    0 30px 50px -26px rgba(70,50,20,.6);
}

/* Tarjetas de papel grueso: canto en relieve y filete de oro */
.cuenta__caja,
.tarjeta,
.notas__lista li,
.faq__item,
.formulario{
  background:#FFFDF9;
  border:1px solid rgba(184,151,90,.5);
  border-radius:3px;
  box-shadow:
    inset 0 1px 0 #fff, inset 1px 0 0 #fff,
    inset 0 -1px 0 rgba(120,100,70,.16), inset -1px 0 0 rgba(120,100,70,.1),
    var(--sombra);
}
.cuenta__caja,.tarjeta{ outline:1px solid var(--hilo); outline-offset:-6px; }
.cuenta__caja{ border-width:1px; padding:1rem .2rem .8rem; }
.cuenta__caja .n{ font-family:var(--f-display); font-weight:500; color:var(--marca); font-size:clamp(1.9rem,8.5vw,2.5rem); }
.cuenta__caja .l{ letter-spacing:.2em; font-size:.6rem; }
.tarjeta{ padding:1.5rem .8rem 1.3rem; }
.tarjeta__icono{ color:var(--marca); width:40px; height:40px; }
.tarjeta__icono svg{ stroke-width:1.6; }
.tarjeta b{ font-weight:600; font-size:1.2rem; }
.notas__lista li{ border-left:3px solid var(--marca-claro); }
.faq__item summary{ font-size:1.14rem; font-weight:500; }
.faq__item summary::after{ color:var(--marca); font-weight:400; }

/* La dedicatoria: cita en cursiva, entre comillas grandes de oro */
.dedicatoria__texto{
  font-style:italic; font-size:clamp(1.3rem,5.6vw,1.6rem); line-height:1.5;
  position:relative; padding:1.6rem .4rem 0;
}
.dedicatoria__texto::before{
  content:"“"; position:absolute; top:-1.1rem; left:50%; transform:translateX(-50%);
  font-family:var(--f-display); font-style:normal; font-size:4.4rem; line-height:1;
  color:var(--marca-claro);
}
.dedicatoria__firma{ font-family:var(--f-display); font-style:italic; font-weight:500; font-size:1.25rem; color:var(--marca); }

/* La galería: impresiones con paspartú */
.foto img{
  border:9px solid #FFFEFB; border-radius:2px;
  outline:1px solid var(--hilo); outline-offset:-5px;
  box-shadow:0 0 0 1px rgba(184,151,90,.3), 0 18px 30px -18px rgba(70,50,20,.55);
}
.foto__hueco{ border:1px dashed var(--marca-claro); background:#FFFDF9; border-radius:2px; }
.galeria__grid{ gap:.9rem; }

/* El itinerario: hilo de oro */
.linea::before{ width:1px; background:var(--marca-claro); }
.linea__paso::before{ width:11px; height:11px; left:-5px; top:1.2rem; border:1px solid var(--marca); background:var(--papel); transform:rotate(45deg); border-radius:0; }
.linea__paso.destaca::before{ background:var(--marca); border-color:var(--marca); }
.linea__hora{ color:var(--marca); font-size:1.2rem; font-weight:500; }
.linea__que b{ font-size:1.25rem; font-weight:600; }
.seccion.alterna .linea__paso::before{ background:#FFFDF9; }

.mapa{ border:10px solid #FFFEFB; border-radius:2px; outline:1px solid var(--hilo); outline-offset:-6px; box-shadow:0 0 0 1px rgba(184,151,90,.3), var(--sombra); }

/* Botones: formales, de esquina recta */
.boton{ border-radius:2px; box-shadow:none; font-family:var(--f-texto); font-weight:500; letter-spacing:.2em; text-transform:uppercase; font-size:.82rem; padding:1.05rem 1.6rem; }
.boton:active{ transform:translateY(2px); box-shadow:none; }
.boton--grande{ font-size:.86rem; }
.boton--linea{ background:transparent; border:1px solid var(--marca); color:var(--marca); }

/* Confirmar */
.formulario{ padding:1.7rem 1.4rem; outline:1px solid var(--hilo); outline-offset:-7px; }
.campo select,.campo textarea,.campo input{ border:1px solid rgba(184,151,90,.55); border-radius:2px; background:#fff; }

/* El pie: carbón cálido con oro */
.pie{
  background:
    var(--ornamento-claro) no-repeat center 2.2rem/180px 17px,
    linear-gradient(180deg, #3A342C 0%, #2B2620 100%);
  padding-top:4.6rem;
}
.pie__nombre{ font-size:2.9rem; color:#D9BE85; }
.pie__fecha{ color:#F6EFE2; }


/* ORO VIVO (nucleo/detalles.js): el oro viejo de los nombres se mueve con el celular o con el scroll */
.portada__nombre, .pie__nombre{
  background-image:linear-gradient(100deg, #6E5320 0%, #B08A34 28%, #7A5C24 50%, #C4A04A 72%, #6E5320 100%);
  background-position:calc(50% + var(--luz, 0) * 46%) 50%; background-size:240% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}