@charset "utf-8";
/* CSS Document */
/* --- ACORDEÓN HORIZONTAL (ESTRUCTURA GENERAL) --- */
.acordeon-horizontal {
  width: 96%;
  margin: 0px auto;
  border: 1px solid #ccc;
  scroll-margin-top: 60px !important; /* 5px extra para que se vea bien la sombra */
}

/* 1. EL CONTENEDOR PADRE (La barra que se pega arriba) */
.tabs-horizontal {
  display: flex;                /* Pone los botones en fila */
  list-style: none !important;  /* MATA LOS PUNTOS/VIÑETAS */
  padding: 0;
  margin: 0;
  border-bottom: 1px solid #ccc;
  
  /* Comportamiento Sticky */
  position: -webkit-sticky;
  position: sticky;
  top: calc(60px + 0px);                  
  z-index: 10 !important;
  background-color: #34525b;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  background: linear-gradient(to right, #34525b 95%, rgba(0,0,0,0.1) 100%);
  /* LA NUEVA PROPIEDAD: Margen de cortesía para el scroll automático */
    /* Ponemos 80px para que al saltar no quede pegado al borde, sino con 10px de aire */
    scroll-margin-top: 60px;
}

/* 2. LOS BOTONES INDIVIDUALES (Los hijos) */
.tab-horizontal {
  flex: 1;                      /* En PC, todos miden lo mismo y se reparten el ancho */
  padding: 10px 15px;
  cursor: pointer;
  color: white;
  background-color:#ac1444; /* ref w3-theme-d2 */
  border-right: 1px solid #ccc;
  text-align: center;
  transition: background-color 0.3s;
  list-style-type: none !important; /* Refuerzo para los puntos */
}

/* Por si acaso, añadimos esto para los elementos de la lista */
.tabs-horizontal li {
  list-style-type: none !important;
}

.tab-horizontal.active {
  background-color:#2c3e50; /* ref w3-flat-midnight-blue */
}

.tab-horizontal:hover {
  background-color:rgba(44,62,80,1);
}

.contenido-horizontal {
  display: none;
  width: 100%; /* Ocupa todo el ancho del acordeón */
  /* Los 70px de cabecera + los ~70px de tus pestañas + 5px de aire */
    /* Ajusta este valor (155px) según veas el resultado en pantalla */
    scroll-margin-top: 120px !important;
}

.contenido-horizontal.active {
  display: block;
  padding: 15px;
}

.contenido-inner {
  width: 98%; /* Para dejar un margen interno si se desea */
  margin: 0 auto;
}

.contenido-inner img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
}
/* BOTON CONTRAER horizontales */
.contraer-horizontal {
  display: block;
  margin: 0.8em auto;
  padding: 3px 10px;
  cursor: pointer;
  background-color: #6b0d2b; /* ref w3-theme-d5  */ 
  font-size: 0.8em; /* Tamaño de la fuente */
  color: white;
  border: none;
  border-radius: 5px;
}


/* COMIENZA VERTICAL */
.acordeon-vertical-desplegable {
  width: 80%;
  margin: 15px auto;
  border: 1px solid #ccc;
}

.tab-vertical-desplegable {
  border-bottom: 1px solid #ccc;
}

.tab-vertical-desplegable:last-child {
  border-bottom: none;
}

.tab-button-vertical {
  display: block;
  width: 100%;
  padding: 10px 15px;
  cursor: pointer;
  color: white;
  background-color:#ac1444; /* ref w3-theme-d2  */
  border: none;
  text-align: center;
  
  /* --- NUEVO: COMPORTAMIENTO PEGADIZO --- */
  position: -webkit-sticky;
  position: sticky;
  top: 60px; /* Se detiene justo debajo de tu cabecera gris */
  z-index: 10 !important; /* Bajamos un pelín de 2000 para evitar conflictos con menús superiores */
  
  /* --- TU MARGEN DE SCROLL (Ya lo tenías, perfecto) --- */
  scroll-margin-top: 80px !important; 
}

.tab-button-vertical.active {
  background-color:#2c3e50; /* ref w3-flat-midnight-blue */
}
.tab-button-vertical:hover {
 background-color:rgba(44,62,80,1); 
}

/* Ocultar todos los contenedores de contenido por su clase */
.contenido-vertical-desplegable {
  display: none;
  overflow: hidden; /* Para transiciones de altura */
  scroll-margin-top: 80px !important;
}

/* Mostrar el contenedor activo por su clase */
.contenido-vertical-desplegable.active {
  display: block;
  padding: 15px;
}

.contenido-vertical-desplegable .contenido-inner {
    width: 100%;
    margin: 0 auto;
    background-color: transparent !important; /* Ya no hay trama */
}

.contenido-vertical-desplegable .contenido-inner::before {
  display: none !important;
  }

.contenido-vertical-desplegable .contenido-inner img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
}
/* BOTON CONTRAER VERTICAL */
.contraer-vertical-desplegable {
  display: block;
  margin: 0.8em auto;
  padding: 3px 10px;
  cursor: pointer;
  background-color: #6b0d2b; /* ref w3-theme-d5  */ 
  font-size: 0.8em; /* Tamaño de la fuente */
  color: white;
  border: none;
  border-radius: 5px;
}

/* Aseguramos que el fondo verde d1 gane a cualquier herencia del acordeón */
.contenido-vertical-desplegable .conefect img,
.contenido-horizontal .conefect img {
    background-color: #6b0d2b !important; /* Forzamos el morado del esqueleto */
}

/* Evitamos que el pseudo-elemento del fondo web (la trama) tape el efecto */
.contenido-vertical-desplegable .contenido-inner {
    z-index: 1; /* Creamos un nuevo contexto de apilamiento */
}


/* --- MODO MÓVIL (CON EFECTO DE DESPLAZAMIENTO) --- */
@media (max-width: 660px) {
  .tabs-horizontal {
    display: flex !important; 
    overflow-x: auto;         
    white-space: nowrap;      
    -webkit-overflow-scrolling: touch;
    /* Añadimos un pequeño margen inicial para que no pegue al borde izquierdo */
    padding-left: 10px; 
  }

  /* Ocultamos la barra de scroll */
  .tabs-horizontal::-webkit-scrollbar {
    display: none;
  }

  .tab-horizontal {
    flex: 0 0 auto;
    /* Ojo aquí: al poner un ancho del 40% o similar, 
       forzamos a que la tercera o cuarta pestaña quede "a medias" */
    width: 140px !important; 
    padding: 12px 10px;
    border-bottom: none !important;
    font-size: 0.9em; /* Un pelín más pequeña para que quepa más texto */
  }
}