/* ==========================================================================
   LATIDO FAMILIAR — inicio.html
   Estilos propios de la portada. Se apoyan en css/style.css (tema base) y
   respetan la paleta y tipografías del Brandbook 2026:
   Grafito #383632 · Jade #3EB489 · Coral #F45B4D · Amanecer #F6B21A · Niebla #F5F1E8
   Tipografías: Montserrat Alternates + Tonase.
   Todas las reglas están acotadas a .page-inicio para no alterar el resto
   de las páginas del sitio.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. NAVEGACIÓN
   -------------------------------------------------------------------------- */
.page-inicio .navbar .site-menu ul li.current a:before {
  width: 100%;
  left: 0;
}

/* --------------------------------------------------------------------------
   02. ENCABEZADO PRINCIPAL (HERO)
   -------------------------------------------------------------------------- */
.page-inicio .slider .events-slider-content .swiper-slide .inner h1,
.page-inicio .slider .events-slider-content .swiper-slide .inner h2 {
  width: 100%;
  display: block;
  font-size: 48px;
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin: 10px 0 0;
}

.page-inicio .slider .events-slider-content .swiper-slide .inner p {
  width: 100%;
  max-width: 94%;
  margin: 25px 0 0;
  font-size: 18px;
  line-height: 1.6;
  opacity: 0.82;
}

.page-inicio .slider .events-slider-content .swiper-slide .inner .slider-button {
  margin-top: 35px;
}

/* Enlaces de participación del hero (Voluntario / Patrocinador / Ponente) */
.lf-hero-paths {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 28px;
}

.lf-hero-paths span {
  width: 100%;
  display: block;
  margin-bottom: 12px;
  font-family: 'Montserrat Alternates', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.5;
}

