/* ==========================================================================
   TEMA: BODA · NOCHE & ORO   —  dirección de arte "GALA ART DÉCO"
   Creada el 2 de octubre de 2026.

   LA IDEA: una gala de noche, años veinte. Mármol negro con vetas de oro,
   abanicos y rayos déco en las esquinas, tipografía fina. Se abre como las
   PUERTAS de un salón: se toca el medallón y las dos hojas se deslizan.
     · marmol.webp → el mármol negro (puertas, portada y bloques)
   Es la hermana de noche de "Mármol & Oro": aquella es luz y relieve,
   esta es negro, oro y brillo.

   TEORÍA DEL COLOR: negro (elegancia, lujo) con oro como único acento;
   el marfil es para leer. 60 negro · 30 negro mármol · 10 oro.

   CONTRASTE MEDIDO (fórmula WCAG):
     sobre negro    #0D0D0F → marfil 17.0 · suave 9.1 · oro 9.4 · oro hondo 6.2
     sobre el bloque #16161A → marfil 15.8 · suave 8.5 · oro 8.7 · oro hondo 5.8
     negro sobre el botón de oro #D9B86C → 9.9
   ========================================================================== */
:root{
  --papel:#0D0D0F;  --papel-hondo:#16161A;
  --tinta:#F4EFE6;  --tinta-suave:#B9B1A3;
  --marca:#D4AF6A;  --marca-claro:#B08D45;
  --acento:#D9B86C; --acento-hondo:#A8843A;
  --hilo:rgba(176,141,69,.5);
  --f-display:"Playfair Display", Georgia, serif;
  --f-texto:"Jost", system-ui, sans-serif;
  --radio:0px;
  --sombra:0 14px 30px -18px rgba(0,0,0,.9);
  --sombra-alta:0 24px 50px -24px #000;

  --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 .83 0 0 0 0 .69 0 0 0 0 .42 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='.1'/%3E%3C/svg%3E");
  --abanico-ai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='' fill='none' stroke='%23C9A14E' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M30 0A30 30 0 0 1 0 30M52 0A52 52 0 0 1 0 52M58 0A58 58 0 0 1 0 58' /%3E%3Cpath d='M30 0L92 0M29.4 5.9L76.5 15.2M27.7 11.5L85 35.2M24.9 16.7L64.9 43.3M21.2 21.2L65.1 65.1M16.7 24.9L43.3 64.9M11.5 27.7L35.2 85M5.9 29.4L15.2 76.5M0 30L0 92'/%3E%3Cpath d='M96 0A96 96 0 0 1 0 96' stroke-opacity='.5'/%3E%3C/g%3E%3C/svg%3E");  --abanico-ad:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate(100,0) scale(-1,1)' fill='none' stroke='%23C9A14E' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M30 0A30 30 0 0 1 0 30M52 0A52 52 0 0 1 0 52M58 0A58 58 0 0 1 0 58' /%3E%3Cpath d='M30 0L92 0M29.4 5.9L76.5 15.2M27.7 11.5L85 35.2M24.9 16.7L64.9 43.3M21.2 21.2L65.1 65.1M16.7 24.9L43.3 64.9M11.5 27.7L35.2 85M5.9 29.4L15.2 76.5M0 30L0 92'/%3E%3Cpath d='M96 0A96 96 0 0 1 0 96' stroke-opacity='.5'/%3E%3C/g%3E%3C/svg%3E");  --abanico-bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate(0,100) scale(1,-1)' fill='none' stroke='%23C9A14E' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M30 0A30 30 0 0 1 0 30M52 0A52 52 0 0 1 0 52M58 0A58 58 0 0 1 0 58' /%3E%3Cpath d='M30 0L92 0M29.4 5.9L76.5 15.2M27.7 11.5L85 35.2M24.9 16.7L64.9 43.3M21.2 21.2L65.1 65.1M16.7 24.9L43.3 64.9M11.5 27.7L35.2 85M5.9 29.4L15.2 76.5M0 30L0 92'/%3E%3Cpath d='M96 0A96 96 0 0 1 0 96' stroke-opacity='.5'/%3E%3C/g%3E%3C/svg%3E");  --abanico-bd:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate(100,100) scale(-1,-1)' fill='none' stroke='%23C9A14E' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M30 0A30 30 0 0 1 0 30M52 0A52 52 0 0 1 0 52M58 0A58 58 0 0 1 0 58' /%3E%3Cpath d='M30 0L92 0M29.4 5.9L76.5 15.2M27.7 11.5L85 35.2M24.9 16.7L64.9 43.3M21.2 21.2L65.1 65.1M16.7 24.9L43.3 64.9M11.5 27.7L35.2 85M5.9 29.4L15.2 76.5M0 30L0 92'/%3E%3Cpath d='M96 0A96 96 0 0 1 0 96' stroke-opacity='.5'/%3E%3C/g%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='%23C9A14E' stroke-width='1' stroke-linecap='square'%3E%3Cpath d='M2 8H58M112 8H168M22 4.5H62M108 4.5H148M22 11.5H62M108 11.5H148'/%3E%3Cpath d='M85 1.5l6.5 6.5-6.5 6.5-6.5-6.5z'/%3E%3Cpath d='M85 5l3 3-3 3-3-3z' fill='%23C9A14E'/%3E%3Cpath d='M70 8h5M95 8h5'/%3E%3C/g%3E%3C/svg%3E");
  --oro-hoja:linear-gradient(100deg, #B08D45 0%, #F3DFA8 28%, #C9A14E 50%, #F6E6B8 72%, #B08D45 100%);
  --marmol:linear-gradient(rgba(13,13,15,.45), rgba(13,13,15,.45)), url("marmol.webp") center/cover no-repeat;
}

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

.etiqueta{ font-family:"Poiret One", var(--f-texto); font-weight:400; font-size:.8rem; letter-spacing:.42em; color:var(--marca); }
.titulo{
  font-family:"Poiret One", var(--f-display); font-weight:400;
  text-transform:uppercase; letter-spacing:.16em;
  font-size:clamp(1.5rem,6.6vw,2.1rem); color:var(--tinta);
  padding-bottom:1.3rem; margin-bottom:1.6rem;
  background:var(--ornamento) no-repeat center bottom/170px 16px;
}

/* Los nombres: cursiva en hoja de oro */
.portada__nombre,.pie__nombre{ font-style:italic; font-weight:500; }
.portada__nombre{
  font-size:clamp(2.6rem,13vw,4.3rem); line-height:1.08;
  background:var(--oro-hoja); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  padding:.05em .1em .12em;
}
.portada__nombre .amp{
  display:block; font-family:"Poiret One", var(--f-display); font-style:normal; font-size:.42em;
  margin:.1em 0;
}


/* ══════════════════════════════════════════════════════════════════════
   LA ENTRADA — las dos puertas del salón
   ══════════════════════════════════════════════════════════════════════ */
.entrada{
  overflow:hidden; background:transparent;
  /* el núcleo desvanece la entrada a los 750 ms: aquí se espera a que las puertas terminen */
  transition:opacity .45s ease .45s, visibility 0s linear .9s;
}
.puertas{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.puertas i{
  position:absolute; top:0; bottom:0; width:50.1%;
  background:var(--marmol), var(--papel);
  transition:transform 1.05s cubic-bezier(.65,0,.2,1);
}
.puertas i::before{                 /* el doble filete de cada hoja */
  content:""; position:absolute; inset:14px; border:1px solid var(--marca-claro);
  outline:1px solid var(--hilo); outline-offset:-7px;
}
.puertas i::after{ content:""; position:absolute; inset:14px; background-repeat:no-repeat; background-size:92px 92px; }
.puertas i:first-child{ left:0; border-right:1px solid var(--marca); }
.puertas i:first-child::before{ border-right:0; right:0; }
.puertas i:first-child::after{ background-image:var(--abanico-ai), var(--abanico-bi); background-position:left top, left bottom; }
.puertas i:last-child{ right:0; border-left:1px solid var(--marca); }
.puertas i:last-child::before{ border-left:0; left:0; }
.puertas i:last-child::after{ background-image:var(--abanico-ad), var(--abanico-bd); background-position:right top, right bottom; }
body.revelado .puertas i:first-child{ transform:translateX(-101%); }
body.revelado .puertas i:last-child{ transform:translateX(101%); }
body.revelado .entrada > :not(.puertas):not(.gancho){ opacity:0; transition:opacity .3s ease; }

.entrada__para{ font-family:"Poiret One", var(--f-texto); color:var(--marca); letter-spacing:.46em; font-size:.8rem; }
.entrada__nombre{
  font-style:italic; font-weight:500; color:var(--tinta);
  font-size:clamp(1.6rem,7.4vw,2.2rem); margin:.2rem 0 1.5rem;
}
.gancho.medallon{ width:min(50vw,196px); animation:brillar 3.4s ease-in-out infinite; }
.gancho.medallon .gancho__svg{ filter:drop-shadow(0 0 22px rgba(212,175,106,.42)) drop-shadow(0 10px 14px rgba(0,0,0,.8)); }
@keyframes brillar{ 0%,100%{ transform:scale(1); filter:brightness(1); } 50%{ transform:scale(1.035); filter:brightness(1.18); } }
/* Al tocarlo gira como llave y se desvanece */
.gancho.medallon.abre{ animation:girarLlave .9s cubic-bezier(.5,0,.3,1) forwards; }
@keyframes girarLlave{
  0%  { transform:scale(1) rotate(0); opacity:1; }
  45% { transform:scale(1.1) rotate(90deg); opacity:1; }
  100%{ transform:scale(1.5) rotate(160deg); opacity:0; }
}
.entrada__pista{
  font-family:"Poiret One", var(--f-texto); font-weight:400; font-size:.82rem;
  letter-spacing:.38em; text-transform:uppercase; color:var(--marca);
  border-top:1px solid var(--hilo); border-bottom:1px solid var(--hilo);
  padding:.55rem 1.2rem; margin-top:1.6rem;
}


/* ══════════════════════════════════════════════════════════════════════
   LA PORTADA — mármol negro con marco y abanicos déco
   ══════════════════════════════════════════════════════════════════════ */
.portada{
  isolation:isolate;
  background:
    radial-gradient(60% 34% at 50% 46%, rgba(212,175,106,.13), rgba(212,175,106,0) 70%),
    var(--marmol), var(--papel);
}
.portada::before{                   /* el doble filete */
  content:""; position:absolute; inset:14px; z-index:-1; pointer-events:none;
  border:1px solid var(--marca-claro);
  outline:1px solid var(--hilo); outline-offset:-7px;
}
.portada::after{                    /* los cuatro abanicos */
  content:""; position:absolute; inset:14px; z-index:-1; pointer-events:none;
  background:var(--abanico-ai) left top/92px no-repeat, var(--abanico-ad) right top/92px no-repeat,
             var(--abanico-bi) left bottom/92px no-repeat, var(--abanico-bd) right bottom/92px no-repeat;
}
.portada__arriba{
  font-family:"Poiret One", var(--f-texto); font-size:.84rem; letter-spacing:.5em;
  text-transform:uppercase; color:var(--marca); margin-bottom:.9rem;
}
.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:.6rem; position:relative;
}
.portada__fecha::before, .portada__fecha::after{ content:""; position:absolute; left:10%; right:10%; height:1px; background:var(--hilo); }
.portada__fecha::before{ top:-5px; } .portada__fecha::after{ bottom:-5px; }
.portada__fecha .fcol{ color:var(--tinta); letter-spacing:.26em; font-size:.72rem; }
.portada__fecha .fnum{ font-family:"Poiret One", var(--f-display); font-weight:400; font-size:3.2rem; color:var(--marca); }
.portada__lugar{ margin-top:1.4rem; font-family:"Poiret One", var(--f-texto); letter-spacing:.14em; font-size:1rem; color:var(--tinta); }
.portada__flecha{ bottom:2.6rem; }
.portada__flecha span{ border-color:var(--marca); border-width:1.5px; }


/* ══════════════════════════════════════════════════════════════════════
   LAS SECCIONES
   ══════════════════════════════════════════════════════════════════════ */
.saludo__nombre{ font-style:italic; font-weight:500; color:var(--tinta); }
.saludo__pases{
  background:transparent; color:var(--marca);
  border:1px solid var(--marca-claro); border-radius:0;
  font-family:"Poiret One", var(--f-texto); font-weight:400; letter-spacing:.24em; text-transform:uppercase; font-size:.8rem;
  padding:.5rem 1.2rem;
}

/* Bloques de mármol negro, con filete de oro arriba y abajo */
.seccion.alterna, .momento{ position:relative; background:var(--marmol), var(--papel-hondo); }
.seccion.alterna{ padding-top:4.2rem; padding-bottom:4.2rem; }
.seccion.alterna::before, .seccion.alterna::after{
  content:""; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--marca-claro) 20%, var(--marca) 50%, var(--marca-claro) 80%, transparent);
}
.seccion.alterna::before{ top:0; } .seccion.alterna::after{ bottom:0; }
.seccion.alterna > *{ position:relative; }

