/* =========================================================
   Velo de Arena
   El lienzo original mide 375 x 8346 px y se escala completo
   al ancho de la pantalla: 1rem = 1/37.5 del ancho = 10px
   de la maqueta original.
   ========================================================= */

@font-face{
  font-family:'New Icon Serif';
  src:url('../fonts/new-icon-serif.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'New Icon Script';
  src:url('../fonts/new-icon-script.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Honey Vineyard';
  src:url('../fonts/honey-vineyard.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --serif:'New Icon Serif','Times New Roman',serif;
  --script:'Honey Vineyard','Brush Script MT',cursive;
  --cinzel:'Cinzel',serif;
  --body:'Inria Serif',Georgia,serif;
  --btn:#ded2c7;
  --bg:#f2eee6;
}

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

/* La escala real la ajusta main.js con clientWidth; esto es el respaldo. */
html{ font-size:min(calc(100vw / 37.5), 17.07px); -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:#f2eee6 url('../img/textura-floral.png') center/48rem repeat;
  color:#000;
  font-family:var(--body);
  letter-spacing:.084rem;
  overflow-x:hidden;
}
html.bloqueado{ overflow:hidden; }
body.bloqueado{
  position:fixed;
  left:0; right:0; width:100%;
  overflow:hidden;
  overscroll-behavior:none;
}

img{ display:block; width:100%; height:100%; object-fit:cover; }
p,h1,h2,h3,h4,h5,h6,figure,ol,ul{ margin:0; padding:0; }
ol,ul{ list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
.lock__lacre{ width:2.8rem; height:2.8rem; }
.lock__lacre img{ object-fit:contain; }

/* ---------- Lienzo ---------- */
.lienzo{
  position:relative;
  width:37.5rem;
  height:711.2rem;
  margin:0 auto;
  background:transparent;
  overflow:hidden;
}

/* En computadora la invitación se ve como una pieza de papel
   apoyada sobre la mesa: fondo oscuro, tarjeta clara con sombra. */
@media (min-width:900px){
  body{
    background:#cbbda9 url('../img/textura-papel.jpg') center/cover fixed no-repeat;
  }
  body::before{
    content:'';
    position:fixed; inset:0;
    background:radial-gradient(110% 80% at 50% 28%,rgba(255,255,255,.05) 0%,rgba(44,32,20,.34) 55%,rgba(30,21,12,.66) 100%);
    pointer-events:none;
  }
  .lienzo{
    background:#f4f0e8 url('../img/textura-floral.png') center/48rem repeat;
    box-shadow:0 3rem 7rem rgba(30,20,10,.55), 0 0 0 1px rgba(255,255,255,.4) inset;
  }
  .musica{ right:2.4rem; bottom:2.4rem; }
}
.lienzo > *{ position:absolute; }

.txt{ text-align:center; letter-spacing:.084rem; }
.foto{ overflow:hidden; }
.flor img{ object-fit:contain; }

:focus-visible{ outline:2px solid #c7b299; outline-offset:2px; }

/* ---------- Sobre de la portada ---------- */
.a-tarjeta,
.a-foto{
  will-change:transform;
  transition:transform 1.3s cubic-bezier(.2,.88,.26,1.035),
             filter 1.3s ease,
             box-shadow 1.3s ease;
}
.a-tarjeta{
  background:url('../img/tarjeta.png') center/100% 100% no-repeat;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:.3rem; padding:1.4rem 1.6rem 0; text-align:center;
  transform:translateY(15.2rem) rotate(-2.5deg) scale(.978);
  filter:drop-shadow(0 .1rem .3rem rgba(120,100,78,.1));
}
.a-foto{
  overflow:hidden;
  background:#fff; padding:.6rem;
  transform:translateY(13.8rem) rotate(1.5deg) scale(.978);
  box-shadow:0 .1rem .3rem rgba(120,100,78,.12);
}
.a-foto img{ object-position:center 35%; }
/* Replica en miniatura de la invitacion */
/* La tarjeta mide 24.4 rem de alto pero solo asoman 14.5 rem por encima
   del sobre (el cuerpo empieza en 34.1 rem). Todo el texto tiene que caber
   en esa franja, por eso el bloque se alinea arriba y la letra es menor. */
.a-tarjeta__bendicion,
.a-tarjeta__padres,
.a-tarjeta__invitan,
.a-tarjeta__lugar{ font-size:.78rem; line-height:.95rem; letter-spacing:.01rem; color:#4a4038; }
.a-tarjeta__invitan{ margin-top:.2rem; }
.a-tarjeta__nombre{
  font-family:var(--serif); font-size:1.3rem; line-height:1.45rem;
  letter-spacing:.02rem; margin:.3rem 0 .15rem;
}
.a-tarjeta__fecha{
  font-family:var(--cinzel); font-size:1rem; line-height:1.15rem;
  letter-spacing:.05rem; margin-bottom:.2rem;
}

.a-oval{
  background:url('../img/papel-ovalo.png') center/100% 100% no-repeat;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:1.5rem; line-height:1.9rem;
  letter-spacing:.12rem; text-transform:uppercase; text-align:center;
  opacity:0; transform:translateY(1.2rem) scale(.9);
  pointer-events:none;
  transition:opacity .7s ease, transform .8s cubic-bezier(.18,.85,.25,1);
}

/* Estos elementos tambien llevan la clase .rv, que declara su propia
   transicion mas abajo en la hoja. Con la misma especificidad ganaba .rv
   y se perdian estos tiempos, por eso el selector va doblado. */
/* La sombra de la solapa se apaga antes que la solapa: el papel deja de
   proyectar en cuanto empieza a levantarse. */
.a-f7.rv{ opacity:0; transition:opacity .5s ease; }
.a-f7.rv.is-in{ opacity:.42; }
body.abierto .a-f7.rv{ opacity:0; transition-delay:0s; }

.a-f5.rv,.a-f6.rv{
  transform-origin:50% 0;
  backface-visibility:hidden;
  /* La curva arranca lenta (el papel se despega) y despues suelta el
     giro. La solapa pasa detras de la tarjeta a los .40 s y solo se
     apaga al final, cuando ya quedo casi plana contra el respaldo. */
  transition:transform 1.35s cubic-bezier(.32,.01,.24,1),
             opacity .26s ease .58s,
             z-index 0s linear .4s;
}
.a-f5{ transform:perspective(70rem) rotateX(0deg);
  filter:drop-shadow(0 .5rem .7rem rgba(84,70,52,.22)); }
.a-f6{ transform:perspective(70rem) scaleX(-1) rotateX(0deg); }

.a-clic.rv,.a-kicker.rv,.a-grito.rv{ transition:opacity .55s ease; }
.a-heart.rv{ animation:latido 2.6s ease-in-out infinite;
  transition:opacity .42s ease .06s, transform .6s cubic-bezier(.36,.66,.3,1); }

/* Orden: opacity, transform. El lacre se despega antes que nada. */
body.abierto .a-heart.rv{
  opacity:0; pointer-events:none; animation:none;
  transform:translate(-.9rem,-1.1rem) rotate(-16deg) scale(.78);
  transition-delay:.06s, 0s;
}
body.abierto .a-clic.rv,
body.abierto .a-kicker.rv,
body.abierto .a-grito.rv{ opacity:0; pointer-events:none; }

/* Orden de las propiedades: transform, opacity, z-index.
   La opacidad espera a los .58 s, que es cuando el giro pasa por los
   90 grados y la solapa esta de canto: ahi apagarla no se nota. */
body.abierto .a-f5.rv{
  transform:perspective(70rem) rotateX(-166deg);
  opacity:0; z-index:0;
  transition-delay:0s, .58s, .4s;
}
body.abierto .a-f6.rv{
  transform:perspective(70rem) scaleX(-1) rotateX(-166deg);
  opacity:0; z-index:0;
  transition-delay:0s, .58s, .4s;
}

body.abierto .a-tarjeta{
  transform:translateY(0) rotate(-5deg) scale(1);
  filter:drop-shadow(0 1.4rem 2.4rem rgba(120,100,78,.3));
  transition-delay:.62s;
}
body.abierto .a-foto{
  transform:translateY(0) rotate(4deg) scale(1);
  box-shadow:0 1.4rem 2.4rem rgba(120,100,78,.28);
  transition-delay:.8s;
}
body.abierto .a-oval{
  opacity:1; transform:translateY(0) scale(1); pointer-events:auto;
  transition-delay:1.55s;
}
/* El sobre cede un poco cuando la solapa se abre y vuelve a su sitio,
   como el papel al soltar el peso. Muy corto: se siente mas que se ve. */
body.abierto .a-f0,
body.abierto .a-f1,
body.abierto .a-f2,
body.abierto .a-f3{ animation:sobreAsienta 1.15s cubic-bezier(.3,.7,.3,1) .08s both; }
@keyframes sobreAsienta{
  0%  { transform:translateY(0); }
  24% { transform:translateY(.42rem); }
  100%{ transform:translateY(0); }
}

.a-oval.llama,
.a-heart.llama{ animation:llamada 1.1s ease-in-out 2; }
@keyframes llamada{
  0%,100%{ transform:translateY(0) scale(1); }
  30%    { transform:translateY(-.4rem) scale(1.08); }
  60%    { transform:translateY(0) scale(.99); }
}

/* ---------- Sombras y detalles ---------- */
html{ scroll-behavior:smooth; }

.f-card1,.f-card2,.z-card{ box-shadow:0 1.6rem 3.4rem rgba(120,100,78,.24); }
.f-img1,.f-img2,.z-img,.hs-img{ box-shadow:0 .6rem 1.6rem rgba(120,100,78,.16); }
.ff1,.ff2{ box-shadow:inset 0 0 7rem rgba(60,48,36,.14); }
.z-bar{ box-shadow:0 -.2rem 1.4rem rgba(120,100,78,.14); }
.z-firma a{ transition:opacity .25s ease; }
.z-firma a:hover{ opacity:.6; }
.i-f5,.a-tarjeta{ border-radius:.2rem; }

/* ---------- Botones ---------- */
.btn{
  box-shadow:0 .4rem 1rem rgba(120,100,78,.16);
}
.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--btn);
  border-radius:.5rem;
  font-size:1.4rem;
  line-height:1.54rem;
  letter-spacing:.084rem;
  transition:filter .25s ease, transform .25s ease, box-shadow .25s ease;
}
.btn:hover{ filter:brightness(.97); transform:translateY(-.15rem); box-shadow:0 .8rem 1.8rem rgba(120,100,78,.26); }
.btn:active{ transform:translateY(0); box-shadow:0 .3rem .8rem rgba(120,100,78,.18); }
.a-oval:hover{ transform:translateY(-.2rem) scale(1.03); }

/* ---------- Cuenta regresiva ---------- */
.c-grid{ display:flex; justify-content:space-between; }
.c-item{ width:7.6rem; text-align:center; }
.c-num{ font-family:var(--serif); font-size:3.6rem; line-height:4.2rem; }
.c-lbl{ font-size:1.5rem; line-height:1.8rem; margin-top:1rem; letter-spacing:normal; }

/* ---------- Pantalla de bloqueo ---------- */
.lock{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  transition:opacity 1.1s ease, visibility 1.1s ease;
}
.lock__photo{
  position:absolute; inset:0;
  background:url('../img/portada.jpg') center/cover no-repeat;
  transform:scale(1.08);
  animation:acercar 14s ease-out forwards;
}
.lock__veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(38,30,22,.52) 0%,rgba(38,30,22,.3) 42%,rgba(38,30,22,.64) 100%);
}
.lock__inner{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(14px,2.4vh,28px);
  padding:0 6vw;
  text-align:center; color:#fff;
}
.lock__kicker{
  font-size:clamp(10px,1.1vw,13px);
  letter-spacing:.42em; text-transform:uppercase;
  opacity:0; animation:subir 1.1s .25s ease-out forwards;
}
.lock__nombres{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(40px,7.4vw,88px); line-height:1.04;
  text-shadow:0 2px 34px rgba(0,0,0,.38);
  opacity:0; animation:subir 1.2s .45s ease-out forwards;
}
.lock__fecha{
  font-family:var(--cinzel);
  font-size:clamp(12px,1.5vw,17px); letter-spacing:.26em;
  opacity:0; animation:subir 1.2s .65s ease-out forwards;
}
.lock__card{
  display:inline-flex; align-items:center; gap:12px;
  margin-top:clamp(6px,1.4vh,16px);
  padding:clamp(12px,1.6vh,18px) clamp(22px,2.4vw,34px);
  background:rgba(255,255,255,.94);
  border-radius:999px;
  color:#3a352e;
  font-family:var(--body);
  font-size:clamp(14px,1.5vw,18px);
  letter-spacing:.06em;
  box-shadow:0 14px 40px rgba(20,14,8,.3);
  opacity:0;
  animation:subir 1.1s .9s ease-out forwards, respirar 3.4s 2.2s ease-in-out infinite;
  transition:transform .3s ease, box-shadow .3s ease;
}
.lock__card:hover{ transform:translateY(-2px); box-shadow:0 18px 46px rgba(20,14,8,.36); }
.lock__lacre{ width:clamp(22px,2.4vw,30px); height:clamp(22px,2.4vw,30px); flex:none; }
.lock__lacre img{ object-fit:contain; }

body.is-open .lock{ opacity:0; visibility:hidden; }

@keyframes acercar{ to{ transform:scale(1); } }
@keyframes subir{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes respirar{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.025); } }
@keyframes latido{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } }

