/* ======================================== */
/* FOREVER BLOOMS — PREMIUM AESTHETIC CSS */
/* ======================================== */

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

body{
  background:#ece5d7;
  color:#111;
  font-family:'Montserrat',sans-serif;
  overflow-x:hidden;
}

/* ======================================== */
/* SCROLLBAR */
/* ======================================== */

::-webkit-scrollbar{
  width:10px;
}

::-webkit-scrollbar-track{
  background:#ece5d7;
}

::-webkit-scrollbar-thumb{
  background:#c8173c;
  border-radius:999px;
}

/* ======================================== */
/* GLOBAL */
/* ======================================== */

section{
  position:relative;
  overflow:hidden;
}

.hidden{
  opacity:0;
  transform:translateY(60px);
  filter:blur(10px);

  transition:
  opacity 1s ease,
  transform 1s ease,
  filter 1s ease;
}

.show{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

/* ======================================== */
/* HEADER */
/* ======================================== */

header{
  width:100%;

  padding:25px 8%;

  position:fixed;
  top:0;
  z-index:1000;

  display:flex;
  justify-content:space-between;
  align-items:center;

  background:rgba(236,229,215,0.75);
  backdrop-filter:blur(14px);

  border-bottom:1px solid rgba(0,0,0,0.05);
}

.logo img{
  width:95px;

  transition:0.4s;
}

.logo img:hover{
  transform:scale(1.05) rotate(-4deg);
}

nav{
  display:flex;
  gap:40px;
}

nav a{
  text-decoration:none;
  color:#111;

  position:relative;

  transition:0.3s;
}

nav a::after{
  content:'';

  position:absolute;
  left:0;
  bottom:-5px;

  width:0%;
  height:2px;

  background:#c8173c;

  transition:0.3s;
}

nav a:hover::after{
  width:100%;
}

nav a:hover{
  color:#c8173c;
}

.contact-btn{
  background:#c8173c;
  color:white;

  text-decoration:none;

  padding:15px 30px;

  border-radius:999px;

  transition:0.35s;

  box-shadow:0 10px 30px rgba(200,23,60,0.2);
}

.contact-btn:hover{
  transform:translateY(-5px);

  box-shadow:0 20px 45px rgba(200,23,60,0.35);
}

/* ======================================== */
/* HERO */
/* ======================================== */

.hero{
  min-height:100vh;

  padding:160px 8% 100px;

  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;

  gap:80px;

  background:
  linear-gradient(
    135deg,
    #f6f0e7,
    #ece5d7
  );
}

/* ENREDADERAS */

.hero::before{
  content:'';

  position:absolute;

  width:700px;
  height:700px;

  top:-120px;
  left:-150px;

  background-image:url('https://www.transparenttextures.com/patterns/flowers.png');

  opacity:0.08;

  transform:rotate(-10deg);

  pointer-events:none;
}

.hero::after{
  content:'';

  position:absolute;

  width:800px;
  height:800px;

  right:-300px;
  bottom:-350px;

  border:2px solid rgba(200,23,60,0.08);

  border-radius:50%;
}

.hero-text{
  position:relative;
  z-index:2;
}

.small-title{
  color:#c8173c;

  letter-spacing:7px;

  margin-bottom:20px;

  font-size:14px;
}

.hero-text h1{
  font-family:'Cormorant Garamond',serif;

  font-size:110px;
  line-height:0.88;
  font-weight:500;
}

.hero-description{
  margin-top:35px;

  max-width:560px;

  line-height:1.9;

  color:#444;
}

.hero-buttons{
  margin-top:45px;

  display:flex;
  gap:20px;
  flex-wrap:wrap;
}

.main-btn{
  background:#c8173c;
  color:white;

  text-decoration:none;

  padding:18px 36px;

  border-radius:999px;

  transition:0.35s;

  box-shadow:0 10px 30px rgba(200,23,60,0.2);
}

.main-btn:hover{
  transform:translateY(-5px) scale(1.04);

  box-shadow:0 20px 45px rgba(200,23,60,0.35);
}

.secondary-btn{
  border:1px solid #111;

  color:#111;
  text-decoration:none;

  padding:18px 36px;

  border-radius:999px;

  transition:0.35s;
}

.secondary-btn:hover{
  background:#111;
  color:white;

  transform:translateY(-5px);
}

.hero-image{
  position:relative;

  display:flex;
  justify-content:center;

  z-index:2;
}

.glow{
  width:550px;
  height:550px;

  position:absolute;

  background:#ebcac6;

  border-radius:50%;

  filter:blur(90px);

  opacity:0.8;

  animation:pulse 5s ease-in-out infinite;
}

.hero-image img{
  width:100%;
  max-width:520px;

  aspect-ratio:4/5;
  object-fit:cover;

  border-radius:45px;

  position:relative;

  box-shadow:
  0 20px 45px rgba(0,0,0,0.15),
  0 0 60px rgba(235,202,198,0.45);

  animation:float 5s ease-in-out infinite;
}

/* ======================================== */
/* FEATURES */
/* ======================================== */

.features{
  padding:140px 8%;

  background:
  linear-gradient(
    to bottom,
    #f5efe6,
    #f9f4ec
  );
}

.features::before{
  content:'';

  position:absolute;

  width:100%;
  height:100%;

  inset:0;

  background-image:
  radial-gradient(
    rgba(200,23,60,0.06) 1px,
    transparent 1px
  );

  background-size:35px 35px;

  opacity:0.5;
}

.features{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

  gap:30px;
}

.feature-card{
  background:rgba(255,255,255,0.55);

  backdrop-filter:blur(12px);

  padding:45px;

  border-radius:35px;

  position:relative;
  z-index:2;

  transition:0.4s;

  border:1px solid rgba(255,255,255,0.5);

  box-shadow:0 15px 35px rgba(0,0,0,0.05);
}

.feature-card:hover{
  transform:translateY(-12px);

  box-shadow:0 25px 50px rgba(0,0,0,0.08);
}

.feature-card h3{
  font-family:'Cormorant Garamond',serif;

  font-size:52px;

  margin-bottom:20px;
}

/* ======================================== */
/* ABOUT */
/* ======================================== */

.about{
  padding:150px 8%;

  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;

  gap:80px;

  background:
  linear-gradient(
    135deg,
    #ebcac6,
    #f1ddd9
  );
}

.about::before{
  content:'';

  position:absolute;

  width:800px;
  height:800px;

  left:-250px;
  top:-250px;

  background:
  radial-gradient(
    circle,
    rgba(255,255,255,0.25) 0%,
    transparent 70%
  );
}

.about::after{
  content:'';

  position:absolute;

  width:100%;
  height:100%;

  inset:0;

  background-image:url('https://www.transparenttextures.com/patterns/vintage-wallpaper.png');

  opacity:0.08;
}

.about-image,
.about-text{
  position:relative;
  z-index:2;
}

.about-image img{
  width:100%;
  height:700px;

  object-fit:cover;

  border-radius:45px;

  box-shadow:0 20px 45px rgba(0,0,0,0.12);
}

.about-text h2{
  font-family:'Cormorant Garamond',serif;

  font-size:85px;
  line-height:0.95;

  margin-bottom:30px;
}

.about-text p{
  line-height:1.9;
  color:#222;

  margin-bottom:25px;
}

/* ======================================== */
/* TITLES */
/* ======================================== */

.section-title{
  text-align:center;

  margin-bottom:75px;

  position:relative;
  z-index:2;
}

.section-title p{
  color:#c8173c;

  letter-spacing:7px;

  margin-bottom:15px;

  font-size:14px;
}

.section-title h2{
  font-family:'Cormorant Garamond',serif;

  font-size:85px;
  font-weight:500;
}

/* ======================================== */
/* CATALOGO */
/* ======================================== */

.catalogo{
  padding:150px 8%;

  background:
  linear-gradient(
    to bottom,
    #faf6f0,
    #f4eee6
  );
}

.catalogo::before{
  content:'';

  position:absolute;

  width:900px;
  height:900px;

  top:-300px;
  right:-250px;

  background:
  radial-gradient(
    circle,
    rgba(200,23,60,0.08) 0%,
    transparent 70%
  );
}

.catalog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

  gap:35px;

  position:relative;
  z-index:2;
}

