/* =========
 VARIABLES (CLARO)
========= */
:root{
  --bg: #F1E3E8;
  --overlay: rgba(255,255,255,.75);
  --card: rgba(207,166,178,.88);
  --card-strong: #be8296f2;
  --text: #2F2F2F;
  --white: #fff;
  --btn-bg:#d8a2ac;
  --btn-text:#ffffff;
  --btn-shadow:rgba(0,0,0,.15);
}



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

html{
  scroll-behavior:smooth;
}

body{
  font-family: "Segoe UI", Tahoma, sans-serif;
  line-height: 1.6;
  color:var(--text);

  background:
    linear-gradient(var(--overlay),var(--overlay)),
    url("../img/main.webp");
  background-size:cover;
  background-position:center;
  background-attachment:fixed;

  padding:28px;
  padding-bottom: 90px;  /* espacio para el botón */
}

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

.hero{
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  margin-top: 60px; /* deja espacio para la barra */
    margin-bottom:70px;
}

.hero-content{
  max-width: 900px;
  padding: 40px 50px;

  background: linear-gradient(
    to bottom right,
    rgba(255,255,255,.75),
    rgba(255,255,255,.55)
  );
  backdrop-filter: blur(8px);

  border-radius: 22px;
  box-shadow: 0 15px 35px rgba(0,0,0,.08);

  transition: transform .25s ease, box-shadow .25s ease;
}

/* pequeño efecto al pasar el ratón */
.hero-content:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 45px rgba(0,0,0,.12);
}

.hero h1{
  font-size: 2.8rem;
  margin-bottom: 12px;
  color: #1f1f1f;
}

.hero p{
  font-size: 1.1rem;
  line-height: 1.6;
  color: #3a3a3a;
  opacity: .85;
}


/* =========
 NAVBAR STICKY
========= */
nav{
  position:sticky;
  top:0;
  padding:12px 0;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.25);
  border-radius:14px;
  margin-bottom:18px;
  text-align:right;
}

nav button{
  padding:8px 14px;
  border-radius:12px;
  border:none;
  cursor:pointer;
  background:var(--card-strong);
  color:#fff;
}

/* =========
 TITULAR
========= */
h1{
  font-size:46px;
  margin-bottom:12px;
}

.intro{
  max-width:780px;
  margin-bottom:22px;
}

/* =========
 GRID
========= */
.grid{
  display:grid;
   max-width: 1100px;        /* para que NO ocupe toda la pantalla */
  margin: 0 auto; 
  gap:40px;
   grid-template-columns: repeat(2, minmax(480px, 1fr));
  margin-top:14px;
}

/* =========
 TARJETAS
========= */
.card{
  display:block;
  text-decoration:none;

  padding:22px;
  border-radius:18px;

  background: var(--card);
  color:white;
  border:1px solid rgba(0,0,0,.08);

  backdrop-filter: blur(6px);

  transition:.3s ease;
  opacity:0;
  transform:translateY(20px);
  animation:fadeUp .7s forwards;
}

/* Animación por orden */
.card:nth-child(1){animation-delay:.1s}
.card:nth-child(2){animation-delay:.2s}
.card:nth-child(3){animation-delay:.3s}
.card:nth-child(4){animation-delay:.4s}
.card:nth-child(5){animation-delay:.5s}
.card:nth-child(6){animation-delay:.6s}
.card:nth-child(7){animation-delay:.7s}
.card:nth-child(8){animation-delay:.8s}
.card:nth-child(9){animation-delay:.9s}

@keyframes fadeUp{
  to{opacity:1; transform:translateY(0);}
}

.card h2{
  margin-bottom:8px;
  font-size:20px;
}

/* Icono con glow */
.card h2 span,
.card h2 i{
  filter:drop-shadow(0 0 6px rgba(255,255,255,.6));
}

/* HOVER */
.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(0,0,0,.25);
  background: var(--card-strong);
}

/* DESTACADO */
.destacado{
  background: var(--card-strong);
}

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

.site-footer{
  margin-top: 60px;
  padding: 18px 25px;

  text-align: center;
  font-size: .95rem;

  background: rgba(255,255,255,.6);
  backdrop-filter: blur(8px);
  border-radius: 16px 16px 0 0;

  box-shadow: 0 -8px 20px rgba(0,0,0,.08);
}

.site-footer p{
  color: #333;
  letter-spacing: .2px;
}

.site-footer span{
  color: #ff4974;
  font-size: 1.1rem;
  display: inline-block;
  transform: translateY(2px);
}


/* =========
 BOTÓN VOLVER ARRIBA
========= */
#top{
  position:fixed;
  right:24px;
  bottom:24px;
  width:48px;
  height:48px;
  border-radius:50%;
  border:none;
  background: var(--card-strong);
  color:#fff;
  font-size:22px;
  cursor:pointer;
  display:grid;
  place-items:center;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  transition:.25s;
}

#top:hover{
  transform:translateY(-5px);
}


/* =========
 MODO OSCURO
========= */
body.dark{
  --bg:#1d1b1c;
  --overlay: rgba(0,0,0,.6);
  --card: rgba(80,50,65,.95);
  --card-strong: rgba(120,70,100,.95);
  --text:#fafafa;
}
body.dark .hero-content{
  background: linear-gradient(
    to bottom right,
    rgba(40,40,40,.75),
    rgba(40,40,40,.55)
  );
  color: white;
}

body.dark .hero p{
  color: #ddd;
}

body.dark .site-footer{
  background: rgba(30,30,30,.6);
  box-shadow: 0 -8px 20px rgba(0,0,0,.35);
}

body.dark .site-footer p{
  color: #e6e6e6;
}

body.dark .site-footer span{
  color: #ff6f91;
}


/* ===== CONTACTO ===== */



.contact-hero{
  margin-top: 60px;
  display: flex;
  justify-content: center;
}

.contact-hero-content{
  max-width: 850px;
  text-align: center;

  background: var(--card);
  backdrop-filter: blur(10px);

  padding: 40px 50px;
  border-radius: 22px;

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

/* Título */
.contact-hero-content h2{
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 2rem;
}

/* Párrafo */
.contact-hero-content p{
  margin-bottom: 18px;
  line-height: 1.6;
  color: var(--text);
}

/* Botón igual al resto */
.contact-hero .volver-btn{
  display:inline-block;
  margin-top:10px;
  padding:10px 16px;
  border-radius:12px;
  text-decoration:none;
  background:#CFA6B2;
  color:white;
}

/* Botón hover */
.contact-hero .volver-btn:hover{
  transform: translateY(-2px);
  box-shadow:0 10px 25px rgba(0,0,0,.12);
  transition:.25s ease;
}




/* =========
 RESPONSIVE
========= */
@media(max-width:1100px){
  .grid{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:700px){
  .grid{grid-template-columns:1fr;}
  h1{font-size:34px;}
  body{padding:14px;}
}

/* 📱 En móviles → 1 columna */
@media (max-width: 820px){
  .grid{
    grid-template-columns: 1fr;
  }
}
@media(max-width:768px){
  .hero-content{
    padding: 28px 22px;
  }

  .hero h1{
    font-size: 2.1rem;
  }
}