/* ==========================================================================
   TEMA: XV AÑOS · JARDÍN DORADO   —  dirección de arte "LA PELÍCULA DE SUS XV"
   Creada el 3 de octubre de 2026.

   LA IDEA: la invitación empieza como una película. Se toca el medallón,
   revienta una bruma dorada y, al despejarse, la portada YA es un video: la
   quinceañera en su jardín, en cuatro tomas, en cámara lenta, con su nombre
   encima como título de cine. Todo lo demás sale de ese video:
     · el ARCO de piedra del jardín → la forma de la foto, la galería y las tarjetas
     · el verde del seto y el champán del vestido → la paleta
     · la hora dorada → el oro de los filetes

   TEORÍA DEL COLOR (medido en los cuadros del video: seto #353B23, vestido
   #CEB298, follaje #A9A27A): marfil cálido de base (60), verde jardín en los
   bloques fuertes y los botones (30) y oro solo en filetes y detalles (10).
   Verde + oro cálido son análogos-complementarios: el verde descansa la vista
   y hace que el vestido champán resalte.

   CONTRASTE MEDIDO (fórmula WCAG):
     sobre marfil  #FBF5EA → tinta 13.1 · suave 6.4 · oro hondo 5.8 · verde 10.9
     sobre champán #F1E5CF → tinta 11.4 · suave 5.6 · oro hondo 5.0
     sobre verde   #27311D → marfil 12.5 · marfil suave 9.0 · oro claro 8.4 · oro 5.8
     marfil sobre el botón verde #2F3B22 → 10.9
   ========================================================================== */
:root{
  --papel:#FBF5EA;  --papel-hondo:#F1E5CF;
  --tinta:#2A2C20;  --tinta-suave:#5C5A48;
  --marca:#2F3B22;  --marca-claro:#B99655;
  --acento:#7C5A1E; --acento-hondo:#5E4313;
  --verde:#27311D;  --verde-claro:#3A4A2B;
  --oro:#C9A45A;    --oro-claro:#E3C98C;  --marfil-suave:#D8D2BD;
  --hilo:rgba(185,150,85,.55);
  --f-display:"Cormorant Garamond", Georgia, serif;
  --f-texto:"Jost", system-ui, sans-serif;
  --f-firma:"Pinyon Script", "Cormorant Garamond", cursive;
  --radio:16px;
  --sombra:0 14px 30px -20px rgba(39,49,29,.55);
  --sombra-alta:0 28px 56px -28px rgba(27,35,20,.75);

  /* el grano del papel y el de la noche (hechos aquí mismo, no pesan) */
  --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 .55 0 0 0 0 .42 0 0 0 0 .2 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)' opacity='.11'/%3E%3C/svg%3E");
  --grano-verde: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='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .85 0 0 0 0 .6 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)' opacity='.09'/%3E%3C/svg%3E");
  /* la ramita: va debajo de cada título */
  --ramita:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 18'%3E%3Cg fill='none' stroke='%23B99655' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M4 9H70M110 9H176'/%3E%3Cpath d='M90 3.2c3.4 2 3.4 9.600 0 11.600c-3.400-2-3.400-9.600 0-11.600z' fill='%23C9A45A'/%3E%3Cpath d='M78 9c2.600-3.600 6-3.600 8 0c-2 3.600-5.400 3.600-8 0zM94 9c2-3.600 5.400-3.600 8 0c-2.600 3.600-6 3.600-8 0z' fill='%23E3C98C'/%3E%3C/g%3E%3C/svg%3E");
  --oro-hoja:linear-gradient(100deg, #B08D45 0%, #F3DFA8 30%, #C9A14E 52%, #F6E6B8 74%, #B08D45 100%);
}

body{ background:var(--grano), var(--papel); }
.flotantes{ display:none; }

.etiqueta{ font-family:var(--f-texto); font-weight:500; font-size:.7rem; letter-spacing:.36em; color:var(--acento); }
.titulo{
  font-family:var(--f-display); font-style:italic; font-weight:500;
  font-size:clamp(2rem,9vw,2.7rem); line-height:1.1; color:var(--marca);
  padding-bottom:1.5rem; margin:.35rem 0 1.6rem;
  background:var(--ramita) no-repeat center bottom/160px 16px;
}
.parrafo{ font-size:1.04rem; }


/* ══════════════════════════════════════════════════════════════════════
   LA ENTRADA — el jardín de noche, un arco de oro y el medallón
   ══════════════════════════════════════════════════════════════════════ */
