/* Contenedor del carrusel */
.header-carrusel {
  position: relative;
  width: 100%;
  height: 62vh;
  overflow: hidden;
}

/* Cada slide del header */
.header-contenedor {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: var(--color-secundario);
  color: #fff;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
}

/* Slide activo */
.header-contenedor.activo {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

/* Si hay imagen en el header, que cubra todo */
.header-contenedor > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* BOTÓN HEADER */
.boton-header-nuevo {
  --color-secundario: #c32c71;
  --color-acento: #f6e58d;
  display: inline-block;
  padding: 0 20px;
  height: 42px;
  line-height: 42px;
  font-family: 'Lato', system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--color-secundario), color-mix(in srgb, var(--color-secundario) 80%, #000 20%));
  overflow: hidden;
  position: relative;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
}

/* Brillo animado sobre el botón */
.boton-header-nuevo::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, rgba(246,229,141,0) 0%, rgba(246,229,141,0.5) 50%, rgba(246,229,141,0) 100%);
  transform: skewX(-20deg);
  animation: shine 3s linear infinite;
}

@keyframes shine {
  0%   { left: -75%; }
  50%  { left: 125%; }
  100% { left: 125%; }
}
/* BOTÓN HEADER CON ANIMACIÓN DE PULSO */
.boton-header-pulso {
  display: inline-block;
  padding: 0 20px;
  height: 42px;
  line-height: 42px;
  font-family: 'Lato', system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--color-secundario), color-mix(in srgb, var(--color-secundario) 80%, #000 20%));
  position: relative;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
  cursor: pointer;
  border: none;
  animation: pulso-boton 2s ease-in-out infinite;
}

/* Animación de pulso que crece y decrece */
@keyframes pulso-boton {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0,0,0,0.35), 
                0 0 0 10px rgba(255, 255, 255, 0.2);
  }
}


@keyframes onda-expandir {
  0% {
    transform: scale(0.9);
    opacity: 1;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

/* Hover - pausa la animación */
.boton-header-pulso:hover {
  animation-play-state: paused;
  transform: scale(1.05);
}

.boton-header-pulso:hover::before {
  animation-play-state: paused;
}
/* BOTÓN HEADER CON FLECHA DESLIZANTE */
.boton-header-navegar {
  display: inline-block;
  padding: 0 32px 0 20px;
  height: 42px;
  line-height: 42px;
  font-family: 'Lato', system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--color-secundario), color-mix(in srgb, var(--color-secundario) 80%, #000 20%));
  position: relative;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
  cursor: pointer;
  border: none;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Flecha animada que se desliza */
.boton-header-navegar::after {
  content: '→';
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  animation: flecha-deslizar 1.5s ease-in-out infinite;
}

@keyframes flecha-deslizar {
  0%, 100% {
    right: 15px;
    opacity: 1;
  }
  50% {
    right: 25px;
    opacity: 0.5;
  }
}

/* Hover - acelera el movimiento */
.boton-header-navegar:hover {
  transform: translateX(5px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}

.boton-header-navegar:hover::after {
  animation: flecha-deslizar 0.8s ease-in-out infinite;
}








/* Contenido del header */
.header-contenido {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: 250px;
}




/* Posiciones del contenido - ABAJO */
.header-contenido.pos-izq-abajo {
  bottom: 50px;
  left: 20px;
  text-align: left;
}

.header-contenido.pos-der-abajo {
  bottom: 50px;
  right: 20px;
  text-align: right;
}

.header-contenido.pos-centro-abajo {
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

/* Posiciones del contenido - CENTRO VERTICAL */
.header-contenido.pos-izq-centro {
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  text-align: left;
}

.header-contenido.pos-der-centro {
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  text-align: right;
}

.header-contenido.pos-centro-centro {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}






/* Título */
.header-contenedor h1 {
  margin: 0;
  text-align: inherit;
  font-family: "Arial Black", Impact, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 900;
  font-size: 30px;
  color: var(--color-primario, #3b82f6);
  text-shadow:
    -1px 0   var(--color-acento, #f59e0b),
     0   1px var(--color-acento, #f59e0b),
     1px 0   var(--color-acento, #f59e0b),
     0  -1px var(--color-acento, #f59e0b);
}

.titulo-linea {
  display: block;
}

/* Controles del carrusel - Flechas minimalistas */
.header-carrusel-prev,
.header-carrusel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: none;
  width: auto;
  height: auto;
  font-size: 60px;
  font-weight: 300;
  cursor: pointer;
  z-index: 1;
  transition: color 0.3s ease, transform 0.3s ease;
  padding: 0;
  line-height: 1;
  animation: pulse-arrow 2s ease-in-out infinite;
}

/* Animación sutil de pulso */
@keyframes pulse-arrow {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

.header-carrusel-prev:hover,
.header-carrusel-next:hover {
  color: rgba(255, 255, 255, 1);
  animation: none; /* Pausa la animación al hacer hover */
}

/* Animación específica de deslizamiento al hover */
.header-carrusel-prev:hover {
  transform: translateY(-50%) translateX(-5px);
}

.header-carrusel-next:hover {
  transform: translateY(-50%) translateX(5px);
}

.header-carrusel-prev {
  left: 10px;
}

.header-carrusel-next {
  right: 10px;
}

/* Indicadores del carrusel */
.header-carrusel-indicadores {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 1;
}

.header-carrusel-indicadores .indicador {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
}

.header-carrusel-indicadores .indicador.activo {
  background: rgba(255, 255, 255, 1);
}

.header-carrusel-indicadores .indicador:hover {
  background: rgba(255, 255, 255, 0.8);
}






/* Posiciones de la imagen de fondo */
.header-contenedor.img-izquierda > img {
  object-position: left center;
}

.header-contenedor.img-derecha > img {
  object-position: right center;
}

.header-contenedor.img-centro > img {
  object-position: center center;
}

.header-contenedor.img-arriba > img {
  object-position: center top;
}

.header-contenedor.img-abajo > img {
  object-position: center bottom;
}

/* Tamaño de imagen - muestra solo un % del ancho */
.header-contenedor.img-10 > img {
  object-fit: none;
  width: 10%;
}

.header-contenedor.img-20 > img {
  object-fit: none;
  width: 20%;
}

.header-contenedor.img-30 > img {
  object-fit: none;
  width: 30%;
}

.header-contenedor.img-50 > img {
  object-fit: none;
  width: 50%;
}

.header-contenedor.img-75 > img {
  object-fit: none;
  width: 75%;
}

.header-contenedor.img-100 > img {
  object-fit: cover;
  width: 100%;
}
















/* ============================================
   DEGRADADOS REUTILIZABLES PARA HEADERS
   ============================================ */

/* Degradado 1 - Diagonal suave */
.degradado-1 {
  background: linear-gradient(135deg, #05BF7D 0%, #048B7E 100%) !important;
}

/* Degradado 2 - Radial desde esquina */
.degradado-2 {
  background: radial-gradient(circle at top right, #FF6B6B 0%, #4ECDC4 100%) !important;
}

/* Degradado 3 - Multicolor en ángulo */
.degradado-3 {
  background: linear-gradient(45deg, #FF8B94 0%, #FFD3B6 50%, #A8E6CF 100%) !important;
}