:root{
  --w: 375px;
  --gold: #B58A2C;
  --text: #F6F1E4;
  --muted: #E9E2CF;
}

/* === FUENTES (Inter Tight locales) === */
@font-face{
  font-family:"Inter Tight";
  src:url("./fonts/INTER-REGULAR.woff2") format("woff2");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter Tight";
  src:url("./fonts/INTER-MEDIUM.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter Tight";
  src:url("./fonts/INTER-SEMIBOLD.woff2") format("woff2");
  font-weight:800;
  font-style:normal;
  font-display:swap;
}

/* === ESTILOS GENERALES === */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Inter Tight",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:#2C1F10 url("./img/texture.png") center/cover fixed no-repeat;
  -webkit-font-smoothing:antialiased;
}

.wrap{
  width:var(--w);
  margin:0 auto;
  position:relative;
}

.block{
  position:relative;
  padding:0 24px;
}

/* === LOGO === */
.block--logo{
  padding-top:22px;
  padding-bottom:10px;
}
.logo{
  width:318px;
  display:block;
  margin:0 auto;
  position:relative;
  z-index:2;  /* logo debajo de la hoja 1 pero encima del fondo */
}

/* === HOJAS === */
.leaf{
  position:absolute;
  pointer-events:none;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.5));
}

/* Hoja 1: más a la esquina sin tapar el logo */
.leaf--top-right{
  width:110px;
  right:-10px;   /* antes estaba 10px → la movemos 20px más a la derecha */
  top:140px;      /* antes 72px → la subimos un poco */
  transform:rotate(10deg);
  z-index:3;     /* encima del logo */
}

/* Hoja 2: OK */
.leaf--bottom-left{
  width:170px;
  left:-12px;
  top:-18px;
  transform: rotate(-12deg);
  z-index:2;
}

/* Hoja 3: debe ir por DETRÁS del texto */
.leaf--bottom-right{
  width:168px;
  right:-24px;
  bottom:-18px;
  transform: rotate(6deg);
  z-index:1; /* por debajo del texto */
}

/* === TITULARES === */
.block--titles{ margin-top:40px; }
.h1{
  font-weight:800;
  font-size:54px;
  line-height:1;
  letter-spacing:.2px;
  margin:0 0 12px;
}
.h1--thin{ font-weight:300; }
.subtitle{
  font-weight:300;
  font-size:28px;
  margin:0 0 16px;
  color:var(--muted);
}

/* === INTRO === */
.block--intro p{
  font-weight:300;
  font-size:16px;
  line-height:1.6;
  margin:10px 0;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

/* === LASAÑA === */
.block--dish{
  margin-top:24px;
  padding-bottom:8px;
}
.dish{
  width:330px;
  display:block;
  margin:0 auto;
  border-radius:20px;
}

/* === COPYS SECUNDARIOS === */
.block--copy2{
  margin-top:10px;
  position:relative;
}
/* para que el texto quede por encima de la hoja 3 */
.block--copy2 p{
  font-weight:300;
  font-size:16px;
  line-height:1.6;
  margin:10px 0;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;

  position:relative;
  z-index:3;  /* ← texto por encima de la hoja 3 */
}
.block--copy2 strong{ font-weight:800; }

/* === CTA === */
.block--cta{
  text-align:center;
  margin-top:30px;
  padding-bottom:40px;
}
.note{
  letter-spacing:.28em;
  font-size:11px;
  color:#d8cfb6;
  opacity:.95;
}
.btn{
  display:inline-block;
  margin-top:12px;
  background:#121212;
  color:#fff;
  text-decoration:none;
  padding:16px 22px;
  border-radius:10px;
  font-weight:800;
  font-size:22px;
  border:1px solid rgba(255,255,255,.18);
}
.payments{
  width:210px;
  display:block;
  margin:18px auto 0;
  opacity:.92;
}
/* === EFECTO DORADO AL PASAR EL MOUSE === */
.btn {
  display:inline-block;
  margin-top:12px;
  background:#121212;
  color:#fff;
  text-decoration:none;
  padding:16px 22px;
  border-radius:10px;
  font-weight:800;
  font-size:22px;
  border:1px solid rgba(255,255,255,.18);
  transition: all 0.35s ease; /* suaviza la animación */
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.6), transparent);
  transition: all 0.5s ease;
}

.btn:hover {
  background: linear-gradient(135deg, #D4AF37, #B8860B);
  color: #121212;
  border-color: #FFD700;
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.6);
}

.btn:hover::before {
  left: 100%;
}