:root{
  --cereza: #b3123b;
  --cereza-oscuro: #3a0714;
  --fucsia: #e63a8c;
  --fucsia-brillo: #ff6fb0;
  --verde: #8bc63f;
  --naranja: #ff8a4c;
  --crema: #fff3ec;
  --sombra: rgba(58,7,20,0.55);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:'Poppins', sans-serif;
  color:var(--crema);
  background:
    radial-gradient(circle at 20% 20%, rgba(230,58,140,0.35), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(255,138,76,0.20), transparent 50%),
    linear-gradient(160deg, var(--cereza-oscuro) 0%, var(--cereza) 55%, #7a0f2e 100%);
  overflow-x:hidden;
  position:relative;
  min-height:100vh;
}

/* ---------- Fondo animado: pétalos y corazones ---------- */
#fondo-flotante{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:1;
  overflow:hidden;
}
.flotante{
  position:absolute;
  top:-10%;
  opacity:0.85;
  will-change: transform;
  animation-name: caer;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}
@keyframes caer{
  0%{ transform: translateY(0) translateX(0) rotate(0deg); }
  50%{ transform: translateY(55vh) translateX(20px) rotate(180deg); }
  100%{ transform: translateY(115vh) translateX(-15px) rotate(360deg); }
}

/* ---------- Contenido ---------- */
.contenedor{
  position:relative;
  z-index:2;
  max-width:900px;
  margin:0 auto;
  padding:0 24px 120px;
}

header.hero{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding-top:40px;
}

.eyebrow{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  letter-spacing:0.35em;
  text-transform:uppercase;
  font-size:0.78rem;
  color:var(--naranja);
  margin-bottom:18px;
  opacity:0.9;
}

h1.te-amo{
  font-family:'Dancing Script', cursive;
  font-weight:700;
  font-size:clamp(4rem, 15vw, 9rem);
  line-height:0.95;
  color:var(--crema);
  text-shadow:
    0 0 25px rgba(255,111,176,0.65),
    0 0 55px rgba(255,138,76,0.35);
  margin-bottom:10px;
  animation: latido 2.6s ease-in-out infinite;
}
@keyframes latido{
  0%, 100%{ transform: scale(1); }
  15%{ transform: scale(1.06); }
  30%{ transform: scale(1); }
  45%{ transform: scale(1.04); }
  60%{ transform: scale(1); }
}

.subtitulo{
  font-family:'Cormorant Garamond', serif;
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  max-width:560px;
  line-height:1.6;
  color:#ffe3ef;
  margin-bottom:36px;
}

.subtitulo strong{ color: var(--verde); font-weight:600; }

.scroll-hint{
  font-size:0.8rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:rgba(255,243,236,0.65);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.scroll-hint span.flecha{
  font-size:1.2rem;
  animation: rebote 1.6s ease-in-out infinite;
}
@keyframes rebote{
  0%,100%{ transform: translateY(0); opacity:0.6; }
  50%{ transform: translateY(8px); opacity:1; }
}

/* ---------- Secciones ---------- */
section{
  padding:90px 0 40px;
}

.titulo-seccion{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:clamp(1.8rem, 4vw, 2.6rem);
  text-align:center;
  margin-bottom:12px;
  color:var(--crema);
}
.titulo-seccion .resaltado{
  color:var(--fucsia-brillo);
  font-style:normal;
  font-weight:600;
}

.linea-decorativa{
  width:70px;
  height:3px;
  margin:0 auto 50px;
  border-radius:6px;
  background:linear-gradient(90deg, var(--verde), var(--naranja), var(--fucsia));
}

/* Tarjetas de razones */
.razones{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
  gap:22px;
}
.razon{
  background:rgba(255,243,236,0.07);
  border:1px solid rgba(255,243,236,0.18);
  backdrop-filter: blur(6px);
  border-radius:18px;
  padding:26px 22px;
  text-align:left;
  transition: transform 0.35s ease, background 0.35s ease, border-color .35s ease;
  cursor:default;
}
.razon:hover{
  transform: translateY(-6px) rotate(-0.5deg);
  background:rgba(255,111,176,0.14);
  border-color:var(--fucsia-brillo);
}
.razon .icono{
  font-size:1.6rem;
  display:inline-block;
  margin-bottom:12px;
}
.razon h3{
  font-family:'Cormorant Garamond', serif;
  font-weight:600;
  font-size:1.25rem;
  margin-bottom:8px;
  color:var(--naranja);
}
.razon p{
  font-size:0.92rem;
  line-height:1.55;
  color:#ffe9f2;
  font-weight:300;
}

/* Jardín interactivo */
.jardin{
  text-align:center;
}
.jardin p.instruccion{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:1.15rem;
  color:#ffe3ef;
  margin-bottom:30px;
}
#lienzo-jardin{
  position:relative;
  height:220px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border:1px dashed rgba(255,243,236,0.25);
  overflow:hidden;
  margin-bottom:26px;
}
.flor-plantada{
  position:absolute;
  bottom:0;
  font-size:2rem;
  transform-origin:bottom center;
  animation: crecer 0.5s ease-out;
}
@keyframes crecer{
  from{ transform: scale(0) translateY(20px); opacity:0; }
  to{ transform: scale(1) translateY(0); opacity:1; }
}

button{
  font-family:'Poppins', sans-serif;
  font-weight:500;
  font-size:0.95rem;
  color:var(--cereza-oscuro);
  background: linear-gradient(90deg, var(--verde), #a9dd63);
  border:none;
  padding:14px 30px;
  border-radius:40px;
  cursor:pointer;
  letter-spacing:0.02em;
  box-shadow: 0 8px 22px rgba(139,198,63,0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
button:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(139,198,63,0.5);
}
button:focus-visible{
  outline:3px solid var(--fucsia-brillo);
  outline-offset:3px;
}

/* Carta final */
.carta{
  background:rgba(255,243,236,0.06);
  border:1px solid rgba(255,243,236,0.18);
  border-radius:24px;
  padding:44px clamp(20px,5vw,60px);
  text-align:center;
  position:relative;
}
.carta::before{
  content:"❦";
  position:absolute;
  top:-22px; left:50%;
  transform:translateX(-50%);
  background:var(--cereza);
  color:var(--naranja);
  font-size:1.4rem;
  width:44px; height:44px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,243,236,0.25);
}
.carta p{
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(1.05rem,2.3vw,1.3rem);
  line-height:1.85;
  color:#ffe9f2;
  max-width:640px;
  margin:0 auto 18px;
}
.firma{
  font-family:'Dancing Script', cursive;
  font-size:2.2rem;
  color:var(--fucsia-brillo);
  margin-top:10px;
}

footer{
  text-align:center;
  padding:40px 0 20px;
  font-size:0.8rem;
  color:rgba(255,243,236,0.5);
  letter-spacing:0.05em;
}
footer .icono-final{ color: var(--fucsia-brillo); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; }
  html{ scroll-behavior:auto; }
}