/* ---------- Codigo de vestimenta: circulos de referencia ---------- */
.d1-colores{
  display:flex; flex-wrap:wrap;
  justify-content:center; align-content:flex-start;
  gap:.42rem;
}
/* 11 circulos por fila: 11 x 1.8 + 10 x 0.42 = 24 rem, cabe en los 24.4 rem
   de ancho util de la tarjeta. */
.color{ display:block; width:1.8rem; height:1.8rem; }
.color__punto{
  display:block; width:100%; height:100%;
  border-radius:50%;
  box-shadow:0 .2rem .5rem rgba(84,70,52,.22), 0 0 0 1px rgba(255,255,255,.55) inset;
}
/* El nombre del color queda solo para lectores de pantalla */
.color__nombre{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- Regalos: opciones ---------- */
.d2-opciones{ display:flex; justify-content:center; gap:.6rem; }
.d2-btn{ flex:1; height:3rem; font-size:1.1rem; padding:0 .2rem; letter-spacing:normal; text-align:center; white-space:nowrap; }

/* ---------- Datos de la cuenta ---------- */
.banco{
  position:fixed; inset:0; z-index:300;
  display:none; align-items:center; justify-content:center;
  padding:2rem;
  background:rgba(60,50,40,.45);
  backdrop-filter:blur(3px);
}
.banco.is-open{ display:flex; }
.banco__caja{
  width:33rem; max-height:90vh; overflow:auto;
  background:#faf7f1;
  border-radius:1rem;
  padding:2.6rem 2.4rem;
  text-align:center;
  box-shadow:0 2rem 5rem rgba(30,22,14,.35);
  animation:bancoEntra .45s cubic-bezier(.18,.85,.25,1);
}
@keyframes bancoEntra{
  from{ opacity:0; transform:translateY(1.6rem) scale(.98); }
  to  { opacity:1; transform:none; }
}
.banco__tit{ font-family:var(--serif); font-size:2.3rem; line-height:2.5rem; margin-bottom:1.8rem; }
.banco__lista{ margin:0; text-align:left; }
.banco__lista dt{
  font-size:1.1rem; letter-spacing:.1rem; text-transform:uppercase;
  color:#7a6a57; margin-top:1.2rem;
}
.banco__lista dt:first-child{ margin-top:0; }
.banco__lista dd{ margin:.2rem 0 0; font-size:1.5rem; line-height:1.9rem; }
.banco__lista--copiable dd:nth-of-type(4){
  cursor:pointer;
  border-bottom:1px dashed #c7b299;
  display:inline-block;
}
.banco__aviso{ margin-top:1.2rem; min-height:1.7rem; font-size:1.3rem; line-height:1.7rem; color:#3f6b46; }
.banco__cerrar{ margin-top:1rem; width:100%; height:3.4rem; background:transparent; border:1px solid #ded2c7; }

/* ---------- Musica ---------- */
/* display:grid gana sobre el atributo hidden del HTML, asi que el
   boton hay que ocultarlo a mano cuando no hay musica. */
.musica[hidden]{ display:none; }
.musica{
  transition:transform .25s ease, box-shadow .25s ease, opacity .3s ease;
  position:fixed; right:1.6rem; bottom:1.6rem; z-index:150;
  width:4.4rem; height:4.4rem;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--btn); color:#3a352e;
  box-shadow:0 .6rem 1.8rem rgba(120,100,78,.25);
}
.musica svg{ width:2rem; height:2rem; }
.musica__off{ display:none; }
.musica.is-off .musica__on{ display:none; }
.musica.is-off .musica__off{ display:block; }
.musica:hover{ transform:scale(1.07); box-shadow:0 .9rem 2.2rem rgba(120,100,78,.32); }
.musica.is-off{ opacity:.55; }

/* ---------- Animaciones ---------- */
/* La entrada: sube, se acerca un poco y frena suave al final, como una
   hoja que se posa. La opacidad va mas rapida que el movimiento para que
   el elemento ya se lea mientras termina de acomodarse. */
.rv{
  opacity:0;
  transform:translateY(2.8rem) scale(.982);
  transition:opacity .95s cubic-bezier(.25,.6,.3,1),
             transform 1.25s cubic-bezier(.18,.72,.24,1);
}
.rv.is-in{ opacity:1; transform:none; }

/* Los papeles y las fotos pesan mas: entran desde un poco mas abajo.
   El estado final se repite con la misma especificidad y despues, si no
   estas reglas le ganarian a .rv.is-in y se quedarian desplazados. */
.flor.rv:not([class*="a-f"]),
.foto.rv{ transform:translateY(3.6rem) scale(.972); }
.flor.rv.is-in,
.foto.rv.is-in{ transform:none; }

.rv[data-d="1"]{ transition-delay:.15s; }
.rv[data-d="2"]{ transition-delay:.3s; }
.rv[data-d="3"]{ transition-delay:.45s; }
.rv[data-d="4"]{ transition-delay:.6s; }

.deriva{ will-change:transform; }

@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  .lock__card{ animation:none; }
}

/* =========================================================
   POSICIONES DEL DISENO ORIGINAL (375 px de ancho)
   ========================================================= */

.a-kicker{ top:21.6rem; left:6.3rem; width:24.9rem; font-size:1.4rem;line-height:1.54rem; }
.a-grito{ top:26.1rem; left:6rem; width:25.5rem; font-family:var(--serif);font-size:3.4rem;line-height:3.06rem; }
.a-tarjeta{ top:19.6rem; left:2.6rem; width:18rem; height:24.4rem; z-index:2; }
.a-foto{ top:21.4rem; left:19.2rem; width:14.8rem; height:21.2rem; z-index:2; }
.a-f0{ top:34.1rem; left:1rem; width:35.2rem; height:26.3rem; z-index:0;background:linear-gradient(#939086,#a8a59a 45%,#b3b0a5);box-shadow:0 1.1rem 2.4rem rgba(84,70,52,.24), 0 .2rem .5rem rgba(84,70,52,.14); }
.a-f1{ top:34.2rem; left:1rem; width:35.2rem; height:26.2rem; z-index:1; }
.a-f2{ top:34.1rem; left:1rem; width:35.2rem; height:26.3rem; z-index:3; }
.a-f5{ top:34.1rem; left:1rem; width:35.2rem; height:20.1rem; z-index:6; }
.a-f3{ top:45.9rem; left:0.3rem; width:36.4rem; height:14.6rem; z-index:4; }
.a-f7{ top:34.6rem; left:1rem; width:35.2rem; height:20.1rem; z-index:5; }
.a-f6{ top:34.1rem; left:1rem; width:35.2rem; height:20.1rem; z-index:6;transform:scaleX(-1); }
.a-oval{ top:49.2rem; left:25rem; width:11.2rem; height:15.4rem; z-index:7; }
.a-clic{ top:45.6rem; left:13.7rem; width:10.1rem; font-size:1.4rem;line-height:1.54rem;z-index:8; }
.a-heart{ top:49.7rem; left:15.5rem; width:6.5rem; height:6.1rem; z-index:8; }
.a-nombres2{ top:66.6rem; left:1.1rem; width:35.3rem; font-family:var(--serif);font-size:3.4rem;line-height:3.74rem; }
.i-veil{ top:81.2rem; left:0rem; width:37.5rem; height:72.8rem; }
.i-f4{ top:87.2rem; left:1.2rem; width:30rem; height:22.6rem; z-index:1; }
.i-f5{ top:91.6rem; left:4.6rem; width:28.5rem; height:43rem; z-index:3; }
.i-heart{ top:90.2rem; left:15.5rem; width:6.6rem; height:7rem; z-index:5; }
.i-bendicion{ top:99.6rem; left:6.2rem; width:25.1rem; z-index:4;font-size:1.4rem;line-height:1.68rem; }
.i-padres1{ top:103rem; left:5.2rem; width:27.1rem; z-index:4;font-size:1.4rem;line-height:1.68rem; }
.i-padres2{ top:105.4rem; left:5.2rem; width:27.1rem; z-index:4;font-size:1.4rem;line-height:1.68rem; }
.i-invitan{ top:109.2rem; left:6.2rem; width:25.1rem; z-index:4;font-size:1.4rem;line-height:1.68rem; }
.i-nombres{ top:115rem; left:3rem; width:31.5rem; z-index:4;font-family:var(--serif);font-size:2.8rem;line-height:3.08rem; }
.i-cuando{ top:121rem; left:6.2rem; width:25.1rem; z-index:4;font-size:1.4rem;line-height:1.68rem; }
.i-fecha{ top:124.4rem; left:6.2rem; width:25.1rem; z-index:4;font-family:var(--cinzel);font-size:2.5rem;line-height:2.5rem; }
.i-lugar{ top:128.8rem; left:5.2rem; width:27.1rem; z-index:4;font-size:1.4rem;line-height:1.68rem; }
.f-card1{ top:155.8rem; left:-25.5rem; width:31.3rem; height:35.7rem; background:#fff; }
.f-img1{ top:157.1rem; left:-24.2rem; width:28.2rem; height:31.2rem; }
.f-card2{ top:174.5rem; left:29.2rem; width:35.8rem; height:36.7rem; background:#fff; }
.f-img2{ top:175.9rem; left:31.8rem; width:31.8rem; height:32.3rem; }
.c-lead{ top:219.4rem; left:1.9rem; width:33.8rem; font-size:1.4rem;line-height:1.68rem; }
.c-grid{ top:224.7rem; left:2.2rem; width:33.1rem; }
.e1-arco{ top:242.5rem; left:1.7rem; width:33.4rem; height:38.7rem; }
.e1-tit{ top:254.3rem; left:6.5rem; width:24.4rem; font-family:var(--serif);font-size:2.5rem;line-height:2.25rem; }
.e1-hora{ top:258.1rem; left:6.5rem; width:24.4rem; font-size:1.4rem;line-height:1.68rem; }
.e1-lug{ top:260.9rem; left:6.5rem; width:24.4rem; font-size:1.4rem;line-height:1.54rem; }
.e1-btn{ top:265.7rem; left:12.2rem; width:13rem; height:2.7rem; }
.d1-ov{ top:281.2rem; left:1.7rem; width:33.4rem; height:38.7rem; }
.d1-tit{ top:292.6rem; left:6.5rem; width:24.4rem; font-family:var(--serif);font-size:2.5rem;line-height:2.5rem; }
.d1-sub{ top:296.4rem; left:6.5rem; width:24.4rem; font-size:1.4rem;line-height:1.68rem; }
.d1-txt{ top:299.8rem; left:6.5rem; width:24.4rem; font-size:1.4rem;line-height:1.68rem; }
.d1-colores{ top:303.6rem; left:6.5rem; width:24.4rem; }
.d2-ov{ top:319.9rem; left:1.7rem; width:33.4rem; height:38.7rem; }
.d2-tit{ top:329rem; left:6.5rem; width:24.4rem; font-family:var(--serif);font-size:2.5rem;line-height:2.5rem; }
.d2-t1{ top:333rem; left:6.5rem; width:24.4rem; font-size:1.2rem;line-height:1.5rem; }
.d2-t2{ top:340.8rem; left:6.5rem; width:24.4rem; font-size:1.2rem;line-height:1.5rem; }
.d2-opciones{ top:345.8rem; left:6.5rem; width:24.4rem; height:3rem; }
.d3-ov{ top:358.6rem; left:1.7rem; width:33.4rem; height:38.7rem; }
.d3-tit{ top:373rem; left:6.5rem; width:24.4rem; font-family:var(--serif);font-size:2.5rem;line-height:2.5rem; }
.d3-txt{ top:377.2rem; left:6.5rem; width:24.4rem; font-size:1.4rem;line-height:1.68rem; }
.ff1{ top:395.2rem; left:0rem; width:37.5rem; height:50.9rem; background:url("../img/foto-banda-1.jpg") center/cover no-repeat; }
.h2-ov{ top:460.2rem; left:1.7rem; width:33.4rem; height:38.7rem; }
.h2-tit{ top:472.3rem; left:6.5rem; width:24.4rem; font-family:var(--serif);font-size:2.5rem;line-height:2.5rem; }
.h2-txt{ top:476.5rem; left:6.5rem; width:24.4rem; font-size:1.4rem;line-height:1.68rem; }
.h2-btn{ top:483.3rem; left:11.9rem; width:13.7rem; height:2.7rem; }
.hs-marco{ top:511.7rem; left:1.5rem; width:34.6rem; height:38.3rem; }
.hs-img{ top:517.8rem; left:6.2rem; width:25.6rem; height:26.2rem; }
.hs-txt{ top:554.6rem; left:4.8rem; width:28rem; font-size:1.4rem;line-height:1.68rem; }
.hs-script{ top:567.8rem; left:-0.7rem; width:39rem; font-family:var(--script);font-size:4rem;line-height:4rem; }
.ff2{ top:564.7rem; left:0rem; width:37.5rem; height:55.6rem; background:url("../img/foto-banda-2.jpg") center/cover no-repeat; }
.r-heart{ top:629rem; left:15.2rem; width:7rem; height:7.4rem; z-index:2; }
.r-flor{ top:630.6rem; left:0.2rem; width:36.9rem; height:40.6rem; }
.r-tit{ top:640rem; left:8.8rem; width:19.7rem; font-family:var(--serif);font-size:2.5rem;line-height:2.5rem; }
.r-txt1{ top:646.2rem; left:8.9rem; width:19.6rem; font-size:1.4rem;line-height:1.68rem; }
.r-txt2{ top:655.4rem; left:8.9rem; width:19.6rem; font-size:1.4rem;line-height:1.68rem; }
.r-btn{ top:661.2rem; left:10.7rem; width:15.9rem; height:2.7rem; }
.z-card{ top:664.9rem; left:-10.5rem; width:26.2rem; height:31.6rem; background:#fff; }
.z-img{ top:666.1rem; left:-9.3rem; width:23.5rem; height:27.3rem; }
.z-flor{ top:668.6rem; left:22.7rem; width:15.8rem; height:21.8rem; }
.z-ss{ top:677.3rem; left:24.6rem; width:12rem; font-family:var(--serif);font-size:5rem;line-height:5rem;color:#ded2c7; }
.z-bar{ top:707.1rem; left:0rem; width:37.5rem; height:4.1rem; background:#ded2c7; }
.z-firma{ top:708.2rem; left:0rem; width:37.5rem; font-size:1.4rem;line-height:1.68rem; }