:root{
  --ink:#342820;
  --text:#6b5c51;
  --gold:#a7824b;
  --gold-dark:#735229;
  --paper:#fff7ea;
  --line:rgba(115,82,41,.22);
  --shadow:0 24px 70px rgba(35,26,20,.22);
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  color:var(--ink);
  background:#e8d7c2;
  overflow:hidden;
}

/* ============================= */
/* ESTRUCTURA LIBRO */
/* ============================= */

.book{
  width:100%;
  height:100svh;
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  overscroll-behavior-x:contain;
}

.book::-webkit-scrollbar{display:none}

.book-page{
  position:relative;
  flex:0 0 100%;
  width:100%;
  height:100svh;
  min-height:100svh;
  overflow:hidden;
  padding:0;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  scroll-snap-align:start;
}

.cover-page{background-image:url("./assets/img/cover.png")}
.story-page{background-image:url("./assets/img/story-page.png")}
.details-page{background-image:url("./assets/img/details-page.png")}
.confirm-page{background-image:url("./assets/img/confirm-page.png")}

.content{
  position:absolute;
  z-index:3;
  text-align:center;
}

/* ============================= */
/* TIPOGRAFÍA BASE */
/* ============================= */

.overline{
  margin:0 0 12px;
  color:var(--gold-dark);
  font-size:.58rem;
  font-weight:800;
  letter-spacing:.24em;
  text-transform:uppercase;
}

h1,
h2{
  margin:0;
  font-family:"Caveat",cursive;
  color:var(--gold-dark);
  font-weight:600;
  letter-spacing:0;
  line-height:.92;
}

p{
  margin:14px auto 0;
  color:#4d4036;
  font-size:.9rem;
  line-height:1.65;
}

.handwritten-text p{
  font-family:"Caveat",cursive;
  color:#5e442b;
}

.handwritten-text .overline{
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
}

/* ============================= */
/* PORTADA - ESCRITORIO / TABLET */
/* ============================= */

.cover-content{
  top:44%;
  left:44%;
  width:520px;
  transform:translate(-50%,-50%) rotate(-27deg);
  transform-origin:center center;
}

.cover-content .overline{
  position:relative;
  left:18px;
  display:inline-block;
  margin-bottom:18px;
  padding:8px 18px;
  border:1px solid rgba(120,86,40,.25);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,248,235,.45),rgba(215,185,140,.12));
  color:#7a5529;
  font-family:"Fraunces",serif;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 4px 12px rgba(90,60,25,.08);
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}

.cover-content .overline::before,
.cover-content .overline::after{
  content:"";
  display:inline-block;
  width:22px;
  height:1px;
  margin:0 10px 3px;
  background:rgba(122,85,41,.45);
}

.cover-content h1{
  position:relative;
  left:42px;
  font-size:clamp(3.2rem,7.4vw,5rem);
  line-height:.9;
  color:#6b4a25;
  text-shadow:0 1px 0 rgba(255,255,255,.25);
}

.cover-content p{
  position:relative;
  left:26px;
  max-width:430px;
  margin-top:14px;
  font-family:"Caveat",cursive;
  font-size:1.35rem;
  line-height:1.35;
  color:#5d442a;
}

.cover-open{
  position:relative;
  left:58px;
  margin-top:24px;
  border:0;
  background:transparent;
  color:#6b4a25;
  font-family:"Caveat",cursive;
  font-size:2rem;
  font-weight:600;
  cursor:pointer;
  transition:.25s ease;
}

.cover-open:hover{transform:scale(1.05)}

/* ============================= */
/* PASAR PÁGINA */
/* ============================= */

.page-next{
  position:absolute;
  right:7%;
  bottom:7%;
  z-index:6;
  border:0;
  border-bottom:1px solid rgba(115,82,41,.45);
  background:transparent;
  color:#72512d;
  font-family:"Caveat",cursive;
  font-size:1.25rem;
  cursor:pointer;
}

/* ============================= */
/* HISTORIA - ESCRITORIO / TABLET */
/* ============================= */

.story-content{
  top:50%;
  left:30%;
  width:360px;
  text-align:left;
  transform:translate(-50%,-50%) rotate(-1.5deg);
}

.story-content .overline{
  font-size:.52rem;
  letter-spacing:.22em;
  text-align:left;
}

