:root {
    --color-principal: #579CF8;
    --color-wa: #25d366;
    --color-icon: #a19f9f;
    --color-text: #626262;
    --color-first_bttn: #FFB347;
    --color-text_bttn: #5D3B09;
    --color-fondo: #E4FBFF;
    --blue: #5AA2FF;      /* fondo */
    --pink: #E878D6;      /* línea vertical */
    --purple: #B379E0;    /* primer círculo */
    --text: #0F172A;
  }
  html{
    overflow-x: hidden;
  }
body{
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    padding-top: 56px;
}

img{
    max-width: 100%;
}

nav{
    position: fixed; 
    width: 100%;
    left: 0;
    top: 0;
    z-index: 99999;     /* siempre al frente */
    background: #fff;   /* necesario para que la sombra se vea */
    box-shadow: 0 8px 18px rgba(0,0,0,.12); /* sombra inferior */
  }
  
  /* contenedor del nav */
  .menu{
    height: 56px;               /* ajusta a tu gusto */
    display: flex;
    align-items: center;
    justify-content: center;    /* centra el logo */
    position: relative;         /* para posicionar el botón */
    padding: 0 16px;
  }
  
  /* logo centrado */
  .logo img{
    height: 26px;     /* ajusta según tu logo */
    width: auto;
    display: block;
  }
  
  /* botón a la derecha, sin mover el centro */
  .menu_bars{
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
  }
  
  /* limpia estilos nativos del botón */
  .menu_burguer{
    all: unset;
    cursor: pointer;
    line-height: 0;
  }
  .menu_burguer svg{ display:block; }
  
  
  .header_img{
    border-left: 15px solid var(--color-principal);
    display:flex;
    justify-content:center;
    align-items:center;
    padding: 22px 0;
    overflow:hidden;      /* recorta excedente */
    position:relative;
  }
  
  .hero_card{
    width: 90%;
    transform: rotate(-8deg);
    border-radius: 16px;
    overflow: hidden;     /* recorta dentro de la tarjeta */
  }
  
  .hero_card img{
    width: 100%;
    height: auto;
    display:block;
  }


.header_text{

    border-left: 15px solid var(--color-principal);
    border-bottom: 15px solid var(--color-principal);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.header_text img{
    max-width: 80%;
    transform: translateX(-200vw) rotate(-420deg);
    opacity: 0;
    will-change: transform, opacity;
}

.header_text h2{
    font-weight: 350;
    color: var(--color-text);
}

.section_1 {
    border-right: 15px solid var(--color-principal);
}

.section_1_text{
    position: relative;
    padding: 28px 20px 28px 64px; /* más aire a la izquierda */
    background: #fff;
  }
  
  /* contenedor decorativo */
  .deco{
    position: absolute;
    left: 18px;
    top: 24px;
    bottom: 24px;
    width: 30px;
  }
  
  /* barra gris (abajo, más baja) */
  .deco_down{
    position: absolute;
    left: 0;
    top: 24px;
    width: 18px;
    height: 85%;
    background: #CFCFCF;
    z-index: 1;
  }
  
  /* barra morada (más corta) */
  .deco_up{
    position: absolute;
    left: 10px;
    top: 0;
    width: 14px;
    height: 70%;
    background: #B98AE6; /* morado */
    z-index: 2;
    border-radius: 2px;
  }
  
  /* texto */
  .section_1_text h1{
    font-weight: 400;
    font-size: 13vw;
    color: #303030;              /* texto principal */
    line-height: 1.15;
  
    text-shadow:
      2px 2px 0 var(--color-principal);         /* sombra azul */
  }
  
  
  .section_1_text p{
    font-size: 18px;
    line-height: 1.6;
    color: #6B7280;
  }
  
  .section_1_img {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .section_1_img img{
    width: 90%;

  }
.section_2{
    background-color: var(--color-principal);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 30px;
}
.section_2_text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.section_2_text h1{
    max-width: 80%;
    font-weight: 450;
    text-align: center;
    color: #ffffff;
}

.section_2_text p{
    max-width: 90%;
    text-align: justify;
    font-weight: 300;
    color: #ffffff;
}

.horarios{
    max-width: 90%;
    background-color: #ffffff;
    border-radius: 5px;
    -webkit-box-shadow: 1px 2px 5px 1px rgba(0,0,0,0.38); 
    box-shadow: 1px 2px 5px 1px rgba(0,0,0,0.38);
    margin-bottom: 25px;
    margin-top: 10px;
}

.horarios li{
    font-weight: 300;
    color: var(--color-text);
    margin: 7px;
}

.iconos{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.iconos_content{
    margin-top: 25px;
}

.line{
    min-height: 120px;
    max-width: 7px;
    margin-left: 55px;
    background-color: var(--color-icon);
    border-radius: 10px;
}

.icon_info{
display: flex;
}

.icon_text{
    padding-left: 20px;
}

.icon_text p{
    font-weight: 300;
    color: #ffffff;
    margin: 0;
}
p.icon_title{
    font-weight: 400;
    font-size: 17px;
    color: #0F172A;
    margin: 0;
}

.icon{

    max-width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon img{
    background-color: var(--color-icon);
    max-width: 120px;
    height: 120px;
    border-radius: 100%;
}
.icon img.active {
    background-color: var(--purple);
}

/* ====== PROGRESO: activar líneas ====== */
.line{
  transition: background-color .35s ease;
}
.line.active{
  background-color: var(--purple);
}

/* ====== APARICIÓN: sin tocar tus estilos de texto ====== */
.icon_info{
  /* mantiene tu display:flex; solo agregamos animación */
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}

.icon_info.revealed{
  opacity: 1;
  transform: translateY(0);
}

/* (opcional) sutil “pop” del icono al activarse */
.icon img{
  transition: background-color .35s ease, transform .35s ease;
}
.icon img.active{
  transform: scale(1.03);
}

.button{
    text-align: center;
    padding: 10px;
    margin-top: 30px;
    width: 95%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.button a{
    background-color: var(--purple);
    text-decoration: none;
    color: #ffffff;
    padding: 10px;
    min-width: 80%;
    -webkit-box-shadow: 1px 2px 5px 1px rgba(0,0,0,0.38); 
    box-shadow: 1px 2px 5px 1px rgba(0,0,0,0.38);

}

.section_3{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.section_3_text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.section_3_text h2{
    text-align: center;
    color: var(--color-text);
}

.section_3_text h3{
    text-align: center;
    color: var(--color-principal);
}

.section_3_text p{
    color: var(--color-text);
    text-align: justify;
    max-width: 90%;
}

footer{
  width: 100%;
}


.second_footer{
  background-color: var(--color-principal);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px;
}

.second_footer p, .second_footer a{
  margin: 0;
  padding: 5px;
  width: 100%;
  text-align: center;
  color: white;
  text-decoration: none;
}