.entrada{
  overflow:hidden;
  background:var(--grano-verde), radial-gradient(90% 62% at 50% 40%, #40522F 0%, #27311D 58%, #19200F 100%);
}
.entrada::before, .entrada::after{            /* el arco: dos filetes de oro */
  content:""; position:absolute; pointer-events:none;
  border:1px solid var(--oro); border-bottom:0;
  border-radius:50% 50% 0 0 / 26% 26% 0 0;
}
.entrada::before{ inset:22px 20px -2px; opacity:.85; }
.entrada::after{ inset:32px 30px -2px; opacity:.35; }
.entrada__para{ font-family:var(--f-texto); color:var(--oro-claro); letter-spacing:.44em; font-size:.74rem; }
.entrada__nombre{
  font-family:var(--f-display); font-style:italic; font-weight:500; color:#FBF5EA;
  font-size:clamp(1.7rem,7.6vw,2.3rem); margin:.2rem 0 1.5rem;
}
.gancho.medallon-xv{ width:min(52vw,204px); animation:latir 3.6s ease-in-out infinite; }
.gancho.medallon-xv .gancho__svg{ filter:drop-shadow(0 0 26px rgba(227,201,140,.4)) drop-shadow(0 12px 16px rgba(0,0,0,.55)); }
@keyframes latir{ 0%,100%{ transform:scale(1); filter:brightness(1); } 50%{ transform:scale(1.04); filter:brightness(1.14); } }
.gancho.medallon-xv.abre{ animation:encender .7s cubic-bezier(.3,0,.3,1) forwards; }
@keyframes encender{
  0%  { transform:scale(1); filter:brightness(1); opacity:1; }
  40% { transform:scale(1.12); filter:brightness(1.9); opacity:1; }
  100%{ transform:scale(1.5); filter:brightness(2.6); opacity:0; }
}
.entrada__pista{
  font-family:var(--f-texto); font-weight:500; font-size:.76rem;
  letter-spacing:.36em; text-transform:uppercase; color:var(--oro-claro);
  margin-top:1.7rem;
}
.entrada__marcador{ color:var(--marfil-suave); }
/* el telón de la entrada de película: luz cálida, no blanco frío */
.cine__fondo{ background:radial-gradient(circle at 50% 42%, #FFFDF6 0%, #F8ECCE 55%, #EAD39E 100%); }


/* ══════════════════════════════════════════════════════════════════════
   LA PORTADA — su película, y encima su nombre como título de cine
   ══════════════════════════════════════════════════════════════════════ */
.portada--pelicula{
  isolation:isolate; overflow:hidden;
  justify-content:flex-end;
  padding:0 1.4rem 5.4rem;
  background:var(--verde);
}
.portada__pelicula{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%;
  object-fit:cover; object-position:50% 30%;
  background:var(--verde);
}
.portada__velo{                    /* oscurece abajo (para leer) y un pelo arriba */
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(27,35,20,.34) 0%, rgba(27,35,20,0) 20%, rgba(27,35,20,0) 44%, rgba(27,35,20,.7) 72%, rgba(27,35,20,.95) 100%);
}
.portada--pelicula::before{       /* el marco: un arco fino de oro, como la entrada */
  content:""; position:absolute; inset:14px; z-index:-1; pointer-events:none;
  border:1px solid rgba(227,201,140,.75);
  border-radius:50% 50% 6px 6px / 22% 22% 6px 6px;
}
.portada__arriba{
  position:absolute; top:max(2.6rem, env(safe-area-inset-top)); left:0; right:0;
  font-family:var(--f-texto); font-weight:500; font-size:.72rem; letter-spacing:.5em; text-transform:uppercase;
  color:#FBF5EA; text-shadow:0 1px 10px rgba(20,26,14,.7);
}
.portada__nombre{
  font-family:var(--f-firma); font-weight:400;
  font-size:clamp(4.6rem,25vw,7rem); line-height:.95;
  color:#FBF5EA; text-shadow:0 2px 22px rgba(20,26,14,.6);
  margin:0 0 .5rem; padding:0 .1em;
}
.portada__fecha{
  border-top:1px solid var(--oro-claro); border-bottom:1px solid var(--oro-claro);
  padding:.6rem 1.3rem; gap:1.1rem;
}
.portada__fecha .fcol{ color:#FBF5EA; letter-spacing:.26em; font-size:.7rem; }
.portada__fecha .fnum{ font-family:var(--f-display); font-weight:500; font-size:2.9rem; color:var(--oro-claro); }
.portada__lugar{ margin-top:.95rem; color:var(--marfil-suave); letter-spacing:.06em; font-size:.9rem; }
.portada__flecha{ bottom:1.7rem; }
.portada__flecha span{ border-color:var(--oro-claro); border-width:1.5px; }
/* En pantallas anchas la película se queda de pie, al centro, y se funde con el jardín */
@media (min-width:700px){
  .portada__pelicula{
    left:50%; right:auto; width:min(100%, 62dvh); transform:translateX(-50%);
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  }
  .portada--pelicula::before{ left:50%; right:auto; width:min(calc(100% - 28px), 60dvh); transform:translateX(-50%); }
}


/* ══════════════════════════════════════════════════════════════════════
   LAS SECCIONES
   ══════════════════════════════════════════════════════════════════════ */
.saludo__nombre{ font-family:var(--f-display); font-style:italic; font-weight:500; color:var(--marca); }
.saludo__pases{
  background:transparent; color:var(--acento);
  border:1px solid var(--marca-claro); border-radius:999px;
  font-family:var(--f-texto); font-weight:500; letter-spacing:.2em; text-transform:uppercase; font-size:.74rem;
  padding:.5rem 1.2rem;
}

/* Bloques champán, con un filete de oro arriba y abajo */
.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:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--marca-claro) 22%, var(--oro) 50%, var(--marca-claro) 78%, transparent);
}
.seccion.alterna::before{ top:0; } .seccion.alterna::after{ bottom:0; }