/* La foto grande: doble marco de oro, con un resplandor detrás */
.momento{
  padding-top:3rem; padding-bottom:3.6rem;
  background:radial-gradient(70% 50% at 50% 50%, rgba(212,175,106,.16), rgba(212,175,106,0) 70%), var(--marmol), var(--papel-hondo);
}
.momento__foto, .foto img{
  border:7px solid #0D0D0F; border-radius:0;
  outline:1px solid var(--marca-claro); outline-offset:4px;
  box-shadow:0 0 0 1px var(--marca), 0 30px 60px -30px #000, 0 0 70px rgba(212,175,106,.1);
}
.foto img{ border-width:5px; outline-offset:3px; }
.galeria__grid{ gap:1.15rem; padding:4px; }
.foto__hueco{ border:1px dashed var(--marca-claro); background:#131316; border-radius:0; }

/* Tarjetas: negro con filete de oro y una línea interior */
.cuenta__caja,
.tarjeta,
.notas__lista li,
.faq__item,
.formulario{
  background:#121215;
  border:1px solid var(--marca-claro);
  border-radius:0;
  box-shadow:var(--sombra);
}
.cuenta__caja,.tarjeta{ outline:1px solid var(--hilo); outline-offset:-6px; }
.cuenta__caja{ padding:1rem .2rem .8rem; }
.cuenta__caja .n{ font-family:"Poiret One", var(--f-display); font-weight:400; color:var(--marca); font-size:clamp(1.9rem,8.5vw,2.5rem); }
.cuenta__caja .l{ letter-spacing:.2em; font-size:.6rem; color:var(--tinta-suave); }
.tarjeta{ padding:1.5rem .8rem 1.3rem; }
.tarjeta__icono{ color:var(--marca); width:40px; height:40px; }
.tarjeta__icono svg{ stroke-width:1.5; }
.tarjeta b{ font-family:"Poiret One", var(--f-display); font-weight:400; letter-spacing:.08em; text-transform:uppercase; font-size:.98rem; color:var(--tinta); }
.notas__lista li{ border-left:3px solid var(--marca); }
.faq__item summary{ font-weight:500; font-size:1.02rem; }
.faq__item summary::after{ color:var(--marca); font-weight:400; }

.dedicatoria__texto{
  font-style:italic; font-weight:400; font-size:clamp(1.2rem,5.2vw,1.5rem); line-height:1.55;
  position:relative; padding:1.7rem .4rem 0;
}
.dedicatoria__texto::before{
  content:"“"; position:absolute; top:-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:"Poiret One", var(--f-display); font-weight:400; letter-spacing:.12em; font-size:1.05rem; color:var(--marca); }

.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-hondo); transform:rotate(45deg); border-radius:0; }
.linea__paso.destaca::before{ background:var(--marca); border-color:var(--marca); box-shadow:0 0 12px var(--marca); }
.linea__hora{ font-family:"Poiret One", var(--f-display); font-weight:400; color:var(--marca); font-size:1.15rem; }
.linea__que b{ font-weight:500; font-size:1.12rem; }