.story-content h2{
  font-size:clamp(1.85rem,4.2vw,2.9rem);
  line-height:.95;
  text-align:left;
  color:#6b4a25;
}

.story-content p{
  max-width:320px;
  margin-left:0;
  font-size:1.05rem;
  line-height:1.42;
  text-align:left;
  color:#5b4128;
}

.story-memory-photo{
  position:absolute;
  z-index:4;
  top:50%;
  left:72%;
  width:250px;
  padding:10px 10px 28px;
  background:#f8eddc;
  border:1px solid rgba(115,82,41,.18);
  box-shadow:0 18px 34px rgba(48,31,17,.18),inset 0 1px 0 rgba(255,255,255,.55);
  transform:translate(-50%,-50%) rotate(4deg);
}

.story-memory-photo::before{
  content:"";
  position:absolute;
  top:-16px;
  left:50%;
  width:86px;
  height:30px;
  background:rgba(213,184,137,.42);
  border:1px solid rgba(115,82,41,.12);
  transform:translateX(-50%) rotate(-3deg);
}

.story-memory-photo img{
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  filter:sepia(.18) contrast(.96) saturate(.88);
  border:1px solid rgba(115,82,41,.14);
}

.story-memory-photo small{
  display:block;
  margin-top:10px;
  text-align:center;
  font-family:"Caveat",cursive;
  font-size:1.18rem;
  line-height:1.1;
  color:#6b4a25;
}

/* ============================= */
/* DETALLES - ESCRITORIO / TABLET */
/* ============================= */

.details-content{
  top:49%;
  left:70%;
  width:410px;
  text-align:left;
  transform:translate(-50%,-50%) rotate(2deg);
}

.details-content .overline{
  font-size:.55rem;
  letter-spacing:.22em;
  color:#6f4b25;
}

.details-content h2{
  font-size:clamp(2.35rem,5.4vw,3.6rem);
  line-height:.95;
  color:#6b4a25;
}

.details-content p{
  max-width:380px;
  margin-left:0;
  font-family:"Caveat",cursive;
  font-size:1.22rem;
  line-height:1.38;
  color:#5b4128;
}

.route-notes{
  margin-top:14px;
}

.route-notes p{
  margin:5px 0;
  font-size:1.25rem;
}

.route-notes span{
  color:#6f4b25;
  font-weight:700;
}

.details-memory-photo{
  position:absolute;
  z-index:4;
  top:49%;
  left:29%;
  width:260px;
  padding:10px 10px 28px;
  background:#f8eddc;
  border:1px solid rgba(115,82,41,.18);
  box-shadow:0 18px 34px rgba(48,31,17,.18),inset 0 1px 0 rgba(255,255,255,.55);
  transform:translate(-50%,-50%) rotate(-4deg);
}

.details-memory-photo::before{
  content:"";
  position:absolute;
  top:-15px;
  left:52%;
  width:92px;
  height:30px;
  background:rgba(213,184,137,.42);
  border:1px solid rgba(115,82,41,.12);
  transform:translateX(-50%) rotate(5deg);
}

.details-memory-photo img{
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  filter:sepia(.2) contrast(.96) saturate(.86);
  border:1px solid rgba(115,82,41,.14);
}

.details-memory-photo small{
  display:block;
  margin-top:10px;
  text-align:center;
  font-family:"Caveat",cursive;
  font-size:1.15rem;
  line-height:1.1;
  color:#6b4a25;
}

.travel-stamp{
  position:absolute;
  z-index:3;
  top:15%;
  left:61%;
  width:118px;
  height:118px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid rgba(111,75,37,.38);
  border-radius:50%;
  color:rgba(111,75,37,.52);
  font-family:"Fraunces",serif;
  font-size:.74rem;
  font-weight:600;
  line-height:1.55;
  letter-spacing:.12em;
  text-align:center;
  text-transform:uppercase;
  transform:rotate(-14deg);
  mix-blend-mode:multiply;
  opacity:.72;
}

.travel-stamp::before{
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid rgba(111,75,37,.28);
  border-radius:50%;
}

.travel-stamp::after{
  content:"A&E";
  position:absolute;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  font-size:.8rem;
  letter-spacing:.08em;
  opacity:.65;
}