.lf-hero-paths a {
  display: inline-block;
  margin: 0 10px 0 0;
  padding: 9px 20px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 40px;
  color: #FFFFFF;
  font-family: 'Montserrat Alternates', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

.lf-hero-paths a:hover {
  background: #3EB489;
  border-color: #3EB489;
  color: #FFFFFF;
  text-decoration: none;
  transform: translateY(-2px);
}

.page-inicio .slider .events-slider-content .swiper-slide .inner .location {
  margin-top: 30px;
}

/* --------------------------------------------------------------------------
   03. TEXTOS DE APOYO
   -------------------------------------------------------------------------- */
.lf-lead {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  font-size: 18px;
  line-height: 1.65;
}

.lf-lead--spaced {
  margin-top: 70px;
}

.lf-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.lf-list li {
  width: 100%;
  display: flex;
  align-items: flex-start;
  margin: 0 0 14px;
  padding: 0;
  line-height: 1.55;
}

.lf-list li:last-child {
  margin-bottom: 0;
}

.lf-list li i {
  flex: 0 0 auto;
  margin: 7px 14px 0 0;
  color: #3EB489;
  font-size: 13px;
}

.lf-emphasis {
  width: 100%;
  display: block;
  margin: 25px 0 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  color: #383632;
}

/* --------------------------------------------------------------------------
   04. SECCIONES SOBRE FONDO DE COLOR (Jade / Grafito)
   Se aplica color claro sólo a los títulos de sección y a los textos del
   hero, nunca a las tarjetas blancas que viven dentro de la sección.
   -------------------------------------------------------------------------- */
.lf-on-color .section-title h2 {
  color: #FFFFFF;
}

.lf-on-color .section-title h6 {
  color: #FFFFFF;
  opacity: 0.75;
}

.lf-on-color .section-title p {
  color: #FFFFFF;
  opacity: 0.85;
}

.lf-on-color .section-title figure img {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}

/* --------------------------------------------------------------------------
   05. ETAPAS DEL PROCESO (Identificación · Confrontación · Sanación · Reconstrucción)
   -------------------------------------------------------------------------- */
.lf-stage {
  --lf-accent: #3EB489;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: 40px 35px;
  background: #FFFFFF;
  border: 1px solid #E8E2D6;
  position: relative;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.lf-stage:before {
  content: "";
  width: 60%;
  height: 6px;
  background: var(--lf-accent);
  position: absolute;
  left: -1px;
  top: -1px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.lf-stage:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 60px -35px rgba(56, 54, 50, 0.35);
}

.lf-stage:hover:before {
  width: 85%;
}

.lf-stage__num {
  width: 100%;
  display: block;
  margin-bottom: 22px;
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  color: var(--lf-accent);
}

.lf-stage h5 {
  width: 100%;
  display: block;
  margin-bottom: 14px;
  font-size: 21px;
  font-weight: 700;
}

.lf-stage p {
  width: 100%;
  display: block;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}

.lf-stage.tone-coral {
  --lf-accent: #F45B4D;
}

.lf-stage.tone-amanecer {
  --lf-accent: #F6B21A;
}

.lf-stage.tone-grafito {
  --lf-accent: #383632;
}

/* --------------------------------------------------------------------------
   06. CIFRAS DE IMPACTO
   -------------------------------------------------------------------------- */
.lf-stat {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  padding: 40px 9%;
  background: url("../img/counter-box-bg.svg") center no-repeat #FFFFFF;
  background-size: contain;
  border: 1px solid #DDD;
  position: relative;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.lf-stat:before {
  content: "";
  width: 55%;
  height: 5px;
  background: #3EB489;
  position: absolute;
  left: -1px;
  top: -1px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.lf-stat:hover {
  transform: translateY(-8px);
}

.lf-stat:hover:before {
  width: 85%;
}

.lf-stat figure {
  width: 100%;
  display: block;
  margin: 0 0 18px;
}

.lf-stat figure i {
  font-size: 34px;
  color: #3EB489;
}

.lf-stat__num {
  width: 100%;
  display: block;
  margin-bottom: 10px;
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  color: #383632;
}

.lf-stat h6 {
  width: 100%;
  display: block;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   07. TARJETAS POR ETAPA DE VIDA
   -------------------------------------------------------------------------- */
.lf-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: 35px 30px;
  background: #FFFFFF;
  border: 1px solid #E8E2D6;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.lf-card:hover {
  transform: translateY(-8px);
  border-color: #3EB489;
}

.lf-card figure {
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 22px;
  border-radius: 50%;
  background: rgba(62, 180, 137, 0.12);
}

.lf-card figure i {
  font-size: 22px;
  color: #3EB489;
}

.lf-card h5 {
  width: 100%;
  display: block;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.lf-card p {
  width: 100%;
  display: block;
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   08. LO QUE VIVIRÁN LAS FAMILIAS
   -------------------------------------------------------------------------- */
.lf-features {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.lf-feature {
  width: 100%;
  display: flex;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid #EAE5DA;
}

.lf-feature:last-child {
  border-bottom: none;
}

.lf-feature figure {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 20px 0 0;
  border-radius: 50%;
  background: #F5F1E8;
}

.lf-feature figure i {
  font-size: 19px;
  color: #3EB489;
}

.lf-feature__body {
  width: calc(100% - 74px);
}

.lf-feature__body h5 {
  width: 100%;
  display: block;
  margin-bottom: 5px;
  font-size: 17px;
  font-weight: 700;
}

.lf-feature__body p {
  width: 100%;
  display: block;
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   09. ORGANIZADORES Y COMITÉ
   -------------------------------------------------------------------------- */
.lf-org {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 45px 40px;
  background: #FFFFFF;
  border: 1px solid #E8E2D6;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.lf-org:hover {
  transform: translateY(-8px);
  border-color: #3EB489;
}

.lf-org figure {
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 28px 0 0;
  border-radius: 50%;
  background: #F5F1E8;
}

.lf-org figure i {
  font-size: 30px;
  color: #3EB489;
}

.lf-org .lf-org__body {
  width: calc(100% - 108px);
}

.lf-org h5 {
  width: 100%;
  display: block;
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

.lf-org p {
  width: 100%;
  display: block;
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}

.lf-committee-title {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 60px 0 30px;
  padding-top: 45px;
  border-top: 1px solid #E8E2D6;
}

.lf-committee-title h6 {
  width: 100%;
  display: block;
  margin: 0;
  font-family: 'Montserrat Alternates', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: #3EB489;
}

.lf-person {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: 35px 30px;
  background: #FFFFFF;
  border: 1px solid #E8E2D6;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.lf-person:hover {
  transform: translateY(-8px);
  border-color: #3EB489;
}

.lf-person .lf-person__avatar {
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 20px;
  border-radius: 50%;
  background: #383632;
  color: #FFFFFF;
  font-family: 'Montserrat Alternates', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
}

.lf-person.tone-coral .lf-person__avatar {
  background: #F45B4D;
}

.lf-person.tone-amanecer .lf-person__avatar {
  background: #F6B21A;
  color: #383632;
}

.lf-person h5 {
  width: 100%;
  display: block;
  margin-bottom: 6px;
  font-size: 19px;
  font-weight: 700;
}

.lf-person small {
  width: 100%;
  display: block;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.75;
}

/* --------------------------------------------------------------------------
   10. FORMAS DE PARTICIPAR
   -------------------------------------------------------------------------- */
.lf-path {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: 45px 35px;
  background: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.lf-path:before {
  content: "";
  width: 55%;
  height: 6px;
  background: #F45B4D;
  position: absolute;
  left: -1px;
  top: -1px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.lf-path:hover {
  transform: translateY(-10px);
}

.lf-path:hover:before {
  width: 85%;
}

.lf-path.tone-amanecer:before {
  background: #F6B21A;
}

.lf-path.tone-jade:before {
  background: #3EB489;
}

.lf-path figure {
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 22px;
  border-radius: 50%;
  background: #F5F1E8;
}

.lf-path figure i {
  font-size: 22px;
  color: #383632;
}

.lf-path h5 {
  width: 100%;
  display: block;
  margin-bottom: 15px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.lf-path p {
  width: 100%;
  display: block;
  margin: 0 0 25px;
  font-size: 15px;
  line-height: 1.6;
}

.lf-path .lf-path__link {
  width: 100%;
  display: inline-block;
  margin-top: auto;
  font-family: 'Montserrat Alternates', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #3EB489;
}

.lf-path .lf-path__link i {
  margin-left: 8px;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

.lf-path .lf-path__link:hover {
  text-decoration: none;
  color: #383632;
}

.lf-path .lf-path__link:hover i {
  transform: translateX(6px);
}


/* Separación entre las tarjetas de participación y el formulario */
#formulario {
  margin-top: 70px;
}

/* --------------------------------------------------------------------------
   11. FORMULARIO DE PARTICIPACIÓN
   -------------------------------------------------------------------------- */
.lf-form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 55px;
  background: #FFFFFF;
  border-radius: 2px;
}

.lf-form h5 {
  width: 100%;
  display: block;
  margin-bottom: 12px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  color: #383632;
  font-family: 'Montserrat Alternates', sans-serif;
}

.lf-form .lf-form__intro {
  width: 100%;
  display: block;
  margin-bottom: 30px;
  font-size: 15px;
  line-height: 1.6;
}

.lf-form .col-form-label {
  width: 100%;
}

.lf-form input[type=text],
.lf-form input[type=email],
.lf-form input[type=tel] {
  width: 100%;
  height: 60px;
  padding: 0 25px;
  font-size: 15px;
}

.lf-form .lf-form__legend {
  width: 100%;
  display: block;
  margin: 5px 0 18px;
  font-family: 'Montserrat Alternates', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #383632;
}

.lf-checks {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 30px;
  padding: 0;
}

.lf-checks .lf-check {
  display: flex;
  align-items: center;
  width: 50%;
  margin: 0 0 14px;
  padding: 0 10px 0 0;
  font-size: 15px;
  cursor: pointer;
}

.lf-checks .lf-check input {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 0 12px 0 0;
  padding: 0;
  background: #FFFFFF;
  border: 1px solid #CECECE;
  border-radius: 3px;
  position: relative;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.lf-checks .lf-check input:checked {
  background: #3EB489;
  border-color: #3EB489;
}

.lf-checks .lf-check input:checked:after {
  content: "";
  position: absolute;
  left: 6px;
  top: 1px;
  width: 6px;
  height: 11px;
  border-right: 2px solid #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
  transform: rotate(40deg);
}

.lf-checks .lf-check input:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(62, 180, 137, 0.25);
}

.lf-form .lf-form__note {
  width: 100%;
  display: block;
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   12. CIERRE
   -------------------------------------------------------------------------- */
.lf-closing .custom-button {
  margin-top: 40px;
}

.lf-closing-media {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}

.lf-closing-media figure {
  width: 100%;
  display: block;
  margin: 0 0 35px;
}

.lf-closing-media figure img {
  width: 100%;
  max-width: 300px;
  height: auto;
}

.lf-event-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 35px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.lf-event-info span {
  display: block;
  margin-bottom: 8px;
  font-family: 'Montserrat Alternates', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #F6B21A;
}

.lf-event-info strong {
  display: block;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.25;
  color: #FFFFFF;
}

.lf-event-info small {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: #FFFFFF;
  opacity: 0.6;
}

/* --------------------------------------------------------------------------
   13. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .page-inicio .slider .events-slider-content .swiper-slide .inner h1,
  .page-inicio .slider .events-slider-content .swiper-slide .inner h2 {
    font-size: 42px;
  }
}

@media (max-width: 1024px) {
  .page-inicio .slider .events-slider-content {
    height: 600px;
  }

  .page-inicio .slider .events-slider-content .swiper-slide .inner {
    padding-right: 0;
    margin-bottom: 20px;
  }

  .page-inicio .slider .events-slider-content .swiper-slide .inner h1,
  .page-inicio .slider .events-slider-content .swiper-slide .inner h2 {
    font-size: 36px;
  }

  .page-inicio .slider .events-slider-content .swiper-slide .inner p {
    max-width: 100%;
    font-size: 16px;
    margin-top: 18px;
  }

  .lf-hero-paths a {
    padding: 8px 16px;
    font-size: 11px;
  }

  .lf-stat__num {
    font-size: 38px;
  }

  .lf-org {
    padding: 35px 30px;
  }
}

@media (max-width: 991px) {
  .lf-stage,
  .lf-card,
  .lf-person,
  .lf-path,
  .lf-org {
    margin-bottom: 30px;
  }

  .lf-form {
    padding: 40px;
  }
}

@media (max-width: 767px) {
  .page-inicio .slider .events-slider-content {
    height: 660px;
  }

  .page-inicio .slider .events-slider-content .swiper-slide .inner h1,
  .page-inicio .slider .events-slider-content .swiper-slide .inner h2 {
    font-size: 29px;
  }

  .page-inicio .slider .events-slider-content .swiper-slide .inner p {
    font-size: 15px;
    margin-top: 15px;
  }

  .page-inicio .slider .events-slider-content .swiper-slide .inner .slider-button {
    margin-top: 25px;
  }

  .lf-hero-paths {
    margin-top: 22px;
  }

  .lf-hero-paths span {
    font-size: 11px;
  }

  .lf-hero-paths a {
    padding: 8px 15px;
    font-size: 12px;
    margin-bottom: 8px;
  }

  .lf-lead {
    font-size: 16px;
  }

  .lf-emphasis {
    font-size: 18px;
  }

  .lf-form {
    padding: 30px 22px;
  }

  #formulario {
    margin-top: 40px;
  }

  .lf-form h5 {
    font-size: 23px;
  }

  .lf-checks .lf-check {
    width: 100%;
  }

  .lf-event-info strong {
    font-size: 22px;
  }
}

@media (max-width: 400px) {
  .page-inicio .slider .events-slider-content {
    height: 720px;
  }
}