.header{
  background-image: url(../img/mujer-adelgazada.jpg);
  background-size: cover;  
  background-position: center center;
  background-repeat: no-repeat;
  height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;  
  align-items: start;     
  text-align: start;
}

.header_alt {
  background-color: var(--color-footer);
  height: 30vh;
  display: flex;
  flex-direction: column;
  justify-content: center;  
  align-items: start;     
  text-align: start;
  position: relative; /* necesario para posicionar el svg dentro */
  overflow: hidden;   /* evita que se desborde */
}

/* Triángulo degradado */
.wave-divider-alt {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 80%; /* podés subirlo o bajarlo */
  z-index: 1;
  pointer-events: none;
}

/* Cambiar imagen en pantallas pequeñas */
.principal {  
  font-family: 'Montserrat', sans-serif;
  font-size: 3.3rem;
  font-weight: 600;
  color: var(--color-textos);  
  text-shadow: 
    1px 0 var(--amarillito),   /* derecha */
    -2px 0 var(--amarillito),  /* izquierda */
    0 1px var(--amarillito),   /* abajo */
    0 -1px var(--amarillito),  /* arriba */
    1px 1px var(--amarillito), /* diagonal */
    -2px -2px var(--amarillito),
  1px -1px var(--amarillito),
    -2px 1px var(--amarillito) ;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 0.3s ease-in-out;
}

.descripcion {
  color: var(--amarillito);
  font-size: 1.5rem;
  letter-spacing: 1px;
  font-family:  'Courgette', cursive;
    text-shadow: 
    1px 0 var(--color-textos),   /* derecha */
    -2px 0 var(--color-textos),  /* izquierda */
    0 1px var(--color-textos),   /* abajo */
    0 -1px var(--color-textos),  /* arriba */
    1px 1px var(--color-textos), /* diagonal */
    -2px -2px var(--color-textos),
  1px -1px var(--color-textos),
    -2px 1px var(--color-textos) ;
}
/* 🌘 Overlay para legibilidad */
.wave-divider {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 80%; /* controla la altura total del triángulo */
  z-index: 1;
  pointer-events: none;
}

.header .overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 0;
}
/*header auth*/
.wave-divider-auth {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 80%;
  z-index: 1;
  pointer-events: none;
}

/* 🎬 Animación de entrada del texto */
.animate-header {
  opacity: 0;
  transform: translateX(-50px);
  animation: slideFadeIn 1s ease forwards;
}

.animate-header-delay {
  opacity: 0;
  transform: translateX(-50px);
  animation: slideFadeIn 1s ease forwards;
  animation-delay: 0.5s;
}

/* 🌀 Animación clave */
@keyframes slideFadeIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.btn-hero {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: var(--amarillito);
  color: var(--color-textos);
  font-weight: bold;
  border-radius: 50px;
  text-decoration: none;
  border: 1px solid black;

  /* Sombra estática */
  box-shadow: 4px 4px 0 black;
  transition: all 0.1s ease;
  position: relative;
}

/* Hover: se mueve hacia la sombra */
.btn-hero:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 black;
}

/* Active: se hunde del todo */
.btn-hero:active {
  transform: translate(6px, 6px);  
  box-shadow: none;
}




/* 🌊 Onda decorativa */
.wave-divider {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  z-index: 1;
}

.titulo-imc{
  color: var(--color-textos);
  font-size: 1.5rem;
  letter-spacing: 0.7px;
  font-family:  'Courgette', cursive;   
}
.titulo-imc:hover{
  text-decoration: underline;
}
/*Barra de navegacion*/
a.nav-link {
  position: relative;
  display: inline-block; 
  font-family: 'Neuton', serif;
  color: var(--color-textos);
  transition: transform 0.2s ease, color 0.2s ease, text-shadow 0.2s ease;
}

a.nav-link:hover {
  transform: translateY(-2px); /* se levanta un poco */
  color: var(--color-textos);

}

a.nav-link:active {
  transform: translateY(2px); /* efecto de estar presionado */
  text-shadow: none;
}
/* === Menú desplegable === */
.dropdown-menu {
  background-color: var(--amarillito);
  border-radius: 6px;
  box-shadow:
    2px 2px 0 var(--color-textos),   /* sombra sólida */
    4px 4px 0 var(--color-textos);   /* más profundidad */
}

/* === Items dentro del menú === */
.dropdown-item {
  color: var(--color-textos);
  font-weight: bold;
  font-family: 'Neuton', serif;
  transition: transform 0.2s ease, background-color 0.2s ease, text-shadow 0.2s ease;
}

.dropdown-item:hover {
  background-color: var(--color-body);
  color: var(--color-textos);
  transform: translateY(-2px); /* se levanta un poquito */
}

.dropdown-item:active {
  transform: translateY(2px); /* hundido */
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.3);
}

/* === Dropdown padre (el botón que abre) === */
.nav-link.dropdown-toggle {
  position: relative;
  display: inline-block;
  font-weight: bold;
  color: var(--color-textos);
  transition: transform 0.2s ease, color 0.2s ease, text-shadow 0.2s ease;
}

.nav-link.dropdown-toggle:hover {
  transform: translateY(-2px);
}

.nav-link.dropdown-toggle:active {
  transform: translateY(2px);
}

/* === Navbar colapsada === */
.navbar-collapse {
  background-color: var(--amarillito);
  border-radius: 6px;
  box-shadow:
    5px 5px 0 var(--color-textos),   /* sombra sólida */
    4px 4px 0 var(--color-textos);   /* más profundidad */
}
/*Boton autenticacion*/


.btn-auth {
  color: var(--color-textos);
  border: 1px solid transparent; /* mantiene el espacio siempre */
  transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-auth:hover {
  transform: scale(1.1);
  border-color: var(--color-textos); /* solo cambia el color, no el ancho */
  box-shadow: 0 0 0 1px var(--color-bg); /* efecto de resplandor */
}

.btn-auth:active {
  transform: scale(0.9);
  border-color: var(--color-textos);
}

.header_auth {  
  background-color: var(--color-footer);
  height: 20vh;
  display: flex;  
  flex-direction: column;
  justify-content: center;  
  align-items: start;     
  text-align: start;
  position: relative;  /* ✅ necesario para el SVG */
  overflow: hidden;    /* ✅ para que no se desborde el SVG */
}


.principal-header-auth {  
  font-size: 3rem;
  font-weight: 600;
  color: var(--color-textos);  
  text-shadow: 
    1px 0 var(--amarillito),   /* derecha */
    -1px 0 var(--amarillito),  /* izquierda */
    0 1px var(--amarillito),   /* abajo */
    0 -1px var(--amarillito),  /* arriba */
    1px 1px var(--amarillito), /* diagonal */
    -1px -1px var(--amarillito),
  1px -1px var(--amarillito),
    -1px 1px var(--amarillito) ;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 0.3s ease-in-out;
}
/* ✅ Reglas responsive al final */
@media (max-width: 576px) {
  .principal {
    font-size: 2.2rem;
    text-align: center;
    
  }

  .descripcion {
    font-size: 1rem;
    text-align: center;
  }

  .header {
    align-items: center;
    text-align: center;
    height: 40vh;
    background-image: none;
    background-color: var(--color-footer);
  }
}