.details-page::after{
  content:"A&E";
  position:absolute;
  z-index:1;
  right:13%;
  bottom:16%;
  width:190px;
  height:190px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid rgba(111,75,37,.13);
  border-radius:50%;
  color:rgba(111,75,37,.13);
  font-family:"Fraunces",serif;
  font-size:2rem;
  font-weight:600;
  letter-spacing:.08em;
  transform:rotate(12deg);
  mix-blend-mode:multiply;
  pointer-events:none;
}

.details-page::before{
  content:"PREBODA";
  position:absolute;
  z-index:1;
  right:18%;
  bottom:25%;
  color:rgba(111,75,37,.11);
  font-family:"Fraunces",serif;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.18em;
  transform:rotate(12deg);
  pointer-events:none;
}

/* Cuenta atrás */

.countdown{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
  max-width:330px;
}

.countdown div{
  padding:7px 4px;
  border:1px solid rgba(115,82,41,.14);
  background:rgba(255,248,236,.32);
  text-align:center;
}

.countdown strong{
  display:block;
  font-family:"Fraunces",serif;
  color:#75542b;
  font-size:1.18rem;
  line-height:1;
}

.countdown span{
  display:block;
  margin-top:2px;
  color:#6b5c51;
  font-size:.48rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* ============================= */
/* ÚLTIMA PÁGINA */
/* ============================= */

.confirm-content{
  top:47%;
  left:50%;
  width:340px;
  text-align:center;
  transform:translate(-50%,-50%) rotate(0deg);
}

.confirm-content .overline{
  color:#6f4b25;
  font-size:.62rem;
  letter-spacing:.26em;
}

.confirm-content h2{
  font-size:clamp(2.2rem,5vw,3.4rem);
  color:#6b4a25;
  line-height:.95;
}

.confirm-content p{
  max-width:320px;
  margin-top:14px;
  font-family:"Caveat",cursive;
  font-size:1.15rem;
  line-height:1.45;
  color:#5b4128;
}

.main-button{
  min-height:46px;
  margin-top:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:999px;
  padding:12px 22px;
  color:#fff;
  background:linear-gradient(135deg,var(--gold-dark),var(--gold));
  box-shadow:0 12px 28px rgba(115,82,41,.24);
  font:inherit;
  font-size:.86rem;
  font-weight:800;
  cursor:pointer;
}

.confirm-content .main-button{
  margin-top:26px;
  background:linear-gradient(135deg,#704b24,#a78148);
  font-size:.9rem;
}

/* ============================= */
/* MODAL */
/* ============================= */

.modal{
  position:fixed;
  inset:0;
  z-index:50;
  display:grid;
  place-items:center;
  padding:16px;
}

.modal[hidden]{display:none}

.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(34,25,20,.5);
  backdrop-filter:blur(8px);
}

.modal-card{
  position:relative;
  z-index:1;
  width:min(100%,520px);
  max-height:92svh;
  overflow:auto;
  padding:28px 20px;
  border:1px solid var(--line);
  border-radius:28px;
  background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(255,247,234,.98)),var(--paper);
  box-shadow:var(--shadow);
  text-align:center;
}

.modal-close{
  position:absolute;
  top:12px;
  right:14px;
  width:36px;
  height:36px;
  border:0;
  border-radius:50%;
  background:rgba(115,82,41,.1);
  color:var(--gold-dark);
  font-size:1.4rem;
  cursor:pointer;
}

.modal-card h2{
  margin:0;
  font-family:"Caveat",cursive;
  font-size:clamp(2.8rem,8vw,4.2rem);
  color:#6b4a25;
  line-height:.9;
}

.modal-intro{
  max-width:380px;
  margin:12px auto 0;
  font-family:"Caveat",cursive;
  font-size:1.42rem;
  line-height:1.3;
  color:#6b4a25;
}

.confirm-form{
  margin-top:20px;
  display:grid;
  gap:14px;
}