/* La foto grande: en un ARCO, sobre el verde del jardín */
.momento{
  padding:3.6rem 1.5rem 4rem;
  background:var(--grano-verde), radial-gradient(70% 52% at 50% 46%, #40522F 0%, #27311D 70%, #1E2716 100%);
}
.momento__foto{
  width:min(78%,340px); aspect-ratio:9/14; object-fit:cover; object-position:50% 22%;
  border:0; border-radius:50% 50% 14px 14px / 32% 32% 14px 14px;
  box-shadow:0 0 0 6px var(--verde), 0 0 0 7px var(--oro), 0 0 0 13px var(--verde), 0 0 0 14px rgba(201,164,90,.4), var(--sombra-alta);
}

/* La galería: la ancha, de esquinas suaves; las demás, en arco */
.galeria__grid{ gap:1.1rem; padding:6px; }
.foto img, .foto__hueco{
  border:0; aspect-ratio:4/5;
  border-radius:50% 50% 12px 12px / 40% 40% 12px 12px;
  box-shadow:0 0 0 4px var(--papel), 0 0 0 5px var(--marca-claro), var(--sombra);
}
.foto--ancha img, .foto--ancha .foto__hueco{ aspect-ratio:16/10; border-radius:14px; }
.foto__hueco{ border:1px dashed var(--marca-claro); background:var(--papel-hondo); }

/* Tarjetas: papel con filete de oro */
.cuenta__caja,
.tarjeta,
.notas__lista li,
.faq__item,
.formulario{
  background:#FFFCF5;
  border:1px solid var(--hilo);
  border-radius:var(--radio);
  box-shadow:var(--sombra);
}
.cuenta__caja{ padding:1rem .2rem .8rem; border-radius:50% 50% 14px 14px / 34% 34% 14px 14px; }
.cuenta__caja .n{ font-family:var(--f-display); font-style:italic; font-weight:500; color:var(--marca); font-size:clamp(2rem,9vw,2.6rem); }
.cuenta__caja .l{ letter-spacing:.2em; font-size:.6rem; color:var(--tinta-suave); }
.tarjeta{ padding:1.5rem .8rem 1.3rem; }
.tarjeta__icono{ color:var(--acento); width:40px; height:40px; }
.tarjeta__icono svg{ stroke-width:1.6; }
.tarjeta b{ font-family:var(--f-display); font-weight:600; font-size:1.18rem; color:var(--marca); }
.notas__lista li{ border-left:3px solid var(--oro); }
.faq__item summary{ font-family:var(--f-display); font-weight:600; font-size:1.14rem; color:var(--marca); }
.faq__item summary::after{ color:var(--acento); font-weight:400; }

.dedicatoria__texto{
  font-family:var(--f-display); font-style:italic; font-weight:400;
  font-size:clamp(1.35rem,5.8vw,1.7rem); line-height:1.45; color:var(--marca);
  position:relative; padding:1.9rem .3rem 0;
}
.dedicatoria__texto::before{
  content:"“"; position:absolute; top:-.9rem; left:50%; transform:translateX(-50%);
  font-family:var(--f-display); font-style:normal; font-size:4.6rem; line-height:1; color:var(--oro);
}
.dedicatoria__firma{ font-family:var(--f-display); font-style:italic; font-weight:600; font-size:1.35rem; color:var(--acento); }

.linea::before{ width:1px; background:var(--marca-claro); }
.linea__paso::before{ width:11px; height:11px; left:-5px; top:1.2rem; border:1px solid var(--acento); background:var(--papel-hondo); }
.linea__paso.destaca::before{ background:var(--oro); border-color:var(--acento); box-shadow:0 0 0 4px rgba(201,164,90,.25); }
.linea__hora{ font-family:var(--f-display); font-style:italic; font-weight:600; color:var(--acento); font-size:1.25rem; }
.linea__que b{ font-family:var(--f-display); font-weight:600; font-size:1.22rem; color:var(--marca); }

.mapa{ border:0; border-radius:var(--radio); box-shadow:0 0 0 4px var(--papel), 0 0 0 5px var(--marca-claro), var(--sombra); }
.mapa iframe{ filter:sepia(.18) saturate(.9); }

/* Botones: verde jardín con letra marfil y un filete de oro por dentro */
.boton{
  border-radius:999px; color:#FBF5EA;
  font-family:var(--f-texto); font-weight:600; letter-spacing:.18em; text-transform:uppercase; font-size:.8rem;
  padding:1.05rem 1.7rem;
  background:linear-gradient(180deg, #3C4C2C 0%, #2F3B22 60%, #27311D 100%);
  box-shadow:inset 0 0 0 1px rgba(227,201,140,.55), 0 14px 26px -16px rgba(27,35,20,.9);
}
.boton:active{ transform:translateY(2px); box-shadow:inset 0 0 0 1px rgba(227,201,140,.55); }
.boton--linea{ background:transparent; border:1px solid var(--marca); color:var(--marca); box-shadow:none; }

.formulario{ padding:1.7rem 1.4rem; }
.campo select,.campo textarea,.campo input{ background:#fff; color:var(--tinta); border:1px solid rgba(124,90,30,.45); border-radius:12px; }

/* El pie: vuelve el jardín de noche, con su nombre de firma */
.pie{
  overflow:hidden; color:#FBF5EA;
  background:var(--grano-verde), radial-gradient(90% 70% at 50% 0%, #3A4A2B 0%, #27311D 60%, #19200F 100%);
  border-top:1px solid var(--oro);
}
.pie__nombre{ font-family:var(--f-firma); font-weight:400; font-size:3.4rem; line-height:1.05; color:var(--oro-claro); }
.pie__fecha{ color:var(--marfil-suave); }

.volver{ background:rgba(251,245,234,.94); color:var(--marca); }


/* ══════════════════════════════════════════════════════════════════════
   DETALLES DE PAPELERÍA FINA (los mueve nucleo/detalles.js)
   ══════════════════════════════════════════════════════════════════════ */
/* ORO VIVO: el dorado es una hoja de foil; --luz (-1 a 1) lo recorre al mover el celular o al bajar */
.portada__fecha .fnum, .pie__nombre, .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;
}
.cuenta__caja .n{ background-image:linear-gradient(100deg, #6E5320 0%, #B8923E 30%, #7A5C24 52%, #C9A45A 74%, #6E5320 100%); }
/* PAPEL VEGETAL: una hoja translúcida con su monograma tapa la foto y se levanta al llegar (--velo: 0 tapada, 1 levantada) */
.momento{ --velo:1; }
.momento::after{
  content:"XV"; position:absolute; left:50%; top:3.6rem;
  width:min(78%,340px); aspect-ratio:9/14;
  display:grid; place-items:center;
  font-family:var(--f-display); font-style:italic; font-weight:500; font-size:4.4rem; letter-spacing:.06em; color:rgba(47,59,34,.62);
  background:linear-gradient(160deg, rgba(255,253,246,.9), rgba(246,238,220,.74));
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  border-radius:50% 50% 14px 14px / 32% 32% 14px 14px;
  box-shadow:inset 0 0 0 1px rgba(201,164,90,.7), 0 18px 30px -22px rgba(0,0,0,.7);
  transform-origin:50% 0;
  transform:translateX(-50%) translateY(calc(var(--velo) * -64%)) rotate(calc(var(--velo) * -7deg));
  opacity:calc(1 - var(--velo) * 1.15);
  pointer-events:none;
}