.catalog-card{
  background:white;

  padding:45px;

  border-radius:40px;

  position:relative;

  overflow:hidden;

  transition:0.4s;

  box-shadow:0 15px 35px rgba(0,0,0,0.06);
}

.catalog-card::before{
  content:'';

  position:absolute;

  width:300px;
  height:300px;

  background:
  radial-gradient(
    circle,
    rgba(235,202,198,0.45) 0%,
    transparent 70%
  );

  top:-120px;
  right:-120px;
}

.catalog-card:hover{
  transform:translateY(-12px);

  box-shadow:0 25px 55px rgba(0,0,0,0.1);
}

.catalog-card h3{
  font-family:'Cormorant Garamond',serif;

  font-size:58px;

  margin-bottom:40px;

  position:relative;
}

.price-line{
  display:flex;
  justify-content:space-between;

  padding-bottom:15px;
  margin-bottom:25px;

  border-bottom:1px solid rgba(0,0,0,0.1);

  position:relative;
}

.price-line strong{
  color:#c8173c;
}

/* ======================================== */
/* EXTRAS */
/* ======================================== */

.extras{
  padding:150px 8%;

  background:
  linear-gradient(
    135deg,
    #ebcac6,
    #f3e1dd
  );
}

.extras::before{
  content:'';

  position:absolute;

  width:100%;
  height:100%;

  inset:0;

  background-image:url('https://www.transparenttextures.com/patterns/leaf.png');

  opacity:0.08;
}

.extras-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

  gap:25px;

  position:relative;
  z-index:2;
}

.extra-card{
  background:rgba(255,255,255,0.5);

  backdrop-filter:blur(10px);

  padding:35px;

  border-radius:30px;

  transition:0.35s;

  box-shadow:0 10px 25px rgba(0,0,0,0.05);
}

.extra-card:hover{
  transform:translateY(-10px);

  box-shadow:0 20px 40px rgba(0,0,0,0.08);
}

