/* ===================================================== */
/* CSS PÁGINA: index.html                                */
/* Función: home / hero / video / faq + footer           */
/* ===================================================== */

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

.hero{
  height: 92vh;

  /* Imagen correcta desde assets/css/pages */
  background: url("../../../DJI_0215.jpg") center center / cover no-repeat;

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

  position: relative;
  color: #ffffff;
  padding-top: 120px;
  overflow: hidden;
}

.hero-overlay{
  background: rgba(0,0,0,0.18);
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-content{
  position: relative;
  z-index: 10;
  text-align: center;

  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);

  padding: 26px 34px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,0.35);

  box-shadow: 0 25px 60px rgba(0,0,0,0.25);
}

/* 1RA EDICIÓN */
.hero-content h3{
  display: inline-block;
  font-family: var(--fuente-titulos);
  font-size: 0.95rem;
  letter-spacing: 3px;

  padding: 8px 18px;
  margin: 0 0 18px;

  border-radius: 999px;
  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(255,255,255,0.45);
}

/* BIENVENIDOS */
.hero-content h1{
  font-family: var(--fuente-titulos);
  font-size: clamp(3rem, 6vw, 4.4rem);
  letter-spacing: 4px;
  margin: 0 0 14px;

  text-shadow: 0 18px 40px rgba(0,0,0,0.45);
}

/* CONGRESO DE ESTÉTICA... */
.hero-content h4{
  font-family: var(--fuente-texto);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 1.4;

  margin: 0;
  opacity: 0.98;
}

/* ===================================================== */
/* HERO – MOBILE                                         */
/* ===================================================== */
@media (max-width: 768px){
  .hero{
    padding-top: 140px;
  }

  .hero-content{
    padding: 18px 20px;
    border-radius: 20px;
  }

  .hero-content h1{
    font-size: 2.6rem;
    letter-spacing: 2.5px;
  }

  .hero-content h4{
    font-size: 1.15rem;
  }
}

/* ===================================================== */
/* INTRO                                                 */
/* ===================================================== */

.intro-section{
  background-color: var(--color-fondo);
  padding: 60px 0 70px;
  margin-top: -40px;
  border-radius: 50px 50px 70px 70px;
}

.intro-wrap{
  max-width: 900px;
  margin: auto;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.94),
    rgba(238,238,238,0.94)
  );

  border-radius: 36px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.10);

  padding: 60px 32px 50px;
  text-align: center;
}

.intro-wrap h2{
  font-family: var(--fuente-titulos);
  font-size: 2.2rem;
  color: var(--verde-principal);
}

.intro-wrap p{
  font-family: var(--fuente-texto);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0.8px;
  color: var(--texto-secundario);
  margin: 18px 0;
}

.save{
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 3px;
  margin-bottom: 28px;
  color: var(--texto-secundario);
}

.btn-box{
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* ===================================================== */
/* TÍTULO VIDEO                                          */
/* ===================================================== */

.video-heading{
  display: block;
  text-align: center;

  font-family: var(--fuente-titulos);
  font-size: 2.1rem;
  color: var(--verde-principal);

  margin: 70px auto 22px;
  letter-spacing: 1px;
}

@media (max-width: 768px){
  .video-heading{
    font-size: 1.6rem;
    margin: 50px auto 18px;
  }
}

/* ===================================================== */
/* VIDEO                                                 */
/* ===================================================== */

.hero-video{
  width: min(100% - 32px, 1100px);
  margin: 0 auto 60px;

  height: min(72vh, 620px);
  overflow: hidden;

  border-radius: 36px;
  background: rgba(255,255,255,0.9);

  border: 1px solid rgba(95,127,99,0.35);
  box-shadow: 0 18px 36px rgba(0,0,0,0.15);
}

.hero-video iframe{
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

@media (max-width: 768px){
  .hero-video{
    height: 52vh;
    border-radius: 24px;
    margin-bottom: 40px;
  }
}

/* ===================================================== */
/* PROPUESTA DE VALOR                                    */
/* ===================================================== */

.valor-section{
  max-width: 900px;
  margin: 40px auto 90px;
  padding: 0 20px;

  font-size: 1.15rem;
  line-height: 1.7;

  color: var(--texto-principal);
  font-family: var(--fuente-texto);
}

.valor-section strong{
  color: var(--verde-principal);
  font-weight: 700;
}

/* ===================================================== */
/* FAQ                                                   */
/* ===================================================== */

.faq-section{
  padding: 20px 0 90px;
}

.faq-card{
  width: min(100% - 32px, 900px);
  margin: 0 auto;

  background: #ffffff;
  border-radius: 40px;
  padding: 42px 36px;

  box-shadow: 0 18px 36px rgba(0,0,0,0.12);
  border: 1px solid rgba(95,127,99,0.18);
}

.faq-title{
  font-family: var(--fuente-titulos);
  font-size: 2.1rem;
  color: var(--verde-principal);
  text-align: center;
  margin-bottom: 22px;
}

.faq-item{
  border-top: 1px solid rgba(0,0,0,0.08);
  padding: 16px 0;
}

.faq-item:first-of-type{
  border-top: none;
}

.faq-item summary{
  cursor: pointer;
  font-family: var(--fuente-titulos);
  font-size: 1.05rem;
  color: var(--texto-principal);
}

.faq-item p{
  margin: 10px 0 0;
  color: var(--texto-secundario);
  line-height: 1.7;
}

@media (max-width: 768px){
  .faq-card{
    padding: 28px 22px;
    border-radius: 28px;
  }

  .faq-title{
    font-size: 1.7rem;
  }
}

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

.site-footer{
  background: var(--verde-header);
  color: #ffffff;
  margin-top: 70px;
  padding: 34px 0 18px;
}

.footer-inner{
  width: min(100% - 32px, var(--container));
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  align-items: stretch;
}

.footer-col{
  min-width: 0;
}

.footer-info{
  padding-right: 18px;
  border-right: 1px solid rgba(255,255,255,0.14); /* línea divisoria leve */
}

.footer-info p{
  margin: 0 0 10px;
  line-height: 1.6;
  color: rgba(255,255,255,0.92);
}

.footer-info a{
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.95;
}

.footer-info a:hover{
  opacity: 1;
}

/* Íconos sociales */
.footer-social{
  margin-top: 14px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.social-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  opacity: 0.95;
  text-decoration: none;
}

.social-link:hover{
  opacity: 1;
}

.social-icon{
  width: 18px;      /* ✅ evita “gigante” */
  height: 18px;     /* ✅ evita “gigante” */
  flex: 0 0 18px;
  display: block;
  color: #ffffff;   /* currentColor */
}

.social-text{
  font-family: var(--fuente-titulos);
  font-size: 0.85rem;
  letter-spacing: 1px;
}

/* Mapa */
.footer-map iframe{
  width: 100%;
  height: 220px;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}

/* Línea + copyright abajo */
.footer-bottom{
  width: min(100% - 32px, var(--container));
  margin: 18px auto 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.14);
  text-align: center;
  color: rgba(255,255,255,0.9);
}

.footer-bottom small{
  font-family: var(--fuente-texto);
  font-size: 0.95rem;
}

/* FOOTER – MOBILE */
@media (max-width: 768px){
  .footer-inner{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .footer-info{
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.14);
    padding-bottom: 16px;
  }

  .footer-map iframe{
    height: 210px;
    border-radius: 16px;
  }

  .social-text{
    font-size: 0.82rem;
  }
}

/* ===================================================== */
/* FIN INDEX                                             */
/* ===================================================== */