.mapa{ border:6px solid #0D0D0F; border-radius:0; outline:1px solid var(--marca-claro); outline-offset:3px; box-shadow:0 0 0 1px var(--marca), var(--sombra); }
.mapa iframe{ filter:grayscale(.55) contrast(1.05) brightness(.92); }

/* Botones: oro con letra negra, de esquina recta */
.boton{
  border-radius:0; box-shadow:none; color:#111;
  font-family:var(--f-texto); font-weight:600; letter-spacing:.22em; text-transform:uppercase; font-size:.82rem;
  padding:1.05rem 1.6rem;
  background:linear-gradient(180deg, #E6C983 0%, #D9B86C 55%, #BF9A48 100%);
}
.boton:active{ transform:translateY(2px); box-shadow:none; }
.boton--linea{ background:transparent; border:1px solid var(--marca); color:var(--marca); }

/* El formulario, en negro */
.formulario{ padding:1.7rem 1.4rem; outline:1px solid var(--hilo); outline-offset:-7px; }
.campo select,.campo textarea,.campo input{ background:#1B1B1F; color:var(--tinta); border:1px solid rgba(176,141,69,.6); border-radius:0; }
.campo select option{ background:#16161A; color:#F4EFE6; }
.campo textarea::placeholder{ color:#8F887C; }

/* El pie: rayos de oro que suben desde abajo */
.pie{
  overflow:hidden;
  background:
    repeating-conic-gradient(from 270deg at 50% 100%, rgba(212,175,106,.085) 0 4deg, transparent 4deg 8deg),
    linear-gradient(180deg, #0D0D0F 0%, #121013 100%);
  border-top:1px solid var(--marca-claro);
}
.pie__nombre{ font-size:2.2rem; color:var(--marca); }

.portada__lugar{ font-size:.9rem; letter-spacing:.08em; }
/* El botón de "Ver todos los temas" trae fondo blanco y toma el color de la tinta: aquí la tinta es marfil */
.volver{ background:#16161A; color:var(--tinta); border:1px solid var(--marca-claro); }


/* ORO VIVO (nucleo/detalles.js): el foil de los nombres y de la fecha se mueve con el celular o con el scroll */
.portada__nombre, .pie__nombre{
  background:var(--oro-hoja) calc(50% + var(--luz, 0) * 46%) 50% / 240% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.portada__fecha .fnum, .cuenta__caja .n{
  background:var(--oro-hoja) calc(50% + var(--luz, 0) * 46%) 50% / 240% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
/* PAPEL VEGETAL sobre la foto: se levanta al llegar */
.momento{ --velo:1; }
.momento::after{
  content:"S & A"; position:absolute; left:50%; top:3rem; bottom:3.6rem;
  width:min(86%,380px);
  display:grid; place-items:center;
  font-family:"Poiret One", var(--f-display); font-size:2.4rem; letter-spacing:.2em; color:rgba(244,239,230,.8);
  background:linear-gradient(160deg, rgba(40,40,46,.78), rgba(18,18,21,.62));
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(212,175,106,.7), inset 0 0 0 7px rgba(13,13,15,.3), inset 0 0 0 8px rgba(212,175,106,.35);
  transform-origin:50% 0;
  transform:translateX(-50%) translateY(calc(var(--velo) * -62%)) rotate(calc(var(--velo) * 6deg));
  opacity:calc(1 - var(--velo) * 1.15);
  pointer-events:none;
}