.extra-card strong{
  color:#c8173c;
  font-size:24px;
}

/* ======================================== */
/* CTA */
/* ======================================== */

/* ======================================== */
/* CTA */
/* ======================================== */

.cta{
  padding:180px 8%;

  text-align:center;

  background:
  linear-gradient(
    135deg,
    #ebcac6,
    #f3ddd8
  );

  color:#111;

  position:relative;
  overflow:hidden;
}

.cta::before{
  content:'';

  position:absolute;

  width:1200px;
  height:1200px;

  right:-500px;
  top:-500px;

  background:
  radial-gradient(
    circle,
    rgba(255,255,255,0.25) 0%,
    transparent 70%
  );
}

.cta::after{
  content:'';

  position:absolute;

  width:100%;
  height:100%;

  inset:0;

  background-image:url('https://www.transparenttextures.com/patterns/flowers.png');

  opacity:0.05;
}

.cta > *{
  position:relative;
  z-index:2;
}

.cta .small-title{
  color:#c8173c;
}

.cta h2{
  font-family:'Cormorant Garamond',serif;

  font-size:95px;
  line-height:1;

  margin-bottom:40px;
}

.cta .main-btn{
  background:#c8173c;
  color:white;
}

.cta .main-btn:hover{
  background:#111;
  color:white;
}

/* ======================================== */
/* FOOTER */
/* ======================================== */

/* ======================================== */
/* FOOTER */
/* ======================================== */

footer{
  background:#111;

  color:white;

  text-align:center;

  padding:70px 20px 40px;

  position:relative;
}

footer::before{
  content:'';

  position:absolute;

  width:100%;
  height:1px;

  top:0;
  left:0;

  background:
  linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,0.15),
    transparent
  );
}

footer img{
  width:90px;

  margin-bottom:20px;
}

footer h3{
  font-family:'Cormorant Garamond',serif;

  font-size:48px;

  margin-bottom:10px;
}

footer p{
  color:rgba(255,255,255,0.7);

  margin-bottom:8px;
}

.footer-copy{
  margin-top:35px;

  font-size:13px;

  letter-spacing:2px;

  color:rgba(255,255,255,0.4);
}

/* ======================================== */
/* RESPONSIVE */
/* ======================================== */

@media(max-width:1100px){

  .hero,
  .about{
    grid-template-columns:1fr;
  }

  .hero{
    text-align:center;
  }

  .hero-text{
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  .hero-description{
    max-width:100%;
  }

  .hero-buttons{
    justify-content:center;
  }

  .hero-text h1{
    font-size:80px;
  }

  .about-text h2,
  .section-title h2,
  .cta h2{
    font-size:60px;
  }

}

@media(max-width:900px){

  nav{
    gap:18px;
  }

  nav a{
    font-size:13px;
  }

  .contact-btn{
    display:none;
  }

}

  header{
    padding:20px 6%;
  }

}

@media(max-width:600px){

  .hero{
    padding:140px 5% 90px;
  }

  .features,
  .about,
  .catalogo,
  .extras,
  .cta{
    padding-left:5%;
    padding-right:5%;
  }

  .hero-text h1{
    font-size:55px;
  }

  .about-text h2,
  .section-title h2,
  .cta h2{
    font-size:42px;
  }

  .main-btn,
  .secondary-btn{
    width:100%;
    text-align:center;
  }

  .hero-buttons{
    width:100%;
    flex-direction:column;
  }

  .about-image img{
    height:450px;
  }

  .contact-btn{
    display:none;
  }

  .logo img{
    width:75px;
  }

}
/* ======================================== */
/* QUOTE SECTION */
/* ======================================== */

.quote-section{
  padding:140px 8%;

  background:
  linear-gradient(
    to bottom,
    #f7f2ea,
    #efe6d8
  );

  display:flex;
  justify-content:center;
  align-items:center;

  position:relative;
  overflow:hidden;
}

.quote-section::before{
  content:'';

  position:absolute;

  width:100%;
  height:100%;

  inset:0;

  background-image:url('https://www.transparenttextures.com/patterns/flowers.png');

  opacity:0.05;
}

.quote-box{
  position:relative;
  z-index:2;

  max-width:1100px;

  background:
  rgba(255,255,255,0.55);

  backdrop-filter:blur(12px);

  padding:90px 70px;

  border-radius:45px;

  text-align:center;

  border:1px solid rgba(255,255,255,0.4);

  box-shadow:
  0 20px 50px rgba(0,0,0,0.08);
}

.quote-box::before{
  content:'“';

  position:absolute;

  top:-70px;
  left:40px;

  font-size:260px;

  color:rgba(200,23,60,0.08);

  font-family:'Cormorant Garamond', serif;
}

.quote-box p{
  position:relative;

  font-family:'Cormorant Garamond', serif;

  font-size:54px;
  line-height:1.2;

  color:#111;
}

/* RESPONSIVE */

@media(max-width:700px){

  .quote-box{
    padding:55px 30px;
  }

  .quote-box p{
    font-size:34px;
  }

}