label{
  display:grid;
  gap:7px;
  color:var(--gold-dark);
  font-size:.6rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.form-question{
  display:grid;
  gap:10px;
  text-align:left;
}

.form-question > span{
  color:var(--gold-dark);
  font-size:.6rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

input,
textarea{
  width:100%;
  border:1px solid rgba(115,82,41,.22);
  border-radius:16px;
  padding:14px;
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  font-size:.92rem;
  color:var(--ink);
  background:rgba(255,255,255,.72);
  outline:none;
}

textarea{
  min-height:110px;
  resize:vertical;
}

.choice-group{
  display:grid;
  gap:10px;
}

.choice-group button{
  min-height:48px;
  border:1px solid rgba(115,82,41,.22);
  border-radius:18px;
  background:rgba(255,255,255,.62);
  color:var(--ink);
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  font-size:.92rem;
  font-weight:700;
  cursor:pointer;
  transition:.22s ease;
}

.choice-group button:hover{transform:translateY(-1px)}

.choice-group button.is-selected{
  color:#fff;
  background:linear-gradient(135deg,var(--gold-dark),var(--gold));
}

.form-msg{
  margin-top:18px;
  padding:14px 16px;
  border:1px solid rgba(115,82,41,.18);
  border-radius:18px;
  background:rgba(255,247,234,.64);
  color:#6b4a25;
  font-family:"Caveat",cursive;
  font-size:1.35rem;
  line-height:1.25;
  font-weight:600;
}

/* ============================= */
/* TABLET ANCHA */
/* ============================= */

@media (min-width:760px){
  .book-page{
    padding:48px;
  }

  .choice-group{
    grid-template-columns:1fr 1fr;
  }
}

/* ============================= */
/* MÓVIL DEFINITIVO - LIBRO ABIERTO */
/* ============================= */

@media (max-width:620px){

  body{
    overflow:hidden;
  }

  .book{
    height:100svh;
    min-height:100svh;
  }

  .book-page{
    height:100svh;
    min-height:100svh;
    padding:0;
    overflow:hidden;
    background-size:auto 100%;
    background-position:center center;
  }

  .content{
    position:absolute;
    padding:0;
  }

  .page-next{
    right:18px;
    bottom:20px;
    z-index:8;
    font-size:.95rem;
  }

  /* PORTADA */
  .cover-content{
    top:35%;
    left:50%;
    width:78vw;
    text-align:center;
    transform:translate(-50%,-50%) rotate(-24deg);
  }

  .cover-content .overline{
    left:0;
    margin-bottom:9px;
    padding:5px 9px;
    font-size:.38rem;
    letter-spacing:.12em;
  }

  .cover-content .overline::before,
  .cover-content .overline::after{
    display:none;
  }

  .cover-content h1{
    left:0;
    font-size:2.45rem;
    line-height:.86;
  }

  .cover-content p{
    left:0;
    max-width:66vw;
    margin-top:10px;
    font-size:.98rem;
    line-height:1.18;
  }

  .cover-open{
    left:0;
    margin-top:10px;
    font-size:1.42rem;
  }

  /* HISTORIA: texto en hoja izquierda + foto en hoja derecha */
  .story-content{
    top:47%;
    left:29%;
    width:38vw;
    max-width:38vw;
    text-align:left;
    transform:translate(-50%,-50%) rotate(-1.5deg);
  }

  .story-content .overline{
    text-align:left;
    font-size:.34rem;
    letter-spacing:.11em;
    margin-bottom:7px;
  }

  .story-content h2{
    text-align:left;
    font-size:1.42rem;
    line-height:.88;
  }

  .story-content p{
    max-width:38vw;
    margin:10px 0 0;
    text-align:left;
    font-size:.72rem;
    line-height:1.16;
  }

  .story-memory-photo{
    display:block !important;
    top:51%;
    left:73%;
    width:28vw;
    padding:5px 5px 14px;
    transform:translate(-50%,-50%) rotate(4deg);
  }

  .story-memory-photo::before{
    top:-8px;
    width:48px;
    height:16px;
  }

  .story-memory-photo img{
    display:block;
    width:100%;
    aspect-ratio:4/5;
    object-fit:cover;
  }

  .story-memory-photo small{
    margin-top:6px;
    font-size:.68rem;
    line-height:1;
  }

  /* DETALLES: datos en hoja izquierda + foto en hoja derecha */
  .details-content{
    top:47%;
    left:31%;
    width:42vw;
    max-width:42vw;
    text-align:left;
    transform:translate(-50%,-50%) rotate(1deg);
  }

  .details-content .overline{
    font-size:.34rem;
    letter-spacing:.11em;
    margin-bottom:8px;
  }

  .details-content h2{
    font-size:1.55rem;
    line-height:.88;
  }

  .details-content p,
  .route-notes p{
    max-width:41vw;
    margin:8px 0 0;
    text-align:left;
    font-size:.72rem;
    line-height:1.14;
  }

  .route-notes{
    margin-top:9px;
  }

  .details-content .countdown{
    margin:10px 0 0;
    max-width:40vw;
    grid-template-columns:repeat(2,1fr);
    gap:4px;
  }

  .details-content .countdown div{
    padding:4px 2px;
  }

  .details-content .countdown strong{
    font-size:.78rem;
  }

  .details-content .countdown span{
    font-size:.32rem;
    letter-spacing:.08em;
  }

  .details-memory-photo{
    display:block !important;
    top:54%;
    left:73%;
    width:28vw;
    padding:5px 5px 14px;
    transform:translate(-50%,-50%) rotate(-3deg);
  }

  .details-memory-photo::before{
    top:-8px;
    width:48px;
    height:16px;
  }

  .details-memory-photo img{
    display:block;
    width:100%;
    aspect-ratio:4/5;
    object-fit:cover;
  }

  .details-memory-photo small{
    margin-top:6px;
    font-size:.62rem;
    line-height:1;
  }

  .travel-stamp{
    display:flex !important;
    top:11%;
    left:67%;
    width:62px;
    height:62px;
    font-size:.38rem;
    opacity:.52;
  }

  .travel-stamp::before{
    inset:5px;
  }

  .travel-stamp::after{
    bottom:8px;
    font-size:.42rem;
  }

  /* FINAL */
  .confirm-content{
    top:47%;
    left:50%;
    width:74vw;
    max-width:74vw;
    text-align:center;
    transform:translate(-50%,-50%) rotate(2deg);
  }

  .confirm-content .overline{
    font-size:.42rem;
    letter-spacing:.16em;
  }

  .confirm-content h2{
    font-size:2rem;
    line-height:.9;
  }

  .confirm-content p{
    max-width:68vw;
    font-size:.95rem;
    line-height:1.22;
  }

  .confirm-content .main-button{
    min-height:40px;
    margin-top:14px;
    padding:10px 16px;
    font-size:.76rem;
  }

  /* MODAL MÓVIL */
  .modal{
    padding:8px;
  }

  .modal-card{
    width:96vw;
    max-height:96svh;
    overflow:hidden;
    padding:16px 14px;
    border-radius:22px;
  }

  .modal-close{
    top:8px;
    right:8px;
    width:30px;
    height:30px;
    font-size:1.2rem;
  }

  .modal-card .overline{
    margin-bottom:6px;
    font-size:.46rem;
  }

  .modal-card h2{
    font-size:2.15rem;
    line-height:.88;
  }

  .modal-intro{
    max-width:82vw;
    margin-top:6px;
    font-size:1rem;
    line-height:1.12;
  }

  .confirm-form{
    margin-top:10px;
    gap:7px;
  }

  label,
  .form-question > span{
    gap:4px;
    font-size:.46rem;
    letter-spacing:.1em;
  }

  input,
  textarea{
    padding:8px 10px;
    border-radius:12px;
    font-size:.78rem;
  }

  textarea{
    min-height:50px;
  }

  .choice-group{
    gap:6px;
  }

  .choice-group button{
    min-height:36px;
    border-radius:13px;
    font-size:.76rem;
  }

  .modal-card .main-button{
    min-height:38px;
    margin-top:2px;
    padding:8px 14px;
    font-size:.74rem;
  }

  .form-msg{
    margin-top:7px;
    padding:8px 10px;
    font-size:.95rem;
  }
}

@media (max-width:380px){
  .story-content{left:30%; width:40vw; max-width:40vw;}
  .story-content h2{font-size:1.3rem;}
  .story-content p{font-size:.68rem;}
  .story-memory-photo{left:74%; width:27vw;}

  .details-content{left:31%; width:43vw; max-width:43vw;}
  .details-content h2{font-size:1.42rem;}
  .details-content p,
  .route-notes p{font-size:.68rem;}
  .details-memory-photo{left:74%; width:27vw;}
}