/* Contenedor */
.tabs-container {
  width: 100%;
  max-width: 1200px;
  margin: 24px auto;
  border: 1px solid #ccc;   /* borde general pedido */
  border-radius: 6px;
  font-family: Arial, Helvetica, sans-serif;
  overflow: hidden;
}

/* Encabezados */
.tab-headers {
  display: flex;
}

.tab-btn {
  flex: 1;
  text-align: center;
  padding: 12px 16px;
  text-decoration: none;
  background: #252525;      /* fondo rojo pedido */
  color: #fff;              /* letra blanca */
  font-weight: 400;         /* letra "blanda" (no bold) */
  cursor: pointer;
  transition: background .2s ease, filter .15s;
  user-select: none;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.tab-btn:last-child { border-right: none; }

.tab-btn:hover { color:#FFF; filter: brightness(.93)!important; }
.tab-btn.active { color:#FFF; background: #ce0000; }

/* Área de contenidos — mantenemos el contenido en el flujo
   y usamos opacity + max-height para animar el "fade". */
.tab-contents {
  position: relative;
}

/* Estado por defecto: oculto visualmente */
.tab-content {
  opacity: 0;
  max-height: 0;               /* colapsa verticalmente */
  overflow: hidden;
  padding: 0 20px;             /* sin padding vertical cuando está cerrado */
  transition: opacity .38s ease, max-height .38s ease, padding .38s ease;
  pointer-events: none;        /* no se puede interactuar mientras está oculto */
}

/* Estado activo: visible */
.tab-content.active {
  opacity: 1;
  max-height: 2400px;          /* debe ser mayor que el contenido esperado */
  padding: 20px;               /* restablece padding vertical */
  pointer-events: auto;
}

/* Pequeña mejora responsive */
@media (max-width: 480px) {
	
	.tab-btn { font-size: 14px; padding: 10px; }
	.tabs-container { margin: 12px; }

  
}